项目规划
This commit is contained in:
liukang
parent
87ef410dd9
commit
ac7d3cba53
22
App.vue
22
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 */
|
||||
uni-page-body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
3
androidPrivacy.json
Normal file
3
androidPrivacy.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"prompt" : "none"
|
||||
}
|
||||
126
components/Menu.vue
Normal file
126
components/Menu.vue
Normal file
@ -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">▲ </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>
|
||||
@ -18,3 +18,8 @@
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
html{
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -46,7 +46,12 @@
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs": {}
|
||||
"sdkConfigs" : {},
|
||||
"splashscreen" : {
|
||||
"androidStyle" : "common",
|
||||
"iosStyle" : "common",
|
||||
"useOriginalMsgbox" : false
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
@ -71,5 +76,6 @@
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"orientation" : [ "landscape-primary" ],
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
39
pages.json
39
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": {}
|
||||
}
|
||||
32
pages/ArchitecturalDetails/ArchitecturalDetails.vue
Normal file
32
pages/ArchitecturalDetails/ArchitecturalDetails.vue
Normal file
@ -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>
|
||||
146
pages/BrandDisplay/BrandDisplay.vue
Normal file
146
pages/BrandDisplay/BrandDisplay.vue
Normal file
@ -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>
|
||||
32
pages/FloorPlanShowcase/FloorPlanShowcase.vue
Normal file
32
pages/FloorPlanShowcase/FloorPlanShowcase.vue
Normal file
@ -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>
|
||||
33
pages/LocationAmenities/LocationAmenities.vue
Normal file
33
pages/LocationAmenities/LocationAmenities.vue
Normal file
@ -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>
|
||||
612
pages/ProjectPlanning/ProjectPlanning.vue
Normal file
612
pages/ProjectPlanning/ProjectPlanning.vue
Normal file
@ -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>
|
||||
32
pages/RouteNavigation/RouteNavigation.vue
Normal file
32
pages/RouteNavigation/RouteNavigation.vue
Normal file
@ -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>
|
||||
32
pages/TechnologySystems/TechnologySystems.vue
Normal file
32
pages/TechnologySystems/TechnologySystems.vue
Normal file
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
.bottom {
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
BIN
static/five1.jpg
Normal file
BIN
static/five1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
BIN
static/five10.jpg
Normal file
BIN
static/five10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
BIN
static/five2.jpg
Normal file
BIN
static/five2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
BIN
static/five3.jpg
Normal file
BIN
static/five3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
static/five4.jpg
Normal file
BIN
static/five4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
static/five5.jpg
Normal file
BIN
static/five5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
static/five6.jpg
Normal file
BIN
static/five6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
static/five7.jpg
Normal file
BIN
static/five7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
static/five8.jpg
Normal file
BIN
static/five8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
BIN
static/five9.jpg
Normal file
BIN
static/five9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
BIN
static/home.jpg
Normal file
BIN
static/home.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
BIN
static/homelogo.png
Normal file
BIN
static/homelogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
static/locationamenities.jpg
Normal file
BIN
static/locationamenities.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 MiB |
BIN
static/seven1.jpg
Normal file
BIN
static/seven1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
static/seven2.jpg
Normal file
BIN
static/seven2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
static/six1.jpg
Normal file
BIN
static/six1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
static/threefourone.jpg
Normal file
BIN
static/threefourone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
BIN
static/threefourthree.jpg
Normal file
BIN
static/threefourthree.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
static/threefourtwo.jpg
Normal file
BIN
static/threefourtwo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 KiB |
BIN
static/threerightone.png
Normal file
BIN
static/threerightone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
static/topleftoneone.png
Normal file
BIN
static/topleftoneone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
static/topleftonethree.jpg
Normal file
BIN
static/topleftonethree.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/topleftonetwo.jpg
Normal file
BIN
static/topleftonetwo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 771 KiB |
BIN
static/toplefttwotwo.jpg
Normal file
BIN
static/toplefttwotwo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
static/tworight.jpg
Normal file
BIN
static/tworight.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 741 KiB |
Loading…
Reference in New Issue
Block a user