electron-ban-pai/src/components/kindIntroduction.vue

<template>
	<div>
		<!-- 主体内容 -->
		<div class="attendance-box">
			<div class="attendance-left">
				<div @click="chooseNavEv(index)" class="introduction-item" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
					<div class="item-left">
						<img :src="item.icon">
						<div>{{item.title}}</div>
					</div>
					<img src="../../static/img/kindergartenIntroduce/icon-choose.png" >
				</div>
			</div>
			<div class="introduction-right">
				<!-- 园区介绍 -->
				<parkIntroduce v-if="navIndex==0"></parkIntroduce>
				<!-- 教师风采 -->
				<teacherStyle v-if="navIndex==1"></teacherStyle>
				<!-- 新闻动态 -->
				<newsInformation v-if="navIndex==2"></newsInformation>
				<!-- 公告信息 -->
				<noticeInfo v-if="navIndex==3"></noticeInfo>
			</div>
		</div>
		
	</div>
</template>
<script>
	// 园区介绍
	import parkIntroduce from '@/components/parkIntroduce.vue';
	// 教师风采
	import teacherStyle from '@/components/teacherStyle.vue';
	// 新闻动态
	import newsInformation from '@/components/newsInformation.vue';
	// 公告信息
	import noticeInfo from '@/components/noticeInfo.vue';
	export default {
		components:{
			parkIntroduce,
			teacherStyle,
			newsInformation,
			noticeInfo
		},
		name: 'babyActivity',
		data() {
			return {
				navArr:[
					{icon:require('../../static/img/kindergartenIntroduce/icon-parkIntroduce.png'),title:'园区介绍'},
					{icon:require('../../static/img/kindergartenIntroduce/icon-teacher-style.png'),title:'教师风采'},
					{icon:require('../../static/img/kindergartenIntroduce/icon-new.png'),title:'新闻动态'},
					{icon:require('../../static/img/kindergartenIntroduce/icon-notice-msg.png'),title:'公告信息'},
				],
				navIndex:0,
			}
		},
		methods: {
			chooseNavEv(e){
				this.navIndex = e;
			}
		},
		mounted() {
			
		}
	}
</script>