.commBox { width: 96%; margin: 27rpx auto; background-color: #fff; border-radius: 20rpx; overflow: hidden; } .titleBox { width: 100%; overflow: hidden; height: 140rpx; background-image: url("https://formall.oss-accelerate.aliyuncs.com/cimg/v20211214/home_icon_d9qt.png"); background-size: 100% 100%; background-repeat: no-repeat; } .titleImg { width: 180rpx; height: 40rpx; float: left; margin: 20rpx; display: block; } .specialTitle { float: left; margin: 10rpx 20rpx; font-size: 38rpx; font-family: YouSheBiaoTiHei; font-weight: 600; color: #37332d; } .more { float: right; font-size: 24rpx; font-family: OPPOSans; font-weight: 500; color: #866741; margin: 16rpx 20rpx; } .rup { width: 13rpx; height: 20rpx; margin: 2rpx 0 0 6rpx; } .contBox { overflow: hidden; /* width: 96%; */ margin: -50rpx auto 0 auto; } .topImg { width: 100%; height: 140rpx; border-radius: 16rpx; margin-bottom: 40rpx; /* background-color: chartreuse; */ } .topImg image { border-radius: 16rpx; width: 100%; height: 100%; } .itemBox { overflow: hidden; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch; margin: 20rpx auto; width: 96%; } .itemBox::-webkit-scrollbar { display: none; } .item { width: 240rpx; /* background-color: antiquewhite; */ margin-right: 20rpx; } .itemImg { position: relative; width: 240rpx; height: 240rpx; border-radius: 16rpx; /* background-color: aquamarine; */ } .itemImg image { width: 100%; height: 100%; border-radius: 16rpx; } .sellout { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); width: 240rpx; height: 240rpx; border-radius: 20rpx; } .selloutImg { width: 195rpx !important; height: 154rpx !important; margin: 18% auto; display: block; } .titleNameBox { /* font-size: 18px; */ height: 80rpx; line-height: 40rpx; display: flex; align-items: center; justify-content: center; } .titleName { width: 100%; font-size: 28rpx; font-family: OPPOSans; font-weight: 500; color: #333; margin-top: 10rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .priceBox { overflow: hidden; margin: 10rpx 0; } .f { float: left; } .r { float: right; } .sellingBox { overflow: hidden; } .fuhao { color: #df2d2d; font-size: 24rpx; float: left; font-family: OPPOSans; /* font-weight: bold; */ margin-top: 10rpx; } .int { float: left; font-size: 36rpx; font-family: OPPOSans; font-weight: bold; color: #df2d2d; } .originalBox { overflow: hidden; } .origina { text-align: right; font-size: 24rpx; font-family: OPPOSans; font-weight: 400; text-decoration: line-through; color: #999; margin-top: 10rpx; margin-right: 10rpx; } .countBox { width: 100%; height: 46rpx; background-image: url("https://formall.oss-accelerate.aliyuncs.com/cimg/v20211214/home_icon_bq.png"); background-size: 100% 100%; background-repeat: no-repeat; margin-bottom: 20rpx; line-height: 46rpx; overflow: hidden; } .countText { font-size: 22rpx; font-family: OPPOSans; font-weight: 400; color: #999; background: linear-gradient(180deg, #dcb07d 0%, #f5e0bf 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 8rpx; } .countDate { font-size: 24rpx; font-family: OPPOSans; font-weight: bold; color: #4c3820; margin-right: 8rpx; } .moreItem { background: #f7f7f7; border-radius: 8px; } .noDataImg { width: 160rpx; height: 160rpx; margin: 25% auto 5% auto; } .noDataImg image { width: 100%; height: 100%; } .noDataText { text-align: center; font-size: 22rpx; font-family: OPPOSans; font-weight: 500; color: #999; } .product { width: 96%; height: 140rpx; margin: 30rpx auto 10rpx; border-radius: 16rpx; overflow: hidden; } .product image { height: 100%; display: block; width: 100%; }