theme

src/App.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="app-container" @contextmenu.prevent>
-        <!-- 中文配置 -->
-        <a-config-provider :locale="zhCN">
-            <a-spin :tip="tip" :spinning="spinning" size="large">
-                <router-view />
-            </a-spin>
-        </a-config-provider>
-    </div>
+  <div class="app-container dark-theme "
+       @contextmenu.prevent>
+    <!-- 中文配置 -->
+    <a-config-provider :locale="zhCN">
+      <a-spin :tip="tip"
+              :spinning="spinning"
+              size="large">
+        <router-view />
+      </a-spin>
+    </a-config-provider>
+  </div>
 </template>
 
 <script lang="ts">
@@ -21,6 +24,7 @@ import { Modal } from 'ant-design-vue';
 import { setLoadComplete } from '@/common/methods';
 import { isLogin, logout } from '@/services/bus/login';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import { initTheme } from '@/common/config/theme';
 let lastTime = new Date().getTime();
 
 function logoutAction() {
@@ -62,9 +66,9 @@ export default defineComponent({
     name: 'app',
     components: {},
     setup() {
+        initTheme();
         let spinning = ref<boolean>(false);
         const tip = ref<string>('');
-
         // 登出状态展示
         eventBus.$onOnly('logout', () => {
             tip.value = '跳转中...';

src/assets/styles/index.css

@@ -1,3 +1,4 @@
+@import 'theme.css';
 /* 定制宽高按钮 */
 @import '~ant-design-vue/dist/antd.css';
 .flex {
@@ -663,6 +664,9 @@
 .fr {
   float: right;
 }
+.ml8 {
+  margin-left: 8px;
+}
 .ml10 {
   margin-left: 10px;
 }
@@ -702,6 +706,9 @@
 .grey {
   color: #88a0ae;
 }
+.grey1 {
+  color: #7a8a94;
+}
 .white {
   color: #ffffff;
 }
@@ -801,7 +808,7 @@
   border: 0;
   color: #ffffff;
   font-size: 14px;
-  background: linear-gradient(0deg, #ff4d4f 0%, #FF2B2B 99%);
+  background: linear-gradient(0deg, #FF5C6F 0%, #FB7F75 99%);
   /*圆角兼容性*/
   -moz-border-radius: 3px 3px 3px 3px;
   -webkit-border-radius: 3px 3px 3px 3px;
@@ -809,7 +816,7 @@
 }
 .btnDanger.ant-btn:hover,
 .btnDanger.ant-btn:focus {
-  background: linear-gradient(0deg, rgba(255, 77, 79, 0.8) 0%, rgba(255, 43, 43, 0.8) 99%);
+  background: linear-gradient(0deg, rgba(255, 92, 111, 0.8) 0%, rgba(251, 127, 117, 0.8) 99%);
   color: rgba(255, 255, 255, 0.8);
   border: 0;
 }
@@ -1080,10 +1087,17 @@
 .ant-modal-confirm-confirm {
   top: 50%;
   padding-bottom: 0;
-  margin-top: -64px;
+  width: 300px !important;
+  height: 200px;
+  margin-top: -100px;
 }
 .ant-modal-confirm-confirm .ant-modal-content {
-  background: #0F1A25;
+  background: #0E1A25;
+  height: 100%;
+  /*圆角兼容性*/
+  -moz-border-radius: 10px 10px 10px 10px;
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border-radius: 10px 10px 10px 10px;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-close .ant-modal-close-x {
   width: 40px;
@@ -1094,47 +1108,53 @@
   color: #1271BA;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body {
-  padding: 24px;
+  padding: 20px;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-body .ant-modal-confirm-title {
-  color: #ffffff;
+  color: #3a87f7;
   text-align: center;
+  font-size: 20px;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-body .ant-modal-confirm-content {
   color: #ffffff;
-  font-size: 14px;
+  font-size: 16px;
+  margin-top: 25px;
+  text-align: center;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns {
   float: none;
   text-align: center;
+  margin-top: 20px;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn {
-  width: 100px;
-  height: 34px;
-  line-height: 32px;
-  border: 1px solid #0C95FF;
+  width: 120px;
+  height: 30px;
+  line-height: 28px;
   border-radius: 3px;
-  background: transparent;
+  background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
   font-size: 16px;
-  color: #0C95FF;
+  color: #ffffff;
   margin-right: 20px;
+  border: 0;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn:hover {
-  border-color: rgba(12, 149, 255, 0.8);
+  background: linear-gradient(0deg, rgba(52, 61, 70, 0.8) 0%, rgba(56, 68, 79, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary {
-  margin-left: 20px;
-  width: 100px;
-  height: 34px;
-  line-height: 32px;
+  width: 120px;
+  height: 30px;
+  line-height: 28px;
   border: 0;
-  background: linear-gradient(0deg, #3163BA 0%, #4179DB 100%);
+  background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
   border-radius: 3px;
   font-size: 16px;
   color: #ffffff;
+  margin-right: 0;
+  margin-left: 0;
 }
 .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary:hover {
-  background: linear-gradient(0deg, rgba(49, 99, 186, 0.8) 0%, rgba(65, 121, 219, 0.8) 100%);
+  background: linear-gradient(0deg, rgba(50, 112, 210, 0.8) 0%, rgba(58, 135, 247, 0.8) 100%);
   color: rgba(255, 255, 255, 0.8);
 }
 .tltLeft {
@@ -1244,11 +1264,11 @@
 .ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:last-child {
   margin-bottom: 0 !important;
 }
-.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content.ant-collapse-content-active .ant-collapse-content-box {
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
   padding: 0 0 0 30px;
   background-color: transparent;
 }
-.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content.ant-collapse-content-active .ant-collapse-content-box .btn-list {
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list {
   width: calc(100% - 10px);
   justify-content: flex-end;
   padding-right: 10px;
@@ -1260,6 +1280,70 @@
 .ant-row.headRow .ant-col:nth-child(3) {
   text-align: right;
 }
+.ant-collapse.futureCollapse.ant-collapse-borderless {
+  background: transparent;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item {
+  margin-top: 10px;
+  background: #0f161c;
+  border: 1px solid #172B56;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header {
+  color: #556772;
+  font-size: 14px;
+  border-bottom: 0;
+  padding: 0;
+  line-height: 43px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
+  fill: #556772;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  left: 0;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow {
+  width: 100%;
+  line-height: 40px;
+  font-size: 16px;
+  color: #E5E5E5;
+  margin-bottom: 10px;
+  border: 0 !important;
+  padding-left: 14px;
+  padding-right: 12px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:last-child {
+  text-align: right;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:first-child {
+  text-align: left;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:first-child {
+  margin-top: 0 !important;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:last-child {
+  margin-bottom: 0 !important;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
+  padding: 0 0 0 30px;
+  background-color: transparent;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list {
+  width: calc(100% - 10px);
+  justify-content: flex-end;
+  padding-right: 10px;
+  padding-bottom: 10px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list .operBtn.ant-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 26px;
+  line-height: 26px;
+}
 input:-webkit-autofill,
 textarea:-webkit-autofill,
 select:-webkit-autofill,
@@ -1551,7 +1635,6 @@ input:-internal-autofill-selected {
 }
 .buyHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
 .sellHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
-  min-height: calc(100vh - 470px);
   background: transparent;
 }
 .buyHallTable .ant-table,
@@ -1586,7 +1669,6 @@ input:-internal-autofill-selected {
 }
 .buyHallTable .ant-table .ant-table-tbody,
 .sellHallTable .ant-table .ant-table-tbody {
-  min-height: calc(100vh - 470px);
   background: #271112;
 }
 .buyHallTable .ant-table .ant-table-tbody tr td,
@@ -1654,6 +1736,27 @@ input:-internal-autofill-selected {
 .buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) {
   background-color: #0E0E0F;
 }
+.buyHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.sellHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  min-height: calc(100vh - 470px);
+}
+.buyHallTable .ant-table .ant-table-tbody,
+.sellHallTable .ant-table .ant-table-tbody {
+  min-height: calc(100vh - 470px);
+}
+.noDataTable .ant-table .ant-table-header {
+  height: 35px;
+  margin-bottom: 0 !important;
+  overflow: hidden !important;
+}
+.buyHallTableHigh .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.sellHallTableHigh .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  min-height: calc(100vh - 180px);
+}
+.buyHallTableHigh .ant-table .ant-table-tbody,
+.sellHallTableHigh .ant-table .ant-table-tbody {
+  min-height: calc(100vh - 180px);
+}
 .formBar ::v-deep.formProgress {
   width: 140px;
   margin-left: 70px;

src/assets/styles/index.less

@@ -1,4 +1,5 @@
 // 全局样式(在入口模块被加载时生效)
+@import 'theme.css';
 @import 'variables.less';
 @import '~ant-design-vue/dist/antd.css';
 // @import './fonts/iconfont.css';

src/assets/styles/theme.css

@@ -0,0 +1,6 @@
+:root[theme="dark"] {
+    --m-grey0: #364048 ;
+}
+:root[theme="light"] {
+--m-grey0: #5179E2;
+}

src/assets/styles/variables.css

@@ -32,17 +32,1850 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.ant-input::placeholder {
+  color: #394753;
+}
+.commonInput {
+  background: #15202B;
+  border: 1px solid #2B3F52;
+  border-radius: 3px;
+  color: #E5E5E5;
+}
+.commonInput .ant-input {
+  color: #E5E5E5;
+  background: transparent;
+}
+.commonInput .ant-input-suffix {
+  color: #E5E5E5;
+}
+.commonInput:hover,
+.commonInput:focus {
+  border-color: #0C95FF;
+}
+.tableConditionInput {
+  width: 140px;
+  height: 30px;
+  line-height: 30px;
+  background: #252D34;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  border: 0;
+  color: #E5E5E5;
+  font-size: 14px;
+}
+.tableConditionInput + .tableConditionInput {
+  margin-left: 10px;
+}
+.ant-select-dropdown {
+  background: #424E59;
+  border: 1PX solid #48545F;
+  box-shadow: 0px 10px 10px 0px rgba(18, 22, 24, 0.36);
+  border-radius: 5px;
+}
+.ant-select-dropdown .ant-select-item {
+  color: #7a8a94;
+}
+.ant-select-dropdown .ant-select-item-option-active,
+.ant-select-dropdown .ant-select-item-option-selected,
+.ant-select-dropdown .ant-select-item-option-hover {
+  background: #3a87f7;
+  color: #E5E5E5;
+}
+.srcollYTable .ant-table {
+  width: 100%;
+}
+.srcollYTable .ant-table table {
+  border: 0;
+}
+.srcollYTable .ant-table .ant-table-thead tr {
+  box-shadow: 0px 1px 0px 0px #2E3539;
+}
+.srcollYTable .ant-table .ant-table-thead tr th {
+  line-height: 34px;
+  background: #212629;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #556772;
+  font-size: 14px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+}
+.srcollYTable .ant-table .ant-table-tbody tr td {
+  height: 34px;
+  line-height: 34px;
+  padding: 0 8px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+  font-size: 16px;
+  color: #E5E5E5;
+}
+.srcollYTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
+  background-color: #172B56;
+}
+.srcollYTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
+  text-align: right;
+}
+.srcollYTable .ant-table .ant-table-placeholder {
+  border: 0;
+  background: #0E0E0F;
+}
+.srcollYTable .ant-table-row-expand-icon {
+  border-color: #556772;
+  background-color: transparent;
+  color: #556772;
+}
+.srcollYTable .operBtn.ant-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 26px;
+  line-height: 26px;
+}
+.expandLeftTable .ant-table .ant-table-content .ant-table-tbody .ant-table-expanded-row {
+  width: calc(100vw - 180px);
+}
+.topTable .ant-table {
+  width: 100%;
+}
+.topTable .ant-table table {
+  border: 0;
+}
+.topTable .ant-table .ant-table-thead tr {
+  box-shadow: 0px 1px 0px 0px #2E3539;
+}
+.topTable .ant-table .ant-table-thead tr th {
+  line-height: 34px;
+  background: #212629;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #556772;
+  font-size: 14px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+}
+.topTable .ant-table .ant-table-tbody tr td {
+  height: 34px;
+  line-height: 34px;
+  padding: 0 8px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+  font-size: 16px;
+  color: #E5E5E5;
+}
+.topTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
+  background-color: #172B56;
+}
+.topTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
+  text-align: right;
+}
+.topTable .ant-table .ant-table-placeholder {
+  border: 0;
+  background: #0E0E0F;
+}
+.topTable .ant-table-row-expand-icon {
+  border-color: #556772;
+  background-color: transparent;
+  color: #556772;
+}
+.topTable .operBtn.ant-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 26px;
+  line-height: 26px;
+}
+.topOrderTable .ant-table {
+  width: 100%;
+}
+.topOrderTable .ant-table table {
+  border: 0;
+}
+.topOrderTable .ant-table .ant-table-thead tr {
+  box-shadow: 0px 1px 0px 0px #2E3539;
+}
+.topOrderTable .ant-table .ant-table-thead tr th {
+  line-height: 34px;
+  background: #212629;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #556772;
+  font-size: 14px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.topOrderTable .ant-table .ant-table-tbody tr td {
+  height: 34px;
+  line-height: 34px;
+  padding: 0 8px;
+  border-right: 1px solid #161A1C;
+  border-bottom: 1px solid #161A1C;
+  font-size: 16px;
+  color: #E5E5E5;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
+  background-color: #172B56;
+}
+.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
+  text-align: right;
+}
+.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td:last-child {
+  position: relative;
+}
+.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td:last-child .btn-list {
+  position: absolute;
+  left: calc(100vw - 530px);
+  top: 4px;
+  width: 300px;
+  text-align: right;
+}
+.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td:last-child .btn-list .operBtn.ant-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 26px;
+  line-height: 26px;
+}
+.topOrderTable .ant-table .ant-table-placeholder {
+  border: 0;
+  background: #0E0E0F;
+}
+.topOrderTable .ant-table-row-expand-icon {
+  border-color: #556772;
+  background-color: transparent;
+  color: #556772;
+}
+.collapsed .topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td:last-child .btn-list {
+  left: calc(100vw - 430px);
+}
+.dialogTable .ant-table {
+  width: 100%;
+  background: transparent;
+}
+.dialogTable .ant-table table {
+  border: 1px solid #1B2A38;
+  border-radius: 0;
+}
+.dialogTable .ant-table .ant-table-thead tr {
+  box-shadow: 0px 1px 0px 0px #2E3539;
+}
+.dialogTable .ant-table .ant-table-thead tr th {
+  line-height: 36px;
+  background: #0F1A25;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #88a0ae;
+  font-size: 16px;
+  border-right: 1px solid #1B2A38;
+  border-bottom: 1px solid #1B2A38;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.dialogTable .ant-table .ant-table-tbody tr td {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 8px;
+  border-right: 1px solid #1B2A38;
+  border-bottom: 1px solid #1B2A38;
+  font-size: 14px;
+  color: #E5E5E5;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  background: #0F1A25;
+}
+.dialogTable .ant-table .ant-table-placeholder {
+  border: 0;
+  background: #0F1A25;
+}
+.ant-empty-normal {
+  color: #556772;
+}
+.ant-empty-img-simple-path,
+.ant-empty-img-simple-ellipse {
+  fill: #556772;
+}
+.ant-empty-img-simple-g {
+  stroke: #556772;
+}
+.ant-modal-wrap {
+  overflow: hidden;
+}
+.add-custom,
+.commonModal {
+  top: 0;
+  max-height: 100%;
+  padding-bottom: 0;
+}
+.add-custom .ant-modal-content,
+.commonModal .ant-modal-content {
+  background: #0F1A25;
+  border-radius: 5px;
+  height: 100%;
+}
+.add-custom .ant-modal-content .ant-modal-close .ant-modal-close-x,
+.commonModal .ant-modal-content .ant-modal-close .ant-modal-close-x {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.add-custom .ant-modal-content .ant-modal-close .ant-modal-close-x .ant-modal-close-icon,
+.commonModal .ant-modal-content .ant-modal-close .ant-modal-close-x .ant-modal-close-icon {
+  color: #1271BA;
+}
+.add-custom .ant-modal-content .ant-modal-header,
+.commonModal .ant-modal-content .ant-modal-header {
+  height: 40px;
+  background: linear-gradient(0deg, #112C43, #084258);
+  border-radius: 5px;
+  padding: 0;
+  text-align: center;
+  border-bottom: 0;
+}
+.add-custom .ant-modal-content .ant-modal-header .ant-modal-title,
+.commonModal .ant-modal-content .ant-modal-header .ant-modal-title {
+  line-height: 40px;
+  font-size: 16px;
+  color: #ffffff;
+}
+.add-custom .ant-modal-content .ant-modal-body,
+.commonModal .ant-modal-content .ant-modal-body {
+  min-height: 380px;
+  max-height: calc(100vh - 115px);
+  overflow-y: auto;
+}
+.add-custom .ant-modal-content .ant-modal-footer,
+.commonModal .ant-modal-content .ant-modal-footer {
+  border-top: 0;
+  text-align: center;
+  padding-bottom: 31px;
+  height: 75px;
+}
+.add-custom .ant-modal-content .ant-modal-footer .ant-btn-primary,
+.commonModal .ant-modal-content .ant-modal-footer .ant-btn-primary {
+  width: 200px;
+  height: 34px;
+  line-height: 32px;
+  border: 0;
+  background: linear-gradient(0deg, #3163BA 0%, #4179DB 100%);
+  border-radius: 3px;
+  font-size: 16px;
+  color: #ffffff;
+}
+.add-custom .ant-modal-content .ant-modal-footer .ant-btn-primary:hover,
+.commonModal .ant-modal-content .ant-modal-footer .ant-btn-primary:hover {
+  background: linear-gradient(0deg, rgba(49, 99, 186, 0.8) 0%, rgba(65, 121, 219, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.add-custom .ant-modal-content .ant-modal-footer .ant-btn.cancelBtn,
+.commonModal .ant-modal-content .ant-modal-footer .ant-btn.cancelBtn {
+  width: 200px;
+  height: 34px;
+  line-height: 32px;
+  border: 1px solid #0C95FF;
+  border-radius: 3px;
+  background: transparent;
+  font-size: 16px;
+  color: #0C95FF;
+  margin-right: 20px;
+}
+.add-custom .ant-modal-content .ant-modal-footer .ant-btn.cancelBtn:hover,
+.commonModal .ant-modal-content .ant-modal-footer .ant-btn.cancelBtn:hover {
+  border-color: rgba(12, 149, 255, 0.8);
+}
+.ant-form.inlineForm .ant-row.ant-form-item {
+  margin-bottom: 21px;
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
+  position: relative;
+  width: 130px;
+  line-height: 30px;
+  text-align: left;
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label {
+  color: #7a8a94;
+  padding-left: 16px;
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label::after {
+  content: '';
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label::before {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  font-size: 16px;
+  line-height: 21px;
+  color: #FF2B2B;
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label label {
+  padding-left: 0;
+}
+.ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-control-wrapper .ant-form-item-control {
+  line-height: 30px;
+}
+.ant-form.inlineForm .relative.ant-form-item {
+  position: relative;
+}
+.ant-form.inlineForm .relative.ant-form-item .tip {
+  position: absolute;
+  font-size: 14px;
+  color: #7a8a94;
+  width: 100%;
+}
+.ant-form.inlineForm .relative.ant-form-item .ant-form-item-control {
+  width: 200px;
+}
+.ant-form.inlineForm .relative.ant-form-item .ant-form-item-control .unit {
+  float: right;
+  color: #88a0ae;
+}
+.ant-form.inlineForm .relative.ant-form-item .ant-form-item-control .backUnit {
+  position: absolute;
+  right: -20px;
+  top: -7px;
+  line-height: 32px;
+  height: 32px;
+  color: #88a0ae;
+}
+.ant-form.inlineForm .tc.ant-form-item .ant-form-item-control-wrapper {
+  margin: 0 auto;
+}
+.ant-form.inlineForm .pl40.ant-form-item .ant-form-item-label label {
+  padding-left: 40px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-label {
+  width: 70px;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-label label {
+  padding-left: 0;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-label label::before {
+  display: none;
+}
+.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-control-wrapper {
+  width: calc(100% - 70px);
+}
+.ant-select-single .ant-select-selector {
+  height: 30px;
+  padding: 0 8px;
+  background: #15202B;
+  border: 1px solid #0C95FF;
+  border-radius: 3px;
+  color: #E5E5E5;
+}
+.ant-select-single .ant-select-arrow {
+  right: 8px;
+  color: #3a87f7;
+}
+.inlineFormSelect.ant-select-single,
+.shortSelect.ant-select-single {
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  border: 1px solid #2B3F52;
+}
+.inlineFormSelect.ant-select-single:hover,
+.inlineFormSelect.ant-select-single:focus {
+  border-color: #0C95FF;
+}
+.inlineFormSelect.ant-select-single .ant-select-selector {
+  height: 30px;
+  padding: 0 8px;
+  background: #15202B;
+  border: 0;
+  color: #E5E5E5;
+}
+.inlineFormSelect.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: #394753;
+}
+.inlineFormSelect.ant-select-single .ant-select-arrow {
+  right: 8px;
+  color: #3a87f7 !important;
+}
+.shortSelect.ant-select-single {
+  margin-right: 0;
+}
+.shortSelect.ant-select-single .ant-select-selector {
+  padding: 0 5px;
+}
+.shortSelect.ant-select-single .ant-select-selector .ant-select-selection-item {
+  padding-right: 14px;
+}
+.typeSelect.ant-select-single {
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  border: 1px solid #2B3F52;
+}
+.typeSelect.ant-select-single:hover,
+.typeSelect.ant-select-single:focus {
+  border-color: #0C95FF;
+}
+.typeSelect.ant-select-single .ant-select-selector {
+  height: 30px;
+  padding: 0 8px;
+  background: #15202B;
+  border: 0;
+  color: #E5E5E5;
+}
+.typeSelect.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+  color: #394753;
+}
+.typeSelect.ant-select-single .ant-select-arrow {
+  right: 8px;
+  color: #3a87f7;
+}
+.input-enumdicname {
+  color: #394753;
+  margin-left: 5px;
+  font-size: 16px;
+}
+.input-enumdicname-absolute {
+  position: absolute;
+  top: -8px;
+  right: -23px;
+  color: #394753;
+  margin-left: 5px;
+  font-size: 16px;
+}
+.dialogInput {
+  background: #15202B;
+  border: 1px solid #2B3F52;
+  border-radius: 3px;
+  color: #E5E5E5;
+}
+.dialogInput .ant-input {
+  color: #E5E5E5;
+  background: transparent;
+}
+.dialogInput .ant-input-suffix {
+  color: #E5E5E5;
+}
+.dialogInput .ant-input-suffix .ant-input-password-icon {
+  color: #E5E5E5;
+}
+.dialogInput:hover,
+.dialogInput:focus {
+  border-color: #0C95FF;
+}
+.yellowInput .ant-input,
+.yellowInput .ant-input-number-input {
+  color: #FC9618;
+  font-size: 16px;
+  text-align: center;
+}
+.suffixGrey .ant-input-suffix {
+  color: #88a0ae;
+}
+.formFieldSet {
+  border: 1px solid #162534;
+  padding: 0 20px 20px;
+}
+.formFieldSet legend {
+  color: #ffffff;
+}
+.formFieldSet + .formFieldSet {
+  margin-top: 35px;
+}
+.ant-form legend {
+  width: auto;
+  margin-left: 20px;
+  font-size: 16px;
+  color: #ffffff;
+  border-bottom: 0;
+  padding: 0 10px;
+}
+.paddingDialog .formFieldSet legend,
+.fieldsetDialog .formFieldSet legend {
+  width: auto;
+  margin-left: 20px;
+  font-size: 16px;
+  color: #ffffff;
+  border-bottom: 0;
+  padding: 0 10px;
+}
+.paddingDialog .ant-modal-content .ant-modal-body {
+  padding: 24px;
+}
+.upload {
+  display: inline-flex;
+}
+.upload .ant-btn.uploadBtn {
+  width: 60px;
+  height: 30px;
+  background: #3a87f7;
+  border: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 14px;
+  color: #ffffff;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.upload .ant-btn.uploadBtn:hover {
+  background: rgba(58, 135, 247, 0.8);
+  color: rgba(255, 255, 255, 0.8);
+}
+.upload .ant-upload-list-item-info .anticon-loading,
+.upload .ant-upload-list-item-info .anticon-paper-clip {
+  color: #ffffff;
+}
+.upload .ant-upload-list-item-info .ant-upload-list-item-name {
+  color: #ffffff;
+}
+.upload .ant-upload-list-item-info .ant-upload-list-item-card-actions .anticon {
+  color: #ffffff;
+}
+.upload .ant-upload-list-item-info:hover {
+  background: transparent;
+}
+.upload .ant-upload-list-item-info:hover .anticon-loading,
+.upload .ant-upload-list-item-info:hover .anticon-paper-clip {
+  color: #3a87f7;
+}
+.upload .ant-upload-list-item-info:hover .ant-upload-list-item-name {
+  color: #3a87f7;
+}
+.upload .ant-upload-list-item-info:hover .ant-upload-list-item-card-actions .anticon {
+  color: #3a87f7;
+}
+.upload .look {
+  color: #3a87f7;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.ml8 {
+  margin-left: 8px;
+}
+.ml10 {
+  margin-left: 10px;
+}
+.ml35 {
+  margin-left: 35px;
+}
+.ml9 {
+  margin-left: 9px;
+}
+.ml5 {
+  margin-left: 5px;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.mt25 {
+  margin-top: 25px;
+}
+.mt30 {
+  margin-top: 30px;
+}
+.mb40 {
+  margin-bottom: 40px !important;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.red {
+  color: #ff4d4f;
+}
+.grey {
+  color: #88a0ae;
+}
+.grey1 {
+  color: #7a8a94;
+}
+.white {
+  color: #ffffff;
+}
+.blue {
+  color: #3a87f7;
+}
+.green {
+  color: #1FF195;
+}
+.yellow {
+  color: #FF9600;
+}
+.orange {
+  color: #F52929;
+}
+.selectBtn.ant-btn {
+  margin-left: 10px;
+  width: 80px;
+  height: 30px;
+  line-height: 31px;
+  text-align: center;
+  background: linear-gradient(0deg, #455773 0%, #405066 98%);
+  border: 0;
+  color: #ffffff;
+  font-size: 14px;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.selectBtn.ant-btn:hover,
+.selectBtn.ant-btn:focus {
+  background: linear-gradient(0deg, rgba(69, 87, 115, 0.8) 0%, rgba(64, 80, 102, 0.8) 98%);
+  color: rgba(255, 255, 255, 0.8);
+  border: 0;
+}
+.btnPrimary.ant-btn,
+.operBtn.ant-btn {
+  margin-left: 10px;
+  width: auto;
+  min-width: 80px;
+  height: 30px;
+  line-height: 31px;
+  text-align: center;
+  background: linear-gradient(0deg, #26487C 0%, #29538C 99%);
+  border: 0;
+  color: #ffffff;
+  font-size: 14px;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.btnPrimary.ant-btn:hover,
+.operBtn.ant-btn:hover,
+.btnPrimary.ant-btn:focus,
+.operBtn.ant-btn:focus {
+  background: linear-gradient(0deg, rgba(38, 72, 124, 0.8) 0%, rgba(41, 83, 140, 0.8) 99%);
+  color: rgba(255, 255, 255, 0.8);
+  border: 0;
+}
+.operBtn.ant-btn {
+  margin-top: 9px;
+  margin-bottom: 6px;
+}
+.ant-table-expanded-row .btn-list {
+  padding-right: 10px;
+  text-align: right;
+}
+.ant-table-expanded-row .btnPrimary.ant-btn {
+  width: 80px;
+  height: 26px;
+  line-height: 27px;
+  border: 0;
+  background: linear-gradient(0deg, #3270d2, #3a87f7);
+  box-shadow: -1px 0px 0px 0px #121618;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.ant-table-expanded-row .btnPrimary.ant-btn:hover,
+.ant-table-expanded-row .btnPrimary.ant-btn:focus {
+  background: linear-gradient(0deg, rgba(50, 112, 210, 0.8) 0%, rgba(58, 135, 247, 0.8) 99%);
+  color: rgba(255, 255, 255, 0.8);
+  border: 0;
+}
+.ant-table-expanded-row .ant-btn + .ant-btn {
+  margin-left: 10px;
+}
+.btnDanger.ant-btn {
+  margin-left: 10px;
+  width: 80px;
+  height: 26px;
+  line-height: 27px;
+  text-align: center;
+  border: 0;
+  color: #ffffff;
+  font-size: 14px;
+  background: linear-gradient(0deg, #FF5C6F 0%, #FB7F75 99%);
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.btnDanger.ant-btn:hover,
+.btnDanger.ant-btn:focus {
+  background: linear-gradient(0deg, rgba(255, 92, 111, 0.8) 0%, rgba(251, 127, 117, 0.8) 99%);
+  color: rgba(255, 255, 255, 0.8);
+  border: 0;
+}
+.btnDeafault.ant-btn {
+  margin-left: 10px;
+  width: 80px;
+  height: 26px;
+  line-height: 27px;
+  text-align: center;
+  border: 0;
+  color: #ffffff;
+  font-size: 14px;
+  background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.btnDeafault.ant-btn:hover,
+.btnDeafault.ant-btn:focus {
+  background: linear-gradient(0deg, rgba(52, 61, 70, 0.8) 0%, rgba(56, 68, 79, 0.8) 99%);
+  color: rgba(255, 255, 255, 0.8);
+  border: 0;
+}
+.to {
+  font-size: 14px;
+  color: #88a0ae;
+  margin-left: -8px;
+  margin-right: 2px;
+}
+.filterTable {
+  display: inline-flex;
+  width: calc(100% - 3px);
+  padding-left: 3px;
+}
+.ant-row.dialogRowTitle {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  border: 1px solid #1B2A38;
+}
+.ant-row.dialogRowTitle .ant-col {
+  border-top: 1px solid #1B2A38;
+  border-right: 1px solid #1B2A38;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  height: 34px;
+  line-height: 34px;
+  font-size: 16px;
+  color: #88a0ae;
+}
+.ant-row.dialogRowTitle .ant-col .red {
+  color: #FF2B2B;
+}
+.ant-row.dialogRowTitle .ant-col:nth-child(1),
+.ant-row.dialogRowTitle .ant-col:nth-child(2),
+.ant-row.dialogRowTitle .ant-col:nth-child(3),
+.ant-row.dialogRowTitle .ant-col:nth-child(4) {
+  border-top: 0;
+  text-align: center;
+}
+.ant-row.dialogRowTitle .ant-col:last-child {
+  border-right: 1px solid #1B2A38;
+}
+.ant-row.dialogRowTitle .bt1 {
+  border-top: 1px solid #1B2A38 !important;
+}
+.commonPicker.ant-calendar-picker .ant-input {
+  background: #15202B;
+  border-color: #2B3F52;
+  padding: 4px 8px;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.commonPicker.ant-calendar-picker .ant-input .ant-calendar-range-picker-input {
+  color: #ffffff;
+  font-size: 14px;
+}
+.commonPicker.ant-calendar-picker .ant-input .ant-calendar-range-picker-input::placeholder {
+  color: #394753;
+}
+.commonPicker.ant-calendar-picker .ant-input .ant-calendar-picker-clear {
+  background: #ffffff;
+}
+.commonPicker.ant-calendar-picker .ant-input .ant-calendar-range-picker-separator {
+  font-size: 14px;
+  color: #88a0ae;
+}
+.commonDatePicker.ant-calendar-picker .ant-input {
+  background: #252D34;
+  padding: 0 8px;
+  height: 30px;
+  line-height: 30px;
+  border: 0;
+  color: #E5E5E5;
+}
+.commonDatePicker.ant-calendar-picker .ant-calendar-picker-icon {
+  color: #7a8a94;
+}
+.commonDatePicker.ant-calendar-picker .ant-calendar-picker-clear {
+  background: transparent;
+  color: #7a8a94;
+}
+.commonDatePicker.ant-calendar-picker .ant-calendar-picker-clear svg {
+  fill: #7a8a94;
+}
+.ant-popover .ant-popover-content {
+  border: 1px solid #424E59;
+  /*圆角兼容性*/
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.ant-popover .ant-popover-content .ant-popover-arrow {
+  border-top-color: #424E59;
+  border-left-color: #424E59;
+}
+.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
+  border-image-width: 0;
+  background: #424E59;
+  color: #ffffff;
+  padding: 5px 15px;
+}
+.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content:hover {
+  color: #3a87f7;
+}
+.ant-calendar-picker-container .ant-calendar-range,
+.ant-calendar-picker-container .ant-calendar {
+  background: #424E59;
+  border-color: #424E59;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-input-wrap,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-input-wrap {
+  border-bottom-color: #48545F;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-input-wrap .ant-calendar-input,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-input-wrap .ant-calendar-input {
+  background: transparent;
+  border: 1px solid #7a8a94;
+  color: #ffffff;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-input-wrap .ant-calendar-input::placeholder,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-input-wrap .ant-calendar-input::placeholder {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header {
+  border-color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn::before,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn::before,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn::before,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn::before,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn::after,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-year-btn::after,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn::after,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-prev-month-btn::after {
+  border-color: #88a0ae;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-month-select,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-month-select,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-year-select,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-header .ant-calendar-year-select {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body {
+  border-top-color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-column-header-inner,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-column-header-inner {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-cell .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-cell .ant-calendar-date {
+  background: transparent;
+  color: #ffffff;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-cell:hover .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-cell:hover .ant-calendar-date {
+  color: #3a87f7;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-last-day-of-month .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-last-day-of-month .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-next-month-btn-day .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-next-month-btn-day .ant-calendar-date {
+  color: #E5E5E5;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-disabled-cell .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-disabled-cell .ant-calendar-date {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-selected-day .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-selected-day .ant-calendar-date {
+  color: #3a87f7;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-active-week .ant-calendar-cell .ant-calendar-date,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-body .ant-calendar-active-week .ant-calendar-cell .ant-calendar-date {
+  background: transparent;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-range-middle,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-panel .ant-calendar-date-panel .ant-calendar-range-middle {
+  color: #E5E5E5;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-footer,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-footer {
+  border-top-color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-footer .ant-calendar-time-picker-btn,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-footer .ant-calendar-time-picker-btn {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-footer .ant-calendar-ok-btn,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-footer .ant-calendar-ok-btn {
+  background-color: #3a87f7;
+  border-color: #3a87f7;
+  color: #ffffff;
+}
+.ant-calendar-picker-container .ant-calendar-range .ant-calendar-footer .ant-calendar-ok-btn:hover,
+.ant-calendar-picker-container .ant-calendar .ant-calendar-footer .ant-calendar-ok-btn:hover {
+  background-color: rgba(58, 135, 247, 0.8);
+  border-color: rgba(58, 135, 247, 0.8);
+  color: rgba(255, 255, 255, 0.8);
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-year-btn,
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-month-btn {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-year-btn::before,
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-month-btn::before,
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-year-btn::after,
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-prev-month-btn::after {
+  border-color: #88a0ae;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-header .ant-calendar-month-panel-year-select {
+  color: #7a8a94;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-month-panel-body .ant-calendar-month-panel-table .ant-calendar-month-panel-tbody .ant-calendar-month-panel-cell .ant-calendar-month-panel-month {
+  color: #E5E5E5;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-calendar-content .ant-calendar-month-header-wrap .ant-calendar-month-panel-body .ant-calendar-month-panel-table .ant-calendar-month-panel-tbody .ant-calendar-month-panel-cell .ant-calendar-month-panel-month:hover {
+  background: transparent;
+  color: #3a87f7;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-panel {
+  background: #424E59;
+  border-color: #424E59;
+}
+.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-panel .ant-calendar-month-panel-header {
+  border-color: #7a8a94;
+}
+.ant-calendar-range .ant-calendar-in-range-cell::before {
+  background: rgba(66, 78, 89, 0.8);
+}
+.has-error .ant-input:not(.has-error .ant-input-disabled),
+-has-error .ant-input:not(.has-error .ant-input-disabled),
+.has-error .ant-input:not(-has-error .ant-input-disabled),
+-has-error .ant-input:not(-has-error .ant-input-disabled) {
+  background: #15202B;
+}
+.ant-modal-confirm-confirm {
+  top: 50%;
+  padding-bottom: 0;
+  width: 300px !important;
+  height: 200px;
+  margin-top: -100px;
+}
+.ant-modal-confirm-confirm .ant-modal-content {
+  background: #0E1A25;
+  height: 100%;
+  /*圆角兼容性*/
+  -moz-border-radius: 10px 10px 10px 10px;
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border-radius: 10px 10px 10px 10px;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-close .ant-modal-close-x {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-close .ant-modal-close-x .ant-modal-close-icon {
+  color: #1271BA;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body {
+  padding: 20px;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-body .ant-modal-confirm-title {
+  color: #3a87f7;
+  text-align: center;
+  font-size: 20px;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-body .ant-modal-confirm-content {
+  color: #ffffff;
+  font-size: 16px;
+  margin-top: 25px;
+  text-align: center;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns {
+  float: none;
+  text-align: center;
+  margin-top: 20px;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn {
+  width: 120px;
+  height: 30px;
+  line-height: 28px;
+  border-radius: 3px;
+  background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
+  font-size: 16px;
+  color: #ffffff;
+  margin-right: 20px;
+  border: 0;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn:hover {
+  background: linear-gradient(0deg, rgba(52, 61, 70, 0.8) 0%, rgba(56, 68, 79, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary {
+  width: 120px;
+  height: 30px;
+  line-height: 28px;
+  border: 0;
+  background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
+  border-radius: 3px;
+  font-size: 16px;
+  color: #ffffff;
+  margin-right: 0;
+  margin-left: 0;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary:hover {
+  background: linear-gradient(0deg, rgba(50, 112, 210, 0.8) 0%, rgba(58, 135, 247, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.tltLeft {
+  font-size: 16px;
+  text-align: left;
+}
+.tltLeft .icon {
+  font-size: 20px;
+  fill: #3a87f7;
+  margin-right: 10px;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless {
+  margin-top: 10px;
+  background-color: transparent;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item {
+  border-bottom: 0;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header {
+  color: #556772;
+  font-size: 14px;
+  border-bottom: 1px solid #1D2327;
+  padding: 10px 8px 10px 44px;
+  height: 43px;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
+  fill: #556772;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  left: 0;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
+  padding: 0 0 0 30px;
+  background-color: transparent;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .ant-row.contRow {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  color: #E5E5E5;
+  margin-bottom: 10px;
+  background: #0f161c;
+  border: 1px solid #172B56;
+  border-radius: 3px;
+  padding-left: 14px;
+  padding-right: 12px;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .ant-row.contRow .ant-col:last-child {
+  text-align: right;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .ant-row.contRow .ant-col:first-child {
+  text-align: left;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .contRow:first-child {
+  margin-top: 9px;
+}
+.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .contRow:last-child {
+  margin-bottom: 20px;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless {
+  margin-top: 10px;
+  background: #0f161c;
+  border: 1px solid #172B56;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item {
+  border-bottom: 0;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header {
+  color: #556772;
+  font-size: 14px;
+  border-bottom: 0;
+  padding: 0;
+  line-height: 43px;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
+  fill: #556772;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  left: 0;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow {
+  width: 100%;
+  line-height: 40px;
+  font-size: 16px;
+  color: #E5E5E5;
+  margin-bottom: 10px;
+  border: 0 !important;
+  padding-left: 14px;
+  padding-right: 12px;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:last-child {
+  text-align: right;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:first-child {
+  text-align: left;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:first-child {
+  margin-top: 0 !important;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:last-child {
+  margin-bottom: 0 !important;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
+  padding: 0 0 0 30px;
+  background-color: transparent;
+}
+.ant-collapse.busyCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list {
+  width: calc(100% - 10px);
+  justify-content: flex-end;
+  padding-right: 10px;
+  padding-bottom: 10px;
+}
+.ant-row.headRow .ant-col:first-child {
+  text-align: left;
+}
+.ant-row.headRow .ant-col:nth-child(3) {
+  text-align: right;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless {
+  background: transparent;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item {
+  margin-top: 10px;
+  background: #0f161c;
+  border: 1px solid #172B56;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header {
+  color: #556772;
+  font-size: 14px;
+  border-bottom: 0;
+  padding: 0;
+  line-height: 43px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
+  fill: #556772;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  left: 0;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow {
+  width: 100%;
+  line-height: 40px;
+  font-size: 16px;
+  color: #E5E5E5;
+  margin-bottom: 10px;
+  border: 0 !important;
+  padding-left: 14px;
+  padding-right: 12px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:last-child {
+  text-align: right;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-row.contRow .ant-col:first-child {
+  text-align: left;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:first-child {
+  margin-top: 0 !important;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .contRow:last-child {
+  margin-bottom: 0 !important;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box {
+  padding: 0 0 0 30px;
+  background-color: transparent;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list {
+  width: calc(100% - 10px);
+  justify-content: flex-end;
+  padding-right: 10px;
+  padding-bottom: 10px;
+}
+.ant-collapse.futureCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .btn-list .operBtn.ant-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 26px;
+  line-height: 26px;
+}
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill,
+.dialogInput:-webkit-autofill {
+  box-shadow: inset 0 0 0 1000px #15202B;
+  -webkit-text-fill-color: #E5E5E5;
+}
+input:-internal-autofill-selected {
+  background-color: #15202B !important;
+}
+.login input:-webkit-autofill {
+  box-shadow: inset 0 0 0 1000px #ffffff;
+}
+.ant-checkbox-group.commonCheckboxGroup {
+  width: 100%;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
+  color: #ffffff;
+  font-size: 14px;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox {
+  margin-right: 2px;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
+  background: #15202B;
+  border: 1px solid #2B3F52;
+  border-radius: 3px;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+  border-color: #3a87f7;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-checked::after {
+  border-color: #3a87f7;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper span + span {
+  margin-right: 15px;
+  color: #ffffff;
+  font-size: 14px;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled {
+  outline-color: #2B3F52;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-input {
+  color: #ffffff;
+  font-size: 14px;
+}
+.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-inner {
+  border-color: #2B3F52 !important;
+}
+.commonRadioGroup .ant-radio-wrapper {
+  color: #ffffff;
+  font-size: 14px;
+}
+.commonRadioGroup .ant-radio-wrapper .ant-radio .ant-radio-inner {
+  border-color: #3a87f7;
+  background: #15202B;
+}
+.commonRadioGroup .ant-radio-wrapper .ant-radio .ant-radio-inner::after {
+  left: 4px;
+  top: 4px;
+  width: 6px;
+  height: 6px;
+  background: #3a87f7;
+  border-radius: 50%;
+}
+.commonRadioGroup .ant-radio-wrapper-disabled .ant-radio-disabled .ant-radio-inner {
+  border-color: #3a87f7 !important;
+  background: #15202B;
+}
+.commonRadioGroup .ant-radio-wrapper-disabled .ant-radio-disabled .ant-radio-inner::after {
+  left: 4px;
+  top: 4px;
+  width: 6px;
+  height: 6px;
+  background: #3a87f7;
+  border-radius: 50%;
+}
+.commonRadioGroup .ant-radio-wrapper-disabled span + span {
+  color: #ffffff;
+  font-size: 14px;
+}
+.tc {
+  text-align: center;
+}
+.checkboxGroupItem .ant-col.ant-form-item-control-wrapper {
+  max-width: calc(100% - 130px);
+}
+.ant-spin-container::after,
+.ant-drawer-content {
+  background-color: transparent;
+}
+.ant-layout-sider-has-trigger {
+  padding-bottom: 40px;
+}
+.tableContextCenter .dialogTable .ant-table-thead tr th {
+  text-align: center;
+}
+.tableContextCenter .dialogTable .ant-table-tbody tr td {
+  text-align: center;
+}
+.filter-check > span:nth-of-type(2) {
+  color: #88a0ae;
+  height: 30px;
+  line-height: 30px;
+}
+.topTableHeight {
+  height: calc(100% - 28px);
+}
+.topTableHeight40 {
+  height: calc(100% - 40px);
+}
+.hiddenBottomLayout .layout-top .middleLayout .m-layout-left .ant-layout-sider-children ul.ant-menu.ant-menu-inline.left-menu {
+  height: calc(100vh - 126px);
+}
+.buy-sell-market {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  background-color: #181e22;
+}
+.buy-sell-market .buy-sell-market-title {
+  width: 100%;
+  height: 60px;
+  background: #181e22;
+  display: inline-flex;
+  font-size: 14px;
+  position: relative;
+  line-height: 60px;
+  border-bottom: 1PX solid #3a87f7;
+}
+.buy-sell-market .buy-sell-market-title div {
+  align-self: center;
+  align-items: center;
+}
+.buy-sell-market .buy-sell-market-title .backIcon {
+  width: 52px;
+  line-height: 60px;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn {
+  min-width: 90px;
+  height: 40px;
+  display: inline-flex;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn .name {
+  background: #1556B5;
+  text-align: center;
+  flex: 1;
+  padding: 0 16px;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 0 0 3px;
+  -webkit-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+  color: #ffffff;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn .arrowRightIcon,
+.buy-sell-market .buy-sell-market-title .titleBtn .arrowLeftIcon {
+  width: 12px;
+  height: 40px;
+  background-image: url(../images/titleArrow.png);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn .arrowLeftIcon {
+  background-position: -12px 0;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn2 .name {
+  /*圆角兼容性*/
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn3 {
+  position: relative;
+  margin-right: 20px;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn3 .name {
+  /*圆角兼容性*/
+  -moz-border-radius: 0 5px 5px 0;
+  -webkit-border-radius: 0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
+}
+.buy-sell-market .buy-sell-market-title .titleBtn3 .anticon {
+  font-size: 16px;
+  color: #7a8a94;
+  position: absolute;
+  top: auto;
+  right: 16px;
+  bottom: 0;
+  left: auto;
+  line-height: 36px;
+  z-index: 2;
+}
+.buy-sell-market .buy-sell-market-title .numBlock {
+  display: inline-flex;
+  white-space: nowrap;
+}
+.buy-sell-market .buy-sell-market-title .numBlock .first {
+  font-size: 14px;
+}
+.buy-sell-market .buy-sell-market-title .numBlock .last {
+  font-size: 18px;
+  margin-left: 10px;
+}
+.buy-sell-market .buy-sell-market-title .numBlock + .numBlock {
+  margin-left: 25px;
+}
+.buy-sell-market .buy-sell-market-title .market {
+  margin-left: 28px;
+  min-width: 160px;
+  height: 40px;
+  display: inline-flex;
+  background: #172B56;
+  border: 1px solid #193778;
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  color: #88a0ae;
+  padding: 0 14px;
+}
+.buy-sell-market .buy-sell-market-title .market > div {
+  align-self: center;
+  align-items: center;
+}
+.buy-sell-market .buy-sell-market-title .market .first {
+  font-size: 14px;
+}
+.buy-sell-market .buy-sell-market-title .market .last {
+  font-size: 18px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.buy-sell-market .buy-sell-market-title .market .red {
+  color: #FF2B2B;
+}
+.buy-sell-market .buy-sell-market-title .ant-btn {
+  align-items: center;
+  align-self: center;
+}
+.buy-sell-market .buy-sell-market-title .publishBuy.ant-btn {
+  min-width: 80px;
+  height: 30px;
+  line-height: 30px;
+  background: linear-gradient(0deg, #3270d2, #3a87f7);
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  font-size: 14px;
+  color: #ffffff;
+  text-align: center;
+  border: none;
+  margin-left: 10px;
+}
+.buy-sell-market .buy-sell-market-title .publishBuy.ant-btn:hover {
+  background: linear-gradient(0deg, rgba(50, 112, 210, 0.8), rgba(58, 135, 247, 0.8));
+  color: rgba(255, 255, 255, 0.8);
+}
+.buy-sell-market .buy-sell-market-title .detailBtn.ant-btn {
+  min-width: 80px;
+  height: 30px;
+  line-height: 30px;
+  background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
+  /*圆角兼容性*/
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  font-size: 14px;
+  color: #ffffff;
+  text-align: center;
+  border: none;
+}
+.buy-sell-market .buy-sell-market-title .detailBtn.ant-btn:hover {
+  background: linear-gradient(0deg, rgba(52, 61, 70, 0.8) 0%, rgba(56, 68, 79, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.buy-sell-market .buy-sell-market-title .ant-btn + .ant-btn {
+  margin-left: 10px;
+}
+.buy-sell-market .buy-sell-market-title .btn-list {
+  position: absolute;
+  right: 10px;
+}
+.buyHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.sellHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  background: transparent;
+}
+.buyHallTable .ant-table,
+.sellHallTable .ant-table {
+  width: 100%;
+}
+.buyHallTable .ant-table table,
+.sellHallTable .ant-table table {
+  border: 0;
+}
+.buyHallTable .ant-table .ant-table-content,
+.sellHallTable .ant-table .ant-table-content {
+  background: #271112;
+}
+.buyHallTable .ant-table .ant-table-thead tr,
+.sellHallTable .ant-table .ant-table-thead tr {
+  box-shadow: 0px 1px 0px 0px #2E3539;
+}
+.buyHallTable .ant-table .ant-table-thead tr th,
+.sellHallTable .ant-table .ant-table-thead tr th {
+  line-height: 34px;
+  background: #212629;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #556772;
+  font-size: 14px;
+  border-right: 1px solid #121618;
+  border-bottom: 1px solid #121618;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.buyHallTable .ant-table .ant-table-tbody,
+.sellHallTable .ant-table .ant-table-tbody {
+  background: #271112;
+}
+.buyHallTable .ant-table .ant-table-tbody tr td,
+.sellHallTable .ant-table .ant-table-tbody tr td {
+  height: 43px;
+  line-height: 43px;
+  padding: 0 8px;
+  border-right: 1px solid #121618;
+  border-bottom: 1px solid #121618;
+  font-size: 16px;
+  color: #556772;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.buyHallTable .ant-table .ant-table-tbody tr td:first-child,
+.sellHallTable .ant-table .ant-table-tbody tr td:first-child {
+  background: #212629;
+  color: #556772;
+}
+.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child :nth-child(1)),
+.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child :nth-child(1)) {
+  background: #271112;
+  color: #E5E5E5;
+}
+.buyHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td,
+.sellHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td,
+.buyHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td,
+.sellHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
+  background-color: #0E0E0F;
+}
+.buyHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td,
+.sellHallTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
+  text-align: right;
+}
+.buyHallTable .ant-table .ant-table-tbody tr:hover td,
+.sellHallTable .ant-table .ant-table-tbody tr:hover td {
+  background-color: #172B56 !important;
+}
+.buyHallTable .ant-table .ant-table-placeholder,
+.sellHallTable .ant-table .ant-table-placeholder {
+  border: 0;
+  background: #0E0E0F;
+}
+.buyHallTable .ant-table-row-expand-icon,
+.sellHallTable .ant-table-row-expand-icon {
+  border-color: #556772;
+  background-color: transparent;
+  color: #556772;
+}
+.sellHallTable .ant-table .ant-table-content {
+  background: #10251d;
+}
+.sellHallTable .ant-table .ant-table-tbody {
+  background: #10251d;
+}
+.sellHallTable .ant-table .ant-table-tbody tr td:first-child {
+  background: #212629;
+  color: #556772;
+}
+.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child :nth-child(1)) {
+  background: #10251d;
+}
+.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child),
+.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) {
+  background-color: #0E0E0F;
+}
+.buyHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.sellHallTable .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  min-height: calc(100vh - 470px);
+}
+.buyHallTable .ant-table .ant-table-tbody,
+.sellHallTable .ant-table .ant-table-tbody {
+  min-height: calc(100vh - 470px);
+}
+.noDataTable .ant-table .ant-table-header {
+  height: 35px;
+  margin-bottom: 0 !important;
+  overflow: hidden !important;
+}
+.buyHallTableHigh .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.sellHallTableHigh .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  min-height: calc(100vh - 180px);
+}
+.buyHallTableHigh .ant-table .ant-table-tbody,
+.sellHallTableHigh .ant-table .ant-table-tbody {
+  min-height: calc(100vh - 180px);
+}
+.formBar ::v-deep.formProgress {
+  width: 140px;
+  margin-left: 70px;
+}
+.formBar ::v-deep.formProgress .ant-progress-outer {
+  margin-right: 0;
+  padding-right: 0;
+}
+.formBar ::v-deep.formProgress .ant-progress-outer .ant-progress-inner {
+  background: #2B3F52;
+  /*圆角兼容性*/
+  -moz-border-radius: 2px 2px 2px 2px;
+  -webkit-border-radius: 2px 2px 2px 2px;
+  border-radius: 2px 2px 2px 2px;
+}
+.formBar ::v-deep.formProgress .ant-progress-outer .ant-progress-inner .ant-progress-bg {
+  height: 3px !important;
+  border-radius: 2px !important;
+  background-color: #3a87f7;
+}
+.formBar ::v-deep.formProgress .ant-progress-text {
+  display: none;
+}
+.formBar .listedBtn {
+  width: 120px;
+  height: 30px;
+  line-height: 30px;
+  background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
+  border-radius: 3px;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  border: 0;
+}
+.formBar .listedBtn:hover {
+  background: linear-gradient(0deg, rgba(58, 135, 247, 0.8) 0%, rgba(50, 112, 210, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.formBar .cancelBtn {
+  background: linear-gradient(0deg, #343D46 0%, #38444F 100%);
+}
+.formBar .cancelBtn:hover {
+  background: linear-gradient(0deg, rgba(52, 61, 70, 0.8) 0%, rgba(56, 68, 79, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.8);
+}
+.ant-slider.formSlider {
+  width: 140px;
+  margin-left: 70px;
+}
+.ant-slider.formSlider .ant-slider-rail {
+  margin-right: 0;
+  padding-right: 0;
+  height: 3px !important;
+  border-radius: 2px !important;
+  background-color: #1D2F3F;
+}
+.ant-slider.formSlider .ant-slider-track {
+  height: 3px;
+  background-color: #3a87f7;
+}
+.ant-slider.formSlider .ant-slider-step {
+  height: 3px;
+}
+.ant-slider.formSlider .ant-progress-text {
+  display: none;
+}
+.noData {
+  width: 80px;
+  height: 80px;
+  background: url(../images/nodata.png) center center no-repeat;
+  background-size: cover;
+}
+.ant-empty.ant-empty-normal .ant-empty-image {
+  width: 80px;
+  height: 80px;
+  background: url(../images/nodata.png) center center no-repeat;
+  background-size: cover;
+}
+.ant-empty.ant-empty-normal .ant-empty-image .ant-empty-img-simple {
+  display: none;
+}
+.ant-empty.ant-empty-normal .ant-empty-description {
+  display: none;
+}
+.layout-bottom .srcollYTable .ant-table .ant-table-tbody tr td {
+  background: #1F262B;
+}
+.layout-bottom .srcollYTable .ant-table .ant-table-placeholder {
+  border-top: 1PX solid #161A1C;
+  background: #1F262B;
+}
+.conditionPicker.ant-calendar-picker .ant-input {
+  width: 90px;
+  background: transparent;
+  font-size: 16px;
+  color: #ffffff;
+}
+.conditionPicker.ant-calendar-picker .ant-calendar-picker-icon {
+  display: none;
+}
+.btn-list-sticky {
+  position: sticky;
+  position: -webkit-sticky;
+  right: 2px;
+}
 /*滚动条样式*/
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
+  background-color: #272E32;
 }
 ::-webkit-scrollbar-button {
-  background-color: transparent;
+  background-color: #171A1B;
 }
 ::-webkit-scrollbar-track-piece {
-  background-color: transparent;
+  background-color: #171A1B;
 }
 ::-webkit-scrollbar-corner,
 .el-input::-webkit-scrollbar-corner {
-  background-color: transparent;
+  background-color: #171A1B;
 }

src/assets/styles/variables.less

@@ -2,7 +2,7 @@
 @import 'mixin';
 @import 'theme.less';
 
-@m-grey0: #364048;
+@m-grey0: var(--m-grey0);
 @m-grey1: #7a8a94;
 @m-grey2: #88a0ae;
 @m-grey3: #ccc;

src/common/config/projectName.ts

@@ -0,0 +1,17 @@
+import { serviceURL } from "@/services/request"
+
+// 获取当前所运行的是哪个项目
+export enum OemType {
+    manager = 'qyfg', // 千海金
+    wrspot = 'yrdz' // 仓单贸易
+}
+
+// 获取当前项目
+export function getOem(): OemType {
+    return serviceURL.oem as OemType
+}
+
+// 根据枚举判断是否为某个项目
+export function isOemByEnum(type: OemType): boolean {
+    return getOem() === type
+}

src/common/config/theme.ts

@@ -0,0 +1,55 @@
+import { localStorageUtil } from '@/utils/storage';
+import { ref } from "vue";
+import { initData } from "../methods";
+
+// 主题色枚举
+export enum ThemeEnum {
+    default = 'default',
+    dark = 'dark',
+    light = 'light'
+}
+
+const themeName = ref<ThemeEnum>(ThemeEnum.default)
+
+/**
+ * 获取当前主题色
+ * @returns
+ */
+export function getTheme() {
+    return themeName
+}
+/**
+ * 更改主题色
+ * @param value
+ */
+export function setTheme(value: ThemeEnum) {
+    localStorageUtil.setItem('theme', value)
+    themeName.value = value
+}
+
+/**
+ * 初始化主题（默认主题）
+ */
+export function initTheme() {
+    initData(() => {
+        const theme = localStorageUtil.getItem('theme')
+        if (theme) {
+            changeTheme(theme)
+        } else {
+            // if (isOemByEnum(OemType.wrspot)) {
+            //     changeTheme(ThemeEnum.light)
+            // } else {
+            //     changeTheme(ThemeEnum.dark)
+            // }
+            changeTheme(ThemeEnum.dark)
+        }
+    })
+}
+
+// 切换主题
+export function changeTheme(value: ThemeEnum) {
+    document.documentElement.removeAttribute('theme');
+    document.documentElement.setAttribute('theme', value);
+    setTheme(value)
+}
+export { };

src/layout/components/header.vue

@@ -1,13 +1,13 @@
 <template>
   <!-- 风险管理 -->
 
-  <div v-if="getOem(OemType.manager)">
+  <div v-if="isOemByEnum(OemType.manager)">
     <img src="../../assets/images/logoHeader.png" />
     <span>深圳市多元世纪信息技术股份有限公司</span>
   </div>
   <!-- 云融 -->
 
-  <div v-else-if="getOem(OemType.wrspot)">
+  <div v-else-if="isOemByEnum(OemType.wrspot)">
     <img src="../../assets/images/headLogo.jpg" />
     <span>云融</span>
   </div>
@@ -71,7 +71,8 @@ import { logout } from '@/services/bus/login';
 import APP from '@/services';
 import Router from '@/router';
 import { handleNotice } from '@/views/setting/notice/setup';
-import { handleOem } from '@/services/request/serviceURL';
+import { isOemByEnum, OemType } from '@/common/config/projectName';
+import { changeTheme, ThemeEnum } from '@/common/config/theme';
 
 // 设置
 const setFn = () => {
@@ -85,6 +86,8 @@ const setFn = () => {
         // { name: '手机号码绑定/解绑', path: 'phone' },
         // { name: '关于我们', path: 'aboutUs' },
         { name: '退出', path: 'logout' },
+        { name: '白主题', path: ThemeEnum.light },
+        { name: '黑主题', path: ThemeEnum.dark },
     ];
     const { openAction } = openModal('logout');
     function chooseSetMenu(path: string) {
@@ -93,7 +96,8 @@ const setFn = () => {
             APP.closeServer();
             Router.replace('/login');
         } else {
-            openAction();
+            changeTheme(path as ThemeEnum);
+            // openAction();
         }
         visible.value = false;
     }
@@ -126,7 +130,8 @@ export default defineComponent({
             getUnReadNoticeLength,
             ...setFn(),
             ...onSearch(),
-            ...handleOem(),
+            isOemByEnum,
+            OemType,
         };
     },
 });

src/main.ts

@@ -1,5 +1,5 @@
-import '@/assets/styles/index.less';
 // 配置阿里 图标
+import '@/assets/styles/index.less';
 import '@/assets/styles/symbol_color/iconfont.css';
 import '@/assets/styles/symbol_color/iconfont.js';
 import '@/assets/styles/symbol_no_color/iconfont.css';
@@ -8,7 +8,6 @@ import Antd, { message } from 'ant-design-vue';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-
 const app = createApp(App);
 app.use(router);
 app.use(Antd).mount('#app');

src/services/bus/index.ts

@@ -1,3 +1,4 @@
+import { isOemByEnum, OemType } from '@/common/config/projectName';
 import APP from '@/services';
 import { isAllEnum } from '@/services/bus/allEnum';
 import { isLogin } from '@/services/bus/login';
@@ -5,7 +6,7 @@ import { checkTokenLoop, handleTokenCheck } from '@/services/bus/token';
 import { getAllEnums, GetPCMenus, getServerTime, queryErrorInfos, QueryTableDefine } from '@/services/go/commonService/index';
 import { getAppConfig, getCommonApiUrl } from '@/services/go/config';
 import { LoginQuery } from '@/services/go/useInfo/index';
-import { handleOem, serviceURL, setServiceURL } from '@/services/request/serviceURL';
+import { serviceURL, setServiceURL } from '@/services/request/serviceURL';
 import ProtobufCtr from '@/services/socket/protobuf/index';
 import { localStorageUtil } from '@/utils/storage';
 import { message } from 'ant-design-vue';
@@ -59,11 +60,10 @@ export async function globalDataRefresh(): Promise<string> {
 }
 
 function getIco(): string {
-    const { OemType, getOem } = handleOem()
     let result = 'favicon'
-    if (getOem(OemType.manager)) {
+    if (isOemByEnum(OemType.manager)) {
         result = 'favicon'
-    } else if (getOem(OemType.wrspot)) {
+    } else if (isOemByEnum(OemType.wrspot)) {
         result = 'favicon1'
     }
 

src/services/request/serviceURL.ts

@@ -88,17 +88,4 @@ export const setServiceURL = (config: URL): void => {
     //     serviceURL.tradeUrl = 'ws://218.17.158.45:21005';
     // }
     console.log('api地址：', serviceURL);
-};
-
-// 获取 项目类型：例如 风险管理、千海金
-
-export function handleOem() {
-    enum OemType {
-        manager = 'qyfg', // 千海金
-        wrspot = 'yrdz' // 仓单贸易
-    }
-    function getOem(type: OemType) {
-        return serviceURL.oem === type
-    }
-    return { OemType, getOem }
-}
+};

src/utils/storage/localStorage.ts

@@ -8,6 +8,7 @@ interface StorageKeyName {
     ErrorInfos: string; // 数据库错误信息
     allEnums: string; // 所有枚举信息
     errorCodeInfos: ErrorCodeList[];
+    theme: string; // 主题色
 }
 
 /**

src/views/account/login.vue

@@ -1,42 +1,48 @@
 <template>
-    <div class="login">
-        <a-row type="flex" justify="center" align="middle">
-            <a-col>
-                <div class="login-background">
-                    <div id="img">
-                        <!-- <img src="./logo.png"
+  <div class="login">
+    <a-row type="flex"
+           justify="center"
+           align="middle">
+      <a-col>
+        <div class="login-background">
+          <div id="img">
+            <!-- <img src="./logo.png"
                         alt="" />-->
-                    </div>
-                </div>
-                <div class="login-content">
-                    <p>账号登录</p>
-                    <a-form ref="formDom" :model="form" :rules="rules">
-                        <a-form-item name="account">
-                            <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
-                                <template #prefix>
-                                    <img src="@/assets/images/user.png" alt />
-                                </template>
-                            </a-input>
-                        </a-form-item>
-                        <a-form-item name="password" class="mb20">
-                            <a-input
-                                @keyup.enter="loginAction"
-                                placeholder="请输入您的登录密码"
-                                type="password"
-                                v-model:value="form.password"
-                            >
-                                <template #prefix>
-                                    <img src="@/assets/images/password.png" alt />
-                                </template>
-                            </a-input>
-                        </a-form-item>
-                        <a-form-item>
-                            <div class="login-remember-password">
-                                <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
-                                <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
-                            </div>
-                        </a-form-item>
-                        <!-- <a-form-item>
+          </div>
+        </div>
+        <div class="login-content">
+          <p>账号登录</p>
+          <a-form ref="formDom"
+                  :model="form"
+                  :rules="rules">
+            <a-form-item name="account">
+              <a-input placeholder="用户名/账号/手机号"
+                       v-model:value="form.account">
+                <template #prefix>
+                  <img src="@/assets/images/user.png"
+                       alt />
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item name="password"
+                         class="mb20">
+              <a-input @keyup.enter="loginAction"
+                       placeholder="请输入您的登录密码"
+                       type="password"
+                       v-model:value="form.password">
+                <template #prefix>
+                  <img src="@/assets/images/password.png"
+                       alt />
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item>
+              <div class="login-remember-password">
+                <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
+                <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
+              </div>
+            </a-form-item>
+            <!-- <a-form-item>
               <div style="text-align:left">
                 <a-checkbox v-model:checked="form.isRead">
                   我已阅读并同意
@@ -44,18 +50,16 @@
                 <router-link to="/resetPassword">《用户协议》</router-link>
               </div>
                         </a-form-item>-->
-                        <a-form-item class="mt20">
-                            <a-button
-                                @click="loginAction"
-                                :loading="loading"
-                                :disabled="goHomeloading"
-                            >登录</a-button>
-                        </a-form-item>
-                    </a-form>
-                </div>
-            </a-col>
-        </a-row>
-    </div>
+            <a-form-item class="mt20">
+              <a-button @click="loginAction"
+                        :loading="loading"
+                        :disabled="goHomeloading">登录</a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
 </template>
 
 <script lang="ts">
@@ -69,7 +73,6 @@ import { initData, setLoadComplete } from '@/common/methods';
 import eventBus from '@/utils/eventBus/index';
 import { QWebChannel } from '@/utils/qt/qwebchannel.js';
 import { qtAction } from './qt';
-import { handleOem } from '@/services/request/serviceURL';
 import { serviceURL } from '@/services/request/serviceURL';
 
 interface Form {