H5_module/pages/sort/sort.css

/* pages/sort/sort.wxss */
page {background: #f5f5f5;}
.top{position: fixed;top: 0;left: 0;right: 0;z-index: 80;text-align: center;}
.top-background{background: #fff;}
.top-nav{position: relative;}
.back{position: absolute;top: 50%;transform: translateY(-50%);left: 0;padding-left: 30rpx;}
.back image{width: 22rpx;height: 38rpx;}
.top-nav-title{font-size: 36rpx;color: #333;font-weight: bold;}
.top-bg{width: 100%;height: 350rpx;}
.shop{background: #fff;border-radius: 10rpx;box-shadow: 0 0 15rpx rgba(0,0,0,.1);margin: -160rpx 20rpx 0;position: relative;z-index: 2;padding: 30rpx 30rpx 40rpx;}
.shop-name{font-size: 36rpx;color: #333;font-weight: bold;}
.shop-datas{font-size: 24rpx;color: #999;margin-top: 12rpx;}
.shop-pic{width: 80rpx;height: 80rpx;border-radius: 10rpx;position: relative;}
.shop-logo{width: 100%;height: 100%;border-radius: 10rpx;}
.discount{margin-top: 15rpx;}
.discount .li{height: 40rpx;border-radius: 10rpx;font-size: 22rpx;color: #C10316;border: 1rpx solid #C10316;padding: 0 14rpx;margin: 0 20rpx 0 0;}

.left {width: 30%;background: #f5f5f5;/* position: fixed; */left: 0;top: 0;font-size: 26rpx;content: #333;bottom: 0;}
.left-position{position: fixed;z-index: 51;}
.left .li {/* line-height: 100rpx;text-align: center;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; */height: 80rpx;padding: 20rpx;}
.left .li view{border-radius: 10rpx;height: 80rpx;width: 100%;justify-content: center;text-align: center;overflow: hidden;}
.left .li.active view{background: #fff;font-weight: bold;}
/* .left .li.active {font-weight: bold;background: #fff;border-left: 6rpx solid var(--mina) !important;} */
.right {width: 70%;/* position: absolute; */right: 0;top: 0;/* padding-top: 80rpx; */border-radius: 10rpx;padding-right: 30rpx;box-sizing: border-box;}
.right-position{position: absolute;padding-top: 80rpx;}
.tab {white-space: nowrap;-webkit-overflow-scrolling: touch;padding: 0 0 0 20rpx;background: #f5f5f5;box-sizing: border-box;/* position: absolute;top: 0;left: 0;right: 20rpx; */z-index: 50;}
.tab-position{position: fixed;top: 0;left: 0;right: 0;padding-left: 30%;}
.tab .li {display: inline-block;padding-right: 25rpx;line-height: 80rpx;}
.tab .li:last-child {margin-right: 0;}
.tab .li.active {color: var(--mina) !important;}
.sort {padding: 29rpx 0 0 20rpx;box-sizing: border-box;background: #fff;}
.price .vip {font-size: 24rpx;margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;font-weight: normal;}
.price .vip .members {font-size: 24rpx !important;font-weight: normal !important;margin-left: 2rpx;}
.price .vip .sale {font-size: 24rpx !important;font-weight: normal !important;}
.price text.del {font-weight: normal;font-size: 24rpx;color: #999;margin-left: 12rpx;text-decoration: line-through;}
.sort .li {border-bottom: 2rpx solid #eee;padding-bottom: 39rpx;margin-bottom: 39rpx;overflow: hidden;padding-right: 20rpx;}
.sort .li:last-child {margin-bottom: 0;border-bottom: none;}
.sort .li .flex {overflow: hidden;}
.proimgs{width: 160rpx;height: 160rpx;border-radius: 10rpx;position: relative;margin-right: 18rpx;border: 2rpx solid #E5E5E5;}
.proimg {box-sizing: border-box;width: 100%;height: 100%;border-radius: 10rpx;}
.shouqing{width: 100%;height: 100%;border-radius: 10rpx;position: absolute;top: 0;left: 0;}
.proname {font-size: 28rpx;color: #333;
	/* text-overflow: ellipsis;
	white-space: nowrap; */
	line-height: 36rp;height: 76rpx;overflow: hidden;}
.pronames {font-size: 24rpx;color: #999;margin-top: 5rpx;}
.endtime {display: inline-block;height: 32rpx;line-height: 32rpx;border: 2rpx solid #FE0419;border-radius: 6rpx;padding: 0 8rpx;font-size: 24rpx;color: #FE0419;margin: 15rpx 0 65rpx;}
.operate {justify-content: space-between;align-items: center;margin-top: 10rpx;}
.price {font-size: 24rpx;color: #FE0419;align-items: center;display: flex;}
.price text {font-size: 36rpx;font-weight: bold;}
.add-cart image {width: 42rpx;height: 42rpx;}
.nums {align-items: center;}
.num {font-size: 30rpx;width: 50rpx;text-align: center;line-height: 42rpx;}
/* 分类2 */
.sort-left {width: 22%;background: #F0F0F0;position: fixed;left: 0;top: 0;font-size: 26rpx;content: #333;}
.sort-left .li {line-height: 100rpx;text-align: center;height: 101rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.sort-left .li.active {font-weight: bold;background: #fff;border-left: 6rpx solid var(--mina) !important;}
.sort-right {width: 78%;position: absolute;right: 0;top: 0;box-sizing: border-box;}
.sort-right .rcon {padding: 0 20rpx 20rpx;}
.sort-right .tit {padding: 25rpx 0 15px;font-size: 28rpx;color: #9A9A9A;}
.sort-right .list {flex-wrap: wrap;background: #fff;border-radius: 10rpx;padding: 40rpx 15rpx 0;overflow: hidden;}
.sort-right .list .li {margin-bottom: 55rpx;width: 33.33%;text-align: center;font-size: 28rpx;color: #666;}
.sort-right .list image {display: block;width: 120rpx;height: 120rpx;margin: 0 auto 10rpx;}
.litext {width: 120rpx;height: 120rpx;border-radius: 50%;font-size: 40rpx;color: #fff;text-align: center;line-height: 120rpx;background: #f3f1f2;margin: 0 auto 15rpx;}
.nopronames {height: 31rpx;}

.vip-news{height: 36rpx;background: #222222;border-radius: 8rpx;line-height: 36rpx;flex-wrap: nowrap;margin-left: 12rpx;font-weight: bold;}
.vip-sale{background: linear-gradient(to right,#f9e0bc,#d9a168);font-size: 20rpx !important;color: #222;height: 36rpx;border-radius: 8rpx 0 0 8rpx;white-space: nowrap;width: 70rpx;text-align: center;}
.vip-members{padding: 0 8rpx 0 5rpx;font-size: 22rpx !important;color: #fde9cd !important;white-space: nowrap;}