Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
sxzgd
/
vue-insagent-pc
2
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Revert "菜单整体样式改版"

This reverts commit da6197542f6c2a622cf3fbda08f517504eadfbf6.
wks 2 жил өмнө
parent
107b387502
commit
c076b4525b
9 өөрчлөгдсөн 437 нэмэгдсэн , 464 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 1 2
      index.html
  2. 6 40
      src/assets/css/global.css
  3. 18 8
      src/components/Hamburger/index.vue
  4. 28 38
      src/components/MenuTree/index.vue
  5. 285 95
      src/views/Core/KtCommonTable.vue
  6. 3 10
      src/views/HeadBar/HeadBar.vue
  7. 18 119
      src/views/Home.vue
  8. 19 15
      src/views/MainContent/MainContent.vue
  9. 59 137
      src/views/NavBar/NavBar.vue

+ 1 - 2
index.html
Файл харах 

@@ -3,8 +3,7 @@
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4439599_xk6dafyw4.css">
 
-    <!-- <script src="//at.alicdn.com/t/c/font_4439599_dea56hl0hs4.css"></script> -->
 
+    <script src="//at.alicdn.com/t/c/font_4439599_dea56hl0hs4.js"></script>
 
     <title>管理平台</title>
 
     <title>管理平台</title>
 
   </head>
 
   </head>
 
   <body style="margin: 0;">
 
   <body style="margin: 0;">

+ 6 - 40
src/assets/css/global.css
Файл харах 

@@ -5,10 +5,11 @@ html, body, #app {
 
   padding: 0;
 
   padding: 0;
 
   list-style: none;
 
   list-style: none;
 
 }
 
 }
 
-.iconfont{
 
-  font-size: 20px !important;
 
-  padding: 0;
 
-  margin: 0;
 
+.icon {
 
+  width: 1em; height: 1em;
 
+  vertical-align: -0.15em;
 
+  fill: currentColor;
 
+  overflow: hidden;
 
 }
 
 }
 
 .span-disabled{
 
 .span-disabled{
 
   display: inline-block;
 
   display: inline-block;
 
@@ -110,39 +111,4 @@ html, body, #app {
 
   width: 100px;
 
   width: 100px;
 
   height: 50px;
 
   height: 50px;
 
   text-align: center;
 
   text-align: center;
 
-}
 
-.el-submenu .el-menu-item{
 
-  min-width: auto;
 
-}
 
-.el-menu{
 
-  border-right:none
 
-}
 
-.el-submenu.is-active > .el-submenu__title span {
 
-  color: #D42426 !important;
 
-}
 
-/* icon图标也跟着变 */
 
-.el-submenu.is-active > .el-submenu__title i {
 
-  color: #D42426 !important;
 
-}
 
-
 
- .el-submenu__title{
 
-  padding-left:20px !important;
 
-}
 
-.el-menu-item{
 
-  padding-left: 20px !important;
 
-
 
-}
 
-.el-menu--popup-bottom-start,.el-menu--popup-right-start{
 
-  padding: 10px;
 
-  box-sizing: border-box;
 
-}
 
-.el-menu--popup-right-start .el-menu-item{
 
-  border-radius: 4px;
 
-}
 
-.el-menu--popup-bottom-start .el-menu-item{
 
-  color: rgba(51,51,51,0.8) !important;
 
-}
 
-.el-menu--popup-bottom-start .el-menu-item:hover,.el-menu--popup-right-start .el-menu-item:hover {
 
-  background-color: rgba(212, 36, 38, 0.1) !important;
 
-  border-radius: 4px !important;
 
-}
 
+}

+ 18 - 8
src/components/Hamburger/index.vue
Файл харах 

@@ -1,7 +1,16 @@
 
 <template>
 
 <template>
 
-  <div @click="onClick == null ? emptyClick : onClick" class="hamburger"  :class="{'is-active':isActive}">
 
-    <i class="iconfont icon-zhankai" ></i>
 
-  </div>
 
+    <svg aria-hidden="true"  @click="onClick == null ? emptyClick : onClick" class="hamburger" fill-opacity="0.6" :class="{'is-active':isActive}">
 
+      <use xlink:href="#icon-zhankai"></use>
 
+  </svg>
 
+  <!-- <svg t="1492500959545" @click="onClick == null ? emptyClick : onClick" class="hamburger" fill="#333333" fill-opacity="0.6" :class="{'is-active':isActive}" viewBox="0 0 1024 1024"
 
+    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
 
+    <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
 
+      p-id="1692"></path>
 
+    <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
 
+      p-id="1693"></path>
 
+    <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
 
+      p-id="1694"></path>
 
+  </svg> -->
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
@@ -19,16 +28,18 @@ export default {
 
   },
 
   },
 
   methods: {
 
   methods: {
 
     emptyClick() {
 
     emptyClick() {
 
-}
 
+      
+    }
 
   }
 
   }
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
-<style  scoped>
 
-
 
+<style scoped>
 
 .hamburger {
 
 .hamburger {
 
   display: inline-block;
 
   display: inline-block;
 
   cursor: pointer;
 
   cursor: pointer;
 
+  width: 20px;
 
+  height: 20px;
 
   transform: rotate(90deg);
 
   transform: rotate(90deg);
 
   transition: .38s;
 
   transition: .38s;
 
   transform-origin: 50% 50%;
 
   transform-origin: 50% 50%;
 
@@ -36,5 +47,4 @@ export default {
 
 .hamburger.is-active {
 
 .hamburger.is-active {
 
   transform: rotate(0deg);
 
   transform: rotate(0deg);
 
 }
 
 }
 
-</style>
 
-
 
+</style>

+ 28 - 38
src/components/MenuTree/index.vue
Файл харах 

@@ -1,14 +1,20 @@
 
 <template>
 
 <template>
 
   <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
 
   <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
 
-    <template  slot="title">
 
-      <i class="iconfont" :class="menu.icon"></i>
 
-      <span slot="title" class="firstMenu" >{{ menu.name }}</span>
 
+    <template class="firstMenu" slot="title">
 
+      <!-- <i :class="menu.icon" ></i> -->
 
+      <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
 
+        <use :href="`#${menu.icon}`"></use>
 
+    </svg>
 
+      <span slot="title" class="firstMenu" >{{menu.name}}</span>
 
     </template>
 
     </template>
 
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
 
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
 
   </el-submenu>
 
   </el-submenu>
 
   <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
 
   <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
 
-    <i class="iconfont" :class="menu.icon" ></i>
 
-    <span slot="title">{{ menu.name }}</span>
 
+    <!-- <i :class="menu.icon"></i> -->
 
+    <svg aria-hidden="true"  style="    width: 20px;height: 20px;" >
 
+        <use :href="`#${menu.icon}`"></use>
 
+    </svg>
 
+    <span slot="title">{{menu.name}}</span>
 
   </el-menu-item>
 
   </el-menu-item>
 
 </template>
 
 </template>
 
 
 
@@ -22,55 +28,39 @@ export default {
 
       required: true
 
       required: true
 
     }
 
     }
 
   },
 
   },
 
