feiYi/pages/index/feiYiZhengCe/feiYiZhengCe.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 style="position: relative">
			<view class="fybk_zc">
				<view class="fybk_tit">
					<image style="width: 120rpx; height: 860rpx" src="/static/img/img_zce.png"></image>
				</view>
				<view class="fy_xm">
					<view v-for="(item, index) in tabListName" :key="item.name" @click="tabBtn(item.id, index)" :class="{ active: tabIndex == index }">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="box1">
			<view class="box2">
				<view @click="detailsBtn(item.id)" v-for="item in lawsList" :key="item.id" class="box_item">{{ item.title }}</view>
			</view>
		</view>
		<!-- 法规详情容器 -->
		<view class="details_box" v-if="detailsShow">
			<view class="details_box2">
				<view class="details_tit_box">
					<view class="back" @click="detailsShow = false">
						<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
					</view>
					<view class="details_tit">{{ detail.title }}</view>
				</view>

				<view class="muLv">
					<!-- <view class="muLv1">{{ detail.content }}</view> -->
					<u-parse :content="detail.content"></u-parse>
				</view>
			</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>
let that;
export default {
	data() {
		return {
			show: false,
			detailsShow: false,
			tabIndex: 0,
			tabListName: [
				{
					name: '国内法规',
					id: 76
				},
				{
					name: '部级',
					id: 77
				},
				{
					name: '地方',
					id: 78
				},
				{
					name: '其他',
					id: 79
				},
				{
					name: '联合国科教文组织',
					id: 80
				},
				{
					name: '重要论述',
					id: 81
				}
			],
			lawsList: [],
			detail: []
		};
	},
	onLoad() {
		that = this;
		this.getguoneifagui();
	},
	methods: {
		tabBtn(id, index) {
			console.log(index, 88899);
			that.getguoneifagui(id);
			this.tabIndex = index;
		},
		navBtn() {
			this.show = true;
		},
		// 法规详情
		detailsBtn(index) {
			console.log(index, 'index');
			that.getfeiyidetail(index);
			this.detailsShow = true;
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		//获取国内法规列表
		async getguoneifagui(id) {
			let res = await this.$api.getfeiyibaike({
				model: '7',
				channel: id ? id : '76',
				apikey: '649264'
			});
			console.log(res, '法规列表');
			that.lawsList = res.data.pageList.data;
			console.log(that.lawsList, '列表');
		},
		//详情
		async getfeiyidetail(id) {
			let res = await this.$api.getfeiyidetail({
				id: id,
				apikey: '649264'
			});
			console.log(res, '详情列表');
			that.detail = res.data.archivesInfo;
			console.log(that.detail, '详情');
		}
	}
};
</script>

<style>
.body {
	width: 100%;
	height: 1925rpx;
	padding-top: 100rpx;
	box-sizing: border-box;
}
.active {
	font-size: 54rpx;
	background: linear-gradient(270deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.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_zc {
	left: 9%;
	top: 220rpx;
	display: flex;
	position: absolute;
}
.fybk_tit {
	width: 200rpx;
	height: 530rpx;
	text-align: center;
}
.fy_xm {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 640rpx;
	letter-spacing: 0.2em;
	color: #563530;
	padding-left: 30rpx;
	font-size: 40rpx;
	margin-top: 100rpx;
	border-left: 1px solid #563530;
	box-sizing: border-box;
}
.caidan {
	margin-left: 10%;

	display: flex;
	width: 180rpx;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
.box1 {
	width: 2000rpx;
	height: 1200rpx;
	margin-left: 28%;
	margin-top: 100rpx;
	border: 3px solid #563530;
}
.box2 {
	overflow: scroll;
	width: 1980rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
	padding: 60rpx 60rpx 0 60rpx;
	border: 1px solid #563530;
	box-sizing: border-box;
}
.details_box {
	position: absolute;
	top: 10%;
	width: 2000rpx;
	height: 1200rpx;
	margin-left: 28%;
	margin-top: 100rpx;
	border: 3px solid #563530;
	background-color: #f8efe1;
}
.details_box2 {
	overflow: scroll;
	width: 1980rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
	padding: 0 60rpx 0 60rpx;
	border: 1px solid #563530;
	box-sizing: border-box;
}
.details_tit_box {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #f8efe1;
	width: 100%;
	height: 200rpx;
	border-bottom: 1px solid #ddd7d6;
	display: flex;
	align-items: center;
}
.muLv {
	width: 100%;
	height: 160rpx;
	/* display: flex; */
	justify-content: space-between;
	align-items: center;
}
.muLv1 {
	font-size: 40rpx;
	color: #563530;
}
.muLv2 {
	font-size: 36rpx;
	color: #563530;
}
.zJie_box {
	width: 100%;
	height: 120rpx;
	display: flex;

	align-items: center;
}
.zJie_1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.zJie_2 {
	width: 150rpx;
	font-size: 40rpx;
	color: #563530;
	letter-spacing: 0.2em;
}
.zJie_3 {
	font-size: 40rpx;
	color: #563530;
	margin-left: 40rpx;
	letter-spacing: 0.2em;
}

.back {
	position: absolute;
	width: 100rpx;
	height: 100rpx;
}
.details_tit {
	margin-left: 140rpx;
	font-size: 50rpx;
	color: #563530;
	letter-spacing: 0.2em;
}
.box_item {
	height: 150rpx;
	display: flex;
	align-items: center;
	font-size: 40rpx;
	color: #563530;
	letter-spacing: 0.2em;
	border-bottom: 1px solid #ddd7d6;
}
</style>