秦佳浩 2 months ago
commit 2d4481e34f

@ -1,365 +1,391 @@
/* 容器样式 */
.container {
width: 100%;
background: #f4f4f4;
min-height: calc(100vh - 118rpx);
width: 100%; /* 设置容器宽度为100% */
background: #f4f4f4; /* 设置背景颜色 */
min-height: calc(100vh - 118rpx); /* 设置最小高度为视窗高度减去底部导航栏高度 */
}
/* 产品列表样式 */
.prod-list {
padding-bottom: 118rpx;
width: 100%;
padding-bottom: 118rpx; /* 底部填充以防止内容被固定底部遮挡 */
width: 100%; /* 设置宽度为100% */
/* 单个产品块样式 */
.prod-block {
background: #fff;
margin-top: 15rpx;
background: #fff; /* 背景颜色 */
margin-top: 15rpx; /* 上边距 */
/* 折扣提示样式 */
.discount-tips {
padding: 20rpx 0 20rpx 20rpx;
border-bottom: 2rpx solid #f4f4f4;
height: 40rpx;
line-height: 40rpx;
padding: 20rpx 0 20rpx 20rpx; /* 内边距 */
border-bottom: 2rpx solid #f4f4f4; /* 下边框 */
height: 40rpx; /* 高度 */
line-height: 40rpx; /* 行高 */
/* 文字块样式 */
.text-block {
padding: 3rpx 5rpx;
border-radius: 8rpx;
font-size: 22rpx;
color: #eb2444;
border: 2rpx solid #eb2444;
padding: 3rpx 5rpx; /* 内边距 */
border-radius: 8rpx; /* 圆角 */
font-size: 22rpx; /* 字体大小 */
color: #eb2444; /* 文字颜色 */
border: 2rpx solid #eb2444; /* 边框 */
}
/* 文字列表样式 */
.text-list {
font-size: 24rpx;
margin-left: 10rpx;
font-size: 24rpx; /* 字体大小 */
margin-left: 10rpx; /* 左边距 */
}
}
}
/* 产品项样式 */
.item {
background: #fff;
display: flex;
align-items: center;
padding: 20rpx;
background: #fff; /* 背景颜色 */
display: flex; /* 使用弹性布局 */
align-items: center; /* 垂直居中对齐 */
padding: 20rpx; /* 内边距 */
/* 产品信息样式 */
.prodinfo {
position: relative;
color: #999;
width: 100%;
position: relative; /* 相对定位 */
color: #999; /* 文字颜色 */
width: 100%; /* 宽度 */
/* 底线伪元素 */
&::after {
content: '';
background-color: #f4f4f4;
left: 0;
height: 1px;
transform-origin: 50% 100% 0;
bottom: -20rpx;
position: absolute;
display: block;
width: 642rpx;
padding-left: 20rpx;
content: ''; /* 伪元素内容为空 */
background-color: #f4f4f4; /* 背景颜色 */
left: 0; /* 左偏移 */
height: 1px; /* 高度 */
transform-origin: 50% 100% 0; /* 变换原点 */
bottom: -20rpx; /* 底部偏移 */
position: absolute; /* 绝对定位 */
display: block; /* 显示为块级元素 */
width: 642rpx; /* 宽度 */
padding-left: 20rpx; /* 左内边距 */
}
.pic {
text-align: center;
width: 180rpx;
height: 180rpx;
line-height: 180rpx;
font-size: 0;
}
}
&:last-child {
.prodinfo {
/* 最后一个子元素去除底线 */
&:last-child {
&::after {
height: 0;
height: 0; /* 高度设为0 */
}
}
/* 图片容器 */
.pic {
text-align: center; /* 文本居中 */
width: 180rpx; /* 宽度 */
height: 180rpx; /* 高度 */
line-height: 180rpx; /* 行高 */
font-size: 0; /* 字体大小 */
}
}
/* 状态样式 */
.staus {
text-align: center;
background: rgb(196, 192, 192);
font-size: 20rpx;
width: 50rpx;
color: #fff;
text-align: center; /* 文本居中 */
background: rgb(196, 192, 192); /* 背景颜色 */
font-size: 20rpx; /* 字体大小 */
width: 50rpx; /* 宽度 */
color: #fff; /* 文字颜色 */
}
/* 操作选项样式 */
.opt {
font-size: 28rpx;
margin-left: 20rpx;
width: 100%;
font-size: 28rpx; /* 字体大小 */
margin-left: 20rpx; /* 左边距 */
width: 100%; /* 宽度 */
}
/* 图片样式 */
.pic {
image {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
max-width: 100%; /* 最大宽度 */
max-height: 100%; /* 最大高度 */
vertical-align: middle; /* 垂直对齐 */
}
}
}
/* 失效产品样式 */
.lose-efficacy {
.discount-tips {
padding: 20rpx 0;
border-bottom: 2rpx solid #ddd;
height: 50rpx;
line-height: 50rpx;
margin-left: 20rpx;
padding: 20rpx 0; /* 内边距 */
border-bottom: 2rpx solid #ddd; /* 下边框 */
height: 50rpx; /* 高度 */
line-height: 50rpx; /* 行高 */
margin-left: 20rpx; /* 左边距 */
/* 文字列表样式 */
.text-list {
font-size: 30rpx;
margin-left: 10rpx;
font-size: 30rpx; /* 字体大小 */
margin-left: 10rpx; /* 左边距 */
}
}
}
}
/* 产品信息样式 */
.prodinfo {
display: flex;
margin-left: 20rpx;
display: flex; /* 使用弹性布局 */
margin-left: 20rpx; /* 左边距 */
/* 操作选项样式 */
.opt {
.prod-name {
color: #333;
max-height: 72rpx;
line-height: 36rpx;
display: -webkit-box;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #333; /* 文字颜色 */
max-height: 72rpx; /* 最大高度 */
line-height: 36rpx; /* 行高 */
display: -webkit-box; /* WebKit行盒模型 */
word-break: break-all; /* 允许单词内断行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出用省略号表示 */
-webkit-line-clamp: 2; /* 限制行数 */
-webkit-box-orient: vertical; /* 竖向排列 */
}
/* 产品信息文本样式 */
.prod-info-text {
color: #999;
display: inline-block;
-webkit-line-clamp: 1;
height: 48rpx;
line-height: 48rpx;
background: #f9f9f9;
padding: 0 10rpx 0 10rpx;
border-radius: 4rpx;
margin: 10rpx 0 0rpx 0;
overflow: hidden;
font-size: 24rpx;
position: relative;
font-family: arial;
color: #999; /* 文字颜色 */
display: inline-block; /* 显示为行内块 */
-webkit-line-clamp: 1; /* 限制行数 */
height: 48rpx; /* 高度 */
line-height: 48rpx; /* 行高 */
background: #f9f9f9; /* 背景颜色 */
padding: 0 10rpx; /* 内边距 */
border-radius: 4rpx; /* 圆角 */
margin: 10rpx 0 0rpx 0; /* 外边距 */
overflow: hidden; /* 隐藏溢出内容 */
font-size: 24rpx; /* 字体大小 */
position: relative; /* 相对定位 */
font-family: arial; /* 字体系列 */
}
/* 空的产品信息文本样式 */
.prod-info-text.empty-n {
padding: 0;
padding: 0; /* 内边距 */
}
/* 价格和数量样式 */
.price-count {
display: flex;
align-items: center;
justify-content: space-between;
display: flex; /* 使用弹性布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: space-between; /* 两端对齐 */
/* 价格样式 */
.price {
color: #eb2444;
color: #eb2444; /* 文字颜色 */
}
}
}
}
/* 产品信息文本伪元素样式 */
.prod-info-text {
&:before {
border-top: 5px solid #aaa;
border-top: 5px solid #aaa; /* 上边框 */
}
&:after {
border-top: 5px solid #f9f9f9;
top: 9px;
border-top: 5px solid #f9f9f9; /* 上边框 */
top: 9px; /* 顶部偏移 */
}
}
/* 失效产品样式 */
.lose-efficacy {
.prodinfo {
.opt {
.price-count {
.price {
color: #999;
color: #999; /* 文字颜色 */
}
}
}
}
margin-top: 20rpx;
background: #fff;
margin-top: 20rpx; /* 上边距 */
background: #fff; /* 背景颜色 */
/* 产品项样式 */
.item {
background: #f8f8f9;
background: #f8f8f9; /* 背景颜色 */
}
/* 折扣提示样式 */
.discount-tips {
.empty-prod {
color: #777;
font-size: 26rpx;
border: 2rpx solid #999;
padding: 0 10rpx;
border-radius: 8rpx;
float: right;
margin-right: 20rpx;
color: #777; /* 文字颜色 */
font-size: 26rpx; /* 字体大小 */
border: 2rpx solid #999; /* 边框 */
padding: 0 10rpx; /* 内边距 */
border-radius: 8rpx; /* 圆角 */
float: right; /* 向右浮动 */
margin-right: 20rpx; /* 右边距 */
}
}
}
/* 数量选择器样式 */
.m-numSelector {
.minus {
float: left;
box-sizing: border-box;
height: 56rpx;
border: 2rpx solid #d9d9d9;
position: relative;
width: 56rpx;
border-right: 0;
border-top-left-radius: 4rpx;
border-bottom-left-radius: 4rpx;
&::before {
position: absolute;
.minus,
.plus {
float: left; /* 向左浮动 */
box-sizing: border-box; /* 盒模型 */
height: 56rpx; /* 高度 */
border: 2rpx solid #d9d9d9; /* 边框 */
position: relative; /* 相对定位 */
width: 56rpx; /* 宽度 */
&::before,
&::after {
position: absolute; /* 绝对定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: ' ';
width: 22rpx;
height: 3rpx;
background-color: #7f7f7f;
margin: auto; /* 自动外边距 */
content: ' '; /* 伪元素内容为空 */
width: 22rpx; /* 宽度 */
height: 3rpx; /* 高度 */
background-color: #7f7f7f; /* 背景颜色 */
}
}
/* 减号按钮样式 */
.minus {
border-right: 0; /* 右边框 */
border-top-left-radius: 4rpx; /* 左上圆角 */
border-bottom-left-radius: 4rpx; /* 左下圆角 */
}
/* 输入框样式 */
input {
float: left;
box-sizing: border-box;
height: 56rpx;
border: 2rpx solid #d9d9d9;
width: 56rpx;
text-align: center;
color: #333;
float: left; /* 向左浮动 */
box-sizing: border-box; /* 盒模型 */
height: 56rpx; /* 高度 */
border: 2rpx solid #d9d9d9; /* 边框 */
width: 56rpx; /* 宽度 */
text-align: center; /* 文本居中 */
color: #333; /* 文字颜色 */
}
/* 加号按钮样式 */
.plus {
float: left;
box-sizing: border-box;
height: 56rpx;
border: 2rpx solid #d9d9d9;
position: relative;
width: 56rpx;
border-left: 0;
border-top-right-radius: 4rpx;
border-bottom-right-radius: 4rpx;
&::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: ' ';
width: 22rpx;
height: 3rpx;
background-color: #7f7f7f;
}
border-left: 0; /* 左边框 */
border-top-right-radius: 4rpx; /* 右上圆角 */
border-bottom-right-radius: 4rpx; /* 右下圆角 */
&::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: ' ';
width: 22rpx;
height: 3rpx;
background-color: #7f7f7f;
transform: rotate(90deg);
transform: rotate(90deg); /* 旋转90度 */
}
}
float: right;
float: right; /* 向右浮动 */
/* 非禁用状态下的交互样式 */
&:not(.disabled) {
.minus {
&:not(.disabled) {
&:active {
background-color: #f4f4f4;
}
}
}
.minus,
.plus {
&:not(.disabled) {
&:active {
background-color: #f4f4f4;
background-color: #f4f4f4; /* 激活时背景颜色 */
}
}
}
}
}
/* 深层选择器用于复选框样式 */
:deep(checkbox) {
.uni-checkbox-input,
.wx-checkbox-input {
border-radius: 50%;
width: 35rpx;
height: 35rpx;
border-radius: 50%; /* 圆形 */
width: 35rpx; /* 宽度 */
height: 35rpx; /* 高度 */
}
/* 选中状态下的复选框样式 */
.wx-checkbox-input.wx-checkbox-input-checked {
background: #eb2444;
border-color: #eb2444;
background: #eb2444; /* 背景颜色 */
border-color: #eb2444; /* 边框颜色 */
&::before {
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
text-align: center; /* 文本居中 */
font-size: 22rpx; /* 字体大小 */
color: #fff; /* 文字颜色 */
background: transparent; /* 透明背景 */
transform: translate(-50%, -50%) scale(1); /* 居中缩放 */
-webkit-transform: translate(-50%, -50%) scale(1); /* WebKit浏览器居中缩放 */
}
}
}
/* 空状态样式 */
.empty {
font-size: 26rpx;
color: #aaa;
padding-top: 200rpx;
font-size: 26rpx; /* 字体大小 */
color: #aaa; /* 文字颜色 */
padding-top: 200rpx; /* 上内边距 */
/* 文字样式 */
.txt {
text-align: center;
margin-top: 30rpx;
text-align: center; /* 文本居中 */
margin-top: 30rpx; /* 上边距 */
}
/* 图片样式 */
.img {
margin-top: 80rpx;
text-align: center;
margin-top: 80rpx; /* 上边距 */
text-align: center; /* 文本居中 */
image {
width: 80rpx;
height: 80rpx;
width: 80rpx; /* 宽度 */
height: 80rpx; /* 高度 */
}
}
}
/* 价格和数量样式 */
.price-count {
.disable-price {
color: #999;
color: #999; /* 文字颜色 */
}
}
/* 购物车底部栏样式 */
.cart-footer {
position: fixed;
bottom: calc(90rpx + env(safe-area-inset-bottom));
left: 0;
width: 100%;
display: flex;
flex-direction: row nowrap;
height: 98rpx;
border-top: 2rpx solid #f4f4f4;
z-index: 999;
position: fixed; /* 固定定位 */
bottom: calc(90rpx + env(safe-area-inset-bottom)); /* 底部距离 */
left: 0; /* 左偏移 */
width: 100%; /* 宽度 */
display: flex; /* 使用弹性布局 */
flex-direction: row nowrap; /* 行内不换行 */
height: 98rpx; /* 高度 */
border-top: 2rpx solid #f4f4f4; /* 上边框 */
z-index: 999; /* 层叠顺序 */
/* 按钮样式 */
.btn {
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
width: 0;
background-color: #fafafa;
background: rgba(255,255,255,0.95);
font-size: 28rpx;
position: relative; /* 相对定位 */
display: flex; /* 使用弹性布局 */
flex-grow: 1; /* 弹性增长 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 0; /* 宽度 */
background-color: #fafafa; /* 背景颜色 */
background: rgba(255,255,255,0.95); /* 半透明背景 */
font-size: 28rpx; /* 字体大小 */
/* 总金额消息样式 */
.total-msg {
font-size: 20rpx;
font-size: 20rpx; /* 字体大小 */
}
}
/* 总价按钮样式 */
.btn.total {
display: flex;
flex-flow: column;
align-items: flex-start;
width: 300rpx;
display: flex; /* 使用弹性布局 */
flex-flow: column; /* 列方向 */
align-items: flex-start; /* 左对齐 */
width: 300rpx; /* 宽度 */
/* 价格样式 */
.price {
color: #eb2444;
font-size: 30rpx;
color: #eb2444; /* 文字颜色 */
font-size: 30rpx; /* 字体大小 */
}
}
/* 删除按钮样式 */
.btn.del {
color: #eb2444;
width: 70rpx;
font-size: 22rpx;
text-align: left;
display: block;
line-height: 102rpx;
color: #eb2444; /* 文字颜色 */
width: 70rpx; /* 宽度 */
font-size: 22rpx; /* 字体大小 */
text-align: left; /* 文本左对齐 */
display: block; /* 显示为块级元素 */
line-height: 102rpx; /* 行高 */
}
/* 全选按钮样式 */
.btn.all {
width: 150rpx;
font-size: 26rpx;
width: 150rpx; /* 宽度 */
font-size: 26rpx; /* 字体大小 */
/* 标签样式 */
label {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
display: flex; /* 使用弹性布局 */
flex-grow: 1; /* 弹性增长 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
}
/* 结算按钮样式 */
.btn.settle {
width: 200rpx;
background: #eb2444;
color: #fff;
width: 200rpx; /* 宽度 */
background: #eb2444; /* 背景颜色 */
color: #fff; /* 文字颜色 */
}
}

Loading…
Cancel
Save