yglt-uniapp/pages/ProjectPlanning/ProjectPlanning.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: 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>