From 74b939f1e31268ecd11901b84806212d532268bd Mon Sep 17 00:00:00 2001
From: zhoulingpo <zhoulingpo>
Date: Wed, 2 Aug 2023 13:44:08 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/layouts/TabLayout.vue | 206 +++++++++++-------
 jero-web/src/components/menu/SideMenu.vue     |  32 ++-
 jero-web/src/components/page/GlobalHeader.vue |   7 +-
 3 files changed, 161 insertions(+), 84 deletions(-)

diff --git a/jero-web/src/components/layouts/TabLayout.vue b/jero-web/src/components/layouts/TabLayout.vue
index 182ac939..d3155c32 100644
--- a/jero-web/src/components/layouts/TabLayout.vue
+++ b/jero-web/src/components/layouts/TabLayout.vue
@@ -3,21 +3,24 @@
     <!-- 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">
-        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
-      </a-tab-pane>
-    </a-tabs>
+    <div class='topHeadertabList'>
+      <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.closable' >
+          <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title +'hhhh '}}</span>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+
     <div style="margin: 12px 12px 0;">
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
@@ -298,85 +301,128 @@ export default {
 </script>
 
 <style lang="less">
+.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab.ant-tabs-tab-active{
+  color: #0F6FC4;
+  text-shadow: none;
+  background-color: #fff!important;
+}
+.topHeadertabList .ant-tabs-nav{
 
-  /*
- * The following styles are auto-applied to elements with
- * transition="page-transition" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the page transition by editing
- * these styles.
- */
+}
+.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
+  border-radius: 0;
+  line-height: 40px!important;
+}
+.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
+  border-bottom: none!important;
+  border-top: none!important;
+  border-left: none!important;
+  border-right: 1px solid #E5E6EB!important;
+}
+.topHeadertabList .ant-tabs-nav-wrap{
+  border-right: 1px solid #E5E6EB!important;
+  border-left: 1px solid #E5E6EB!important;
+}
+.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab{
+  padding: 0 36px 0 12px!important;
+  margin-right: 0!important;
+  background-color: #F7F8FA!important;
+}
+.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab .ant-tabs-close-x{
+  right: 15px;
+  opacity: 1!important;
+}
+.topHeadertabList .tab-layout-tabs.ant-tabs{
+  border-bottom: 1px solid #E5E6EB;
+  height: 40px!important;
+}
+.topHeadertabList .ant-tabs-nav-container,.topHeadertabList .tab-layout-tabs.ant-tabs .ant-tabs-bar{
+  margin-top: 0;
+}
+.topHeadertabList .ant-tabs-nav-wrap,.topHeadertabList .tab-layout-tabs.ant-tabs{
+  background: #F7F8FA;
+}
+</style>
+<style lang="less">
 
