.app{ padding:0 0 0 0; -webkit-overflow-scrolling: touch; } .swiper-box { width: 100%; height: 500rpx; } .swiper-item { height: 500rpx; text-align: center; image{ width: 100%; height: 500rpx !important; } } video{ height: 100%; width: 100%; } .mask { .information { width: 70%; height: 400rpx; margin: 50% auto; background: #FFFFFF; border-radius: 30rpx; text-align: center; color: #FFFFFF; position: relative; .determine, .cancel { width: 200rpx; height: 70rpx; border-radius: 26rpx; font-size: 34rpx; line-height: 70rpx; position: absolute; top: 74%; } .determine { background: #4C7BC9; right: 36rpx; } .cancel { background: #C5BFBF; left: 36rpx; } .title { font-size: 42rpx; margin-top: 40rpx; color: #000000; } image { width: 100rpx; height: 100rpx; margin: 10% 0 0 0; } } } .content { font-size: 34rpx; padding-bottom: 10rpx; // margin-top: -80rpx; z-index: 999; ::v-deep .u-tabs{ padding-bottom: 10rpx; border-radius: 20rpx; } .tive { width: 94%; margin: 20rpx auto; border-radius: 11rpx; padding-bottom: 60rpx; .noorder{ margin-top: 90rpx; } .item { width: 100%; height: 100%; position: relative; background-color: #fff; padding: 30rpx 0; margin: 10rpx auto; border-radius: 20rpx; color: #000000; image { width: 170rpx; height: 170rpx; margin-left: 3%; } // .servicetime { // color: #999999; // line-height: 37rpx; // font-size: 30rpx; // position: absolute; // top:35%; // left:35%; // } .appointment { font-size: 30rpx; width: 120rpx; height: 52rpx; border-radius: 26rpx; color: #ffffff; background: #F44B2F; text-align: center; line-height: 52rpx; position: absolute; top:70%; right:5%; } .price { height: 52rpx; color: #F44B2F; line-height: 52rpx; font-size: 36rpx; position: absolute; top:70%; left:35%; } .product { position: absolute; top:15%; left:35%; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .day{ font-size: 24rpx; position: absolute; top:53%; left:35%; width: 65%; } .huanyao { position: absolute; top:10%; left:35%; width: 45%; line-height: 50rpx; height: 100rpx; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space:normal; word-break:break-all; } .pingfen { float: right; } } .tab-box { display: flex; font-weight: 600; .tab-item { flex-shrink: 0; padding: 3%; position: relative; transition: all 0.2s linear; font-size: 36rpx; &::after { transition: all 0.2s linear; transform: translateX(-50%) scaleX(0); content: ''; width: 50%; position: absolute; left: 50%; bottom: 10rpx; border-radius: 4rpx; } &.active { color: #2979ff; &::after { content: ''; width: 50%; position: absolute; left: 50%; transform: translateX(-50%) scaleX(1); bottom: 10rpx; } } } } } .configuration { margin:20rpx 30rpx 0; padding-bottom: 30rpx; border-bottom: 1rpx solid #CDC9C9; .text { background: #F8D7D1; border-radius: 15rpx; display: inline-block; padding: 10rpx 20rpx; margin-right: 10rpx; font-size: 24rpx; color: #F44B2F; } } .detail { position: relative; width: 94%; height: 100%; margin: 0 auto; background: #FFFFFF; border-radius: 20rpx; margin-top: 3%; font-size: 31rpx; padding: 3%; padding-bottom: 50rpx; .textInfo { word-break:break-all; font-size: 29rpx; text-indent: 2rem; line-height: 42rpx; color: #666666; padding-top: 30rpx; /deep/ .richPic { width: 100% !important; height: 100% !important; } } .Introduction { font-size: 31rpx; color: #333333; line-height: 12rpx; margin-left: -3%; padding: 3%; } } .righttext { position: relative; width: 94%; background-color: #ffffff; border-radius: 20rpx; margin: 10px auto; padding-bottom: 30rpx; .time{ font-size: 30rpx; margin: 10rpx 0; color: #666666; .timeday{ display: inline-block; } .text{ margin:0 10rpx 0 30rpx; display: inline-block; } .texttime{ margin:0 20rpx 0 30rpx; view{ display: inline-block; margin-right: 20rpx; } } } .title { padding-top: 40rpx; margin:0 0 0 30rpx; font-size: 40rpx; line-height: 59rpx; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .address { font-size: 30rpx; color: #666666; margin:40rpx 0 20rpx 30rpx; word-break:break-all; line-height: 50rpx; // overflow: hidden; // text-overflow: ellipsis; // white-space: nowrap; position: relative; .distance{ // position: absolute; // right:30rpx; // top:50%; float: right; display: inline-block; padding-right: 10rpx; } .text{ padding-left: 40rpx; display: inline-block; } image{ position: absolute; top:50%; transform: translateY(-50%); width: 28rpx; height: 35rpx; } } } }