Skip to content

C
CFFP-HB
Commit 5f4dbd2f by yuzhenWang
Options

调适配5

parent fe8a6a77
Showing with 95 additions and 22 deletions
pages/index/index.vue
...@@ -663,15 +663,19 @@ ...@@ -663,15 +663,19 @@
.productListBox { .productListBox {
padding: 30rpx; padding: 30rpx;
display: grid; 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 { .productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */ width: 100%;
max-width: 350rpx; /* 设置最大宽度 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; /* 居中显示 */
.top { .top {
width: 100%; width: 100%;
...@@ -697,23 +701,29 @@ ...@@ -697,23 +701,29 @@
} }
.productDesBox { .productDesBox {
box-sizing: border-box;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx; padding: 0 15rpx;
box-sizing: border-box; box-sizing: border-box;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx; border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */ -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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;
} }
} }
...@@ -756,16 +766,15 @@ ...@@ -756,16 +766,15 @@
/* iPad竖屏和小屏幕平板 */ /* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) { @media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
/* iPad横屏和大屏幕平板 */ /* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) { @media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
...@@ -773,7 +782,7 @@ ...@@ -773,7 +782,7 @@
/* 电脑端 */ /* 电脑端 */
@media (min-width: 1280px) { @media (min-width: 1280px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
......
pages/orderStatus/orderStatus.vue
...@@ -199,15 +199,19 @@ ...@@ -199,15 +199,19 @@
.productListBox { .productListBox {
padding: 30rpx; padding: 30rpx;
display: grid; 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 { .productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */ width: 100%;
max-width: 350rpx; /* 设置最大宽度 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; /* 居中显示 */
.top { .top {
width: 100%; width: 100%;
...@@ -233,23 +237,29 @@ ...@@ -233,23 +237,29 @@
} }
.productDesBox { .productDesBox {
box-sizing: border-box;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx; padding: 0 15rpx;
box-sizing: border-box; box-sizing: border-box;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx; border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */ -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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;
} }
} }
...@@ -292,16 +302,15 @@ ...@@ -292,16 +302,15 @@
/* iPad竖屏和小屏幕平板 */ /* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) { @media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
/* iPad横屏和大屏幕平板 */ /* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) { @media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
...@@ -309,7 +318,7 @@ ...@@ -309,7 +318,7 @@
/* 电脑端 */ /* 电脑端 */
@media (min-width: 1280px) { @media (min-width: 1280px) {
.productList .productListBox { .productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */ grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
gap: 30rpx; gap: 30rpx;
} }
} }
...@@ -324,6 +333,61 @@ ...@@ -324,6 +333,61 @@
font-size: 28rpx; 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> </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