.container { margin-bottom: 100rpx; } .goodsimgs { width: 750rpx; height: 750rpx; } .goodsimgs image { width: 750rpx; height: 750rpx; } .commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } .commodity_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 20rpx; } .goods-info { width: 750rpx; height: 306rpx; overflow: hidden; background: #fff; } .goods-info .c { display: block; width: 718.75rpx; height: 100%; margin-left: 31.25rpx; padding: 38rpx 31.25rpx 38rpx 0; border-bottom: 1px solid #f4f4f4; } .goods-info .c text { display: block; width: 687.5rpx; text-align: left; } .goods_name { height: 86rpx; line-height: 86rpx; border-bottom: 1px solid #fafafa; } .goods_name_left { float: left; height: 86rpx; font-weight: 550; line-height: 86rpx; margin-left: 35rpx; font-size: 38rpx; letter-spacing: 1rpx; } .goods_name_right { float: right; font-weight: 550; margin-top: 28rpx; width: 140rpx; height: 80rpx; line-height: 82rpx; padding: 0; margin: 0; margin-right: 0rpx; text-align: center; font-size: 25rpx; color: #f4f4f4; border-top-left-radius: 50rpx; border-bottom-left-radius: 50rpx; border-top-right-radius: 0rpx; border-bottom-right-radius: 0rpx; letter-spacing: 3rpx; background-image: linear-gradient(to right, #f3d10e 0%, #f48f18 100%) } .goods-info .desc { height: 43rpx; margin-bottom: 41rpx; font-size: 24rpx; line-height: 36rpx; color: #999; } .goods-info .price { height: 70rpx; align-content: center; } .goods-info .counterPrice { float: left; padding-left: 0rpx; text-decoration: line-through; font-size: 30rpx; color: #999; } .goods-info .retailPrice { padding-left: 5%; font-size: 30rpx; color: #a78845; } .goods-info .brand { margin-top: 23rpx; min-height: 40rpx; text-align: left; } .goods-info .brand text { display: inline-block; width: auto; padding: 2px 30rpx 2px 10.5rpx; line-height: 35.5rpx; border: 1px solid #f48f18; font-size: 25rpx; color: #f48f18; border-radius: 4rpx; background-size: 10.75rpx 18.75rpx; } .section-nav { width: 750rpx; height: 108rpx; background: #fff; margin-bottom: 20rpx; } .section-nav .t { float: left; width: 600rpx; height: 108rpx; line-height: 108rpx; font-size: 29rpx; color: #333; margin-left: 31.25rpx; } .section-nav .i { float: right; width: 52rpx; height: 52rpx; margin-right: 16rpx; margin-top: 28rpx; } .section-act .t { float: left; display: flex; align-items: center; width: 600rpx; height: 108rpx; overflow: hidden; line-height: 108rpx; font-size: 29rpx; color: #999; margin-left: 31.25rpx; } .section-act .label { color: #999; } .section-act .tag { display: flex; align-items: center; padding: 0 10rpx; border-radius: 3px; height: 37rpx; width: auto; color: #f48f18; overflow: hidden; border: 1px solid #f48f18; font-size: 25rpx; margin: 0 10rpx; } .section-act .text { display: flex; align-items: center; height: 37rpx; width: auto; overflow: hidden; color: #f48f18; font-size: 29rpx; } .comments { width: 100%; height: auto; padding-left: 30rpx; background: #fff; margin: 20rpx 0; } .comments .h { height: 102.5rpx; line-height: 100.5rpx; width: 718.75rpx; padding-right: 16rpx; } .comments .h .t { display: block; float: left; width: 50%; font-size: 30rpx; color: #333; } .comments .h .i { display: block; float: right; width: 164rpx; height: 100.5rpx; line-height: 100.5rpx; background-size: 52rpx; } .comments .b { height: auto; width: 720rpx; } .comments .item { height: auto; width: 720rpx; overflow: hidden; border-top: 1px solid #d9d9d9; } .comments .info { height: 127rpx; width: 100%; padding: 33rpx 0 27rpx 0; } .comments .user { float: left; width: auto; height: 67rpx; line-height: 67rpx; font-size: 0; } .comments .user image { float: left; width: 67rpx; height: 67rpx; margin-right: 17rpx; border-radius: 50%; } .comments .user text { display: inline-block; width: auto; height: 66rpx; overflow: hidden; font-size: 29rpx; line-height: 66rpx; } .comments .time { display: block; float: right; width: auto; height: 67rpx; line-height: 67rpx; color: #7f7f7f; font-size: 25rpx; margin-right: 30rpx; } .comments .content { width: 720rpx; padding-right: 30rpx; line-height: 45.8rpx; font-size: 29rpx; margin-bottom: 24rpx; } .comments .imgs { width: 720rpx; height: auto; margin-bottom: 25rpx; } .comments .imgs .img { height: 150rpx; width: 150rpx; margin-right: 28rpx; } .comments .spec { width: 720rpx; padding-right: 30rpx; line-height: 30rpx; font-size: 24rpx; color: #999; margin-bottom: 30rpx; } .comments .customer-service { width: 690rpx; height: auto; overflow: hidden; margin-top: 23rpx; margin-bottom: 23rpx; background: rgba(0, 0, 0, 0.03); padding: 21rpx; } .comments .customer-service .u { font-size: 24rpx; color: #333; line-height: 37.5rpx; } .comments .customer-service .c { font-size: 24rpx; color: #999; line-height: 37.5rpx; } .goods-attr { width: 750rpx; height: auto; overflow: hidden; padding: 0 31.25rpx 25rpx 31.25rpx; background: #fff; } .goods-attr .t { width: 687.5rpx; height: 104rpx; line-height: 104rpx; font-size: 38.5rpx; } .goods-attr .item { width: 687.5rpx; height: 68rpx; padding: 11rpx 20rpx; margin-bottom: 11rpx; background: #f7f7f7; font-size: 38.5rpx; } .goods-attr .left { float: left; font-size: 25rpx; width: 134rpx; height: 45rpx; line-height: 45rpx; overflow: hidden; color: #999; } .goods-attr .right { float: left; font-size: 36.5rpx; margin-left: 20rpx; width: 480rpx; height: 45rpx; line-height: 45rpx; overflow: hidden; color: #333; } .detail { width: 750rpx; height: auto; overflow: hidden; } .detail image { width: 750rpx; display: block; } .common-problem { width: 750rpx; height: auto; overflow: hidden; } .common-problem .h { position: relative; height: 145.5rpx; width: 750rpx; padding: 56.25rpx 0; background: #fff; text-align: center; } .common-problem .h .line { display: inline-block; position: absolute; top: 72rpx; left: 0; z-index: 2; height: 1px; margin-left: 225rpx; width: 300rpx; background: #ccc; } .common-problem .h .title { display: inline-block; position: absolute; top: 56.125rpx; left: 0; z-index: 3; height: 33rpx; margin-left: 285rpx; width: 180rpx; background: #fff; } .common-problem .b { width: 750rpx; height: auto; overflow: hidden; padding: 0rpx 30rpx; background: #fff; } .common-problem .item { height: auto; overflow: hidden; padding-bottom: 25rpx; } .common-problem .question-box .spot { float: left; display: block; height: 8rpx; width: 8rpx; background: #b4282d; border-radius: 50%; margin-top: 11rpx; } .common-problem .question-box .question { float: left; line-height: 30rpx; padding-left: 8rpx; display: block; font-size: 26rpx; padding-bottom: 15rpx; color: #303030; } .common-problem .answer { line-height: 36rpx; padding-left: 16rpx; font-size: 26rpx; color: #787878; } .related-goods { width: 750rpx; height: auto; overflow: hidden; padding-bottom: 80rpx; } .related-goods .h { position: relative; height: 145.5rpx; width: 750rpx; padding: 56.25rpx 0; background: #fff; text-align: center; border-bottom: 1px solid #f4f4f4; } .related-goods .h .line { display: inline-block; position: absolute; top: 72rpx; left: 0; z-index: 2; height: 1px; margin-left: 225rpx; width: 300rpx; background: #ccc; } .related-goods .h .title { display: inline-block; position: absolute; top: 56.125rpx; left: 0; z-index: 3; height: 33rpx; margin-left: 285rpx; width: 180rpx; background: #fff; } .related-goods .b { width: 750rpx; height: auto; overflow: hidden; } .related-goods .b .item { float: left; background: #fff; width: 375rpx; height: auto; overflow: hidden; text-align: center; padding: 15rpx 31.25rpx; border-right: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; } .related-goods .item .img { width: 311.45rpx; height: 311.45rpx; } .related-goods .item .name { display: block; width: 311.45rpx; height: 35rpx; margin: 11.5rpx 0 15rpx 0; text-align: center; overflow: hidden; font-size: 30rpx; color: #333; } .related-goods .item .price { display: block; width: 311.45rpx; height: 30rpx; text-align: center; font-size: 30rpx; color: #b4282d; } .bottom-btn { position: fixed; left: 0; bottom: 0; z-index: 10; width: 750rpx; height: 100rpx; display: flex; background: #fff; } .bottom-btn .l { float: left; height: 100rpx; width: 162rpx; border: 1px solid #f4f4f4; display: flex; align-items: center; justify-content: center; } .bottom-btn .l.l-collect { border-right: none; border-left: none; text-align: center; width: 90rpx; } .bottom-btn .l.l-collect .icon { position: absolute; top: 28rpx; left: 20rpx; font-size: 44rpx; } .bottom-btn .l.l-kefu { position: relative; height: 54rpx; width: 63rpx; } .bottom-btn .l.l-cart .box { position: relative; height: 60rpx; width: 60rpx; } .bottom-btn .l.l-cart .cart-count { height: 28rpx; width: 28rpx; z-index: 10; position: absolute; top: 0; right: 0; background: #b4282d; text-align: center; font-size: 18rpx; color: #fff; line-height: 28rpx; border-radius: 50%; } .bottom-btn .l.l-cart .icon { position: absolute; top: 10rpx; left: 0; font-size: 44rpx; } .bottom-btn .c { float: left; background: #b4282d; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #fff; } .bottom-btn .r { border: 1px solid #f48f18; background: #f48f18; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #fff; } @import "../../lib/wxParse/wxParse.wxss"; .attr-pop-box { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 8; bottom: 0; /* display: none; */ } .attr-pop { width: 100%; height: auto; max-height: 780rpx; padding: 31.25rpx; background: #fff; position: fixed; z-index: 9; bottom: 100rpx; } .attr-pop .close { position: absolute; width: 48rpx; height: 48rpx; right: 31.25rpx; overflow: hidden; top: 31.25rpx; } .attr-pop .close .icon { width: 48rpx; height: 48rpx; } .attr-pop .img-info { width: 687.5rpx; height: 177rpx; overflow: hidden; margin-bottom: 41.5rpx; } .attr-pop .img { float: left; height: 177rpx; width: 177rpx; background: #f4f4f4; margin-right: 31.25rpx; } .attr-pop .info { float: left; height: 177rpx; display: flex; align-items: center; } .attr-pop .p { font-size: 33rpx; color: #333; height: 33rpx; line-height: 33rpx; margin-bottom: 10rpx; } .attr-pop .a { font-size: 29rpx; color: #333; height: 40rpx; line-height: 40rpx; } .spec-con { width: 100%; height: auto; overflow: hidden; } .spec-con .name { margin-bottom: 6rpx; font-size: 29rpx; color: #333; } .spec-con .values { height: auto; margin-bottom: 10rpx; font-size: 0; } .spec-con .value { display: inline-block; height: 62rpx; padding: 0 35rpx; line-height: 56rpx; text-align: center; margin-right: 25rpx; margin-bottom: 16.5rpx; border: 1px solid #333; font-size: 25rpx; color: #333; } .spec-con .value.disable { border: 1px solid #ccc; color: #ccc; } .spec-con .value.selected { border: 1px solid #b4282d; color: #b4282d; } .number-item .selnum { width: 322rpx; height: 71rpx; border: 1px solid #ccc; display: flex; } .number-item .cut { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; } .number-item .number { flex: 1; height: 100%; text-align: center; line-height: 68.75rpx; border-left: 1px solid #ccc; border-right: 1px solid #ccc; float: left; } .number-item .add { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; } .contact { height: 100rpx; width: 100rpx; border-radius: 100%; position: fixed; bottom: 96rpx; right: 10rpx; font-size: 20rpx; box-sizing: border-box; background: url("/static/images/customer.png") no-repeat center 21rpx; background-size: 55rpx auto; } .share-pop-box { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 8; bottom: 0; /* display: none; */ } .share-pop { width: 100%; height: auto; max-height: 780rpx; padding: 31.25rpx; background: #fff; position: fixed; z-index: 9; bottom: 100rpx; } .share-pop .close { position: absolute; width: 48rpx; height: 48rpx; right: 31.25rpx; top: 31.25rpx; } .share-pop .close .icon { width: 48rpx; height: 48rpx; } .share-pop .share-info { width: 100%; height: 225rpx; overflow: hidden; margin-bottom: 41.5rpx; } .sharebtn { top: 75rpx; background: none !important; font-size: 32rpx; color: #fff !important; border-radius: 0%; width: 175rpx; height: 150rpx; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; float: left; background: #fff; border-bottom: 0px solid #fafafa; margin-left: 15%; } .sharebtn::after { border: none; border-radius: 0%; } .savesharebtn { top: 75rpx; background: none !important; font-size: 32rpx; color: #fff !important; border-radius: 0%; width: 175rpx; height: 150rpx; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; float: right; background: #fff; border-bottom: 0px solid #fafafa; margin-right: 15%; } .savesharebtn::after { border: none; border-radius: 0%; } .sharebtn_image { /* border: 1px solid #757575; */ width: 128rpx; height: 128rpx; margin-top: 0rpx; } .sharebtn_text { /* border: 1px solid #757575; */ width: 150rpx; margin-bottom: 2rpx; height: 20rpx; line-height: 20rpx; font-size: 20rpx; color: #555; } .separate { background: #e0e3da; width: 100%; height: 6rpx; }