feiYi/components/LeftNav/LeftNav.vue

<template>
	<view class="">
		<view class="box">
			<view class="box2">
				<view class="banner" @click="navBtn(index)" v-for="(item, index) in navList" :key="item.name">
					<view class="">
						<image style="width: 120rpx; height: 120rpx" :src="item.img"></image>
					</view>
					<view class="nav_tit">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'LeftNav',

	data() {
		return {
			navList: [
				{
					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'
				},

				{
					name: '回到探索页',
					img: '/static/img/img_avatar@2x(1).png',
					path: '/pages/index/startPage'
				},
				{
					name: '回到首页',
					img: '/static/img/icon_back@2x.png',
					path: '/pages/index/index'
				}
			]
		};
	},
	methods: {
		navBtn(index) {
			console.log(this.navList[index].path);
			uni.navigateTo({
				url: `${this.navList[index].path}`
			});
		}
	}
};
</script>

<style>
.box {
	width: 348rpx;
	height: 1080rpx;
	margin: auto;
	margin-top: 30%;
	background-color: #f8efe1;
}
.box2 {
	margin-top: -100rpx;
	margin-left: -80rpx;
}

.banner {
	width: 800rpx;
	height: 160rpx;
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
	/* background-color: aqua; */
}
.nav_tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	font-size: 42rpx;
	letter-spacing: 0.2em;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-left: 50rpx;
}
</style>