build

components/Menu.vue

@@ -1,20 +1,45 @@
 <template>
 	<view class="menu">
-
 		<image class="homelogo" @click="jump(0)" src="/static/homelogo.png" />
-		<div v-for="item in data" key="item.id" @click="jump(item.id)" :class="type==item.id?'menu-active':''">
+		<div v-for="item in data" key="item.id" @click="jump(item.id)" ref="dropdownRef" class="menu-item"
+			:class="type==item.id?'menu-active':''">
 			{{item.title}}
 			<span v-if="type==item.id" class="triangle">&#9650; </span>
 		</div>
+
 	</view>
+	<div class="dropdown-menu" v-if="isOpen" ref="dropdownContentRef" :style="dialogStyle">
+		<div v-for="item in dContent" key="item.id" :class="childType==item.id?'menu-active-child':''"
+			@click="jumpChild(item.id)">
+			{{item.title}}
+		</div>
+	</div>
+
 </template>
 
 <script setup>
+	import {
+		ref,
+		nextTick
+	} from 'vue';
+	const isOpen = ref(false);
+	const dropdownRef = ref(null);
+	const dropdownContentRef = ref(null);
+	const dContent = ref([])
+
+	const dialogStyle = ref()
+
+	let dialogHight;
+
 	const props = defineProps({
 		type: {
 			type: Number,
 			default: 0,
 		},
+		childType: {
+			type: Number,
+			default: 0,
+		}
 	})
 
 	const data = [{
@@ -31,23 +56,27 @@
 		},
 		{
 			id: 4,
-			title: "户型展示"
+			title: "户型展示",
+			child: [{
+				id: 41,
+				title: "高层"
+			}, {
+				id: 42,
+				title: "别墅"
+			}]
 		},
 		{
 			id: 5,
 			title: "动线漫游"
-		},
-		{
+		}, {
 			id: 6,
 			title: "建筑细节"
-		},
-		{
+		}, {
 			id: 7,
 			title: "科技系统"
 		}
 
 	]
