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">
					<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">
					厦门市的文物考古工作，原来一直由市文物管理委员会办公室、市博物馆等单位负责。为加强我市的文物考古工作，经市文化局申报，中共厦门市委机构编制委员会办公室于2004年11月3日下发《厦委编办[2004]70号》文件，作出《关于同意厦门文物鉴定组更名为厦门文化遗产保护中心的批复》，在批复中明确了厦门文化遗产保护中心为全民事业单位，隶属于市文化局管理，其主要任务是：1、承担全市文物调查、考古勘探工作。2、承担馆藏文物、民间收藏文物和涉案文物的鉴定。3、承担厦门古建筑及近现代优秀建筑的保护和研究。4、承担馆藏文物的科学保护与研究。2007年6月27日，郑成功纪念馆、文化遗产保护中心并入厦门市博物馆。
					在此期间，厦门文化遗产保护中心在市文化局的领导下，在有关处室的指导和支持下，按照工作职能全面开展各项工作。
				</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:500rpx">
			<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: 1825rpx;
}
.box1 {
	width: 2200rpx;
	height: 1200rpx;
	margin-left: 25%;
	margin-top: 100rpx;

	border: 3px solid #563530;
}
.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;
}
.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: 180rpx;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
</style>