MinNan/index_fenbao/minsu/minsu.vue

<template>
	<view class="body" style="background-color: #efefef">
		<u-navbar :autoBack="true" title="民俗宗教" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view>
			<u-swiper :list="list1" height="335rpx" :indicator="true" :autoplay="true" :circular="true" keyName="image" showTitle></u-swiper>
		</view>
		<view class="text-wrapper_7">
			<text lines="1" class="text_4">生活习俗</text>
			<text lines="1" class="text_5">查看更多》</text>
		</view>
		<!-- 生活习俗 -->
		<view class="sh_xs banxin">
			<view class="sh_xs_item" v-for="item in shXiShuList" :key="item">
				<view @click="detailsBtn" class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" :src="item.img"></image>
				</view>
				<view class="">{{ item.title }}</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</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="sh_xs banxin">
			<view class="sh_xs_item" v-for="item in 4" :key="item">
				<view class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=2448527499,3053317408&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=394"></image>
				</view>
				<view class="">閩南自古有廟就有</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</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="sh_xs banxin">
			<view class="sh_xs_item" v-for="item in 4" :key="item">
				<view class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=2977394516,3415116795&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=361"></image>
				</view>
				<view class="">閩南自古有廟就有</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</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="sh_xs banxin">
			<view class="sh_xs_item" v-for="item in 4" :key="item">
				<view class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=2448527499,3053317408&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=394"></image>
				</view>
				<view class="">閩南自古有廟就有</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 礼仪习俗end -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{
					image: 'https://img0.baidu.com/it/u=1541281845,960690765&fm=253&fmt=auto&app=138&f=JPEG?w=758&h=500',
					title: '山里乡民祭妈祖'
				},
				{
					image: 'https://img1.baidu.com/it/u=4153166350,2319982730&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=424',
					title: '初九拜天公'
				},
				{
					image: 'https://img1.baidu.com/it/u=3003350307,572069045&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
					title: '福建茶乡古礼祭茶神'
				}
			],
			// 生活习俗
			shXiShuList: [
				{
					img: 'https://www.chinanews.com/tp/hd2011/2013/03-11/U508P4T426D182733F16470DT20130311112416.jpg',
					title: '闽南民俗浔浦天香日'
				},
				{
					img: 'https://inews.gtimg.com/newsapp_bt/0/11032609926/1000',
					title: '闽南冬至丸'
				},
				{
					img: 'https://img1.baidu.com/it/u=1711973128,1321603179&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
					title: '闽南习俗拜天公'
				},
				{
					img: 'https://i2.hdslb.com/bfs/archive/24ab948019ae5cc13055113cfcd5321f7c16dc41.jpg',
					title: '抬神'
				}
			]
		};
	},
	methods: {
		detailsBtn() {
			uni.navigateTo({
				url: '/index_fenbao/minsu/ms_wenZhang'
			});
		}
	}
};
</script>

<style>
.banxin {
	margin: 0 32rpx 0 32rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/* 去除轮播图标题遮罩背景色 */
/* .u-swiper__wrapper__item__wrapper__title {
	background-color: transparent !important;
} */
.sh_xs {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.ms_dianzan {
	width: 245rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
.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;
}
</style>