feiYi/pages/index/feiYiBaiKe/feiYiBaiKe.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_title@2x.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="txtVal" v-for="(item, index) in list" :key="item.title" @click="detailsBtn(item.id)">
					<view class="txt2">
						<view>0</view>
						<view style="margin-right: 10rpx">{{ index + 1 }}</view>
						<view class="">{{ item.title }}</view>
					</view>
					<!-- 关键词 -->
					<view class="txt3" style="display: flex; width: 500rpx">
						<view style="width: 100rpx">关键词:</view>
						<view>{{ item.keywords }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 工作指南 -->
		<!-- 		<view v-if="indexTab == 1" class="box1">
			<view class="box2">
				<view class="txtVal" v-for="(item, index) in list1" :key="item.title" @click="detailsBtn(item.id)">
					<view class="txt2">
						<view>0</view>
						<view style="margin-right: 10rpx">{{ index + 1 }}</view>
						<view class="">{{ item.title }}</view>
					</view> -->
		<!-- 关键词 -->
		<!-- 			<view class="txt3" style="display: flex; width: 500rpx">
						<view style="width: 100rpx">关键词:</view>
						<view>{{ item.keywords }}</view>
					</view>
				</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 {
			indexTab: 0,
			show: false,
			detailsShow: false,
			list: [],
			list1: [],
			detail: []
		};
	},

	onLoad() {
		that = this;
		this.getZhuanyezhishi();
		this.getgongzhuozhinan();
	},
	methods: {
		tabBtn(index) {
			this.indexTab = index;
		},
		// 法规详情
		detailsBtn(index) {
			console.log(index, 'index');
			that.getfeiyidetail(index);
			this.detailsShow = true;
		},
		navBtn() {
			this.show = true;
		},
		close() {
			this.show = false;
			// console.log('close');
		},
		//获取专业知识列表
		async getZhuanyezhishi() {
			let res = await this.$api.getfeiyibaike({
				model: '7',
				channel: '70',
				apikey: '649264'
			});
			console.log(res, '专业知识列表');
			that.list = res.data.pageList.data;
			console.log(that.list, '列表');
		},
		//获取工作指南列表
		async getgongzhuozhinan() {
			let res = await this.$api.getfeiyibaike({
				model: '7',
				channel: '74',
				apikey: '649264'
			});
			console.log(res, '工作指南');
			that.list1 = res.data.pageList.data;
			console.log(that.list, '指南列表');
		},
		//详情
		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 {
	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;
	border: 1px solid #563530;
}
.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;
}
.txt2 {
	width: 1200rpx;
	display: flex;
	font-size: 36rpx;
	align-items: center;
	color: #563530;
	letter-spacing: 0.1em;
}
.txt3 {
	color: #563530;
	letter-spacing: 0.1em;
	font-size: 24rpx;
}
.txtVal {
	width: 2000rpx;
	display: flex;
	justify-content: space-between;
	height: 180rpx;
	margin: auto;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px solid #ded1c5;
}
.caidan {
	margin-left: 10%;
	margin-top: 0;
	display: flex;
	width: 180rpx;
	cursor: pointer;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
.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;
}
.back {
	width: 100rpx;
	height: 100rpx;
}
.details_tit {
	margin-left: 60rpx;
	font-size: 50rpx;
	color: #563530;
	letter-spacing: 0.2em;
}
.muLv {
	width: 100%;
	height: 160rpx;
	/* display: flex; */
	justify-content: space-between;
	align-items: center;
}
</style>