.banner { margin: 0 auto; margin-top: 30rpx; width: 100%; } .banner swiper { margin: 0 auto; width: 710rpx; height: 307rpx; } .cirList { display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-top: 10rpx; padding-bottom: 20rpx; } .cir { width: 6rpx; height: 6rpx; border-radius: 50%; background-color: #333; margin-right: 6rpx; } .active { width: 12rpx; height: 6rpx; border-radius: 100rpx; } .dotList { display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-top: 10rpx; padding-bottom: 20rpx; } .dot { width: 8rpx; height: 8rpx; background: #555555; border-radius: 50%; margin-right: 6rpx; } .active { background: #FF370B; width: 20rpx; height: 8rpx; border-radius: 10rpx 10rpx 10rpx 10rpx; } .line { height: 20rpx; width: 100%; background-color: #f6f7fb; } .serverTitBox { padding: 30rpx 20rpx; box-sizing: border-box; } .serverTit { display: flex; align-items: center; justify-content: space-between; } .serverTit_right { font-size: 26rpx; color: #999999; } .serverTit_left { display: flex; align-items: center; } .tit { font-size: 40rpx; color: #222222; font-weight: 700; } .msg { font-size: 26rpx; color: #E9BE62; display: flex; align-items: center; margin-left: 36rpx; } .serverCon { margin-top: 30rpx; font-size: 26rpx; color: #999999; } .priceSelect { padding: 24rpx 20rpx; } .serverList { padding: 20rpx; box-sizing: border-box; } .serverListTit { font-size: 32rpx; color: #222222; font-weight: 600; } .serverItem { display: flex; padding: 20rpx; border-bottom: 1rpx solid #EBEBEB; } .serverItem_left { width: 140rpx; height: 140rpx; margin-right: 14rpx; border-radius: 20rpx; overflow: hidden; } .serverItem_right { flex: 1; display: flex; align-items: center; justify-content: space-between; } .msg_tit { display: flex; font-size: 30rpx; color: #222222; margin-bottom: 20rpx; } .msg_price { font-size: 26rpx; color: rgba(153, 153, 153, 0.6); display: flex; align-items: center; } .msg_price span { color: #FF370B; } .serverItem_right_btn { width: 180rpx; height: 50rpx; background: #FF370B; border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: #FFFFFF; margin-left: 200rpx; } .range { display: flex; align-items: center; justify-content: space-between; width: 100%; overflow: hidden; /* 防止内容溢出 */ } .minPrice, .maxPrice { width: 70rpx; height: 70rpx; background: #F6F7FB; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #999999; margin-top: 20rpx; } .slider-range { flex: 1 !important; margin: 0 10rpx; /* 添加左右间距 */ min-width: 0; /* 防止 flex 子项溢出 */ } .msg_meta { display: flex; align-items: center; margin-bottom: 12rpx; font-size: 24rpx; color: #666666; } .msg_meta .rating, .msg_meta .distance, .msg_meta .served { display: flex; align-items: center; margin-right: 20rpx; } .infoImage { width: 25rpx; height: 25rpx; margin-right: 5rpx; } .tabs { display: flex; align-items: center; background: #ffffff; height: 100rpx; padding: 0 20rpx; box-sizing: border-box; display: flex; overflow-x: auto; white-space: nowrap; } .tabItem { font-size: 25rpx; color: #222222; margin-right: 60rpx; height: 42rpx; } .active2 { font-size: 25rpx; font-weight: 700; position: relative; } .active2::after { content: ''; background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat; background-size: 100% 100%; width: 52rpx; height: 22rpx; position: absolute; left: 50%; bottom: -16rpx; transform: translateX(-50%); }