.container { color: #333; } .diybox { padding-bottom: 186rpx; } .topheight { color: #ffffff; } .tui-header-box { width: 100%; position: fixed; left: 0; top: 0; z-index: 995; } /*居中 .tui-header { width: 100%; padding-left: 26rpx; font-size: 18px; line-height: 18px; font-weight: 500; height: 32px; display: flex; align-items: center; justify-content: left; }*/ .tui-header { width: 100%; font-size: 18px; line-height: 18px; font-weight: 500; height: 32px; display: flex; align-items: center; justify-content: center; } .orderplay { width: 100%; height: 100rpx; padding: 0 20rpx; box-sizing: border-box; position: fixed; left: 0; top: 180rpx; z-index: 999; transition: opacity .4s; } .housingestate { font-size: 28rpx; padding-left: 30rpx; padding-right: 30rpx; } /*banner*/ .bannerbox { box-sizing: border-box; } .bannerbottom { padding-top: 20rpx; } .tui-banner-bg { display: flex; position: relative; } .tui-banner-box { width: 100%; padding: 0 20rpx; box-sizing: border-box; position: absolute; /* overflow: hidden; */ z-index: 99; left: 0; } .tui-banner-swiper { width: 100%; border-radius: 20rpx; overflow: hidden; transform: translateY(0); background-color: #f8f8f8; } .tui-slide-image { width: 100%; display: block; } /* #ifdef MP-WEIXIN */ .tui-banner-swiper .wx-swiper-dot { width: 8rpx; height: 8rpx; display: inline-flex; background: none; justify-content: space-between; } .tui-banner-swiper .wx-swiper-dot::before { content: ''; flex-grow: 1; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden; } .tui-banner-swiper .wx-swiper-dot-active::before { background-color: #fff; } .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active { width: 16rpx; } /* #endif */ /* #ifndef MP-WEIXIN */ >>>.tui-banner-swiper .uni-swiper-dot { width: 8rpx; height: 8rpx; display: inline-flex; background-color: none; justify-content: space-between; } >>>.tui-banner-swiper .uni-swiper-dot::before { content: ''; flex-grow: 1; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden; } >>>.tui-banner-swiper .uni-swiper-dot-active::before { background-color: #fff; } >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active { width: 16rpx; } /* #endif */ .tui-product-category { padding: 80rpx 20rpx 30rpx 20rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 24rpx; color: #555; /* margin-bottom: 20rpx; */ } .tui-category-item { width: 20%; height: 118rpx; display: flex; align-items: center; justify-content: space-between; flex-direction: column; padding-top: 30rpx; } .tui-category-img { height: 88rpx; width: 88rpx; display: block; } .tui-category-name { line-height: 24rpx; } .tui-block__box { width: 100%; box-sizing: border-box; background-color: #ffffff; border-radius: 20rpx; overflow: hidden; } .tui-product-box { margin-top: 20rpx; padding: 0 25rpx; box-sizing: border-box; } .tui-img__coupon { width: 100%; height: 184rpx; display: block; } .tui-mtop__20 { margin-top: 20rpx; } .tui-bg-white { background-color: #fff; } .group-name-box { padding-left: 25rpx; padding-right: 25rpx; } .tui-group-name { width: 100%; font-size: 34rpx; line-height: 34rpx; font-weight: bold; text-align: center; padding: 30rpx 0 20rpx; display: flex; align-items: center; justify-content: space-between; color: #333; } .tui-group-list { padding-left: 10rpx; padding-right: 10rpx; justify-content: space-between; box-sizing: border-box; /* padding-top: 20rpx; */ } .tui-sub__desc { color: #34c7a9; font-size: 28rpx; font-weight: 400; padding-left: 25rpx; } .tui-seckill__box { display: flex; align-items: center; } .tui-seckill__img { width: 40rpx; } .tui-countdown__box { width: 228rpx; display: flex; align-items: center; color: #fff; background-color: #fff; font-weight: 400; height: 40rpx; border-radius: 30px; overflow: hidden; margin-left: 25rpx; } .tui-countdown__title { width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 24rpx; line-height: 24rpx; } .tui-flex__center { flex: 1; display: flex; align-items: center; justify-content: center; } /*秒杀商品*/ .tui-goods__list { display: flex; align-items: center; } .tui-goods__item { background-color: #fff; width: 150rpx; height: 230rpx; border-radius: 6rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-shrink: 0; margin-right: 18rpx; } .tui-goods__imgbox { width: 150rpx; height: 150rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .tui-goods__img { max-width: 150rpx; max-height: 150rpx; display: block; } .tui-pri__box { max-width: 150rpx; display: flex; justify-content: center; align-items: center; } .tui-sale-pri { display: flex; align-items: flex-end; padding: 10rpx 0 8rpx; box-sizing: border-box; font-size: 28rpx; line-height: 28rpx; color: #eb0909; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tui-size-sm { font-size: 24rpx; line-height: 24rpx; transform: scale(0.8); transform-origin: 0 50%; } .tui-original__pri { font-size: 24rpx; line-height: 24rpx; color: #999999; transform-origin: center 10%; transform: scale(0.8); display: flex; align-items: center; justify-content: center; text-decoration: line-through; } /*秒杀商品*/ .tui-more__box { display: flex; align-items: center; font-weight: 400; color: #999; } .tui-more__box text { font-size: 24rpx; line-height: 24rpx; } .tui-new-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .tui-new-item { width: 49%; height: 180rpx; padding: 0 20rpx; box-sizing: border-box; display: flex; align-items: center; background: #f5f2f9; position: relative; border-radius: 12rpx; } .tui-new-mtop { margin-top: 2%; } .tui-title-box { font-size: 24rpx; } .tui-new-title { line-height: 32rpx; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tui-new-price { padding-top: 18rpx; } .tui-new-present { color: #ff201f; font-weight: bold; } .tui-new-original { display: inline-block; color: #a0a0a0; text-decoration: line-through; padding-left: 12rpx; transform: scale(0.8); transform-origin: center center; } .tui-new-img { width: 148rpx; height: 148rpx; display: block; flex-shrink: 0; } .tui-new-label { width: 56rpx; height: 56rpx; border-top-left-radius: 12rpx; position: absolute; left: 0; top: 0; } .tui-title__img { width: 100%; padding: 30rpx 0; display: flex; justify-content: center; } .tui-title__img image { width: 352rpx; height: 32rpx; } .tui-product-list { padding-left: 10rpx; padding-right: 10rpx; justify-content: space-between; box-sizing: border-box; /* padding-top: 20rpx; */ } .diy-duo-list { padding-left: 10rpx; padding-right: 10rpx; justify-content: space-between; box-sizing: border-box; } .tui-product-container { display: flex; flex-direction: row; flex-wrap: wrap; } .tui-pro-item:last-child { margin-right: 0; } .tui-pro-item { margin-left: 1%; margin-right: 1%; width: 48%; margin-bottom: 2%; background: #fff; box-sizing: border-box; border-radius: 12rpx; overflow: hidden; } .tui-pro-img { width: 100%; display: block; } .tui-pro-content { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 20rpx; } .tui-pro-tit { color: #2e2e2e; font-size: 26rpx; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tui-pro-price { padding-top: 18rpx; } .tui-sale-price { font-size: 34rpx; font-weight: 500; color: #e41f19; } .tui-factory-price { font-size: 24rpx; color: #a0a0a0; text-decoration: line-through; padding-left: 12rpx; } .tui-pro-pay { padding-top: 10rpx; font-size: 24rpx; color: #656565; } /* 多图组 */ .diy-duo-box { padding: 0 25rpx; box-sizing: border-box; } .diy-duo { /*padding-top: 20rpx; padding-bottom: 26rpx;*/ } .diy-duo .duo-list { box-sizing: border-box; } .diy-duo .duo-list .duo-item { box-sizing: border-box; padding: 8rpx; text-align: center; } .diy-duo .duo-list.display__slide { white-space: nowrap; font-size: 0; } .diy-duo .duo-list.display__slide .duo-item { display: inline-block; } .diy-duo .duo-list.display__list .duo-item { float: left; } .diy-duo .duo-list.column__1 .duo-item { width: 100%; } .diy-duo .duo-list.column__2 .duo-item { width: 50%; } .diy-duo .duo-list.column__2 .duo-image image { width: 100%; } .diy-duo .duo-list.column__3 .duo-item { width: 33.33333%; } .diy-duo .duo-list.column__3 .duo-image image { width: 100%; } .diy-duo .duo-list.column__4 .duo-item { width: 25%; } .diy-duo .duo-list.column__4 .duo-image image { width: 100%; } .diy-duo .duo-list.column__5 .duo-item { width: 20%; } .diy-duo .duo-list.column__5 .duo-image image { width: 100%; } /* .diy-duo .duo-list .duo-item .duo-image image { display: block; border-radius: 12rpx 12rpx 0rpx 0rpx; width: 100%; } */ .diy-duo .duo-list .duo-item .duo-name { font-size: 28rpx; line-height: 50rpx; white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 图文组 */ .tui-tuwen-box { margin-top: 20rpx; padding: 0 25rpx; box-sizing: border-box; } .item-tuwen-style1 { width: 100%; box-sizing: border-box; background-color: #ffffff; border-radius: 20rpx; overflow: hidden; } .item-tuwen-style1 .tui-tuwen-title { padding-left: 25rpx; padding-right: 25rpx; width: 100%; font-size: 34rpx; line-height: 34rpx; font-weight: bold; text-align: left; padding: 30rpx 20rpx 20rpx 20rpx; display: flex; align-items: left; color: #333; } .diy-tuwen { width: 100%; } .diy-tuwen .item-image { width: 100%; height: 300rpx; position: relative; overflow: hidden; } .diy-tuwen .item-image image { display: block; height: 150px; width: 100%; } .item-tuwen-style1 .diy-tuwen .item-image .note { line-height: 18px; color: #fff; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; padding: 12rpx 20rpx; width: 100%; } .item-tuwen-style2 { width: 100%; padding-bottom: 20rpx; box-sizing: border-box; background-color: #ffffff; border-radius: 20rpx; overflow: hidden; } .item-tuwen-style2 .tui-tuwen-title { white-space: nowrap; padding-left: 20rpx; font-weight: bold; padding-top: 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; } .item-tuwen-style2 .diy-tuwen .note { padding-left: 20rpx; padding-top: 5px; line-height: 20px; color: #999; } /* 图片橱窗 */ .diy-window .data-list::after { clear: both; content: " "; display: table; } .diy-window .data-list .data-item { float: left; box-sizing: border-box; } .diy-window .data-list image { display: block; width: 100%; } /* 分列布局 */ .diy-window .avg-sm-2>.data-item { width: 50%; } .diy-window .avg-sm-3>.data-item { width: 33.33333333%; } .diy-window .avg-sm-4>.data-item { width: 25%; } .diy-window .avg-sm-5>.data-item { width: 20%; } /* 橱窗样式 */ .diy-window .display { height: 0; width: 100%; margin: 0; padding-bottom: 50%; position: relative; box-sizing: border-box; } .diy-window .display view { box-sizing: border-box; } .diy-window .display image { width: 100%; height: 100%; } .diy-window .display .display-left { width: 50%; height: 100%; overflow-y: hidden; position: absolute; top: 0; left: 0; } .diy-window .display .display-right { width: 50%; height: 100%; overflow-y: hidden; position: absolute; top: 0; left: 50%; } .diy-window .display .display-right1 { width: 100%; height: 50%; overflow-y: hidden; position: absolute; top: 0; left: 0; } .diy-window .display .display-right2 { width: 100%; height: 50%; overflow-y: hidden; position: absolute; top: 50%; left: 0; } .diy-window .display .display-right2 .left { width: 50%; height: 100%; overflow-y: hidden; position: absolute; top: 0; left: 0; } .diy-window .display .display-right2 .right { width: 50%; height: 100%; overflow-y: hidden; position: absolute; top: 0; left: 50%; } /* 公告组 */ .notice__icon { font-size: 0; } .notice__icon img { width: 28rpx; height: 28rpx; } .notice__text { width: 298rpx; height: 30rpx; padding-left: 5rpx; } /* 优惠券 */ .diy-coupon { white-space: nowrap; font-size: 0; } .diy-coupon .coupon-item { width: 350rpx; height: 130rpx; position: relative; color: #fff; overflow: hidden; box-sizing: border-box; } .diy-coupon .coupon-item i.before { content: ""; position: absolute; z-index: 1; width: 40rpx; height: 40rpx; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 80%; border-radius: 80%; background-color: #fff; } .diy-coupon .coupon-wrapper { display: inline-block; padding: 0 12rpx; } .diy-coupon .coupon-item .left-content { position: relative; width: 70%; height: 100%; background-color: #e5004f; float: left; } .diy-coupon .coupon-item .left-content .content-top .price { font-size: 44rpx; } .diy-coupon .coupon-item.color__blue .left-content { background: linear-gradient(-125deg, #57bdbf, #2f9de2); } .diy-coupon .coupon-item.color__red .left-content { background: linear-gradient(-128deg, #ff6d6d, #ff3636); } .diy-coupon .coupon-item.color__violet .left-content { background: linear-gradient(-113deg, #ef86ff, #b66ff5); } .diy-coupon .coupon-item.color__yellow .left-content { background: linear-gradient(-141deg, #f7d059, #fdb054); } .diy-coupon .coupon-item.color__gray .left-content { background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); } .diy-coupon .coupon-item.color__gray .right-receive { background-color: #949494; } .diy-coupon .coupon-item .right-receive { width: 30%; height: 100%; background-color: #4e4e4e; text-align: center; float: right; } .diy-coupon .coupon-item .right-receive text { font-size: 26rpx; } /* 商品组 */ .diy-goods .goods-list { padding: 4rpx; box-sizing: border-box; } .diy-goods .goods-list .goods-item { box-sizing: border-box; padding: 8rpx; margin-bottom: 3rpx; } .diy-goods .goods-list.display__slide { white-space: nowrap; font-size: 0; } .diy-goods .goods-list.display__slide .goods-item { display: inline-block; } .diy-goods .goods-list.display__list .goods-item { float: left; } .diy-goods .goods-list.column__1 .goods-item { width: 100%; } .diy-goods .goods-list.column__2 .goods-item { width: 50%; } .diy-goods .goods-list.column__2 .goods-image image { width: 359rpx; height: 359rpx; } .diy-goods .goods-list.column__3 .goods-item { width: 33.33333%; } .diy-goods .goods-list.column__3 .goods-image image { width: 235.3rpx; height: 235.3rpx; } .diy-goods .goods-list .goods-item .goods-image image { display: block; border-radius: 12rpx 12rpx 0rpx 0rpx; width: 100%; } .diy-goods .goods-list .goods-item .detail { padding: 8rpx; /*height: 128rpx;*/ background: #fff; border-radius: 0rpx 0rpx 12rpx 12rpx; overflow: hidden; } .diy-goods .goods-list .goods-item .goods-price { color: #e41f19; font-size: 38rpx; } .diy-goods .goods-list .goods-item .detail .goods-name { white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .diy-goods .goods-list .goods-item .technicaldetail { padding: 8rpx; background: #fff; border-radius: 0rpx 0rpx 12rpx 12rpx; overflow: hidden; } .diy-goods .goods-list .goods-item .technicaldetail .goods-name { white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .diy-goods .goods-list .goods-item .groupdetail { padding: 8rpx; height: 196rpx; background: #fff; border-radius: 0rpx 0rpx 12rpx 12rpx; overflow: hidden; } .diy-goods .goods-list .goods-item .groupdetail .goods-name { white-space: normal; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*商品列表*/ .tui-goodli-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .tui-goodli-item { width: 100%; height: 180rpx; padding: 0 20rpx; box-sizing: border-box; display: flex; background: #fff; position: relative; border-radius: 12rpx; } .tui-goodli-mtop { margin-top: 2%; } .goodliimgtitle { width: 71%; display: flex; } .tui-goodli-img { width: 40%; display: block; border-radius: 12rpx; } .tui-goodli-title-box { width: 60%; padding-left: 20rpx; font-size: 24rpx; } .goodli-butt-box { margin-top: 30rpx; padding: 20rpx; width: 28%; display: block; border-radius: 12rpx; } .goodli-button { font-size: 24rpx; color: #ffffff; align-items: center; } .tui-goodli-title { font-size: 30rpx; padding-top: 2rpx; word-break: break-all; font-weight: bold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .goodli-keyword { padding-top: 5rpx; color: #999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .tui-goodli-price { padding-top: 8rpx; } .tui-goodli-present { color: #ff201f; font-size: 38rpx; } .tui-goodli-label { width: 56rpx; height: 56rpx; border-top-left-radius: 12rpx; position: absolute; left: 0; top: 0; } /*商品列表end*/ .tui-group-btn { max-width: 312rpx; height: 48rpx; border-radius: 6rpx; display: flex; align-items: center; padding: 4rpx; margin-top: 10rpx; box-sizing: border-box; } .tui-flex-btn { height: 100%; flex: 1; text-align: center; font-size: 26rpx; line-height: 26rpx; font-weight: 400; color: #fff; display: flex; align-items: center; justify-content: center; } .tui-flex-btn:first-child { background: #fff; } /**客服**/ .img-tel-style { height: 80rpx; width: 80rpx; position: fixed; bottom: 330rpx; right: 16rpx; text-align: center; border-radius: 50%; background-color: #fff; border: 1rpx solid #ddd; opacity: 0.9 } .img-plus-style { height: 80rpx; width: 80rpx; position: fixed; bottom: 230rpx; right: 16rpx; text-align: center; border-radius: 50%; background-color: #fff; border: 1rpx solid #ddd; opacity: 0.9 } .zindex100 { z-index: 100 } .yc { opacity: 0 } /**客服end**/ /*客服二维modal弹层*/ .tui-poster__canvas { background-color: #fff; position: absolute; left: -9999px; } .tui-poster__box { width: 100%; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tui-close__img { width: 48rpx; height: 48rpx; position: absolute; right: 0; top: -60rpx; } .tui-poster__img { width: 560rpx; height: 890rpx; border-radius: 20rpx; margin-bottom: 40rpx; } /*客服二维modal弹层end*/ .tui-modal-custom { padding-top: 60rpx; padding-bottom: 50rpx; text-align: center; } .tui-prompt-title { padding-bottom: 20rpx; font-size: 34rpx; } .tui-modal__btn { align-items: center; justify-content: space-between; } .tui-box { padding: 15rpx 20rpx; box-sizing: border-box; } .tui-btn-danger { height: 80rpx; line-height: 80rpx; background: #eb0909 !important; border-radius: 98rpx; color: #fff; }