Compare commits

...

2 Commits

Author SHA1 Message Date
aedc71903d feat: 样式的调整 2025-08-05 22:02:10 +08:00
680ac8fd38 feat: 商品的展示数据加载 2025-08-05 20:46:43 +08:00
3 changed files with 31 additions and 13 deletions

View File

@ -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);

View File

@ -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;

View File

@ -3,18 +3,18 @@
<ModuleTitle :title="commodityDTO.title" /> <ModuleTitle :title="commodityDTO.title" />
<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>
<view class="card-tags"> <view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
<text class="card-tag">随时可退</text> <text class="card-tag">{{ tag }}</text>
<text class="card-tag">民俗表演</text>
</view> </view>
</view> </view>
<view class="card-desc">· 往返观光车票</view> <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
<view class="card-desc">· 营业时间9:00-22:00</view> <view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
</template>
<view class="card-bottom-row"> <view class="card-bottom-row">
<view class="card-price-row"> <view class="card-price-row">
<text class="card-price-fu"></text> <text class="card-price-fu"></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,27 +94,42 @@
width: 188px; width: 188px;
height: 114px; height: 114px;
border-radius: 10px; border-radius: 10px;
object-fit: cover; /* 确保图片不变形,保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */
} }
.card-content { .card-content {
box-sizing: border-box; box-sizing: border-box;
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 {