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="projectBtn(index)">
						<image style="border-radius: 0px 0px 100px 100px; width: 90%; height: 98%" :src="item.img"></image>
					</view>
					<text class="title">{{ item.title }}</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>
		</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>
export default {
	data() {
		return {
			show: false,
			detailsShow: false,
			projectList: [
				{
					title: '沈氏漆线雕',
					img: 'https://www.xmqwzx.com.cn/xmfy/xmfy/xmml/201908/W020190828611283811392.jpg'
				},
				{
					title: '闽台送王船习俗',
					img: 'https://img1.baidu.com/it/u=4093092880,3787172119&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=499'
				},
				{
					title: '剪瓷雕',
					img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F111326%2F3af384c937ce442cb3aae53bee45b095.jpg%3Fmeipian-watermark%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTExMzI2LzNhZjM4NGM5MzdjZTQ0MmNiM2FhZTUzYmVlNDViMDk1LmpwZw%3D%3D%2Fnickname%2FeWpy%2Fuserid%2FMTExMzI2%2Fsign%2Fe4034ce792c72b619dbb8a386637afd9.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701593316&t=6e9331d4d960501b3b6651cb05a85e4b'
				},
				{
					title: '漆宝斋漆艺',
					img: 'https://img1.baidu.com/it/u=2241138695,3173725763&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=764'
				},
				{
					title: '仙岳山福德信俗',
					img: 'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1301/20/c7/17566666_17566666_1358685409100_mthumb.jpg'
				},
				{
					title: '讲古',
					img: 'https://img1.baidu.com/it/u=505223839,1816123938&fm=253&fmt=auto&app=138&f=JPG?w=401&h=814'
				},
				{
					title: '沈氏漆线雕',
					img: 'https://hbimg.b0.upaiyun.com/fa7bf70c03c48e5faf55a0df22f32f31e15a7aed3b7a5-UwCBBR_fw658'
				},
				{
					title: '闽台送王船习俗',
					img: 'https://img1.baidu.com/it/u=4093092880,3787172119&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=499'
				},
				{
					title: '剪瓷雕',
					img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F111326%2F3af384c937ce442cb3aae53bee45b095.jpg%3Fmeipian-watermark%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTExMzI2LzNhZjM4NGM5MzdjZTQ0MmNiM2FhZTUzYmVlNDViMDk1LmpwZw%3D%3D%2Fnickname%2FeWpy%2Fuserid%2FMTExMzI2%2Fsign%2Fe4034ce792c72b619dbb8a386637afd9.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701593316&t=6e9331d4d960501b3b6651cb05a85e4b'
				}
			]
		};
	},
	methods: {
		navBtn() {
			this.show = true;
		},
		projectBtn(index) {
			console.log(index);
			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%;
	height: 1280rpx;
	margin-left: 20%;
}
.container {
	position: relative;
	display: inline-block;
	margin-right: 20rpx;
	text-align: center;
}
.xq_box {
	position: absolute;
	top: 15%;
	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;
	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%;

	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>