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

style: 权益详情页地址距离并入景区信息卡片，样式对齐门店详情页

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-31 16:58:16 +08:00
co-authored by Claude Fable 5
parent 4be46bcb79
commit 1521129d87
1 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/rights/detail.vue
+22 -11
View File
@@ -1,8 +1,9 @@
<template> <template>
<view class="page"> <view class="page">
<view v-if="detail"> <view v-if="detail">
<!-- 门店信息卡片 --> <!-- 门店信息卡片（信息+地址合并容器） -->
<view class="store-card"> <view class="store-card">
<view class="store-main">
<image class="store-img" :src="detail.shopImage" mode="aspectFill" /> <image class="store-img" :src="detail.shopImage" mode="aspectFill" />
<view class="store-info"> <view class="store-info">
<text class="store-name">{{ detail.shopName }}</text> <text class="store-name">{{ detail.shopName }}</text>
@@ -10,8 +11,7 @@
<text class="store-hours">营业时间：{{ detail.businessTime }}</text> <text class="store-hours">营业时间：{{ detail.businessTime }}</text>
</view> </view>
</view> </view>
<view class="divider"></view>
<!-- 地址行 -->
<view class="address-row"> <view class="address-row">
<text class="address-text">{{ detail.address }}</text> <text class="address-text">{{ detail.address }}</text>
<view class="distance-row" v-if="detail.distance !== null"> <view class="distance-row" v-if="detail.distance !== null">
@@ -19,6 +19,7 @@
<text class="distance-text">{{ detail.distance < 1 ? Math.round(detail.distance * 1000) + 'm' : Math.round(detail.distance) + 'km' }}</text> <text class="distance-text">{{ detail.distance < 1 ? Math.round(detail.distance * 1000) + 'm' : Math.round(detail.distance) + 'km' }}</text>
</view> </view>
</view> </view>
</view>
<!-- 选择预约日期 --> <!-- 选择预约日期 -->
<view class="date-section" v-if="detail.isAppointment && detail.dates && detail.dates.length > 0"> <view class="date-section" v-if="detail.isAppointment && detail.dates && detail.dates.length > 0">
@@ -180,12 +181,17 @@ export default {
} }
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
/* 门店卡片 */ /* 门店卡片（信息+地址合并容器，样式与门店详情页一致） */
.store-card { .store-card {
display: flex;
background-color: #ffffff; background-color: #ffffff;
margin:0rpx 12px 12px 12px; margin: 0 12px 12px 12px;
border-radius: 8px; border-radius: 8px;
overflow: hidden;
}
.store-main {
display: flex;
align-items: flex-start;
padding: 12px; padding: 12px;
gap: 12px; gap: 12px;
} }
@@ -201,8 +207,8 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
gap: 6px; gap: 8px;
} }
.store-name { .store-name {
@@ -221,13 +227,18 @@ export default {
color: #666666; color: #666666;
} }
/* 地址行 */ .divider {
height: 1px;
background-color: #f2f2f7;
margin: 0 12px;
}
/* 地址行（卡片内） */
.address-row { .address-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #ffffff; padding: 12px;
padding: 12px 16px;
} }
.address-text { .address-text {