增加一项交通方式:地铁巴士
This commit is contained in:
A1300399510
1
dist/css/232.4c19ab83.css
vendored
1
dist/css/232.4c19ab83.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/910.e95979e9.css
vendored
Normal file
1
dist/css/910.e95979e9.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/detail.861ae292.css
vendored
Normal file
1
dist/css/detail.861ae292.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/detail.9462400e.css
vendored
1
dist/css/detail.9462400e.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
dist/css/user.17bc7dc2.css
vendored
1
dist/css/user.17bc7dc2.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/user.f59102b1.css
vendored
Normal file
1
dist/css/user.f59102b1.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/index.html
vendored
2
dist/index.html
vendored
@@ -1,4 +1,4 @@
|
|||||||
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.5bed831c.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.776f38c5.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.0cfa5b10.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || []
|
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.5bed831c.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.b7f0439c.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.0cfa5b10.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || []
|
||||||
;(function () {
|
;(function () {
|
||||||
var hm = document.createElement("script")
|
var hm = document.createElement("script")
|
||||||
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"
|
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
1
dist/js/232.4b0d3535.js
vendored
1
dist/js/232.4b0d3535.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/910.aa5bae8f.js
vendored
Normal file
1
dist/js/910.aa5bae8f.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/app.776f38c5.js
vendored
1
dist/js/app.776f38c5.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/app.b7f0439c.js
vendored
Normal file
1
dist/js/app.b7f0439c.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/detail.9ad23c93.js
vendored
Normal file
1
dist/js/detail.9ad23c93.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/detail.f4e95ecb.js
vendored
1
dist/js/detail.f4e95ecb.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/housing.25bbb96d.js
vendored
1
dist/js/housing.25bbb96d.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/housing.88b44d74.js
vendored
Normal file
1
dist/js/housing.88b44d74.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
dist/js/user.1a2650d0.js
vendored
1
dist/js/user.1a2650d0.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/user.5c002961.js
vendored
Normal file
1
dist/js/user.5c002961.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -32,7 +32,8 @@
|
|||||||
<div class="label-item flexacenter violet">0服务费</div>
|
<div class="label-item flexacenter violet">0服务费</div>
|
||||||
<div class="label-item flexacenter red" v-for="(item, index) in item.hottags" :key="index">{{ item }}</div>
|
<div class="label-item flexacenter red" v-for="(item, index) in item.hottags" :key="index">{{ item }}</div>
|
||||||
<template v-if="item.tags">
|
<template v-if="item.tags">
|
||||||
<div class="label-item flexacenter" v-for="(item, index) in item.tags.split(',')" :key="index">{{ item }}</div>
|
<div class="label-item flexacenter" v-for="(item, index) in item.tags.split(',')" :key="index">{{ item
|
||||||
|
}}</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="title">{{ item["title"] }}</div>
|
<!-- <div class="title">{{ item["title"] }}</div>
|
||||||
@@ -52,19 +53,19 @@
|
|||||||
<div class="school">{{ item.distance.alias }}</div>
|
<div class="school">{{ item.distance.alias }}</div>
|
||||||
<div class="mile" v-if="item.distance.distance > 0">{{ item.distance.distance }}km</div>
|
<div class="mile" v-if="item.distance.distance > 0">{{ item.distance.distance }}km</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vehicle-list flex1 flexflex">
|
<div class="vehicle-list flex1 flexflex" v-if="distanceArr.length > 0">
|
||||||
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
|
<div class="vehicle-item flexacenter" v-for="(item, index) in distanceArr" :key="index">{{ item.text + item.duration }}</div>
|
||||||
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
|
|
||||||
步行{{ calculateDuration(item.distance.walking_duration) }}
|
|
||||||
|
<!-- <div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration > 0">
|
||||||
|
步行{{ calculateDuration(item.distance.walking_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/subway-icon.png" /> -->
|
地铁{{ calculateDuration(item.distance.driving_duration) }}
|
||||||
地铁{{ calculateDuration(item.distance.driving_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/taxi-icon.png" /> -->
|
巴士{{ calculateDuration(item.distance.transit_duration) }}
|
||||||
巴士{{ calculateDuration(item.distance.transit_duration) }}
|
</div> -->
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -102,7 +103,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, watch } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
|
import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -113,6 +114,42 @@ const props = defineProps({
|
|||||||
masonryInstance: Object,
|
masonryInstance: Object,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let distanceArr = ref([])
|
||||||
|
|
||||||
|
// 监听 item 变化
|
||||||
|
watch(
|
||||||
|
() => props.item,
|
||||||
|
(newItem) => {
|
||||||
|
const keyobj = {
|
||||||
|
metrobus_duration: "地铁巴士",
|
||||||
|
walking_duration: "步行",
|
||||||
|
driving_duration: "地铁",
|
||||||
|
transit_duration: "巴士",
|
||||||
|
}
|
||||||
|
const arr = ["metrobus_duration", "walking_duration", "transit_duration", "driving_duration"]
|
||||||
|
const distance = newItem.distance || {}
|
||||||
|
let valueArr = []
|
||||||
|
|
||||||
|
arr.forEach(key => {
|
||||||
|
if (distance[key] > 0) {
|
||||||
|
const value = distance[key]
|
||||||
|
valueArr.push({
|
||||||
|
text: keyobj[key],
|
||||||
|
value,
|
||||||
|
duration: calculateDuration(value),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
distanceArr.value = valueArr.sort((a, b) => Number(a.value) - Number(b.value)).slice(0, 3);
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true, // 初始化时立即执行一次
|
||||||
|
deep: true // 如果需要监听 item 内部属性的深层变化
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const emit = defineEmits(["handlecollect"]);
|
const emit = defineEmits(["handlecollect"]);
|
||||||
|
|
||||||
const goapArtmentDetails = () => {
|
const goapArtmentDetails = () => {
|
||||||
@@ -253,6 +290,7 @@ const loadload = () => {
|
|||||||
.label-list {
|
.label-list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0 12px 7px;
|
margin: 0 12px 7px;
|
||||||
|
|
||||||
.label-item {
|
.label-item {
|
||||||
color: #434343;
|
color: #434343;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -342,6 +380,7 @@ const loadload = () => {
|
|||||||
.distance {
|
.distance {
|
||||||
padding: 0 1px 12px 29px;
|
padding: 0 1px 12px 29px;
|
||||||
border-bottom: 1px dotted #d7d7d7;
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
|
||||||
.figure {
|
.figure {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
@@ -366,6 +405,7 @@ const loadload = () => {
|
|||||||
|
|
||||||
.vehicle-list {
|
.vehicle-list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
padding-right: 5px;
|
||||||
|
|
||||||
.vehicle-item {
|
.vehicle-item {
|
||||||
height: 22px;
|
height: 22px;
|
||||||
@@ -394,6 +434,7 @@ const loadload = () => {
|
|||||||
.collect-type {
|
.collect-type {
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
|
||||||
.collect {
|
.collect {
|
||||||
.flame-icon {
|
.flame-icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
@@ -424,6 +465,7 @@ const loadload = () => {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
|
|
||||||
.type-item {
|
.type-item {
|
||||||
height: 54px;
|
height: 54px;
|
||||||
|
|
||||||
@@ -440,6 +482,7 @@ const loadload = () => {
|
|||||||
.price {
|
.price {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
.type-data {
|
.type-data {
|
||||||
.unit {
|
.unit {
|
||||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
@@ -458,12 +501,14 @@ const loadload = () => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.original-price {
|
.original-price {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -509,6 +554,7 @@ const loadload = () => {
|
|||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
color: #50e3c2;
|
color: #50e3c2;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "|";
|
content: "|";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -19,41 +19,62 @@
|
|||||||
<div class="header-content flexflex">
|
<div class="header-content flexflex">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<!-- <image-watch style="z-index: 10000;" arrow="never" :index="imageIndex" :show="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch> -->
|
<!-- <image-watch style="z-index: 10000;" arrow="never" :index="imageIndex" :show="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch> -->
|
||||||
<image-watch arrow="never" :index="imageIndex" v-if="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch>
|
<image-watch arrow="never" :index="imageIndex" v-if="imageShow" :close="cloaseImageShow"
|
||||||
|
:list="imageList"></image-watch>
|
||||||
<div class="slideshow">
|
<div class="slideshow">
|
||||||
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp" @change="carouselChange">
|
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp"
|
||||||
|
@change="carouselChange">
|
||||||
<el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData" :key="index">
|
<el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData" :key="index">
|
||||||
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img" :src="item['image'] || item['imageurl']" alt="公寓图片" @click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')" />
|
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img"
|
||||||
|
:src="item['image'] || item['imageurl']" alt="公寓图片"
|
||||||
|
@click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')" />
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
<div class="indicate-type flexacenter" v-if="indicateTypeState()">
|
<div class="indicate-type flexacenter" v-if="indicateTypeState()">
|
||||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }" v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播</div>
|
<div class="indicate-item"
|
||||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }" v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频</div>
|
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'lives' }"
|
||||||
<div class="indicate-item" :class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }" v-if="info['attachment'] && info['attachment'].length != 0" @click="slideshowType('attachment')">图片</div>
|
v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">直播
|
||||||
|
</div>
|
||||||
|
<div class="indicate-item"
|
||||||
|
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'videos' }"
|
||||||
|
v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频
|
||||||
|
</div>
|
||||||
|
<div class="indicate-item"
|
||||||
|
:class="{ pitch: allCarouselsData[carouselIndex]['type'] == 'attachment' }"
|
||||||
|
v-if="info['attachment'] && info['attachment'].length != 0"
|
||||||
|
@click="slideshowType('attachment')">图片</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="indicate" v-if="allCarouselsData.length != 0">{{ carouselIndex - carouselsconfig[allCarouselsData[carouselIndex]["type"]]["index"] + 1 }}/{{ carouselsconfig[allCarouselsData[carouselIndex]["type"]]["amount"] }}</div>
|
<div class="indicate" v-if="allCarouselsData.length != 0">{{ carouselIndex -
|
||||||
|
carouselsconfig[allCarouselsData[carouselIndex]["type"]]["index"] + 1 }}/{{
|
||||||
|
carouselsconfig[allCarouselsData[carouselIndex]["type"]]["amount"] }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slideshow-across flexflex">
|
<div class="slideshow-across flexflex">
|
||||||
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
|
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
|
||||||
<img v-if="carouselIndex == 0" class="arrow" alt="不可点击的左箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
|
<img v-if="carouselIndex == 0" class="arrow" alt="不可点击的左箭头切换"
|
||||||
<img v-else class="arrow rotate180" alt="可点击的左箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
|
src="@/assets/img/publicImage/gray-arrow.svg" />
|
||||||
|
<img v-else class="arrow rotate180" alt="可点击的左箭头切换"
|
||||||
|
src="@/assets/img/publicImage/black-arrow.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div ref="slideshowList" class="slideshow-list box no-scrollbar flex1 flexacenter">
|
<div ref="slideshowList" class="slideshow-list box no-scrollbar flex1 flexacenter">
|
||||||
<!-- <div class="item" :class="({ pitch: index == carouselIndex }, `item${index}`)" v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)" :key="index"> -->
|
<!-- <div class="item" :class="({ pitch: index == carouselIndex }, `item${index}`)" v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)" :key="index"> -->
|
||||||
<div class="item" :class="getClass(index)" v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)" :key="index">
|
<div class="item" :class="getClass(index)" v-for="(item, index) in allCarouselsData"
|
||||||
|
@click="slideshowItem(index)" :key="index">
|
||||||
<img class="img" alt="公寓图片缩略图" v-lazy="item['thumbnail'] || item['imageurl']" />
|
<img class="img" alt="公寓图片缩略图" v-lazy="item['thumbnail'] || item['imageurl']" />
|
||||||
<img class="video-icon" v-if="item['type'] != 'attachment'" src="@/assets/img/publicImage/video-icon.svg" />
|
<img class="video-icon" v-if="item['type'] != 'attachment'"
|
||||||
|
src="@/assets/img/publicImage/video-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
|
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
|
||||||
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180" alt="不可点击的右箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
|
<img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180"
|
||||||
|
alt="不可点击的右箭头切换" src="@/assets/img/publicImage/gray-arrow.svg" />
|
||||||
<img v-else class="arrow" alt="可点击的右箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
|
<img v-else class="arrow" alt="可点击的右箭头切换" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right flex1">
|
<div class="header-right flex1">
|
||||||
<img class="header-bj" alt="头部的地图背景" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
|
<img class="header-bj" alt="头部的地图背景"
|
||||||
|
src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.jpg" />
|
||||||
<!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
|
<!-- <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg"> -->
|
||||||
<!-- <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
|
<!-- <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
|
||||||
<div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
|
<div class="tab-item wordbreak flexcenter" v-for="(item, index) in info['tags']" :key="index">{{ item }}</div>
|
||||||
@@ -99,19 +120,19 @@
|
|||||||
<div class="btn" @click="openSelectSchool">[切换院校]</div>
|
<div class="btn" @click="openSelectSchool">[切换院校]</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vehicle flexflex">
|
<div class="vehicle flexflex" v-if="distancePitch.distanceArr?.length > 0">
|
||||||
<div class="item flexcenter" v-if="distancePitch?.walking_duration > 0">
|
<div class="item flexcenter" v-for="(item, index) in distancePitch.distanceArr"
|
||||||
<!-- <img class="icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
|
:key="index">{{ item.text +
|
||||||
|
item.duration }}</div>
|
||||||
|
<!-- <div class="item flexcenter" v-if="distancePitch?.walking_duration > 0">
|
||||||
步行{{ calculateDuration(distancePitch.walking_duration) }}
|
步行{{ calculateDuration(distancePitch.walking_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/subway-icon.png" /> -->
|
|
||||||
地铁{{ calculateDuration(distancePitch.driving_duration) }}
|
地铁{{ calculateDuration(distancePitch.driving_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/taxi-icon.png" /> -->
|
|
||||||
巴士{{ calculateDuration(distancePitch.transit_duration) }}
|
巴士{{ calculateDuration(distancePitch.transit_duration) }}
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="else flexacenter" v-if="withsameapartments">
|
<!-- <div class="else flexacenter" v-if="withsameapartments">
|
||||||
@@ -131,11 +152,15 @@
|
|||||||
<div class="operate-box-bj flexcenter" v-if="isOperateShow">
|
<div class="operate-box-bj flexcenter" v-if="isOperateShow">
|
||||||
<div class="operate-box flexacenter" aria-label="详情的导航栏">
|
<div class="operate-box flexacenter" aria-label="详情的导航栏">
|
||||||
<div class="nav-box flexacenter">
|
<div class="nav-box flexacenter">
|
||||||
<div class="nav-item flexcenter" :class="{ pitch: navTab == item.value }" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @click="handleClickNav(item.value)">{{ item["value"] == "roomEle" ? `${item["name"]} ${roomList.length}` : item["name"] }}</div>
|
<div class="nav-item flexcenter" :class="{ pitch: navTab == item.value }"
|
||||||
|
:aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index"
|
||||||
|
@click="handleClickNav(item.value)">{{ item["value"] ==
|
||||||
|
"roomEle" ? `${item["name"]} ${roomList.length}` : item["name"] }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-box flexacenter">
|
<div class="btn-box flexacenter">
|
||||||
<div class="btn-item transmit-btn flexcenter" @click="handleCollect">
|
<div class="btn-item transmit-btn flexcenter" @click="handleCollect">
|
||||||
<img v-if="info.iscollect == 1" alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collectT.png" />
|
<img v-if="info.iscollect == 1" alt="收藏图标" class="transmit-icon"
|
||||||
|
src="@/assets/img/detail/collectT.png" />
|
||||||
<img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
|
<img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
|
||||||
收藏
|
收藏
|
||||||
</div>
|
</div>
|
||||||
@@ -150,7 +175,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="details-box flexflex" ref="detailsBox">
|
<div class="details-box flexflex" ref="detailsBox">
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div class="details-left flex1" :class="{ fixed: isFixed }" :style="{ bottom: FixedBottom + 'px' }" ref="detailsLeft">
|
<div class="details-left flex1" :class="{ fixed: isFixed }" :style="{ bottom: FixedBottom + 'px' }"
|
||||||
|
ref="detailsLeft">
|
||||||
<div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
|
<div class="special-offer" v-if="info.promotionalactivities" ref="specialEle">
|
||||||
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
|
<img class="special-bj" src="@/assets/img/publicImage/special-bj.svg" />
|
||||||
<img class="head" src="@/assets/img/publicImage/special-title.png" />
|
<img class="head" src="@/assets/img/publicImage/special-title.png" />
|
||||||
@@ -185,7 +211,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="explain two-line-text">{{ spotObj.content }}</div>
|
<div class="explain two-line-text">{{ spotObj.content }}</div>
|
||||||
</div>
|
</div>
|
||||||
<img v-if="spotObj.sources[0]?.thumbnail" class="inspect-img" :src="spotObj.sources[0]?.thumbnail" />
|
<img v-if="spotObj.sources[0]?.thumbnail" class="inspect-img"
|
||||||
|
:src="spotObj.sources[0]?.thumbnail" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -215,7 +242,8 @@
|
|||||||
<!-- 房间类型 -->
|
<!-- 房间类型 -->
|
||||||
<div class="type-box" v-if="roomList.length !== 0" ref="roomEle">
|
<div class="type-box" v-if="roomList.length !== 0" ref="roomEle">
|
||||||
<div class="item flexacenter" v-for="(item, index) in roomList" :key="index">
|
<div class="item flexacenter" v-for="(item, index) in roomList" :key="index">
|
||||||
<div class="media" v-if="item.thumbnail" @click="cloaseImageShow([...item['videos'], ...item['images']], 0, `media${index}`)">
|
<div class="media" v-if="item.thumbnail"
|
||||||
|
@click="cloaseImageShow([...item['videos'], ...item['images']], 0, `media${index}`)">
|
||||||
<img class="icon" :src="item.thumbnail" />
|
<img class="icon" :src="item.thumbnail" />
|
||||||
<img v-if="item.isVideo" class="play" src="@/assets/img/publicImage/video-icon.svg" />
|
<img v-if="item.isVideo" class="play" src="@/assets/img/publicImage/video-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
@@ -223,7 +251,8 @@
|
|||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
<div class="tags flexflex" v-if="item.allowance || (item.tags && item.tags.length > 0)">
|
<div class="tags flexflex" v-if="item.allowance || (item.tags && item.tags.length > 0)">
|
||||||
<div class="tags-item green" v-if="item.allowance">剩余{{ item.allowance }}间</div>
|
<div class="tags-item green" v-if="item.allowance">剩余{{ item.allowance }}间</div>
|
||||||
<div class="tags-item" v-for="(item, index) in item.tags" key="index">{{ item }}</div>
|
<div class="tags-item" v-for="(item, index) in item.tags" key="index">{{ item }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="price flexflex">
|
<div class="price flexflex">
|
||||||
<div class="unit">HK$</div>
|
<div class="unit">HK$</div>
|
||||||
@@ -234,7 +263,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn flexacenter">
|
<div class="btn flexacenter">
|
||||||
<div v-if="item.iscollection" class="collect flexcenter red" @click="roomCollect(item.id, index)">
|
<div v-if="item.iscollection" class="collect flexcenter red"
|
||||||
|
@click="roomCollect(item.id, index)">
|
||||||
<img class="icon" src="@/assets/img/apartmentDetail/collect-red.svg" />
|
<img class="icon" src="@/assets/img/apartmentDetail/collect-red.svg" />
|
||||||
已收藏
|
已收藏
|
||||||
</div>
|
</div>
|
||||||
@@ -326,35 +356,51 @@
|
|||||||
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
|
<img class="icon" src="@/assets/img/apartmentDetail/bus-icon.svg" />
|
||||||
{{ info.location || "交通" }}
|
{{ info.location || "交通" }}
|
||||||
</div>
|
</div>
|
||||||
<view-map ref="viewMapRef" :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }" :name="info['address']"></view-map>
|
<view-map ref="viewMapRef"
|
||||||
|
:latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }"
|
||||||
|
:name="info['address']"></view-map>
|
||||||
|
|
||||||
<template v-if="false">
|
<template v-if="false">
|
||||||
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false" v-model:visible="showDistance">
|
<el-popover :width="814" trigger="click" popper-style="padding: 0" :show-arrow="false"
|
||||||
|
v-model:visible="showDistance">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<div class="annex-school-box flexacenter">
|
<div class="annex-school-box flexacenter">
|
||||||
<div class="annex-left flex1 flexacenter">
|
<div class="annex-left flex1 flexacenter">
|
||||||
<div class="annex-school-item flexflex flex1" @click="selectIndex()" v-if="specialSchoolDistance">
|
<div class="annex-school-item flexflex flex1" @click="selectIndex()"
|
||||||
|
v-if="specialSchoolDistance">
|
||||||
<div class="distance-item-value special flexacenter">
|
<div class="distance-item-value special flexacenter">
|
||||||
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
|
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
|
||||||
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon"
|
||||||
<img v-else class="tool-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
|
src="@/assets/img/detail/walk-icon.png" />
|
||||||
<div class="tool-time">{{ specialSchoolDistance?.durationText }}</div>
|
<img v-else class="tool-icon"
|
||||||
|
src="@/assets/img/apartmentDetail/subway-icon.png" />
|
||||||
|
<div class="tool-time">{{ specialSchoolDistance?.durationText }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flexcenter">
|
<div class="flexcenter">
|
||||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon"
|
||||||
|
alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="alias-text flexcenter">{{ specialSchoolDistance.alias || "都大" }}</div>
|
<div class="alias-text flexcenter">{{ specialSchoolDistance.alias ||
|
||||||
|
"都大" }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="annex-school-item flexflex flex1" v-for="(item, index) in annexSchoolOmit" :key="index" @click="selectIndex(item.id)">
|
<div class="annex-school-item flexflex flex1"
|
||||||
|
v-for="(item, index) in annexSchoolOmit" :key="index"
|
||||||
|
@click="selectIndex(item.id)">
|
||||||
<div class="distance-item-value flexacenter">
|
<div class="distance-item-value flexacenter">
|
||||||
<div class="mileage">{{ item.distanceText || "2.0km" }}</div>
|
<div class="mileage">{{ item.distanceText || "2.0km" }}</div>
|
||||||
<img v-if="!item.list[0].publictransport" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
|
<img v-if="!item.list[0].publictransport" class="tool-icon"
|
||||||
<img v-else class="tool-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
|
src="@/assets/img/detail/walk-icon.png" />
|
||||||
<div class="tool-time">{{ item.list[0]?.publictransport?.durationText2 || item.list[0]?.durationText2 || "41min" }}</div>
|
<img v-else class="tool-icon"
|
||||||
|
src="@/assets/img/apartmentDetail/subway-icon.png" />
|
||||||
|
<div class="tool-time">{{
|
||||||
|
item.list[0]?.publictransport?.durationText2 ||
|
||||||
|
item.list[0]?.durationText2 || "41min" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flexcenter">
|
<div class="flexcenter">
|
||||||
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
|
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon"
|
||||||
|
alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
|
<div class="alias-text flexcenter">{{ item.alias || "都大" }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -367,56 +413,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="distance-info-box pos-r" :style="{ height: `${50 * annexSchoolList.length + 70}px` }">
|
<div class="distance-info-box pos-r"
|
||||||
|
:style="{ height: `${50 * annexSchoolList.length + 70}px` }">
|
||||||
<div class="title-box dis-f al-item jus-x">
|
<div class="title-box dis-f al-item jus-x">
|
||||||
房源
|
房源
|
||||||
<img class="distance-arrow" src="@/assets/img/detail/arrow-circle-blue.svg" />
|
<img class="distance-arrow" src="@/assets/img/detail/arrow-circle-blue.svg" />
|
||||||
院校
|
院校
|
||||||
<img src="../assets/img/detail/close.png" class="close-icon" @click="showDistance = false" alt="" />
|
<img src="../assets/img/detail/close.png" class="close-icon"
|
||||||
|
@click="showDistance = false" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="distance-info-data dis-f">
|
<div class="distance-info-data dis-f">
|
||||||
<div class="distance-info-left">
|
<div class="distance-info-left">
|
||||||
<div class="distance-info-left-item flexcenter" :class="{ pitch: index == academyPitchIndex }" v-for="(item, index) in annexSchoolList" :key="index" @click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
<div class="distance-info-left-item flexcenter"
|
||||||
|
:class="{ pitch: index == academyPitchIndex }"
|
||||||
|
v-for="(item, index) in annexSchoolList" :key="index"
|
||||||
|
@click="selectAcademyIndex(index)">{{ item.alias }}</div>
|
||||||
</div>
|
</div>
|
||||||
<el-scrollbar ref="elscrollbarRef" :style="{ height: 50 * annexSchoolList.length + 'px' }">
|
<el-scrollbar ref="elscrollbarRef"
|
||||||
|
:style="{ height: 50 * annexSchoolList.length + 'px' }">
|
||||||
<div class="distance-info-right flex1">
|
<div class="distance-info-right flex1">
|
||||||
<div class="distance-header-box flexacenter">
|
<div class="distance-header-box flexacenter">
|
||||||
<div class="flexacenter">
|
<div class="flexacenter">
|
||||||
<div class="distance-header-icon flexcenter">
|
<div class="distance-header-icon flexcenter">
|
||||||
<img src="@/assets/img/detail/home.png" alt="" class="distance-header-img" />
|
<img src="@/assets/img/detail/home.png" alt=""
|
||||||
|
class="distance-header-img" />
|
||||||
</div>
|
</div>
|
||||||
{{ targetAcademyPitch.school }}
|
{{ targetAcademyPitch.school }}
|
||||||
</div>
|
</div>
|
||||||
<div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
|
<div class="distance-header-hint">本数据来自高德地图，仅供参考。</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="academy-school-item" v-for="(item, index) in targetAcademyPitch.list" :key="index">
|
<div class="academy-school-item"
|
||||||
|
v-for="(item, index) in targetAcademyPitch.list" :key="index">
|
||||||
<div class="academy-school-item-header flexacenter">
|
<div class="academy-school-item-header flexacenter">
|
||||||
<div class="academy-school-item-left flexacenter">
|
<div class="academy-school-item-left flexacenter">
|
||||||
<div class="academy-school-item-name">{{ item.title }}</div>
|
<div class="academy-school-item-name">{{ item.title }}</div>
|
||||||
<div class="academy-school-item-number">{{ item.distanceText || "" }}</div>
|
<div class="academy-school-item-number">{{ item.distanceText
|
||||||
|
|| "" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="academy-school-item-right flexacenter">
|
<div class="academy-school-item-right flexacenter">
|
||||||
<img v-if="item.publictransport" class="academy-school-item-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
|
<img v-if="item.publictransport"
|
||||||
<img v-else class="academy-school-item-icon" src="@/assets/img/detail/walk-icon.png" />
|
class="academy-school-item-icon"
|
||||||
<div class="academy-school-item-time">{{ item?.publictransport?.durationText || item.durationText || "" }}</div>
|
src="@/assets/img/apartmentDetail/subway-icon.png" />
|
||||||
|
<img v-else class="academy-school-item-icon"
|
||||||
|
src="@/assets/img/detail/walk-icon.png" />
|
||||||
|
<div class="academy-school-item-time">{{
|
||||||
|
item?.publictransport?.durationText
|
||||||
|
|| item.durationText || "" }}</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="arrow-green" src="@/assets/img/detail/arrow-green.svg" />
|
<img class="arrow-green"
|
||||||
|
src="@/assets/img/detail/arrow-green.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="academy-school-item-journey" v-if="item.publictransport">
|
<div class="academy-school-item-journey"
|
||||||
<div class="journey-item flexacenter" v-for="(item, index) in item.publictransport.segments" :key="index">
|
v-if="item.publictransport">
|
||||||
|
<div class="journey-item flexacenter"
|
||||||
|
v-for="(item, index) in item.publictransport.segments"
|
||||||
|
:key="index">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
<!-- 步行 骑行 -->
|
<!-- 步行 骑行 -->
|
||||||
<div v-if="item.type == 'walking'" class="journey-value flex1">步行{{ item.distanceText }}</div>
|
<div v-if="item.type == 'walking'"
|
||||||
|
class="journey-value flex1">步行{{
|
||||||
|
item.distanceText }}</div>
|
||||||
<!-- 地铁 -->
|
<!-- 地铁 -->
|
||||||
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'" class="journey-value flex1 subway flexacenter">
|
<div v-else-if="item.type == 'bus' && item.bustype == '地铁线路'"
|
||||||
<div class="subway-name flexcenter">{{ item.name }}</div>
|
class="journey-value flex1 subway flexacenter">
|
||||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
<div class="subway-name flexcenter">{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="flex1" style="white-space: nowrap">{{
|
||||||
|
item.via_num }}站·{{
|
||||||
|
item.durationText }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 公交 -->
|
<!-- 公交 -->
|
||||||
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'" class="journey-value flex1 bus flexacenter">
|
<div v-else-if="item.type == 'bus' && item.bustype == '普通公交线路'"
|
||||||
|
class="journey-value flex1 bus flexacenter">
|
||||||
<div class="bus-name flexcenter">{{ item.name }}</div>
|
<div class="bus-name flexcenter">{{ item.name }}</div>
|
||||||
<div class="flex1" style="white-space: nowrap">{{ item.via_num }}站·{{ item.durationText }}</div>
|
<div class="flex1" style="white-space: nowrap">{{
|
||||||
|
item.via_num }}站·{{
|
||||||
|
item.durationText }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -436,7 +509,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 公寓设施 -->
|
<!-- 公寓设施 -->
|
||||||
<div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }" v-if="facilitylist.length > 0" ref="facilitiesEle">
|
<div class="details-item apartment-facilities" :class="{ hide: isHideFacilities }"
|
||||||
|
v-if="facilitylist.length > 0" ref="facilitiesEle">
|
||||||
<div class="details-header flexacenter">
|
<div class="details-header flexacenter">
|
||||||
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
|
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg" />
|
||||||
公寓设施
|
公寓设施
|
||||||
@@ -446,13 +520,16 @@
|
|||||||
<div class="item" v-for="(item, index) in facilitylist" :key="index">
|
<div class="item" v-for="(item, index) in facilitylist" :key="index">
|
||||||
<div class="head">{{ item.name }}（{{ item.label.length }}）</div>
|
<div class="head">{{ item.name }}（{{ item.label.length }}）</div>
|
||||||
<div class="label flexflex">
|
<div class="label flexflex">
|
||||||
<div class="label-item flexacenter" v-for="(item, index) in item.label" :key="index">
|
<div class="label-item flexacenter" v-for="(item, index) in item.label"
|
||||||
<img class="icon" src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
|
:key="index">
|
||||||
|
<img class="icon"
|
||||||
|
src="@/assets/img/apartmentDetail/tick-circle-baby-blue.svg" />
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="img-box flexflex" v-if="item.images.length > 0">
|
<div class="img-box flexflex" v-if="item.images.length > 0">
|
||||||
<div class="img-item" v-for="(item, index) in item.images" :key="index" @click="openFacilitiesImg(item.imageurl)">
|
<div class="img-item" v-for="(item, index) in item.images" :key="index"
|
||||||
|
@click="openFacilitiesImg(item.imageurl)">
|
||||||
<img class="icon" :src="item.thumbnail" />
|
<img class="icon" :src="item.thumbnail" />
|
||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -466,7 +543,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 房源详情 -->
|
<!-- 房源详情 -->
|
||||||
<div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']" ref="messageEle">
|
<div class="details-item details-message" :class="{ hide: isHideDetails }" v-if="info['message']"
|
||||||
|
ref="messageEle">
|
||||||
<div class="details-header flexacenter">
|
<div class="details-header flexacenter">
|
||||||
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
|
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png" />
|
||||||
房源详情
|
房源详情
|
||||||
@@ -513,7 +591,8 @@
|
|||||||
<!-- 品牌介绍 -->
|
<!-- 品牌介绍 -->
|
||||||
<div class="details-item company" v-if="company" ref="companyEle">
|
<div class="details-item company" v-if="company" ref="companyEle">
|
||||||
<div class="details-header flexacenter">
|
<div class="details-header flexacenter">
|
||||||
<img class="icon" style="width: 20px; height: 20px" src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
<img class="icon" style="width: 20px; height: 20px"
|
||||||
|
src="@/assets/img/apartmentDetail/introduce-icon.png" />
|
||||||
品牌介绍
|
品牌介绍
|
||||||
</div>
|
</div>
|
||||||
<img class="company-img flexflex" v-lazy="company['imageurl']" />
|
<img class="company-img flexflex" v-lazy="company['imageurl']" />
|
||||||
@@ -521,9 +600,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="details-item hint-box">
|
<div class="details-item hint-box">
|
||||||
<div class="hint-item">温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
|
<div class="hint-item">
|
||||||
|
温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。</div>
|
||||||
<div class="hint-item"></div>
|
<div class="hint-item"></div>
|
||||||
<div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a></div>
|
<div class="hint-item flexacenter">公寓/酒店/中介房源推广合作请联系：<a
|
||||||
|
@click="copy('ad@gter.net')">ad@gter.net</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -557,7 +639,8 @@
|
|||||||
<img class="add-customer-violet violet2" src="@/assets/img/apartmentDetail/add-customer-violet2.svg" />
|
<img class="add-customer-violet violet2" src="@/assets/img/apartmentDetail/add-customer-violet2.svg" />
|
||||||
<div class="add-customer-interior flexflex">
|
<div class="add-customer-interior flexflex">
|
||||||
<img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-map2.png" />
|
<img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-map2.png" />
|
||||||
<img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-interior-bj2.svg" />
|
<img class="add-customer-interior-bj bj2"
|
||||||
|
src="@/assets/img/apartmentDetail/add-customer-interior-bj2.svg" />
|
||||||
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-map.svg" />
|
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-map.svg" />
|
||||||
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-interior-bj.svg" />
|
<img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-interior-bj.svg" />
|
||||||
|
|
||||||
@@ -600,7 +683,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="select-list" ref="selectSchoolRef">
|
<div class="select-list" ref="selectSchoolRef">
|
||||||
<div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]" v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
|
<div class="select-item flexflex" :class="['item' + item.sid, { pitch: distancePitch.sid == item.sid }]"
|
||||||
|
v-for="(item, index) in distanceList" :key="index" @click.stop="selectSchool(item.sid)">
|
||||||
<div class="select-icon flexcenter">
|
<div class="select-icon flexcenter">
|
||||||
<img class="select-img" src="@/assets/img/apartmentDetail/u1834.png" />
|
<img class="select-img" src="@/assets/img/apartmentDetail/u1834.png" />
|
||||||
</div>
|
</div>
|
||||||
@@ -611,36 +695,41 @@
|
|||||||
<div class="abbreviation">{{ item.alias }}</div>
|
<div class="abbreviation">{{ item.alias }}</div>
|
||||||
<template v-if="item.distance > 0">{{ item.distance }}km</template>
|
<template v-if="item.distance > 0">{{ item.distance }}km</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="vehicle flexflex flex1">
|
<div class="vehicle flexflex flex1" v-if="distancePitch.distanceArr?.length > 0">
|
||||||
<div class="item flexcenter" v-if="item.walking_duration > 0">
|
<div class="item flexcenter" v-for="(item, index) in distancePitch.distanceArr" :key="index">{{
|
||||||
<!-- <img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" /> -->
|
item.text + item.duration }}</div>
|
||||||
|
<!-- <div class="item flexcenter" v-if="item.walking_duration > 0">
|
||||||
步行{{ calculateDuration(item.walking_duration) }}
|
步行{{ calculateDuration(item.walking_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/subway-icon.png" /> -->
|
|
||||||
地铁{{ calculateDuration(item.driving_duration) }}
|
地铁{{ calculateDuration(item.driving_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/taxi-icon.png" /> -->
|
|
||||||
巴士{{ calculateDuration(item.transit_duration) }}
|
巴士{{ calculateDuration(item.transit_duration) }}
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="tick" v-if="distancePitch.sid == item.sid" src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
|
<img class="tick" v-if="distancePitch.sid == item.sid"
|
||||||
|
src="@/assets/img/apartmentDetail/tick-circle-red.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<el-dialog v-model="isInspectPop" width="600" class="inspectPop" :show-close="false">
|
<el-dialog v-model="isInspectPop" width="600" class="inspectPop" :show-close="false">
|
||||||
<div class="type flexacenter">
|
<div class="type flexacenter">
|
||||||
<div class="item" :class="{ pitch: remarkTypeid == 0 }" @click="cutRemarkType(0)">全部 {{ spotSum + returnSum }}</div>
|
<div class="item" :class="{ pitch: remarkTypeid == 0 }" @click="cutRemarkType(0)">全部 {{ spotSum + returnSum
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
<div class="item" :class="{ pitch: remarkTypeid == 1 }" @click="cutRemarkType(1)">寄托实地考察 {{ spotSum }}</div>
|
<div class="item" :class="{ pitch: remarkTypeid == 1 }" @click="cutRemarkType(1)">寄托实地考察 {{ spotSum }}</div>
|
||||||
<div v-if="returnSum > 0" class="item" :class="{ pitch: remarkTypeid == 2 }" @click="cutRemarkType(2)">寄托回访 {{ returnSum }}</div>
|
<div v-if="returnSum > 0" class="item" :class="{ pitch: remarkTypeid == 2 }" @click="cutRemarkType(2)">寄托回访
|
||||||
|
{{
|
||||||
|
returnSum }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<template v-for="(item, index) in remarkList" :key="index">
|
<template v-for="(item, index) in remarkList" :key="index">
|
||||||
<div class="item flexflex" v-if="remarkTypeid == 0 || (remarkTypeid == 1 && item.typeid == 1) || (remarkTypeid == 2 && item.typeid == 2)">
|
<div class="item flexflex"
|
||||||
|
v-if="remarkTypeid == 0 || (remarkTypeid == 1 && item.typeid == 1) || (remarkTypeid == 2 && item.typeid == 2)">
|
||||||
<img class="avatar" :src="item.avatar" />
|
<img class="avatar" :src="item.avatar" />
|
||||||
<div class="remark-content flexflex flex1">
|
<div class="remark-content flexflex flex1">
|
||||||
<div class="type flexacenter" v-if="item.typeid == 1">
|
<div class="type flexacenter" v-if="item.typeid == 1">
|
||||||
@@ -659,9 +748,11 @@
|
|||||||
<div class="date">{{ item.date }}</div>
|
<div class="date">{{ item.date }}</div>
|
||||||
<div class="text">{{ item.content }}</div>
|
<div class="text">{{ item.content }}</div>
|
||||||
<div class="media" scroll-x>
|
<div class="media" scroll-x>
|
||||||
<div class="media-item" v-for="(item, i) in item.sources" :key="i" @click="previewImg(index, i)">
|
<div class="media-item" v-for="(item, i) in item.sources" :key="i"
|
||||||
|
@click="previewImg(index, i)">
|
||||||
<img class="media-img" :src="item.thumbnail" />
|
<img class="media-img" :src="item.thumbnail" />
|
||||||
<img class="media-icon" v-if="item.type == 'videos'" src="@/assets/img/publicImage/video-icon.svg" />
|
<img class="media-icon" v-if="item.type == 'videos'"
|
||||||
|
src="@/assets/img/publicImage/video-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1456,6 +1547,34 @@ const getMapDistance = () => {
|
|||||||
// obj,
|
// obj,
|
||||||
// };
|
// };
|
||||||
// arr.push(target);
|
// arr.push(target);
|
||||||
|
|
||||||
|
const keyobj = {
|
||||||
|
metrobus_duration: "地铁巴士",
|
||||||
|
walking_duration: "步行",
|
||||||
|
driving_duration: "地铁",
|
||||||
|
transit_duration: "巴士",
|
||||||
|
}
|
||||||
|
const arr = ["metrobus_duration", "walking_duration", "transit_duration", "driving_duration"]
|
||||||
|
let valueArr = []
|
||||||
|
|
||||||
|
// element['metrobus_duration'] = 6
|
||||||
|
// element['walking_duration'] = 6
|
||||||
|
// element['transit_duration'] = 6
|
||||||
|
// element['driving_duration'] = 6
|
||||||
|
|
||||||
|
arr.forEach(key => {
|
||||||
|
if (element[key] > 0) {
|
||||||
|
const value = element[key]
|
||||||
|
valueArr.push({
|
||||||
|
text: keyobj[key],
|
||||||
|
value,
|
||||||
|
duration: calculateDuration(value),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
element['distanceArr'] = valueArr.sort((a, b) => Number(a.value) - Number(b.value))
|
||||||
|
|
||||||
if (element.sid == sid) pitch = element;
|
if (element.sid == sid) pitch = element;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1605,6 +1724,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
/deep/ body {
|
/deep/ body {
|
||||||
padding-bottom: 70px;
|
padding-bottom: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 引入公共样式
|
// 引入公共样式
|
||||||
@import "@/assets/styles/apartmentDetail.less";
|
@import "@/assets/styles/apartmentDetail.less";
|
||||||
</style>
|
</style>
|
||||||
@@ -1654,6 +1774,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
border-radius: 12px 0 0 12px;
|
border-radius: 12px 0 0 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
.annex-school-item {
|
.annex-school-item {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1713,6 +1834,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
border-radius: 0 12px 12px 0;
|
border-radius: 0 12px 12px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
.annex-btn-bj {
|
.annex-btn-bj {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1769,6 +1891,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.pitch {
|
&.pitch {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
@@ -1783,12 +1906,14 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
|
|
||||||
.distance-info-right {
|
.distance-info-right {
|
||||||
padding: 30px 40px;
|
padding: 30px 40px;
|
||||||
|
|
||||||
.distance-header-box {
|
.distance-header-box {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.distance-header-icon {
|
.distance-header-icon {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
@@ -1885,7 +2010,8 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
background-image: linear-gradient(to bottom, #aaaaaa 50%, transparent 50%);
|
background-image: linear-gradient(to bottom, #aaaaaa 50%, transparent 50%);
|
||||||
background-size: 1px 4px; /* 控制虚线的宽度和间距 */
|
background-size: 1px 4px;
|
||||||
|
/* 控制虚线的宽度和间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.journey-item:first-of-type::after {
|
.journey-item:first-of-type::after {
|
||||||
@@ -1971,6 +2097,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
.selectSchoolPop {
|
.selectSchoolPop {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -1988,6 +2115,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
|
|
||||||
.close-icon {
|
.close-icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@@ -2036,10 +2164,12 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.select-item {
|
.select-item {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border-top: 1px dotted #d7d7d7;
|
border-top: 1px dotted #d7d7d7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.pitch {
|
&.pitch {
|
||||||
background-color: rgba(245, 244, 249, 1);
|
background-color: rgba(245, 244, 249, 1);
|
||||||
|
|
||||||
@@ -2097,6 +2227,7 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
.item {
|
.item {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
background-color: rgba(255, 255, 255, 0);
|
background-color: rgba(255, 255, 255, 0);
|
||||||
border: 1px solid rgba(127, 127, 127, 1);
|
border: 1px solid rgba(127, 127, 127, 1);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
@@ -2130,15 +2261,18 @@ const cutRemarkType = (value) => (remarkTypeid.value = value);
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
border-bottom: 1px dotted #d7d7d7;
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
Reference in New Issue
Block a user