construction_site_supervision/pages/project_supervision/project_detail/project_detail.vue

<template>
	<view>
		<u-tabs :list="tabList" class='tabs' @change="activedIndexChanged"></u-tabs>
		<view class="sized-box"></view>
		<ProjectDetailHome v-if="activedIndex==0"></ProjectDetailHome>
		<ProjectProgress v-else-if="activedIndex==1"> </ProjectProgress>
		<QualityManage v-else-if="activedIndex==2"> </QualityManage>
		<view v-else>
			<text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dolor similique molestiae, nostrum
				ducimus provident aperiam consequuntur adipisci id in impedit rem officiis ipsam alias error! Ipsam
				facere numquam omnis.</text>
		</view>
	</view>
</template>

<script>
	import ProjectDetailHome from './project_detail_home/project_detail_home.vue'
	import ProjectProgress from './project_progress/project_progress.vue'
	import QualityManage from './quality_manage/quality_manage.vue'
	export default {
		name: 'ProjectHome',
		components: {
			ProjectDetailHome,
			ProjectProgress,
			QualityManage
		},
		data() {
			return {
				activedIndex: 2,
				tabList: [{
						name: '主页'
					}, {
						name: '进度管理'
					},
					{
						name: '质量管理'
					},
					{
						name: '安全管理'
					},

				]
			}
		},
		methods: {
			activedIndexChanged(item) {
				this.activedIndex = item.index;
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.tabs {
		position: fixed;
		width: 100%;
		z-index: 99;
		background-color: white;
	}

	.sized-box {
		height: 88rpx;
	}
</style>