MinNan/index_fenbao/minNanyu/minNanyu.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="闽南语" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="jz_swiper">
			<u-swiper
				:list="list1"
				indicatorStyle="bottom: 10rpx"
				indicatorMode="dot"
				height="335rpx"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				keyName="image"
			></u-swiper>
		</view>
		<!--闽南语歌曲 -->
		<view class="text-wrapper_7">
			<text lines="1" class="text_4">闽南语歌曲</text>
			<text lines="1" class="text_5" @click="yinPinLieBiao">查看更多》</text>
		</view>
		<view class="banxin">
			<view class="content">
				<!-- 下列代码未加规范，仅供参考，请勿模仿 -->
				<scroll-view scroll-x style="display: flex; white-space: nowrap">
					<view class="mn_container" v-for="item in mnGeQu" :key="item">
						<view class="mn_box">
							<image style="border-radius: 10rpx 10rpx 10rpx 0rpx; width: 100%; height: 100%" :src="item.img"></image>
						</view>
						<text class="mn_text">{{ item.titie }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!--闽南语歌曲end -->
		<!-- 戏曲 -->
		<view class="text-wrapper_7">
			<text lines="1" class="text_4">戏曲</text>
			<text lines="1" class="text_5">查看更多》</text>
		</view>
		<view class="banxin">
			<view class="content">
				<!-- 下列代码未加规范，仅供参考，请勿模仿 -->
				<scroll-view scroll-x style="display: flex; white-space: nowrap">
					<view class="mn_container" v-for="item in mnXiQu" :key="item">
						<view class="mn_box">
							<image :src="item.img" style="border-radius: 10rpx 10rpx 10rpx 0rpx; width: 100%; height: 100%"></image>
						</view>
						<text class="mn_text">{{ item.titie }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 戏曲end -->
		<!-- 俗语谚语歇后语 -->
		<!-- <view class="text-wrapper_7">
			<text lines="1" class="text_4">俗语谚语歇后语</text>
			<text lines="1" class="text_5">查看更多》</text>
		</view>
		<view class="banxin">
			<view class="content">
			
				<scroll-view scroll-x style="display: flex; white-space: nowrap">
					<view class="mn_container" v-for="item in 6" :key="item">
						<view class="mn_box">
							<image src="/static/image/kctp.png" style="border-radius: 10rpx 10rpx 10rpx 0rpx; width: 100%; height: 100%"></image>
						</view>
						<text class="mn_text">浪子回头金不换</text>
					</view>
				</scroll-view>
			</view>
		</view> -->
		<!-- 俗语谚语歇后语end -->
		<!--趣谈  -->
		<!-- <view class="text-wrapper_7">
			<text lines="1" class="text_4">趣谈</text>
			<text lines="1" class="text_5">查看更多》</text>
		</view>
		<view class="banxin">
			<view class="content">
			
				<scroll-view scroll-x style="display: flex; white-space: nowrap">
					<view class="mn_container" v-for="item in 6">
						<view class="mn_box">
							<image src="/static/image/kctp.png" style="border-radius: 10rpx 10rpx 10rpx 0rpx; width: 100%; height: 100%"></image>
						</view>
						<text class="mn_text">浪子回头金不换</text>
					</view>
				</scroll-view>
			</view>
		</view> -->
		<!-- 趣谈 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{
					image: 'https://speech.xmu.edu.cn/_upload/article/images/c0/fa/3ff524314ed9992200a0db99bb7b/824d7b82-5e07-4857-9c35-5d1219bc710f.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://img0.baidu.com/it/u=1455151824,1249683265&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F20292d28-c439-2758-a2a7-c954170fde70%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697881437&t=db418f32a3826bfaf554feb7ae6f4ba8',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			// 闽南歌曲
			mnGeQu: [
				{
					img: 'http://t14.baidu.com/it/u=2294107695,3570586599&fm=224&app=112&f=JPEG?w=500&h=500',
					titie: '闽南经典歌曲'
				},
				{
					img: 'http://t14.baidu.com/it/u=561204940,3527801245&fm=224&app=112&f=JPEG?w=500&h=500',
					titie: '闽南30年经典老歌'
				},
				{
					img: 'https://img1.baidu.com/it/u=1473724061,3866170653&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					titie: '闽南情'
				}
			],
			mnXiQu: [
				{
					img: 'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1411/12/c1/40851785_40851785_1415781337347.jpg',
					titie: '闽剧王莲莲拜香'
				},
				{
					img: 'https://img1.baidu.com/it/u=1657718455,2908945415&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
					titie: '赏闽剧《北进图'
				},
				{
					img: 'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1301/11/c2/17299755_17299755_1357871971161.jpg',
					titie: '高甲戏(闽南传统民间戏剧)'
				}
			]
		};
	},
	methods: {
		yinPinLieBiao() {
			uni.navigateTo({
				url: '/index_fenbao/minNanyu/yinPinLieBiao'
			});
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 60rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/* 去除轮播图标题遮罩背景色 */
.u-swiper__wrapper__item__wrapper__title {
	background-color: transparent !important;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.text-wrapper_7 {
	width: 651rpx;
	height: 45rpx;
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 33rpx 0 25rpx 48rpx;
}
.text_4 {
	width: 112rpx;
	height: 27rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-weight: 700;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_5 {
	width: 89rpx;
	height: 20rpx;
	color: rgba(18, 18, 18, 1);
	font-size: 22rpx;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 3rpx;
}
.mn_container {
	display: inline-block;
	margin-right: 20rpx;
	text-align: center;
}

.mn_box {
	width: 261rpx;
	height: 349rpx;
	background: #ca5642;
	border-radius: 10rpx 10rpx 10rpx 0rpx;
}

.mn_text {
	font-size: 28rpx;
	color: #333;
}
</style>