Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao
commit
7628368869
@ -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;
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
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; /* 允许长单词或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;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
.prod-info {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
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%; /* 设置宽度为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;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.number {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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的弹性盒子模型 */
|
||||
-webkit-line-clamp: 1; /* 限制文本行数为1 */
|
||||
-webkit-box-orient: vertical; /* 盒子的方向是垂直的 */
|
||||
text-overflow: ellipsis; /* 超出内容以省略号显示 */
|
||||
word-break: break-all; /* 在任何字符间断开 */
|
||||
width: 70%; /* 设置宽度 */
|
||||
}
|
||||
|
||||
.number { /* 数量的样式 */
|
||||
float: left; /* 向左浮动 */
|
||||
margin-right: 20rpx; /* 设置右边距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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; /* 设置圆角 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 订单消息的样式 */
|
||||
.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-txt {
|
||||
flex: 1;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.item-txt.price {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.item.payment {
|
||||
border-top: 2rpx solid #f1f1f1;
|
||||
color: #eb2444;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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.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; /* 设置行高 */
|
||||
}
|
||||
|
||||
.item-txt.price { /* 价格文本的样式 */
|
||||
text-align: right; /* 文本右对齐 */
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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; /* 设置右边距 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.order-sts.gray {
|
||||
color: #999;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.order-sts.normal {
|
||||
color: #333;
|
||||
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.normal { /* 正常状态文本的样式 */
|
||||
color: #333; /* 设置字体颜色为深灰色 */
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue