feiYi/pages/index/index.vue

<template>
	<view class="body">
		<view class="header">
			<view class="tit">湖里文化遗产保护中心</view>
			<view class="thumbnail_1">
				<image style="width: 100%; height: 100%" src="/static/img/img_seal@2x.png"></image>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="box">
			<view v-for="(item, index) in List" :key="item.name" class="box_item" @click="fybkBtn(index)">
				<view class="box_img">
					<image style="width: 100%; height: 100%" :src="item.img"></image>
				</view>
				<view class="box_tit">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			List: [
				{
					name: '湖里文化',
					img: '/static/img/img_湖里文化@2x.png',
					path: '/pages/index/huLiWenHua/huLiWenHua'
				},
				{
					name: '非遗百科',
					img: '/static/img/img_非遗百科@2x.png',
					path: '/pages/index/feiYiBaiKe/feiYiBaiKe'
				},
				{
					name: '非遗视频',
					img: '/static/img/img_非遗视频@2x.png',
					path: '/pages/index/feiYiShiPin/feiYiShiPin'
				},
				{
					name: '互动问答',
					img: '/static/img/img_互动问答@2x.png',
					path: '/pages/index/huDongWenDa/huDongWenDa'
				},
				{
					name: '非遗概览',
					img: '/static/img/img_非遗概览@2x.png',
					path: '/pages/index/feiYiGaiLan/feiYiGaiLan'
				},
				{
					name: '非遗政策',
					img: '/static/img/img_非遗政策@2x.png',
					path: '/pages/index/feiYiZhengCe/feiYiZhengCe'
				}
			]
		};
	},
	methods: {
		fybkBtn(index) {
			uni.navigateTo({
				url: `${this.List[index].path}`
			});
		}
	}
};
</script>

<style>
.body {
	width: 100%;
	/* 	background: url('@/static/img/bg.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y; */
	height: 1820rpx;
	padding-top: 100rpx;
}
.box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 1600rpx;
	height: 1000rpx;
	margin: auto;
	margin-top: 100rpx;
}
.header {
	margin-left: 20%;
	width: 960rpx;
	height: 96rpx;
	/* margin-top: 60rpx; */
	align-items: center;
	display: flex;
}
.tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	/* width: 500rpx; */
	height: 96rpx;
	font-size: 48rpx;
	letter-spacing: 0.3em;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 100rpx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.thumbnail_1 {
	width: 14rpx;
	height: 45rpx;
}
.box_img {
	width: 160rpx;
	height: 160rpx;
	margin: auto;
}
.box_item {
	width: 420rpx;
	height: 280rpx;
	cursor: pointer;
}
.box_tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(188, 95, 41, 1), rgba(91, 60, 41, 1) 100%);
	width: 420rpx;
	height: 96rpx;
	text-align: center;
	font-size: 56rpx;
	letter-spacing: 0.2em;
	font-family: nzgrRuyinZouZhangKai-Regular, nzgrRuyinZouZhangKai;
	white-space: nowrap;
	line-height: 100rpx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>