Bläddra i källkod

菜单整体样式改版

@dongkboy 2 år sedan
förälder
incheckning
da6197542f

+ 2 - 1
index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script src="//at.alicdn.com/t/c/font_4439599_dea56hl0hs4.js"></script>
+    <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> -->
     <title>管理平台</title>
   </head>
   <body style="margin: 0;">

+ 40 - 6
src/assets/css/global.css

@@ -5,11 +5,10 @@ html, body, #app {
   padding: 0;
   list-style: none;
 }
-.icon {
-  width: 1em; height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
+.iconfont{
+  font-size: 20px !important;
+  padding: 0;
+  margin: 0;
 }
 .span-disabled{
   display: inline-block;
@@ -111,4 +110,39 @@ html, body, #app {
   width: 100px;
   height: 50px;
   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;
+}

+ 8 - 18
src/components/Hamburger/index.vue

@@ -1,16 +1,7 @@
 <template>
-    <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> -->
+  <div @click="onClick == null ? emptyClick : onClick" class="hamburger"  :class="{'is-active':isActive}">
+    <i class="iconfont icon-zhankai" ></i>
+  </div>
 </template>
 
 <script>
@@ -28,18 +19,16 @@ export default {
   },
   methods: {
     emptyClick() {
-      
-    }
+}
   }
 }
 </script>
 