-  data () {
 
-    return {
 
-    }
 
-  },
 
-  created() {
 
+  created(){
 
   },
 
   },
 
   methods: {
 
   methods: {
 
-    handleRoute(menu) {
 
+    handleRoute (menu) {
 
       // 如果是嵌套页面，转换成iframe的path
 
       // 如果是嵌套页面，转换成iframe的path
 
       let path = getIFramePath(menu.url)
 
       let path = getIFramePath(menu.url)
 
-      if (!path) {
 
+      if(!path) {
 
         path = menu.url
 
         path = menu.url
 
       }
 
       }
 
       // 通过菜单URL跳转至指定路由
 
       // 通过菜单URL跳转至指定路由
 
       this.$router.push("/" + path)
 
       this.$router.push("/" + path)
 
-
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
 <style scoped lang="scss">
 
 <style scoped lang="scss">
 
-
 
-/deep/ {
 
-
 
-  .el-menu-item {
 
-    margin: 4px 0 ;
 
-  }
 
-  .el-menu--popup-right-start{
 
-    padding: 10px;
 
-    box-sizing: border-box;
 
-  }
 
-  .el-submenu__title:hover{
 
-    background-color: rgba(212,36,38,0.1) !important;
 
-    border-radius: 4px !important;
 
-
 
-  }
 
-  .el-menu-item:hover{
 
-    background-color: rgba(212,36,38,0.1) !important;
 
-    border-radius: 4px !important;
 
-  }
 
+.el-submenu, .el-menu-item {
 
+  background-color: #393D49;
 
+  color: #fff;
 
 }
 
 }
 
 .el-menu-item.is-active {
 
 .el-menu-item.is-active {
 
   // background-color: #428BCA !important;
 
   // background-color: #428BCA !important;
 
-  background: linear-gradient(90deg, #F34747 0%, #DF3739 100%);
 
-  box-shadow: 2px 4px 8px 0px rgba(212, 36, 38, 0.2);
 
-  border-radius: 4px;
 
-  color: #fff !important;
 
-  z-index: 999;
 
 
 
-}
 
+      background-color: var(--themeColor) !important;
 
+    }
 
+// .el-submenu i,.el-submenu span, .el-menu-item i,.el-menu-item span{
 
+//   color:#fff;
 
+// }
 
+// :deep.el-menu-item.is-active{
 
+//   background-color: #428BCA !important;     
+// }
 
+.is-active svg{
 
+  filter: brightness(100);
 
+} 
 </style>
 
 </style>

+ 285 - 95
src/views/Core/KtCommonTable.vue
Файл харах 

@@ -1,22 +1,48 @@
 
 <template>
 
 <template>
 
   <div style="position: relative" ref="commonTable">
 
   <div style="position: relative" ref="commonTable">
 
     <!--表格栏-->
 
     <!--表格栏-->
 
-    <el-table id="commonTable" ref="doLayout" :data="data.content" :highlight-current-row="highlightCurrentRow"
 
-      @selection-change="selectionChange" @row-click="rowClick" @current-change="handleCurrentChange"
 
-      :element-loading-text="$t('action.loading')" :border="border" :stripe="stripe" :show-summary="showSummary"
 
-      :summary-method="getSummaries" :show-overflow-tooltip="showOverflowTooltip"
 
-      :height="tableHeights ? tableHeights : tableHeight" :size="size" :align="align" :header-cell-style="{
 
+    <el-table
 
+      id="commonTable"
 
+      ref="doLayout"
 
+      :data="data.content"
 
+      :highlight-current-row="highlightCurrentRow"
 
+      @selection-change="selectionChange"
 
+      @row-click="rowClick"
 
+      @current-change="handleCurrentChange"
 
+      :element-loading-text="$t('action.loading')"
 
+      :border="border"
 
+      :stripe="stripe"
 
+      :show-summary="showSummary"
 
+      :summary-method="getSummaries"
 
+      :show-overflow-tooltip="showOverflowTooltip"
 
+      :height="tableHeights ? tableHeights : tableHeight"
 
+      :size="size"
 
+      :align="align"
 
+      :header-cell-style="{
 
         fontWeight: '900',
 
         fontWeight: '900',
 
         color: '#606266',
 
         color: '#606266',
 
-      }" style="width: 100%" :row-class-name="tableRowClassName">
 
+      }"
 
+      style="width: 100%"
 
+      :row-class-name="tableRowClassName"
 
+    >
 
       <el-table-column type="expand" v-if="showSysUserAccountCardList" style="display: flex;">
 
       <el-table-column type="expand" v-if="showSysUserAccountCardList" style="display: flex;">
 
         <template slot-scope="scope">
 
         <template slot-scope="scope">
 
-          <el-table :data="scope.row.sysUserAccountCardList" size="small" :header-cell-style="{
 
-            background: '#ccc',
 
-            fontWeight: '900',
 
-            color: '#606266',
 
-          }" style="width: 70%">
 
-            <el-table-column type="index" width="50" align="center" label="序号">
 
+          <el-table
 
+            :data="scope.row.sysUserAccountCardList"
 
+            size="small"
 
+            :header-cell-style="{
 
+              background: '#ccc',
 
+              fontWeight: '900',
 
+              color: '#606266',
 
+            }"
 
+            style="width: 70%"
 
+          >
 
+            <el-table-column
 
+              type="index"
 
+              width="50"
 
+              align="center"
 
+              label="序号"
 
+            >
 
             </el-table-column>
 
             </el-table-column>
 
             <el-table-column prop="bankAccount" label="银行" style="flex: 1">
 
             <el-table-column prop="bankAccount" label="银行" style="flex: 1">
 
             </el-table-column>
 
             </el-table-column>
 
@@ -28,8 +54,7 @@
 
             </el-table-column>
 
             </el-table-column>
 
             <el-table-column prop="auditStatus" label="审核状态" style="flex: 1">
 
             <el-table-column prop="auditStatus" label="审核状态" style="flex: 1">
 
               <template slot-scope="scope1">
 
               <template slot-scope="scope1">
 
-                <span>{{ scope1.row.auditStatus == 0 ? '未审核' : scope1.row.auditStatus == '1' ? '审核通过' :
 
-                  scope1.row.auditStatus == '2' ? '审核驳回' : scope1.row.auditStatus }}</span>
 
+                <span>{{ scope1.row.auditStatus == 0 ? '未审核' : scope1.row.auditStatus == '1' ? '审核通过' : scope1.row.auditStatus == '2' ? '审核驳回' : scope1.row.auditStatus }}</span>
 
               </template>
 
               </template>
 
             </el-table-column>
 
             </el-table-column>
 
             <el-table-column prop="delFlag" label="是否解绑" style="flex: 1" width="150">
 
             <el-table-column prop="delFlag" label="是否解绑" style="flex: 1" width="150">
 
@@ -39,16 +64,13 @@
 
                     <span style="margin-right: 20px;">{{ scope1.row.delFlag == '0' ? '未解绑' : '已解绑' }}</span>
 
                     <span style="margin-right: 20px;">{{ scope1.row.delFlag == '0' ? '未解绑' : '已解绑' }}</span>
 
                   </el-col>
 
                   </el-col>
 
                   <el-col :span="8">
 
                   <el-col :span="8">
 
-                    <el-button v-if="scope1.row.delFlag == '0'" type="text" size="mini"
 
-                      @click="handleBreak(scope.$index, scope.row, scope1.$index, scope1.row)">解绑</el-button>
 
+                    <el-button v-if="scope1.row.delFlag == '0'" type="text" size="mini" @click="handleBreak(scope.$index, scope.row, scope1.$index, scope1.row)">解绑</el-button>
 
                   </el-col>
 
                   </el-col>
 
                   <el-col :span="8">
 
                   <el-col :span="8">
 
-                    <el-button v-if="scope1.row.delFlag == '1'" type="text" size="mini"
 
-                      @click="handleRebind(scope.$index, scope.row, scope1.$index, scope1.row)">重绑</el-button>
 
+                    <el-button v-if="scope1.row.delFlag == '1'" type="text" size="mini" @click="handleRebind(scope.$index, scope.row, scope1.$index, scope1.row)">重绑</el-button>
 
                   </el-col>
 
                   </el-col>
 
                   <el-col :span="8">
 
                   <el-col :span="8">
 
-                    <el-button type="text" size="mini"
 
-                      @click="handleTimeLine(scope.$index, scope.row, scope1.$index, scope1.row)">轨迹</el-button>
 
+                    <el-button type="text" size="mini" @click="handleTimeLine(scope.$index, scope.row, scope1.$index, scope1.row)">轨迹</el-button>
 
                   </el-col>
 
                   </el-col>
 
                 </el-row>
 
                 </el-row>
 
               </template>
 
               </template>
 
@@ -56,63 +78,184 @@
 
           </el-table>
 
           </el-table>
 
         </template>
 
         </template>
 
       </el-table-column>
 
       </el-table-column>
 
-      <el-table-column type="selection" width="50" fixed align="center" v-if="showBatchDelete ||
 
-        showBatchSettled ||
 
-        showBatchPrint ||
 
-        customToolseletted
 
-        "></el-table-column>
 
-      <el-table-column v-if="SerialShow" label="序号" type="index" width="50" align="center"></el-table-column>
 
+      <el-table-column
 
+        type="selection"
 
+        width="50"
 
+        fixed
 
+        align="center"
 
+        v-if="
 
+          showBatchDelete ||
 
+          showBatchSettled ||
 
+          showBatchPrint ||
 
+          customToolseletted
 
+        "
 
+      ></el-table-column>
 
+      <el-table-column
 
+        v-if="SerialShow"
 
+        label="序号"
 
+        type="index"
 
+        width="50"
 
+        align="center"
 
+      ></el-table-column>
 
 
 
       <template v-for="column in columns">
 
       <template v-for="column in columns">
 
-        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label"
 
-          :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type"
 
-          :formatter="column.formatter" :sortable="column.sortable ? column.sortable : false"
 
-          v-if="column.signIcon || column.isImg || column.isBtn">
 
+        <el-table-column
 
+          header-align="center"
 
+          align="center"
 
+          :prop="column.prop"
 
+          :label="column.label"
 
+          :width="column.width"
 
+          :min-width="column.minWidth"
 
+          :fixed="column.fixed"
 
+          :key="column.prop"
 
+          :type="column.type"
 
+          :formatter="column.formatter"
 
+          :sortable="column.sortable ? column.sortable : false"
 
+          v-if="column.signIcon || column.isImg || column.isBtn"
 
+        >
 
           <template slot-scope="scope">
 
           <template slot-scope="scope">
 
-            <el-switch :disabled="column.isDisabled" v-if="column.signIcon" v-model="scope.row[column.prop]"
 
-              active-value="1" inactive-value="0" @change="signStateChanged(scope.$index, scope.row)"></el-switch>
 
-            <img v-if="column.isImg" :width="column.imgWidth" :height="column.imgHeight" :src="scope.row[column.prop]" />
 
-            <kt-button v-if="column.isBtn" icon="fa fa-edit" :label="column.btnName" :size="size"
 
-              :perms="column.permsEdit" @click="handleBtnEdit(scope.$index, scope.row)" />
 
+            <el-switch
 
+              :disabled="column.isDisabled"
 
+              v-if="column.signIcon"
 
+              v-model="scope.row[column.prop]"
 
+              active-value="1"
 
+              inactive-value="0"
 
+              @change="signStateChanged(scope.$index, scope.row)"
 
+            ></el-switch>
 
+            <img
 
+              v-if="column.isImg"
 
+              :width="column.imgWidth"
 
+              :height="column.imgHeight"
 
+              :src="scope.row[column.prop]"
 
+            />
 
+            <kt-button
 
+              v-if="column.isBtn"
 
+              icon="fa fa-edit"
 
+              :label="column.btnName"
 
+              :size="size"
 
+              :perms="column.permsEdit"
 
+              @click="handleBtnEdit(scope.$index, scope.row)"
 
+            />
 
           </template>
 
           </template>
 
         </el-table-column>
 
         </el-table-column>
 
-        <el-table-column header-align="center" align="center" :prop="column.prop" :label="column.label"
 
-          :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :key="column.prop" :type="column.type"
 
-          :formatter="column.formatter" :sortable="column.sortable ? column.sortable : false" v-else>
 
+        <el-table-column
 
+          header-align="center"
 
+          align="center"
 
+          :prop="column.prop"
 
+          :label="column.label"
 
+          :width="column.width"
 
+          :min-width="column.minWidth"
 
+          :fixed="column.fixed"
 
+          :key="column.prop"
 
+          :type="column.type"
 
+          :formatter="column.formatter"
 
+          :sortable="column.sortable ? column.sortable : false"
 
+          v-else
 
+        >
 
           <template v-for="columnchildren in column.children">
 
           <template v-for="columnchildren in column.children">
 
-            <el-table-column v-if="columnchildren" header-align="center" align="center" :prop="columnchildren.prop"
 
-              :label="columnchildren.label" :width="columnchildren.width" :min-width="columnchildren.minWidth"
 
-              :fixed="columnchildren.fixed" :key="columnchildren.prop" :type="columnchildren.type"
 
-              :formatter="columnchildren.formatter" :sortable="columnchildren.sortable == null ? true : columnchildren.sortable
 
-                ">
 
+            <el-table-column
 
+              v-if="columnchildren"
 
+              header-align="center"
 
+              align="center"
 
+              :prop="columnchildren.prop"
 
+              :label="columnchildren.label"
 
+              :width="columnchildren.width"
 
+              :min-width="columnchildren.minWidth"
 
+              :fixed="columnchildren.fixed"
 
+              :key="columnchildren.prop"
 
+              :type="columnchildren.type"
 
+              :formatter="columnchildren.formatter"
 
+              :sortable="
 
+                columnchildren.sortable == null ? true : columnchildren.sortable
 
+              "
 
+            >
 
             </el-table-column>
 
             </el-table-column>
 
           </template>
 
           </template>
 
         </el-table-column>
 
         </el-table-column>
 
       </template>
 
       </template>
 
-      <el-table-column :label="$t('action.operation')" :width="operationWidth" fixed="right" v-if="showOperation"
 
-        header-align="center" align="center">
 
+      <el-table-column
 
+        :label="$t('action.operation')"
 
+        :width="operationWidth"
 
+        fixed="right"
 
+        v-if="showOperation"
 
+        header-align="center"
 
+        align="center"
 
+      >
 
         <template slot-scope="scope">
 
         <template slot-scope="scope">
 
-          <kt-button type="primary" v-if="editButtonName" icon="fa fa-edit" :label="editButtonName" :perms="permsEdit"
 
-            :size="size" @click="handleEdit(scope.$index, scope.row)" />
 
-          <kt-button v-if="deleteButtonName" icon="fa fa-trash" :label="deleteButtonName" :perms="permsDelete"
 
-            :size="size" type="danger" @click="handleDeleteFlag(scope.$index, scope.row)" />
 
-          <kt-button :style="{
 
-            background: button1Background + '',
 
-            border: '1px solid' + button1Background,
 
-            color: '#fff',
 
-          }" v-if="button1Name" :label="button1Name" :perms="permsButton1" :size="size" :icon="button1Icon"
 
