Skip to content

C
CFFP-HB
Commit 4d31decf by yuzhenWang
Options

Merge branch 'feature-20250616wyz-页面翻新' into 'dev' 

调适配5

See merge request !32
parents 7f4ca854 5f4dbd2f
Showing with 95 additions and 22 deletions
pages/index/index.vue
......@@ -669,15 +669,19 @@
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
/* 默认两列，固定宽度 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
justify-content: center;
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
width: 100%;
max-width: 350rpx; /* 设置最大宽度 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto; /* 居中显示 */
.top {
width: 100%;
......@@ -703,23 +707,29 @@
}
.productDesBox {
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
padding: 0 15rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
/* 关键修改：添加精确的高度计算 */
max-height: calc(2 * 1.4 * 24rpx); /* 2行 × 行高 × 字体大小 */
line-height: 1.5;
/* 确保在Firefox等浏览器也有效 */
display: -moz-box;
-moz-box-orient: vertical;
-moz-line-clamp: 2;
}
}
......@@ -762,16 +772,15 @@
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
......@@ -779,7 +788,7 @@
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
......
pages/orderStatus/orderStatus.vue
......@@ -202,15 +202,19 @@
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
/* 默认两列，固定宽度 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
justify-content: center;
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
width: 100%;
max-width: 350rpx; /* 设置最大宽度 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto; /* 居中显示 */
.top {
width: 100%;
......@@ -236,23 +240,29 @@
}
.productDesBox {
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
padding: 0 15rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
/* 关键修改：添加精确的高度计算 */
max-height: calc(2 * 1.4 * 24rpx); /* 2行 × 行高 × 字体大小 */
line-height: 1.5;
/* 确保在Firefox等浏览器也有效 */
display: -moz-box;
-moz-box-orient: vertical;
-moz-line-clamp: 2;
}
}
......@@ -295,16 +305,15 @@
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
......@@ -312,7 +321,7 @@
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx;
}
}
......@@ -327,6 +336,61 @@
font-size: 28rpx;
}
}
.statusBox{
padding: 30rpx 0;
background-color: #fff;
margin-bottom: 10rpx;
.successBox{
display: flex;
flex-direction: column;
align-items: center;
.statusText{
color: #20279B;
font-size: 36rpx;
}
.viewOrder{
color: #666666;
font-size: 30rpx;
margin-top: 30rpx;
}
.iconfont{
margin-bottom: 30rpx;
font-size: 100rpx;
color: #20279B;
}
}
.failBox{
display: flex;
flex-direction: column;
align-items: center;
.iconfont{
border: 1px solid #F15A1F;
padding: 12rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.optionBox{
display: flex;
justify-content: center;
margin-top: 60rpx;
text{
border-radius: 40rpx;
background-color: #20279B;
color: #fff;
font-size: 30rpx;
padding: 10rpx 50rpx;
margin-right: 20rpx;
&:first-child{
background-color: transparent;
color: #20279B;
border: 1px solid #20279B;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment