cunShiGuan/pages/index/index.vue

<template>
	<!-- 村史页面 -->
	<view class="body" v-else>
		<u-navbar :placeholder="true" bgColor="rgba(195, 232, 249)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831">
			<view class="u-nav-slot" slot="left" style="display: flex; align-items: center">
				<view class="an" style="width: 400rpx; margin-left: 50rpx; margin-top: -40rpx; line-height: 40rpx">
					<u-notice-bar text="系统消息提示"></u-notice-bar>
				</view>
			</view>
		</u-navbar>
		<view class="block_2">
			<view class="box_16">
				<u-swiper
					:list="cs_swiperList"
					imgMode="aspectFill"
					:height="210"
					showTitle
					:indicator="true"
					:autoplay="true"
					:circular="true"
					@click="bannerClick"
					indicatorMode="dot"
					indicatorActiveColor="#fff"
					indicatorInactiveColor="rgba(255, 7, 23, 0.3)"
				></u-swiper>
			</view>
			<view
				class="section_5"
				style="
					background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_bj.png');

					background-size: 100% 100%;
				"
			>
				<view class="group_3">
					<view class="list_7">
						<view class="image-text_20-0" @click="cs_caiDan(index)" v-for="(item, index) in menuList" :key="item">
							<image style="width: 100%" :src="item.img"></image>
							<text lines="1" class="text-group_2-0">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="text-wrapper_13">
					<text lines="1" class="text_7">新鲜事</text>
					<text lines="1" class="text_8">查看更多》</text>
				</view>

				<view class="banxin2">
					<view class="cs_box_22" v-for="item in xinXianList" :key="item">
						<view class="cs_block_5">
							<image style="width: 100%; height: 100%; border-radius: 0 50rpx 0 20rpx" :src="item.img"></image>

							<view class="tag_1">
								<text lines="1" class="text_9">{{ item.title }}</text>
							</view>

							<view class="tag_3">
								<!-- <text lines="1" class="text_10">红色文化活动</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	components: {},
	onLoad(option) {
		that = this;
		this.getBannerList();
	},
	data() {
		return {
			bannerlist: ['https://feicheng.16fw.cn:1443/uploads/20230423/55f2ea70baa2e7ce617f939b70026472.jpg'],
			cs_swiperList: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_sy_lbt1.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_sy_lbt2.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_sy_lbt3.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_sy_lbt4.png'
			],
			menuList: [
				{
					name: '红色文化',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp1.png',
					path: '/index_fenbao/hongsewenhua/hongsewenhua'
				},
				{
					name: '乡愁乡音',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp2.png'
				},
				{
					name: '民俗文化',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp3.png'
				},
				{
					name: '认主归宗',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp4.png'
				},
				{
					name: '乡村振兴',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp5.png'
				},
				{
					name: '智慧助老',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp6.png'
				},

				{
					name: '全民运动',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp7.png'
				},

				{
					name: '村有圈',
					img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cd_tp8.png',
					path: '/index_fenbao/faBuWenZhang/faBuWenZhang'
				}
			],
			xinXianList: [
				{
					img: 'https://p5.itc.cn/q_70/images03/20211006/36f4a86801494fec87b552ba660c44bd.jpeg',
					title: '每日趣事'
				},
				{
					img: 'https://pic.rmb.bdstatic.com/bjh/news/bf871bc8d10a1430e7be489e88dea5cc.jpeg',
					title: '全民健身'
				}
			]
		};
	},
	/* 页面触底 */
	onReachBottom() {
		console.log('触底了');
	},
	methods: {
		// 菜单
		cs_caiDan(index) {
			uni.navigateTo({
				url: this.menuList[index].path
			});
		},
		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>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;

	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	top: -20px;
	padding-top: 10rpx;
}
/deep/.u-icon__icon.data-v-2ee87dc9 {
	top: -7rpx !important;
	left: 0 !important;
}
.u-swiper__wrapper__item__wrapper__title {
	height: 80rpx !important;
	font-size: 48rpx !important;
}
.u-swiper__indicator {
	z-index: 2 !important;
}
.u-notice-bar {
	height: 60rpx;
	background-color: #ffffff;
	border-radius: 50rpx;
}
.u-notice__content {
	height: 40rpx;
	line-height: 24rpx;
}
.banxin {
	width: 100%;
	height: 100rpx;
	margin: auto;
	background-color: yellowgreen;
}
.banxin2 {
	width: 90%;
	margin: auto;
}
.u-icon__icon {
	top: -10rpx !important;
	left: 0 !important;
	margin-left: 10rpx;
}
.u-nav-slot {
	margin-top: 30rpx;
}
.cs_box_22 {
	height: 345rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin-bottom: 50rpx;
}
.cs_block_5 {
	position: relative;
	height: 345rpx;
	width: 686rpx;
	display: flex;
	flex-direction: column;
}

.tag_1 {
	position: absolute;
	background-color: rgba(77, 113, 153, 1);
	border-radius: 9rpx 9rpx 32rpx 0rpx;
	height: 48rpx;
	display: flex;
	flex-direction: column;
	width: 145rpx;
}
.text_9 {
	width: 47rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 12rpx 0 0 19rpx;
}
.tag_2 {
	position: absolute;
	bottom: 36rpx;
	right: 20rpx;
}
.text_10 {
	width: 147rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}
.block_2 {
	width: 750rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.box_16 {
	width: 750rpx;
	height: 420rpx;
	display: flex;
	flex-direction: column;
}

.section_5 {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.group_3 {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 32rpx;
	position: relative;
	width: 687rpx;
	display: flex;
	flex-direction: column;
	margin: 40rpx 0 0 31rpx;
}
.list_7 {
	display: flex;
	flex-flow: wrap;
	display: flex;
	margin: 30rpx 0 0 31rpx;
}
.image-text_20-0 {
	width: 130rpx;
	height: 150rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 1rpx 34rpx 20rpx 0;
}

.text-group_2-0 {
	width: 94rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: black;
	font-size: 24rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 7rpx 0 0 17rpx;
}

.text-wrapper_13 {
	width: 669rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 36rpx 0 32rpx 49rpx;
}
.text_7 {
	width: 105rpx;
	height: 34rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 36rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}
.text_8 {
	width: 108rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 7rpx;
}

.tag_3 {
	position: absolute;
	right: 80rpx;
	bottom: 10rpx;
	height: 48rpx;
	display: flex;
	flex-direction: column;
}
</style>