-  .page-transition-enter {
-    opacity: 0;
+/*
+* The following styles are auto-applied to elements with
+* transition="page-transition" when their visibility is toggled
+* by Vue.js.
+*
+* You can easily play with the page transition by editing
+* these styles.
+*/
+
+.page-transition-enter {
+  opacity: 0;
+}
+
+.page-transition-leave-active {
+  opacity: 0;
+}
+
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+/*美化弹出Tab样式*/
+.ant-tabs-nav-container {
+  margin-top: 4px;
+}
+
+/* 修改 ant-tabs 样式 */
+.tab-layout-tabs.ant-tabs {
+  border-bottom: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  background-color: white;
+  padding: 0 20px;
+
+  .ant-tabs-bar {
+    margin: 4px 0 0;
+    border: none;
   }
 
-  .page-transition-leave-active {
-    opacity: 0;
-  }
+}
 
-  .page-transition-enter .page-transition-container,
-  .page-transition-leave-active .page-transition-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
-  }
+.tab-layout-tabs.ant-tabs {
 
-  /*美化弹出Tab样式*/
-  .ant-tabs-nav-container {
-    margin-top: 4px;
-  }
+  &.ant-tabs-card .ant-tabs-tab {
 
-  /* 修改 ant-tabs 样式 */
-  .tab-layout-tabs.ant-tabs {
-    border-bottom: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    background-color: white;
-    padding: 0 20px;
+    padding: 0 24px !important;
+    background-color: white !important;
+    margin-right: 10px !important;
 
-    .ant-tabs-bar {
-      margin: 4px 0 0;
-      border: none;
+    .ant-tabs-close-x {
+      width: 12px !important;
+      height: 12px !important;
+      opacity: 0 !important;
+      cursor: pointer !important;
+      font-size: 12px !important;
+      margin: 0 !important;
+      position: absolute;
+      top: 36%;
+      right: 6px;
+    }
+
+    &:hover .ant-tabs-close-x {
+      opacity: 1 !important;
     }
 
   }
 
-  .tab-layout-tabs.ant-tabs {
-
-    &.ant-tabs-card .ant-tabs-tab {
-
-      padding: 0 24px !important;
-      background-color: white !important;
-      margin-right: 10px !important;
-
-      .ant-tabs-close-x {
-        width: 12px !important;
-        height: 12px !important;
-        opacity: 0 !important;
-        cursor: pointer !important;
-        font-size: 12px !important;
-        margin: 0 !important;
-        position: absolute;
-        top: 36%;
-        right: 6px;
-      }
-
-      &:hover .ant-tabs-close-x {
-        opacity: 1 !important;
-      }
-
-    }
+}
 
+.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
+  .ant-tabs-tab {
+    border: none !important;
+    border-bottom: 1px solid transparent !important;
   }
-
-  .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
-    .ant-tabs-tab {
-      border: none !important;
-      border-bottom: 1px solid transparent !important;
-    }
-    .ant-tabs-tab-active {
-      border-color: @primary-color!important;
-    }
+  .ant-tabs-tab-active {
+    border-color: @primary-color!important;
   }
+}
 
 </style>
diff --git a/jero-web/src/components/menu/SideMenu.vue b/jero-web/src/components/menu/SideMenu.vue
index 4560a783..90667adb 100644
--- a/jero-web/src/components/menu/SideMenu.vue
+++ b/jero-web/src/components/menu/SideMenu.vue
@@ -17,7 +17,21 @@
       :style="smenuStyle">
     </s-menu>
 <!--    <div style='width: 100px;height:100px;background: pink'></div>-->
-    <img src='../../assets/bgImg.png' alt='' class='bgImg'>
+    <img v-if='!collapsed' src='../../assets/bgImg.png' alt='' class='bgImg'>
+    <div v-else></div>
+
+
+    <!--    <a-icon-->
+<!--      class='bgImg'-->
+<!--      v-if="device==='mobile'"-->
+<!--      class="trigger"-->
+<!--      :type="collapsed ? 'menu-fold' : 'menu-unfold'"-->
+<!--      @click="toggle"></a-icon>-->
+<!--    <a-icon-->
+<!--      class="bgImg trigger"-->
+<!--      :type="collapsed ? 'menu-unfold' : 'menu-fold'"-->
+<!--      @click="toggle"/>-->
+
   </a-layout-sider>
 
 </template>
@@ -152,6 +166,22 @@ export default {
 
 <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
 <style lang="less">
+.trigger {
+  width: 53px;
+  font-size: 22px;
+  line-height: 30px;
+  padding: 0 18px;
+  cursor: pointer;
+  transition: color 300ms, background 300ms;
+  bottom: 4px;
+  /* right: -12px; */
+  left: 129px;
+  color: #fff;
+  background-color: #FFFFFF14;
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
 .sider.light {
   background-color: #001529 !important;
 }
diff --git a/jero-web/src/components/page/GlobalHeader.vue b/jero-web/src/components/page/GlobalHeader.vue
index 906c6ea4..9598e135 100644
--- a/jero-web/src/components/page/GlobalHeader.vue
+++ b/jero-web/src/components/page/GlobalHeader.vue
@@ -198,7 +198,7 @@ export default {
       display: inline-block;
       .ant-breadcrumb {
         a {
-          color:#efefef;
+          color:#898989;
         }
         span{
           color: #1D2129;
@@ -226,9 +226,10 @@ export default {
 
     .header {
       z-index: 2;
-      color: white;
+      color: #333;
       height: @height;
-      background-color: @primary-color;
+      //background-color: @primary-color;
+      background-color: #fff;
       transition: background 300ms;
 
       /* dark 样式 */