.page { position: relative; width: 100%; // height: 100%; overflow-x: hidden; // overflow-y: auto; } // 图片 // 商铺信息 .banner { width: 100%; margin-top: -20rpx; border-radius: 30rpx; background-color: #fff; padding: 26rpx 34rpx; .banner-item { border-bottom: 2rpx solid #EBEBEB; padding-bottom: 32rpx; .banner-item-title { font-size: 28rpx; font-weight: 700; line-height: 48rpx; margin-top: 30rpx; } .banner-item-form { .form-item { line-height: 30rpx; font-size: 24rpx; display: flex; justify-content: flex-start; align-items: top; padding: 14rpx 0; } } &:last-child { border-bottom: unset; } } // 基础信息 .info { .info-title { font-weight: bold; font-size: 32rpx; margin-bottom: 24rpx; span { display: inline-block; padding: 0 8rpx; } } .info-text { margin-bottom: 30rpx; } .info-racord { display: flex; justify-content: space-between; align-items: center; .info-price { color: #31AA6A; span { font-size: 40rpx; font-weight: 700; margin-right: 4rpx; } } } } // 场地信息 // 位置信息 .position { .position-info { display: flex; align-items: center; flex-direction: row; margin: 38rpx 22rpx; background-color: #fff; font-size: 24rpx; padding: 20rpx 16rpx; line-height: 30rpx; border-radius: 14rpx; text { margin-left: 10rpx; } } } // 周边商铺 .other-business { .scroll-view_H { white-space: nowrap; width: 100%; } .scroll-view-item_H { display: inline-block; width: 210rpx; margin-right: 22rpx; &:last-child { margin-right: 0; } .business-card { width: 100%; .u-image { overflow: hidden !important; border-radius: 20rpx !important; } .business-card-title { width: 100%; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/ // display: -webkit-box;/*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/ // -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/ // -webkit-box-orient: vertical;/*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排*/ line-height: 30rpx; margin: 10rpx 0; padding: 0 10rpx; } .business-card-item { padding: 0 10rpx; font-weight: 400; font-size: 20rpx; color: #676767; line-height: 1.5; span { font-weight: 700; font-size: 30rpx; color: #000000; } } } } } } /* 底部 */ .page-footer{ position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 125rpx; background-color: #FFFFFF; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); .footer-btn { display: flex; width: 70vw; } .footer-service { display: flex; flex-direction: column; align-items: center; text { margin-top: 6rpx; line-height: 42rpx; } } }