4.6接接口和样式

This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-14 18:52:31 +08:00
parent 4b84dd558e
commit d201c8892f
22 changed files with 1064 additions and 690 deletions

View File

@@ -41,23 +41,23 @@
</div>
<div class="distance flexflex">
<div class="figure flexacenter" v-if="item.distance?.distance">
<div class="figure flexflex" v-if="item.distance?.distance">
距离
<div class="school">{{ item.distance.alias }}</div>
<div class="mile">{{ item.distance.distance }}km</div>
<div class="mile">{{ calculateDistance(item.distance.distance) }}km</div>
</div>
<div class="vehicle-list flex1 flexflex">
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
{{ item.distance.walking_duration }}
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
{{ calculateDuration(item.distance.walking_duration) }}
</div>
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
{{ item.distance.transit_duration }}
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
{{ calculateDuration(item.distance.transit_duration) }}
</div>
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration">
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
{{ item.distance.driving_duration }}
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
{{ calculateDuration(item.distance.driving_duration) }}
</div>
</div>
</div>
@@ -98,7 +98,7 @@
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { redirectToExternalWebsite } from "@/utils/util.js";
import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
const router = useRouter();
const props = defineProps({
@@ -327,13 +327,13 @@ const loadload = () => {
.distance {
padding: 0 12px 12px 29px;
border-bottom: 1px dashed #d7d7d7;
border-bottom: 1px dotted #d7d7d7;
.figure {
font-size: 14px;
color: #555555;
text-align: right;
line-height: 26px;
margin-right: 5px;
line-height: 22px;
margin-right: 8px;
.school {
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
@@ -355,6 +355,7 @@ const loadload = () => {
.vehicle-item {
height: 22px;
line-height: 22px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(127, 127, 127, 1);
border-radius: 30px;
@@ -362,6 +363,7 @@ const loadload = () => {
color: #333333;
padding: 0 8px;
margin-right: 6px;
margin-bottom: 5px;
.vehicle-icon {
width: 14px;