xuchao/hhrs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页、场馆、折扣页面卡片布局及宽屏适配

Browse Source 
- 首页：banner限制最大高度300px，页面支持滚动
- 场馆/折扣：卡片结构统一，地址和距离合并容器靠右对齐
- 卡片宽度自适应屏幕，间距统一margin 12px
- card-name填充容器，超长截断
This commit is contained in:
jacobxu666
2026-07-17 11:08:57 +08:00
parent 12ee234130
commit 476cb64ee2
3 changed files with 57 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/discount/discount.vue
+25 -11
View File
@@ -22,11 +22,13 @@
<view class="card-info">
<text class="card-name">{{ item.name }}</text>
<text class="card-category">{{ item.category }}</text>
<text class="card-address">{{ item.address }}</text>
</view>
<view class="card-distance" v-if="item.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
<view class="card-bottom">
<text class="card-address">{{ item.address }}</text>
<view class="card-distance" v-if="item.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
</view>
</view>
</view>
</view>
<view v-if="hasScrolled" class="nomore-area">
@@ -178,7 +180,6 @@ export default {
}
.list-area {
padding: 12px;
}
.venue-card {
@@ -187,11 +188,10 @@ export default {
background-color: #ffffff;
border: 1px solid #f2f2f7;
border-radius: 6px;
width: 702rpx;
padding: 24px 12px;
padding: 12px;
gap: 12px;
box-shadow: 0 2px 3px #f2f2f7;
margin-bottom: 12px;
margin: 12px;
}
.card-img {
@@ -206,12 +206,18 @@ export default {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
min-width: 0;
}
.card-name {
font-size: 16px;
font-weight: 500;
color: #000000;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-category {
@@ -220,14 +226,22 @@ export default {
margin-top: 8px;
}
.card-bottom {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 8px;
gap: 8px;
}
.card-address {
flex: 1;
font-size: 14px;
color: #727272;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
min-width: 0;
}
.card-distance {
pages/index/index.vue
+7 -1
View File
@@ -102,11 +102,17 @@
.page {
height: 100vh;
background-color: #f5f5f5;
overflow: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.banner {
width: 100%;
max-height: 300px;
overflow: hidden;
}
.banner-img {
width: 100%;
display: block;
pages/venue/venue.vue
+25 -11
View File
@@ -22,11 +22,13 @@
<view class="card-info">
<text class="card-name">{{ item.name }}</text>
<text class="card-category">{{ item.category }}</text>
<text class="card-address">{{ item.address }}</text>
</view>
<view class="card-distance" v-if="item.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
<view class="card-bottom">
<text class="card-address">{{ item.address }}</text>
<view class="card-distance" v-if="item.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
</view>
</view>
</view>
</view>
<view v-if="hasScrolled" class="nomore-area">
@@ -178,7 +180,6 @@ export default {
}
.list-area {
padding: 12px;
}
.venue-card {
@@ -187,11 +188,10 @@ export default {
background-color: #ffffff;
border: 1px solid #f2f2f7;
border-radius: 6px;
width: 702rpx;
padding: 24px 12px;
padding: 12px;
gap: 12px;
box-shadow: 0 2px 3px #f2f2f7;
margin-bottom: 12px;
margin: 12px;
}
.card-img {
@@ -206,12 +206,18 @@ export default {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
min-width: 0;
}
.card-name {
font-size: 16px;
font-weight: 500;
color: #000000;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-category {
@@ -220,14 +226,22 @@ export default {
margin-top: 8px;
}
.card-bottom {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 8px;
gap: 8px;
}
.card-address {
flex: 1;
font-size: 14px;
color: #727272;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
min-width: 0;
}
.card-distance {