-            @click="handleButton1(scope.$index, scope.row)" />
 
-          <kt-button v-if="button2Name" :label="button2Name" :perms="permsButton2" :size="size" :type="button2Type"
 
-            :icon="button2Icon" @click="handleButton2(scope.$index, scope.row)" />
 
-          <kt-button v-if="button3Name" :label="button3Name" :perms="permsButton3" :size="size" :type="button3Type"
 
-            :icon="button3Icon" @click="handleButton3(scope.$index, scope.row)" />
 
-          <kt-button v-if="button4Name" :icon="button4Icon" :type="button4Type" :label="button4Name" :perms="permsButton4"
 
-            :size="size" @click="handleButton4(scope.$index, scope.row)" />
 
-          <kt-button v-if="button5Name" :label="button5Name" :size="size" :type="button5Type" :icon="button5Icon"
 
-            @click="handleButton5(scope.$index, scope.row)" />
 
-          <kt-button v-if="button6Name" :label="button6Name" :size="size" :type="button6Type"
 
-            @click="handleButton6(scope.$index, scope.row)" />
 
-          <el-button type="text" size="small" v-if="buttonDropdown.length > 0">
 
+          <kt-button
 
+            type="primary"
 
+            v-if="editButtonName"
 
+            icon="fa fa-edit"
 
