最新的ui

src/layout/index.vue

@@ -55,15 +55,15 @@
       </div>
       <div class="right">
         <!-- 面包屑导航 -->
-        <div class="breadcrumb-container">
+        <!-- <div class="breadcrumb-container">
           <el-breadcrumb separator=">">
             <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
               {{ crumb.name }}
             </el-breadcrumb-item>
           </el-breadcrumb>
-        </div>
+        </div> -->
         <!-- 标签页 -->
-        <div class="tabs-container">
+        <div class="tabs-container" v-show="tabShow">
           <el-tabs v-model="activeTabKey" closable @tab-remove="removeTab" @tab-click="handleTabClick"
             class="custom-tabs">
             <el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
@@ -316,6 +316,11 @@ const removeTab = (key) => {
 // 标签页点击处理
 const handleTabClick = (tab) => {
   const tabItem = tabs.value.find(item => item.key === tab.paneName);
+  if (tabItem.path == '/dashboard/analysis') {
+    tabShow.value = false
+  } else {
+    tabShow.value = true
+  }
   if (tabItem) {
     router.push(tabItem.path);
   }
@@ -326,9 +331,14 @@ const toggleSubMenu = (index) => {
   openMenus.value[index] = !openMenus.value[index];
   saveMenuState();
 };
-
 // 子菜单项点击处理
 const handleSubMenuClick = (child) => {
+  console.log(child.path, '路径');
+  if (child.path == '/dashboard/analysis') {
+    tabShow.value = false
+  } else {
+    tabShow.value = true
+  }
   useAppStoreInstance.num = child.path;
   localStorage.setItem('menu', child.path);
   router.push(child.path);
@@ -367,9 +377,15 @@ const curUserLogout = () => {
 
 
 const showavatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
-
+const tabShow = ref(true)
 // 初始化
 onMounted(() => {
+  console.log(route.path, '路由');
+  if (route.path == '/dashboard/analysis') {
+    tabShow.value = false
+  } else {
+    tabShow.value = true
+  }
   nextTick(() => {
     useAppStoreInstance.initavatarUrlFn()
   })
@@ -395,8 +411,8 @@ onMounted(() => {
   }
   // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path))
   if (!isPathInMenu(route.path)) {
-    console.log("currentDisplayPath.value--------------------------", isPathInMenu(route.path), getCurrentValidPath(), JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath)
-    router.replace(JSON.parse(localStorage.getItem('menuState')).lastValidMenuPath);
+    console.log("currentDisplayPath.value--------------------------", isPathInMenu(route.path), getCurrentValidPath(), JSON.parse(localStorage.getItem('menuState'))?.lastValidMenuPath)
+    router.replace(JSON.parse(localStorage.getItem('menuState'))?.lastValidMenuPath);
   }
   // console.log("currentDisplayPath.value--------------------------",isPathInMenu(route.path),getCurrentValidPath())
   initTabs();
@@ -775,8 +791,9 @@ watch(route, () => {
   color: #ffffff;
   /* padding-left: 15px; */
   padding: 10px;
-  background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%);
+  /* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */
   /* border-bottom: 1px solid rgb(180, 178, 178); */
+  background-color: #2d2d34;
 }
 
 .el-breadcrumb {
@@ -822,11 +839,15 @@ watch(route, () => {
   /* background-color: #ffffff; */
   /* background: linear-gradient(360deg, rgba(72, 71, 82, 0.25) 0%, rgba(72, 71, 82, 0) 65%); */
   background-color: #1e1e1e;
-  padding: 2px 5px;
+  /* padding: 2px 5px; */
+  padding-left: 10px;
+  background: linear-gradient(0deg, #2c2c33 0%, #252529 100%);
+
 }
 
 :deep() .el-tabs .el-tabs__header {
-  margin: 0 0 5px !important;
+  margin: 0 0 0px !important;
+  /* background: linear-gradient(0deg, #2c2c33 0%, #252529 100%); */
 }
 
 :deep() .tabs-container .el-tabs__nav-wrap::after {

src/views/areafiremanage/historyfire/index.vue

@@ -5,16 +5,19 @@
       <!-- 左侧区域 -->
       <div class="left-section">
         <!-- 左侧上部分 -->
-
-
         <!-- 左侧下部分：统计区域 -->
         <div class="info-card stats-alerts">
-          <div class="card-tong card-show">
+          <!-- <div class="card-tong card-show">
             <currentFire :currentFireData="currentFireData"></currentFire>
           </div>
           <div class="card-tong">
-
+          </div> -->
+          <div>
+            <div>输入框</div>
+            <div>按钮</div>
+            <div>归档</div>
           </div>
+          <div>列表</div>
 
         </div>
       </div>
@@ -154,7 +157,7 @@ watch(route, () => {
 .main-content {
   display: flex;
   gap: var(--card-spacing);
-  padding: 0.4rem 0;
+  /* padding: 0.4rem 0; */
   height: 100vh;
   box-sizing: border-box;
 }
@@ -177,8 +180,8 @@ watch(route, () => {
 
 /* 通用卡片样式 */
 .info-card {
-  background-color: #fff;
-  padding: 1rem;
+  /* background-color: #fff; */
+  /* padding: 1rem; */
   box-sizing: border-box;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   overflow: hidden;
@@ -249,10 +252,11 @@ watch(route, () => {
 
 /* 统计区域卡片 */
 .stats-alerts {
-  display: flex;
+  /* display: flex; */
   gap: 1rem;
-  border-radius: 8px;
-  height: 79.5%;
+  /* border-radius: 8px; */
+  height: calc(100vh - 150px);
+  border: 1px solid red;
 
 }