jfcloud-coldchain/snowy-admin-web/src/views/motoring/report/index.vue

<template>
	<div class="query-box">
		<div class="query-head">
			<div class="query-tbas">
				<div class="tbas-title" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">报警列表</div>
				<a-divider type="vertical" style="height: 15px; background-color: #f4f5f7; margin: 8px 20px" />
				<div class="tbas-title" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">报警通知列表</div>
			</div>
		</div>

		<div class="query-body">
			<list ref="listRef" v-if="activeKey == '1'" />
			<noticelist ref="noticelistRef" v-if="activeKey == '2'" />
		</div>
	</div>
</template>
<script setup>
	import List from './list.vue'
	import Noticelist from './noticelist.vue'

	const activeKey = ref('1')
	const listRef = ref(null)
	const noticelistRef = ref(null)

	onMounted(() => {})

	onBeforeMount(() => {})

	// 点击标签
	const activeclick = (v) => {
		activeKey.value = v
	}
</script>
<style lang="less" scoped>
	.query-box {
		width: 100%;
		background-color: #fff;

		// 顶部
		.query-head {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			padding: 15px;
			border-bottom: 1px solid #e7e7e7;

			.query-tbas {
				width: 95%;
				display: flex;

				.tbas-title {
					height: 35px;
					line-height: 25px;
					color: #a7a7a7;
					font-size: 16px;
					cursor: pointer;
				}

				.active {
					color: #1b8fff;
					border-bottom: 2px solid #1b8fff;
				}
			}
		}
	}
</style>