内容修改

longyvfengyun

2023-11-30 5ebe1291c95021f3bcb14e70c9a0a61f4b207a63

 src/views/mainLayout/index.vue

@@ -2,7 +2,9 @@
import slideMenu from "@/views/mainLayout/js/slideMenu";
import {useRoute} from "vue-router";
import PageHeader from "@/views/mainLayout/components/pageHeader.vue";
import logoImg from '@/assets/images/logo.png';
import logoImg from '@/assets/images/logo1.png';
import {computed} from "vue";
import usePageMenuStore from "@/stores/pageMenu";
const route = useRoute();
const {isCollapse, menuActive, menuData} = slideMenu();
menuActive.value = route.path;
@@ -12,44 +14,83 @@
      path: "/home",
      icon: "HomeFilled"
   },
   // {
   //    title: "视频监控",
   //    path: "/videoShow",
   //    icon: "VideoCameraFilled"
   // },
   // {
   //    title: "驾驶行为分析图",
   //    path: "/user/drivingAnalysis",
   //    icon: "Van"
   // },
  {
    title: "原始数据",
    path: "/battShow",
    icon: "TrendCharts"
  },
   {
      title: "用户管理",
      path: "/user",
      icon: "UserFilled",
      title: "故障分析",
      path: "/analysis",
      icon: "Monitor",
      children: [
         {
            title: "驾驶行为分析图",
            path: "/user/drivingAnalysis",
            title: "局部离群因子LOF算法",
            path: "/analysis/lof",
         },
         {
            title: "盒子列表",
            path: "/user/boxList",
            title: "融合FEF和DTW算法",
            path: "/analysis/fusion",
         },
         {
            title: "摄像头列表",
            path: "/user/videoList",
            title: "Hausdorff距离算法",
            path: "/analysis/hd",
         },
         {
            title: "Frechet距离算法",
            path: "/analysis/fh",
         },
      ],
   },
   {
      title: "设备管理",
      path: "/user",
      icon: "OfficeBuilding",
      children: [
         {
            title: "汽车列表",
            path: "/user/boxList",
         },
         // {
         //    title: "摄像头列表",
         //    path: "/user/videoList",
         // },
      ]
   }
];

const pageMenuStore = usePageMenuStore();
const isTechPage = computed(()=>{
   return pageMenuStore.isTechPage;
});
</script>

<template>
   <div class="main-layout">
      <div class="full-height">
         <div class="main-layout-left">
         <div class="main-layout-left" v-show="!isCollapse">
            <div class="slide-header">
               <div class="logo-wrapper">
                  <img :src="logoImg" alt="" />
               </div>
               <div class="sys-name" v-if="!isCollapse">动力电池安全检查平台</div>
               <div class="sys-name" v-if="!isCollapse">动力电池安全检测平台</div>
            </div>
            <div class="slide-menu">
               <el-menu
                  :router="true"
                  text-color="#FFFFFF"
                  active-text-color="#FFFFFF"
                  background-color="#001529"
                  background-color="#01182c"
                  :default-active="menuActive"
                  :unique-opened="true"
                  class="el-menu-vertical"
@@ -79,8 +120,8 @@
            <div class="slide-footer"></div>
         </div>
      </div>
      <div class="main-layout-content">
         <div class="full-height">
      <div class="main-layout-content" :class="{'is-tech-page': isTechPage}">
         <div class="full-height" style="overflow-x: hidden">
            <div class="main-layout-content-wrapper">
               <div class="main-layout-content-header">
                  <page-header :is-collapse="isCollapse"></page-header>
@@ -89,12 +130,13 @@
                  <div class="body-absolute">
                     <router-view></router-view>
                  </div>

               </div>
               <div class="main-layout-content-footer" :class="{'is-tech-page': isTechPage}">
                  <span style="margin-right: 16px">湖北工业大学</span><span>智能通信与大数据分析团队</span>
               </div>
            </div>
         </div>
      </div>
      <div class="main-layout-footer"></div>
   </div>
</template>

@@ -102,13 +144,12 @@
.main-layout {
   display: flex;
   height: 100%;
   background-color: #f7f7f7;
   .main-layout-left {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: #001529;
      background-color: #01182c;
      .slide-header {
         padding: 8px 0;
         color: #FFFFFF;
@@ -137,6 +178,11 @@
   }
   .main-layout-content {
      flex: 1;
      overflow-y: auto;
      &.is-tech-page {
         background: url("@/assets/images/dw_bg.jpg") no-repeat;
         background-size: 100% 100%;
      }
   }
}
.main-layout-content-wrapper {
@@ -146,16 +192,12 @@
   .main-layout-content-body {
      position: relative;
      flex: 1;
      overflow-y: auto;
      background-color: #FFFFFF;
      box-shadow: 0 0 3px 0 rgba(0,0,0,.1);
      .body-absolute {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         overflow-x: hidden;
      }
   }
}
@@ -169,4 +211,23 @@
      }
   }
}
.make-group {
   padding: 4px;
   font-size: 14px;
   text-align: center;
}
.slide-footer {
   text-align: center;
   color: #00FEFF;
   font-size: 14px;
}
.main-layout-content-footer {
   text-align: center;
   padding: 4px;
   font-size: 14px;
   color: #000;
   &.is-tech-page {
      color: #00FEFF;
   }
}
</style>