MinNan/index_fenbao/mn_jingshen/mn_jingshen.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="闽南精神" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="header">
			<u-swiper
				:list="mn_spiritList"
				imgMode="aspectFill"
				:height="120"
				:indicator="true"
				:autoplay="true"
				radius="0"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="banner" @click="spiritBtn(index)" v-for="(item, index) in list" :key="item.id">
			<view class="box_img">
				<image style="width: 100%; height: 100%; border-radius: 50%" :src="item.image" mode=""></image>
			</view>
			<view class="" style="line-height: 65rpx">
				<view class="">{{ item.name }}</view>
				<view class="" style="width: 450rpx">{{ item.title }}</view>
			</view>
			<view class="">
				<uni-icons type="forward" size="24"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			id: '' /* 模型id */,
			main_body_id: '',
			mn_spiritList: [
				'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: [],
			// 闽南精神列表内容
			ListDetail: []
		};
	},
	onLoad(o) {
		that = this;
		this.id = o.id;
		this.main_body_id = this.$db.get('main_body_id');
		this.getColumnList(o.id);
	},
	methods: {
		getColumnList(id) {
			this.$api.getColumnList(
				{
					model_id: 3,
					main_body_id: this.main_body_id
				},
				function (res) {
					console.log(res, 'res');
					that.list = res.data;
				}
			);
		},
		// 精神菜单
		spiritBtn(i) {
			uni.navigateTo({
				url: `/index_fenbao/mn_jingshen/xiang_qing?id=${this.id}&main_body_column_id=${this.list[i].id}&title=${this.list[i].name}`
			});
		}
	}
};
</script>

<style>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.header {
	width: 100%;
	height: 255rpx;
}
.banner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-left: 32rpx;
	margin-bottom: 20rpx;
	height: 198rpx;
	background: #ffffff;
	border-radius: 99rpx 0rpx 0rpx 99rpx;
	padding-left: 10rpx;
}
.box_img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
}
</style>