feiYi/pages/index/huLiWenHua/huLiWenHua.vue

<template>
	<view class="body">
		<view class="header">
			<view class="tit">湖里文化遗产保护中心</view>
			<view class="thumbnail_1">
				<image style="width: 100%; height: 100%" src="/static/img/img_seal@2x.png"></image>
			</view>
		</view>
		<view class="" style="position: relative">
			<view class="fybk_zc">
				<view class="fybk_tit" @click="show = true">
					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_wh.png"></image>
				</view>
				<view class="fybk_tab">
					<view class="tab" @click="tabBtn(0)" :class="{ active: indexTab == 0 }">湖里概况</view>
					<!-- <view class="tab" @click="tabBtn(1)" :class="{ active: indexTab == 1 }">工作指南</view> -->
				</view>
			</view>
		</view>
		<!-- 湖里简介 -->
		<view v-if="indexTab == 0" class="box1">
			<view class="box2">
				<view class="jj_tit">湖里区概况</view>
				<view class="jieshao">
					<marquee width="1000" height="400" scrollamount="2" loop="infinite" direction="up">
						 <u-parse :content="content"></u-parse>
						　　
					</marquee>
				</view>
			</view>
		</view>
		<!-- 工作指南 -->
		<!-- <view v-if="indexTab == 1" class="box1">
			<view class="box2">工作指南</view>
		</view> -->
		<!-- 菜单按钮 -->
		<view class="caidan" @click="navBtn">
			<image class="img" src="../../../static/img/icon_menu@2x.png"></image>
			<view class="dh">导航</view>
		</view>
		<!-- 菜单弹层 -->
		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:1000rpx">
			<view class="box_gb" @click="show = false">
				<view class="gb">X</view>
			</view>
			<LeftNav></LeftNav>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indexTab: 0,
			show: false,
			content:`<p><strong>一、基本情况</strong></p>
						　　湖里区是厦门经济特区发祥地，成立于1987年11月，地处厦门岛北部，八山横贯两水，三面海域环抱，与金门岛隔海相望，陆地面积73.9平方公里、占厦门岛46.8%，辖5个街道59个社区，总人口101.2万人、其中外来人口约59.8万人。近年先后获评全国创新百强区、中国工业百强区、全国投资竞争力百强区、国家生态文明建设示范区、全国国土资源节约集约模范区、全国健康促进区、全国义务教育教学改革试验区、全省十优发展区、全省教育强区、全省建筑之乡、省级文明示范城区等荣誉称号。						
						　　<p><strong>二、主要特点</strong></p>
						　　<p>一是厦门经济特区的发祥地。1980年10月7日，国务院批准在湖里2.5平方公里范围设立厦门经济特区。1981年10月15日，厦门经济特区在湖里动工建设。1984年2月9日，邓小平同志视察厦门并在湖里题词“把经济特区办得更快些更好些”，随后经济特区范围扩大至厦门岛，2010年扩至厦门全市。1987年11月21日，习近平同志出席湖里区第一届人民代表大会第一次会议，要求把湖里区建设成为经济繁荣、人民幸福、“两个文明”建设程度高的模范新区。2010年9月6日，习近平同志视察湖里区金安社区，要求把家园建设得更加美丽、更加富饶、更加繁荣。湖里区牢记使命，加强对台交流合作，辖区有台资企业和台青创业企业1600余家、台胞台属1.1万余人，拥有五通码头厦金航线和两岸金融中心、海峡旅游服务中心、台湾水果销售集散中心等重要对台交流合作平台，以及全市首个台胞服务中心、2个国家级海峡两岸青年创业基地、1个省级台青创业就业基地、2个省级基层对台交流示范点。</p>
						　　<p>二是国际化发展的重要平台。具有便捷的海陆空立体交通网络，海港空港尤为发达。东渡港是厦门港的重要港区，岸线8.4公里、泊位51个，开通国际航线68条，集装箱年吞吐量230万标箱；高崎机场开通境内外航线187条，出入境旅客吞吐量全国第四；进出岛“五桥两隧”均与湖里相连。自贸试验区、金砖创新基地、国家自主创新示范区、国家进口贸易促进创新示范区等多区叠加，将规划建设以金砖创新基地总部区、金砖数字工业智谷、金砖TOD片区开发项目为主体的湖里金砖数字新城，自贸试验区厦门片区有近一半（19.37平方公里）位于辖区，外商投资比较密集，外资企业3578家、投资总额423亿美元，52家世界500强企业77个项目落户辖区。</p>
						　　<p>三是岛内大提升的重要发力点。辖区建设用地63.46平方公里、占全岛54.8%。老工业区、东部旧村改造腾挪空间、机场搬迁后可二次开发利用空间等存量用地面积12.4平方公里，其中东部旧村改造6.7平方公里。全区现有22个城中村、面积6.4平方公里，居住人口近51万，正在加快推进城中村现代化治理工作。规划五缘湾商务营运中心、湖里创新园、东部科技创新园等产业功能区12个、面积28.4平方公里，主要产业包括高端制造、商贸物流、新兴金融、创意创新等，已形成计算机通信和其他电子设备制造业千亿产业链。</p>
						　　<p><strong>三、主要经济指标</strong></p>
						　　<p>2023年，实现GDP1724亿元、同比增长1.5%，财政总收入288.12亿元、同比增长2.9%，区级财政收入59.46亿元、同比增长9.6%，规上工业增加值457.6亿元，批零销售额12497.7亿元，社会消费品零售总额548.1亿元，固定资产投资668.5亿元，城镇居民人均可支配收入7.15万元。</p>`
		};
	},
	methods: {
		tabBtn(index) {
			this.indexTab = index;
		},
		navBtn() {
			this.show = true;
		},
		close() {
			this.show = false;
			// console.log('close');
		}
	}
};
</script>