+            :label="editButtonName"
 
+            :perms="permsEdit"
 
+            :size="size"
 
+            @click="handleEdit(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="deleteButtonName"
 
+            icon="fa fa-trash"
 
+            :label="deleteButtonName"
 
+            :perms="permsDelete"
 
+            :size="size"
 
+            type="danger"
 
+            @click="handleDeleteFlag(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            :style="{
 
+              background: button1Background + '',
 
+              border: '1px solid' + button1Background,
 
+              color: '#fff',
 
+            }"
 
+            v-if="button1Name"
 
+            :label="button1Name"
 
+            :perms="permsButton1"
 
+            :size="size"
 
+            :icon="button1Icon"
 
+            @click="handleButton1(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="button2Name"
 
+            :label="button2Name"
 
+            :perms="permsButton2"
 
+            :size="size"
 
+            :type="button2Type"
 
+            :icon="button2Icon"
 
+            @click="handleButton2(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="button3Name"
 
+            :label="button3Name"
 
+            :perms="permsButton3"
 
+            :size="size"
 
+            :type="button3Type"
 
+            :icon="button3Icon"
 
+            @click="handleButton3(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="button4Name"
 
+            :icon="button4Icon"
 
+            :type="button4Type"
 
+            :label="button4Name"
 
+            :perms="permsButton4"
 
+            :size="size"
 
+            @click="handleButton4(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="button5Name"
 
+            :label="button5Name"
 
+            :size="size"
 
+            :type="button5Type"
 
+            :icon="button5Icon"
 
+            @click="handleButton5(scope.$index, scope.row)"
 
+          />
 
+          <kt-button
 
+            v-if="button6Name"
 
+            :label="button6Name"
 
+            :size="size"
 
+            :type="button6Type"
 
+            @click="handleButton6(scope.$index, scope.row)"
 
+          />
 
+          <el-button type="text" size="small" v-if="buttonDropdown.length>0">
 
             <el-dropdown trigger="click">
 
             <el-dropdown trigger="click">
 
               <span class="el-dropdown-link">
 
               <span class="el-dropdown-link">
 
                 更多
 
                 更多
 
@@ -120,9 +263,7 @@
 
               </span>
 
               </span>
 
               <el-dropdown-menu slot="dropdown">
 
               <el-dropdown-menu slot="dropdown">
 
                 <el-dropdown-item v-for="val in buttonDropdown" :key="val.label">
 
                 <el-dropdown-item v-for="val in buttonDropdown" :key="val.label">
 
-                  <el-button style="width:100%" size="mini" type="text"
 
-                    v-if="!val.hide || (val.hide && val.hide(scope.row))" @click="val.click(scope.row)">{{ val.label
 
-                    }}</el-button>
 
+                  <el-button style="width:100%" size="mini" type="text"  v-if="!val.hide || (val.hide && val.hide(scope.row))"  @click="val.click(scope.row)">{{ val.label }}</el-button>
 
                 </el-dropdown-item>
 
                 </el-dropdown-item>
 
               </el-dropdown-menu>
 
               </el-dropdown-menu>
 
             </el-dropdown>
 
             </el-dropdown>
 
@@ -133,19 +274,58 @@
 
     <!--分页栏-->
 
     <!--分页栏-->
 
     <!-- 底部分页 -->
 
     <!-- 底部分页 -->
 
     <div class="bottomFixed" ref="bottomFixed">
 
     <div class="bottomFixed" ref="bottomFixed">
 
-      <kt-button :label="customToolName" :perms="permscustomTool" :size="size" type="danger" @click="customToolMethod()"
 
-        :disabled="selections.length === 0" style="float: left" v-if="customToolseletted" />
 
-      <kt-button class="debutton" :label="deleteName" :perms="permsDelete" :size="size" type="danger"
 
-        @click="handleBatchDelete()" :disabled="selections.length === 0" style="float: left"
 
-        v-if="showBatchDelete & showOperation" />
 
-      <kt-button :label="settledName" :perms="permsSettled" :size="size" type="danger" @click="handleBatchSettled()"
 
-        :disabled="selections.length === 0" style="float: left" v-if="showBatchSettled" />
 
-      <kt-button label="导出Excel" :perms="permsExcel" :size="size" type="danger" @click="handleBatchPrint()"
 
-        style="float: left" v-if="showBatchPrint" />
 
-      <el-pagination background @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"
 
-        @current-change="refreshPageRequest" :current-page="data.pageNum" :page-size="data.pageSize"
 
-        :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]" :total="data.totalSize" style="float: left; margin-left: 20px"
 
-        v-if="isshowpagination">
 
+      <kt-button
 
