/* pages/product-detail/product-detail.wxss */ .container { width: 750rpx; padding-bottom: 110rpx; } .productIntro { height: 924rpx; /* background-color: chocolate; */ background-color: #ffffff; margin-bottom: 16rpx; } .pic { width: 750rpx; height: 750rpx; position: relative; } /* 轮播图 */ .swiper { height: 750rpx; width: 100%; } .swiper image { width: 750rpx; height: 750rpx; } .productName { height: 52rpx; font-size: 36rpx; font-weight: 500; text-align: left; color: #333333; line-height: 50rpx; letter-spacing: 1rpx; margin: 32rpx; margin-bottom: 24rpx; } .productPrice { width: 686rpx; height: 34rpx; margin: 32rpx; margin-bottom: 24rpx; margin-right: 32rpx; display: flex; justify-content: space-between; align-items: center; } .price { width: 154rpx; font-size: 28rpx; font-weight: 500; text-align: left; color: #f5222d; line-height: 34rpx; letter-spacing: 1rpx; } .jifen { width: 154rpx; font-size: 30rpx; font-weight: 500; text-align: left; color: #f5222d; line-height: 34rpx; letter-spacing: 1rpx; } .share { width: 88rpx; display: flex; justify-content: space-between; align-items: center; position: relative; } .share image { width: 25rpx; height: 25rpx; } .shareTitle { width: 50rpx; height: 32rpx; font-size: 24rpx; font-weight: 400; text-align: left; color: #666666; line-height: 32rpx; letter-spacing: 1rpx; } .share button { position: absolute; height: 50rpx; top: 0rpx; left: 0; background-color: transparent; } .countDown { width: 750rpx; height: 82rpx; background: linear-gradient(98deg, #fe5303 5%, rgba(255, 52, 52, 0) 94%); position: absolute; bottom: 0; left: 0; font-size: 28rpx; font-weight: 500; text-align: left; color: #ffffff; padding-left: 32rpx; box-sizing: border-box; display: flex; align-items: center; } .countDownTxt { margin-right: 30rpx; } .countTime { display: inline-block; /* background-color: #9b74fb; */ height: 40rpx; margin-left: -20rpx; } .countTime { display:flex; /* width: 192rpx; */ /* background-color: #9b74fb; */ height: 40rpx; margin-left: -20rpx; } .countTime .maohao{ color: rgba(95, 0, 0, 0.8); width: 20rpx; display: flex; align-items: center; justify-content: center; padding-bottom: 10rpx; } .countTime .textss { width: 40rpx; height: 40rpx; background: rgba(95, 0, 0, 0.8); border-radius: 8rpx; font-size: 26rpx; color: #ffffff; display: flex; justify-content: center; box-sizing: border-box; } /* .item { display: inline-block; width: 40rpx; color: #fff; font-size: 24rpx; text-align: center; background: rgba(95, 0, 0, 0.8); border-radius: 8rpx; margin-right: 6rpx; margin-left: 6rpx; } */ .bottomHint{ background-color: #f1f2f4; font-size: 24rpx; color: gray; display: flex; justify-content: center; padding: 8rpx; } .moneyIcon{ font-size: 24rpx; color: #FF1717; margin-right: -6rpx; font-weight: 600; } .moneyNum{ font-size: 36rpx; font-weight: 500; color: #FF1717; font-weight: 600; } /* 请选择 */ .selectMain { width: 750rpx; height: 88rpx; padding: 26rpx 32rpx; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; background-color: #ffffff; } .selectTitle { width: 56rpx; font-size: 28rpx; font-weight: 400; text-align: left; color: #323233; } .selectNum { width: 102rpx; display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; font-weight: 400; color: #333333; } .selectPic { width: 32rpx; height: 32rpx; } .selectPic image { width: 32rpx; height: 32rpx; } /* 评价 */ .evaluateContent { width: 750rpx; max-height: 252rpx; box-sizing: border-box; background-color: #ffffff; margin: 0 auto; margin-bottom: 16rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .noData { /* height: 58rpx; color: #999999; font-size: 26rpx; display: flex; align-items: center; justify-content: center; */ display: none; } .evaluateContents { width: 750rpx; height: auto; box-sizing: border-box; background-color: #ffffff; margin: 0 auto; margin-bottom: 16rpx; overflow: hidden; } .evaluateTop { width: 686rpx; height: 36rpx; width: 686rpx; display: flex; justify-content: space-between; margin: 0 auto; padding: 30rpx; } .evaluateTitle { width: 240rpx; height: 36rpx; font-size: 28rpx; font-weight: 500; text-align: left; color: #323233; } .lookMain { width: 152rpx; display: flex; justify-content: space-between; align-items: center; } .lookMain>view { width: 112rpxs; font-size: 28rpx; font-weight: 400; text-align: left; color: #999999; line-height: 40rpx; } .lookMain>view image { width: 25rpx; height: 25rpx; display: flex; flex-direction: row; } .evaluateBox { width: 750rpx; margin-top: 20rpx; } .evaluateInfo { height: 72rpx; width: 686rpx; margin-top: 32rpx; margin: 0 auto; display: flex; } .userImg { width: 72rpx; height: 72rpx; } .userImg image { width: 72rpx; height: 72rpx; } .userName { width: 500rpx; height: 72rpx; margin-left: 16rpx; font-size: 28rpx; font-weight: 400; text-align: left; color: #333333; line-height: 72rpx; letter-spacing: 1rpx; } .evaluateDetails { width: 686rpx; font-size: 28rpx; font-weight: 400; text-align: left; color: #333333; line-height: 40rpx; letter-spacing: 1rpx; margin: 0 auto; margin-top: 20rpx; word-break: break-all; } .evaluatePic { width: 686rpx; height: 200rpx; display: flex; margin: 0 auto; } .picBox { width: 33.33%; } .picBox image{ width: 100%; height: 100%; } /* 商品详情 */ .productdesc { width: 750rpx; } .descBox { width: 750rpx; height: 300rpx; } .descBox image { width: 750rpx; height: 300rpx; } /* 底部 */ .navSon { width: 100rpx; } button { width: 50rpx !important; } .bottom { position: fixed; bottom: 0; left: 0; width: 100%; height: 100rpx; background: #fff; display: flex; justify-content: space-between; } .bottom_left { width: calc(100% - 420rpx); display: flex; align-items: center; justify-content: space-between; padding: 14rpx 20rpx 6rpx; box-sizing: border-box; } .bottom_left_item { width: 50%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; line-height: 34rpx; color: rgba(140, 145, 152, 1); } .collectIcon { position: relative; } .collectIcon image { position: absolute; top: -40rpx; left: -20rpx; } .collectIcon .collecttext { position: absolute; top: 9rpx; left: -36rpx; text-align: center; width: 80rpx; text-align: center; } .button { position: absolute; top: 0; left: 0; width: 1000% !important; height: 100% !important; min-height: 20rpx !important; opacity: 0 } .count_cart { position: absolute; top: 0; right: 10rpx; width: 24rpx; height: 24rpx; border-radius: 50%; background: #ff742f; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16rpx; line-height: 24rpx; font-family: PingFang SC; font-weight: 400; } .bottom_left_item image { width: 48rpx; height: 48rpx; display: block; } .bottom_right { width: 420rpx; background: #d12324; display: flex; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; color: rgba(249, 249, 249, 1); text-align: center; line-height: 72rpx; border: 2rpx solid transparent; border-radius: 40rpx; margin-top: 12rpx; position: relative; height: 72rpx; } .bottom_right_two { width: 390rpx; background: #56f077; display: flex; font-size: 36rpx; font-family: PingFang SC; font-weight: 600; color: yellow; text-align: center; line-height: 70rpx; display: flex; justify-content: center; border-radius: 44rpx; height: 72rpx; margin-top: 14rpx; margin-right: 40rpx; } .bottom_right_left { width: 50%; height: 76rpx; border-radius: 40rpx; background-color: #ff6d00; margin-top: -2rpx; line-height: 76rpx; } .bottom_right_right { width: 50%; line-height: 76rpx; } .Mask { position: absolute; width: 33rpx; height: 76rpx; margin-top: -2rpx; top: 0; left: 178rpx; background: #ff6d00; } /* 规格弹框 */ .skuBox { width: 100%; padding: 10rpx; display: flex; flex-wrap: wrap; margin-right: 20rpx; align-items: center; border-top: 3rpx solid #f5f5f5; margin-top: 30rpx; margin-bottom: 50rpx; } .skuItem { font-size: 30rpx; color: #323233; height: 57rpx; width: auto; background-color: rgb(238, 239, 241); padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; align-items: center; margin-right: 20rpx; } .skuItem1 { font-size: 30rpx; height: 57rpx; width: auto; background-color: #868585; padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; align-items: center; margin-right: 20rpx; } /* 购物车弹框 */ .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2 } .diceng { width: 100%; position: absolute; bottom: 0; left: 0; border-radius: 10rpx 10rpx 0 0; background: #fff; padding: 30rpx 32rpx ; box-sizing: border-box; max-height: 94%; overflow-y: auto; min-height: 300rpx; } .info { display: flex; } .info image { width: 176rpx; height: 176rpx; display: block; border: 1rpx solid #ff6d00; border-radius: 8rpx; } .info_right { width: calc(100% - 212rpx); padding-left: 36rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end } .info_name{ margin-bottom: 48rpx; font-size: 30rpx; color: #323233; } .info_price { font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(255, 109, 0, 1); } .info_stock { margin-top: 6rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(140, 145, 152, 1); } .attr { margin-top: 46rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; line-height: 40rpx; color: rgba(6, 18, 30, 1); } .attr_main { margin-top: 10rpx; display: flex; flex-wrap: wrap; } .attr_item { padding: 0 50rpx; height: 60rpx; box-sizing: border-box; background: rgba(238, 238, 238, 1); border-radius: 30rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 60rpx; color: rgba(6, 18, 30, 1); margin: 22rpx 22rpx 0 0; border: 2rpx solid transparent; } .attr_item.activity { background: rgba(253, 229, 211, 1); border: 2rpx solid rgba(246, 105, 0, 1); color: rgba(255, 109, 0, 1); } .pay_count { padding: 24rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: rgba(6, 18, 30, 1); margin-top: 50rpx; } .count_box { display: flex; align-items: center; } .count_jian { width: 56rpx; height: 56rpx; background: rgba(238, 238, 238, 1); border-radius: 8rpx; text-align: center; line-height: 56rpx; font-size: 38rpx; font-family: PingFang SC; font-weight: 400; color: rgba(6, 18, 30, 1); display: flex; align-items: center; justify-content: center; } .real_count { padding: 0 20rpx; box-sizing: border-box; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; line-height: 56rpx; color: rgba(61, 68, 77, 1); } .btn { height: 100rpx; text-align: center; line-height: 100rpx; width: 100vw; margin-left: -32rpx; background: rgba(255, 109, 0, 1); color: #fff; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; margin-top: 64rpx; } .confrimBtn { height: 78rpx; display: flex; background-color: #f16304; color: #ffffff; align-items: center; justify-content: center; border-radius: 36rpx; margin-top: 20rpx; } /* 购物车弹框 */ .mask { position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2 } .diceng { width: 100%; position: absolute; bottom: 0; left: 0; border-radius: 10rpx 10rpx 0 0; background: #fff; padding: 30rpx 32rpx; box-sizing: border-box; max-height: 94%; overflow-y: auto; } .info { display: flex; } .info image { width: 176rpx; height: 176rpx; display: block; border: 1rpx solid #ff6d00; border-radius: 8rpx; } .info_right { width: calc(100% - 212rpx); padding-left: 36rpx; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end } .info_price { font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(255, 109, 0, 1); } .info_stock { margin-top: 6rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 40rpx; color: rgba(140, 145, 152, 1); } .attr { margin-top: 46rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; line-height: 40rpx; color: rgba(6, 18, 30, 1); } .attr_main { margin-top: 10rpx; display: flex; flex-wrap: wrap; } .attr_item { padding: 0 50rpx; height: 60rpx; box-sizing: border-box; background: rgba(238, 238, 238, 1); border-radius: 30rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height: 60rpx; color: rgba(6, 18, 30, 1); margin: 22rpx 22rpx 0 0; border: 2rpx solid transparent; } .attr_item.activity { background: rgba(253, 229, 211, 1); border: 2rpx solid rgba(246, 105, 0, 1); color: rgba(255, 109, 0, 1); } .spec { width: 100%; padding: 10rpx; display: flex; flex-wrap: wrap; margin-right: 20rpx; align-items: center; justify-content: space-around; border-top: 3rpx solid #f5f5f5; margin-top: 20rpx; } .specItem { font-size: 30rpx; color: #323233; height: 57rpx; width: auto; background-color: rgb(238, 239, 241); padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; width: auto; align-items: center; } .specItem1 { font-size: 30rpx; color: #323233; height: 57rpx; width: auto; background-color: rgb(197, 198, 199); padding: 0 20rpx; border-radius: 16rpx; margin-bottom: 10rpx; display: flex; justify-content: center; align-items: center; width: auto; } .pay_count { padding: 24rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: rgba(6, 18, 30, 1); margin-top: 0; } .count_box { display: flex; align-items: center; } .count_jian { width: 56rpx; height: 56rpx; background: rgba(238, 238, 238, 1); border-radius: 8rpx; text-align: center; line-height: 56rpx; font-size: 38rpx; font-family: PingFang SC; font-weight: 400; color: rgba(6, 18, 30, 1); display: flex; align-items: center; justify-content: center; } .real_count { padding: 0 20rpx; box-sizing: border-box; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; line-height: 56rpx; color: rgba(61, 68, 77, 1); } .btn { height: 100rpx; text-align: center; line-height: 100rpx; width: 100vw; margin-left: -32rpx; background: rgba(255, 109, 0, 1); color: #fff; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; margin-top: 64rpx; } .confrimBtn { height: 78rpx; display: flex; background-color: #f16304; color: #ffffff; align-items: center; justify-content: center; margin-top: 20rpx; border-radius: 36rpx; } /* 商品明细 */ rich-text .rich-img { width: 100%; height: auto; }