|
@@ -7,13 +7,13 @@
|
|
|
<div class="details-title">
|
|
|
<div class="name-box">
|
|
|
<div class="name">
|
|
|
- <span>招商云璟揽阅</span>
|
|
|
+ <span>{{ houseInfo.title }}</span>
|
|
|
<div class="label-wrap">
|
|
|
- <div class="label zs">在售</div>
|
|
|
- <div class="label zz">住宅</div>
|
|
|
+ <div class="label zs">{{ houseInfo.tags[0] }}</div>
|
|
|
+ <div class="label zz">{{ houseInfo.tags[1] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="other-name">别名:璟云雅苑</div>
|
|
|
+ <!-- <div class="other-name">别名:璟云雅苑</div> -->
|
|
|
</div>
|
|
|
<div class="tel-num">咨询电话: 4008315585转04817</div>
|
|
|
</div>
|
|
@@ -21,9 +21,17 @@
|
|
|
<div class="banner-box">
|
|
|
<div class="swiper-wraper">
|
|
|
<div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide" v-for="i in 4"><img src="" alt="" /></div>
|
|
|
-
|
|
|
- <!-- 更多幻灯片 -->
|
|
|
+ <div class="swiper-slide" v-for="i in bannerList">
|
|
|
+ <n-image
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ object-fit="cover"
|
|
|
+ :src="`./static/image/house/${i}`"
|
|
|
+ />
|
|
|
+ <div class="vr-layer" v-if="bannerActiveIndex == 1">
|
|
|
+ <div class="vr-btn" @click="goVr()"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 如果需要分页器 -->
|
|
|
<!-- <div class="swiper-pagination"></div> -->
|
|
@@ -31,41 +39,53 @@
|
|
|
<div class="swiper-button-next"></div>
|
|
|
</div>
|
|
|
<div class="image-box">
|
|
|
- <div class="item-image"><img src="" alt="" /><span class="name">VR(4)</span></div>
|
|
|
- <div class="item-image"><img src="" alt="" /><span class="name">效果图(4)</span></div>
|
|
|
- <div class="item-image"><img src="" alt="" /><span class="name">样板间(4)</span></div>
|
|
|
- <div class="item-image"><img src="" alt="" /><span class="name">区位(4)</span></div>
|
|
|
- <div class="item-image"><img src="" alt="" /><span class="name">小区配套(4)</span></div>
|
|
|
+ <div
|
|
|
+ class="item-image"
|
|
|
+ :class="{ active: i.type === bannerActiveIndex }"
|
|
|
+ @click="changeBanner(i.type)"
|
|
|
+ v-for="(i, index) in bannerListType"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="`./static/image/house/${houseInfo.images_1[0]}`"
|
|
|
+ alt=""
|
|
|
+ /><span class="name"
|
|
|
+ >{{ i.name }}({{ i.images.length }})</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="info-box">
|
|
|
<div class="top-info">
|
|
|
<span class="title">参考均价</span>
|
|
|
- <span class="price-number">60000</span>
|
|
|
- <span class="price-unit">元/平(单价) </span>
|
|
|
- <span class="price-number">480-765</span>
|
|
|
- <span class="price-unit">(万/套)(总价)</span>
|
|
|
+ <!-- <span class="price-number">60000</span> -->
|
|
|
+ <!-- <span class="price-unit">元/平(单价) </span> -->
|
|
|
+ <span class="price-unit">{{ houseInfo.price }} </span>
|
|
|
+ <!-- <span class="price-number">480-765</span> -->
|
|
|
+ <!-- <span class="price-unit">(万/套)(总价)</span> -->
|
|
|
+ <span class="total-title">总价</span>
|
|
|
+ <span class="price-unit">{{ houseInfo.total }} </span>
|
|
|
</div>
|
|
|
<div class="info-tag">
|
|
|
- <div class="tag-item">2025北京房展</div>
|
|
|
- <div class="tag-item">近地铁</div>
|
|
|
- <div class="tag-item">公交直达</div>
|
|
|
- <div class="tag-item">综合商场</div>
|
|
|
+ <div class="tag-item" v-for="(i, index) in houseInfo.label">
|
|
|
+ {{ i }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="info-desc">
|
|
|
<div class="desc-item">
|
|
|
<div class="title">项目地址</div>
|
|
|
- <div class="text">北京市通州区云景南大街辅路</div>
|
|
|
+ <div class="text">{{ houseInfo.address }}</div>
|
|
|
</div>
|
|
|
<div class="desc-item">
|
|
|
<div class="title">最新开盘</div>
|
|
|
- <div class="text">2025-03-02</div>
|
|
|
+ <div class="text">{{ houseInfo.time }}</div>
|
|
|
</div>
|
|
|
<div class="desc-item">
|
|
|
<div class="title">楼盘户型</div>
|
|
|
<div class="text">
|
|
|
- <span>三居室({{ 1 }})</span>
|
|
|
- <span>四居室({{ 2 }})</span>
|
|
|
+ <span v-for="(i, key, index) in cadData"
|
|
|
+ >{{ key }}({{ i.length }})</span
|
|
|
+ >
|
|
|
+ <!-- <span>四居室({{ 2 }})</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -75,24 +95,37 @@
|
|
|
<div class="cad-box">
|
|
|
<h2 class="title">户型介绍</h2>
|
|
|
<div class="cad-tab">
|
|
|
- <div class="tab-item active"><span>三居室(3)</span></div>
|
|
|
- <div class="tab-item"><span>四居室(1)</span></div>
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeCad == key }"
|
|
|
+ v-for="(i, key, index) in cadData"
|
|
|
+ @click="activeCad = key"
|
|
|
+ >
|
|
|
+ <span>{{ key }}({{ i.length }})</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="tab-item"><span>三居室(1)</span></div> -->
|
|
|
</div>
|
|
|
<div class="cad-list">
|
|
|
- <div class="cad-item" v-for="i in 3">
|
|
|
- <div class="cad-img"><img src="" alt="" /></div>
|
|
|
+ <div class="cad-item" v-for="i in cadData[activeCad]">
|
|
|
+ <div class="cad-img">
|
|
|
+ <n-image
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ object-fit="cover"
|
|
|
+ :src="`./static/image/house/${i.thumb}`"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<div class="cad-info">
|
|
|
<div class="cad-title">
|
|
|
- <span> 3室2厅2卫 </span>
|
|
|
+ <span> {{ i.desc }} </span>
|
|
|
<div class="label-wrap">
|
|
|
<div class="label zs">在售</div>
|
|
|
<div class="label zz">住宅</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="area">建面 108m² (南,北朝向)</div>
|
|
|
+ <div class="area">{{ i.area }} (南,北朝向)</div>
|
|
|
<div class="price">
|
|
|
- 约<span>645</span>
|
|
|
- 万/套
|
|
|
+ {{ i.price }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -100,39 +133,47 @@
|
|
|
</div>
|
|
|
<div class="bottom-info-box">
|
|
|
<div class="name-info">
|
|
|
- <h3>招商云璟揽阅</h3>
|
|
|
+ <h3>{{ houseInfo.title }}</h3>
|
|
|
<div class="label-wrap">
|
|
|
- <div class="label zs">在售</div>
|
|
|
- <div class="label zz">住宅</div>
|
|
|
+ <div class="label zs">{{ houseInfo.tags[0] }}</div>
|
|
|
+ <div class="label zz">{{ houseInfo.tags[1] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-info">
|
|
|
<span class="title">参考均价</span>
|
|
|
- <span class="price-number">60000</span>
|
|
|
- <span class="price-unit">元/平(单价) </span>
|
|
|
+ <span class="price-number">{{ houseInfo.price }}</span>
|
|
|
+ <!-- <span class="price-unit">元/平(单价) </span> -->
|
|
|
</div>
|
|
|
|
|
|
<div class="info-desc">
|
|
|
<div class="desc-item">
|
|
|
<div class="title">项目地址</div>
|
|
|
- <div class="text">北京市通州区云景南大街辅路</div>
|
|
|
+ <div class="text">{{ houseInfo.address }}</div>
|
|
|
</div>
|
|
|
<div class="desc-item">
|
|
|
<div class="title">最新开盘</div>
|
|
|
- <div class="text">2025-03-02</div>
|
|
|
+ <div class="text">{{ houseInfo.time }}</div>
|
|
|
</div>
|
|
|
<div class="desc-item">
|
|
|
<div class="title">楼盘户型</div>
|
|
|
<div class="text">
|
|
|
- <span>三居室({{ 1 }})</span>
|
|
|
- <span>四居室({{ 2 }})</span>
|
|
|
+ <span v-for="(i, key, index) in cadData"
|
|
|
+ >{{ key }}({{ i.length }})</span
|
|
|
+ >
|
|
|
+ <!-- <span>四居室({{ 2 }})</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="google-map" id="map">
|
|
|
- <GoogleMap api-key="AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os" style="width: 100%; height: 100%" :center="center" :zoom="15">
|
|
|
+ <GoogleMap
|
|
|
+ api-key="AIzaSyD-nVI43AYI9qp4rsQMJgN6abyPdn3QRY0"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :center="center"
|
|
|
+ :zoom="15"
|
|
|
+ language="en-us"
|
|
|
+ >
|
|
|
<Marker :options="{ position: center }" />
|
|
|
</GoogleMap>
|
|
|
</div>
|
|
@@ -151,7 +192,15 @@ import { GoogleMap, Marker } from "vue3-google-map";
|
|
|
import Swiper from "swiper";
|
|
|
import "swiper/css/swiper.css";
|
|
|
import { NConfigProvider } from "naive-ui";
|
|
|
+import { houseData } from "../data/data.js";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
|
|
|
+const houseId = ref(route.params.id || 1);
|
|
|
+const houseInfo = computed(() => {
|
|
|
+ return houseData.find((item) => item.id == houseId.value);
|
|
|
+});
|
|
|
const themeOverrides = {
|
|
|
common: {
|
|
|
primaryColor: "#3072f6",
|
|
@@ -160,8 +209,106 @@ const themeOverrides = {
|
|
|
|
|
|
// ...
|
|
|
};
|
|
|
+const goVr = () => {
|
|
|
+ window.open(houseInfo.value.vrLink);
|
|
|
+};
|
|
|
+const bannerActiveIndex = ref(1);
|
|
|
+const bannerListType = ref([
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ name: "VR",
|
|
|
+ images: houseInfo.value.images_1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ name: "效果图",
|
|
|
+ images: houseInfo.value.images_2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 3,
|
|
|
+ name: "样板间",
|
|
|
+ images: houseInfo.value.images_3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 4,
|
|
|
+ name: "区位",
|
|
|
+ images: houseInfo.value.images_4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 5,
|
|
|
+ name: "小区配套",
|
|
|
+ images: houseInfo.value.images_5,
|
|
|
+ },
|
|
|
+]);
|
|
|
+const banner = ref(
|
|
|
+ "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
|
|
+);
|
|
|
+const bannerList = ref(houseInfo.value.images_1);
|
|
|
+// https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg
|
|
|
+
|
|
|
+const activeCad = ref("二居室");
|
|
|
+const cadData = ref({
|
|
|
+ 二居室: [
|
|
|
+ {
|
|
|
+ title: "二居室",
|
|
|
+ area: "建面 76m²",
|
|
|
+ desc: "2室2厅1卫",
|
|
|
+ price: "190 万/套(参考价格)",
|
|
|
+ thumb: "76二.jpg",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "二居室",
|
|
|
+ area: "建面 71m²",
|
|
|
+ desc: "2室2厅1卫",
|
|
|
+ price: "190 万/套(参考价格)",
|
|
|
+ thumb: "71二.jpg",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ 三居室: [
|
|
|
+ {
|
|
|
+ title: "三居室",
|
|
|
+ area: "建面 96m²",
|
|
|
+ desc: "3室2厅2卫",
|
|
|
+ price: "270 万/套(参考价格)",
|
|
|
+ thumb: "96三.jpg",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "三居室",
|
|
|
+ area: "建面 97m²",
|
|
|
+ desc: "3室2厅2卫",
|
|
|
+ price: "270 万/套(参考价格)",
|
|
|
+ thumb: "97三.jpg",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "三居室",
|
|
|
+ area: "建面 106m²",
|
|
|
+ desc: "3室2厅2卫",
|
|
|
+ price: "275 万/套(参考价格)",
|
|
|
+ thumb: "106三.jpg",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const changeBanner = (type) => {
|
|
|
+ bannerActiveIndex.value = type;
|
|
|
+ bannerList.value = bannerListType.value.find(
|
|
|
+ (item) => item.type === type
|
|
|
+ ).images;
|
|
|
+ if (swiper) {
|
|
|
+ swiper.destroy(true, true);
|
|
|
+ swiper = null;
|
|
|
+ }
|
|
|
+ banner.value =
|
|
|
+ "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg";
|
|
|
+ setTimeout(() => {
|
|
|
+ initBanner();
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ // swiper.update();
|
|
|
+ // console.log(bannerCount.value);
|
|
|
+};
|
|
|
+
|
|
|
let swiper = null;
|
|
|
-const initTab = () => {
|
|
|
+const initBanner = () => {
|
|
|
swiper = new Swiper(".swiper-wraper", {
|
|
|
navigation: {
|
|
|
nextEl: ".swiper-button-next",
|
|
@@ -189,7 +336,11 @@ const initMap = async () => {
|
|
|
};
|
|
|
|
|
|
// let center = { lat: -34.397, lng: 150.644 };
|
|
|
-const center = { lat: 40.689247, lng: -74.044502 };
|
|
|
+let lonlat = houseInfo.value.location.split(",");
|
|
|
+
|
|
|
+// const center = { lat: 40.689247, lng: -74.044502 };
|
|
|
+const center = { lat: lonlat[0] - 0, lng: lonlat[1] - 0 };
|
|
|
+
|
|
|
const addMarker = async () => {
|
|
|
let center = { lat: -34.397, lng: 150.644 };
|
|
|
const marker = new google.maps.marker.AdvancedMarkerElement({
|
|
@@ -199,7 +350,7 @@ const addMarker = async () => {
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initTab();
|
|
|
+ initBanner();
|
|
|
// initMap();
|
|
|
});
|
|
|
</script>
|
|
@@ -287,13 +438,35 @@ onMounted(() => {
|
|
|
width: 526px;
|
|
|
height: 295px;
|
|
|
overflow: hidden;
|
|
|
+ position: relative;
|
|
|
.swiper-wrapper {
|
|
|
.swiper-slide {
|
|
|
- img {
|
|
|
+ .vr-layer {
|
|
|
+ position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ .vr-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url("@/assets/images/model720.png") no-repeat center
|
|
|
+ center;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
+ // img {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // object-fit: cover;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -314,6 +487,12 @@ onMounted(() => {
|
|
|
cursor: pointer;
|
|
|
background: red;
|
|
|
position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
.name {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
@@ -327,6 +506,11 @@ onMounted(() => {
|
|
|
letter-spacing: 0;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
+ &.active {
|
|
|
+ .name {
|
|
|
+ background: #3072f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -353,6 +537,10 @@ onMounted(() => {
|
|
|
font-family: Tahoma-Bold;
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
+ .total-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #9399a5;
|
|
|
+ }
|
|
|
.price-unit {
|
|
|
font-family: HiraginoSansGB-W6;
|
|
|
font-size: 16px;
|
|
@@ -572,4 +760,22 @@ onMounted(() => {
|
|
|
height: 300px;
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
+.swiper-button-next,
|
|
|
+.swiper-button-prev {
|
|
|
+ // transform: translateY(-50%);
|
|
|
+ // margin-top: 0;
|
|
|
+}
|
|
|
+.swiper-button-disabled {
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+.n-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+/* .gmnoprint,
|
|
|
+.gm-style-cc {
|
|
|
+ display: none !important;
|
|
|
+} */
|
|
|
</style>
|