minman-tv/pages/index/index.vue

<template>
	<view class="box">
		<view class="" style="height: 100%; position: relative">
			<u-swiper @change="change" radius="0" :circular="true" :list="swiperList" showTitle keyName="image" interval="5000" height="100%"></u-swiper>
		</view>
		<view class="img_logo">
			<image style="margin-left: 537%; margin-top: 6%; width: 28%; height: 70%" src="/static/img/yjh_logo.png"></image>
		</view>
		<view style="position: absolute; top: 7%; left: 66%; font-size: 12px; color: #fff; letter-spacing: 0.2em">
			<view style="width: 200rpx; height: 15rpx"><image class="img" src="/static/img/yjh.png" /></view>
		</view>
		<view class="boc_tit">
			<view class="boc_tit1"><image class="img" src="/static/img/img_title@2x.png" /></view>
			<view class="liaoJie" @click="lianjieBtn">了解详情 ></view>
		</view>
		<!-- 闽南魂介绍 -->
		<view class="mn_js">
			<view class="mn_tit">闽南魂</view>
			<view class="animate-box">
				<view style="" class="jieshao">
					闽南文化，是闽南人民的根与魂，它深深扎根在这片土地上，滋养着世世代代的闽南人。它如同一颗璀璨的明珠，闪耀着独特的光芒，承载着丰富的历史与文化。我们希望，通过“闽南魂”这个平台，让更多的人了解、体验和传承闽南文化的精髓。我们希望，世界各地的朋友都能在这里感受到闽南文化的深厚底蕴和独特魅力。因为，闽南文化不仅是闽南人民的骄傲，更是全人类共同的宝贵财富。让我们共同携手，传承这份瑰宝，让闽南文化的光芒照耀更广阔的天地。
				</view>
			</view>
			<view class="guanyu" @click="myBtn">关于我们</view>
			<view class="guanyu" style="top: 87%; left: 10%">闽南文化你我他</view>
		</view>
		<!-- 菜单 -->
		<view class="box_menu">
			<!-- @click="bgBtn" -->
			<view class="menu_poimg">
				<image class="img" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/img_@2x.png"></image>
			</view>

			<view @click="menuBtn(index)" class="menu_item" v-for="(item, index) in list" :key="item.name">
				<view class="menu_img">
					<image class="img" :src="item.img"></image>
				</view>
				<view class="menu_tit">
					{{ item.title }}
				</view>
				<view class="" style="color: #de807b; font-size: 10px; position: absolute; top: 58%; left: 5%">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			swiperId: 0,
			music: true,
			// 创建音频上下文
			scrollHeight: '',
			innerAudioContext: uni.createInnerAudioContext(),
			cityList: [],
			swiperList: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv44.jpg',
					title: '陈元光(657—711年)，字廷炬，号龙湖。唐朝光州固始县人（今河南省固始县人）。漳州首任刺史。他是闽台地区重要的民间信仰之一，被奉为开漳圣王。号称“蛮荒”之地的闽南，经济文化得到了迅速发展。 陈元光成为促进中原文化与闽越文化融合的奠基者。'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg',
					title: '南普陀寺位于福建省厦门市五老峰前，背依秀奇群峰，面临碧澄海港，风景绝佳。它是一座千年古刹，始建于唐代，为闽南佛教胜地之一。'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv6.jpg',
					title: '威镇阁高3层，采用阴阳八卦为顶面，阁上都用长宽相同的长方形巨石铺成八角形状，每块巨石按方位分别刻着“乾、坤、震、艮、坎、兑、巽、离”的方正大字，所以俗称八卦楼。该楼与芝山顶峰的威镇亭遥相对峙，互为犄角，故名为威镇阁'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/wc.jpg',
					title: '送王船是畲族传统的民间习俗，传统木造王船，传承古意，结合了造船技艺与彩绘艺术，用色丰富，其技巧、彩绘题材与构图都有明显的特色，可说是精致的畲族民间艺术。'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg',
					title: '漳州文庙位于市区修文西路，是我国四大孔庙之一，也是漳州城内最大的古建筑群，国家级重点文物保护单位。文庙始建于宋庆历四年（公元1044年），元、明、清均有重修，漳州府学亦设于此。漳州文庙具有很高的古文化和历史文物价值，是漳州文化发展史重要的实证物。'
				}
			],
			list: [
				{
					title: '闽南精神',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_7.png',
					name: '闽南、闽台、海丝'
				},
				{
					title: '厝边舞台',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_6.png',
					name: '闽南文化你我他'
				},
				{
					title: '建筑文化',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_5.png',
					name: '番仔楼、洋楼式'
				},

				{
					title: '文保学院',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/wbxy.png',
					name: '文物保护知识'
				},
				{
					title: '非遗传承',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_4.png',
					name: '非物质文化遗产'
				},
				{
					title: '民俗宗教',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_3.png',
					name: '宗教信仰,礼仪习俗'
				},
				{
					title: '闽南语',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_1.png',
					name: '闽南方言俗语'
				},
				{
					title: '村史文化',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/card_2.png',
					name: '村史村情、村史资讯'
				}
			]
		};
	},
	onLoad(o) {
		// this.music = o.music;
		that = this;
		this.playMusic();
	},

	methods: {
		menuBtn(i) {
			uni.redirectTo({
				url: '/pages/index2/index2?id=' + i
			});
			this.innerAudioContext.pause();
		},
		change(i) {
			this.swiperId = i.current;
		},
		// 了解详情
		lianjieBtn() {
			uni.redirectTo({
				url: '/pages/index/index_xq?id=' + this.swiperId
			});
			this.innerAudioContext.pause();
		},
		myBtn() {
			uni.redirectTo({
				url: '/pages/index/guanYu'
			});
			this.innerAudioContext.pause();
		},
		playMusic() {
			if (this.music) {
				// 设置音频源
				this.innerAudioContext.src = 'https://huli-app.wenlvti.net/app_static/minnanhun/image/audio2.mp3';
				// 设置为自动播放
				this.innerAudioContext.autoplay = true;
				// 其他属性设置（可选）
				this.innerAudioContext.loop = true; // 是否循环播放，默认为false
			} else {
				// this.innerAudioContext.pause();
			}
		}
	}
};
</script>

