feiYi/pages/index/feiYiGaiLan/feiYiGaiLan.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_gl.png"></image>
				</view>
				<view class="fy_xm">湖里·非遗项目</view>
			</view>
		</view>
		<view class="box">
			<scroll-view scroll-x="true" style="display: flex; white-space: nowrap">
				<view class="container" v-for="(item, index) in projectList" :key="item.index">
					<view class="mn_box" @click="zhantingDetails(index)">
						<image style="border-radius: 0px 0px 100px 100px; width: 90%; height: 98%" :src="item.thumbnail"></image>
					</view>
					<text class="title">{{ item.name }}</text>

					<view class="sanjiao"></view>
					<view class="sanjiao2"></view>
					<view class="banyuan"></view>
				</view>
			</scroll-view>
		</view>
		<!-- 详情 -->
		<view class="xq_box" v-if="detailsShow">
			<view class="xq_box2">
				<view class="back" @click="detailsShow = false">
					<image style="width: 100%; height: 100%" src="../../../static/img/icon_back@2x.png"></image>
				</view>
				<view class="ccr">传承人</view>
				<view class="top_tit">
					<u-parse :tagStyle="style" :content="detailsList.inheritor ? detailsList.inheritor : '暂无传承人'"></u-parse>
				</view>
				<view class="">
					<view class="jieshao">
						<view class="ccr">介绍</view>
						<u-parse :tagStyle="style" :content="detailsList.introduce"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<!-- 切换按钮 -->
		<!-- 	<view class="anNiu">
			<view class="anNiu_item">
				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x.png"></image>
				<view class="dd_1"></view>
				<view class="dd_2"></view>
				<view class="dd_3"></view>
				<view class="dd_4"></view>
			</view>
			<view class="anNiu_item">
				<view class="dd_2"></view>
				<view class="dd_3"></view>
				<view class="dd_4"></view>
				<view class="dd_1"></view>
				<image style="width: 120rpx; height: 120rpx" src="/static/img/Group 834@2x(1).png"></image>
			</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 {
			style: {
				// 字符串的形式
				span: 'font-weight: 700;color: #563530;font-size: 24px !important;font-family: nzgrRuyinZouZhangKai-Regular, nzgrRuyinZouZhangKai;'
			},
			id: '',
			show: false,
			detailsShow: false,
			projectList: [],
			detailsList: []
		};
	},

	onLoad() {
		that = this;
		this.zhantinglists();
	},
	methods: {
		navBtn() {
			this.show = true;
		},

		// 非遗概况项目
		zhantinglists() {
			this.$api.zhantinglists({}, function (res) {
				that.projectList = res.data;
			});
		},
		// 非遗概况项目详情
		zhantingDetails(index) {
			this.$api.zhantingDetails({ id: that.projectList[index].id }, function (res) {
				that.detailsList = res.data;
				console.log(that.detailsList, 1212);
			});
			this.detailsShow = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style>
.body {
	width: 100%;
	height: 1925rpx;
	padding-top: 100rpx;
	box-sizing: border-box;
}

.header {
	margin-left: 10%;
	width: 960rpx;
	height: 96rpx;
	align-items: center;
	display: flex;
}
.box {
	display: flex;
	align-items: center;
	width: 65%;
	/* overflow-x: scroll; */

	height: 1280rpx;
	margin-left: 20%;
}

.ccr {
	width: 300rpx;
	height: 80rpx;
	font-size: 48rpx;
	text-align: center;
	line-height: 80rpx;
	margin: auto;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.top_tit {
	width: 80%;
	height: 200rpx;
	overflow: scroll;
	cursor: pointer;
	margin: auto;
	font-size: 46rpx !important;
	color: #563530 !important;
	border-bottom: 1px solid #f8efe1;
}
.jieshao {
	width: 80%;
	height: 500rpx;
	overflow: scroll;
	margin: auto;
	margin-top: 30rpx;
	font-size: 36rpx;
	color: #563530;
}
.container {
	position: relative;
	display: inline-block;
	margin-right: 20rpx;
	text-align: center;
}
.xq_box {
	position: absolute;
	top: 12%;
	z-index: 2;
	width: 2200rpx;
	height: 1200rpx;
	margin-left: 25%;
	margin-top: 100rpx;
	border: 3px solid #563530;
	background-color: #eee6d9;
}
.xq_box2 {
	padding: 60rpx;
	overflow: scroll;
	width: 2180rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
	border: 1px solid #563530;
	box-sizing: border-box;
}
.back {
	width: 100rpx;
	height: 100rpx;
}
.mn_box {
	width: 350rpx;
	height: 740rpx;
	margin-left: 40rpx;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	cursor: pointer;
	box-sizing: border-box;
	background: url('/static/img/img_bk.png') no-repeat center;
	background-size: 100% 100%;
	border-radius: 10rpx 10rpx 10rpx 0rpx;
}
.title {
	color: #563530;
	margin-top: 20rpx;
	font-size: 36rpx;
}
.sanjiao {
	position: absolute;
	top: 28rpx;
	left: 68rpx;
	width: 0;
	height: 0;
	border-top: 40rpx solid #eee6d9;
	border-right: 40rpx solid transparent;
}
.sanjiao2 {
	width: 0;
	height: 0;
	top: 30rpx;
	left: 316rpx;
	position: absolute;
	border-top: 40rpx solid #eee6d9;
	border-left: 40rpx solid transparent;
}
.banyuan {
	width: 50rpx;
	height: 25rpx;
	position: absolute;
	top: 20rpx;
	left: 50%;
	border-radius: 0 0 50rpx 50rpx;
	background-color: #eee6d9;
}
.fybk_zc {
	left: 9%;
	top: 220rpx;
	display: flex;
	position: absolute;
}
.fybk_tit {
	width: 200rpx;
	height: 530rpx;
	text-align: center;
}
.fy_xm {
	width: 60rpx;
	height: 640rpx;
	letter-spacing: 0.5em;
	writing-mode: vertical-rl;
	color: #563530;
	padding-right: 20rpx;
	font-size: 40rpx;
	margin-top: 100rpx;
	border-right: 1px solid #563530;
}
.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;
}
.caidan {
	margin-left: 10%;
	cursor: pointer;
	display: flex;
	width: 180rpx;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
.anNiu {
	display: flex;
	justify-content: space-between;
	width: 680rpx;
	margin-left: 41%;
}
.anNiu_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 200rpx;
}
.dd_1 {
	width: 20rpx;
	height: 20rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_2 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_3 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
.dd_4 {
	width: 10rpx;
	height: 10rpx;
	background-color: #8a7d6d;
	border-radius: 50%;
}
</style>