MinNan/pages/index/index.vue

<template>
	<view class="">
		<view class="box">
			<view class="nabBar">
				<u-navbar @leftClick="leftClick" title="首页" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831">
					<view class="u-nav-slot" slot="left">
						<text>切换城市</text>
						<uni-icons type="tune" size="20"></uni-icons>
					</view>
				</u-navbar>
				<!-- <view class="" style="position: absolute; top: 55rpx; left: 40rpx">
				<text>切换城市</text>
				<uni-icons type="tune" size="20"></uni-icons>
			</view> -->
			</view>
			<view class="group_1">
				<view class="group_25 banxin2">
					<u-swiper
						:list="mn_swiperList"
						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>
			</view>
			<template>
				<view></view>
			</template>

			<view class="block_8">
				<view @click="moreBtn" class="an" style="margin-top: 25rpx">
					<u-notice-bar text="系统消息提示"></u-notice-bar>
				</view>

				<view class="text-wrapper_17">
					<text lines="1" class="text_32">闽南文化推荐</text>
					<!-- <text @click="moreBtn" lines="1" class="text_33">查看更多》</text> -->
				</view>
				<!-- 闽南精神 -->
				<view class="group_js">
					<view class="box_js" @click="jingshenBtn">
						<image class="box_19_js" src="https://p9.itc.cn/q_70/images03/20210721/23bcf2d618cb4f8a941eccd923294e78.png"></image>
						<view class="image-text_js">
							<image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_js.png" class="image_js"></image>
							<text lines="1" class="text-group_js">闽南精神</text>
						</view>
					</view>
				</view>
				<view class="grid_2">
					<view class="group_23" @click="jianzhuBtn">
						<view class="box_19">
							<image class="box_19_img" src="https://img1.baidu.com/it/u=2349874273,3785455421&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"></image>
							<view class="image-text_13">
								<image src="/static/image/2019-07-03000000000018.png" class="image_20"></image>
								<text lines="1" class="text-group_10">建筑文化</text>
							</view>
						</view>
					</view>
					<view class="group_24" @click="minsuBtn">
						<view class="box_19">
							<image class="box_19_img" src="https://img1.baidu.com/it/u=2977394516,3415116795&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=361"></image>
							<view class="image-text_13">
								<image src="/static/image/传统吉祥纹样17.png" class="image_20"></image>
								<text lines="1" class="text-group_10">民俗宗教</text>
							</view>
						</view>
					</view>
					<view class="group_13" @click="feiyiBtn">
						<view class="box_19">
							<image class="box_19_img" src="https://img0.baidu.com/it/u=2448527499,3053317408&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=394"></image>
							<view class="image-text_13">
								<image src="/static/image/flower.png" class="image_20"></image>
								<text lines="1" class="text-group_10">非遗传承</text>
							</view>
						</view>
					</view>
					<view class="group_14" @click="minyuBtn">
						<view class="box_19">
							<image class="box_19_img" src="https://img1.baidu.com/it/u=2717270821,618986584&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=327"></image>
							<view class="image-text_13">
								<image src="/static/image/BSV.png" class="image_20"></image>
								<text lines="1" class="text-group_10">闽南语</text>
							</view>
						</view>
					</view>

					<view class="text-wrapper_18">
						<text lines="1" class="text_23">精彩村史</text>
						<text lines="1" class="text_24" @click="cs_listBtn">查看更多》</text>
					</view>
					<view class="cc banxin2" style="width: 100%; display: flex; justify-content: space-between">
						<view class="" style="width: 320rpx">
							<u-swiper height="150" :autoplay="true" circular :list="bannerlist1" previousMargin="30" nextMargin="30" radius="5" bgColor="#ffffff"></u-swiper>
						</view>
						<view class="" style="width: 320rpx">
							<u-swiper
								height="150"
								:autoplay="true"
								:circular="true"
								:list="bannerlist2"
								previousMargin="30"
								nextMargin="30"
								radius="5"
								bgColor="#ffffff"
							></u-swiper>
						</view>
					</view>
					<view class="text-wrapper_18">
						<text lines="1" class="text_23">精彩推荐</text>
						<!-- <text lines="1" class="text_8">查看更多》</text> -->
					</view>
					<view class="ad" style="padding-bottom: 100rpx">
						<view class="box_22" v-for="item in tj_List" :key="item">
							<view class="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">文物</text>
								</view>

								<view class="tag_2">
									<text lines="1" class="text_10">文物精品展</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

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

