renshou/topic/shop/shop.css

/* shop.css */
page{background: #fff;}
.top-fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 50;}
.back{position: absolute;left: 40rpx;}
.back image{width: 22rpx;height: 38rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
.ss{position: absolute;left: 45%;}
.ss image{width: 48rpx;height: 48rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
.guan{position: absolute;left: 55%;font-size: 26rpx;color: #fff;}
.guan-c{position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 150rpx;flex-wrap: nowrap;}
.guan-c image{width: 48rpx;height: 48rpx;margin-right: 10rpx;}
.content{position: relative;padding: 190rpx 0 0;}
.shop-img{width: 100%;height: 290rpx;position: absolute;top: 0;left: 0;right: 0;z-index: 1;}
.shop{background: #fff;border-radius: 10rpx;box-shadow: 0 0 15rpx rgba(0,0,0,.1);margin: 0 20rpx;position: relative;z-index: 2;padding: 20rpx 20rpx 25rpx;}
.shop-name{font-size: 36rpx;color: #000;font-weight: bold;}
.shop-datas{font-size: 24rpx;color: #333;margin-top: 12rpx;}
.shop-pic{width: 86rpx;height: 86rpx;border-radius: 10rpx;position: relative;border: 1rpx solid #c1c1c1;}
.shop-logo{width: 100%;height: 100%;border-radius: 10rpx;}
.shop-news{font-size: 24rpx;color: #8e8e8e;margin-top: 10rpx;}
.coupons{margin-top: 15rpx;}
.coupons .li{background: #fe4b33;height: 44rpx;border-radius: 10rpx;font-size: 22rpx;color: #fff;margin: 0 6rpx 6rpx 0;overflow: hidden;position: relative;}
.coupons .li::before,.coupons .li::after{content: '';display: block;width: 6rpx;height: 6rpx;background: #fff;border-radius: 50%;position: absolute;right: 40rpx;}
.coupons .li::before{top: -2rpx;}
.coupons .li::after{bottom: -2rpx;}
.cp-l{height: 44rpx;padding: 0 12rpx;background: linear-gradient(left,#fe784f,#fe4b33);}
.coupons .li image{width: 27rpx;height: 23rpx;margin-right: 10rpx;}
.cp-money{font-size: 28rpx;font-weight: bold;}
.cp-money text{font-size: 22rpx;font-weight: normal;}
.cp-in{margin-left: 10rpx;}
.cp-r{width: 42rpx;height: 44rpx;justify-content: center;border-left: 1rpx dashed #fe9688;}
.coupons .li:first-child{color: #824712;background: #f2cf8b;}
.coupons .li:first-child .cp-l{background: linear-gradient(left,#fee5b4,#f2cf8b);}
.coupons .li:first-child .cp-r{border-color: #d2b279;}
.discount{margin-top: 10rpx;}
.discount .li{height: 30rpx;border-radius: 6rpx;font-size: 22rpx;color: #ff4a32;border: 1rpx solid #ff4a32;padding: 0 9rpx;margin: 0 6rpx 0 0;}
.dis-t{font-size: 24rpx;color: #989898;}
.dis-t image{width: 22rpx;height: 14rpx;margin-left: 10rpx;}
.order{background: linear-gradient(left,#fefefe,#feece9);box-shadow: 0 0 15rpx rgba(0,0,0,.1);height: 75rpx;border-radius: 10rpx;padding: 0 20rpx;margin: 15rpx 20rpx;font-size: 26rpx;color: #000;font-weight: 600;justify-content: space-between;}
.order image{width: 28rpx;height: 28rpx;margin-left: 6rpx;}
.count{font-size: 22rpx;color: #ff4a32;font-weight: normal;}
.count text{display: block;width: 15rpx;height: 15rpx;border-radius: 50%;border: 1rpx solid #f8c0b7;margin-right: 5rpx;}
.count text.active{background: #ff4a32;border-color: #ff4a32;}
.count view{margin-left: 11rpx;}
.tabs{padding: 20rpx 20rpx 25rpx;}
.tab .li{font-size: 28rpx;color: #000;margin-right: 70rpx;line-height: 46rpx;position: relative;}
.tab .li.active{font-weight: bold;}
.tab .li text{font-size: 22rpx;color: #999;position: relative;top: -5rpx;left: 10rpx;}
.tab .li.active text{font-weight: normal;}
.tab .li.active::after{content: '';display: block;width: 30rpx;height: 6rpx;border-radius: 3rpx;background: var(--mina);position: absolute;bottom: 0;left: 15rpx;}
.backtop{width: 30rpx;height: 30rpx;margin-left: 8rpx;}
.pin{width: 144rpx;height: 44rpx;border: 1rpx solid var(--mina);border-radius: 23rpx;font-size: 24rpx;color: var(--mina);justify-content: center;}
.sbanner{overflow: hidden;position: relative;margin: 0 20rpx;}
.sbanner .swiper,.sbanner .swiper image{width: 100%;height: 160rpx;border-radius: 12rpx;overflow: hidden;}
.dots{position: absolute;left: 0;right: 0;bottom: 20rpx;align-items: center;justify-content: center;}
.dot{background: rgba(255,255,255,.5);width: 20rpx;height: 2rpx;margin: 0 4rpx;}
.dot.active{background: rgba(255,255,255,.8);}
.recommend{margin: 45rpx 20rpx 0;}
.tits{padding: 15rpx 0;font-size: 28rpx;color: #000;font-weight: 600;justify-content: space-between;}
.rico{width: 16rpx;height: 27rpx;}
.rec-list .li{width: 222rpx;margin-right: 22rpx;}
.rec-list .li:nth-child(3n){margin-right: 0;}
.rec-img{width: 222rpx;height: 222rpx;border-radius: 10rpx;}
.rec-title{font-size: 28rpx;color: #000;font-weight: 600;margin: 8rpx 0 0;}
.res-op{margin-top: 15rpx;justify-content: space-between;}
.unit{align-items: flex-end;}
.sale{font-size: 28rpx;color: #ff4a32;font-weight: bold;}
.sale text{font-size: 18rpx;font-weight: normal;}
.del{font-size: 22rpx;color: #7c7c7c;margin-left: 8rpx;text-decoration: line-through;}
.jia{width: 42rpx;height: 42rpx;}
.shop-pro{margin-top: 20rpx;align-items: flex-start;}
.shop-l{background: #efefee;width: 145rpx;}
.shop-l .li{height: 84rpx;padding: 20rpx;font-size: 24rpx;color: #5a5a5a;}
.shop-l .li.active{background: #fff;color: #000;font-weight: 600;}
.shop-l .li image{width: 28rpx;height: 28rpx;margin-right: 10rpx;}
.shop-r{width: 605rpx;}
.tit{height: 80rpx;padding: 0 20rpx;font-size: 28rpx;color: #000;background: #fff;line-height: 80rpx;}
.tit text{font-size: 22rpx;color: #999;margin-left: 10rpx;}
.buy{padding: 0 20rpx;}
.buy .li{padding: 14rpx 0;}
.buy-img{width: 48rpx;height: 48rpx;border-radius: 6rpx;margin-right: 12rpx;}
.buy-tit{font-size: 28rpx;color: #000;margin-right: 20rpx;font-weight: bold;}
.buy-count{background: #f2f1f0;border-radius: 5rpx;height: 25rpx;width: 40rpx;font-size: 20rpx;color: #999;margin-right: 25rpx;justify-content: center;}
.buy .li .jia{margin-left: 20rpx;}
.pro-list{padding: 0 20rpx;}
.pro-list .li{padding: 20rpx 0;align-items: flex-start;}
.pro-img{width: 175rpx;height: 175rpx;border-radius: 10rpx;margin-right: 20rpx;}
.pro-tit{font-size: 30rpx;color: #000;font-weight: 600;line-height: 33rpx;max-height: 66rpx;overflow: hidden;}
.pro-bri{font-size: 24rpx;color: #999;margin-top: 8rpx;}
.sale-stock{font-size: 24rpx;color: #999;margin-top: 10rpx;}
.zhe .li{height: 26rpx;border-radius: 6rpx;font-size: 22rpx;color: #ff4a32;border: 1rpx solid #f5ccc7;padding: 0 9rpx;margin-top: 20rpx;}