@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 字体大小变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ page { background: #f7f7f7; height: auto; } .cart-content { position: relative; } .container-cart-main.none { display: none; } .container-cart-main.show { display: block; } .cart-content.empty.none { display: none; } .cart-content.empty.show { display: block; } .container-cart.show { display: block; } .container-cart.none { display: none; } .empty-container.none { display: none; } .empty-container.show { display: flex; } .foot-check-delbtn { width: 100%; height: 80rpx; position: fixed; top: 0; left: 0; box-sizing: border-box; padding: 15rpx 24rpx; background-color: #F7F7F7; z-index: 990; } .foot-check-delbtn .foot-text { font-size: 26rpx; height: 50rpx; line-height: 50rpx; color: #666666; float: left; padding-left: 10rpx; } .foot-check-delbtn .foot-text text { margin: 0 6rpx; } .foot-check-delbtn .delBtn { width: 100rpx; display: inline-block; padding: 0 15rpx; font-size: 26rpx; height: 50rpx; line-height: 50rpx; border-radius: 30rpx; background: #FFFFFF; border: 1px solid #ff457b; color: #ff457b; float: right; text-align: center; } .foot-check-delbtn .delBtn.none { display: none; } .checkbox-box { display: flex; align-items: center; } .checkbox-box .checkbox { display: flex; margin: 0; padding: 0 5rpx; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; text-align: center; text-decoration: none; border-radius: 0; -webkit-tap-highlight-color: transparent; overflow: hidden; background-color: #FFFFFF; font-size: 36rpx; color: #999999; } .checkbox-box .checkbox.icon-xuanze { color: #FF457B; } .checkbox-box.disabled .checkbox { color: #999999; } .checkbox-box .text { font-size: 24rpx; margin-left: 10rpx; } .goods-list { width: 100%; height: auto; background-color: #F7F7F7; } .goods-list .goods-item { width: 702rpx; padding: 0 24rpx; background: #FFFFFF; margin-bottom: 24rpx; } .goods-list .shoptitle { display: flex; align-items: center; height: 80rpx; line-height: 80rpx; } .goods-list .shoptitle .checkbox-box { padding: 10rpx; } .goods-list .shoptitle .text { width: 450rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 20rpx; font-size: 28rpx; color: #333333; text-align: left; font-weight: bold; } .goods-list .goods-pros { width: 100%; height: auto; margin-bottom: 20rpx; } .goods-list .goods-pros-t { display: flex; align-items: center; width: 100%; height: 210rpx; padding: 0 0 26rpx 0; } .goods-list .goods-pros-t .checkbox-box { padding: 10rpx; } .goods-list .goods-pros-t .pros-img { width: 210rpx; height: 100%; border-radius: 10rpx; margin: 0 20rpx; border: 1px solid #f3f3f3; } .goods-list .goods-pros-t .pros-img image { width: 100%; height: 100%; border-radius: 10rpx; } .goods-list .goods-pros-b { width: 100%; height: auto; padding: 0 0 24rpx 0; box-sizing: border-box; } .goods-list .goods-pros-b.show { display: block; } .goods-list .goods-pros-b.none { display: none; } .goods-list .goods-pros-b .sum-none { width: 100%; height: 48rpx; line-height: 48rpx; color: #333333; float: left; text-align: right; } .goods-list .goods-pros-b .sum-none .money { font-size: 26rpx; color: #999999; text-decoration: line-through; } .goods-list .goods-pros-b .sum-none .money-sign { font-size: 26rpx; color: #999999; text-decoration: line-through; } .goods-list .goods-pros-b .sum-none .money-reduced { margin-left: 10rpx; font-size: 26rpx; color: #FF457B; } .goods-list .goods-pros-b .sum-none .money-reduced .iconfont { font-size: 34rpx; } .goods-list .goods-pros-b .sum { width: 100%; height: 40rpx; font-size: 26rpx; line-height: 40rpx; color: #333333; float: left; display: flex; justify-content: flex-end; font-weight: bold; } .goods-list .goods-pros-b .sum .money { color: #FF457B; font-size: 26rpx; } .goods-list .goods-pros-b .sum .money-sign { font-size: 24rpx; color: #FF457B; } .goods-list .pros-product { width: 416rpx; height: 100%; line-height: 36rpx; font-size: 28rpx; position: relative; } .goods-list .pros-product .producttitle { width: 100%; display: inline-block; height: auto; text-overflow: ellipsis; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 15rpx; } .goods-list .pros-product .producttitle .no-text { display: inline-block; height: 36rpx; padding: 0 12rpx; line-height: 36rpx; background: linear-gradient(315deg, #e70000 0%, #ff6801 100%); border-radius: 18rpx; text-align: center; color: #FFFFFF; font-size: 28rpx; margin-right: 24rpx; } .goods-list .pros-product .productspec { height: 36rpx; color: #999999; font-size: 26rpx; } .goods-list .pros-product .productprice { width: 100%; height: 48rpx; margin: 30rpx 0 0 0; } .goods-list .pros-product .productprice .price { line-height: 48rpx; font-size: 26rpx; width: 48%; color: #FF457B; float: left; font-weight: bold; } .goods-list .pros-product .productprice .price.disabled { color: #999999; text-decoration: line-through; } .goods-list .pros-product .productprice .price .money-sign { font-size: 24rpx; color: #FF457B; } .goods-list .pros-product .productprice .count { height: 100%; float: right; position: relative; } .goods-list .pros-product .productprice .count.show { display: block; } .goods-list .pros-product .productprice .count.none { display: none; } .goods-list .pros-product .productprice .count .count-tips { width: auto; display: inline-block; padding: 0 15rpx; line-height: 44rpx; height: 44rpx; border-radius: 22rpx; background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%); font-size: 24rpx; text-align: center; color: #FFFFFF; position: absolute; top: -60rpx; left: -5rpx; z-index: 5; } .goods-list .pros-product .productprice .count .count-tips.step { left: -217rpx; } .goods-list .pros-product .productprice .count .count-tips::before { content: ""; position: absolute; bottom: -30rpx; right: 15rpx; z-index: 1; width: 0; height: 0; border-width: 18rpx; border-style: solid; border-color: #FF457B transparent transparent transparent; } .goods-list .pros-product .productprice .count .number-box { display: flex; justify-content: center; align-items: center; border: 2rpx solid #e1e1e1; border-radius: 30rpx; height: 48rpx; margin-left: 20rpx; } .goods-list .pros-product .productprice .count .number-box .iconfont { font-size: 24rpx; padding: 0 14rpx; color: #666666; text-align: center; line-height: 48rpx; font-weight: bold; background: #ffffff; } .goods-list .pros-product .productprice .count .number-box .iconfont.icon-jianhao { border-radius: 30rpx 0 0 30rpx; } .goods-list .pros-product .productprice .count .number-box .iconfont.icon-jiahao { border-radius: 0 30rpx 30rpx 0; } .goods-list .pros-product .productprice .count .number-box .btn-input { width: 56rpx; height: 44rpx; line-height: 44rpx; border-radius: 4rpx; text-align: center; font-size: 24rpx; color: #333333; background-color: #f7f7f7; } .goods-list .pros-product .productprice .count .uni-numbox { position: absolute; left: 45rpx; bottom: 0; } .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-minus, .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-plus { width: 50rpx; line-height: 40rpx; } .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-value { font-size: 28rpx; width: 60rpx; } .goods-list .pros-product .floor-item-act { width: 100%; height: 30rpx; margin-top: 8rpx; float: left; } .goods-list .pros-product .floor-item-act .tag { display: inline-block; height: 32rpx; font-size: 22rpx; line-height: 30rpx; text-align: center; color: #f83c6c; float: left; margin-right: 10rpx; } .goods-list .pros-product .floor-item-act .tag.tag-02 { width: 80rpx; background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat; background-size: contain; } .goods-list .pros-product .floor-item-act .tag.tag-01 { width: 56rpx; color: #fff; background-color: #f83c6c; border-radius: 4rpx; } .failure-list { width: 702rpx; height: auto; padding: 0 24rpx; margin-top: 20rpx; background: #FFFFFF; } .failure-list .failure-title { width: 100%; height: 82rpx; line-height: 82rpx; font-size: 28rpx; border-bottom: 1px solid #EBEBEB; } .failure-list .failure-title .title-txt { float: left; color: #666666; text-align: left; } .failure-list .failure-title .title-btn { float: right; color: #FF457B; text-align: right; line-height: 80rpx; } .failure-list .failure-title .title-btn .butto { display: inline-block; padding: 0 15rpx; font-size: 26rpx; height: 50rpx; line-height: 50rpx; border-radius: 30rpx; background: #fff8fd; border: 1px solid #ff457b; color: #ff457b; margin-top: 15rpx; } .failure-list .productlist { padding-top: 10rpx; } .failure-list .productlist .goods-pros { width: 100%; height: auto; padding: 20rpx 0; } .failure-list .productlist .goods-pros-t { display: flex; align-items: center; width: 100%; height: 210rpx; position: relative; } .failure-list .productlist .goods-pros-t .img-tip { display: block; width: 72rpx; height: 36rpx; line-height: 36rpx; font-size: 24rpx; text-align: center; color: #FFFFFF; border-radius: 24rpx; background: rgba(51, 51, 51, 0.3); } .failure-list .productlist .goods-pros-t .checkbox-box { padding: 10rpx; } .failure-list .productlist .goods-pros-t .pros-img { width: 180rpx; height: 100%; border-radius: 10rpx; margin: 0 20rpx; border: 1px solid #f3f3f3; position: relative; } .failure-list .productlist .goods-pros-t .pros-img image { width: 100%; height: 100%; border-radius: 10rpx; } .failure-list .productlist .goods-pros-t .pros-marks { width: 730rpx; height: 250rpx; z-index: 90; background: rgba(0, 0, 0, 0.05); position: absolute; left: -20rpx; top: -20rpx; } .failure-list .productlist .goods-pros-b { width: 622rpx; margin-left: 84rpx; height: 40rpx; padding: 0 0 26rpx 0; } .failure-list .productlist .goods-pros-b.show { display: block; } .failure-list .productlist .goods-pros-b.none { display: none; } .failure-list .productlist .goods-pros-b .sum { font-size: 28rpx; line-height: 40rpx; color: #333333; display: flex; justify-content: flex-end; } .failure-list .productlist .goods-pros-b .sum .money { color: #FF2A2A; font-size: 28rpx; } .failure-list .productlist .goods-pros-b .sum .money-sign { font-size: 24rpx; color: #FF2A2A; } .failure-list .productlist .pros-product { width: 402rpx; height: 100%; line-height: 36rpx; font-size: 28rpx; position: relative; } .failure-list .productlist .pros-product .producttitle { width: 100%; display: inline-block; height: auto; text-overflow: ellipsis; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 8rpx; } .failure-list .productlist .pros-product .producttitle .no-text { display: inline-block; height: 36rpx; padding: 0 12rpx; line-height: 36rpx; background: linear-gradient(315deg, #e70000 0%, #ff6801 100%); border-radius: 18rpx; text-align: center; color: #FFFFFF; font-size: 28rpx; margin-right: 24rpx; } .failure-list .productlist .pros-product .productspec { height: 36rpx; color: #999999; font-size: 26rpx; margin-top: 20rpx; } .failure-list .productlist .pros-product .productstate { font-size: 28rpx; height: 44rpx; color: #FF2A2A; position: absolute; bottom: 0; left: 0; } .footer { width: 100%; background-color: #FFFFFF; height: 100rpx; position: fixed; bottom: 0rpx; z-index: 100; } .footer .footer-le { width: 520rpx; height: 100%; padding: 10rpx 24rpx; float: left; box-sizing: border-box; } .footer .footer-le .foot-check { width: 100rpx; float: left; line-height: 80rpx; font-size: 24rpx; } .footer .footer-le .foot-check .checkbox { width: 40rpx; text-align: center; } .footer .footer-le .foot-check .text { width: 60rpx; float: right; } .footer .footer-le .sum { width: 360rpx; height: 100%; float: right; box-sizing: border-box; padding: 0 10rpx; } .footer .footer-le .sum .sum-price { text-align: right; width: 100%; height: 80rpx; line-height: 80rpx; font-size: 30rpx; color: #333333; float: left; font-weight: normal; } .footer .footer-le .sum .sum-price .money { color: #FF457B; } .footer .footer-le .sum .sum-price .money-sign { font-size: 24rpx; color: #FF457B; } .footer .footer-ri { width: 230rpx; height: 100%; float: right; display: flex; justify-content: space-between; align-items: center; z-index: 999; box-sizing: border-box; padding: 13rpx 15rpx; } .footer .footer-ri.none { display: none; } .footer .footer-ri .btn { width: 200rpx; height: 100%; background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%); font-size: 28rpx; line-height: 80rpx; color: #FFFFFF; display: flex; border-radius: 40rpx; justify-content: center; align-items: center; } .footer .footer-del { width: 420rpx; height: 100rpx; position: absolute; padding-left: 200rpx; background: #FFFFFF; right: 0; top: 0; z-index: 1000; box-sizing: border-box; padding: 10rpx 0; display: flex; } .footer .footer-del.show { -webkit-animation: showDelbtn 0s linear both; animation: showDelbtn 0s linear both; } .footer .footer-del.none { -webkit-animation: hideDelbtn 0s linear both; animation: hideDelbtn 0s linear both; } .footer .footer-del .btn { flex: 1; margin: 0 8rpx; height: 100%; line-height: 80rpx; font-size: 28rpx; color: #FFFFFF; text-align: center; float: left; border-radius: 40rpx; } .footer .footer-del .btn.btn-cancel { background: #f7f7f7; color: #B2B2B2; } .footer .footer-del .btn.btn-confirm { background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%); color: #FFFFFF; } @-webkit-keyframes showDelbtn { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes showDelbtn { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes hideDelbtn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hideDelbtn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }