web
2025-03-18 610b299ed7c64b48ede23c2a7553c5b90988efa5
src/screen/temp.vue
@@ -1,7 +1,7 @@
<template>
    <div class="main">
        <div class="header">
            <div class="top">金川水电站生态流量监测系统 </div>
            <div class="top">金川水电站水温监测系统 </div>
            <div class="nav">
                <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
            </div>
@@ -18,11 +18,11 @@
const route = ref(useRoute())
const btnList = ref([
    {name:'总览',url:'/temp/home'},
    {name:'设备管理',url:''},
    {name:'实时监测', url:''},
    {name:'图形分析',url:''},
    {name:'汇总统计',url:''},
    {name:'报表管理',url:''},
    {name:'设备管理',url:'/temp/shebei'},
    {name:'实时监测', url:'/temp/monitor'},
    {name:'图形分析',url:'/temp/graphic'},
    {name:'汇总统计',url:'/temp/statics'},
    {name:'报表管理',url:'/temp/report'},
    {name:'系统管理',url:'/user'},
])
const navTo = (item) =>{
@@ -38,6 +38,8 @@
    .header{
        width: 100%;
        height: 14%;
        background-color: rgb(82, 120, 128);
        position: relative;
        .top{
            height: 60%;
            display: flex;
@@ -46,10 +48,14 @@
            font-size: 38px;
            font-weight: 700;
            color: #fff;
            position: relative;
            z-index: 100;
        }
        .nav{
            display: flex;
            height: 40%;
            position: relative;
            z-index: 100;
            .plain{
                flex-grow: 1;
                height: 100%;