<style>
.body {
	padding-top: 100rpx;
	height: 1905rpx;
	box-sizing: border-box;
}
.box1 {
	width: 2200rpx;
	height: 1200rpx;
	margin-left: 25%;
	margin-top: 100rpx;
	border: 3px solid #563530;
}
.box_gb {
	position: absolute;
	cursor: pointer;
	width: 1000rpx;
	height: 160rpx;
}
.gb {
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	position: absolute;
	right: 100rpx;
	top: 30rpx;
	text-align: center;
	font-size: 52rpx;
	color: #563530;
	margin-left: 300rpx;
	border: #563530 1px solid;
}
.box2 {
	overflow: scroll;
	width: 2180rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
	padding: 60rpx 60rpx 0 60rpx;
	border: 1px solid #563530;
	box-sizing: border-box;
}
.jj_tit {
	width: 100%;
	height: 120rpx;
	border-bottom: 1px solid #ddd7d6;
	font-size: 48rpx;
	color: #563530;
	letter-spacing: 0.3em;
}
.jieshao {
	margin-top: 40rpx;
	font-size: 38rpx;
	color: #563530;
	line-height: 100rpx;
	letter-spacing: 0.3em;
}
.active {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	border: 1px solid #563530;
}
.header {
	margin-left: 10%;
	width: 960rpx;
	height: 96rpx;
	align-items: center;
	display: flex;
}
.tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	/* width: 500rpx; */
	height: 96rpx;
	font-size: 48rpx;
	letter-spacing: 0.3em;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 100rpx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.thumbnail_1 {
	width: 16rpx;
	height: 60rpx;
}

.fybk_tit {
	width: 200rpx;
	height: 530rpx;
	text-align: center;
	cursor: pointer;
}
.fybk_tab {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 220rpx;
	margin-top: 70%;
	padding-left: 20rpx;
	border-left: 1px solid #563530;
}
.fybk_zc {
	left: 9%;
	top: 220rpx;
	display: flex;
	position: absolute;
}
.tab {
	color: #563530;
	font-size: 36rpx;
	letter-spacing: 0.3em;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	height: 80rpx;
	font-weight: NaN;
	padding-left: 26rpx;
	white-space: nowrap;
	letter-spacing: 0.2em;
}

.caidan {
	margin-left: 10%;
	margin-top: 0;
	display: flex;
	width: 860rpx;
	height: 360rpx;

	cursor: pointer;
	align-items: center;
}
.img {
	width: 100rpx;
	height: 100rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 42rpx;
	color: #563530;
}
</style>