Merge remote-tracking branch 'origin/feature-ui-fix' into feature-ui-fix

jero-web/public/color.less

@@ -2176,7 +2176,9 @@ this.tinycolor = tinycolor;
   color: rgba(0, 0, 0, 0.45);
 }
 .layout .header {
-  background-color: @primary-color !important;
+  //background-color: @primary-color !important;
+  background-color: #fff !important;
+
 }
 i.trigger:hover {
   background: rgba(0, 0, 0, 0.025);
@@ -5350,7 +5352,7 @@ form .ant-upload {
 }
 .ant-menu-submenu > .ant-menu {
   //background-color: #fff;
-  background: none;
+  background: none !important;
   border-radius: 4px;
 }
 .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,

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
+    <div class='topHeadertabList'>
-      @contextmenu.native="e => onContextmenu(e)"
+      <a-tabs
-      v-if="multipage"
+        @contextmenu.native="e => onContextmenu(e)"
-      :active-key="activePage"
+        v-if="multipage"
-      class="tab-layout-tabs"
+        :active-key="activePage"
-      style="height:52px"
+        class="tab-layout-tabs "
-      :hide-add="true"
+        style="height:52px"
-      type="editable-card"
+        :hide-add="true"
-      @change="changePage"
+        type="editable-card"
-      @tabClick="tabCallBack"
+        @change="changePage"
-      @edit="editPage">
+        @tabClick="tabCallBack"
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
+        @edit="editPage">
-        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
+        <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"  >
-      </a-tab-pane>
+          <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title}}</span>
-    </a-tabs>
+        </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,131 @@ export default {
 </script>
 
 <style lang="less">
+.contextmenu .ant-menu li{
+  color: #333 !important;
+}
+.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
+.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
- * transition="page-transition" when their visibility is toggled
+  border-radius: 0;
- * by Vue.js.
+  line-height: 40px!important;
- *
+}
- * You can easily play with the page transition by editing
+.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
- * these styles.
+  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,
+.tab-layout-tabs.ant-tabs {
-  .page-transition-leave-active .page-transition-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
-  }
 
-  /*美化弹出Tab样式*/
+  &.ant-tabs-card .ant-tabs-tab {
-  .ant-tabs-nav-container {
-    margin-top: 4px;
-  }
 
-  /* 修改 ant-tabs 样式 */
+    padding: 0 24px !important;
-  .tab-layout-tabs.ant-tabs {
+    background-color: white !important;
-    border-bottom: 1px solid #ccc;
+    margin-right: 10px !important;
-    border-left: 1px solid #ccc;
-    background-color: white;
-    padding: 0 20px;
 
-    .ant-tabs-bar {
+    .ant-tabs-close-x {
-      margin: 4px 0 0;
+      width: 12px !important;
-      border: none;
+      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;
   }
-
+  .ant-tabs-tab-active {
-  .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
+    border-color: @primary-color!important;
-    .ant-tabs-tab {
-      border: none !important;
-      border-bottom: 1px solid transparent !important;
-    }
-    .ant-tabs-tab-active {
-      border-color: @primary-color!important;
-    }
   }
+}
 
 </style>

jero-web/src/components/menu/Contextmenu.vue

@@ -67,5 +67,11 @@ export default {
     border: 1px solid #9e9e9e;
     border-radius: 4px;
     box-shadow: 2px 2px 10px #aaaaaa !important;
+    background-color: #fff;
+    color:#565656;
+    li{
+      color:#565656 !important;
+
+    }
   }
 </style>

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

@@ -101,7 +101,7 @@ export default {
   },
   data () {
     return {
-      breadList:[],
+      breadList: [],
       headerBarFixed: false,
       // update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
       topMenuStyle: {
@@ -125,6 +125,9 @@ export default {
       if (newVal === 'topmenu') {
         this.buildTopMenuStyle()
       }
+    },
+    $route () {
+      this.getBreadcrumb()
     }
   },
   // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
@@ -137,6 +140,7 @@ export default {
     this.getBreadcrumb()
     // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
   },
+
   methods: {
     getBreadcrumb () {
       this.breadList = []
@@ -191,14 +195,14 @@ export default {
 <style lang="less" scoped>
   /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
 
-  @height: 59px;
+  @height: 56px;
 
   .layout {
     .bread {
       display: inline-block;
       .ant-breadcrumb {
         a {
-          color:#efefef;
+          color:#898989;
         }
         span{
           color: #1D2129;
@@ -226,9 +230,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 样式 */