外层路由动画。二级菜单header。测试图标。

src/App.vue

@@ -7,7 +7,11 @@
       :content="defaultSettings.watermarkContent"
       class="wh-full"
     >
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in" appear>
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </el-watermark>
     <!-- 关闭水印 -->
     <router-view v-else />
@@ -35,3 +39,25 @@ const fontColor = computed(() => {
     : "rgba(0, 0, 0, .15)";
 });
 </script>
+
+<style lang="scss" scoped>
+.fade-leave-active,
+.fade-enter-active {
+  transition: all 0.5s;
+}
+
+/* 可能为enter失效，拆分为 enter-from和enter-to */
+.fade-enter-from {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+.fade-enter-to {
+  opacity: 1;
+  transform: translateX(0px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(50px);
+}
+</style>

src/assets/icons/start-test.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.171.466a1 1 0 0 1 1.004.006L14.508 7.14a1 1 0 0 1 0 1.724L3.175 15.529a1 1 0 0 1-1.507-.862V1.334a1 1 0 0 1 .503-.868Zm1.497 2.616v9.837L12.029 8 3.668 3.082Z" clip-rule="evenodd"/>
+</svg>

src/router/index.ts

@@ -55,13 +55,13 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () =>
           import("@/views/modules/person-manager/person-manager.vue"),
       },
-      {
-        path: "global-config",
-        component: () =>
-          import("@/views/modules/global-config/global-config.vue"),
-      },
     ],
   },
+  {
+    path: "/global-config",
+    component: () => import("@/views/modules/global-config/global-config.vue"),
+    meta: { hidden: true },
+  },
   // {
   // path: "/test",
   // component: () => import("@/views/modules/home/test/test.vue"),

src/views/main/components/header.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="main-user" ref="buttonRef" @click="onClickOutside">
       <span class="user-name">李明华</span>
-      <img src="@/assets/logo.png" alt="" />
+      <svg-icon icon-class="user" size="22" />
     </div>
     <el-popover
       :teleported="false"
@@ -53,6 +53,9 @@ const loginOutFun = () => {
   }
 
   .main-logo {
+    display: flex;
+    align-items: center;
+    justify-content: start;
     img {
       vertical-align: middle;
       width: 36px;
@@ -60,6 +63,7 @@ const loginOutFun = () => {
     }
 
     span {
+      margin-left: 6px;
       font-size: var(--hj-fs-16);
       color: var(--fc-color-3);
     }
@@ -67,12 +71,15 @@ const loginOutFun = () => {
 
   .main-user {
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: start;
 
-    img {
-      vertical-align: middle;
-      width: 18px;
-      height: 20px;
-    }
+    //img {
+    //  vertical-align: middle;
+    //  width: 18px;
+    //  height: 20px;
+    //}
 
     .user-name {
       margin-right: 10px;

src/views/modules/conmon/SecondHeader.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const router = useRouter();
+const onClose = () => {
+  router.back();
+};
+</script>
+
+<template>
+  <div class="second-header">
+    <div class="left-text">
+      <slot></slot>
+    </div>
+    <div>
+      <svg-icon icon-class="close" @click="onClose" style="cursor: pointer" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.second-header {
+  width: 100%;
+  height: $main-header-height;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $hj-white-1;
+  padding: 0 20px;
+  border-bottom: 1px solid $hj-white-3;
+
+  .left-text {
+    height: 18px;
+
+    font-weight: bold;
+    font-size: 14px;
+    color: $hj-black-1;
+    line-height: 16px;
+    text-align: left;
+  }
+}
+</style>

src/views/modules/global-config/global-config.vue

@@ -16,6 +16,7 @@ const activeName = ref("仪器配置");
 
 import configAddVue from "./components/ConfigAdd.vue";
 import globalAddVue from "./components/globalDataAdd.vue";
+import SecondHeader from "@/views/modules/conmon/SecondHeader.vue";
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   // console.log(tab, event);
@@ -168,6 +169,7 @@ const globalHandledel = (index: number, row: any) => {
 
 <template>
   <div class="global-config">
+    <SecondHeader>全局配置</SecondHeader>
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tab-pane label="仪器配置" name="仪器配置">
         <div class="global-config-pane">
@@ -271,6 +273,8 @@ const globalHandledel = (index: number, row: any) => {
 
 <style scoped lang="scss">
 .global-config {
+  width: 100%;
+  height: 100vh;
   .demo-tabs {
     // background-color: red;
     ::v-deep .el-tabs__nav-scroll {

src/views/modules/project-config/com/project-message.vue

@@ -9,7 +9,7 @@ const handleClickItem = (item) => {
 };
 const router = useRouter();
 const goGlobalConfig = () => {
-  router.push({ path: "/main/global-config" });
+  router.push({ path: "/global-config" });
 };
 </script>
 

src/views/modules/runTest/run-test.vue

@@ -186,11 +186,11 @@ const checkList = ref(["Value selected and disabled", "Value A"]);
         <div class="right">
           <div>已用时：300s</div>
           <div class="test-btn progress">
-            <svg-icon icon-class="project-config" />
+            <svg-icon icon-class="start-test" />
             开始测试
           </div>
           <div class="test-btn error">
-            <svg-icon icon-class="project-config" />
+            <svg-icon icon-class="stop-test" />
             停止测试
           </div>
         </div>