feat: 样式的调整
This commit is contained in:
@@ -85,7 +85,7 @@
|
|||||||
min-height: fit-content;
|
min-height: fit-content;
|
||||||
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
|
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1000;
|
z-index: 1;
|
||||||
transition: padding-bottom 0.3s ease;
|
transition: padding-bottom 0.3s ease;
|
||||||
/* 确保输入区域始终可见 */
|
/* 确保输入区域始终可见 */
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部退出按钮 -->
|
<!-- 底部退出按钮 -->
|
||||||
<button class="logout-btn" @click="handleLogout">退出登录</button>
|
<text class="logout-btn" @click="handleLogout">退出登录</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -140,8 +140,11 @@ const handleLogout = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
width: 90%;
|
display: flex;
|
||||||
margin: 80rpx auto;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 42px;
|
||||||
|
margin-top: 40px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<view class="container-scroll">
|
<view class="container-scroll">
|
||||||
<view class="mk-card-item" v-for="(item) in commodityDTO.commodityList" :key="item.commodityName">
|
<view class="mk-card-item" v-for="(item) in commodityDTO.commodityList" :key="item.commodityName">
|
||||||
<!-- <view class="card-badge">超值推荐</view> -->
|
<!-- <view class="card-badge">超值推荐</view> -->
|
||||||
<image class="card-img" :src="item.commodityIcon" mode="widthFix" />
|
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
|
||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
<view class="card-title-column">
|
<view class="card-title-column">
|
||||||
<text class="card-title">{{ item.commodityName }}</text>
|
<text class="card-title">{{ item.commodityName }}</text>
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: 188px;
|
width: 188px;
|
||||||
height: 244px;
|
// height: 244px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@@ -94,6 +94,8 @@
|
|||||||
width: 188px;
|
width: 188px;
|
||||||
height: 114px;
|
height: 114px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
object-fit: cover; /* 确保图片不变形,保持比例裁剪 */
|
||||||
|
flex-shrink: 0; /* 防止图片被压缩 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
@@ -101,20 +103,33 @@
|
|||||||
padding: 10px 12px 0 12px;
|
padding: 10px 12px 0 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
flex: 1; /* 让内容区域占据剩余空间 */
|
||||||
|
overflow: hidden; /* 防止内容溢出 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title-column {
|
.card-title-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #222;
|
color: #222;
|
||||||
|
width: 100%;
|
||||||
|
/* 限制标题最多显示两行 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1.4;
|
||||||
|
max-height: 2.8em; /* 2行的高度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-tags {
|
.card-tags {
|
||||||
|
|||||||
Reference in New Issue
Block a user