@ -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; /* 文字颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,247 +1,284 @@
|
||||
/* 定义容器的基本样式 */
|
||||
.container {
|
||||
background: #f4f4f4;
|
||||
background: #f4f4f4; /* 设置背景颜色为浅灰色 */
|
||||
}
|
||||
|
||||
/* 订单详情的样式 */
|
||||
.order-detail {
|
||||
margin-bottom: 120rpx;
|
||||
padding-bottom: 160rpx;
|
||||
.delivery-addr {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
.user-info {
|
||||
line-height: 48rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
.item {
|
||||
font-size: 28rpx;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-bottom: 120rpx; /* 设置底部外边距，确保与其他元素有足够的间距 */
|
||||
padding-bottom: 160rpx; /* 设置底部内边距，用于留出足够的空间 */
|
||||
|
||||
.delivery-addr { /* 配送地址部分的样式 */
|
||||
padding: 20rpx 30rpx; /* 设置上下左右内边距 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
|
||||
.user-info { /* 用户信息的样式 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
|
||||
.item { /* 用户信息项的样式 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
margin-right: 30rpx; /* 设置右边距 */
|
||||
vertical-align: top; /* 垂直对齐方式为顶部 */
|
||||
display: inline-block; /* 作为行内块级元素显示 */
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
word-wrap: break-word;
|
||||
|
||||
.addr { /* 地址的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
line-height: 36rpx; /* 设置行高 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品项的样式 */
|
||||
.prod-item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.item-cont {
|
||||
.prod-pic {
|
||||
background-color: #fff; /* 设置背景颜色为白色 */
|
||||
margin-top: 15rpx; /* 设置上边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
|
||||
.item-cont { /* 商品内容的样式 */
|
||||
.prod-pic { /* 商品图片的样式 */
|
||||
image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100%; /* 确保图片填满整个容器 */
|
||||
}
|
||||
font-size: 0;
|
||||
display: block;
|
||||
|
||||
font-size: 0; /* 消除行内元素间的空隙 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin-right: 16rpx; /* 设置右边距 */
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
display: flex; /* 使用弹性布局 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
padding: 30rpx; /* 设置内边距 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
|
||||
.prod-info { /* 商品信息的样式 */
|
||||
margin-left: 10rpx; /* 设置左边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
width: 100%; /* 设置宽度为100% */
|
||||
position: relative; /* 设置相对定位 */
|
||||
height: 80px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
flex: 1;
|
||||
.prodname {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
max-height: 86rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
|
||||
.prodname { /* 商品名称的样式 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
line-height: 40rpx; /* 设置行高 */
|
||||
max-height: 86rpx; /* 设置最大高度 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
}
|
||||
.prod-info-cont {
|
||||
position: relative;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
.info-item {
|
||||
color: #999;
|
||||
height: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
width: 70%;
|
||||
|
||||
.prod-info-cont { /* 商品信息内容的样式 */
|
||||
position: relative; /* 设置相对定位 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
margin-top: 10rpx; /* 设置上边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
|
||||
.info-item { /* 信息项的样式 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
height: 28rpx; /* 设置高度 */
|
||||
margin-top: 10rpx; /* 设置上边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
display: -webkit-box; /* 使用Webkit的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
width: 70%; /* 设置宽度 */
|
||||
}
|
||||
.number {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.number { /* 数量的样式 */
|
||||
float: left; /* 向左浮动 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-nums {
|
||||
margin-top: 30rpx;
|
||||
.prodprice {
|
||||
color: #333;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
float: left;
|
||||
|
||||
.price-nums { /* 价格和数量的样式 */
|
||||
margin-top: 30rpx; /* 设置上边距 */
|
||||
|
||||
.prodprice { /* 商品价格的样式 */
|
||||
color: #333; /* 设置字体颜色 */
|
||||
height: 50rpx; /* 设置高度 */
|
||||
line-height: 50rpx; /* 设置行高 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
float: left; /* 向左浮动 */
|
||||
}
|
||||
.btn-box {
|
||||
float: right;
|
||||
text-align: right;
|
||||
.btn {
|
||||
padding: 6rpx 30rpx;
|
||||
line-height: 36rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
border-radius: 50rpx;
|
||||
|
||||
.btn-box { /* 按钮容器的样式 */
|
||||
float: right; /* 向右浮动 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
|
||||
.btn { /* 按钮的样式 */
|
||||
padding: 6rpx 30rpx; /* 设置内边距 */
|
||||
line-height: 36rpx; /* 设置行高 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
display: inline-block; /* 作为行内块级元素显示 */
|
||||
border: 2rpx solid #e4e4e4; /* 设置边框 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单消息的样式 */
|
||||
.order-msg {
|
||||
background: #fff;
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
.msg-item {
|
||||
padding: 20rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
&:first-child {
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin-top: 15rpx; /* 设置上边距 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
|
||||
.msg-item { /* 消息项的样式 */
|
||||
padding: 20rpx; /* 设置内边距 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
|
||||
&:first-child { /* 第一个消息项没有上边框 */
|
||||
border: 0;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
.item-tit {
|
||||
min-width: 140rpx;
|
||||
color: #999;
|
||||
line-height: 48rpx;
|
||||
|
||||
.item { /* 消息项内部的样式 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
padding: 10rpx 0; /* 设置上下内边距 */
|
||||
align-items: center; /* 垂直居中对齐 */
|
||||
box-sizing: border-box; /* 设置盒模型 */
|
||||
|
||||
.item-tit { /* 项目标题的样式 */
|
||||
min-width: 140rpx; /* 设置最小宽度 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
line-height: 48rpx;
|
||||
|
||||
.item-txt { /* 项目文本的样式 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
line-height: 48rpx; /* 设置行高 */
|
||||
}
|
||||
.item-txt.remarks {
|
||||
max-width: 600rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.item-txt.remarks { /* 备注文本的样式 */
|
||||
max-width: 600rpx; /* 设置最大宽度 */
|
||||
white-space: nowrap; /* 不允许换行 */
|
||||
overflow: hidden; /* 超出内容隐藏 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
}
|
||||
.copy-btn {
|
||||
display: block;
|
||||
margin-left: 20rpx;
|
||||
border: 2rpx solid #e4e4e4;
|
||||
padding: 6rpx 24rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
|
||||
.copy-btn { /* 复制按钮的样式 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
border: 2rpx solid #e4e4e4; /* 设置边框 */
|
||||
padding: 6rpx 24rpx; /* 设置内边距 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
font-size: 24rpx; /* 设置字体大小 */
|
||||
line-height: 28rpx; /* 设置行高 */
|
||||
}
|
||||
.item-txt.price {
|
||||
text-align: right;
|
||||
|
||||
.item-txt.price { /* 价格文本的样式 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
}
|
||||
}
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.item.payment { /* 支付信息的样式 */
|
||||
border-top: 2rpx solid #f1f1f1; /* 设置上边框 */
|
||||
color: #eb2444; /* 设置字体颜色为红色 */
|
||||
padding-top: 30rpx; /* 设置上边距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单详情页脚的样式 */
|
||||
.order-detail-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: #fff;
|
||||
margin: auto;
|
||||
display: -webkit-flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 22rpx 0;
|
||||
font-size: 26rpx;
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||||
.dele-order {
|
||||
margin-left: 20rpx;
|
||||
line-height: 60rpx;
|
||||
display: block;
|
||||
margin-right: 20rpx;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
position: fixed; /* 固定定位 */
|
||||
bottom: 0; /* 固定在页面底部 */
|
||||
width: 100%; /* 设置宽度为100% */
|
||||
max-width: 750rpx; /* 设置最大宽度 */
|
||||
background: #fff; /* 设置背景颜色为白色 */
|
||||
margin: auto; /* 水平居中 */
|
||||
display: flex; /* 使用弹性布局 */
|
||||
padding: 22rpx 0; /* 设置上下内边距 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 设置阴影效果 */
|
||||
|
||||
.dele-order { /* 删除订单按钮的样式 */
|
||||
margin-left: 20rpx; /* 设置左边距 */
|
||||
line-height: 60rpx; /* 设置行高 */
|
||||
display: block; /* 作为块级元素显示 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
width: 150rpx; /* 设置宽度 */
|
||||
text-align: center; /* 文本居中 */
|
||||
}
|
||||
.footer-box {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
line-height: 60rpx;
|
||||
.buy-again {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
background: #eb2444;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.footer-box { /* 页脚容器的样式 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
line-height: 60rpx; /* 设置行高 */
|
||||
|
||||
.buy-again { /* 再次购买按钮的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
color: #fff; /* 设置字体颜色为白色 */
|
||||
background: #eb2444; /* 设置背景颜色为红色 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
padding: 10rpx 20rpx; /* 设置内边距 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
}
|
||||
.apply-service {
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.apply-service { /* 申请服务按钮的样式 */
|
||||
font-size: 26rpx; /* 设置字体大小 */
|
||||
border-radius: 50rpx; /* 设置圆角 */
|
||||
padding: 10rpx 20rpx; /* 设置内边距 */
|
||||
border: 1px solid #e4e4e4; /* 设置边框 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 清除浮动的样式 */
|
||||
.clearfix {
|
||||
&:after {
|
||||
&:after { /* 使用伪元素清除浮动 */
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: table; /* 创建一个新的格式化上下文 */
|
||||
clear: both; /* 清除所有浮动 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单状态的样式 */
|
||||
.order-state {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: right;
|
||||
margin-right: 20rpx;
|
||||
.order-sts {
|
||||
color: #eb2444;
|
||||
font-size: 28rpx;
|
||||
height: 70rpx; /* 设置高度 */
|
||||
line-height: 70rpx; /* 设置行高 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
|
||||
.order-sts { /* 订单状态文本的样式 */
|
||||
color: #eb2444; /* 设置字体颜色为红色 */
|
||||
font-size: 28rpx; /* 设置字体大小 */
|
||||
}
|
||||
.order-sts.gray {
|
||||
color: #999;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
|
||||
.order-sts.gray { /* 灰色状态文本的样式 */
|
||||
color: #999; /* 设置字体颜色为浅灰色 */
|
||||
height: 32rpx; /* 设置高度 */
|
||||
line-height: 32rpx; /* 设置行高 */
|
||||
}
|
||||
.order-sts.normal {
|
||||
color: #333;
|
||||
|
||||
.order-sts.normal { /* 正常状态文本的样式 */
|
||||
color: #333; /* 设置字体颜色为深灰色 */
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,222 +1,400 @@
|
||||
/* 定义容器样式 */
|
||||
.container {
|
||||
/* 设置背景颜色 */
|
||||
background-color: #f7f7f7;
|
||||
/* 设置底部内边距，以确保内容与底部有适当的空间 */
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
/* 用户信息模块样式 */
|
||||
.userinfo {
|
||||
/* 设置相对定位，以便其子元素可以使用绝对定位 */
|
||||
position: relative;
|
||||
/* 占满整个宽度 */
|
||||
width: 100%;
|
||||
/* 设置白色背景 */
|
||||
background: #fff;
|
||||
/* 文本居中显示 */
|
||||
text-align: center;
|
||||
/* 上下内边距，左右无内边距 */
|
||||
padding: 30rpx 0;
|
||||
|
||||
.userinfo-con {
|
||||
/* 设置固定宽度，使用户信息框在页面中心对齐 */
|
||||
width: 240rpx;
|
||||
/* 水平居中 */
|
||||
margin: auto;
|
||||
|
||||
.userinfo-avatar {
|
||||
/* 确保超出部分不显示 */
|
||||
overflow: hidden;
|
||||
/* 块级显示 */
|
||||
display: block;
|
||||
/* 设置头像的尺寸 */
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
/* 圆形头像 */
|
||||
border-radius: 50%;
|
||||
/* 添加阴影效果 */
|
||||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||
/* 水平居中 */
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
/* 设置图像的尺寸 */
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.userinfo-name {
|
||||
/* 设置字体大小 */
|
||||
font-size: 30rpx;
|
||||
/* 加粗字体 */
|
||||
font-weight: bold;
|
||||
/* 与头像保持一定间距 */
|
||||
margin-top: 20rpx;
|
||||
/* 处理文本溢出 */
|
||||
overflow: hidden;
|
||||
/* 使用 WebKit 独有的多行文本截断 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
/* 当文本溢出时用省略号表示 */
|
||||
text-overflow: ellipsis;
|
||||
/* 允许单词内部断行 */
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 未登录用户的提示信息样式 */
|
||||
.userinfo-none {
|
||||
/* 使用 Flexbox 布局，使子元素垂直和水平居中 */
|
||||
display: flex;
|
||||
/* 内边距 */
|
||||
padding: 30rpx;
|
||||
/* 白色背景 */
|
||||
background: #fff;
|
||||
/* 子元素垂直居中 */
|
||||
align-items: center;
|
||||
|
||||
.default-pic {
|
||||
/* 右侧内边距 */
|
||||
padding-right: 30rpx;
|
||||
|
||||
image {
|
||||
/* 设置图像的尺寸 */
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 未登录状态下的按钮和文本样式 */
|
||||
.none-login {
|
||||
button {
|
||||
/* 按钮背景色为白色 */
|
||||
background: #fff;
|
||||
|
||||
&::after {
|
||||
/* 移除默认的按钮边框 */
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.unlogin {
|
||||
/* 设置字体大小 */
|
||||
font-size: 30rpx;
|
||||
/* 文本左对齐 */
|
||||
text-align: left;
|
||||
/* 移除上下内边距 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.click-login {
|
||||
/* 设置较小的字体大小 */
|
||||
font-size: 26rpx;
|
||||
/* 颜色较深 */
|
||||
color: #777;
|
||||
/* 文本左对齐 */
|
||||
text-align: left;
|
||||
/* 移除上下内边距 */
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 绑定手机号的样式 */
|
||||
.binding-phone {
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 白色背景 */
|
||||
background: #fff;
|
||||
/* 固定高度 */
|
||||
height: 80rpx;
|
||||
/* 行高与高度相同，使文本垂直居中 */
|
||||
line-height: 80rpx;
|
||||
/* 内边距 */
|
||||
padding: 0 30rpx;
|
||||
/* 上下边框 */
|
||||
border-top: 2rpx solid #f7f7f7;
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
|
||||
.show-tip {
|
||||
/* 设置字体大小 */
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.gotobinding {
|
||||
/* 设置圆角 */
|
||||
border-radius: 8rpx;
|
||||
/* 字体大小 */
|
||||
font-size: 28rpx;
|
||||
color: #e24b4b;
|
||||
/* 颜色为红色 */
|
||||
color: #e24b42;
|
||||
/* 加粗字体 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表内容样式 */
|
||||
.list-cont {
|
||||
/* 占满整个宽度 */
|
||||
width: 100%;
|
||||
/* 背景颜色 */
|
||||
background: #f7f7f7;
|
||||
/* 顶部外边距 */
|
||||
margin-top: 20rpx;
|
||||
|
||||
.total-order {
|
||||
/* 白色背景 */
|
||||
background: #fff;
|
||||
|
||||
.order-tit {
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 两端对齐 */
|
||||
justify-content: space-between;
|
||||
/* 固定高度 */
|
||||
height: 80rpx;
|
||||
/* 行高与高度相同，使文本垂直居中 */
|
||||
line-height: 80rpx;
|
||||
/* 字体大小 */
|
||||
font-size: 30rpx;
|
||||
/* 下边框 */
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
/* 内边距 */
|
||||
padding: 0 30rpx;
|
||||
|
||||
.checkmore {
|
||||
/* 较小的字体大小 */
|
||||
font-size: 22rpx;
|
||||
/* 颜色较暗 */
|
||||
color: #80848f;
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 垂直居中 */
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.procedure {
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 项目均匀分布 */
|
||||
justify-content: space-around;
|
||||
/* 项目垂直居中 */
|
||||
align-items: center;
|
||||
/* 字体大小 */
|
||||
font-size: 25rpx;
|
||||
/* 固定高度 */
|
||||
height: 160rpx;
|
||||
|
||||
.items {
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 项目垂直排列 */
|
||||
flex-direction: column;
|
||||
/* 项目水平居中 */
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
/* 设置图像的尺寸 */
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
/* 与下方文字保持间距 */
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.num-badge {
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
/* 设置徽章位置 */
|
||||
top: -15rpx;
|
||||
right: -12rpx;
|
||||
/* 颜色为红色 */
|
||||
color: #eb2444;
|
||||
/* 边框颜色为红色 */
|
||||
border: 3rpx solid #eb2444;
|
||||
/* 圆形 */
|
||||
border-radius: 50rpx;
|
||||
/* 白色背景 */
|
||||
background: #fff;
|
||||
/* 最小宽度 */
|
||||
min-width: 30rpx;
|
||||
/* 固定高度 */
|
||||
height: 30rpx;
|
||||
/* 行高与高度相同，使文本垂直居中 */
|
||||
line-height: 30rpx;
|
||||
/* 文本水平居中 */
|
||||
text-align: center;
|
||||
/* 内边距 */
|
||||
padding: 2rpx;
|
||||
/* 块级显示 */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-menu {
|
||||
/* 白色背景 */
|
||||
background-color: #fff;
|
||||
/* 顶部外边距 */
|
||||
margin-top: 20rpx;
|
||||
|
||||
.memu-item {
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 项目垂直居中 */
|
||||
align-items: center;
|
||||
/* 项目两端对齐 */
|
||||
justify-content: space-between;
|
||||
/* 固定高度 */
|
||||
height: 100rpx;
|
||||
/* 下边框 */
|
||||
border-bottom: 2rpx solid #f7f7f7;
|
||||
/* 内边距 */
|
||||
padding: 0 30rpx;
|
||||
|
||||
&:nth-child(1) {
|
||||
/* 第一个项目的上边框 */
|
||||
border-top: 2rpx solid #f7f7f7;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
/* 最后一个项目的下边框移除 */
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
text {
|
||||
/* 字体大小 */
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
/* 设置图像的尺寸 */
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
/* 与右侧文本保持间距 */
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.i-name {
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 项目垂直居中 */
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 箭头样式 */
|
||||
.arrowhead {
|
||||
/* 设置箭头的尺寸 */
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
/* 上边框 */
|
||||
border-top: 2rpx solid #999;
|
||||
/* 右边框 */
|
||||
border-right: 2rpx solid #999;
|
||||
/* 旋转45度形成箭头形状 */
|
||||
transform: rotate(45deg);
|
||||
/* 左侧外边距 */
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 产品栏样式 */
|
||||
.prod-col {
|
||||
/* 顶部外边距 */
|
||||
margin-top: 20rpx;
|
||||
/* 白色背景 */
|
||||
background: #fff;
|
||||
/* 使用 Flexbox 布局 */
|
||||
display: flex;
|
||||
/* 项目均匀分布 */
|
||||
justify-content: space-around;
|
||||
/* 内边距 */
|
||||
padding: 30rpx 0 10rpx 0;
|
||||
/* 字体大小 */
|
||||
font-size: 12px;
|
||||
|
||||
.col-item {
|
||||
/* 文本居中 */
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
/* 字体较大且加粗 */
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
/* 颜色为蓝色 */
|
||||
color: #3a86b9;
|
||||
}
|
||||
|
||||
.tit {
|
||||
/* 行高 */
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 登出按钮样式 */
|
||||
.log-out {
|
||||
/* 内边距 */
|
||||
padding: 20rpx;
|
||||
/* 文本居中 */
|
||||
text-align: center;
|
||||
/* 顶部外边距 */
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.log-out-n {
|
||||
/* 字体大小 */
|
||||
font-size: 30rpx;
|
||||
/* 水平居中 */
|
||||
margin: auto;
|
||||
/* 固定宽度 */
|
||||
width: 200rpx;
|
||||
/* 内边距 */
|
||||
padding: 20rpx;
|
||||
/* 圆角 */
|
||||
border-radius: 10rpx;
|
||||
/* 红色背景 */
|
||||
background: #e43130;
|
||||
/* 白色文字 */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 自定义菜单按钮样式 */
|
||||
button.memu-btn.memu-item {
|
||||
/* 白色背景 */
|
||||
background-color: #fff;
|
||||
|
||||
&:after {
|
||||
/* 移除默认的按钮边框 */
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue