minman-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_logo2"></view>
		<view class="img_logo"><image style="margin-left: -55%; width: 38%;height: 100%;" src="/static/img/mn_logo1.png"></view>
		<!-- Tab选项 -->

		<view class="top_tab">
			<view class="box_tab">
				<view @click="indexBtn" class="tab_item">首页</view>
				<view @click="tabBtn(index)" class="tab_item" v-for="(item, index) in listTab" :key="item.title" :class="{ active: tabIdex == index }">
					{{ 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="aaaaaaaaaa"></view>
		</view>
		<!-- 厝边舞台 -->
		<view v-show="tabIdex == 1" class="cb_box" style="width: 100%; height: 101%">
			<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" v-for="item in articleList" :key="item.index" class="wt_item">
							<view class="wt_img_box">
								<image class="img" :src="item.img"></image>
							</view>
							<view class="wt_tit">{{ item.title }}</view>
						</view>
					</view>
				</view>
				<view style="width: 100%; height: 100%" v-show="wtTab == 1">
					<view class="wt_box">
						<view @click="albumBtn(index)" v-for="(item, index) in albumList" :key="item.id" class="wt_xc">
							<view class="" style="width: 100%; height: 100%; display: flex; padding-top: 6%; padding-left: 8%">
								<image :src="item.image" style="margin-left: 1%; border-radius: 3rpx; width: 75%; height: 100%"></image>
							</view>
							<view class="xcmc">{{ item.title }}</view>
						</view>
					</view>
				</view>
				<view class="" v-show="wtTab == 2" style="width: 100%; height: 60%">
					<view class="wt_box4">
						<view @click="vidoBtn" v-for="item in 12" :key="item.item" class="wt_item2">
							<view class="sp_img_box">
								<image class="img" style="border-radius: 3rpx" src="/static/img/image5.png"></image>
							</view>
							<view class="wt_paly"><image class="img" style="border-radius: 20rpx" src="/static/img/play.png"></image></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="jz_box" v-if="tabIdex == 2">
			<view class="" style="display: flex; justify-content: space-around; width: 95%; height: 98%; margin: auto; margin-top: 12%">
				<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 class="jj_btm">
					<!-- 可能资源加载过多导致闪退 -->
							<scroll-view scroll-x="true" style="width: 100%; height: 100%; display: flex; white-space: nowrap">
							<view class="container" @click="tabulationBtn(index)" v-for="(item, index) in imgList" :key="item.index">
								<view class="mn_box">
									<image style="width: 100%; height: 100%" :lazy-load="true" :src="item.image"></image>
								</view>
								<text class="mn_text">{{ item.title }}</text>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="" style="width: 40%; 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>
					<!-- 地图 -->
					<view class="global" @click="mapBtn">
						<image  style="border-radius: 5px;width: 100%;height: 130%;" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/map3.jpg"></image>
					</view> 
				</view>
			</view> 
		</view>
		<!-- 文保学院 -->
		<view class="wb_box" v-show="tabIdex == 3">
			<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_banner">
				<view class="fy_tit">非遗传承</view>
				<view class="fy_txt">以“闽南人”与“闽南建筑文化”为纽带构建三种精神：闽南精神、闽台精神、海丝精神体现闽南“魂”</view>
				<view class="fy_btm">
					<view @click="fyXiangQing(index)" v-for="(item, index) in fyList" :key="item.title" class="fy_item">
						<view class="fy_img">
							<image :src="item.img" class="img" />
						</view>
						<view class="fy_xm">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="aaaaaaaaaa"></view> -->
		</view>
		<!-- 非遗传承end -->
		<!--民俗宗教 -->
		<view class="ms_box" v-if="tabIdex == 5">
			<view class="js_b">
				<!-- <view class="js_tit">礼仪习俗</view> -->
				<commonItems :projectList="projectList"></commonItems>
			</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>
		<!--民俗宗教 -->
		<!-- 闽南语 -->
		<view v-show="tabIdex == 6" style="width: 100%; height: 67%;">
			<view class="mny_box">
				<view class="mny_tab">
					<view @click="mnyTabBtn(index)" v-for="(item, index) in mnyListTab" :key="item.id" class="mny_tab_item" :class="{ active2: mnyTab == index }">
						{{ item.name }}
					</view>
				</view>
				<view class="mny_box2">
					<view @click="nurseryBtn(index)" v-for="(item, index) in tongYaoList" :key="item.id" class="mny_box_item">
						<view class="mny_img_box">
							<image :src="item.image" class="img"></image>
						</view>
						<view class="mny_img_tit">{{ item.title }}</view>
					</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 class="bbbbbbbb"></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"></image>
				</view>
				<view class="cs_txt">
					保护历史记忆和文化遗产:村更馆作为一个专门 收藏、保存和展示村庄历史、文化和传统的场所，具 有重要的保护历史记忆和文化遗产的意义。它收集、
					整理和展示各种文物、文献、照片、音频和视频等材 料，记录和展示村庄的历史、风土人情和重要事件， 使这些珍贵的文化资源得以保存，并传承给后代.
				</view>
			</view>
			<view class="cs_right">
				<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: '课程'
				}
			],
			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: '非遗活动'
				}
			],
			mnyListTab: [],
			wtListTab: [
				{
					title: '文章'
				},
				{
					title: '相册'
				},
				{
					title: '视频'
				}
			],
			albumList: [] /* 相册 */,
			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: [],
			tongYaoList: [],
			jianZhuList: [],
			buildList: [],
			keCheng: [
				{
					img: '/static/img/kc1.png'
				},
				{
					img: '/static/img/kc2.png'
				},
				{
					img: '/static/img/kc3.png'
				},
				{
					img: '/static/img/kc4.png'
				}
			],
	
			imgList:[
		
			],
			swiperList: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv4.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv6.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv7.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/wc.jpg'
			],
			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: 26 },
							{ name: '省级', value: 151 },
							{ name: '市区县级', value: 959 }
						]
					}
				]
			}, 
			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: []
		};
	},
	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) {
			this.btmtab = 0;
			this.tabIdex = id;
			if (this.tabIdex == 0 || id == 0) {
				this.minnanSpirit();
			}
			if (this.tabIdex == 2 || id == 2) {
				// // 建筑文化
				this.$api.getContentList(
					{
						model_id: 1 /* 模型id */,
						main_body_id: 5,
						page: 1,
						pageSize: 12
					},
					function (res) {
						that.imgList=res.data
						console.log(res, '	resresres');
					}
				);
			}
			if (this.tabIdex == 3 || id == 3) {
				this.$api.getMainBodyColumnContentList(
					{
						model_id: 7 /* 模型id */,
						main_body_id: 5
					},
					function (res) {
						that.mjtj = res.data[1].content_list;
						// console.log(that.mjtj, '名家推荐');
					}
				);
			}
			if (this.tabIdex == 5 || id == 5) {
				this.$api.getContentList(
					{
						model_id: 4 /* 模型id */,
						main_body_id: 1,
						page: '1',
						pageSize: '10'
					},
					function (res) {
						that.projectList = res.data;
						// console.log(that.projectList, '民俗宗教');
					}
				);
			}
			if (this.tabIdex == 6 || id == 6) {
				let i = 0;
				this.$api.getMainBodyColumnContentList(
					{
						model_id: 5 /* 模型id */,
						main_body_id: 5,
							
					},
					function (res) {
						that.mnyListTab = res.data;
						that.mnyTabBtn(0);
					}
				);
			
			}
		},

		// 闽南精神
		minnanSpirit() {
			this.$api.getContentList(
				{
					model_id: 3 /* 模型id */,
					main_body_id: 5,
					page: this.page,
					pageSize: this.pageSize
				},
				function (res) {
					that.projectList = res.data;
					// console.log(that.projectList, '	that.that.projectList');
				}
			);
		},

		// 非遗详情
		fyXiangQing(i) {
			uni.navigateTo({
				url: this.fyList[i].path
			});
		},
		// 文章详情
		wenzhangBtn() {
			uni.navigateTo({
				url: '/pages/index2/fY_xiangQing/xiangMuXQ'
			});
		},
		// 相册详情
		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
						});
					}
				}
			);
		},
		// 厝边舞台
		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, '相册');
					}
				);
			}
		},
		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(i){
			uni.navigateTo({
				url: '/pages/index2/JZ_xiangQing/mapPage?id='+this.imgList[i].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 + '日';
		}
	}
};
</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 {
	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_logo.png') no-repeat;
	background-size: 100% 100%;
	margin-left: 9%;
	position: relative;
	z-index: 100;
	top: 5%;
}

