up

src/layout/top.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <el-row
-      class="flex flex-align-center flex-justify-between top"
-      :style="
-        dataType === 'project'
-          ? 'background-color:white'
-          : 'background-color:#fcf0f0'
+        class="flex flex-align-center flex-justify-between top"
+        :class="dataType === 'project'
+          ? 'bread'
+          : 'bread-g'
       "
     >
       <el-col :span="12">
         <div class="flex flex-justify-start flex-align-center padding">
-          <img class="ml-10" src="../assets/svg/top.svg" />
-          <el-breadcrumb class="ml-10" separator="/">
+          <el-icon class="ml-5" size="18px">
+            <Fold/>
+          </el-icon>
+          <el-breadcrumb class="ml-5" separator="/">
             <el-breadcrumb-item v-for="item in nav.menus" :key="item.id">
               <a :href="item.fullPath">{{ item.name }}</a>
             </el-breadcrumb-item>
@@ -21,19 +22,19 @@
       <el-col :span="12">
         <div class="flex-child-average flex-justify-end flex padding-right">
           <div
-            class="padding flex flex-align-center pointer"
-            @click="show = true"
+              class="padding flex flex-align-center pointer" :class="dataType === 'project' ? 'black' : 'white'"
+              @click="show = true"
           >
             <el-icon class="mr-5">
-              <Search />
+              <Search/>
             </el-icon>
             <span>搜索</span>
           </div>
           <div class="padding flex flex-align-center pointer">
             <el-avatar
-              class="mr-10"
-              :size="30"
-              :src="
+                class="mr-10"
+                :size="30"
+                :src="
                 user.info.avatarUrl && user.info.avatarUrl.length > 0
                   ? user.info.avatarUrl
                   : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
@@ -43,7 +44,7 @@
               <span class="flex flex-center">
                 {{ user.info.userName }} / {{ user.info.deptName }}
                 <el-icon class="el-icon--right">
-                  <arrow-down />
+                  <arrow-down/>
                 </el-icon>
               </span>
               <template #dropdown>
@@ -57,24 +58,24 @@
         </div>
       </el-col>
     </el-row>
-    <search :show="show" @close="show = false" />
+    <search :show="show" @close="show = false"/>
   </div>
 </template>
 
 <script>
 import navStore from '../store/nav.js'
-import { useStore } from '../store/user.js'
+import {useStore} from '../store/user.js'
 import permissionStore from '@/store/permission.js'
 import search from './search/index.vue'
 
 export default {
   name: 'top',
-  components: { search },
+  components: {search},
   setup() {
     const nav = navStore()
     const user = useStore()
     const permission = permissionStore()
-    return { nav, user, permission }
+    return {nav, user, permission}
   },
   data() {
     return {
@@ -201,7 +202,7 @@ export default {
     },
     getTotal() {
       this.resultCount = 0
-      this.$api.project.total({ keyword: this.params.keyword }).then(res => {
+      this.$api.project.total({keyword: this.params.keyword}).then(res => {
         if (res.code === 200) {
           this.type[0].count = res.data.projectTotal
           this.type[1].count = res.data.fileTotal
@@ -293,4 +294,29 @@ export default {
   border-radius: 20px;
   text-align: center;
 }
+
+.bread {
+  background: white;
+  color: black;
+}
+
+.bread-g {
+  background: #3978F1;
+
+  :deep(.el-breadcrumb__inner a) {
+    color: white;
+  }
+
+  :deep(.el-dropdown) {
+    color: white;
+  }
+
+  :deep(.el-icon) {
+    color: white;
+  }
+
+  :deep(.el-breadcrumb__separator) {
+    color: white;
+  }
+}
 </style>