项目规划

2025-01-13 19:42:02 +08:00 · 2025-01-13 19:42:02 +08:00 · ac7d3cba53
commit ac7d3cba53
parent 87ef410dd9
39 changed files with 1203 additions and 122 deletions
--- a/App.vue
+++ b/App.vue
@ -1,17 +1,29 @@
 <script>
 	export default {
 		onLaunch: function() {
-			console.log('App Launch')
+			// #ifdef APP-PLUS
+			plus.screen.lockOrientation('landscape-primary'); //锁定横屏
+			plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)		
+			// #endif
 		},
 		onShow: function() {
-			console.log('App Show')
+			// #ifdef APP-PLUS
+			// 隐藏顶部电池,时间等信息 
+			plus.navigator.setFullscreen(true);
+			//隐藏虚拟按键
+			//plus.navigator.hideSystemNavigation()
+			// #endif
 		},
 		onHide: function() {
-			console.log('App Hide')
-		}
+			//console.log('App Hide')
+		},
+
 	}
 </script>

 <style>
-	/*每个页面公共css */
-</style>
+	uni-page-body,
+	#app {
+		height: 100%;
+	}
+</style>
--- a/androidPrivacy.json
+++ b/androidPrivacy.json
@ -0,0 +1,3 @@
+{
+    "prompt" : "none"
+}
--- a/components/Menu.vue
+++ b/components/Menu.vue
@ -0,0 +1,126 @@
+<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':''">
+			{{item.title}}
+			<span v-if="type==item.id" class="triangle">&#9650; </span>
+		</div>
+	</view>
+</template>
+
+<script setup>
+	const props = defineProps({
+		type: {
+			type: Number,
+			default: 0,
+		},
+	})
+
+	const data = [{
+			id: 1,
+			title: "品牌展示"
+		},
+		{
+			id: 2,
+			title: "区位配套"
+		},
+		{
+			id: 3,
+			title: "项目规划"
+		},
+		{
+			id: 4,
+			title: "户型展示"
+		},
+		{
+			id: 5,
+			title: "动线漫游"
+		},
+		{
+			id: 6,
+			title: "建筑细节"
+		},
+		{
+			id: 7,
+			title: "科技系统"
+		}
+
+	]
+
+	const jump = (index) => {
+		let u;
+		switch (index) {
+			case 0:
+				u = '/pages/index/index';
+				break;
+			case 1:
+				u = '/pages/BrandDisplay/BrandDisplay';
+				break;
+			case 2:
+				u = '/pages/LocationAmenities/LocationAmenities';
+				break;
+			case 3:
+				u = '/pages/ProjectPlanning/ProjectPlanning';
+				break;
+			case 4:
+				u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
+				break;
+			case 5:
+				u = '/pages/RouteNavigation/RouteNavigation';
+				break;
+			case 6:
+				u = '/pages/ArchitecturalDetails/ArchitecturalDetails';
+				break;
+			case 7:
+				u = '/pages/TechnologySystems/TechnologySystems';
+				break;
+		}
+		if (props.type != index) {
+			uni.navigateTo({
+				url: u,
+				animationType: "fade-in"
+			});
+		}
+	}
+</script>
+
+<style scoped>
+	.homelogo {
+		width: 16vw;
+		height: 3.8vw;
+		margin-left: 2vw;
+		margin-right: 2vw;
+	}
+
+	.menu {
+		display: flex;
+		height: 100%;
+		background-color: rgba(44 61, 43, 0.5);
+		justify-content: center;
+		align-items: center;
+		font-size: 0.4rem;
+		border-top: 0.3vw solid #FFE7CE;
+	}
+
+	.menu div {
+		color: white;
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.menu .menu-active {
+		background-color: rgba(255 231, 206, 0.3);
+		position: relative;
+	}
+
+	.triangle {
+		color: #FFE7CE;
+		font-size: 0.25rem;
+		position: absolute;
+		bottom: 0px
+	}
+</style>
--- a/index.html
+++ b/index.html
@ -18,3 +18,8 @@
    <script type="module" src="/main.js"></script>
  </body>
 </html>
+<style>
+	html{
+		font-size: 16px;
+	}
+</style>
--- a/manifest.json
+++ b/manifest.json
@ -1,75 +1,81 @@
 {
-	"name": "yglt_uniapp",
-	"appid": "__UNI__542B476",
-	"description": "",
-	"versionName": "1.0.0",
-	"versionCode": "100",
-	"transformPx": false,
-	/* 5+App特有相关 */
-	"app-plus": {
-		"usingComponents": true,
-		"nvueStyleCompiler": "uni-app",
-		"compilerVersion": 3,
-		"compatible": {
-			"ignoreVersion": true 
-		},
-		"splashscreen": {
-			"alwaysShowBeforeRender": true,
-			"waiting": true,
-			"autoclose": true,
-			"delay": 0
-		},
-		/* 模块配置 */
-		"modules": {},
-		/* 应用发布信息 */
-		"distribute": {
-			/* android打包配置 */
-			"android": {
-				"permissions": [
-					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
-					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-					"<uses-feature android:name=\"android.hardware.camera\"/>",
-					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-				]
-			},
-			/* ios打包配置 */
-			"ios": {},
-			/* SDK配置 */
-			"sdkConfigs": {}
-		}
-	},
-	/* 快应用特有相关 */
-	"quickapp": {},
-	/* 小程序特有相关 */
-	"mp-weixin": {
-		"appid": "",
-		"setting": {
-			"urlCheck": false
-		},
-		"usingComponents": true
-	},
-	"mp-alipay": {
-		"usingComponents": true
-	},
-	"mp-baidu": {
-		"usingComponents": true
-	},
-	"mp-toutiao": {
-		"usingComponents": true
-	},
-	"uniStatistics": {
-		"enable": false
-	},
-	"vueVersion": "3"
-}
+    "name" : "yglt_uniapp",
+    "appid" : "__UNI__542B476",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "compatible" : {
+            "ignoreVersion" : true
+        },
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {},
+            "splashscreen" : {
+                "androidStyle" : "common",
+                "iosStyle" : "common",
+                "useOriginalMsgbox" : false
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+	"orientation" : [ "landscape-primary" ],
+    "vueVersion" : "3"
+}
--- a/pages.json
+++ b/pages.json
@ -1,17 +1,46 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
+			"path": "pages/index/index"
+		},
+		{
+			"path": "pages/BrandDisplay/BrandDisplay",
+			"style": {}
+		},
+		{
+			"path": "pages/LocationAmenities/LocationAmenities",
+			"style": {}
+		},
+		{
+			"path": "pages/ProjectPlanning/ProjectPlanning",
+			"style": {}
+		},
+		{
+			"path": "pages/FloorPlanShowcase/FloorPlanShowcase",
+			"style": {}
+		},
+		{
+			"path": "pages/RouteNavigation/RouteNavigation",
+			"style": {}
+		},
+		{
+			"path": "pages/ArchitecturalDetails/ArchitecturalDetails",
+			"style": {}
+		},
+		{
+			"path": "pages/TechnologySystems/TechnologySystems",
+			"style": {}
 		}
 	],
 	"globalStyle": {
+		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"backgroundColor": "#F8F8F8",
+		"rpxCalcMaxDeviceWidth": 2880, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
+		"rpxCalcBaseDeviceWidth": 1920, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
+		"rpxCalcIncludeWidth": 2880 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
 	},
 	"uniIdRouter": {}