<style>
/* @keyframes switch-bg {
	30% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg1.jpg');
	}

	70% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg3.jpg');
	}
	90% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg4.jpg');
	}
	100% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/ind.png');
	}
} */

.box {
	width: 100%;
	height: 100vh;
	/* 	animation-name: switch-bg;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 5s; */
	/* background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/ind.png'); */
	box-sizing: border-box;
	/* background-size: 100% 100%; */
	/* background-attachment: fixed; */

	margin: 0;
}
/deep/.u-swiper__wrapper__item__wrapper__title {
	width: 30% !important;
	height: 20% !important;
	position: absolute;
	bottom: 42% !important;
	left: 0 !important;
	font-size: 10px !important;
	font-family: MiSans, MiSans;
	color: #dcd9d7;
	letter-spacing: 0.1em;
	background-color: transparent !important;
}
.animate-box {
	width: 100%;
	height: 65%;
	overflow: hidden;
}

.jieshao {
	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%);
	}
}
.img {
	width: 100%;
	height: 100%;
}
.img_logo {
	/* display: flex; */
	width: 11%;
	height: 7%;
	background: url('/static/img/img_logo.png') no-repeat;
	background-size: 100% 100%;
	margin-left: 3%;
	position: relative;
	z-index: 999;
	top: -95%;
	/* left: 90%; */
}
.mn_tit {
	width: 80%;
	height: 10%;

	font-size: 14px;
}
.boc_tit {
	position: relative;
	z-index: 999;
	width: 25%;
	height: 8%;
	margin: -46% 0 0 3%;
}
.boc_tit1 {
	position: absolute;
	left: -11%;
	width: 80%;
	height: 100%;
}
.boc_tit2 {
	font-size: 12px;
	font-family: MiSans, MiSans;
	color: #dcd9d7;
	margin-top: 3%;
	letter-spacing: 0.1em;
}
.box_menu {
	position: relative;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	height: 34%;
	top: 32%;
	left: 9%;
}
.menu_item {
	position: relative;
	width: 22%;
	height: 45%;
	margin: 0 0 0 1%;
	cursor: pointer;
	border-radius: 10rpx;
}
.menu_img {
	width: 100%;
	height: 100%;
}
.menu_tit {
	position: absolute;
	top: 5%;
	left: 5%;
	font-size: 66rpx;
	font-family: nzgrRuyinZouZhangKai, nzgrRuyinZouZhangKai;
	font-weight: 400;

	line-height: 76px;
	background: linear-gradient(180deg, #d1392d 0%, rgba(209, 57, 45, 0.89) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.menu_poimg {
	position: absolute;
	top: -8%;
	left: 8%;
	width: 13%;
	height: 53%;
	z-index: 1;
}
.liaoJie {
	position: absolute;
	bottom: -245%;

	left: 1%;
	width: 25%;
	height: 45%;
	border-radius: 40rpx;
	text-align: center;
	line-height: 20px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
	font-size: 12px;
}
.mn_js {
	width: 25%;
	height: 44%;
	border-radius: 2%;
	font-size: 10px;
	line-height: 18px;
	border: 1px #ffffff solid;
	color: #dcd9d7;
	position: absolute;
	top: 15%;
	left: 67%;
	padding: 1%;
	background-color: rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	overflow: hidden;
}
.guanyu {
	width: 80%;
	height: 10%;
	position: absolute;
	top: 75%;
	left: 10%;
	line-height: 16px;
	padding-top: 1%;
	box-sizing: border-box;
	text-align: center;
	letter-spacing: 0.2em;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.5);
}
</style>