MinNan/pages/jiyi/jiyi.vue

<template>
	<view class="">
		<view class="box">
			<view class="nabBar" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jiyi_zxc.png'); background-size: cover">
				<u-navbar title="记忆" bgColor="rgba(255,255,255,0)" :placeholder="true" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
			</view>

			<view class="box_15">
				<u-swiper previousMargin="40" nextMargin="40" :autoplay="true" showTitle :height="150" :list="bannerlist" :circular="true" radius="5" bgColor="#ffffff"></u-swiper>
			</view>
			<view class="box_1">
				<view class="box_20">
					<view class="block_9">
						<button bindtap="onClick" class="button_1">
							<text lines="1" class="text_1">城市记忆</text>
						</button>
						<button bindtap="onClick" class="button_2" @click="cunShiBtn">
							<text lines="1" class="text_2">村史馆</text>
						</button>
					</view>
					<view class="block_10">
						<button bindtap="onClick" class="button_3">
							<text lines="1" class="text_3">区史馆</text>
						</button>
						<button bindtap="onClick" class="button_5">
							<text lines="1" class="text_4">校史馆</text>
						</button>
						<button bindtap="onClick" class="button_4">
							<text lines="1" class="text_5">医史馆</text>
						</button>
					</view>

					<view class="text-wrapper_4">
						<text lines="1" class="text_6">经典推荐</text>

						<!-- <text lines="1" class="text_7">查看更多》</text> -->
					</view>
					<!-- 瀑布流 -->

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

		<mntabBar footerTab="1" :messageCount="0"></mntabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
let that;
export default {
	data() {
		return {
			bannerlist: [
				'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',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt4.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt5.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'
				}
			]
		};
	},
	onLoad(option) {
		that = this;
		// this.getBannerList();
	},
	computed: {
		...mapState(['ceShi'])
	},
	methods: {
		cunShiBtn() {
			uni.navigateTo({
				url: '/index_fenbao/cs_liebiao/cs_liebiao'
			});
		},
		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
							});
						}
					}
				}
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	/* background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png'); */
	/* background-size: 100% 100%; */
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
.nabBar {
	height: 340rpx;
}
.u-swiper.data-v-6b019429 {
	background-color: rgba(0, 0, 0, 0) !important;
}
/deep/.column-value.data-v-ddfcbb1c {
	border-radius: 25rpx 60rpx 0rpx 30rpx !important;
}
.box_1 {
	position: relative;
	width: 750rpx;
	flex-direction: row;
	display: flex;
}
.title_pubu {
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	text-align: center;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.box_20 {
	position: relative;
	width: 750rpx;

	display: flex;
	flex-direction: column;
}
.block_9 {
	width: 684rpx;
	height: 67rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: auto;
}
.button_1 {
	background-color: rgba(22, 69, 89, 1);
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
	position: relative;
}
.text_1 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}
.image_1 {
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	width: 330rpx;
	height: 67rpx;
}
.button_2 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
	position: relative;
}
.text_2 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.block_10 {
	width: 691rpx;
	height: 67rpx;
	flex-direction: row;
	display: flex;
	margin: 31rpx 0 0 32rpx;
}
.button_3 {
	background: #c3a07b;
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.button_5 {
	background: #5c987b;
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.text_3 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.text-wrapper_1 {
	background-color: rgba(197, 186, 165, 1);
	border-radius: 33rpx;
	height: 67rpx;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
}
.text_4 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}
.button_4 {
	background-color: rgba(91, 84, 84, 1);
	border-radius: 33rpx;
	height: 67rpx;

	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.text_5 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.text-wrapper_4 {
	width: 668rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 33rpx 0 25rpx 49rpx;
}
.text_6 {
	width: 144rpx;
	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_7 {
	width: 107rpx;
	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: 5rpx;
}

.box_15 {
	margin-top: -160rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	height: 360rpx;
	background-color: #ffe4b0;
	display: flex;
	margin-bottom: 35rpx;
	box-sizing: border-box;
	flex-direction: column;
}
</style>