2.23

src/components/layout/NavigateBar.vue

@@ -19,14 +19,14 @@
             :popper-offset="2"
        
             style="width:780px"
-            background-color="#fff"
+            background-color="#0D1639 "
             active-background-color="#0E50C8"
-            text-color="#0E50C8"
+            text-color="#68ADFF"
             active-text-color="#fff"
             @select="handleSelect"
         >
-            <el-menu-item index="1">矿井信息</el-menu-item>
-            <el-menu-item index="2">污染物信息</el-menu-item>
+            <el-menu-item index="1">灾害源设置</el-menu-item>
+            <el-menu-item index="2">边界设置</el-menu-item>
             <!-- <el-sub-menu index="2">
             <template #title>Workspace</template>
             <el-menu-item index="2-1">item one</el-menu-item>
@@ -39,11 +39,11 @@
                 <el-menu-item index="2-4-3">item three</el-menu-item>
             </el-sub-menu>
             </el-sub-menu> -->
-            <el-menu-item index="3" >传感器信息</el-menu-item>
-            <el-menu-item index="4">边界设置</el-menu-item>
-            <el-menu-item index="5" >灾害源设置</el-menu-item>
+            <el-menu-item index="3" >灾害推演</el-menu-item>
+            <el-menu-item index="4">推演结果</el-menu-item>
+            <!-- <el-menu-item index="5" >灾害源设置</el-menu-item>
             <el-menu-item index="6">模拟参数</el-menu-item>
-            <el-menu-item index="7" >灾害推演</el-menu-item>
+            <el-menu-item index="7" >灾害推演</el-menu-item> -->
         </el-menu>
 </div>
 </template>
@@ -73,7 +73,7 @@ console.log(timestamp);
 .ve_menu_logo {
     width: 100%;
     height:70px;
-    background: #fff;
+    background: #0D1639;
     white-space: nowrap;
     text-align: left;
     overflow: hidden;
@@ -97,21 +97,40 @@ console.log(timestamp);
     display: inline-block;
     margin: 0;
     vertical-align: middle;
-    color: #000;
+    color: #68ADFF;
+    font-size: 20px;
     }
     .el-menu-demo{
    height: 70px;
    border: none !important;
    .el-menu-item{
     position: relative;
-    border: none !important;
+    width: 97px;
+    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+    font-weight: bold;
+    font-size: 13px;
+    color: #68ADFF;
+    line-height: 15px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    width: 110px;
+    height: 70px;
+    border-radius: 0px 0px 0px 0px;
+  border:none;
+    // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
    }
    .is-active{
-    border: none !important;
+    width: 110px;
+    height: 70px;
+    background: radial-gradient( circle 67% at 114% 79%, #3AA0FF 0%, #123066 100%);
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid;
+    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
     &:after {
     width: 24px;
-    height: 2px;
-    background-color: #0E50C8;
+    height: 1px;
+    background-color: #fff;
     -webkit-transition: all ease-out 0.2s;
     transition: all ease-out 0.2s;
     content: "";

src/view/appmian.vue

@@ -21,7 +21,7 @@
   
   <script setup>
 import NavigateBar from "@/components/layout/NavigateBar.vue";
-import indexbar  from "./index.vue"
+// import indexbar  from "./index.vue"
   import { ref, onMounted, reactive,nextTick } from "vue";
   onMounted(() => {
   });