Skip to content

C
CFFP-HB
Commit fe8a6a77 by yuzhenWang
Options

调整适配4

parent 1f16eeb1
Showing with 157 additions and 159 deletions
pages/index/index.vue
...@@ -629,166 +629,164 @@ ...@@ -629,166 +629,164 @@
} }
} }
.productBox{ .productBox {
background-color: #fff; background-color: #fff;
margin-top: 15rpx; margin-top: 15rpx;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 100rpx; margin-bottom: 100rpx;
.productTitle{
border-bottom: 1rpx solid rgba(238, 238, 238, 1); .productTitle {
padding-bottom: 10rpx; border-bottom: 1rpx solid rgba(238, 238, 238, 1);
.titleTxt{ padding-bottom: 10rpx;
padding: 15rpx 30rpx;
display: flex; .titleTxt {
justify-content: space-between; padding: 15rpx 30rpx;
align-items: center; display: flex;
} justify-content: space-between;
.more{ align-items: center;
font-size: 26rpx; }
color: rgba(84, 84, 84, 1);
.icon-youjiantou{ .more {
font-size: 26rpx; font-size: 26rpx;
} color: rgba(84, 84, 84, 1);
}
} .icon-youjiantou {
/* 基础样式 - 移动端优先 */ font-size: 26rpx;
.productList { }
width: 100%; }
box-sizing: border-box; }
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
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-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
.productListBox { }
padding: 30rpx 30rpx; }
display: flex;
flex-wrap: wrap; /* iPad横屏和大屏幕平板 */
justify-content: space-between; @media (min-width: 1024px) and (max-width: 1279px) {
gap: 30rpx; .productList .productListBox {
.productListItem { grid-template-columns: repeat(3, 1fr); /* 三列 */
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */ gap: 30rpx;
margin-bottom: 20rpx; }
display: flex; }
flex-direction: column;
overflow: hidden; /* 电脑端 */
box-sizing: border-box; @media (min-width: 1280px) {
.productList .productListBox {
.top { grid-template-columns: repeat(4, 1fr); /* 四列 */
width: 100%; gap: 30rpx;
position: relative; }
border-radius: 20rpx; }
overflow: hidden;
.productEmpty {
/* 确保图片容器有固定宽高比 */ color: rgba(166, 166, 166, 1);
&::before { width: 100%;
content: ""; display: flex;
display: block; align-items: center;
padding-top: 100%; /* 1:1 宽高比 */ justify-content: center;
} padding: 30rpx 0;
font-size: 28rpx;
.productImg { }
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
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: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
@media (min-width: 768px) {
.productList {
.productListBox {
justify-content: flex-start;
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
.top{
.productDesBox{
padding: 10rpx 20rpx 20rpx 20rpx;
border-radius: 0 0 40rpx 40rpx;
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
.productEmpty{
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
} }
.joinContent{ .joinContent{
width: 500rpx; width: 500rpx;
......
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