<template>
	<view class="index-container">
		<view class="index-content">
			<Index v-if="pageFlag === 'Index'" @click="changtab()"></Index>
			<Cat v-else-if="pageFlag === 'Cat'"></Cat>
			<Ser v-else-if="pageFlag === 'Ser'"></Ser>
			<My v-else-if="pageFlag === 'My'"></My>
		</view>
		<tabBar :name="pageFlag" @changtab="changtab()"></tabBar>
	</view>
</template>

<script>
	import My from '@/components/my/index.vue';
	import Index from "@/components/index/index.vue";
	import Cat from "@/components/category/index.vue";
	import Ser from "@/components/service/index.vue";
	import tabBar from "@/components/tabBar/index.vue";
	export default {
		components: {
			Ser,
			Index,
			Cat,
			My,
			tabBar
		},
		data: () => ({
			pageFlag: 'Index'
		}),
		methods: {
			changtab(name) {
				this.pageFlag = name;
			},
		}
	}
</script>

<style>
</style>