XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ui): 替换交通方式图标为文字描述以提高可读性

Browse Source 
将步行、地铁和巴士的图标替换为对应的文字描述，使界面更加直观易懂。
同时移除不再使用的图标资源引用，保持代码简洁。
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-06-11 12:03:33 +08:00
parent 34185d8d1f
commit a4f422126b
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/public/apartment-item.vue
View File

@@ -54,16 +54,16 @@
</div> </div>
<div class="vehicle-list flex1 flexflex"> <div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0"> <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
{{ calculateDuration(item.distance.walking_duration) }} 步行{{ calculateDuration(item.distance.walking_duration) }}
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration > 0"> <div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
{{ calculateDuration(item.distance.transit_duration) }} 地铁{{ calculateDuration(item.distance.transit_duration) }}
</div> </div>
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration > 0"> <div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
{{ calculateDuration(item.distance.driving_duration) }} 巴士{{ calculateDuration(item.distance.driving_duration) }}
</div> </div>
</div> </div>
</div> </div>

26
src/views/apartmentDetail.vue
View File

@@ -101,16 +101,16 @@
<div class="vehicle flexflex"> <div class="vehicle flexflex">
<div class="item flexcenter" v-if="distancePitch?.walking_duration > 0"> <div class="item flexcenter" v-if="distancePitch?.walking_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> <!-- <img class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
{{ calculateDuration(distancePitch.walking_duration) }} 步行{{ calculateDuration(distancePitch.walking_duration) }}
</div> </div>
<div class="item flexcenter" v-if="distancePitch?.transit_duration > 0"> <div class="item flexcenter" v-if="distancePitch?.transit_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> <!-- <img class="icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
{{ calculateDuration(distancePitch.transit_duration) }} 地铁{{ calculateDuration(distancePitch.transit_duration) }}
</div> </div>
<div class="item flexcenter" v-if="distancePitch?.driving_duration > 0"> <div class="item flexcenter" v-if="distancePitch?.driving_duration > 0">
<img class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> <!-- <img class="icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
{{ calculateDuration(distancePitch.driving_duration) }} 巴士{{ calculateDuration(distancePitch.driving_duration) }}
</div> </div>
</div> </div>
</div> </div>
@@ -613,16 +613,16 @@
</div> </div>
<div class="vehicle flexflex flex1"> <div class="vehicle flexflex flex1">
<div class="item flexcenter" v-if="item.walking_duration > 0"> <div class="item flexcenter" v-if="item.walking_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
{{ calculateDuration(item.walking_duration) }} 步行{{ calculateDuration(item.walking_duration) }}
</div> </div>
<div class="item flexcenter" v-if="item.transit_duration > 0"> <div class="item flexcenter" v-if="item.transit_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" /> -->
{{ calculateDuration(item.transit_duration) }} 地铁{{ calculateDuration(item.transit_duration) }}
</div> </div>
<div class="item flexcenter" v-if="item.driving_duration > 0"> <div class="item flexcenter" v-if="item.driving_duration > 0">
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> <!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" /> -->
{{ calculateDuration(item.driving_duration) }} 巴士{{ calculateDuration(item.driving_duration) }}
</div> </div>
</div> </div>
</div> </div>
@@ -2213,7 +2213,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
margin-right: 10px; margin-right: 10px;
// cursor: pointer; // cursor: pointer;
margin-bottom: 4px; margin-bottom: 4px;
.image { .image {
// width: 72px; // width: 72px;
height: 16px; height: 16px;