618 lines
17 KiB
Vue
618 lines
17 KiB
Vue
<!-- 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: 18rpx;padding-bottom: 15rpx;font-weight: bold;">健康跑道</div>
|
||
<div style="font-size: 15rpx;">用有氧运动开启全新一天</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: 18rpx;padding-bottom: 15rpx;font-weight: bold;color:#2C3D2B">尊享归家
|
||
</div>
|
||
<div style="font-size: 15rpx;">雅致入户前厅，静雅石墙、疏密有致的植物搭配，从视觉到体验，彰显生活的仪式感和价值感。</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: 30rpx 10rpx 10rpx 10rpx;
|
||
}
|
||
|
||
.top-right {
|
||
flex: 1;
|
||
background: url('~@/static/threerightone.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.top-left-content {
|
||
padding: 15rpx;
|
||
line-height: 2;
|
||
}
|
||
|
||
.top-left-title {
|
||
position: relative;
|
||
font-weight: bold;
|
||
padding-left: 10rpx;
|
||
font-size: 18rpx;
|
||
color: #2C3D2B;
|
||
}
|
||
|
||
.top-left-title:before {
|
||
content: "";
|
||
background-color: #2C3D2B;
|
||
width: 4rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
margin-top: -9rpx;
|
||
-webkit-border-radius: 3rpx;
|
||
-moz-border-radius: 3rpx;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
.top-left-content-item {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.top-left-content-item-title {
|
||
color: #2C3D2B;
|
||
font-weight: bold;
|
||
font-size: 15rpx;
|
||
}
|
||
|
||
.top-left-content-item-content {
|
||
font-size: 12rpx;
|
||
}
|
||
|
||
.top-left-content-item-img {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.top-left-content-item-img image {
|
||
height: 100rpx;
|
||
object-fit: cover;
|
||
border: 2rpx solid #2E9F73;
|
||
|
||
}
|
||
|
||
|
||
.top-content-two {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.two-top-left {
|
||
flex: 2;
|
||
padding: 15rpx;
|
||
padding: 30rpx 0 0 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.two-top-right {
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
.two-two-img {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 10rpx 0 10rpx;
|
||
}
|
||
|
||
.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/three3.jpg') no-repeat;
|
||
background-size: 100% 100%;
|
||
align-items: center
|
||
}
|
||
|
||
.top-content-three-content {
|
||
background-color: #2C3D2B;
|
||
width: 50%;
|
||
height: auto;
|
||
color: white;
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.three-title {
|
||
font-size: 18rpx;
|
||
font-weight: bold;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.three-content-top {
|
||
font-size: 13rpx;
|
||
font-weight: bold;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.three-content-content {
|
||
font-size: 13rpx;
|
||
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: 20rpx;
|
||
}
|
||
|
||
.top-content-four-left {
|
||
flex: 1;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.top-content-four-right {
|
||
flex: 1;
|
||
line-height: 1.5;
|
||
padding: 30rpx 0 0 0;
|
||
}
|
||
|
||
.top-content-four-content {
|
||
margin-top: 10rpx;
|
||
font-size: 12rpx;
|
||
width: 75%;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.top-content-four-right image,
|
||
.top-content-four-left image {
|
||
width: 85%;
|
||
height: auto;
|
||
}
|
||
|
||
.top-content-four-right image {
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.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: 8rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.image-group image {
|
||
width: 100%;
|
||
}
|
||
|
||
.img-title {
|
||
font-size: 15rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.top-content-six {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 30rpx 0 0 0;
|
||
}
|
||
|
||
.two-six-img {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 10rpx;
|
||
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: 15rpx;
|
||
}
|
||
|
||
.top-content-seven {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 30rpx;
|
||
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: 15rpx;
|
||
}
|
||
|
||
.top-content-seven-top image {
|
||
height: 100%;
|
||
}
|
||
|
||
.top-content-seven-bottom {
|
||
flex: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.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: 15rpx;
|
||
}
|
||
|
||
.top-content-seven-bottom-right {
|
||
flex: 1;
|
||
}
|
||
|
||
.top-content-seven-bottom-right image {
|
||
height: 100%;
|
||
}
|
||
</style> |