minnan-tv/pages/index2/index2.vue

<template>
	<view class="box">
		<view class="time">
			<view class="">
				{{ today }}
			</view>
			<view style="margin-left: 2%">
				{{ currentTime }}
			</view>
		</view>
		<view class="img_logo">
			<image style="height: 160%;" mode="heightFix" src="/static/img/mnwhbhLOGO.png"></image>
			<image style="height: 100%;" mode="heightFix" src="/static/img/img_title@2x.png"></image>
		</view>
		<!-- Tab选项 -->

		<view class="top_tab">
			<view class="box_tab">
				<view @click="indexBtn" class="tab_item" tabindex="0">首页</view>
				<view @click="tabBtn(index)" class="tab_item" v-for="(item, index) in listTab" :key="item.title" :class="{ active: tabIdex == index }" tabindex="0">
					{{ item.title }}
				</view>
			</view>
		</view>
		<!-- 保护概况 -->

		<view class="js_box" v-show="tabIdex == 0">
			<!-- <view class="js_b" style="margin-left: 1%;"> -->
				<!-- <view class="js_tit">闽南精神</view> -->
				<!-- <commonItems :titList="titList" :projectList="projectList"></commonItems> -->
			<!-- </view> -->
			<!-- <view class="qiehuan">
				<view class="qh_btn" @click="leftBtn">
					<image class="img" src="../../static/img/left.png"></image>
				</view>
				<view class="qh_btn" @click="rightBtn">
					<image class="img" src="../../static/img/right.png"></image>
				</view>
			</view> -->
			<view class="" style="width: 82%; height: 22%; margin: auto;" v-show="wtTab == 0">
				<view class="bh_box">
					<view @click="wenzhangBtn(item.id)" v-for="item in protectionArticleList" :key="item.index" class="bh_item" tabindex="0">
						<view class="wt_img_box">
							<image class="img" :src="item.image"></image>
						</view>
						<view class="wt_tit">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<view class="aaaaaaaaaa"></view>
		</view>
		<!-- 闽南精神 -->
		<view v-show="tabIdex == 1" class="cb_box" style="width: 100%; height: 101%">
			<!-- <commonItems :titList="titList" :projectList="projectList"></commonItems> -->
			<view class="cb_box2">
				<!-- <view class="wt_tab">
					<view @click="wtTabBtn(index)" v-for="(item, index) in wtListTab" :key="item.title" class="wt_tab_item" :class="{ active2: wtTab == index }">
						{{ item.title }}
					</view>
				</view> -->
				<view class="" style="width: 100%; height: 22%" v-show="wtTab == 0">
					<view class="wt_box3">
						<view @click="wenzhangBtn(item.id)" v-for="item in spiritArticleList" :key="item.index" class="wt_item" tabindex="0">
							<view class="wt_img_box">
								<image class="img" :src="item.image"></image>
							</view>
							<view class="wt_tit">{{ item.title }}</view>
						</view>
					</view>
				</view>
				
			</view>

			<!-- 	<view class="qiehuan5">
				<view class="qh_btn">
					<image class="img" src="/static/img/left.png"></image>
				</view>
				<view class="qh_btn">
					<image class="img" src="/static/img/right.png"></image>
				</view>
			</view> -->
			<view class="aaaaaaaaaa" style="height: 35%"></view>
		</view>
		<!--古早话仙  -->
		<view class="wb_box" v-if="tabIdex == 2">
			<view class="wb_box_2">
				<view class="wbxy_tab">
					<view @click="gzhxTabBtn(index)" v-for="(item, index) in gzhxTab" :key="item.title" class="mny_tab_item2" :class="{ active2: gzhxIndex == index }" tabindex="0">
						{{ item.title }}
					</view>
				</view>
				<view class="" style="width: 100%; height: 85%">
					<view class="mny_box3">
						<view v-for="item in gzhxArticleList" :key="item.index" class="mny_box_item" @click="gzhxDetailBtn(item.id)" tabindex="0">
							<view class="mny_img_box">
								<image :src="item.image" mode="aspectFill" class="img"></image>
							</view>
							<view class="kc_img_tit">{{ item.title }}</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 风俗民情 -->
		<view class="ms_box" v-show="tabIdex == 3">
			<view class="js_b">
				<view v-if="fsmqProjectList.length > 0 ">
					<view v-for="(item,index) in fsmqProjectList" :key="index">
						<view class="js_tit">{{ item.name }}</view>
						<view class="ms_harder_box">
							<view class="ms_box_banner">
								<view class="ms_box_item">
									<view @click="detailsBtn(item1)" class="ms_banner_item" v-for="(item1, index1) in item.content_list" :key="index1"  tabindex="0">
										<view class="ms_banner_bgimg">
											<view class="ms_banner_img">
												<image class="ms_img" :src="item1.image" mode="aspectFill"></image>
											</view>
										</view>
										<view class="ms_item_tit">{{ item1.title }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			<!-- <view class="wb_box_2">
				<view class="wbxy_tab">
					<view @click="wbxyTabBtn(index)" v-for="(item, index) in wbxyTab" :key="item.title" class="mny_tab_item2" :class="{ active2: wbxyIndex == index }">
						{{ item.title }}
					</view>
				</view>
				<view class="" style="width: 100%; height: 85%" v-show="wbxyIndex == 1">
					<view class="mny_box3">
						<view v-for="item in keCheng" :key="item.index" class="mny_box_item">
							<view class="mny_img_box">
								<image :src="item.img" class="img"></image>
							</view>
							<view class="kc_img_tit">免费课程</view>
						</view>
					</view>
					<view class="wbxy_btm">
						<view class="jz_box_tab2">
							<view @click="wbxyBtm(index)" class="btm_tab2" v-for="(item, index) in wbxyfenLei" :key="item.index" :class="{ active2: wbxyFeiLei == index }">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 100%; height: 65%" v-show="wbxyIndex == 0">
					<view class="wbxy_item" style="">
						<view class="mjtj_box" @click="mjxqBtn(index)" v-for="(item,index) in mjtj" :key="item.id">
							<view class="mz">{{ item.title }}</view>
							<view class="zj_img">
								<image class="img" :src="item.image"></image>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 		<view class="qiehuan6">
				<view class="qh_btn">
					<image class="img" src="/static/img/left.png"></image>
				</view>
				<view class="qh_btn">
					<image class="img" src="/static/img/right.png"></image>
				</view>
			</view> -->
			<!-- <view class="aaaaaaaaaa"></view> -->
		</view>
		<!-- 文保学院 -->
		<!-- 保护传承 -->
		<view class="fy_box" v-show="tabIdex == 4">
			<view class="fy_box2">
				<view class="bhcc_tab">
					<view @click="bhccTabBtn(index)" v-for="(item, index) in bhccTab" :key="item.title" class="mny_tab_item2" :class="{ active3: bhccIndex == index }" tabindex="0">
						{{ item.title }}
					</view>
				</view>
			
			
				<view class="" style="display: flex; justify-content: space-around; width: 95%; height: 100%; margin: 2% auto 0 auto" v-if="bhccIndex === 0">
					
					<view class="jz_jj">
						<view class="jj_top">
							<view style="font-size: 14px; margin-bottom: 1%">闽南建筑文化简介</view>
							<view class="animate-box">
								<view class="animate">
									闽南建筑风格独特。闽南建筑风格以红墙、红瓦、燕尾脊为特征，给人以鲜明、热烈的视觉感受。建筑中大量使用装饰性构件，如砖雕、石雕、木雕等，这些雕刻工艺精湛，图案丰富，具有很高的艺术价值。同时，建筑内部的布局和装饰也充满了闽南文化的特色，如“出砖入石”的墙体、精细的石雕和木雕、富有地方特色的彩绘等。
									闽南建筑融合了多元文化。闽南地区历史上是中原移民的重要聚居地，同时又与东南亚地区交往密切，因此闽南建筑文化中融合了中原文化、东南亚文化等多元文化因素。例如，闽南建筑的屋顶形式、装饰风格等受到中原文化的影响；而建筑中的雕刻艺术、建筑材料等则体现了东南亚文化的特色。这种多元文化的融合使得闽南建筑具有更加丰富的文化内涵
									通过了解这些闽南建筑文物的特点，人们能够更好地认识和了解闽南文化。同时，这些文物也是传承和弘扬闽南文化的重要载体。在今天的社会中，随着城市化进程的加速和传统文化的逐渐消失，保护和传承这些宝贵的文化遗产显得尤为重要。
								</view>
							</view>

							<!-- 饼图 -->
							<view class="" style="width: 100%; height: 100%; margin-top: 4%; display: flex; justify-content: space-around">
								<view class="charts-box">
									<qiun-data-charts :tooltipShow="false" type="pie"  :opts="opts" :chartData="chartData" />
									<view class="csbt" style="">厦门</view>
								</view>
								<view class="charts-box">
									<qiun-data-charts :tooltipShow="false" type="pie" :opts="opts2" :chartData="chartData2" />
									<view class="csbt" style="">各区统计</view>
								</view> 
								<!-- <view class="charts-box">
									<qiun-data-charts :tooltipShow="false" type="pie" :opts="opts3" :chartData="chartData3" />
									<view class="csbt" style="">泉州</view>
								</view> -->
							</view>
						</view>
						
					</view>
					<view class="" style="width: 48%; height: 80%">
						<!-- <view class="sw_box"> -->
							<!-- <u-swiper
								:list="swiperList"
								imgMode="aspectFill"
								height="100%"
								:indicator="true"
								:autoplay="true"
								:circular="true"
								indicatorStyle="bottom: 10px"
								indicatorMode="dot"
								indicatorActiveColor="#8e6c4f"
								indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
							></u-swiper> -->
							<!-- <view class="jj_btm"> -->
								<view class="global" @click="mapBtn" tabindex="0">
									<image  style="border-radius: 5px;width: 100%;height: 130%;" src="/static/img/map.png" mode="aspectFill"></image>
								</view> 
							<!-- </view> -->
						<!-- </view> -->
						<!-- 地图 -->
						
						<!-- 可能资源加载过多导致闪退 -->
						<scroll-view scroll-y="true" style="width: 100%; height: 66%; margin-top: 2%;">
							<view style="display: flex; flex-wrap: wrap;">
								<view class="container" @click="tabulationBtn(item.id)" v-for="(item, index) in imgList" :key="item.index" tabindex="0">
									<view class="mn_box">
										<image style="width: 100%; height: 100%" :lazy-load="true" :src="item.image" mode="aspectFill"></image>
									</view>
									<text class="mn_text">{{ item.title }}</text>
								</view>
							</view>
							
						</scroll-view>
					</view>
				</view> 
				<view class="fy_banner" v-if="bhccIndex === 1">
					<view class="fy_tit">非遗传承</view>
					<view class="fy_txt">以“闽南人”与“闽南建筑文化”为纽带构建三种精神：闽南精神、闽台精神、海丝精神体现闽南“魂”</view>
					<view class="fy_btm">
						<view @click="fyXiangQing(index1)" v-for="(item, index1) in fyList" :key="index1" class="fy_item" tabindex="0">
							<view class="fy_img">
								<image :src="item.img" class="img" />
							</view>
							<view class="fy_xm">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="aaaaaaaaaa"></view> -->
		</view>
		<!-- 非遗传承end -->
		<!--闽南时尚 -->
		<view class="fashion_box" v-if="tabIdex == 5">
				<!-- <view class="js_tit">礼仪习俗</view> -->
				<!-- <commonItems :projectList="projectList"></commonItems> -->
				<view class="" style="width: 100%; height: 80%;">
					<view class="mny_box3">
						<view v-for="item in mnMusicList" :key="item.index" class="mny_box_item" @click="mcMusicDetailBtn(item.id)" tabindex="0">
							<view class="mny_img_box">
								<image :src="item.image" mode="aspectFill" class="img"></image>
							</view>
							<view class="kc_img_tit">{{ item.title }}</view>
						</view>
					</view>
				</view>

			<!-- 	<view class="qiehuan2">
				<view class="qh_btn">
					<image class="img" src="/static/img/left.png"></image>
				</view>
				<view class="qh_btn">
					<image class="img" src="/static/img/right.png"></image>
				</view>
			</view> -->
			<!-- <view class="aaaaaaaaaa"></view> -->
		</view>
		<!--闽南时尚end -->
		<!-- 文化之旅 -->
		<!-- <view v-show="tabIdex == 6" style="width: 100%; height: 67%;"> -->
			<view class="mny_box" v-show="tabIdex == 6">
				<view class="mny_box2">
					<view class="journey_tab">
						<view @click="journeyTabBtn(index)" v-for="(item, index) in journeyTabList" :key="item.id" class="mny_tab_item2" :class="{ active5: journeyIndex == index }" tabindex="0">
							{{ item.title }}
						</view>
					</view>
					<view class="mny_box3" v-if="journeyTabList.length > 0">
						<view v-for="item in journeyList" :key="item.index" class="mny_box_item" @click="journeyDetailBtn(item.id)" tabindex="0">
							<view class="mny_img_box">
								<image :src="item.image" mode="aspectFill" class="img"></image>
							</view>
							<view class="kc_img_tit">{{ item.title }}</view>
						</view>
					</view>	
					<!-- <view class="bbbbbbbb"></view> -->
				</view>
				
			</view>
			<!-- <view class="qiehuan4">
				<view class="qh_btn2"  @click="mnPaging2">
					<image class="img" src="/static/img/left.png"></image>
				</view>
				<view class="qh_btn2" @click="mnPaging">
					<image class="img" src="/static/img/right.png"></image>
				</view>
			</view> -->
			
		<!-- </view> -->
		<!-- 闽南语 -->
		<!-- 村史文化 -->
		<view v-show="tabIdex == 7" class="cs_box">
			<view class="cs_left">
				<view class="cs_logo">
					<image class="img" src="/static/img/cswh.png" mode="aspectFit"></image>
				</view>
				<view class="cs_txt">
					保护历史记忆和文化遗产:村更馆作为一个专门 收藏、保存和展示村庄历史、文化和传统的场所，具 有重要的保护历史记忆和文化遗产的意义。它收集、
					整理和展示各种文物、文献、照片、音频和视频等材 料，记录和展示村庄的历史、风土人情和重要事件， 使这些珍贵的文化资源得以保存，并传承给后代.
				</view>
			</view>
			<view class="cs_center">
				<view v-if="!villageUrl" style="display: flex; justify-content: center; margin-top: 30%; font-size: 40px; color: #a07f5a;">
					暂无内容
				</view>
				<view style="width: 100%; height: 100%;" v-else>
					<iframe 
						:src="villageUrl"
						frameborder="0"
						width="100%"
						height="100%"
						allowfullscreen>
					</iframe>
				</view>
				
			</view>
			<view class="cs_right">
				<view class="right_top">
						<view class="cs_tj" v-for="(item,index) in villageList" :key="index" @click="clickVillage(item)" tabindex="0">{{ item.name }}</view>
				</view>
				<!-- <view class="right_top">
					<image class="top_img" src="../../static/img/wz1.png"></image>
					<view class="pos"></view>
					<view class="cs_tj">村史推荐</view>
				</view>

				<view class="right_btm">
					<image class="btm_img" src="../../static/img/wz1.png"></image>
					<view class="pos2"></view>
					<view class="cs_tj2">村史资讯</view>
				</view> -->
			</view>
		</view>
		<!-- 村史文化 -->
	</view>
</template>

<script>
let that;

export default {
	data() {
		return {
			music: false,
			page: 1,
			pageSize: 4,
			size:4,
			geQuId: 22,
			main_body_id: '',
			currentTime: '',
			today: '',
			wbxyIndex: 0,
			tabIdex: null,
			btmtab: 0,
			mnyTab: 0,
			wbxyFeiLei: 0,
			wtTab: 0,

			listTab: [
				{
					title: '保护概况'
				},
				{
					title: '闽南精神'
				},
				{
					title: '古早话仙'
				},
				{
					title: '民俗风情'
				},
				{
					title: '保护传承'
				},
				{
					title: '闽南时尚'
				},
				{
					title: '文化之旅'
				},
				{
					title: '厝边记忆'
				}
			],

			wbxyTab: [
				{
					title: '名家推荐'
				},
				{
					title: '课程'
				}
			],
			gzhxIndex:0,
			gzhxTab: [
				{	
					title: '闽南童谣',
				},
				{
					title: '讲古'
				},
				{
					title: '方言'
				},
			],
			wbxyfenLei: [
				{
					title: '分类1'
				},
				{
					title: '分类2'
				},
				{
					title: '分类3'
				}
			],
			fyList: [
				{
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_1.png',
					title: '非遗项目',
					path: '/pages/index2/fY_xiangQing/fY_xiangQing'
				},
				{
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_2.png',
					title: '传承人',
					path: '/pages/index2/fY_xiangQing/chuanChenRen'
				},
				{
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_3.png',
					title: '非遗产品',
					path: '/pages/index2/fY_xiangQing/chanPin'
				},
				{
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_4.png',
					title: '非遗活动',
					path: '/pages/index2/fY_xiangQing/houDong'
				}
			],
			mnyListTab: [],
			wtListTab: [
				{
					title: '文章'
				},
				{
					title: '相册'
				},
				{
					title: '视频'
				}
			],
			albumList: [] /* 相册 */,
			// 保护概况
			protectionArticleList:[
				
			],
			// 闽南精神
			spiritArticleList:[
			
			],
			articleList: [
				// {
				// 	img: '/static/img/wz1.png',
				// 	title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
				// },
				// {
				// 	img: '/static/img/wz2.png',
				// 	title: '200数千厝边共赏本土文化盛宴 '
				// },
				// {
				// 	img: '/static/img/wz3.png',
				// 	title: '闽南神韵'
				// },
				// {
				// 	img: '/static/img/wz4.png',
				// 	title: '百姓大舞台'
				// }
			] /* 文章 */,
			
			// projectList: [],
			// titList: [],

			// 风俗民情
			fsmqTitList:[

			],
			fsmqProjectList: [
	
			],
			

			tongYaoList: [],
			jianZhuList: [],
			buildList: [],
			keCheng: [

			],
			gzhxArticleList: [],
	
			imgList:[
		
			],
			swiperList: [

			],
			chartData: {
				series: [
					{
						data: [
							{ name: '国家级', value: 48 },
							{ name: '省级', value: 57 },
							{ name: '市级', value: 88 },
							{ name: '县级', value: 35 },
							{ name: '区级', value: 54 },
							// { name: '未定级', value: 1743 }
						]
					}
				]
			},
			opts: {
				color: ['#e9a08b',  '#b65447','#dd7f66', '#dd924c', '#eec976', '#93b494'],
				padding: [0, 0, 0, 0],
				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#b65447',
				legend: {
					show: true,
					position: 'bottom', //图例相对画布的显示位置，可选值：'bottom','top','left','right'
					float: 'center',
					fontSize: 8, // 字体大小
					fontColor: '#b65447',
					backgroundColor: 'rgba(0,0,0,0)', // 图例背景颜色
					borderColor: 'rgba(0,0,0,0)', // 图例边框颜色
					borderWidth: 0, // 图例边框线宽
					hiddenColor: '#CECECE', // 点击隐藏时图例标识及文字颜色
					itemGap: 5, // 各个分类（类别）之间的间隔
					lineHeight: 12
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			// 漳州图
			chartData2: {
				series: [
					{
						data: [
							{ name: '湖里区', value: 126 },
							{ name: '思明区', value: 178 },
							{ name: '海沧区', value: 478 },
							{ name: '鼓浪屿', value: 151 },
							{ name: '集美区', value: 220 },
							{ name: '同安区', value: 503 },
							{ name: '翔安区', value: 365 },
						]
					}
				]
			}, 
			opts2: {
				color: ['#e9a08b',  '#b65447','#dd7f66', '#dd924c', '#eec976', '#93b494'],
				padding: [0, 0, 0, 0],

				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#b65447',
				legend: {
					show: true,
					fontSize: 8, // 字体大小
					fontColor: '#b65447',
					backgroundColor: 'rgba(0,0,0,0)', // 图例背景颜色
					borderColor: 'rgba(0,0,0,0)', // 图例边框颜色
					borderWidth: 0, // 图例边框线宽
					hiddenColor: '#CECECE', // 点击隐藏时图例标识及文字颜色
					itemGap: 5, // 各个分类（类别）之间的间隔
					lineHeight: 12
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			// 泉州图
			chartData3: {
				series: [
					{
						data: [
							{ name: '国家级', value: 44 },
							{ name: '省级', value: 104 },
							{ name: '市区县级', value: 793 }
						]
					}
				]
			},
			opts3: {
					color: ['#e9a08b',  '#b65447','#dd7f66', '#dd924c', '#eec976', '#93b494'],
				padding: [0, 0, 0, 0],
				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#b65447',
				legend: {
					show: true,
					fontSize: 8, // 字体大小
					fontColor: '#b65447',
					backgroundColor: 'rgba(0,0,0,0)', // 图例背景颜色
					borderColor: 'rgba(0,0,0,0)', // 图例边框颜色
					borderWidth: 0, // 图例边框线宽
					hiddenColor: '#CECECE', // 点击隐藏时图例标识及文字颜色
					itemGap: 5, // 各个分类（类别）之间的间隔
					lineHeight: 12
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			mjtj: [],
			// 保护传承
			bhccTab:[
				{title:'文物'},
				{title:'非遗'},
				// {title:'老字号'},
				// {title:'自然遗产'},
			],
			bhccIndex: 0,
			mnMusicList:[

			],
			journeyTabList:[
				{title:'非遗旅游路线'},
				{title:'红色文化旅游路线'},
				{title:'美食旅游路线'},
				{title:'文旅融合示范点'},
			],
			journeyIndex:0,
			journeyList:[],
			villageList:[],
			villageUrl:'https://cun-houpu.wenlvti.net',
			msProjectList:[]
		};
	},
	watch: {
		currentTime(newVal, oldVal) {
			if (newVal === oldVal) return;
			this.currentTime = newVal;
		},
		today(newVal, oldVal) {
			if (newVal === oldVal) return;
			this.today = newVal;
		}
	},
	onReady() {
		// this.getServerData();
	},
	mounted() {
		this.updateTime();
		setInterval(() => {
			this.updateTime();
		}, 1000);
	},

	onLoad(o) {
		that = this;
		this.tabIdex = o.id;
		this.main_body_id = this.$db.get('main_body_id');
		this.tabBtn(o.id);
	},
	methods: {
	
		// 顶部导航 
		tabBtn(id) {
			console.log('id',id);
			
			this.btmtab = 0;
			this.tabIdex = id;
			if (this.tabIdex == 0 || id == 0) {
				console.log('触发保护概况');
				this.$api.getContentList(
					{
						model_id: 17, /* 模型id */
						main_body_id: 1,
						main_body_column_id:'255,256,283,284',
						page: this.page,
						pageSize: this.pageSize
					},
					function (res) {
						that.protectionArticleList = res.data.list;
						// console.log(that.projectList, '	that.that.projectList');
					}
				);
			}else if(this.tabIdex == 1 || id == 1){
				console.log('闽南精神');
				this.minnanSpirit();
				// this.$api.getContentList(
				// 	{
				// 		model_id: 17 /* 模型id */,
				// 		main_body_id: 1,
				// 		page: 1,
				// 		pageSize: 12
				// 	},
				// 	function (res) {
				// 		that.imgList=res.data
				// 		console.log(res, '	resresres');
				// 	}
				// );
			}else if (this.tabIdex == 2 || id == 2) {

				// // 古早话仙
				this.$api.getContentList(
					{
						model_id: 16 /* 模型id */,
						main_body_id: 1,
						main_body_column_id:'189,190,191,291',
						page: 1,
						pageSize: 12
					},
					function (res) {
						that.gzhxArticleList=res.data.list
						console.log(res, '	resresres');
					}
				);
			}else if (this.tabIdex == 3 || id == 3) {
				// 民俗风情
				this.$api.getMainBodyColumnContentList(
					{
						model_id: 4 /* 模型id */,
						main_body_id: 1,
						main_body_column_id:'8,9,246,248'
					},
					function (res) {
						// that.mjtj = res.data[1].content_list;
						// console.log(that.mjtj, '名家推荐');
						that.fsmqProjectList = res.data.list
					}
				);
			}else if (this.tabIdex == 4 || id == 4) {
				// 保护传承
				this.$api.getContentList(
					{
						model_id: 1 /* 模型id */,
						main_body_id: 1,
						page: 1,
						pageSize: 12
					},
					function (res) {
						that.imgList=res.data.list
					}
				);
				
			}else if (this.tabIdex == 5 || id == 5) {
				// 闽南时尚
				this.$api.getContentList(
					{
						model_id: 16 /* 模型id */,
						main_body_id: 1,
						page: '1',
						pageSize: '10'
					},
					function (res) {
						console.log(res, '触发');
						that.mnMusicList = res.data.list;
						// that.projectList = res.data;
						// console.log(that.projectList, '民俗宗教');
					}
				);
			}else if (this.tabIdex == 6 || id == 6) {
				// 文化之旅
				let i = 0;
				this.$api.getContentList(
					{
						model_id: 17 /* 模型id */,
						main_body_id: 1,
						main_body_column_id:275,
						page: 1,
						pageSize: 12
							
					},
					function (res) {
						that.journeyList = res.data.list;
					}
				);
			
			}else if (this.tabIdex == 7 || id == 7) {
				// 厝边记忆
				this.$api.getVillageList(
					{main_body_id: 1},
					function (res) {
						let villageList = res.data;
						// 筛选出有url的数据
						villageList = villageList.filter(item => item.url);
						that.villageList = villageList
						// console.log(that.albumList, 'albumList');
					}
				)	
			}
		},
		// 闽南精神
		minnanSpirit() {
			this.$api.getContentList(
				{
					model_id: 3 /* 模型id */,
					main_body_id: 1,
					page: this.page,
					pageSize: 6
				},
				function (res) {
					that.spiritArticleList = res.data.list;
					// console.log(that.projectList, '	that.that.projectList');
				}
			);
		},
		// 古早话仙 子栏目点击
		gzhxTabBtn(i) {
			this.gzhxIndex = i;
			let params = {}
			if(i==0){
				params = {
					model_id: 16 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:'189,190,191,291',
					page: 1,
					pageSize: 12
				}
			}else if(i==1){
				params = {
					model_id: 16 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:'187',
					page: 1,
					pageSize: 12
				}	
			}else if(i==2){
				params = {
					model_id: 5 /* 模型id */,
					main_body_id: 1,
				}	
			}
			this.$api.getContentList(
				params,
				function (res) {
					that.gzhxArticleList=res.data.list
					console.log(res, '	resresres');
				}
			);
		},
		// 古早话仙详情
		gzhxDetailBtn(id){
			uni.navigateTo({
				url: '/pages/index2/wenZhangXQ/videoPlay?id=' + id
			});
		},

		// 保护传承，子栏目点击
		bhccTabBtn(i){
			this.bhccIndex = i;	
			
		},

		// 闽南时尚
		mcMusicDetailBtn(id){
			uni.navigateTo({
				url: '/pages/index2/wenZhangXQ/videoPlay?id=' + id
			});	
		},

		// 非遗详情
		fyXiangQing(i) {
			console.log('this.fyList[i].path',this.fyList[i].path);
			
			uni.navigateTo({
				url: this.fyList[i].path
			});
		},
		// 文章详情
		wenzhangBtn(id) {
			uni.navigateTo({
				url: '/pages/index2/fY_xiangQing/xiangMuXQ?id=' + id
			});
		},
		// 相册详情
		albumBtn(i) {
			console.log(this.albumList, 'this.albumList');
			uni.navigateTo({
				url: '/pages/index2/fY_xiangQing/xiangMuXQ?id=' + this.albumList[i].id
			});
		},
		// 名家详情
		mjxqBtn(i){
			uni.navigateTo({
				url: '/pages/index2/fY_xiangQing/xiangMuXQ?id=' + this.mjtj[i].id
			});
		},
		// 首页
		indexBtn() {
			uni.navigateTo({
				url: '/pages/index/index?music=' + this.music
			});
		},
		// 闽南语分页
		mnPaging(){
			this.size+=4
			this.$api.getMainBodyColumnContentList(
				{
				
					model_id: 5 /* 模型id */,
					main_body_id: 5,
					size:this.size
				},
				function (res) {
					if(that.tongYaoList.length==res.data[that.mnyTab].content_list.length){
						uni.showToast({
							title: '没有更多了',
							icon: 'error'
						});
						
						return
					}
						
					that.tongYaoList = res.data[that.mnyTab].content_list;
					
						
				}
			);
		},
		// 闽南语分页
		mnPaging2(){  
			this.size=4
			this.$api.getMainBodyColumnContentList(
				{
				
					model_id: 5 /* 模型id */,
					main_body_id: 5,
					size:this.size
				},
				function (res) {
					if(that.tongYaoList.length==res.data[that.mnyTab].content_list.length){
						uni.showToast({
							title: '没有更多了',
							icon: 'error'
						});
						return
					}					
					that.tongYaoList = res.data[that.mnyTab].content_list;
					
						
				}
			);
		},
		// 闽南语tab
		mnyTabBtn(i) {
			this.mnyTab = i;
			this.$api.getMainBodyColumnContentList(
				{
					// id: that.mnyListTab[i].id,
					model_id: 5 /* 模型id */,
					main_body_id: 5
				},
				function (res) {
					that.tongYaoList = res.data[i].content_list;
				
				}
			);
		},
		// 童谣详情
		nurseryBtn(i) {
			this.$api.getContentDetails(
				{
					main_body_id: '5',
					id: this.tongYaoList[i].id
				},
				function (res) {
					console.log(res, '音频');
					if (res.data.video != null && res.data.content != null) {
						uni.navigateTo({
							url: '/pages/index2/wenZhangXQ/videoPlay?id=' + res.data.id
						});
					}
					if (res.data.content != null && res.data.video == null) {
						uni.navigateTo({
							url: '/pages/index2/fY_xiangQing/xiangMuXQ?id=' + res.data.id
						});
					}
				}
			);
		},

		// 文化之旅 子栏目点击
		journeyTabBtn(i){
			this.journeyIndex = i;
			let params = {}
			if(i==0){
				params = {
					model_id: 17 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:275,
					page: 1,
					pageSize: 12
				}
			}else if(i==1){
				params = {
					model_id: 17 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:276,
					page: 1,
					pageSize: 12
				}	
			}else if(i==2){
				params = {
					model_id: 17 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:277,
					page: 1,
					pageSize: 12
				}	
			}else if(i==3){
				params = {
					model_id: 17 /* 模型id */,
					main_body_id: 1,
					main_body_column_id:278,
					page: 1,
					pageSize: 12
				}	
			}
			this.$api.getContentList(
				params,
				function (res) {
					that.journeyList = res.data.list
				}
			);
		},
		// 文化之旅详情
		journeyDetailBtn(id){
			uni.navigateTo({
				url: '/pages/index2/fY_xiangQing/xiangMuXQ?id=' + id
			});	
		},
		
		// 厝边舞台
		wtTabBtn(i) {
			this.wtTab = i;
			if (i == 1) {
				this.$api.getContentList(
					{
						model_id: 6 /* 模型id */,
						main_body_id: 5,
						type: '4',
						page: '1',
						pageSize: '10'
					},
					function (res) {
						that.albumList = res.data;
						console.log(res, '相册');
					}
				);
			}
		},

		// 点击村落
		clickVillage(item){
			console.log(item);
			this.villageUrl = item.url;
			
		},
		wbxyTabBtn(i) {
			this.wbxyIndex = i;
		},
		wbxyBtm(i) {
			this.wbxyFeiLei = i;
		},
		vidoBtn() {
			uni.navigateTo({
				url: '/pages/index2/wenZhangXQ/videoPlay'
			});
		},
		leftBtn() {
			this.page--;
			if (this.page == this.projectList.length - 4) {
				uni.showToast({
					title: '没有更多了',
					icon: 'error'
				});
				that.page = that.page + 1;
				return;
			}
			this.minnanSpirit();
		},
		rightBtn() {
			this.page++;
			this.$api.getContentList(
				{
					model_id: 3 /* 模型id */,
					main_body_id: 5,
					page: this.page,
					pageSize: this.pageSize
				},
				function (res) {
					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多了',
							icon: 'error'
						});
						that.page = that.page - 1;

						return;
					}
					that.projectList = res.data;
				}
			);
		},
		mapBtn() {
			uni.navigateTo({
				url: '/pages/index2/JZ_xiangQing/mapPage'
			});
		},
	
		// 底部推荐列表
		tabulationBtn(id){
			uni.navigateTo({
				url: '/pages/index2/JZ_xiangQing/mapPage?id='+id
			});
		},
		// 图片预览
		// clickImg(i) {
		// 	try {
		// 		uni.previewImage({
		// 			urls: this.imgList,
		// 			current: this.imgList[i]
		// 		});
		// 	} catch (error) {
		// 		console.error('预览图片时发生错误:', error);
		// 		// 这里可以添加更友好的错误提示给用户
		// 		that.$common.errorToShow('图片预览失败');
		// 	}
		// },
		// 获取时间
		updateTime() {
			const now = new Date();
			let hours = now.getHours();
			let minutes = now.getMinutes();
			minutes = ('0' + minutes).slice(-2);
			this.currentTime = hours + ':' + minutes;

			let month = now.getMonth() + 1;
			let day = now.getDate();
			month = ('0' + month).slice(-2);
			this.today = month + '月' + day + '日';
		},
		// 点击民俗
		detailsBtn(item1) {
			uni.navigateTo({
				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${item1.id}`
			});
		}
	}
};
</script>

<style>

.aaaaaaaaaa {
	position: absolute;
	/* z-index: -1; */
	bottom: 0;
	width: 100%;
	height: 45%;
	background: linear-gradient(180deg, rgba(240, 235, 222, 0) 0%, rgba(240, 235, 222, 0.5), #f0ebde 70%, #f0ebde 100%);
}
.bbbbbbbb {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(180deg, rgba(240, 235, 222, 0) 0%, rgba(240, 235, 222, 0.5), #f0ebde 70%, #f0ebde 100%);
}
:deep(.amap-mcode) {
	display: none !important;
}

.active {
	color: #ffffff !important;
	background-color: #aa734d !important;
	border-radius: 50rpx;

}
.active2, .active3, .active4, .active5   {
	width: 480rpx;
	/* height: 140rpx; */
	color: #ffffff  !important;
	background: #aa734d  !important;
}
:deep(.u-swiper-indicator__wrapper__dot--active) {
	width: 5px !important;
}
:deep(.amap-container) {
	border-radius: 5px !important;
}
.box {
	width: 100%;
	height: 100vh;
	/* background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/img_mnjs.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed; */
	margin: 0;
}
.time {
	width: 15%;
	display: flex;
	align-items: center;
	position: absolute;
	right: 3%;
	top: 6%;
	color: #ffffff;
	letter-spacing: 0.1em;
	/* font-size: 52rpx; */
	z-index: 100;
}
.img {
	width: 100%;
	height: 100%;
}
.img_logo {
	/* width: 8%; */
	height: 6%;
	/* background: url('/static/img/img_title@2x.png') no-repeat center; */
	/* background-size: contain; */
	margin-left: 5%;
	position: relative;
	z-index: 100;
	top: 5%;
	display: flex;
	align-items: center;
}

.top_tab {
	position: absolute;
	z-index: 99;
	top: 0;
	width: 100%;
	height: 23%;
	background: linear-gradient(360deg, rgba(142, 108, 79, 0) 0%, rgba(142, 108, 79, 0.79) 80%, rgba(142, 108, 79, 0.79) 100%);
}

.box_tab {
	position: relative;
	top: 60%;
	z-index: 999;
	width: 87%;
	height: 25%;
	display: flex;
	margin: auto;
	/* margin-top: 7%; */
	justify-content: space-between;
}
.tab_item {
	width: 25%;
	margin-left: 1%;
	font-size: 16px;
	/* line-height: 36px; */
	color: #973b1f;
	/* 垂直居中 */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rpx;

	/* color: #ffffff; */
}
.tab_item2 {
	width: 25%;
	text-align: center;
	margin-left: 1%;
	font-size: 15px;
	line-height: 30px;
	color: #ffffff;
	border-radius: 50rpx;
	/* background-color: rgba(0, 0, 0, 0.3); */
}
.js_box {
	position: relative;
	width: 100%;
	height: 81%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/img_mnjs2.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	padding-top: 10%;
	margin-top: -3%;
	
	z-index: 1;
	overflow: hidden;
}
.js_b {
	width: 100%;
	height: 100%;
	margin-top: 3%;
}
.jz_box {
	
	position: fixed;
	margin-top: -3%;
	/* overflow: hidden; */
	width: 100%;
	height: 99%;
	z-index: 98;
	background: linear-gradient(360deg, rgba(172, 147, 123, 0.2) 0%, rgba(172, 147, 123, 0.79) 80%, rgba(172, 147, 123, 0.79) 100%);
}
.js_tit {
	margin-left: 14%;
	margin-bottom: 1%;
	font-size: 1.6vw;
	color: #8e6c4f;
	letter-spacing: 0.2em;
}
.global {
	width: 100%;
	height: 30%;
	border: #99664c solid 3px;
	border-radius: 10px;
	overflow: hidden;
}
.animate-box {
	width: 95%;
	height: 35%;
	line-height: 18px;
	border-radius: 5px;
	text-indent: 2em;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.08) 100%);
	overflow: hidden;
}

.animate {
	animation: 40s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

@-webkit-keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

.csbt {
	/* position: absolute; */
	/* bottom: -4%; */
	/* left: 40%; */
	font-size: 12px;
}
.jz_tab {
	display: flex;
	align-items: center;
	width: 45%;
	height: 8%;
	position: absolute;
	top: 17%;
	left: 32%;
	margin-top: 1.5%;
	z-index: 1;
}
.jz_box_tab {
	position: relative;
	top: 80%;
	left: 30%;
	width: 40%;
	height: 10%;
	display: flex;
	justify-content: space-around;
}
.btm_tab {
	width: 16%;
	height: 65%;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	line-height: 25px;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.3);
}
.jz_box_tab2 {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
}
.mn_text{
	position: relative;
	top: -20%;
	display: flex;
	justify-content: center;
	font-size: 10px;
	color: #ffffff;
}
.btm_tab2 {
	width: 20%;
	height: 100%;
	color: #ffffff;
	font-size: 10px;
	line-height: 30px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 100px;
	opacity: 1;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.fy_box {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 重要！确保内容高度至少为一屏 */
  z-index: 1;
  overflow: hidden;
}

.fy_box::before {
  content: "";
  position: fixed; /* 固定在视口 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/tv22.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1; /* 放到底层 */
}
.fy_box2{
	position: relative;
	width: 100%;
	height: 100vh;
	padding-top: 10%;
}
.fy_banner {
	width: 45%;
	height: 30%;
	padding-top: 3%;
	margin-left: 45%;
	position: relative;
	z-index: 1;
}
.fy_tit {
	margin-left: 2%;
	letter-spacing: 0.3em;
	font-size: 14px;
	color: #aa734d;
}
.fy_txt {
	margin: 2% 0 4% 2%;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: rgba(170, 115, 77, 0.5);
}
.fy_btm {
	width: 100%;
	height: 120%;
	display: flex;
	flex-wrap: wrap;
}
.fy_item {
	width: 38%;
	height: 45%;
	position: relative;
	margin-left: 2%;
}
.fy_img {
	width: 100%;
	height: 100%;
}
.fy_xm {
	position: absolute;
	top: 36%;
	left: 50%;
	font-size: 12px;
	color: #ffe8db;
	letter-spacing: 0.3em;
}
.ms_box {
	width: 100%;
	min-height: 100%;
	background: url('../../static/img/swc_bg.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	/* position: fixed; */
	padding-top: 10%;
	margin-top: -3%;
}


.fashion_box{
	width: 100%;
	height: 100%;
	background: url('../../static/img/swc_bg.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	/* position: fixed; */
	padding-top: 10%;
	margin-top: -3%;
}

.mny_box { 
	width: 100%;
	height: 100%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/wt_bg2.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	padding-top: 13%;
	margin-top: -3%;
	box-sizing: border-box;
	overflow: hidden;
}
.mny_box2{
	width: 82%;
	height: 100%;
	margin: auto;
}
.wb_box_2 {
	width: 82%;
	height: 100%;
	margin: auto;
}
.cb_box2 {
	position: relative;
	width: 82%;
	height: 65%;
	margin: auto;
	z-index: 1;
	top: 20%;
}
.mny_tab {
	display: flex;
	width: 19%;
	height: 8%;
	margin: auto;
	margin-top: -4%;
}
.journey_tab{
	display: flex;
	width: 45%;
	/* height: 8%; */
	margin: auto;
}
.wt_tab {
	display: flex;
	width: 21%;
	height: 8%;
	margin: auto;
	margin-top: 1%;
}
.cb_box {
	position: fixed;
	margin-top: -3%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/wt_bg2.jpg') no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}
.wbxy_tab {
	display: flex;
	width: 20%;
	/* height: 7%; */
	margin: auto;
	/* margin-top: 1%; */
}
.bhcc_tab {
	display: flex;
	width: 15%;
	margin: auto;
	/* margin-top: 1%; */
}
/* .mny_box2 {
	position: relative;
	width: 75%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 12%;
	z-index: 9;
} */
.mny_box3 {
	width: 80%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 10%;
	
}
.mny_tab_item {
	width: 100%;
	line-height: 32px;
	background: rgba(0, 0, 0, 0.1);
	color: #973b1f;
	font-size: 12px;
	text-align: center;
	margin-left: 3%;
	border-radius: 200rpx;
}
.wt_tab_item {
	width: 100%;
	line-height: 32px;
	background: rgba(0, 0, 0, 0.1);
	color: #973b1f;
	font-size: 12px;
	margin-left: 3%;
	border-radius: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mny_tab_item2 {
	width: 100%;
	/* line-height: 32px; */
	background: rgba(0, 0, 0, 0.1);
	color: #973b1f;
	font-size: 0.8vw;
	margin-left: 3%;
	border-radius: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 0;
}
.mny_box_item {
	width: 23%;
	height: 28%;
	position: relative;
	margin-left: 2%;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.mny_img_box {
	width: 100%;
	height: 100%;
}
.mny_img_tit {
	position: absolute;
	top: 6%;
	width: 100%;
	font-size: 12px;
	color: #5c3c2e;
    text-align: center;
	letter-spacing: 0.2em;
}
.kc_img_tit {
	position: absolute;
	top: 6%;
	left: 26%;
	font-size: 12px;
	/* color: #5c3c2e; */
	color: #ffffff;
	letter-spacing: 0.2em;
}
.bh_box{
	width: 100%;
	height: 130%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 3%;
}
.bh_item{
	width: 23%;
	height: 100%;
	position: relative;
	margin: 0 0 2% 2%;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.wt_box3 {
	width: 100%;
	height: 130%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 3%;
}
.wt_box4 {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 7%;
}
.wt_item {
	width: 21%;
	height: 110%;
	position: relative;
	margin: 0 0 2% 2%;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.wt_item2 {
	width: 20%;
	height: 45%;
	position: relative;
	margin: 0 0 2% 3%;
}

.wt_tit {
	text-align: center;
	position: absolute;
	top: 10%;
	width: 100%;
	letter-spacing: 0.2em;
	font-size: 10px;
	color: #ffffff;
	z-index: 2;
}
.wt_img_box {
	width: 100%;
	height: 100%;
}
.wt_img_box::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}
.wt_xc {
	width: 18%;
	height: 40%;
	margin: 0 0 2% 2%;
	background: url('../../static/img/img_xc.png') no-repeat center;
	background-size: 100% 100%;
	box-sizing: border-box;
	padding-bottom: 4%;
}
.xcmc {
	margin-left: 10%;
	font-size: 10px;
	color: #5c3c2e;
	letter-spacing: 0.2em;
}
.wt_box {
	position: relative;
	width: 100%;
	height: 80%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
	margin-left: 10%;
	z-index: 1;
}
.wt_paly {
	position: absolute;
	top: 30%;
	left: 42%;
	width: 16%;
	height: 30%;
}
.sp_img_box {
	width: 100%;
	height: 100%;
}
/* .qiehuan {
	position: absolute;
	top: 41%;
	left: 7%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 90%;
	height: 8%;
} */
.qiehuan2 {
	position: absolute;
	top: 32%;
	left: 9%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 86%;
	height: 8%;
}
.qiehuan3 {
	position: absolute;
	top: 50%;
	left: 14%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 80%;
	height: 8%;
}
.qiehuan4 {
	position: absolute;
	top: 45%;
	left: 8%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 85%;
	height: 8%;
}
.qiehuan6 {
	position: absolute;
	top: 45%;
	left: 12%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 80%;
	height: 8%;
}
.qiehuan5 {
	position: absolute;
	top: 50%;
	left: 14%;
	z-index: 33;
	display: flex;
	justify-content: space-between;
	width: 80%;
	height: 8%;
}
.qh_btn {
	width: 3%;
	height: 65%;
}
.qh_btn2 {
	width: 3%;
	height: 60%;
}
.wb_box { 
	width: 100%;
	height: 100%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/tv11.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	padding-top: 13%;
	margin-top: -3%;
	box-sizing: border-box;
	overflow: hidden;
}
.wbxy_btm {
	display: flex;
	align-items: center;
	width: 32%;
	height: 5%;
	position: absolute;
	top: 90%;
	left: 35%;
	z-index: 9;
}
.wbxy_item {
	width: 90%;
	height: 100%;
	display: flex;
	margin-left: 8%;
	margin-top: 2%;
	flex-wrap: wrap;
}
.mjtj_box {
	display: flex;
	border-radius: 20rpx;
	width: 22%;
	height: 32%;
	justify-content: space-between;
	margin-left: 4%;
	margin-bottom: 2%;
	
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;


}
.zj_img {
	width: 55%;
	height: 100%;
}
.mz {
	width: 45%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #ac754d;
	background-color: #edded8;
}
.cs_box {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/tv9.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	/* padding-top: 12%; */
	margin-top: -3%;
	position: fixed;
	display: flex;
}
.cs_left {
	width: 32%;
	height: 50%;
	margin: 12% 0 0 10%;
}
.cs_logo {
	width: 30%;
	height: 10%;
}
.cs_txt {
	margin-top: 2%;
	font-size: 12px;
	color: #96775d;
	line-height: 18px;
	text-indent: 2em;
}
.cs_center{
	width: 25%;
	height: 70%;
	margin: 12% 0 0 5%;
	border-radius: 10px;
	border: 1px solid #a07f5a;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}
.cs_right {
	width: 40%;
	height: 70%;
	margin: 12% 0 0 5%;
}
.right_top {
	position: relative;
	width: 60%;
	/* height: 100%; */
	display: flex;
	flex-wrap: wrap;
	/* align-items: flex-start; */
}
.top_img {
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 0 0;
}
.pos {
	position: absolute;
	width: 100%;
	height: 20%;
	background-color: #fbe8e4;
	border-radius: 50% 50% 0 0;
	bottom: 0;
}

.cs_tj {
	/* position: absolute; */
	/* bottom: -10%;
	left: 20%; */
	flex: 0 0 calc(50% - 10px);
	margin: 0 10px 10px 0;
	color: #fff;
	font-size: 1vw;
	padding: 10px 0;
	text-align: center;
	background: url('../../static/img/cstj.png') no-repeat center;
	background-size: 100% 100%;
}
.right_btm {
	position: relative;
	width: 50%;
	height: 55%;
	margin: 25% 0 0 10%;
}
.btm_img {
	width: 100%;
	height: 100%;
	border-radius: 0 0 50% 50%;
}
.pos2 {
	position: absolute;
	width: 100%;
	height: 20%;
	background-color: #fbe8e4;
	border-radius: 0 0 50% 50%;
	top: 0;
}
.cs_tj2 {
	position: absolute;
	top: -10%;
	left: 20%;
	width: 60%;
	height: 20%;
	color: #fff;
	font-size: 12px;
	line-height: 25px;
	text-align: center;
	background: url('../../static/img/cstj.png') no-repeat center;
	background-size: 100% 100%;
}
.jz_jj {
	width: 50%;
	height: 80%;
	/* margin-top: 10%; */
}
.jj_top {
	width: 100%;
	height: 100%;
	font-size: 10px;
	padding: 2%;
	color: #aa734d;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jzjs_bg.jpg') no-repeat center;
	background-size: 100% 100%;
	border-radius: 15px;
	box-sizing: border-box;
	border: #99664c solid 3px;
	 
	overflow: hidden;
}
.jj_btm {
	display: flex;
	width: 100%;
	height: 28%;
	margin-top: 3%;
}
.sw_box {
	width: 100%;
	height: 28%;
	border: 3px solid #99664c;
	border-radius: 5px;
}
.mn_box2 {
	width: 18%;
	height: 100%;
	margin-left: 2%;
	box-sizing: border-box;
	border: 2px solid #fed57d;
}
.mn_box {
	width: 100%;
	height: 100%;
	

}
.container {
	/* width: 25%; */
	/* box-sizing: border-box; */
	border: 3px solid #99664c;
	/* display: inline-block; */
	flex: 0 0 calc(33% - 16px);
	height: 20vh;
	border-radius: 10px;
	overflow: hidden;
	margin: 0 10px 10px 0
	/* margin-right: 2%;
	margin-top: 2%; */
}

.charts-box {
	position: relative;
	width: 45%;
	height: 35%;
	text-align: center;
}

/* 民俗风情 */
.ms_harder_box {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 25vh;
}
.ms_img {
	width: 100%;
	height: 100%;
	border-radius: 5px 25px 5px 25px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
}
.ms_img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
	z-index: -1;
}
.ms_box_banner {
	width: 82%;
	/* aspect-ratio: 10/1;  */
	height: 70%;
	margin: auto;
}

.ms_banner_img {
	position: absolute;
	top: 6%;
	left: 5%;
	width: 90%;
	height: 75%;
}
.ms_banner_bgimg {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('../../static/img/bg_logo.png') no-repeat center;
	background-size: 100% 100%;
}
.ms_box_item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
.ms_banner_item {
	width: 23%;
	height: 120%;
	margin-bottom: 2%;
	position: relative;
	margin-left: 2%;
}
.ms_item_tit {
	width: 90%;
	position: absolute;
	top: 83%;
	left: 5%;
	text-align: center;
	z-index: 1;
	font-size: 10px;
	color: #fbfcdc;
	/* text-shadow: 0px 4px 0px #8e5938; */
}
</style>