4.6接接口和样式
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user