<script>
import { mapState } from 'vuex';

let that;
export default {
	components: {},
	onLoad(option) {
		that = this;
		// this.getBannerList();
	},
	computed: {
		...mapState(['ceShi'])
	},
	data() {
		return {
			value1: 0,
			da: 1,
			db: 2,
			tj_List: [
				{ img: 'https://t12.baidu.com/it/u=961699429,199854606&fm=30&app=106&f=JPEG?w=640&h=427&s=E2804EA45471118C54BC7E610300E070' },
				{ img: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeTJ.png' }
			],
			mn_swiperList: [
				'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'
			],

			bannerlist1: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/gd.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/hk.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/hp.jpg'
			],
			bannerlist2: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sz.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tp.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/zz.jpg'
			]
		};
	},
	/* 页面触底 */
	onReachBottom() {
		console.log('触底了');
		// console.log(this.ceShi);
	},
	methods: {
		// 闽南精神
		jingshenBtn() {
			uni.navigateTo({
				url: '/index_fenbao/mn_jingshen/mn_jingshen'
			});
		},
		leftClick() {
			console.log('切换城市');
		},
		// 建筑
		jianzhuBtn() {
			uni.navigateTo({
				url: '/index_fenbao/jianzhu/jianzhu'
			});
		},
		// 民俗
		minsuBtn() {
			uni.navigateTo({
				url: '/index_fenbao/minsu/minsu'
			});
		},
		// 闽南语
		minyuBtn() {
			uni.navigateTo({
				url: '/index_fenbao/minNanyu/minNanyu'
			});
		},
		// 非遗
		feiyiBtn() {
			uni.navigateTo({
				url: '/index_fenbao/feiyi/feiyi'
			});
		},
		// 闽南文化推荐,
		moreBtn() {
			uni.navigateTo({
				url: '/index_fenbao/mn_wenhua/mn_wenhua'
			});
		},

		// 村史列表
		cs_listBtn() {
			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
							});
						}
					}
				}
			});
		},
		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-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png'); */
	/* background-size: 100% 100%; */
	background-color: #f8f8f8;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
/deep/.u-icon__icon.data-v-2ee87dc9 {
	top: 0 !important;
	left: 5rpx !important;
}

.qh_icon {
	position: absolute;
	top: 0;
	left: 0;
}
.banxin {
	width: 100%;
	height: 100rpx;
	margin: auto;
	/* background-color: yellowgreen; */
}
.banxin2 {
	width: 90%;
	margin: auto;
}

.u-nav-slot {
	margin-left: 20rpx;
}
.nabBar {
	/* height: 200rpx; */
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeBJ.png');
	background-size: cover;
}

.group_1 {
	width: 750rpx;
	display: flex;
	margin-top: 130rpx;
	flex-direction: column;
	justify-content: flex-end;
}
.group_25 {
	margin-top: -120rpx;
	display: flex;
	flex-direction: column;
}
.image_3 {
	width: 696rpx;
	height: 28rpx;
	margin: 13rpx 0 0 29rpx;
}
.nav-bar_4 {
	width: 746rpx;
	height: 81rpx;
	margin-top: 10rpx;
	flex-direction: row;
	display: flex;
}
.group_33 {
	height: 26rpx;
	display: flex;
	flex-direction: column;
	width: 147rpx;
	margin: 23rpx 0 0 32rpx;
}
.group_34 {
	width: 147rpx;
	height: 26rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}
