项目规划

This commit is contained in:
liukang 2025-01-13 19:42:02 +08:00
parent 87ef410dd9
commit ac7d3cba53
39 changed files with 1203 additions and 122 deletions

22
App.vue
View File

@ -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
View File

@ -0,0 +1,3 @@
{
"prompt" : "none"
}

126
components/Menu.vue Normal file
View 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">&#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>

View File

@ -18,3 +18,8 @@
<script type="module" src="/main.js"></script>
</body>
</html>
<style>
html{
font-size: 16px;
}
</style>

View File

@ -1,31 +1,31 @@
{
"name": "yglt_uniapp",
"appid": "__UNI__542B476",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"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
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"compatible" : {
"ignoreVersion" : true
},
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* */
"modules": {},
"modules" : {},
/* */
"distribute": {
"distribute" : {
/* android */
"android": {
"permissions": [
"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\"/>",
@ -44,32 +44,38 @@
]
},
/* ios */
"ios": {},
"ios" : {},
/* SDK */
"sdkConfigs": {}
"sdkConfigs" : {},
"splashscreen" : {
"androidStyle" : "common",
"iosStyle" : "common",
"useOriginalMsgbox" : false
}
}
},
/* */
"quickapp": {},
"quickapp" : {},
/* */
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents": true
"usingComponents" : true
},
"mp-alipay": {
"usingComponents": true
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu": {
"usingComponents": true
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao": {
"usingComponents": true
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics": {
"enable": false
"uniStatistics" : {
"enable" : false
},
"vueVersion": "3"
"orientation" : [ "landscape-primary" ],
"vueVersion" : "3"
}

View File

@ -1,17 +1,46 @@
{
"pages": [ //pageshttps://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": {}
}

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 KiB

BIN
static/five10.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 422 KiB

BIN
static/five2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 459 KiB

BIN
static/five3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 KiB

BIN
static/five4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

BIN
static/five5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

BIN
static/five6.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

BIN
static/five7.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 KiB

BIN
static/five8.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

BIN
static/five9.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

BIN
static/home.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
static/homelogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 MiB

BIN
static/seven1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

BIN
static/seven2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
static/six1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
static/threefourone.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

BIN
static/threefourthree.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
static/threefourtwo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 KiB

BIN
static/threerightone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
static/topleftoneone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

BIN
static/topleftonethree.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

BIN
static/topleftonetwo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 771 KiB

BIN
static/toplefttwotwo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
static/tworight.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 741 KiB