页面样式更改

src/assets/css/common.css

+:root {
+    /* 白色 */
+    /* --bgcolor: #fff;
+    --sidecolor: #fff;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* 灰灰 */
+    /* --bgcolor: #f8f8f5;
+    --sidecolor: #fafafa;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* 淺綠色 */
+    /* --bgcolor: #dff9fb;
+    --sidecolor: #c7ecee;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* 淡黄色 */
+    /* --bgcolor: #f5f5d5;
+    --sidecolor: #f5f5d5;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* 绿色 */
+  
+    /* --bgcolor: #ccffcc;
+    --sidecolor: #ccffcc;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* --bgcolor: #ccffff;
+    --sidecolor: #64d7eb;
+    --darkbgcolor: rgb(232, 232, 232); */
+    /* 蓝色系 */
+    --bgcolor: #f7faff; 
+    /* #E3F3FF; */
+    --sidecolor: #fff;
+    /* #E3F3FF; */
+    --darkbgcolor: #f4f5fa; 
+    /* rgb(232, 232, 232); */
+    --lineheight: 24px;
+    --normalfont: 12px;
+    /* --themecolor: #1561E0; */
+    --themecolor: #409EFF;
+  }
+  #app {
+    font-family: Helvetica, sans-serif;
+    display: flex;
+    flex-direction: column;
+  }
+  .e-table-wrapper{
+    display: flex;
+    flex-direction: column;
+  }
+  .e-table-wrapper .el-table {
+    flex:1;
+  }
+  /* 配色 */
+  /* .fold {
+    background-color: var(--color);
+  } */
+  
+  /* .unfold {
+    background-color: var(--color);
+  } */
+  .m-app-main {
+    background-color: var(--bgcolor);
+  }
+  .m-app {
+    background-color: var(--darkbgcolor);
+  }
+  /* sidemenu */
+  .el-menu {
+    background: var(--sidecolor);
+  }
+  .el-menu-item.is-active {
+    color: #fff;
+    background-color: var(--themecolor);
+  }
+  .eContainer-menu-search {
+    background: var(--sidecolor);
+  }
+  .eContainer-menu-search button {
+    background: var(--sidecolor);
+  }
+  .eContainer-scroller {
+    background: var(--sidecolor);
+  }
+  
+  .topbtnbar{
+    position: absolute;
+    top: 20px;
+    right: 60px;
+    z-index: 90;
+    display: inline-block;
+  }
+  .topbtnbar > span{
+    display: inline-block;
+  }
+  
+  /* 页签样式调整 */
+  .el-tabs .el-tabs__header {
+    margin: 0;
+  }
+  .el-tabs .el-tabs__content {
+    /* background: #fff; */
+    padding: 10px;
+  }
+  .el-tabs--card>.el-tabs__header .el-tabs__item {
+    border-left: 1px solid #ccc;
+    padding: 0 10px;
+    height: 30px;
+    line-height: 30px;
+    font-size: var(--normalfont);
+    border-bottom: 1px solid var(--themecolor);
+    /* border-top: 1px solid #ccc; */
+    background-image: linear-gradient(#fff,#dedede);
+  }
+  .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
+    padding-left: 10px;
+  }
+  .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
+    padding-right: 10px;
+  }
+  .el-tabs--card>.el-tabs__header {
+    border-bottom: 2px solid var(--themecolor);
+  }
+  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+      border-left: 1px solid var(--themecolor);
+      border-right: 1px solid var(--themecolor);
+      border-top: 1px solid var(--themecolor);
+      background-image: linear-gradient(#fff,#fff);
+      color: var(--themecolor);
+      border-bottom: 1px solid #fff;
+      box-sizing: content-box;
+  }
+  .el-tabs--card .el-tabs__nav-wrap {
+    margin-bottom: -2px;
+  }
+  .el-form-item--small .el-form-item__label {
+    font-size: var(--normalfont);
+    height: var(--lineheight);
+    line-height: var(--lineheight);
+  }
+  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+    margin-bottom: 12px;
+  }
+  .el-input--small .el-input__inner {
+    height: var(--lineheight);
+    line-height: var(--lineheight);
+    font-size: var(--normalfont);
+  }
+  .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
+    line-height: var(--lineheight);
+  }
+  .el-select .el-input .el-select__caret {
+    font-size: var(--normalfont);
+  }
+  .el-input--small .el-input__icon {
+    line-height: var(--lineheight);
+  }
+  .el-input-number--small {
+    line-height: var(--lineheight);
+  }
+  .el-textarea__inner {
+    font-size: 12px;
+  }
+  .el-button--small, .el-button--small.is-round {
+    padding: 0px 15px;
+    font-size: 12px;
+    line-height: 22px;
+  }
+  .el-button--small.el-button--text {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .el-card {
+    margin-bottom: 8px;
+  }
+  .m-inputbtn {
+    position: relative;
+  }
+  .m-inputbtn-input {
+    padding-right: 64px;
+    display: inline-block;
+  }
+  .m-inputbtn-btn {
+    position: absolute;
+    right: 0;
+  }
+  .m-inputbtn-double {
+    position: relative;
+  }
+  .m-inputbtn-input-double {
+    padding-right: 90px;
+    display: inline-block;
+  }
+  .m-inputbtn-btn-double {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .m-inputbtn-btn-double .el-button {
+    padding: 0 8px;
+  }
+  .m-inputbtn-double .el-button+.el-button {
+    margin-left: 0;
+  }
+  .el-radio__label {
+    font-size: 12px;
+  }
+  .c-title {
+    /* color: rgba(0, 0, 0, 0.65); */  
+    /* font-weight: 600; */
+    /* font-size: 12px; */
+    color: rgb(0, 0, 0);
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 10px;
+  }
+  .el-dialog__body {
+    padding: 10px 20px 20px;
+  }
+  /* form 必填项红星星靠右 */
+  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
+    content: '*';
+    color: #F56C6C;
+    margin-left: 4px;
+  }
+  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
+    content: none;
+  }
+  
+  .el-tree-node__label {
+    font-size: 12px;
+  }
+  .c-w-100 {
+    width: 100%;
+  }
+  .m-ureport-actions {
+    width: 100%;
+    text-align: center;
+  }
+  .m-ureport-actions .el-button--small {
+    padding: 0px 15px;
+    font-size: 12px;
+    line-height: 22px;
+  }
+  .el-table th {
+    user-select: initial;
+  }
+  .el-tooltip__popper.is-dark {
+    max-width: 600px;
+  }
+  .el-date-editor.el-range-editor--small.el-input__inner {
+    height: 24px;
+    font-size: 13px;
+  }
+  .el-date-editor.el-range-editor--small .el-range__close-icon, .el-range-editor--small .el-range__icon {
+    line-height: 16px;
+    font-size: 12px;
+  }
+  .el-date-editor.el-range-editor--small .el-range-separator {
+    line-height: 16px;
+    font-size: 12px;
+  }
\ No newline at end of file