-}
+}
--- a/pages/ArchitecturalDetails/ArchitecturalDetails.vue
+++ b/pages/ArchitecturalDetails/ArchitecturalDetails.vue
@ -0,0 +1,32 @@
+<!-- 6.建筑细节 -->
+<template>
+	<view class="content">
+		<div class="top">
+			6.建筑细节
+		</div>
+		<div class="bottom">
+			<Menu :type="6" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+
+	}
+</style>
--- a/pages/BrandDisplay/BrandDisplay.vue
+++ b/pages/BrandDisplay/BrandDisplay.vue
@ -0,0 +1,146 @@
+<!-- 1.品牌展示  -->
+<template>
+	<view class="content">
+		<div class="top">
+			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
+				<swiper-item>
+					<div class="top-content">
+						<div class="top-left">
+							<div class="top-left-title">
+								朗诗地产 科技人居引领者
+							</div>
+							<div class="top-left-content">
+								<div class="top-left-content-top">
+									朗诗创立于2001年，是国内领先的绿色开发服务商和生活运营商，以绿色思维，践行“人本、阳光、绿色”的价值观，引领绿色生活。业务范围覆盖北京、上海、苏州、广州、深圳、天津、重庆、南京、杭州、武汉、成都、西安等中国主要经济区域。
+								</div>
+								<ul class="top-left-content-list">
+									<li>深耕20余载</li>
+									<li>连续10年入选中国地产百强</li>
+									<li>132个绿色科技地产项目</li>
+									<li>开发总面积逾2300万平方米</li>
+									<li>50万业主</li>
+								</ul>
+							</div>
+						</div>
+						<div class="top-right" />
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content">
+						<div class="top-left">
+							<div class="top-left-title">
+								金厦房产 四十余载与港城共美好
+							</div>
+							<div class="top-left-content">
+								<div class="top-left-content-top">
+									金厦房产隶属张家港市城市投资发展集团有限公司，是张家港市国有全资房地产开发企业，具有国家一级房地产开发资质，开发面积超500万平方米。
+								</div>
+								<ul class="top-left-content-list">
+									<li>阳光怡庭-城市半岛墅居，詹天佑奖优秀住宅小区金奖</li>
+									<li>阳光锦程-筑园为家，超大中央水景园境</li>
+									<li>阳光春晓-双滨河水系，领秀时代的倾心筑作</li>
+									<li>阳光半岛酒店-藏在1200亩森林氧吧里的园林度假酒店</li>
+								</ul>
+							</div>
+						</div>
+						<div class="top-right" />
+					</div>
+				</swiper-item>
+			</swiper>
+
+		</div>
+		<div class="bottom">
+			<Menu :type="1" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+
+	const opt = {
+		background: ['color1', 'color2', 'color3'],
+		indicatorDots: false,
+		autoplay: true,
+		interval: 2000,
+		duration: 500
+	}
+</script>
+
+<style scoped>
+	.swiper {
+		height: 100%;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
+
+	.top-content {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.top-left {
+		flex: 1;
+		padding: 2vw;
+		display: flex;
+		flex-direction: column;
+
+	}
+
+	.top-right {
+		flex: 1;
+		background: url('~@/static/tworight.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-left-title {
+		position: relative;
+		font-weight: bold;
+		padding-left: 2vw;
+		font-size: 0.6rem;
+		color: #219862;
+
+	}
+
+	.top-left-title:before {
+		content: "";
+		background-color: #219862;
+		width: 0.5vw;
+		height: 3vw;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		margin-top: -1.5vw;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+	}
+
+	.top-left-content {
+		padding: 2vw;
+		font-size: 0.4rem;
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		line-height: 2;
+	}
+
+	.top-left-content-top {
+		text-indent: 2em;
+	}
+</style>
--- a/pages/FloorPlanShowcase/FloorPlanShowcase.vue
+++ b/pages/FloorPlanShowcase/FloorPlanShowcase.vue
@ -0,0 +1,32 @@
+<!-- 4.户型展示 -->
+<template>
+	<view class="content">
+		<div class="top">
+			4.户型展示
+		</div>
+		<div class="bottom">
+			<Menu :type="4" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+
+	}
+</style>
--- a/pages/LocationAmenities/LocationAmenities.vue
+++ b/pages/LocationAmenities/LocationAmenities.vue
@ -0,0 +1,33 @@
+<!-- 2.区位配套 -->
+<template>
+	<view class="content">
+		<div class="top">
+		</div>
+		<div class="bottom">
+			<Menu :type="2" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+		background: url('~@/static/locationamenities.jpg') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.bottom {
+		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
+</style>
--- a/pages/ProjectPlanning/ProjectPlanning.vue
+++ b/pages/ProjectPlanning/ProjectPlanning.vue
@ -0,0 +1,612 @@
+<!-- 3.项目规划 -->
+<template>
+	<view class="content">
+		<div class="top">
+			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
+				<swiper-item>
+					<div class="top-content-one">
+						<div class="top-left">
+							<div class="top-left-title">
+								张家港绿洲璟院大区景观营销亮点
+							</div>
+							<div class="top-left-content">
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										设计单位简介
+									</div>
+									<div class="top-left-content-item-content">
+										名称：上海建源景观规划设计有限公司<br />
+										资质：风景园林工程设计专项乙级<br />
+										荣誉：设计项目获得不同奖项，包含金盘奖年度最佳预售楼盘、全球地产设计大奖佳作奖、年度文旅小镇景观奖、园匠杯优秀奖、绿城管理集团最佳示范区奖等。
+									</div>
+								</div>
+								<div class="top-left-content-item-img">
+									<image src="/static/topleftoneone.png" mode="heightFix" />
+									<image src="/static/topleftonethree.jpg" mode="heightFix" />
+									<image src="/static/topleftonetwo.jpg" mode="heightFix" />
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										设计定位、风格及特点
+									</div>
+									<div class="top-left-content-item-content">
+										定位：高端改善商品&现代轻奢高层&东方雅居墅院<br />
+										风格：现代轻奢、全龄乐活、自然亲和的现代风格<br />
+										特点：为了符合不同类型产品的定位，高层区在景观上更现代和年轻化，打造场景丰富的自然艺术花园，营造多元复合的空间氛围；低层区在景观上更隐奢和宋风美学，打造可游可坐、自然慢享的东方意境造园景观。
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="top-right" />
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-two">
+						<div class="two-top-left">
+							<div class="top-left-title">
+								张家港绿洲璟院大区景观营销亮点
+							</div>
+							<div class=two-two-img>
+								<image src="/static/toplefttwotwo.jpg" mode="widthFix" />
+							</div>
+						</div>
+						<div class="two-top-right">
+							<div class="top-left-content two-content">
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										设计理念
+									</div>
+									<div class="top-left-content-item-content">
+										<span class="lit-title">城市印象：</span>
+										张家港，原名沙洲，位于长江下游南岸，以境内天然良港张家港而命名，城内全境地势平坦，河港纵横，大小河道六千多条，自然资源优越，风光秀美。提取张家港水中城、城中山、山中林的自然生态的城市印象，为项目定调，打造一个自然乐活、舒适轻奢、全龄共享的居住空间，让归家的人们放松心灵、释放压力，收获愉悦的精神享受。
+									</div>
+									<div class="top-left-content-item-content">
+										<span class="lit-title">主题概念：</span>
+										流淌的自然艺术
+									</div>
+									<div class="top-left-content-item-content">
+										<span
+											class="lit-title">灵感来源：以自然界中“光、林、风、云、时”五大自然元素为设计切入点，打造五大主题活动区，分别对应①遇光·仪式归家体验；②越林·趣味健身场；③乘风·儿童游乐营地；④观云·艺术社交客厅；⑤四时·四季主题园。</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-three">
+						<div class="top-content-three-content">
+							<div class="three-title">景观营销亮点</div>
+							<div class="three-content">
+								<div class="three-content-top">景观结构：一轴十园七巷</div>
+								<div class="three-content-content">
+									<div class="three-content-content-left">一轴：</div>
+									<div class="three-content-content-right">南北-中心礼仪轴</div>
+								</div>
+								<div class="three-content-content">
+									<div class="three-content-content-left">十园：</div>
+									<div class="three-content-content-right">
+										①林下闲庭；②趣味健身场；③儿童游乐营地；④艺术社交客厅；⑤芳香花园；⑥二进院；⑦朱樱春园；⑧清荷夏园；⑨霜枫秋园；⑩沁梅冬园；
+										七巷：①桃源巷；②沁桂巷；③丰禾巷；④汀兰巷；⑤丹枫巷；⑥锦绣巷；⑦凌梅巷。
+									</div>
+								</div>
+								<div class="three-content-content">
+									<div class="three-content-content-left">七巷：</div>
+									<div class="three-content-content-right">①桃源巷；②沁桂巷；③丰禾巷；④汀兰巷；⑤丹枫巷；⑥锦绣巷；⑦凌梅巷。</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-four">
+						<div class="top-content-four-left">
+							<div class="top-left-content-item-title">
+								北入口仪式门庭
+							</div>
+							<div class="top-content-four-content">
+								北入口由长33米，高8.8米的仪式门头和奢华主题雕塑组成，以豪宅美学界面，彰显身份，享受星级酒店级别的尊享服务。园区内实行人车分流，机动车全部进入地下车库，非机动车地面停车位及非机动车地下车库出入口均分布于园区外围，避免管控混乱和安全问题。
+							</div>
+							<image src="/static/threefourone.jpg" mode="widthFix" />
+							<image src="/static/threefourtwo.jpg" mode="widthFix" />
+						</div>
+						<div class="top-content-four-right">
+							<image src="/static/threefourthree.jpg" mode="widthFix" />
+							<div class="top-left-content-item-title">
+								林下闲庭
+							</div>
+							<div class="top-content-four-content">
+								再往南走是一处对景花园，层级水景结合新颖造型的景墙，植物上高大林荫的朴树、榉树、黄连木和娇艳的樱花，搭配绚丽多彩的花境，打造一个精致度假感的室外花园空间。
+							</div>
+
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item class="swiper-five">
+					<div class="top-content-five">
+						<div class="image-group">
+							<image src="/static/five1.jpg" mode="widthFix" />
+							<div class="img-title">林下闲庭</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five2.jpg" mode="widthFix" />
+							<div class="img-title">趣味健身场</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five3.jpg" mode="widthFix" />
+							<div class="img-title">儿童游乐营地（和风乐园）</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five4.jpg" mode="widthFix" />
+							<div class="img-title">艺术社交客厅</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five5.jpg" mode="widthFix" />
+							<div class="img-title">芳香花园</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five6.jpg" mode="widthFix" />
+							<div class="img-title">东入口仪式门庭</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five7.jpg" mode="widthFix" />
+							<div class="img-title">朱樱春园</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five8.jpg" mode="widthFix" />
+							<div class="img-title">清荷夏园</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five9.jpg" mode="widthFix" />
+							<div class="img-title">霜枫秋园</div>
+						</div>
+						<div class="image-group">
+							<image src="/static/five10.jpg" mode="widthFix" />
+							<div class="img-title">沁梅冬园</div>
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-six">
+						<div class="two-top-left">
+							<div class="top-left-title">
+								主题巷道
+							</div>
+							<div class="top-left-content-item-title">
+								漫步其中，享受归家前的自然与宁静，归家即归于自然。
+							</div>
+							<div class="two-six-img">
+								<image src="/static/six1.jpg" mode="widthFix" />
+							</div>
+						</div>
+						<div class="two-top-right">
+							<div class="top-left-content-six six-content">
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										桃源巷：主景桃花
+									</div>
+									<div class="top-left-content-item-content">
+										缘路行，忽逢桃花源，夹道芳草，落英缤纷。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										沁桂巷：主景桂花
+									</div>
+									<div class="top-left-content-item-content">
+										植香气四溢的植物，如桂花、含笑、腊梅等，弥漫的芳香呼应“沁”桂主题。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										丰禾巷：主景鸡爪槭
+									</div>
+									<div class="top-left-content-item-content">
+										“漠漠渔村烟雨中，参差苍桧映丹枫。”红色满庭之象。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										汀兰巷：主景兰花
+									</div>
+									<div class="top-left-content-item-content">
+										巷道以南天竺、春兰等点景树渲染景观清雅别致的氛围。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										丹枫巷：主景枫树
+									</div>
+									<div class="top-left-content-item-content">
+										多选取落叶植物造丰禾秋色之景，层层植物组团增加景深效果。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										锦绣巷：主景绣球花
+									</div>
+									<div class="top-left-content-item-content">
+										巷道两侧是五彩斑斓的绣球花，花团锦簇，礼遇归家的主人。
+									</div>
+								</div>
+								<div class="top-left-content-item">
+									<div class="top-left-content-item-title">
+										凌梅巷：主景白梅
+									</div>
+									<div class="top-left-content-item-content">
+										墙角数枝梅,凌寒独自开。遥知不是雪，为有暗香来。
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</swiper-item>
+				<swiper-item>
+					<div class="top-content-seven">
+						<div class="top-content-seven-top">
+							<div class="top-content-seven-top-title">
+								<div style="font-size: 1.8vw;padding-bottom: 1.5vw;font-weight: bold;">健康跑道</div>
+								<div style="font-size: 1.5vw;">用有氧运动开启全新一天</div>
+							</div>
+							<image src="/static/seven1.jpg" mode="heightFix" />
+						</div>
+						<div class="top-content-seven-bottom">
+							<div class="top-content-seven-bottom-left">
+								<div style="font-size: 1.8vw;padding-bottom: 1.5vw;font-weight: bold;color:#2C3D2B">尊享归家
+								</div>
+								<div style="font-size: 1.5vw;">雅致入户前厅，静雅石墙、疏密有致的植物搭配，从视觉到体验，彰显生活的仪式感和价值感。</div>
+							</div>
+							<div class="top-content-seven-bottom-right">
+								<image src="/static/seven2.jpg" mode="heightFix" />
+							</div>
+						</div>
+					</div>
+				</swiper-item>
+			</swiper>
+		</div>
+		<div class="bottom">
+			<Menu :type="3" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.swiper {
+		height: 100%;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+		background-color: rgba(44 61, 43, 1);
+	}
+
+
+	.top-content-one {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+
+	.top-left {
+		flex: 1;
+		padding: 2vw;
+	}
+
+	.top-right {
+		flex: 1;
+		background: url('~@/static/threerightone.png') no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.top-left-content {
+		padding: 2vw;
+		line-height: 2;
+	}
+
+	.top-left-title {
+		position: relative;
+		font-weight: bold;
+		padding-left: 2vw;
+		font-size: 0.6rem;
+		color: #2C3D2B;
+	}
+
+	.top-left-title:before {
+		content: "";
+		background-color: #2C3D2B;
+		width: 0.5vw;
+		height: 3vw;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		margin-top: -1.5vw;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+	}
+
+	.top-left-content-item {
+		margin-bottom: 1vw;
+	}
+
+	.top-left-content-item-title {
+		color: #2C3D2B;
+		font-weight: bold;
+		font-size: 0.4rem;
+	}
+
+	.top-left-content-item-content {
+		font-size: 0.3rem;
+	}
+
+	.top-left-content-item-img {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 1vw;
+	}
+
+	.top-left-content-item-img image {
+		height: 12vw;
+		object-fit: cover;
+		border: 0.3vw solid #2E9F73;
+
+	}
+
+
+	.top-content-two {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.two-top-left {
+		flex: 2;
+		padding: 2vw;
+	}
+
+	.two-top-right {
+		flex: 1;
+	}
+
+
+	.two-two-img {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 3vw;
+	}
+
+	.two-two-img image {
+		width: 100%;
+		height: auto;
+	}
+
+	.two-content {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	.lit-title {
+		font-weight: bold;
+		color: #2C3D2B;
+	}
+
+	.top-content-three {
+		height: 100%;
+		display: flex;
+		background: url('~@/static/home.jpg') no-repeat;
+		background-size: 100% 100%;
+		align-items: center
+	}
+
+	.top-content-three-content {
+		background-color: #2C3D2B;
+		width: 50vw;
+		height: 25vw;
+		color: white;
+		padding: 2vw;
+	}
+
+	.three-title {
+		font-size: 2.2vw;
+		font-weight: bold;
+		line-height: 1.5;
+	}
+
+	.three-content-top {
+		font-size: 1.7vw;
+		font-weight: bold;
+		line-height: 1.5;
+	}
+
+	.three-content-content {
+		font-size: 1.7vw;
+		display: flex;
+		justify-content: flex-start;
+		line-height: 1.5;
+	}
+
+	.three-content-content-left {
+		flex: 1;
+		font-weight: bold;
+	}
+
+	.three-content-content-right {
+		flex: 8;
+	}
+
+	.top-content-four {
+		display: flex;
+		height: 100%;
+		padding: 4vw;
+	}
+
+	.top-content-four-left {
+		flex: 1;
+		line-height: 1.5;
+	}
+
+	.top-content-four-right {
+		flex: 1;
+		line-height: 1.5;
+	}
+
+	.top-content-four-content {
+		margin-top: 1.2vw;
+		font-size: 1.3vw;
+		width: 75%;
+		margin-bottom: 1vw;
+	}
+
+	.top-content-four-right image,
+	.top-content-four-left image {
+		width: 85%;
+		height: auto;
+	}
+
+	.top-content-four-right image {
+		margin-bottom: 2vw;
+	}
+
+	.swiper-five {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.top-content-five {
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		height: 50%;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.image-group {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		width: 20%;
+		padding: 1vw;
+		box-sizing: border-box;
+	}
+
+	.image-group image {
+		width: 100%;
+	}
+
+	.img-title {
+		font-size: 1.4vw;
+	}
+
+	.top-content-six {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.two-six-img {
+		height: 100%;
+		display: flex;
+		padding: 3vw;
+		box-sizing: border-box;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.two-six-img image {
+		width: 100%;
+		height: auto;
+	}
+
+	.top-left-content-six {
+		line-height: 1.5;
+	}
+
+	.six-content {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		padding-right: 2vw;
+	}
+
+	.top-content-seven {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		padding: 5vw;
+		box-sizing: border-box;
+	}
+
+	.top-content-seven-top {
+		flex: 1;
+		display: flex;
+	}
+
+	.top-content-seven-top-title {
+		width: 30%;
+		background-color: #2C3D2B;
+		display: flex;
+		color: white;
+		justify-content: center;
+		flex-direction: column;
+		align-items: flex-end;
+		padding-right: 2vw;
+	}
+
+	.top-content-seven-top image {
+		height: 100%;
+	}
+
+	.top-content-seven-bottom {
+		flex: 1;
+		height: 100%;
+		display: flex;
+		margin-top: 1vw;
+	}
+
+	.top-content-seven-bottom {
+		display: flex;
+
+	}
+
+	.top-content-seven-bottom-left {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+		flex-direction: column;
+		padding-right: 2vw;
+	}
+
+	.top-content-seven-bottom-right {
+		flex: 1;
+	}
+	
+	.top-content-seven-bottom-right image{
+		height: 100%;
+	}
+</style>
--- a/pages/RouteNavigation/RouteNavigation.vue
+++ b/pages/RouteNavigation/RouteNavigation.vue
@ -0,0 +1,32 @@
+<!-- 5.动线漫游 -->
+<template>
+	<view class="content">
+		<div class="top">
+			5.动线漫游
+		</div>
+		<div class="bottom">
+			<Menu :type="5" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+
+	}
+</style>
--- a/pages/TechnologySystems/TechnologySystems.vue
+++ b/pages/TechnologySystems/TechnologySystems.vue
@ -0,0 +1,32 @@
+<!-- 7.科技系统 -->
+<template>
+	<view class="content">
+		<div class="top">
+			7.科技系统
+		</div>
+		<div class="bottom">
+			<Menu :type="7" />
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import Menu from '../../components/Menu.vue'
+</script>
+
+<style scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.top {
+		flex: 12;
+	}
+
+	.bottom {
+		flex: 1;
+
+	}
+</style>
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -1,52 +1,33 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<div class="top">
+
+		</div>
+		<div class="bottom">
+			<Menu :type="0"/>
+		</div>
 	</view>
 </template>

-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+<script setup>
+	import Menu from '../../components/Menu.vue'
 </script>

-<style>
+<style scoped>
 	.content {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+		height: 100%;
+		background: url('~@/static/home.jpg') no-repeat;
+		background-size: 100% 100%;
 	}

-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	.top {
+		flex: 12;
 	}

-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.bottom {
+		flex: 1;
+		
 	}
 </style>
--- a/static/five1.jpg
+++ b/static/five1.jpg
--- a/static/five10.jpg
+++ b/static/five10.jpg
--- a/static/five2.jpg
+++ b/static/five2.jpg
--- a/static/five3.jpg
+++ b/static/five3.jpg
--- a/static/five4.jpg
+++ b/static/five4.jpg
--- a/static/five5.jpg
+++ b/static/five5.jpg
--- a/static/five6.jpg
+++ b/static/five6.jpg
--- a/static/five7.jpg
+++ b/static/five7.jpg
--- a/static/five8.jpg
+++ b/static/five8.jpg
--- a/static/five9.jpg
+++ b/static/five9.jpg
--- a/static/home.jpg
+++ b/static/home.jpg
--- a/static/homelogo.png
+++ b/static/homelogo.png
--- a/static/locationamenities.jpg
+++ b/static/locationamenities.jpg
--- a/static/seven1.jpg
+++ b/static/seven1.jpg
--- a/static/seven2.jpg
+++ b/static/seven2.jpg
--- a/static/six1.jpg
+++ b/static/six1.jpg
--- a/static/threefourone.jpg
+++ b/static/threefourone.jpg
--- a/static/threefourthree.jpg
+++ b/static/threefourthree.jpg
--- a/static/threefourtwo.jpg
+++ b/static/threefourtwo.jpg
--- a/static/threerightone.png
+++ b/static/threerightone.png
--- a/static/topleftoneone.png
+++ b/static/topleftoneone.png
--- a/static/topleftonethree.jpg
+++ b/static/topleftonethree.jpg
--- a/static/topleftonetwo.jpg
+++ b/static/topleftonetwo.jpg
--- a/static/toplefttwotwo.jpg
+++ b/static/toplefttwotwo.jpg
--- a/static/tworight.jpg
+++ b/static/tworight.jpg