yudao-dev/src/views/quality/currentData/index.vue

<template>
	<div class="currentDataContainer">
		<div class="topBox">
			<el-menu
				:default-active="activeName"
				mode="horizontal"
				@select="handleSelect">
				<el-menu-item index="currentTest">当前检测数据</el-menu-item>
				<el-menu-item index="24hour">24小时检测数据</el-menu-item>
			</el-menu>
		</div>
		<div class="bottomBox">
			<!-- 当前检测数据 -->
			<div v-if="activeName === 'currentTest'">
				<CurrentTest />
			</div>
			<!-- 24小时检测数据 -->
			<div v-if="activeName === '24hour'">
				<HourData />
			</div>
		</div>
	</div>
</template>
<script>
import CurrentTest from './currentTest.vue';
import HourData from './hourData.vue';
export default {
	name: 'currentData',
	data() {
		return {
			activeName: 'currentTest',
		};
	},
	components: {
		CurrentTest,
		HourData,
	},
	methods: {
		handleSelect(name) {
			this.activeName = name;
		},
	},
};
</script>
<style scoped lang="scss">
.currentDataContainer {
	width: 100%;
	min-height: calc(100vh - 164px);
	background: rgba(242, 244, 249, 1);
	.topBox {
		.el-menu {
			background-color: #f2f4f9;
			margin-bottom: 8px;
		}
		.el-menu.el-menu--horizontal {
			border-bottom: none;
			width: 100%;
			.el-menu-item {
				height: 48px;
				line-height: 48px;
				width: calc((100% / 2) - 4px);
				border-radius: 8px;
				background-color: #fff;
				font-size: 16px;
				font-weight: 500;
				color: rgba(22, 22, 22, 0.65);
				text-align: center;
			}
			:first-child {
				margin-right: 8px;
			}
			.el-menu-item.is-active {
				border-width: 4px;
				color: #161616;
			}
		}
		.el-tabs__active-bar {
			display: none;
		}
	}
	.bottomBox {
		height: calc(100vh - 220px);
		background: #fff;
		padding: 16px;
		border-radius: 8px;
		overflow-y: auto;
	}
}
</style>