.text_21 {
	width: 110rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.label_5 {
	width: 23rpx;
	height: 23rpx;
	margin-top: 1rpx;
}
.text_22 {
	width: 68rpx;
	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: 18rpx 0 0 143rpx;
}
.applet-top-bar_1 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 28rpx;
	width: 155rpx;
	height: 56rpx;
	border: 1px solid rgba(241, 241, 241, 1);
	flex-direction: row;
	display: flex;
	margin: 7rpx 25rpx 0 176rpx;
}
.image_4 {
	width: 53rpx;
	height: 31rpx;
	margin: 13rpx 0 0 24rpx;
}
.label_1 {
	width: 38rpx;
	height: 38rpx;
	margin: 9rpx 21rpx 0 19rpx;
}

.block_8 {
	width: 750rpx;

	display: flex;
	flex-direction: column;
}

.text_1 {
	width: 319rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: PingFang-SC-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 21rpx 281rpx 0 23rpx;
}
.text-wrapper_17 {
	width: 667rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 35rpx 0 0 51rpx;
}
.text_32 {
	width: 211rpx;
	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_33 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.grid_2 {
	width: 687rpx;
	height: 364rpx;
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	margin: 27rpx 0 0 32rpx;
}

.group_js {
	height: 166rpx;
	display: flex;
	flex-direction: column;
	margin: 20rpx 27rpx 0rpx 30rpx;
}
.box_js {
	height: 166rpx;
	position: relative;
	display: flex;
	flex-direction: row;
}
.box_19_js {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}
.box_19_js ::before {
	content: '';
	display: block;
	position: absolute; /* 设置绝对定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2); /* 设置遮罩层颜色和透明度 */
	z-index: 1;
}
.image-text_js {
	width: 233rpx;
	height: 102rpx;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 35rpx 0 0 250rpx;
	z-index: 2;
}
.image_js {
	width: 75rpx;
	height: 65rpx;
	margin-left: 72rpx;
}
.text-group_js {
	width: 233rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}

.group_23 {
	height: 166rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
	margin: 0 27rpx 32rpx 0;
}
.box_19 {
	width: 330rpx;
	height: 166rpx;
	position: relative;
	display: flex;
	flex-direction: row;
}
.box_19_img {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}
.box_19_img ::before {
	content: '';
	display: block;
	position: absolute; /* 设置绝对定位 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2); /* 设置遮罩层颜色和透明度 */
	z-index: 1;
}
.image-text_13 {
	width: 233rpx;
	height: 102rpx;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 35rpx 0 0 56rpx;
	z-index: 2;
}
.image_20 {
	width: 75rpx;
	height: 65rpx;
	margin-left: 72rpx;
}
.text-group_10 {
	width: 233rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}
.group_24 {
	border-radius: 20rpx;
	height: 166rpx;
	margin-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}

.text-group_11 {
	width: 110rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 10rpx;
}
.group_13 {
	border-radius: 20rpx;
	width: 330rpx;
	height: 166rpx;
	display: flex;
	flex-direction: column;
	margin: 0 27rpx 32rpx 0;
}

.group_14 {
	border-radius: 20rpx;
	height: 166rpx;
	margin-bottom: 32rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
}

.image-text_15 {
	width: 193rpx;
	height: 116rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 20rpx 0 0 68rpx;
}
.image_23 {
	width: 93rpx;
	height: 83rpx;
	margin-left: 51rpx;
}
.text-group_6 {
	width: 193rpx;
	height: 27rpx;
	overflow-wrap: break-word;
	color: rgba(255, 228, 176, 1);
	font-size: 28rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	line-height: 28rpx;
	margin-top: 6rpx;
}
.text-wrapper_18 {
	width: 669rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin-top: 45rpx;
	margin-bottom: 40rpx;
}
.text_23 {
	width: 142rpx;
	height: 34rpx;
	color: #312520;
	font-size: 36rpx;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}
.text_24 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}

.text_8 {
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 7rpx;
}
.box_22 {
	height: 345rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin-bottom: 50rpx;
}
.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: 86rpx;
}
.tag_2 {
	position: absolute;
	bottom: 36rpx;
	right: 20rpx;
}
.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;
}
.text-wrapper_20 {
	width: 147rpx;
	height: 29rpx;
	display: flex;
	flex-direction: row;
	margin: 232rpx 0 36rpx 518rpx;
}
.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;
}
</style>