-
 	const jump = (index) => {
 		let u;
 		switch (index) {
@@ -76,7 +105,44 @@
 				u = '/pages/TechnologySystems/TechnologySystems';
 				break;
 		}
-		if (props.type != index) {
+		if (index == 4) {
+			dContent.value = data[index - 1].child;
+			isOpen.value = !isOpen.value;
+			if (isOpen.value) {
+				nextTick(() => {
+					const content = dropdownContentRef.value;
+					uni.createSelectorQuery().select('.dropdown-menu').boundingClientRect(data => {
+							dialogHight = data.height;
+						}).selectAll('.menu-item').boundingClientRect(data => {
+							dialogStyle.value = {
+								width: `${data[index-1].width}px`,
+								top: `${data[index-1].top - dialogHight }px`,
+								left: `${data[index-1].left}px`,
+							}
+						})
+						.exec();
+				});
+			}
+		} else if (props.type != index) {
+			uni.navigateTo({
+				url: u,
+				animationType: "fade-in"
+			});
+		}
+	}
+
+	const jumpChild = (index) => {
+		let u;
+		switch (index) {
+			case 41:
+				u = '/pages/FloorPlanShowcaseHeigh/FloorPlanShowcaseHeigh';
+				break;
+			case 42:
+				u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
+				break;
+		}
+
+		if (props.childType != index) {
 			uni.navigateTo({
 				url: u,
 				animationType: "fade-in"
@@ -99,8 +165,8 @@
 		background-color: rgba(44 61, 43, 0.5);
 		justify-content: center;
 		align-items: center;
-		font-size: 0.4rem;
-		border-top: 0.3vw solid #FFE7CE;
+		font-size: 15rpx;
+		border-top: 2rpx solid #FFE7CE;
 	}
 
 	.menu div {
@@ -117,10 +183,32 @@
 		position: relative;
 	}
 
+	.menu-active-child {
+		color: rgba(255 231, 206, 1);
+	}
+
 	.triangle {
 		color: #FFE7CE;
 		font-size: 0.25rem;
 		position: absolute;
 		bottom: 0px
 	}
+
+	.menu-item {}
+
+	.dropdown-menu {
+		display: flex;
+		flex-direction: column;
+		background-color: rgba(44 61, 43, 0.5);
+		position: absolute;
+		color: white;
+		font-size: 14rpx;
+	}
+
+	.dropdown-menu>div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 5rpx;
+	}
 </style>

pages.json

@@ -30,6 +30,10 @@
 		{
 			"path": "pages/TechnologySystems/TechnologySystems",
 			"style": {}
+		},
+		{
+			"path" : "pages/FloorPlanShowcaseHeigh/FloorPlanShowcaseHeigh",
+			"style" : {}
 		}
 	],
 	"globalStyle": {

pages/ArchitecturalDetails/ArchitecturalDetails.vue

@@ -2,7 +2,21 @@
 <template>
 	<view class="content">
 		<div class="top">
-			6.建筑细节
+			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
+				<swiper-item>
+					<div class="top-content-one" />
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-two" />
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-three" />
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-four" />
+				</swiper-item>
+
+			</swiper>
 		</div>
 		<div class="bottom">
 			<Menu :type="6" />
@@ -15,6 +29,12 @@
 </script>
 
 <style scoped>
+	.swiper {
+		height: 100%;
+		padding: 10rpx;
+		box-sizing: border-box;
+	}
+
 	.content {
 		display: flex;
 		flex-direction: column;
@@ -27,6 +47,30 @@
 
 	.bottom {
 		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
 
+	.top-content-one {
+		height: 100%;
+		background: url('~@/static/sixsix1.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-two {
+		height: 100%;
+		background: url('~@/static/sixsix2.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-three {
+		height: 100%;
+		background: url('~@/static/sixsix3.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-four {
+		height: 100%;
+		background: url('~@/static/sixsix4.jpg') no-repeat;
+		background-size: 100% 100%;
 	}
 </style>

pages/FloorPlanShowcase/FloorPlanShowcase.vue

@@ -1,17 +1,86 @@
-<!-- 4.户型展示 -->
+<!-- 4.户型展示 别墅-->
 <template>
 	<view class="content">
 		<div class="top">
-			4.户型展示
+			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
+				<swiper-item>
+					<div class="top-content-item top-content-one">
+						<div></div>
+						<div class="bottom-bottom">
+							<div></div>
+							<div @click="show(11)"></div>
+							<div @click="show(12)"></div>
+							<div @click="show(13)"></div>
+							<div @click="show(14)"></div>
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-item top-content-two">
+						<div></div>
+						<div class="bottom-bottom">
+							<div></div>
+							<div @click="show(21)"></div>
+							<div @click="show(22)"></div>
+							<div @click="show(23)"></div>
+							<div @click="show(24)"></div>
+						</div>
+					</div>
+				</swiper-item>
+			</swiper>
 		</div>
 		<div class="bottom">
-			<Menu :type="4" />
+			<Menu :type="4" :child-type="42" />
 		</div>
 	</view>
+
+	<div v-if="isOpen" class="dialog" @click="hide">
+		<image :src="pic" />
+	</div>
 </template>
 
 <script setup>
 	import Menu from '../../components/Menu.vue'
+	import {
+		ref
+	} from 'vue';
+
+	const show = (index) => {
+		switch (index) {
+			case 11:
+				pic.value = "/static/four211.jpg";
+				break;
+			case 12:
+				pic.value = "/static/four212.jpg";
+				break;
+			case 13:
+				pic.value = "/static/four213.jpg";
+				break;
+			case 14:
+				pic.value = "/static/four214.jpg";
+				break;
+			case 21:
+				pic.value = "/static/four221.jpg";
+				break;
+			case 22:
+				pic.value = "/static/four222.jpg";
+				break;
+			case 23:
+				pic.value = "/static/four223.jpg";
+				break;
+			case 24:
+				pic.value = "/static/four224.jpg";
+				break;
+		}
+		isOpen.value = true;
+	}
+
+	const hide = () => {
+		isOpen.value = false;
+	}
+
+	const isOpen = ref(false);
+	const pic = ref(null);
 </script>
 
 <style scoped>
@@ -27,6 +96,67 @@
 
 	.bottom {
 		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
+
+	.swiper {
+		height: 100%;
+		padding: 10rpx;
+		box-sizing: border-box;
+	}
+
+	.top-content {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.top-content-item {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.top-content-item>div {
+		flex: 1;
+	}
+
+	.bottom-bottom {
+		display: flex;
+	}
+
+	.bottom-bottom>div {
+		flex: 1;
+	}
+
+	.top-content-one {
+		height: 100%;
+		background: url('~@/static/four21.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-two {
+		height: 100%;
+		background: url('~@/static/four22.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+
+	.dialog {
+		background-color: rgba(0, 0, 0, 0.5);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.dialog>image {
+		height: 90%;
+		width: 45%;
 
 	}
 </style>

pages/FloorPlanShowcaseHeigh/FloorPlanShowcaseHeigh.vue

@@ -0,0 +1,137 @@
+<!-- 4.户型展示 高层 -->
+<template>
+	<view class="content">
+		<div class="top">
+			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
+				<swiper-item>
+					<div class="top-content-item top-content-one">
+						<div></div>
+						<div @click="show(1)"></div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-item top-content-two">
+						<div></div>
+						<div @click="show(2)"></div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-item top-content-three">
+						<div></div>
+						<div @click="show(3)"></div>
+					</div>
+				</swiper-item>
+			</swiper>
+		</div>
+		<div class="bottom">
+			<Menu :type="4" :child-type="41" />
+		</div>
+	</view>
+
+	<div v-if="isOpen" class="dialog" @click="hide">
+		<image :src="pic" />
+	</div>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+	import {
+		ref
+	} from 'vue';
+
+	const show = (index) => {
+		switch (index) {
+			case 1:
+				pic.value = "/static/four111.jpg";
+				break;
+			case 2:
+				pic.value = "/static/four112.jpg";
+				break;
+			case 3:
+				pic.value = "/static/four113.jpg";
+				break;
+		}
+		isOpen.value = true;
+	}
+
+	const hide = () => {
+		isOpen.value = false;
+	}
+
+	const isOpen = ref(false);
+	const pic = ref(null);
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
+
+	.swiper {
+		height: 100%;
+		padding: 10rpx;
+		box-sizing: border-box;
+	}
+
+	.top-content {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.top-content-item {
+		display: flex;
+	}
+
+	.top-content-item>div {
+		flex: 1;
+	}
+
+	.top-content-one {
+		height: 100%;
+		background: url('~@/static/four11.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-two {
+		height: 100%;
+		background: url('~@/static/four12.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-content-three {
+		height: 100%;
+		background: url('~@/static/four13.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.dialog {
+		background-color: rgba(0, 0, 0, 0.5);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.dialog>image {
+		height: 90%;
+		width: 45%;
+
+	}
+</style>

pages/ProjectPlanning/ProjectPlanning.vue

@@ -414,7 +414,7 @@
 	.top-content-three {
 		height: 100%;
 		display: flex;
-		background: url('~@/static/home.jpg') no-repeat;
+		background: url('~@/static/three3.jpg') no-repeat;
 		background-size: 100% 100%;
 		align-items: center
 	}
@@ -606,7 +606,7 @@
 		flex: 1;
 	}
 
-	.top-content-seven-bottom-right image{
+	.top-content-seven-bottom-right image {
 		height: 100%;
 	}
 </style>

pages/RouteNavigation/RouteNavigation.vue

@@ -27,6 +27,6 @@
 
 	.bottom {
 		flex: 1;
-
+		background-color: rgba(44 61, 43, 1);
 	}
 </style>

pages/TechnologySystems/TechnologySystems.vue

@@ -27,6 +27,6 @@
 
 	.bottom {
 		flex: 1;
-
+		background-color: rgba(44 61, 43, 1);
 	}
 </style>