src/components/BusinessButton.vue

 <template>
     <div class="bus-button">        
-            <c-button type="primary" v-on:click="save">提交</c-button>
-            <c-button type="primary" v-on:click="pedding">暂存</c-button>
-            <c-button type="primary" v-on:click="check">校核</c-button>
-            <c-button  v-on:click="exit">退出</c-button>
+        <c-button type="primary" v-on:click="save">提交</c-button>
+        <c-button type="primary" v-on:click="pedding">暂存</c-button>
+        <c-button type="primary" v-on:click="check">校核</c-button>
+        <c-button v-on:click="exit">退出</c-button>
     </div>
 </template>
 <script>
 import commonApi from "~/mixin/commonApi"
 import Utils from "~/utils"
+
 export default {
     props:["$pntvm"],
     data(){
@@ -89,6 +90,10 @@ export default {
 </script>
 <style>
 .bus-button {
-  text-align: center;
+    margin-bottom: 10px;
+}
+
+.bus-button :first-child {
+    margin-left: 0;
 }
 </style>
\ No newline at end of file

src/components/Toolbars.vue

+<template>
+  <div class="eibs-toolbar">
+    <el-popover
+      placement="left-start"
+      trigger="hover"
+      :offset="150"
+      popper-class="toolbars-popover"
+    >
+      <div class="toolbar-detail">
+        <ul>
+          <li id="tool-caculate">计算器</li>
+          <li id="tool-search">大额支付行号查询</li>
+          <li id="tool-telexCode">电报码查询</li>
+          <li id="tool-account">账户查询</li>
+          <li id="tool-swiftcode">SwiftCode查询</li>
+          <li id="tool-finishedtask">业务查询</li>
+          <li id="tool-exchangerate">即期牌价查询</li>
+          <li id="tool-forwardexchangerate">远期牌价查询</li>
+          <li id="tool-holiday">节假日查询</li>
+          <li id="tool-interestrate">利率查询</li>
+          <li id="tool-businessoffer">贸易金融业务报价查询</li>
+          <li id="tool-accttradedetails">账户交易明细查询</li>
+          <li id="tool-feetype">费用查询</li>
+          <li id="tool-sendMessageQuery">发报查询</li>
+          <li id="tool-receiveMessageQuery">收报查询</li>
+          <li id="tool-innerAccountBal">内部户可用余额查询</li>
+        </ul>
+      </div>
+      <div class="toolbar-core" slot="reference">工具条</div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.eibs-toolbar {
+  z-index: 1000;
+  user-select: auto;
+  width: 32px;
+  height: 68px;
+  position: fixed;
+  top: 200px;
+  right: 0;
+  z-index: 10000;
+}
+.toolbars-popover {
+	padding: 0!important;
+}
+.toolbar-core {
+  background: var(--themecolor);
+  border-radius: 4px;
+  width: 12px;
+  padding: 8px;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+.toolbar-detail {
+  font-size: 12px;
+}
+.toolbar-detail ul {
+  margin: 0;
+  padding: 5px;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  background: #fff;
+  cursor: pointer;
+}
+.toolbar-detail ul li {
+  list-style: none;
+  padding: 8px 15px;
+}
+.toolbar-detail li:hover {
+  background: var(--themecolor);
+  color: #fff;
+}
+</style>

src/components/c-page.vue

 <template>
-    <div class="c-page-container">
-        <p class="title">{{title}}</p>
-        <div style="flex:1;padding:0.5rem">
-            <slot></slot>
-        </div>
+  <div class="c-page-container">
+    <div class="title">
+      <span>{{ title }}</span>
     </div>
+    <div style="flex: 1; padding: 10px 20px; position: relative">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props:['title']
-}
+  props: ["title"],
+};
 </script>
 <style scoped>
-    .title{
-        margin: 0;
-        padding: 0.5em;
-        padding-left:1em ;
-        font-size: 1rem;
-        border-bottom: 2px solid #337bde;
-    }
-    .c-page-container{
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow-x: hidden;
-    }
+.title {
+  margin: 0;
+  padding: 8px;
+  padding-left: 20px;
+  font-size: 14px;
+  border-bottom: 1px solid var(--darkbgcolor);
+  background-color: var(--darkbgcolor);
+}
+.c-page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  /* overflow-x: hidden; */
+	overflow: hidden;
+}
 </style>
\ No newline at end of file

src/main.js

@@ -10,6 +10,8 @@ import App from './App.vue'
 import RootRouter from './routers'
 import store from "./store"
 
+import '~/assets/css/common.css'
+
 import CustomComponent from "./components" 
 import VueFunc from "./utils/vuefunc"
 

src/views/Business/Sptrou/Sptroup.vue

@@ -36,7 +36,7 @@ export default {
 		};
   },
 	computed: {
-		tableColumns() {
+		tableData() {
 			return [];
 		}
 	},

src/views/Layout/SideMenu.vue

@@ -129,5 +129,59 @@ export default {
   },
 };
 </script>
