【修改】修改tab

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

@@ -3,6 +3,7 @@
     <!-- 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: 提升右键菜单的层级 -->
+    <div class='topHeadertabList'>
       <a-tabs
         @contextmenu.native="e => onContextmenu(e)"
         v-if="multipage"
@@ -14,10 +15,12 @@
         @change="changePage"
         @tabClick="tabCallBack"
         @edit="editPage">
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
+        <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 }}</span>
+          <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">
@@ -297,6 +300,49 @@ 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{
+
+}
+.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">
 
 /*

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;
 }

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 样式 */