cunShiGuan/pages/huicui/huicui.vue

<template>
	<!-- 村史页面 -->
	<view class="body">
		<view class="cs_nabBar" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jiyi_bj.png'); background-size: cover">
			<u-navbar bgColor="rgba(255,255,255,0)" :placeholder="true" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831">
				<view class="u-nav-slot" slot="left">
					<view class="an" style="width: 500rpx; margin-top: -12rpx">
						<u-search :showAction="false"></u-search>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="block_1">
			<view class="cs_box_1">
				<u-swiper
					:list="bannerlist"
					imgMode="aspectFill"
					:height="120"
					:indicator="true"
					:autoplay="true"
					:circular="true"
					indicatorStyle="bottom: 10px"
					@click="bannerClick"
					indicatorMode="dot"
					indicatorActiveColor="#fff"
					indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
				></u-swiper>

				<view class="group_2">
					<view class="group_10">
						<view class="box_3" v-for="item in hcCdList" :key="item">
							<image style="width: 100%; height: 100%" :src="item.img"></image>
							<text lines="1" class="cs_text_2">{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="text-wrapper_9">
				<u-tabs
					:list="[
						{ name: '广场', tabid: 1 },
						{ name: '发现', tabid: 2 }
					]"
					lineColor="#4E7198"
					:activeStyle="{
						color: '#4E7198',
						fontWeight: 'bold'
					}"
				></u-tabs>
			</view>
			<view class="group_11">
				<view class="text-wrapper_3">
					<text lines="1" class="text_8">文章</text>
				</view>
				<view class="cs_text-wrapper_4">
					<text lines="1" class="text_9">图片</text>
				</view>
				<view class="text-wrapper_5">
					<text lines="1" class="text_10">视频</text>
				</view>
			</view>
			<view class="cs_group_12">
				<!-- 瀑布流 -->

				<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>
</template>

<script>
let that;
export default {
	onLoad(option) {
		that = this;
		this.getBannerList();
	},
	data() {
		return {
			bannerlist: ['https://feicheng.16fw.cn:1443/uploads/20230423/55f2ea70baa2e7ce617f939b70026472.jpg'],
			// 荟萃菜单
			hcCdList: [
				{
					title: '家乡味道',
					img: 'https://feicheng.16fw.cn:1443/uploads/20230418/0392ac25c1668beefa612aa646bf9d46.png'
				},
				{
					title: '文化广场',
					img: 'https://feicheng.16fw.cn:1443/uploads/20230418/e269122cbba9db7b72ed4a1b27b880c5.png'
				},

				{
					title: '村中趣事',
					img: 'https://feicheng.16fw.cn:1443/uploads/20230423/227e4cab316a37d3b6c8c367590b71b3.png'
				},

				{
					title: '健身广场',
					img: 'https://feicheng.16fw.cn:1443/uploads/20230423/cd4e633ce0a68900dd46e1160c93a784.png'
				}
			],
			list: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy1.png',
					title: '传统捏泥人',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy2.png',
					title: '青龙宫',
					desc: '描述描述描述描述描述描述描述描述1'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy3.png',
					title: '火把节',
					desc: '11'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy9.png',
					title: '老物件',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy4.png',
					title: '林后青龙宫',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy10.png',
					title: '书籍',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy7.png',
					title: '建筑',
					desc: '描述描述描述描述描述描述描述描述2'
				},

				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy8.png',
					title: '老钟表',
					desc: '描述描述描述描述描述描述描述描述2'
				},

				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy14.png',
					title: '老物件',
					desc: '描述描述描述描述描述描述描述描述2'
				}
			]
		};
	},
	methods: {
		getBannerList() {
			this.$api.getBannerList({ block: 'home' }, function (res) {
				// console.log(res);
				if (res.code > 0) {
					that.bannerlist = [];
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].type == 'banner') {
							that.bannerlist.push({
								title: res.data[i].title,
								url: that.$config.baseUrl + res.data[i].image,
								page: res.data[i].url
							});
						}
					}
				}
			});
		},
		bannerClick(index) {
			console.log(index);
			this.$common.navigateTo(this.bannerlist[index].page);
		}
	}
};
</script>

<style>
/* 村史 */
.u-navbar__content {
	background-color: transparent;
}
.block_1 {
	position: relative;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
}
.cs_box_1 {
	width: 90%;
	margin: auto;
	margin-top: -525rpx;
	display: flex;
	flex-direction: column;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.cs_nabBar {
	height: 700rpx;
}
.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;
}
.group_2 {
	border-radius: 20rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-center;
	margin-top: 20rpx;
}
.group_10 {
	width: 599rpx;
	height: 108rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 28rpx 0 60rpx 44rpx;
}
.box_3 {
	/* background-color: rgba(255, 97, 95, 1); */
	border-radius: 48rpx;
	width: 108rpx;
	height: 108rpx;
}

.cs_text_2 {
	width: 94rpx;
	height: 23rpx;
	margin-top: 13rpx;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	white-space: nowrap;
	line-height: 24rpx;
}
.text-wrapper_9 {
	width: 250rpx;
	margin: 31rpx 0 0 250rpx;
}
.group_11 {
	width: 620rpx;
	height: 53rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 17rpx 0 0 65rpx;
}
.text-wrapper_3 {
	background-color: rgba(60, 213, 243, 1);
	border-radius: 26rpx;
	height: 53rpx;
	display: flex;
	flex-direction: column;
	width: 180rpx;
}
.text_8 {
	width: 58rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 12rpx 0 0 61rpx;
}
.cs_text-wrapper_4 {
	background-color: rgba(78, 113, 152, 1);
	border-radius: 26rpx;
	height: 53rpx;
	margin-left: 40rpx;
	display: flex;
	flex-direction: column;
	width: 180rpx;
}
.text_9 {
	width: 55rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 13rpx 0 0 63rpx;
}
.text-wrapper_5 {
	background-color: rgba(78, 113, 152, 1);
	border-radius: 26rpx;
	height: 53rpx;
	margin-left: 40rpx;
	display: flex;
	flex-direction: column;
	width: 180rpx;
}
.text_10 {
	width: 59rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
	margin: 13rpx 0 0 61rpx;
}
.cs_group_12 {
	width: 100%;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin-top: 50rpx;
}
</style>