-<style>
+<style scoped>
+.eContainer-scroller .el-scrollbar__wrap {
+  overflow: auto;
+  margin-right: 0px !important;
+}
+.eContainer-menu-search {
+  width: 100%;
+  position: relative;
+}
+.eContainer-menu-search .el-input {
+  width: auto;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  left: 60px;
+}
+.eContainer-menu-search .el-input .el-input__inner {
+  height: 30px;
+}
+.eContainer-menu-search .el-icon-search {
+  line-height: 30px;
+}
+.eContainer-scroller {
+  height: calc(100% - 44px);
+}
+.eContainer-scroller .el-scrollbar__bar {
+  display: none;
+}
+.el-icon-s-fold {
+  float: left;
+  font-size: 20px;
+}
+.el-icon-s-unfold {
+  float: left;
+  font-size: 20px;
+}
+.el-menu {
+  border-right: none;
+}
+.eContainer-refresh {
+  width: auto;
+  overflow: auto;
+  height: calc(100% - 44px);
+}
+.el-button-refresh {
+  width: 100%;
+  height: 40px;
+}
+.el-submenu__title,
+.el-menu-item,
+.el-submenu .el-menu-item {
+  font-size: 12px;
+  height: 35px;
+  line-height: 35px;
+}
 </style>
\ No newline at end of file

src/views/Layout/index.vue

 <template>
-     <el-container style="background-color:#e8e8e8;margin:0;">
-        <el-header style="padding:0;" >
-            <headerCom></headerCom>
-        </el-header>
-        <div style="height:8px;"></div>
-        <el-container>
-            <el-aside width="200px" style="background-color:white;">
-                <sideMenu></sideMenu>
-            </el-aside>
-            <div style="width:8px;"></div>
-            <el-main style="padding:0;background-color:white;position:relative;">
-                <business></business>
-            </el-main>
-        </el-container>
+  <el-container
+    style="background-color: #e8e8e8; margin: 0; padding-bottom: 8px"
+  >
+    <el-header style="padding: 0">
+      <headerCom></headerCom>
+    </el-header>
+    <div style="height: 8px"></div>
+    <el-container>
+      <el-aside width="200px" style="background-color: white">
+        <sideMenu></sideMenu>
+      </el-aside>
+      <div style="width: 8px"></div>
+      <el-main class="m-app-main" style="background-color: var(--bgcolor)">
+        <business></business>
+        <toolbars></toolbars>
+      </el-main>
     </el-container>
+  </el-container>
 </template>
 
 <script>
-import headerCom from "./Header"
-import sideMenu from "./SideMenu"
-import business from "../Business"
+import headerCom from "./Header";
+import sideMenu from "./SideMenu";
+import business from "../Business";
+import toolbars from "~/components/Toolbars"
+
 export default {
-    components:{headerCom,sideMenu,business}
-}
+  components: { headerCom, sideMenu, business, toolbars },
+};
 </script>
 
 <style>
-
-</style>
\ No newline at end of file
+.m-app-main {
+  padding: 0;
+  position: relative;
+  height: 100%;
+  /* padding-bottom: 68px; */
+  box-sizing: border-box;
+  margin-right: 10px;
+}
+</style>