cunShiGuan/pages/jiyi/jiyi.vue

<template>
	<!-- 村史页面 -->
	<view class="body">
		<view class="cs_nabBar" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_wj_bj.png'); background-size: cover">
			<u-navbar title="记忆" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		</view>
		<view class="block_1">
			<view class="section_1">
				<view class="image-wrapper_2" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jp.png'); background-size: 100% 100%">
					<!-- 轮播图 -->
					<view class="" style="width: 90%; margin: auto; margin-top: 50rpx">
						<u-swiper
							:list="bannerlist"
							imgMode="aspectFill"
							: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>
				</view>
				<view class="box_2">
					<view class="cs_text-wrapper_1">
						<!-- <text lines="1" class="cs_text_2">文物博览</text> -->
						<text lines="1" class="cs_text_2">经典推荐</text>
						<text lines="1" class="cs_text_3">查看更多》</text>
					</view>
				</view>
			</view>
			<view class="cs_group_12">
				<!-- 瀑布流 -->

				<custom-waterfalls-flow :value="csList" style="width: 90%; margin: auto">
					<view class="item" style="position: relative" v-for="(item, index) in csList" :key="index" slot="slot{{index}}">
						<view class="title_pubu">
							{{ item.title }}
						</view>
						<!-- <view class="desc">{{ item.desc }}</view> -->
					</view>
				</custom-waterfalls-flow>
			</view>
			<!-- 	<view class="section_4">
				<view class="box_7" v-for="item in 4" :key="item">
					<view class="block_2">
						<view class="text-group_3">
							<text lines="1" class="cs_text_12">五代闽国铜鎏金王延翰狮子炉</text>
							<text lines="1" class="cs_text_13">为五代闽国有铭文铸器之孤件</text>
						</view>
						<view class="text-wrapper_6">
							<text lines="1" class="text_14">前往查看</text>
						</view>
					</view>
					<view class="cs_block_3">
						<image style="width: 100%; height: 100%" src="../../static/image/圆角矩形 840 拷贝.png"></image>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
let that;

export default {
	components: {},
	data() {
		return {
			bannerlist: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt4.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt5.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt2.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt1.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt3.jpg'
			],
			csList: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy2.png',
					title: '厦门老火车站',
					desc: '描述描述描述描述描述描述描述描述1'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy3.png',
					title: '海堤工程师总工程师殷孝友',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy1.png',
					title: '花木兰',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy4.png',
					title: '国务院为殷孝友颁发的荣誉证书',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy5.png',
					title: '人民英雄',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy6.png',
					title: '高崎山头日夜保卫高集海堤堤线安全',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy7.png',
					title: '移山填海',
					desc: '描述描述描述描述描述描述描述描述2'
				},

				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy8.png',
					title: '古宅',
					desc: '描述描述描述描述描述描述描述描述2'
				},

				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_jy9.png',
					title: '厦门老地图',
					desc: '描述描述描述描述描述描述描述描述2'
				}
			]
		};
	},
	onLoad(option) {
		that = this;
		this.getBannerList();
	},
	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>
.body {
	/* padding-top: 20px; */
	/* background-image: url('https://feicheng.16fw.cn:1443/uploads/20230512/88f8347924d08296bbde9d55afd74c15.jpg');
	background-size: 100% 100%; */
	background-attachment: fixed;
}
.nabBar {
	height: 500rpx;
}
.u-status-bar {
	opacity: 0 !important;
}
.u-navbar__content.data-v-95dec1ae {
	background-color: transparent !important;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.title_pubu {
	width: 100%;
	height: 50rpx;
	background-color: rgba(202, 0, 0, 0.3);
	font-size: 30rpx;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.cs_group_12 {
	width: 100%;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin-top: 50rpx;
}
.block_1 {
	width: 750rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 20rpx;
	background-color: #f8f8f8;
}
.image-wrapper_2 {
	width: 750rpx;
	height: 350rpx;
}
.section_1 {
	position: relative;
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background-color: #f8f8f8;
	border-radius: 30rpx 30rpx 0 0;
}

.box_1 {
	width: 400rpx;
	height: 56rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 17rpx 0 0 321rpx;
}
.text_1 {
	width: 69rpx;
	height: 34rpx;
	overflow-wrap: break-word;
	color: rgba(18, 18, 18, 1);
	font-size: 36rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
	margin-top: 11rpx;
}
.box_2 {
	width: 749rpx;
	display: flex;
	flex-direction: column;
	margin: 50rpx 0 0 0;
	background-color: #cceef5;
	border-radius: 30rpx 30rpx 0 0;
}

.cs_text-wrapper_1 {
	width: 668rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 46rpx 0 15rpx 50rpx;
}
.cs_text_2 {
	width: 140rpx;
	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;
}
.cs_text_3 {
	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;
}
.text-wrapper_1 {
	width: 668rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 46rpx 0 15rpx 50rpx;
}
.text_2 {
	width: 140rpx;
	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_3 {
	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;
}

.section_4 {
	width: 686rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 0 0 32rpx;
}

.box_7 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 170rpx;
	margin-top: 20rpx;
	flex-direction: row;
	display: flex;
}
.block_2 {
	width: 363rpx;
	height: 122rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 28rpx 0 0 19rpx;
}
.text-group_3 {
	width: 361rpx;
	height: 62rpx;
	margin-left: 2rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.text_12 {
	width: 361rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_13 {
	width: 280rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 22rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 22rpx;
	margin-top: 13rpx;
}
.text-wrapper_6 {
	background-color: rgba(60, 213, 243, 1);
	border-radius: 10rpx;
	height: 44rpx;
	margin-top: 16rpx;
	display: flex;
	flex-direction: column;
	width: 129rpx;
}
.text_14 {
	width: 93rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 11rpx 0 0 18rpx;
}
.block_3 {
	background-color: rgba(255, 97, 95, 1);
	border-radius: 10rpx;
	width: 170rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
	margin: 0 1rpx 0 133rpx;
}
</style>