97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
|
<nav>
|
|
<div class="df aic jcpb" style="height: 100%">
|
|
<div class="bread-box">
|
|
<el-icon size="12px" color="#3a84fa">
|
|
<Location />
|
|
</el-icon>
|
|
当前位置:
|
|
</div>
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item v-for="item in list" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div class="right-box">
|
|
<!-- <div>
|
|
<span style="font-size: 22px; margin-right: 10px; font-weight: bold">总体风险等级</span>
|
|
<span style="font-size: 22px; font-weight: bold; color: #418cfe">I I I 级</span>
|
|
</div>
|
|
<div class="right-tag">
|
|
<el-tag class="mx-1" effect="dark" type="success">监控点考核</el-tag>
|
|
<el-tag class="mx-1" effect="dark" type="warning">人脸卡口考核</el-tag>
|
|
<el-tag class="mx-1" effect="dark" type="danger">车辆卡口考核</el-tag>
|
|
<el-tag class="mx-1" effect="dark" type="success">数据数量考核</el-tag>
|
|
<el-tag class="mx-1" effect="dark" type="warning">视频质量考核</el-tag>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router'
|
|
import { Location } from '@element-plus/icons-vue'
|
|
// // 输出当前路由对象
|
|
import { ref, watch } from 'vue'
|
|
const route = useRoute()
|
|
const list = ref([])
|
|
// 监听route
|
|
watch(
|
|
route,
|
|
() => {
|
|
// 根据route.matched得到list的值
|
|
list.value = route.matched.map(item => ({
|
|
title: item.meta.title,
|
|
path: item.path,
|
|
}))
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
nav {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.bread-box {
|
|
// position: absolute;
|
|
// left: 25px;
|
|
// bottom: -7px;
|
|
margin-right: 0.1rem;
|
|
font-size: 0.18rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-breadcrumb {
|
|
// position: absolute;
|
|
// left: 100px;
|
|
// bottom: 5px;
|
|
font-size: 0.18rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right-box {
|
|
display: flex;
|
|
margin-left: auto;
|
|
justify-content: flex-end;
|
|
gap: 0.1rem;
|
|
// position: absolute;
|
|
// right: 0;
|
|
// bottom: 10px;
|
|
}
|
|
// .right-tag {
|
|
// position: absolute;
|
|
// right: 20px;
|
|
// transform: skewX(-20deg); /*将盒子相对于X轴选择30度*/
|
|
// }
|
|
.el-tag {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|