+        :label="customToolName"
 
+        :perms="permscustomTool"
 
+        :size="size"
 
+        type="danger"
 
+        @click="customToolMethod()"
 
+        :disabled="selections.length === 0"
 
+        style="float: left"
 
+        v-if="customToolseletted"
 
+      />
 
+      <kt-button
 
+        class="debutton"
 
+        :label="deleteName"
 
+        :perms="permsDelete"
 
+        :size="size"
 
+        type="danger"
 
+        @click="handleBatchDelete()"
 
+        :disabled="selections.length === 0"
 
+        style="float: left"
 
+        v-if="showBatchDelete & showOperation"
 
+      />
 
+      <kt-button
 
+        :label="settledName"
 
+        :perms="permsSettled"
 
+        :size="size"
 
+        type="danger"
 
+        @click="handleBatchSettled()"
 
+        :disabled="selections.length === 0"
 
+        style="float: left"
 
+        v-if="showBatchSettled"
 
+      />
 
+      <kt-button
 
+        label="导出Excel"
 
+        :perms="permsExcel"
 
+        :size="size"
 
+        type="danger"
 
+        @click="handleBatchPrint()"
 
+        style="float: left"
 
+        v-if="showBatchPrint"
 
+      />
 
+      <el-pagination
 
+        background
 
+        @size-change="handleSizeChange"
 
+        layout="total, sizes, prev, pager, next, jumper"
 
+        @current-change="refreshPageRequest"
 
+        :current-page="data.pageNum"
 
+        :page-size="data.pageSize"
 
+        :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
 
+        :total="data.totalSize"
 
+        style="float: left; margin-left: 20px"
 
+        v-if="isshowpagination"
 
+      >
 
       </el-pagination>
 
       </el-pagination>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
@@ -222,7 +402,7 @@ export default {
 
     button6Name: {
 
     button6Name: {
 
       type: String,
 
       type: String,
 
     },
 
     },
 
-    buttonDropdown: {
 
+    buttonDropdown:{
 
       type: Array,
 
       type: Array,
 
       default: () => [],
 
       default: () => [],
 
     },
 
     },
 
@@ -369,14 +549,14 @@ export default {
 
   },
 
   },
 
   data() {
 
   data() {
 
     return {
 
     return {
 
-      tableHeight: 580,
 
+      tableHeight: 0,
 
       loading: false, // 加载标识
 
       loading: false, // 加载标识
 
       selections: [], // 列表选中列
 
       selections: [], // 列表选中列
 
       pageRequest: {
 
       pageRequest: {
 
         pageNum: 1,
 
         pageNum: 1,
 
         pageSize: 20,
 
         pageSize: 20,
 
       },
 
       },
 
-      taskPool: false
 
+      taskPool:false
 
     };
 
     };
 
   },
 
   },
 
   methods: {
 
   methods: {
 
@@ -386,11 +566,11 @@ export default {
 
       // } else if (!!row.fieldName24 && row.fieldName24.indexOf("已") >= 0) {
 
       // } else if (!!row.fieldName24 && row.fieldName24.indexOf("已") >= 0) {
 
       // return "successRow";
 
       // return "successRow";
 
       // }
 
       // }
 
-      if (!!this.taskPool) {
 
-        if (row.row.isExternal === 1) {
 
-          return "flagRow";
 
+      if(!!this.taskPool){
 
+        if(row.row.isExternal===1){
 
+            return "flagRow";
 
         }
 
         }
 
-        else {
 
+        else{
 
           return ''
 
           return ''
 
         }
 
         }
 
       }
 
       }
 
@@ -664,7 +844,7 @@ export default {
 
             callback: callback,
 
             callback: callback,
 
           });
 
           });
 
         })
 
         })
 
-        .catch(() => { });
 
