cunShiGuan/pages/zhenxing/zhenxing.vue

<template>
	<!-- 村史界面 -->
	<view class="body">
		<view class="nabBar" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_zx.png'); background-size: cover">
			<u-navbar bgColor="rgba(255,255,255,0)" :placeholder="true" :leftIconSize="0"></u-navbar>
		</view>
		<view class="box_7">
			<view class="cs_group_4">
				<view class="image-wrapper_19">
					<view class="image_10-1" v-for="item in 4" :key="item">
						<image style="width: 100; height: 100%" src="/static/image/zy.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="cs_box_1">
			<view class="box_33">
				<view class="cs_text-wrapper_6">
					<u-tabs
						:list="listTab"
						:lineWidth="55"
						lineColor="#4E7198"
						:activeStyle="{
							color: '#4E7198',
							fontWeight: 'bold'
						}"
					></u-tabs>
				</view>
				<!-- 瀑布流 -->

				<view class="" style="margin-top: 80rpx; width: 90%; margin: auto">
					<custom-waterfalls-flow :value="list" style="width: 90%; margin: auto">
						<view class="item" style="position: relative" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
							<view class="title_pubu">
								{{ item.title }}
							</view>
							<!-- <view class="desc">{{ item.desc }}</view> -->
						</view>
					</custom-waterfalls-flow>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listTab: [
				{
					name: '百花齐放',
					tabid: 4
				},
				{
					name: '集体经济',
					tabid: 1
				},
				{
					name: '招商引资',
					tabid: 2
				},
				{
					name: '医疗服务',
					tabid: 3
				},

				{
					name: '百家争鸣',
					tabid: 5
				}
			],
			list: [
				{
					image: 'https://imagepphcloud.thepaper.cn/pph/image/117/155/574.jpg',
					title: '让广大农民过上更好的生活 ',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://p2.itc.cn/images01/20220426/d7aa1613f3504eb3aec5332913bfc796.jpeg',
					title: '助力乡村振兴教师志愿者下乡支教 ',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://img2.baidu.com/it/u=2262288823,1799977930&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=436',
					title: '厦门实施乡村振兴',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://img0.baidu.com/it/u=214322660,1036744599&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=404',
					title: '把握乡村振兴战略',
					desc: '描述描述描述描述描述描述描述描述1'
				},
				{
					image: 'https://5b0988e595225.cdn.sohucs.com/images/20190524/89ec932d7834457092b8b568d5deeb1b.jpeg',
					title: '新时代文明实践乡村振兴的小松序曲',
					desc: '描述描述描述描述描述描述描述描述2'
				},

				{
					image: 'https://pic.rmb.bdstatic.com/bjh/news/1acf2fad4a4c3167d7ac23bbfe3cabad.jpeg',
					title: '透过镜头看农村生活新画卷',
					desc: '描述描述描述描述描述描述描述描述2'
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
/* 村史 */
.cs_box_1 {
	display: flex;
	flex-direction: column;
	width: 750rpx;
}
.nabBar {
	height: 220rpx;
}

.title_pubu {
	width: 100%;
	height: 50rpx;
	/* background-color: rgba(202, 0, 0, 0.3); */
	background-color: rgba(60, 213, 243, 0.3);
	font-size: 30rpx;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.box_33 {
	display: flex;
	flex-direction: column;
}
.cs_text-wrapper_6 {
	width: 702rpx;
	height: 36rpx;
	margin: 15rpx 0 80rpx 48rpx;
}

.box_7 {
	display: flex;
	flex-direction: column;
	width: 749rpx;
}
.cs_group_4 {
	display: flex;
	flex-direction: column;
	width: 749rpx;
	margin-top: -40rpx;
	border-radius: 46rpx 46rpx 0 0;
	background-color: #f8f8f8;
}
.image-wrapper_19 {
	width: 684rpx;
	height: 276rpx;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	margin: 45rpx 0 0 35rpx;
}

.image_10-1 {
	width: 330rpx;
	height: 126rpx;
	margin: 0 24rpx 24rpx 0;
	margin-right: 0rpx;
}
</style>