@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .container { margin-bottom: 100rpx; } .goodsimgs { position: relative; width: 750rpx; height: 750rpx; background: #fff; top:0rpx; } /* .goodsimgs image { width: 750rpx; height: 750rpx; } .goodsimgs video{ position: absolute; display: block; top:0rpx; width: 750rpx; height: 450rpx; margin-top:150rpx; } */ .content-wrapper { /* position: fixed; */ top: 0; right: 0; bottom: 0; left: 0; z-index: 2; /* width: 750rpx; height: 750rpx; */ } .content-wrapper .overflow { /* width: 750rpx; height: 750rpx; */ } .content-wrapper .scroll-wrapper { width: 750rpx; height: 750rpx; overflow: hidden; } .content-wrapper .scroll-view { white-space: nowrap; display: block; /* height: 750rpx; */ overflow-x: auto; margin-top: -100rpx; /* padding-bottom: 100rpx; */ -webkit-transform: translateY(100rpx); transform: translateY(100rpx); } .content-wrapper .scroll-view .items-wrapper { height: 750rpx; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; flex-flow: row nowrap; -webkit-box-orient: horizontal; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position:relative; transition:all 0.3s ease; -webkit-overflow-scrolling:touch; transform: translateZ(0); } .content-wrapper .scroll-view .item { display: block; position: relative; flex-shrink: 0; transition: transform 0.2s ease; transform-origin: center; letter-spacing: 0; } .video2{ margin-top: 150rpx; position: relative; } .model-img{ background-size:650rpx 321rpx; } .model-btn{ position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:100rpx; height:100rpx; border-radius:50%; background-color: rgba(0,0,0,.3); } .play-icon{ margin:28rpx 42rpx; border-top:26rpx solid transparent; border-left:36rpx solid #fff; border-bottom:22rpx solid transparent; } .content-wrapper .scroll-view .item .img-wrapper .myVideo { width: 750rpx; height: calc(9 * 750rpx / 16); /* left:0; */ } /* .content-wrapper .scroll-view .item:nth-child(1) { margin-left: 127rpx; } */ .content-wrapper .scroll-view .item .rank-num { position: absolute; left: 650rpx; top: 680rpx; padding: 0 20rpx; line-height: 50rpx; height: 50rpx; border-radius: 8rpx; color: #ffffff; } .content-wrapper .scroll-view .item .img-wrapper { width: 750rpx; height: 750rpx; border-radius: 8rpx; overflow: hidden; } .content-wrapper .scroll-view .item .img-wrapper .img { display: block; width: 750rpx; min-height: 750rpx; } .content-wrapper .scroll-view .item .content { padding: 20rpx; background-color: rgba(255, 255, 255, 0.9); box-sizing: border-box; position: absolute; right: 20rpx; bottom: 20rpx; left: 20rpx; z-index: 2; border-radius: 8rpx; overflow: hidden; } .content-wrapper .scroll-view .item .content .title { display: block; font-size: 32rpx; line-height: 44rpx; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10rpx; } .content-wrapper .scroll-view .item .content .rank-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; flex-flow: row nowrap; -webkit-box-orient: horizontal; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 12rpx; } .content-wrapper .scroll-view .item .content .rank-wrapper .stars-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; flex-flow: row nowrap; -webkit-box-orient: horizontal; flex-direction: row; margin-right: 20rpx; } .content-wrapper .scroll-view .item .content .rank-wrapper .stars-wrapper .star { display: block; width: 32rpx; height: 32rpx; } .content-wrapper .scroll-view .item .content .rank-wrapper .score { font-size: 32rpx; line-height: 44rpx; color: #333333; } .content-wrapper .scroll-view .item .content .p { display: block; font-size: 28rpx; line-height: 40rpx; color: white; } /* 如果不为激活状态,那就添加图层蒙版 */ .poker-face { filter: brightness(40%) } /* 添加激活状态 */ .active { transform: scale(1.083333) } .imageClass{ background-size:600rpx 600rpx; width: 750rpx; height: 750rpx; } .weui-cells{ margin-top: 80rpx; text-align: left; } .weui-label{ width: 5em; } .page-body-button { margin-bottom: 30rpx; } .service-policy { width: 750rpx; height: 73rpx; background: #f5f1f1ef; padding: 0 31.25rpx; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .service-policy .item { background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr25eAGT4BAAAA2Yyhu9Q372.png) 0 center no-repeat; background-size: 10rpx; padding-left: 15rpx; display: flex; align-items: center; font-size: 25rpx; color: #666; } .goods-info { width: 750rpx; height: 210rpx; 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; font-weight: bolder; } .goods-info .name { height: 41rpx; margin-bottom: 20rpx; font-size: 30rpx; line-height: 41rpx; margin-top: 10rpx; } .goods-info .desc { height: 43rpx; margin-bottom: 41rpx; font-size: 24rpx; line-height: 36rpx; color: #999; width: 200rpx; } .desc2{ position:absolute; right:220rpx; top:910rpx; height: 43rpx; margin-bottom: 41rpx; font-size: 24rpx; line-height: 36rpx; color: #999; } .goods-info .goods-do { text-align:left; } .goods-info .goods-do .price { /* height: 35rpx; */ font-size: 35rpx; line-height: 35rpx; color: #b4282d; display: inline; text-align: left; } .goods-info .goods-do .org-price { /* height: 25rpx; */ font-size: 25rpx; line-height: 35rpx; color: #303030; display: inline; text-align: left; margin-left: 16rpx; } .goods-info .brand { margin-top: 23rpx; min-height: 40rpx; text-align: center; } .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: 4px; background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr28mAes5qAAABHjRl7xw575.png) 95% center no-repeat; 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; border-bottom: 1px solid #d9d9d9; } .comments .h .t { display: block; float: left; width: 50%; font-size: 38.5rpx; color: #333; } .comments .h .i { display: block; float: right; width: 164rpx; height: 100.5rpx; line-height: 100.5rpx; background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2_OAO7zoAAABG9E7g8o485.png) right center no-repeat; background-size: 52rpx; } .comments .b { height: auto; width: 720rpx; } .comments .item { height: auto; width: 720rpx; overflow: hidden; } .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; } .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: 26rpx; margin-left: 20rpx; width: 480rpx; height: 45rpx; line-height: 45rpx; overflow: hidden; color: #333; } .detail { width: 750rpx; height: auto; overflow: hidden; /* padding: 0 31.25rpx 25rpx 31.25rpx; */ padding: 0 3rpx 2rpx 3rpx; background: #fff; } .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; } .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; background-size:211rpx 211rpx; } .related-goods .item .name { display: block; width: 311.45rpx; margin: 11.5rpx 0 15rpx 0; text-align: center; font-size: 30rpx; color: #333; } .related-goods .item .price { width: 311.45rpx; text-align: center; font-size: 30rpx; color: #b4282d; } .related-goods .item .price .cart{ margin-left: 20rpx; width: 35rpx; height: 35rpx; vertical-align: -6rpx; } .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: 122rpx; border: 1px solid #f4f4f4; display: flex; align-items: center; justify-content: center; } .bottom-btn .l.l-home { border-right: none; border-left: none; text-align: center; } .bottom-btn .l.l-collect { border-right: none; border-left: none; text-align: center; } .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; } .bottom-btn .l .icon { display: block; height: 44rpx; width: 44rpx; } .bottom-btn .c { float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #333; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; } .bottom-btn .contact { float: left; height: 100rpx; width: 122rpx; border: 1px solid #f4f4f4; display: flex; align-items: center; justify-content: center; } .bottom-btn .r { border: 1px solid #eb6064; background: #eb6064; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #fff; } @import "../../lib/wxParse/wxParse.wxss"; .bottom-btn .r-disable { border: 1px solid #c57477; background: #c57477; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: rgb(248, 206, 206); } .bottom-btn .r2 { border: 1px solid #b4282d; background: #b4282d; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: #fff; } .bottom-btn .r-disable2 { border: 1px solid #c57477; background: #c57477; float: left; height: 100rpx; line-height: 96rpx; flex: 1; text-align: center; color: rgb(248, 206, 206); } .attr-pop { width: 100%; height: auto; padding: 31.25rpx; background: #fff; position: fixed; bottom: 100rpx; z-index: 500; } .attr-pop2 { width: 100%; height: auto; padding: 31.25rpx; background: #fff; position: fixed; bottom: 1rpx; z-index: 500; } .attr-close{ float: right; width: 40rpx; height: 40rpx; line-height: 40rpx; border-radius: 50%; font-size: 40rpx; text-align: center; overflow: hidden; } .attr-title{ float: left; height: 40rpx; line-height: 40rpx; font-size: 35rpx; text-align: center; overflow: hidden; font-weight:bold; } .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; width: 260px; display:block; word-break: break-all; word-wrap: break-word; } .spec-con { width: 100%; height: auto; overflow: hidden; } .spec-con .name { height: 32rpx; margin-bottom: 22rpx; font-size: 29rpx; color: #333; } .spec-con .values { height: auto; margin-bottom: 31.25rpx; 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; } .number-item .addEnabel { width: 93.75rpx; height: 100%; text-align: center; line-height: 65rpx; color: #ccc; } .line-through { text-decoration: line-through; } .crash-goods { width: 750rpx; height: auto; overflow: hidden; } .crash-goods .h { position: relative; height: 145.5rpx; width: 750rpx; padding: 56.25rpx 0; background: #fff; text-align: center; border-bottom: 1px solid #f4f4f4; } .crash-goods .h .line { display: inline-block; position: absolute; top: 72rpx; left: 0; z-index: 2; height: 1px; margin-left: 225rpx; width: 300rpx; background: #ccc; } .crash-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; } .crash-goods .b { width: 750rpx; height: auto; overflow: hidden; } .crash-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; } .crash-goods .item .img { width: 311.45rpx; height: 311.45rpx; } .crash-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; } .crash-goods .item .goods-do { text-align:left; } .crash-goods .item .goods-do .price { /* display: block; */ /* width: 70.45rpx; */ /* height: 30rpx; */ text-align: left; font-size: 30rpx; color: #b4282d; display: inline; } .crash-goods .item .goods-do .org-price { /* display: block; */ /* width: 70.45rpx; */ /* height: 23rpx; */ text-align: left; font-size: 30rpx; color: #303030; display: inline; } .crash-goods .item .goods-do .add { /* width: 93.75rpx; */ /* height: 100%; */ text-align: right; line-height: 65rpx; display: inline; } .shelves-view { position: fixed; left: 0; bottom: 100rpx; z-index: 10; width: 100%; height: 60rpx; display: flex; background: #fff; } .shelves-view .shelves { border: 1px solid #7c7b7b; background: #7c7b7b; float: left; height: 60rpx; line-height: 60rpx; flex: 1; text-align: center; color: #fff; width: 100%; } .shelves-view .shelves .shelves-text { font-size: 28rpx; flex: 1; text-align: center; color: #fff; } .shelves-view .shelves2 { border: 1px solid #d8b676; background: #dab97c; float: left; height: 60rpx; line-height: 60rpx; flex: 1; text-align: center; color: rgb(248, 238, 206); width: 100%; } .shelves-view .shelves2 .shelves-text { font-size: 28rpx; flex: 1; text-align: center; color: rgb(248, 238, 206); } .detail .t { width: 687.5rpx; height: 104rpx; line-height: 104rpx; font-size: 38.5rpx; margin-left:20rpx; } .ticket-border{ border: 1px solid #b4282d; border-radius: 10rpx; width:auto; height:35rpx; float:left; margin-top:38rpx; margin-left:20rpx; } .ticket-text{ color: #b4282d; text-align: center; height:35rpx; line-height:35rpx; font-size:26rpx; } .ticket-img-info { width: 687.5rpx; height: 450rpx; overflow: scroll; margin-bottom: 41.5rpx; } .coupon-box { background-color: #fff; display: flex; border-radius: 5px; flex-direction: row; position: relative; } .coupon-box .coupon-used { position: absolute; top: 50%; right: 10px; margin-top: -7.5vmin; height: 15vmin; width: 15vmin; background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2s2AIzXWAAAPHxXo1UI166.png) no-repeat center; background-size: contain; } .coupon-box-g { background: linear-gradient(to right, #f0f0f0, #fff); } .coupon-box1 { border: 1px solid #b4282d; border-left: none; } .coupon-box2 { border: 1px solid #ccc; border-left: none; } .coupon-bg { width: 30%; background-position: left; background-size: cover; color: #fff; font-size: 2.0rem; display: flex; justify-content: center; flex-direction: column; align-items: center; } .coupon-bg > view{ font-size: inherit; color: #fff; } .coupon-bg .coupon-currency { font-size: 1rem; padding-right: 5px; color: #fff; } .coupon-bg .coupon-type { font-size: 0.8rem; color: #fff; } .coupon-bg1 { background-image: url(http://120.76.26.84:80/group1/M00/00/28/rBJEdVzmamGARRS8AAJzKZC-vjI880.png); } .coupon-bg2 { background-image: url(http://120.76.26.84:80/group1/M00/00/28/rBJEdVzmazCAFjztAAJzKfmaJd4492.png); } .coupon-info { width: 50%; margin-left: 20px; } .coupon-info .coupon-title { font-size: 0.9rem; padding: 2px 0 0 0; margin-top:12rpx; } .coupon-info .coupon-desc { font-size: 0.9rem; color: #9b9b9b; list-style: outside; padding: 2px 0 2px 0; } .coupon-info .coupon-desc-shop { font-size: 0.9rem; color: #9b9b9b; list-style: outside; padding-bottom:12rpx; } .coupon-info-use{ width: 20%; background: #b4282d; text-align:center; } .coupon-info-use2{ width: 20%; background: #ccc; text-align:center; } .coupon-desc-use{ font-size: 30rpx; color: white; margin-top:50rpx; } .camp-title{ color: #b4282d; font-size: 28rpx; } .camp-name{ float: left; font-size: 25rpx; color: rgb(82, 81, 81); } .camp-url{ float: right; font-size: 25rpx; color: rgb(151, 150, 150); }