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">
						湖里区是厦门经济特区发祥地，成立于1987年11月，地处厦门岛北部，八山横贯两水，三面海域环抱，与金门岛隔海相望，陆地面积72.26平方公里、占厦门岛48%，辖5个街道55个社区，总人口103.7万人，近年先后获评国家进口贸易促进创新示范区、中国工业百强区、全国健康促进区、全国社会治理创新优秀城区、全省首批教育强区、全省文明城区、全省平安先进区。2021年1-12月，全区实现GDP1539.4亿元、增长7.2%，2021年财政总收入260.08亿元，区级财政收入55.56亿元、增长8.8%，规上工业企业增加值443.62亿元，扣除价格因素后与去年同期相比增长6.1%。社会消费品零售总额526.35亿元、增长11.3%，其他营利性服务业营收增长45.0%，固定资产投资增长13.7%，实际利用外资21.96亿元，合同利用外资60.93亿元，同比增长44.9%。2021年1-12月，主要经济指标持续向好发展，其中其他营利性服务业全市排名第一，城镇居民人均可支配收入增速、固定资产投资增速全市排名第二，第二季度，“五个一批”项目综合考评进入全省前十。
						特区基因深厚。1980年，国务院批准在湖里2.5平方公里范围设立厦门经济特区；1981年，厦门经济特区在湖里破土动工；1984年，邓小平同志在湖里亲笔写下“把经济特区办得更快些更好些”的题词，随后经济特区范围扩到厦门岛，2010年扩至厦门全市。基础设施完备。位于厦门市域中心，拥有便捷的海、陆、空立体交通网络，高崎机场、邮轮码头、火车货运站、五条陆路出岛通道、厦金航线、第二西通道及正在建设的第二东通道都在湖里辖区，地铁密度全市最高。
					</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
		};
	},
	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>