.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%;
	text-align: center;
	margin-left: 1%;
	font-size: 16px;
	line-height: 36px;
	color: #973b1f;
	/* 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: 12px;
	color: #8e6c4f;
	letter-spacing: 0.2em;
}
.global {
	width: 100%;
	height: 64%;
	margin-top: 2%;
	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;
	text-align: center;
	line-height: 30px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 100px;
	opacity: 1;
	cursor: pointer;
}
.fy_box {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/tv22.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	margin-top: -3.5%; 
	z-index: 1;
}
.fy_banner {
	width: 45%;
	height: 30%;
	padding-top: 16%;
	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%;
	height: 72%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/img_mszj2.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	/* position: fixed; */
	padding-top: 10%;
	margin-top: -3%;
}

.mny_box { 
	position: relative;
	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: 15%;
	margin-top: -3%;

}
.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%;
}
.wt_tab {
	display: flex;
	width: 21%;
	height: 8%;
	margin: auto;
	margin-top: 1%;
}
.cb_box {
	position: fixed;
	margin-top: -4%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/wt_bg2.jpg') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
}
.wbxy_tab {
	display: flex;
	width: 15%;
	height: 7%;
	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;
	text-align: center;
	margin-left: 3%;
	border-radius: 200rpx;
}
.mny_tab_item2 {
	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;
}
.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;
}
.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: 101%;
	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: -4%;
	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_right {
	display: flex;
	width: 40%;
	height: 50%;
	margin: 12% 0 0 5%;
}
.right_top {
	position: relative;
	width: 50%;
	height: 55%;
}
.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%;
	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%;
}
.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: 55%;
	height: 80%;
	/* margin-top: 10%; */
}
.jj_top {
	width: 100%;
	height: 65%;
	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: 15%;
	height: 100%;
    box-sizing: border-box;
	border: 3px solid #99664c;
	display: inline-block;
	margin-right: 2%;

	
}

.charts-box {
	position: relative;
	width: 140px;
	height: 120px;
}
</style>