对照设计图修改页面

jero-web/src/components/layouts/TabLayout.vue

@@ -3,23 +3,25 @@
     <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
     <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
     <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-    <a-tabs
-      @contextmenu.native="e => onContextmenu(e)"
-      v-if="multipage"
-      :active-key="activePage"
-      class="tab-layout-tabs"
-      style="height:52px"
-      :hide-add="true"
-      type="editable-card"
-      @change="changePage"
-      @tabClick="tabCallBack"
-      @edit="editPage">
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"
-                  :closable="!(page.meta.title=='首页')">
-        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
-      </a-tab-pane>
-    </a-tabs>
-    <div style="margin: 12px 12px 0;">
+<!--    <a-tabs-->
+<!--      @contextmenu.native="e => onContextmenu(e)"-->
+<!--      v-if="multipage"-->
+<!--      :active-key="activePage"-->
+<!--      class="tab-layout-tabs"-->
+<!--      style="height:52px"-->
+<!--      :hide-add="true"-->
+<!--      type="editable-card"-->
+<!--      @change="changePage"-->
+<!--      @tabClick="tabCallBack"-->
+<!--      @edit="editPage">-->
+<!--      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"-->
+<!--                  :closable="!(page.meta.title=='首页')">-->
+<!--        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>-->
+<!--      </a-tab-pane>-->
+<!--    </a-tabs>-->
+<!--    style="margin: 12px 12px 0;"-->
+    <Tabcrumbs />
+    <div>
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
         <router-view v-if="reloadFlag"/>
@@ -34,6 +36,7 @@
 
 <script>
   import GlobalLayout from '@/components/page/GlobalLayout'
+  import Tabcrumbs from '@/components/layouts/Tabcrumbs'
   import Contextmenu from '@/components/menu/Contextmenu'
   import { mixin, mixinDevice } from '@/utils/mixin.js'
   import { triggerWindowResizeEvent } from '@/utils/util'
@@ -46,7 +49,8 @@
     name: 'TabLayout',
     components: {
       GlobalLayout,
-      Contextmenu
+      Contextmenu,
+      Tabcrumbs
     },
     mixins: [mixin, mixinDevice],
     data() {

jero-web/src/components/layouts/Tabcrumbs.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="box">
+    <span class="box-text">
+        文档管理
+     </span>
+    <span class="box-text-content" v-if="subNavigation">
+      <img src="~@/assets/dayu.png" alt="">
+    </span>
+    <span class="box-text-text">
+        {{subNavigation}}
+    </span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Tabcrumbs',
+    data() {
+      return {
+        Navigation: '',
+        subNavigation: ''
+      }
+    },
+    watch: {
+      '$route': function(val) {
+        this.subNavigation = val.meta.title
+      }
+    },
+    mounted() {
+      this.subNavigation = this.$route.meta.title
+    },
+    methods: {}
+  }
+</script>
+
+<style scoped>
+  .box {
+    width: 100%;
+    height: 72px;
+    line-height: 92px;
+    background: #fff;
+    padding: 0 24px;
+    box-sizing: border-box;
+  }
+
+  .box-text {
+    font-size: 20px;
+    color: #040B29;
+    font-weight: 400;
+    opacity: 0.5;
+  }
+
+  .box-text-content {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  .box-text-text {
+    font-weight: 400;
+    color: #040B29;
+    font-size: 20px;
+  }
+</style>