-<style scoped>
+<style  scoped>
+
 .hamburger {
   display: inline-block;
   cursor: pointer;
-  width: 20px;
-  height: 20px;
   transform: rotate(90deg);
   transition: .38s;
   transform-origin: 50% 50%;
@@ -47,4 +36,5 @@ export default {
 .hamburger.is-active {
   transform: rotate(0deg);
 }
-</style>
+</style>
+

+ 38 - 28
src/components/MenuTree/index.vue

@@ -1,20 +1,14 @@
 <template>
   <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
-    <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  slot="title">
+      <i class="iconfont" :class="menu.icon"></i>
+      <span slot="title" class="firstMenu" >{{ menu.name }}</span>
     </template>
     <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
   </el-submenu>
   <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
-    <!-- <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>
+    <i class="iconfont" :class="menu.icon" ></i>
+    <span slot="title">{{ menu.name }}</span>
   </el-menu-item>
 </template>
 
@@ -28,39 +22,55 @@ export default {
       required: true
     }
   },
-  created(){
+  data () {
+    return {
+    }
+  },
+  created() {
   },
   methods: {
-    handleRoute (menu) {
+    handleRoute(menu) {
       // 如果是嵌套页面,转换成iframe的path
       let path = getIFramePath(menu.url)
-      if(!path) {
+      if (!path) {
         path = menu.url
       }
       // 通过菜单URL跳转至指定路由
       this.$router.push("/" + path)
+
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.el-submenu, .el-menu-item {
-  background-color: #393D49;
-  color: #fff;
+
+/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-menu-item.is-active {
   // 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>

+ 95 - 285
src/views/Core/KtCommonTable.vue

@@ -1,48 +1,22 @@
 <template>
   <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',
         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;">
         <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 prop="bankAccount" label="银行" style="flex: 1">
             </el-table-column>
@@ -54,7 +28,8 @@
             </el-table-column>
             <el-table-column prop="auditStatus" label="审核状态" style="flex: 1">
               <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>
             </el-table-column>
             <el-table-column prop="delFlag" label="是否解绑" style="flex: 1" width="150">
@@ -64,13 +39,16 @@
                     <span style="margin-right: 20px;">{{ scope1.row.delFlag == '0' ? '未解绑' : '已解绑' }}</span>
                   </el-col>
                   <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 :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 :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-row>
               </template>
@@ -78,184 +56,63 @@
           </el-table>
         </template>
       </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">
-        <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">
-            <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>
         </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">
-            <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>
           </template>
         </el-table-column>
       </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">
-          <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">
               <span class="el-dropdown-link">
                 更多
@@ -263,7 +120,9 @@
               </span>
               <el-dropdown-menu slot="dropdown">
                 <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-menu>
             </el-dropdown>
@@ -274,58 +133,19 @@
     <!--分页栏-->
     <!-- 底部分页 -->
     <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>
     </div>
   </div>
@@ -402,7 +222,7 @@ export default {
     button6Name: {
       type: String,
     },
-    buttonDropdown:{
+    buttonDropdown: {
       type: Array,
       default: () => [],
     },
@@ -549,14 +369,14 @@ export default {
   },
   data() {
     return {
-      tableHeight: 0,
+      tableHeight: 580,
       loading: false, // 加载标识
       selections: [], // 列表选中列
       pageRequest: {
         pageNum: 1,
         pageSize: 20,
       },
-      taskPool:false
+      taskPool: false
     };
   },
   methods: {
@@ -566,11 +386,11 @@ export default {
       // } else if (!!row.fieldName24 && row.fieldName24.indexOf("已") >= 0) {
       // 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 ''
         }
       }
@@ -844,7 +664,7 @@ export default {
             callback: callback,
           });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     //批量结算
     handleBatchSettled: function () {
@@ -871,35 +691,25 @@ export default {
   mounted() {
     const that = this;
     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>
 
 <style scoped>
-
 /* 底部固定分页 */
 .bottomFixed {
   height: 40px;
-  position: fixed;
-  bottom: 0;
   width: 100%;
   background: #fff;
+  margin-top: 15px;
   /* margin-top: 10px; */
   /* box-shadow: 0 -2px 0 0 #efefef; */
 }
+
 /deep/.el-table .el-table__row--striped {
   background-color: inherit;
 }
+
 .el-table .warningRow {
   background: oldlace;
 }
@@ -907,10 +717,10 @@ export default {
 .el-table .successRow {
   background: #f0f9eb;
 }
-.el-dropdown-link{
+
+.el-dropdown-link {
   cursor: pointer;
   color: var(--themeColor);
   font-size: 12px;
 }
-
 </style>

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

+ 119 - 18
src/views/Home.vue

@@ -1,34 +1,135 @@
 <template>
-  <div class="container">
-      <!-- 导航菜单栏 -->
+  <div>
+    <el-container class="full-height1">
       <nav-bar></nav-bar>
-      <!-- 头部区域 -->
-      <head-bar></head-bar>
-      <!-- 主内容区域 -->
-      <main-content></main-content>
+      <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> -->
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 import HeadBar from "./HeadBar/HeadBar"
 import NavBar from "./NavBar/NavBar"
 import MainContent from "./MainContent/MainContent"
 export default {
-  components:{
-        HeadBar,
-        NavBar,
-        MainContent
+  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();
+      }
+    }
   }
 };
+
 </script>
 
 <style scoped lang="scss">
-  .container {
-    position:absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    // background: rgba(224, 234, 235, 0.1);
+.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;
   }
-</style>  
+}
+
+.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>

+ 15 - 19
src/views/MainContent/MainContent.vue

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

+ 137 - 59
src/views/NavBar/NavBar.vue

@@ -1,36 +1,40 @@
 <template>
-  <div class="menu-bar-container">
+  <div class="menu-bar-container " >
     <!-- 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" />
-      <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" />
-        <span>{{appName}}</span>
+        <span>{{ appName }}</span>
       </div>
     </div>
-    <!-- 导航菜单 -->
-    <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 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>
+    <!-- 左下角企业微信扫码 -->
+    <!-- <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>
 </template>
 <script>
@@ -68,19 +72,19 @@ export default {
   watch: {
     $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() {
     this.handleRoute(this.$route);
 
   },
   methods: {
-    handleopen() {},
-    handleclose() {},
-    handleselect(a, b) {},
+    handleopen() { },
+    handleclose() { },
+    handleselect(a, b) { },
     // 路由操作处理
     handleRoute(route) {
       // tab标签页选中, 如果不存在则先添加
@@ -105,12 +109,29 @@ data(){
 </script>
 
 <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 {
   position: fixed;
   top: 0px;
   left: 0;
   bottom: 0;
   z-index: 1020;
+
   .el-menu {
     position: absolute;
     top: 60px;
@@ -118,6 +139,50 @@ data(){
     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 {
     position: absolute;
     top: 0px;
@@ -125,6 +190,7 @@ data(){
     line-height: 60px;
     background: #545c64;
     cursor: pointer;
+
     img {
       // width: 40px;
       // height: 40px;
@@ -132,6 +198,7 @@ data(){
       margin-right: 20px;
       float: left;
     }
+
     div {
       font-size: 17px;
       text-align: left;
@@ -142,36 +209,47 @@ data(){
     width: 220px;
     overflow-y: auto;
   }
+
   .menu-bar-collapse-width {
-    width: 65px;
-    
+    width: 80px;
+
 
   }
+
   /* 滚动条的整体部分,可自定义宽度、颜色等 */
   .menu-bar-width::-webkit-scrollbar {
-  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;
-}
+    width: 5px;
+    /* 或者更宽 */
+    background-color: #f9f9fd;
+    /* 滚动条的背景色 */
+  }
 
-/* 当滚动条在点击状态时,改变滑块的颜色 */
-.menu-bar-width::-webkit-scrollbar-thumb:active {
-  background-color: #888;
-}
-}
+  /* 滚动条上的“滑块” */
+  .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;
+  }
+
+  /* 当滚动条在点击状态时,改变滑块的颜色 */
+  .menu-bar-width::-webkit-scrollbar-thumb:active {
+    background-color: #888;
+  }
+}
 </style>