MinNan/index_fenbao/minsu/ms_wenZhang.vue

<template>
	<view>
		<u-navbar :autoBack="true" title="民俗宗教" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="text-group_17">
			<text lines="1" class="text_2">闽南人，拜拜成风，佛教、道教自然不缺，民间信仰才是主流。</text>
			<text lines="1" decode="true" class="text_13">2023.09.01&nbsp;12:00:10</text>
		</view>
		<view class="block_3">
			<view class="text_3">
				<text class="text_10">
					说到民间信仰，闽南可谓丰富多彩，以种类和数量论，闽南都可以称得上是全国各民系中的佼佼者，闽南人常将信仰活动称为“拜拜”，也就是祭拜、祭祀之意，而其拜拜的对象来源广泛，从中国历史上的真实人物、传说神灵到地方名士、乡野术士和生灵，无所不包。
				</text>
			</view>
			<view class="box_3">
				<image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=1541281845,960690765&fm=253&fmt=auto&app=138&f=JPEG?w=758&h=500"></image>
			</view>
			<view class="text-wrapper_1">
				<text class="paragraph_1">一、水神、海神</text>

				<p class="paragraph_2">闽南近海，大多以海为田，以海为生，在与海交往的几千年里，闽南人最乐于将海神作为自己营生的保护神。</p>

				<p class="paragraph_6">
					闽南的水神、海神大概有四种：一为全国各地普遍存在的海龙王；二为闽南土生土长的海神妈祖；三为主管水的玄天上帝；四为较罕见的水仙尊王。水仙尊王并非独一角色。
					有不同，常见者如西楚霸王项羽(乌江自刎)、屈原(汨罗江投江)、伍子胥(沉尸河底)、李白(醉酒溺亡)、王勃(渡江溺亡)、大禹(治水)等。
				</p>
			</view>

			<view class="box_35">
				<view class="ms_dianzan">
					<view class="box_r">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="box_r">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
					<view class="box_r">
						<uni-icons type="redo" size="20"></uni-icons>

						<text lines="1" class="text-group_1">分享</text>
					</view>
				</view>
			</view>
			<text lines="1" class="text_5">相关推荐</text>
			<view class="sh_xs">
				<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>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			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: {}
};
</script>

<style>
.ms_dianzan {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.box_r {
	margin-right: 15rpx;
}
.sh_xs {
	margin: 32rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
.text-group_17 {
	width: 668rpx;
	height: 163rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 0 0 35rpx;
}
.text_2 {
	width: 668rpx;
	height: 121rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 48rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;

	line-height: 72rpx;
}
.text_13 {
	width: 214rpx;
	height: 18rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	white-space: nowrap;
	line-height: 72rpx;
	margin-top: 80rpx;
}
.block_3 {
	background-color: rgba(255, 255, 255, 1);
	width: 749rpx;
	margin-top: 100rpx;
	display: flex;
	flex-direction: column;
}
.text_3 {
	width: 685rpx;
	height: 270rpx;
	text-indent: 2rem;
	font-size: 0rpx;
	overflow: scroll;
	line-height: 48rpx;
	margin: 38rpx 0 0 42rpx;
}
.text_10 {
	width: 685rpx;
	height: 270rpx;
	/* overflow-wrap: break-word; */
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	line-height: 48rpx;
}

.box_3 {
	background-color: rgba(232, 242, 217, 1);
	height: 422rpx;
	margin-top: 46rpx;
	display: flex;
	flex-direction: column;
	width: 750rpx;
}
.box_4 {
	background-color: rgba(0, 0, 0, 0.15);
	width: 750rpx;
	height: 422rpx;
	display: flex;
	flex-direction: column;
}
.text-wrapper_1 {
	width: 684rpx;
	height: 378rpx;
	overflow-wrap: break-word;
	font-size: 0rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 42rpx 0 32rpx 42rpx;
}
.paragraph_1 {
	width: 684rpx;

	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	line-height: 48rpx;
}
.paragraph_2 {
	width: 684rpx;
	margin-bottom: 10rpx;
	text-indent: 2rem;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 48rpx;
}
.paragraph_5 {
	width: 684rpx;
	height: 378rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 14rpx;
}
.paragraph_6 {
	width: 684rpx;
	text-indent: 2rem;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 48rpx;
}
.text_5 {
	width: 111rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
	white-space: nowrap;
	line-height: 28rpx;
	margin: 50rpx 0 0 48rpx;
}
.box_35 {
	height: 32rpx;
	flex-direction: row;
	display: flex;
	margin: 150rpx 0 32rpx 380rpx;
}
</style>