+        .catch(() => {});
 
     },
 
     },
 
     //批量结算
 
     //批量结算
 
     handleBatchSettled: function () {
 
     handleBatchSettled: function () {
 
@@ -691,25 +871,35 @@ export default {
 
   mounted() {
 
   mounted() {
 
     const that = this;
 
     const that = this;
 
     that.refreshPageRequest(1);
 
     that.refreshPageRequest(1);
 
+    setTimeout(() => {
 
+      let tableTop = that.$refs.commonTable.offsetTop;
 
+      let bottomTop = that.$refs.bottomFixed.offsetTop;
 
+      that.tableHeight = bottomTop - tableTop - 120 + "px";
 
+    }, 10);
 
+    // window.onresize = function () {
 
+    //   let tableTop = that.$refs.commonTable.offsetTop;
 
+    //   let bottomTop = that.$refs.bottomFixed.offsetTop;
 
+    //   that.tableHeight = bottomTop - tableTop - 120 + "px";
 
+    // };
 
   },
 
   },
 
 };
 
 };
 
 </script>
 
 </script>
 
 
 
 <style scoped>
 
 <style scoped>
 
+
 
 /* 底部固定分页 */
 
 /* 底部固定分页 */
 
 .bottomFixed {
 
 .bottomFixed {
 
   height: 40px;
 
   height: 40px;
 
+  position: fixed;
 
+  bottom: 0;
 
   width: 100%;
 
   width: 100%;
 
   background: #fff;
 
   background: #fff;
 
-  margin-top: 15px;
 
   /* margin-top: 10px; */
 
   /* margin-top: 10px; */
 
   /* box-shadow: 0 -2px 0 0 #efefef; */
 
   /* box-shadow: 0 -2px 0 0 #efefef; */
 
 }
 
 }
 
-
 
 /deep/.el-table .el-table__row--striped {
 
 /deep/.el-table .el-table__row--striped {
 
   background-color: inherit;
 
   background-color: inherit;
 
 }
 
 }
 
-
 
 .el-table .warningRow {
 
 .el-table .warningRow {
 
   background: oldlace;
 
   background: oldlace;
 
 }
 
 }
 
@@ -717,10 +907,10 @@ export default {
 
 .el-table .successRow {
 
 .el-table .successRow {
 
   background: #f0f9eb;
 
   background: #f0f9eb;
 
 }
 
 }
 
-
 
-.el-dropdown-link {
 
+.el-dropdown-link{
 
   cursor: pointer;
 
   cursor: pointer;
 
   color: var(--themeColor);
 
   color: var(--themeColor);
 
   font-size: 12px;
 
   font-size: 12px;
 
 }
 
 }
 
+
 
 </style>
 
 </style>

+ 3 - 10
src/views/HeadBar/HeadBar.vue
Файл харах 

@@ -25,7 +25,7 @@
 
         <el-submenu style="float:right;" class="right-item" v-if="Object.keys(rightNavItems).length === 0 ? false : true"
 
         <el-submenu style="float:right;" class="right-item" v-if="Object.keys(rightNavItems).length === 0 ? false : true"
 
           index="10">
 
           index="10">
 
           <template slot="title">
 
           <template slot="title">
 
-            <i class=" iconfont icon-zhankai" style="font-size:28px;color:rgba(51,51,51,0.8);"></i>
 
+            <i class="el-icon-s-fold" style="font-size:28px;color:#fff;"></i>
 
           </template>
 
           </template>
 
           <el-menu-item :key="key" v-for="(item, key) in rightNavItems" :index="item.id" style="margin: 4px 0;">{{
 
           <el-menu-item :key="key" v-for="(item, key) in rightNavItems" :index="item.id" style="margin: 4px 0;">{{
 
             item.name }}</el-menu-item>
 
             item.name }}</el-menu-item>
 
@@ -272,10 +272,6 @@ export default {
 
 }
 
 }
 
 </script>
 
 </script>
 
 <style scoped lang="scss">
 
 <style scoped lang="scss">
 
-
 
-.el-menu.el-menu--horizontal{
 
-  border-bottom: none;
 
-}
 
 .personalStyle{
 
 .personalStyle{
 
   font-size: 14px;
 
   font-size: 14px;
 
   margin: 5px;
 
   margin: 5px;
 
@@ -299,6 +295,7 @@ export default {
 
   display: flex;
 
   display: flex;
 
   justify-content: space-between;
 
   justify-content: space-between;
 
   width: auto;
 
   width: auto;
 
+  box-shadow: 0 1px 4px #ccc;
 
 }
 
 }
 
 
 
 .navigation {
 
 .navigation {
 
@@ -371,16 +368,12 @@ export default {
 
 }
 
 }
 
 
 
 .position-collapse-left {
 
 .position-collapse-left {
 
-  left: 80px;
 
+  left: 65px;
 
 }
 
 }
 
 
 
 /deep/ {
 
 /deep/ {
 
-
 
   .el-submenu__icon-arrow {
 
   .el-submenu__icon-arrow {
 
     color: #fff;
 
     color: #fff;
 
   }
 
   }
 
-  .el-submenu__title{
 
-    padding-left: 0 !important;
 
-  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 18 - 119
src/views/Home.vue
Файл харах 

@@ -1,135 +1,34 @@
 
 <template>
 
 <template>
 
-  <div>
 
-    <el-container class="full-height1">
 
+  <div class="container">
 
+      <!-- 导航菜单栏 -->
 
       <nav-bar></nav-bar>
 
       <nav-bar></nav-bar>
 
-      <el-container class="full-height ">
 
-        <el-header>
 
-          <head-bar></head-bar>
 
-        </el-header>
 
-        <el-main style="padding:0 20px 20px 20px;" :class="collapse ? 'margin' : 'margin1'">
 
-          <!-- <div class="dwdadaw">321321</div> -->
 
-          <div class="routeBack flex a-c j-start">
 
-            <div class="Back flex j-c a-c" @click="goBack">
 
-              <i class="iconfont icon-iconfanhuishangyiye"></i>
 
-            </div>
 
-            <span>{{ this.$store.state.tab.mainTabsActiveName }}</span>
 
-          </div>
 
-          <main-content class="main-content"></main-content>
 
-        </el-main>
 
-      </el-container>
 
-    </el-container>
 
-    <!-- <head-bar></head-bar>
 
-    <nav-bar></nav-bar>
 
-    <main-content class="dwdadaw"></main-content> -->
 
+      <!-- 头部区域 -->
 
+      <head-bar></head-bar>
 
+      <!-- 主内容区域 -->
 
+      <main-content></main-content>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
-import { mapState } from "vuex";
 
 import HeadBar from "./HeadBar/HeadBar"
 
 import HeadBar from "./HeadBar/HeadBar"
 
 import NavBar from "./NavBar/NavBar"
 
 import NavBar from "./NavBar/NavBar"
 
 import MainContent from "./MainContent/MainContent"
 
 import MainContent from "./MainContent/MainContent"
 
 export default {
 
 export default {
 
-  components: {
 
-    HeadBar,
 
-    NavBar,
 
-    MainContent
 
-  },
 
-  computed: {
 
-    ...mapState({
 
-      appName: state => state.app.appName,
 
-      themeColor: state => state.app.themeColor,
 
-      collapse: state => state.app.collapse,
 
-      navTree: state => state.menu.navTree,
 
-      leftTree: state => state.menu.leftTree
 
-    }),
 
-  },
 
-  methods: {
 
-    goBack() {
 
-      const currentRoute = this.$route.path;
 
-      const historyLength = window.history.length;
 
-      if (historyLength > 1 && currentRoute !== '/') {
 
-        this.$router.go(-1);
 
-      } else {
 
-        // window.location.reload();
 
-      }
 
-    }
 
+  components:{
 
+        HeadBar,
 
+        NavBar,
 
+        MainContent
 
   }
 
   }
 
 };
 
 };
 
-
 
 </script>
 
 </script>
 
 
 
 <style scoped lang="scss">
 
 <style scoped lang="scss">
 
-.routeBack {
 
-  max-height: 50px;
 
-  padding: 14px;
 
-  box-sizing: border-box;
 
-
 
-  .Back {
 
-    width: 28px;
 
-    height: 28px;
 
-    border-radius: 4px 4px 4px 4px;
 
-    border: 1px solid #B8BECC;
 
-
 
-  }
 
-  .Back:hover{
 
-      color: #D42426;
 
-      background: #FFFFFF;
 
-    }
 
-  span {
 
-    font-size: 18px;
 
-    color: #242833;
 
-    font-weight: bold;
 
-    margin-left: 15px;
 
+  .container {
 
+    position:absolute;
 
+    top: 0px;
 
+    left: 0px;
 
+    right: 0px;
 
+    bottom: 0px;
 
+    // background: rgba(224, 234, 235, 0.1);
 
   }
 
   }
 
-}
 
-
 
-.full-height {
 
-  height: 100vh;
 
-  /* 使容器撑满整个视口高度 */
 
-  box-sizing: border-box;
 
-}
 
-
 
-.full-height1 {
 
-  height: 100vh;
 
-  /* 使容器撑满整个视口高度 */
 
-}
 
-
 
-.el-header {
 
-  color: #333;
 
-  text-align: center;
 
-  line-height: 60px;
 
-  width: 100%;
 
-}
 
-
 
-
 
-.el-main {
 
-  background-color: #EAEDF1;
 
-}
 
-
 
-// .container {
 
-//   width: 100%;
 
-//   height: 100%;
 
-//   padding: 20px;
 
-//   box-sizing: border-box;
 
-//   background: #EAEDF1;
 
-// }
 
-.margin {
 
-  margin-left: 80px;
 
-}
 
-
 
-.margin1 {
 
-  margin-left: 220px;
 
-}
 
-
 
-.main-content {
 
-  background: #FFFFFF;
 
-  box-shadow: 4px 4px 10px 0px rgba(157, 157, 157, 0.1);
 
-  border-radius: 4px 4px 4px 4px;
 
-  height: calc(100% - 50px);
 
-  overflow: auto;
 
-  padding: 10px;
 
-  box-sizing: border-box;
 
-}
 
-
 
-</style>
 
+</style>

+ 19 - 15
src/views/MainContent/MainContent.vue
Файл харах 

@@ -1,8 +1,7 @@
 
 <template>
 
 <template>
 
-  <div id="main-container" class="main-container" >
 
-    <!-- <h2>{{this.$store.state.tab.mainTabsActiveName}}</h2> -->
 
+  <div id="main-container" class="main-container" :class="$store.state.app.collapse?'position-collapse-left':'position-left'">
 
     <!-- 标签页 -->
 
     <!-- 标签页 -->
 
-    <!-- <div class="tab-container">
 
+    <div class="tab-container">
 
       <el-tabs class="tabs" :class="$store.state.app.collapse?'position-collapse-left':'position-left'"
 
       <el-tabs class="tabs" :class="$store.state.app.collapse?'position-collapse-left':'position-left'"
 
         v-model="mainTabsActiveName" :closable="true" type="card"
 
         v-model="mainTabsActiveName" :closable="true" type="card"
 
         @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
 
         @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
 
@@ -20,7 +19,7 @@
 
           <span slot="label"><i :class="item.icon"></i> {{item.title}} </span>
 
           <span slot="label"><i :class="item.icon"></i> {{item.title}} </span>
 
         </el-tab-pane>
 
         </el-tab-pane>
 
       </el-tabs>
 
       </el-tabs>
 
-    </div> -->
 
+    </div>
 
     <!-- 主内容区域 -->
 
     <!-- 主内容区域 -->
 
     <div class="main-content">
 
     <div class="main-content">
 
       <keep-alive>
 
       <keep-alive>
 
@@ -38,10 +37,7 @@ export default {
 
     return {
 
     return {
 
     }
 
     }
 
   },
 
   },
 
-  created(){
 
-  },
 
   computed: {
 
   computed: {
 
-
 
     mainTabs: {
 
     mainTabs: {
 
       get () { return this.$store.state.tab.mainTabs },
 
       get () { return this.$store.state.tab.mainTabs },
 
       set (val) { this.$store.commit('updateMainTabs', val) }
 
       set (val) { this.$store.commit('updateMainTabs', val) }
 
@@ -100,6 +96,13 @@ export default {
 
 
 
 <style scoped lang="scss">
 
 <style scoped lang="scss">
 
 .main-container {
 
 .main-container {
 
+  padding: 0 5px 5px;
 
+  position: absolute;
 
+  top: 60px;
 
+  left: 1px;
 
+  right: 1px;
 
+  bottom: 0px;
 
+  // background: rgba(56, 5, 114, 0.5);
 
   .tabs {
 
   .tabs {
 
     position: fixed;
 
     position: fixed;
 
     top: 60px;
 
     top: 60px;
 
@@ -137,14 +140,15 @@ export default {
 
   .tabs-tools:hover {
 
   .tabs-tools:hover {
 
     background: rgba(200, 206, 206, 1);
 
     background: rgba(200, 206, 206, 1);
 
   }
 
   }
 
-  // .main-content {
 
-  //   position: absolute;
 
-  //   top: 45px;
 
-  //   left: 5px;
 
-  //   right: 5px;
 
-  //   bottom: 5px;
 
-  //   padding: 5px;
 
-  // }
 
+  .main-content {
 
+    position: absolute;
 
+    top: 45px;
 
+    left: 5px;
 
+    right: 5px;
 
+    bottom: 5px;
 
+    padding: 5px;
 
+    // background: rgba(209, 212, 212, 0.5);
 
+  }
 
 }
 
 }
 
 .position-left {
 
 .position-left {
 
   left: 220px;
 
   left: 220px;

+ 59 - 137
src/views/NavBar/NavBar.vue
Файл харах 

@@ -1,40 +1,36 @@
 
 <template>
 
 <template>
 
-  <div class="menu-bar-container " >
 
+  <div class="menu-bar-container">
 
     <!-- logo -->
 
     <!-- logo -->
 
-    <div class="logo flex a-c j-c" style='background-color:#fff;'
 
-      :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'" @click="$router.push('/')">
 
+    <div
 
+      class="logo flex a-c j-c"
 
+      style='background-color:#fff;'
 
+      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
 
+      @click="$router.push('/')"
 
+    >
 
       <img style="margin-right:0" v-if="collapse" src="@/assets/image/new_logo.png" />
 
       <img style="margin-right:0" v-if="collapse" src="@/assets/image/new_logo.png" />
 
-      <div v-if="!collapse" class="flex j-c a-c">
 
+      <div v-if="!collapse" class="flex j-c a-c" >
 
         <img src="@/assets/image/new_logo.png" />
 
         <img src="@/assets/image/new_logo.png" />
 
-        <span>{{ appName }}</span>
 
+        <span>{{appName}}</span>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
-    <el-menu style="height:88%;padding: 10px;box-sizing: border-box;" ref="navmenu" :default-active="menuIndex"
 
-      :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'" :collapse="collapse" :collapse-transition="false"
 
-      :unique-opened="true" @open="handleopen" @close="handleclose" @select="handleselect" background-color="#fff"
 
-      text-color="rgba(51,51,51,0.8)" active-text-color="#D42426">
 
-      <menu-tree v-for="item in leftTree" :key="item.id" :menu="item" ></menu-tree>
 
+    <!-- 导航菜单 -->
 
+    <el-menu
 
+      ref="navmenu"
 
+      :default-active="menuIndex"
 
+      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
 
+      :collapse="collapse"
 
+      :collapse-transition="false"
 
+      :unique-opened="true"
 
+      @open="handleopen"
 
+      @close="handleclose"
 
+      @select="handleselect"
 
+      background-color="#202D45"
 
+      text-color="rgba(255,255,255,0.6)"
 
+      active-text-color="#fff"
 
+    >
 
+      <!-- 导航菜单树组件，动态加载菜单 -->
 
+      <menu-tree v-for="item in leftTree" :key="item.id" :menu="item"></menu-tree>
 
     </el-menu>
 
     </el-menu>
 
-    <!-- 左下角企业微信扫码 -->
 
-    <!-- <el-popover width="150" trigger="hover" placement="right-start" :offset="300">
 
-      <div class=" flex f-c a-c">
 
-        <div class="qrCode">
 
-          <img src="../../assets/qiyeweixin.png" alt="" style="width: 100%;height: 100%;">
 
-        </div>
 
-        <span style="font-size: 14px;color: #333;margin-top: 5px;">微信扫码咨询</span>
 
-      </div>
 
-      <div class="enterpriseWeChat flex a-c j-c" slot="reference"
 
-        :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'">
 
-        <div class="hovers flex a-c j-c">
 
-          <img src="../../assets/qiyeweixin.png" alt="">
 
-          <div class="flex f-c" v-if="!collapse">
 
-            <span>@白慧霞</span>
 
-            <span>掌柜鼎科技</span>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </el-popover> -->
 
-    <!-- 左下角企业微信扫码 -->
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script>
 
 <script>
 
@@ -72,19 +68,19 @@ export default {
 
   watch: {
 
   watch: {
 
     $route: "handleRoute"
 
     $route: "handleRoute"
 
   },
 
   },
 
-  data() {
 
-    return {
 
-      menuIndex: this.$route.meta.index !== 0 ? this.$route.meta.index : this.leftTree[0].id
 
-    }
 
-  },
 
+data(){
 
+  return{
 
+    menuIndex: this.$route.meta.index!==0?this.$route.meta.index:this.leftTree[0].id
 
+  }
 
+},
 
   created() {
 
   created() {
 
     this.handleRoute(this.$route);
 
     this.handleRoute(this.$route);
 
 
 
   },
 
   },
 
   methods: {
 
   methods: {
 
-    handleopen() { },
 
-    handleclose() { },
 
-    handleselect(a, b) { },
 
+    handleopen() {},
 
+    handleclose() {},
 
+    handleselect(a, b) {},
 
     // 路由操作处理
 
     // 路由操作处理
 
     handleRoute(route) {
 
     handleRoute(route) {
 
       // tab标签页选中, 如果不存在则先添加
 
       // tab标签页选中, 如果不存在则先添加
 
@@ -109,29 +105,12 @@ export default {
 
 </script>
 
 </script>
 
 
 
 <style scoped lang="scss">
 
 <style scoped lang="scss">
 
-
 
-.el-menu-item:hover {
 
-  background-color: rgba(212, 36, 38, 0.1) !important;
 
-  border-radius: 4px !important;
 
-}
 
-.qrCode {
 
-  width: 110px;
 
-  height: 110px;
 
-  border-radius: 0px 0px 0px 0px;
 
-  border: 1px solid #EAEDF1;
 
-}
 
-.iconfont{
 
-    display: flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  }
 
 .menu-bar-container {
 
 .menu-bar-container {
 
   position: fixed;
 
   position: fixed;
 
   top: 0px;
 
   top: 0px;
 
   left: 0;
 
   left: 0;
 
   bottom: 0;
 
   bottom: 0;
 
   z-index: 1020;
 
   z-index: 1020;
 
-
 
   .el-menu {
 
   .el-menu {
 
     position: absolute;
 
     position: absolute;
 
     top: 60px;
 
     top: 60px;
 
@@ -139,50 +118,6 @@ export default {
 
     text-align: left;
 
     text-align: left;
 
   }
 
   }
 
 
 
-  .enterpriseWeChat {
 
-    position: absolute;
 
-    width: 220px;
 
-    bottom: 0px;
 
-    height: 60px;
 
-    padding: 10px;
 
-    box-sizing: border-box;
 
-
 
-    .hovers {
 
-      width: 100%;
 
-      height: 100%;
 
-      transition: background-color 0.3s ease;
 
-      border-radius: 4px;
 
-      padding: 4px 8px;
 
-      box-sizing: border-box;
 
-      background: #fff;
 
-      cursor: pointer;
 
-
 
-      >div {
 
-        margin-left: 10px;
 
-      }
 
-
 
-      img {
 
-        width: 32px;
 
-        height: 32px;
 
-      }
 
-
 
-      span:first-child {
 
-        font-size: 12px;
 
-        color: 333;
 
-      }
 
-
 
-      span:last-child {
 
-        font-size: 10px;
 
-        color: rgba(51, 51, 51, 0.8);
 
-      }
 
-    }
 
-
 
-    .hovers:hover {
 
-      background: #F0F0F0;
 
-      border-radius: 4px;
 
-    }
 
-  }
 
-
 
   .logo {
 
   .logo {
 
     position: absolute;
 
     position: absolute;
 
     top: 0px;
 
     top: 0px;
 
@@ -190,7 +125,6 @@ export default {
 
     line-height: 60px;
 
     line-height: 60px;
 
     background: #545c64;
 
     background: #545c64;
 
     cursor: pointer;
 
     cursor: pointer;
 
-
 
     img {
 
     img {
 
       // width: 40px;
 
       // width: 40px;
 
       // height: 40px;
 
       // height: 40px;
 
@@ -198,7 +132,6 @@ export default {
 
       margin-right: 20px;
 
       margin-right: 20px;
 
       float: left;
 
       float: left;
 
     }
 
     }
 
-
 
     div {
 
     div {
 
       font-size: 17px;
 
       font-size: 17px;
 
       text-align: left;
 
       text-align: left;
 
@@ -209,47 +142,36 @@ export default {
 
     width: 220px;
 
     width: 220px;
 
     overflow-y: auto;
 
     overflow-y: auto;
 
   }
 
   }
 
-
 
   .menu-bar-collapse-width {
 
   .menu-bar-collapse-width {
 
-    width: 80px;
 
-
 
+    width: 65px;
 
+    
 
 
   }
 
   }
 
-
 
   /* 滚动条的整体部分，可自定义宽度、颜色等 */
 
   /* 滚动条的整体部分，可自定义宽度、颜色等 */
 
   .menu-bar-width::-webkit-scrollbar {
 
   .menu-bar-width::-webkit-scrollbar {
 
-    width: 5px;
 
-    /* 或者更宽 */
 
-    background-color: #f9f9fd;
 
-    /* 滚动条的背景色 */
 
-  }
 
-
 
-  /* 滚动条上的“滑块” */
 
-  .menu-bar-width::-webkit-scrollbar-thumb {
 
-    border-radius: 6px;
 
-    /* 圆角 */
 
-    background-color: #d1d1e0;
 
-    /* 滑块的背景色 */
 
-    border: 1px solid #f9f9fd;
 
-    /* 滑块边框 */
 
-  }
 
-
 
-  /* 滚动条上的“滑道” */
 
-  .menu-bar-width::-webkit-scrollbar-track {
 
-    border-radius: 6px;
 
-    /* 圆角 */
 
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 
-    /* 滑道的阴影效果 */
 
-  }
 
-
 
-  /* 当鼠标悬停在滚动条上时，改变滑块的颜色 */
 
-  .menu-bar-width::-webkit-scrollbar-thumb:hover {
 
-    background-color: #a0a0a5;
 
-  }
 
+  width: 10px; /* 或者更宽 */
 
+  background-color: #f9f9fd; /* 滚动条的背景色 */
 
+}
 
+/* 滚动条上的“滑块” */
 
+.menu-bar-width::-webkit-scrollbar-thumb {
 
+  border-radius: 6px; /* 圆角 */
 
+  background-color: #d1d1e0; /* 滑块的背景色 */
 
+  border: 3px solid #f9f9fd; /* 滑块边框 */
 
+}
 
+/* 滚动条上的“滑道” */
 
+.menu-bar-width::-webkit-scrollbar-track {
 
+  border-radius: 6px; /* 圆角 */
 
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滑道的阴影效果 */
 
+}
 
+/* 当鼠标悬停在滚动条上时，改变滑块的颜色 */
 
+.menu-bar-width::-webkit-scrollbar-thumb:hover {
 
+  background-color: #a0a0a5;
 
+}
 
 
 
-  /* 当滚动条在点击状态时，改变滑块的颜色 */
 
-  .menu-bar-width::-webkit-scrollbar-thumb:active {
 
-    background-color: #888;
 
-  }
 
+/* 当滚动条在点击状态时，改变滑块的颜色 */
 
+.menu-bar-width::-webkit-scrollbar-thumb:active {
 
+  background-color: #888;
 
 }
 
 }
 
+}
 
+
 
 </style>
 
 </style>