update

src/assets/styles/index.css

@@ -1,3549 +0,0 @@
-@import 'theme.css';
-/* 定制宽高按钮 */
-@import '~ant-design-vue/dist/antd.css';
-
-.flex {
-    display: -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display: -moz-box;
-    /* Firefox 17- */
-    display: -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display: -moz-flex;
-    /* Firefox 18+ */
-    display: -ms-flexbox;
-    /* IE 10 */
-    display: flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-
-.inlineflex {
-    display: -webkit-inline-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display: -moz-inline-box;
-    /* Firefox 17- */
-    display: -webkit-inline-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display: -moz-inline-flex;
-    /* Firefox 18+ */
-    display: -ms-inline-flexbox;
-    /* IE 10 */
-    display: inline-flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-
-.ellipse {
-    white-space  : nowrap;
-    text-overflow: ellipsis;
-    overflow     : hidden;
-}
-
-.nowrap {
-    white-space: nowrap;
-}
-
-.ant-input::placeholder {
-    color: var(--m-grey10);
-}
-
-.commonInput {
-    background   : var(--m-grey21);
-    border       : 1px solid var(--m-grey14);
-    border-radius: 3px;
-    color        : var(--m-white1);
-}
-
-.commonInput .ant-input {
-    color     : var(--m-white1);
-    background: transparent;
-}
-
-.commonInput .ant-input-suffix {
-    color      : var(--m-grey41);
-    margin-left: 0;
-    position   : absolute;
-    right      : 5px;
-}
-
-.commonInput:hover,
-.commonInput:focus {
-    border-color: var(--m-blue10);
-}
-
-.dialogTableInput {
-    border    : 0;
-    margin-top: 5px;
-}
-
-.tableConditionInput {
-    width                : 140px;
-    height               : 30px;
-    line-height          : 30px;
-    background           : var(--m-grey9);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    border               : 0;
-    color                : var(--m-white1);
-    font-size            : 14px;
-}
-
-.tableConditionInput+.tableConditionInput {
-    margin-left: 10px;
-}
-
-.ant-select-dropdown {
-    background   : var(--m-grey22);
-    border       : 1PX solid var(--m-grey23);
-    box-shadow   : 0px 10px 10px 0px var(--m-black18);
-    border-radius: 5px;
-}
-
-.ant-select-dropdown .ant-select-item {
-    color: var(--m-grey1);
-}
-
-.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: var(--m-blue0);
-    color     : var(--m-white8);
-}
-
-.srcollYTable .ant-table {
-    width: 100%;
-}
-
-.srcollYTable .ant-table table {
-    border: 0;
-}
-
-.srcollYTable .ant-table .ant-table-thead tr {
-    box-shadow: 0px 1px 0px 0px var(--m-black17);
-}
-
-.srcollYTable .ant-table .ant-table-thead tr th {
-    line-height   : 26px;
-    background    : var(--m-black34);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey17);
-    font-size     : 14px;
-    border-right  : 1px solid var(--m-black9);
-    border-bottom : 1px solid var(--m-black9);
-}
-
-.srcollYTable .ant-table .ant-table-tbody tr td {
-    height       : 30px;
-    line-height  : 30px;
-    padding      : 0 8px;
-    border-right : 1px solid var(--m-black9);
-    border-bottom: 1px solid var(--m-black9);
-    font-size    : 14px;
-    color        : var(--m-white1);
-}
-
-.srcollYTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
-    background-color: var(--m-blue3);
-}
-
-.srcollYTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
-    text-align: right;
-}
-
-.srcollYTable .ant-table .ant-table-placeholder {
-    border    : 0;
-    background: var(--m-black2);
-    min-height: 190px;
-}
-
-.srcollYTable .ant-table-row-expand-icon {
-    border-color    : var(--m-grey17);
-    background-color: transparent;
-    color           : var(--m-grey17);
-}
-
-.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 - 160px);
-}
-
-.topTable .ant-table {
-    width: 100%;
-}
-
-.topTable .ant-table table {
-    border: 0;
-}
-
-.topTable .ant-table .ant-table-thead tr {
-    box-shadow: 0px 1px 0px 0px var(--m-black17);
-}
-
-.topTable .ant-table .ant-table-thead tr th {
-    line-height   : 34px;
-    background    : var(--m-black8);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey17);
-    font-size     : 14px;
-    border-right  : 1px solid var(--m-black9);
-    border-bottom : 1px solid var(--m-black9);
-}
-
-.topTable .ant-table .ant-table-tbody tr td {
-    height       : 34px;
-    line-height  : 34px;
-    padding      : 0 8px;
-    border-right : 1px solid var(--m-black9);
-    border-bottom: 1px solid var(--m-black9);
-    font-size    : 14px;
-    color        : var(--m-white1);
-}
-
-.topTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
-    background-color: var(--m-blue3);
-}
-
-.topTable .ant-table .ant-table-tbody tr.ant-table-expanded-row td {
-    text-align: right;
-}
-
-.topTable .ant-table .ant-table-placeholder {
-    border    : 0;
-    background: var(--m-black2);
-}
-
-.topTable .ant-table-row-expand-icon {
-    border-color    : var(--m-grey17);
-    background-color: transparent;
-    color           : var(--m-grey17);
-}
-
-.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 var(--m-black17);
-}
-
-.topOrderTable .ant-table .ant-table-thead tr th {
-    line-height   : 34px;
-    background    : var(--m-black8);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey17);
-    font-size     : 14px;
-    border-right  : 1px solid var(--m-black9);
-    border-bottom : 1px solid var(--m-black9);
-    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 var(--m-black9);
-    border-bottom: 1px solid var(--m-black9);
-    font-size    : 16px;
-    color        : var(--m-white1);
-    white-space  : nowrap;
-    text-overflow: ellipsis;
-    overflow     : hidden;
-}
-
-.topOrderTable .ant-table .ant-table-tbody tr.ant-table-expanded-row:hover td {
-    background-color: var(--m-blue3);
-}
-
-.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: var(--m-black2);
-}
-
-.topOrderTable .ant-table-row-expand-icon {
-    border-color    : var(--m-grey17);
-    background-color: transparent;
-    color           : var(--m-grey17);
-}
-
-.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 var(--m-grey20);
-    border-radius: 0;
-}
-
-.dialogTable .ant-table .ant-table-thead tr {
-    box-shadow: 0px 1px 0px 0px var(--m-black17);
-}
-
-.dialogTable .ant-table .ant-table-thead tr th {
-    line-height   : 36px;
-    background    : var(--m-grey11);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey2);
-    font-size     : 16px;
-    border-right  : 1px solid var(--m-grey20);
-    border-bottom : 1px solid var(--m-grey20);
-    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 var(--m-grey20);
-    border-bottom: 1px solid var(--m-grey20);
-    font-size    : 14px;
-    color        : var(--m-white1);
-    white-space  : nowrap;
-    text-overflow: ellipsis;
-    overflow     : hidden;
-    background   : var(--m-grey11);
-}
-
-.dialogTable .ant-table .ant-table-placeholder {
-    border    : 0;
-    background: var(--m-grey11);
-}
-
-.dialogTable2 .ant-table {
-    width     : 100%;
-    background: transparent;
-}
-
-.dialogTable2 .ant-table table {
-    border       : 1px solid var(--m-black44);
-    border-right : none;
-    border-bottom: none;
-    border-radius: 0;
-}
-
-.dialogTable2 .ant-table .ant-table-thead tr {
-    box-shadow: 0px 1px 0px 0px var(--m-black17);
-}
-
-.dialogTable2 .ant-table .ant-table-thead tr th {
-    line-height   : 36px;
-    background    : var(--m-grey61);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey60);
-    font-size     : 16px;
-    border-right  : 1px solid var(--m-black44);
-    border-bottom : 1px solid var(--m-black44);
-    white-space   : nowrap;
-    text-overflow : ellipsis;
-    overflow      : hidden;
-}
-
-.dialogTable2 .ant-table .ant-table-tbody tr td {
-    height       : 36px;
-    line-height  : 36px;
-    padding      : 0 8px;
-    border-right : 1px solid var(--m-black44);
-    border-bottom: 1px solid var(--m-black44);
-    font-size    : 14px;
-    color        : var(--m-white11);
-    white-space  : nowrap;
-    text-overflow: ellipsis;
-    overflow     : hidden;
-    background   : var(--m-grey62);
-}
-
-.dialogTable2 .ant-table .ant-table-placeholder {
-    border    : 0;
-    background: var(--m-grey11);
-}
-
-.ant-empty-normal {
-    color: var(--m-grey17);
-}
-
-.ant-empty-img-simple-path,
-.ant-empty-img-simple-ellipse {
-    fill: var(--m-grey17);
-}
-
-.ant-empty-img-simple-g {
-    stroke: var(--m-grey17);
-}
-
-.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   : var(--m-grey11);
-    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: var(--m-blue11);
-}
-
-.add-custom .ant-modal-content .ant-modal-header,
-.commonModal .ant-modal-content .ant-modal-header {
-    height       : 40px;
-    background   : linear-gradient(0deg, var(--m-blue4), var(--m-blue5));
-    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      : var(--m-white0);
-}
-
-.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, var(--m-blue8) 0%, var(--m-blue9) 100%);
-    border-radius: 3px;
-    font-size    : 16px;
-    color        : var(--m-white0);
-}
-
-.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, var(--m-blue8-hover) 0%, var(--m-blue9-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.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 var(--m-blue10);
-    border-radius: 3px;
-    background   : transparent;
-    font-size    : 16px;
-    color        : var(--m-blue10);
-    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: var(--m-blue10-hover);
-}
-
-.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       : var(--m-grey1);
-    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      : var(--m-red1);
-}
-
-.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 .mb10.ant-row.ant-form-item {
-    margin-bottom: 10px;
-}
-
-.ant-form.inlineForm .relative.ant-form-item {
-    position: relative;
-}
-
-.ant-form.inlineForm .relative.ant-form-item .tip {
-    position   : absolute;
-    font-size  : 14px;
-    color      : var(--m-grey41);
-    width      : 100%;
-    top        : calc(100% + 5px);
-    white-space: nowrap;
-}
-
-.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: var(--m-grey41);
-}
-
-.ant-form.inlineForm .relative.ant-form-item .ant-form-item-control .backUnit {
-    position   : absolute;
-    right      : -20px;
-    top        : -7px;
-    line-height: 32px;
-    height     : 32px;
-    color      : var(--m-grey2);
-}
-
-.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 {
-    height: 100%;
-}
-
-.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-form.dialogForm .btnCenter.ant-form-item {
-    width: 100%;
-}
-
-.ant-form.dialogForm .btnCenter.ant-form-item .ant-form-item-label {
-    width: 0;
-}
-
-.ant-form.dialogForm .btnCenter.ant-form-item .ant-form-item-control-wrapper {
-    width     : 100%;
-    text-align: center;
-}
-
-.ant-select-single .ant-select-selector {
-    height       : 30px;
-    padding      : 0 8px;
-    background   : var(--m-grey21);
-    border       : 1px solid var(--m-blue10);
-    border-radius: 3px;
-    color        : var(--m-white1);
-}
-
-.ant-select-single .ant-select-arrow {
-    right: 8px;
-    color: var(--m-grey1);
-}
-
-.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 var(--m-grey14);
-}
-
-.inlineFormSelect.ant-select-single:hover,
-.inlineFormSelect.ant-select-single:focus {
-    border-color: var(--m-blue10);
-}
-
-.inlineFormSelect.ant-select-single .ant-select-selector {
-    height    : 30px;
-    padding   : 0 8px;
-    background: var(--m-grey21);
-    border    : 0;
-    color     : var(--m-white1);
-}
-
-.inlineFormSelect.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-    color: var(--m-grey10);
-}
-
-.inlineFormSelect.ant-select-single .ant-select-arrow {
-    right: 8px;
-    color: var(--m-blue0) !important;
-}
-
-.dialogTableSelect.ant-select-single {
-    margin-top: 5px;
-    border    : 0;
-}
-
-.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 var(--m-grey14);
-}
-
-.typeSelect.ant-select-single:hover,
-.typeSelect.ant-select-single:focus {
-    border-color: var(--m-blue10);
-}
-
-.typeSelect.ant-select-single .ant-select-selector {
-    height    : 30px;
-    padding   : 0 8px;
-    background: var(--m-grey21);
-    border    : 0;
-    color     : var(--m-white1);
-}
-
-.typeSelect.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-    color: var(--m-grey10);
-}
-
-.typeSelect.ant-select-single .ant-select-arrow {
-    right: 8px;
-    color: var(--m-blue0);
-}
-
-.input-enumdicname {
-    color    : var(--m-grey41);
-    font-size: 14px;
-    position : absolute;
-    right    : 5px;
-}
-
-.input-enumdicname-absolute {
-    position   : absolute;
-    top        : -8px;
-    right      : -78px;
-    color      : var(--m-grey41);
-    margin-left: 5px;
-    font-size  : 14px;
-    display    : inline-block;
-    min-width  : 100px;
-}
-
-.dialogInput {
-    background   : var(--m-grey21) !important;
-    border       : 1px solid var(--m-grey14);
-    border-radius: 3px;
-    color        : var(--m-white1);
-}
-
-.dialogInput .ant-input {
-    color     : var(--m-white1);
-    background: transparent;
-}
-
-.dialogInput .ant-input-suffix {
-    color: var(--m-white1);
-}
-
-.dialogInput .ant-input-suffix .ant-input-password-icon {
-    color: var(--m-white1);
-}
-
-.dialogInput:hover,
-.dialogInput:focus {
-    border-color: var(--m-blue10);
-}
-
-.yellowInput .ant-input,
-.yellowInput .ant-input-number-input {
-    color     : #FC9618;
-    font-size : 16px;
-    text-align: center;
-}
-
-.suffixGrey .ant-input-suffix {
-    color: var(--m-grey2);
-}
-
-.dialogInput34.ant-input-number {
-    position: relative;
-    height  : 34px;
-}
-
-.dialogInput34.ant-input-number .ant-input-number-input {
-    height     : 34px;
-    line-height: 34px;
-    font-size  : 16px;
-    color      : var(--m-white6);
-    text-align : center;
-    padding    : 0 26px;
-}
-
-.dialogInput34.ant-input-number-disabled {
-    background: var(--m-grey52);
-}
-
-.dialogInput34.ant-input-number-disabled .ant-input-number-input {
-    color: var(--m-grey51);
-}
-
-.block {
-    display: block;
-}
-
-.formFieldSet {
-    border : 1PX solid var(--m-grey19);
-    padding: 0 20px 20px;
-}
-
-.formFieldSet legend {
-    color: var(--m-white0);
-}
-
-.formFieldSet+.formFieldSet {
-    margin-top: 35px;
-}
-
-.ant-form legend {
-    width        : auto;
-    margin-left  : 20px;
-    font-size    : 16px;
-    color        : var(--m-white0);
-    border-bottom: 0;
-    padding      : 0 10px;
-}
-
-.paddingDialog .formFieldSet legend,
-.fieldsetDialog .formFieldSet legend {
-    width        : auto;
-    margin-left  : 20px;
-    font-size    : 16px;
-    color        : var(--m-white0);
-    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           : var(--m-blue0);
-    border               : 0;
-    padding              : 0;
-    text-align           : center;
-    font-size            : 14px;
-    color                : var(--m-white0);
-    /*圆角兼容性*/
-    -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: var(--m-blue0-hover);
-    color     : var(--m-white0-hover);
-}
-
-.upload .ant-upload-list-item-info .anticon-loading,
-.upload .ant-upload-list-item-info .anticon-paper-clip {
-    color: var(--m-white0);
-}
-
-.upload .ant-upload-list-item-info .ant-upload-list-item-name {
-    color: var(--m-white0);
-}
-
-.upload .ant-upload-list-item-info .ant-upload-list-item-card-actions .anticon {
-    color: var(--m-white0);
-}
-
-.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: var(--m-blue0);
-}
-
-.upload .ant-upload-list-item-info:hover .ant-upload-list-item-name {
-    color: var(--m-blue0);
-}
-
-.upload .ant-upload-list-item-info:hover .ant-upload-list-item-card-actions .anticon {
-    color: var(--m-blue0);
-}
-
-.upload .look {
-    color      : var(--m-blue0);
-    font-size  : 14px;
-    margin-left: 10px;
-    cursor     : pointer;
-}
-
-.fl {
-    float: left;
-}
-
-.fr {
-    float: right;
-}
-
-.ml8 {
-    margin-left: 8px;
-}
-
-.ml10 {
-    margin-left: 10px;
-}
-
-.ml15 {
-    margin-left: 15px;
-}
-
-.ml20 {
-    margin-left: 20px;
-}
-
-.ml35 {
-    margin-left: 35px;
-}
-
-.ml9 {
-    margin-left: 9px;
-}
-
-.ml5 {
-    margin-left: 5px;
-}
-
-.mt5 {
-    margin-top: 5px;
-}
-
-.mt10 {
-    margin-top: 10px;
-}
-
-.mt12 {
-    margin-top: 12px;
-}
-
-.mt20 {
-    margin-top: 20px;
-}
-
-.mt25 {
-    margin-top: 25px;
-}
-
-.mt30 {
-    margin-top: 30px;
-}
-
-.mb40 {
-    margin-bottom: 40px !important;
-}
-
-.mr10 {
-    margin-right: 10px;
-}
-
-.red {
-    color: #ff4d4f;
-}
-
-.red1 {
-    color: var(--m-red1);
-}
-
-.grey {
-    color: var(--m-grey2);
-}
-
-.grey1 {
-    color: var(--m-grey1);
-}
-
-.white {
-    color: var(--m-white6);
-}
-
-.blue {
-    color: var(--m-blue0);
-}
-
-.green {
-    color: var(--m-green0);
-}
-
-.yellow {
-    color: #FF9600;
-}
-
-.orange {
-    color: #F52929;
-}
-
-.selectBtn.ant-btn,
-.operBtn.ant-btn {
-    margin-left          : 10px;
-    width                : 80px;
-    height               : 28px;
-    line-height          : 29px;
-    text-align           : center;
-    background           : linear-gradient(0deg, var(--m-grey39) 0%, var(--m-grey40) 98%);
-    border               : 0;
-    color                : var(--m-white0);
-    font-size            : 14px;
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    padding              : 0 15px;
-}
-
-.selectBtn.ant-btn:hover,
-.operBtn.ant-btn:hover,
-.selectBtn.ant-btn:focus,
-.operBtn.ant-btn:focus,
-.selectBtn.ant-btn:active,
-.operBtn.ant-btn:active,
-.selectBtn.ant-btn::after,
-.operBtn.ant-btn::after {
-    background: linear-gradient(0deg, var(--m-grey39-hover) 0%, var(--m-grey40-hover) 98%);
-    color     : var(--m-white0-hover);
-    border    : 0;
-}
-
-.operBtn.ant-btn {
-    background: linear-gradient(0deg, var(--m-blue6) 0%, var(--m-blue7) 99%);
-}
-
-.operBtn.ant-btn:hover,
-.operBtn.ant-btn:focus,
-.operBtn.ant-btn:active,
-.operBtn.ant-btn::after {
-    background: linear-gradient(0deg, var(--m-blue6-hover) 0%, var(--m-blue7-hover) 99%);
-    color     : var(--m-white0-hover);
-    border    : 0;
-}
-
-.ant-btn.historyBtn {
-    margin-left          : 10px;
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    height               : 28px;
-    border-color         : var(--m-blue29);
-    background           : var(--m-blue30);
-    color                : var(--m-grey43);
-}
-
-.ant-btn.historyBtn .anticon {
-    color: var(--m-grey44);
-}
-
-.ant-btn.historyBtn:hover,
-.ant-btn.historyBtn:focus,
-.ant-btn.historyBtn:active,
-.ant-btn.historyBtn::after {
-    border-color: var(--m-blue29-hover);
-    background  : var(--m-blue30-hover);
-    color       : var(--m-grey43-hover);
-}
-
-.ant-btn.historyBtn:hover .antion,
-.ant-btn.historyBtn:focus .antion,
-.ant-btn.historyBtn:active .antion,
-.ant-btn.historyBtn::after .antion {
-    color: var(--m-grey44-hover);
-}
-
-.btnPrimary.ant-btn,
-.operBtn.ant-btn {
-    margin-left          : 10px;
-    width                : auto;
-    min-width            : 80px;
-    height               : 28px;
-    line-height          : 31px;
-    text-align           : center;
-    background           : linear-gradient(0deg, var(--m-blue6) 0%, var(--m-blue7) 99%);
-    border               : 0;
-    color                : var(--m-white0);
-    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, var(--m-blue6-hover) 0%, var(--m-blue7-hover) 99%);
-    color     : var(--m-white0-hover);
-    border    : 0;
-}
-
-.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, var(--m-blue2), var(--m-blue0));
-    box-shadow           : -1px 0px 0px 0px var(--m-black10);
-    /*圆角兼容性*/
-    -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, var(--m-blue2-hover) 0%, var(--m-blue0-hover) 99%);
-    color     : var(--m-white0-hover);
-    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                : var(--m-white0);
-    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     : var(--m-white0-hover);
-    border    : 0;
-}
-
-.btnDeafault.ant-btn {
-    margin-left          : 10px;
-    width                : 80px;
-    height               : 26px;
-    line-height          : 27px;
-    text-align           : center;
-    border               : 0;
-    color                : var(--m-white0);
-    font-size            : 14px;
-    background           : linear-gradient(0deg, var(--m-grey12) 0%, var(--m-grey13) 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, var(--m-grey12-hover) 0%, var(--m-grey13-hover) 99%);
-    color     : var(--m-white0-hover);
-    border    : 0;
-}
-
-.to {
-    font-size   : 14px;
-    color       : var(--m-grey2);
-    margin-left : -8px;
-    margin-right: 2px;
-}
-
-.filterTable {
-    display     : inline-flex;
-    width       : calc(100% - 3px);
-    padding-left: 3px;
-    background  : var(--m-black35);
-}
-
-.ant-row.dialogRowTitle {
-    margin-left : 0 !important;
-    margin-right: 0 !important;
-    border      : 1px solid var(--m-grey20);
-}
-
-.ant-row.dialogRowTitle .ant-col {
-    border-top   : 1px solid var(--m-grey20);
-    border-right : 1px solid var(--m-grey20);
-    padding-left : 0 !important;
-    padding-right: 0 !important;
-    height       : 34px;
-    line-height  : 34px;
-    font-size    : 16px;
-    color        : var(--m-grey2);
-}
-
-.ant-row.dialogRowTitle .ant-col .red {
-    color: var(--m-red1);
-}
-
-.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 var(--m-grey20);
-}
-
-.ant-row.dialogRowTitle .bt1 {
-    border-top: 1px solid var(--m-grey20) !important;
-}
-
-.commonPicker.ant-calendar-picker .ant-input {
-    background           : var(--m-grey21);
-    border-color         : var(--m-grey14);
-    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    : var(--m-white0);
-    font-size: 14px;
-}
-
-.commonPicker.ant-calendar-picker .ant-input .ant-calendar-range-picker-input::placeholder {
-    color: var(--m-grey10);
-}
-
-.commonPicker.ant-calendar-picker .ant-input .ant-calendar-picker-clear {
-    background: var(--m-white0);
-}
-
-.commonPicker.ant-calendar-picker .ant-input .ant-calendar-range-picker-separator {
-    font-size: 14px;
-    color    : var(--m-grey2);
-}
-
-.commonDatePicker.ant-calendar-picker .ant-input {
-    background           : var(--m-grey21);
-    padding              : 0 8px;
-    height               : 30px;
-    line-height          : 30px;
-    color                : var(--m-white1);
-    border               : 1PX solid var(--m-grey14);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-}
-
-.commonDatePicker.ant-calendar-picker .ant-calendar-picker-icon {
-    color: var(--m-grey1);
-}
-
-.commonDatePicker.ant-calendar-picker .ant-calendar-picker-clear {
-    display   : none;
-    background: transparent;
-    color     : var(--m-grey1);
-}
-
-.commonDatePicker.ant-calendar-picker .ant-calendar-picker-clear svg {
-    fill: var(--m-grey1);
-}
-
-.conditionPicker.ant-calendar-picker .ant-input {
-    border: 0;
-}
-
-.conditionPicker.ant-calendar-picker:focus .ant-input {
-    border: 0;
-}
-
-.ant-popover .ant-popover-content {
-    border               : 1px solid var(--m-grey23);
-    box-shadow           : 0px 10px 10px 0px var(--m-boxShadow);
-    /*圆角兼容性*/
-    -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 : var(--m-grey22);
-    border-left-color: var(--m-grey22);
-    background       : var(--m-grey22);
-    border           : 1PX solid var(--m-grey23);
-    border-bottom    : 0;
-    border-right     : 0;
-}
-
-.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
-    border-image-width: 0;
-    background        : var(--m-grey22);
-    color             : var(--m-grey1);
-    padding           : 5px 0;
-}
-
-.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .popItem {
-    min-width  : 160px;
-    padding    : 0 15px;
-    text-align : center;
-    cursor     : pointer;
-    height     : 30px;
-    line-height: 30px;
-    font-size  : 15px;
-}
-
-.ant-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .popItem:hover {
-    color     : var(--m-white8);
-    background: var(--m-blue0);
-}
-
-.ant-calendar-picker-container .ant-calendar-range,
-.ant-calendar-picker-container .ant-calendar {
-    background  : var(--m-grey22);
-    border-color: var(--m-grey22);
-}
-
-.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: var(--m-grey23);
-}
-
-.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 var(--m-grey42);
-    color     : var(--m-white0);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-grey42);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-grey2);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-grey42);
-}
-
-.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: var(--m-grey1);
-}
-
-.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     : var(--m-white6);
-}
-
-.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: var(--m-blue0);
-}
-
-.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: var(--m-white1);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-blue0);
-}
-
-.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: var(--m-white1);
-}
-
-.ant-calendar-picker-container .ant-calendar-range .ant-calendar-footer,
-.ant-calendar-picker-container .ant-calendar .ant-calendar-footer {
-    border-top-color: var(--m-grey42);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-blue0);
-    border-color    : var(--m-blue0);
-    color           : var(--m-white0);
-}
-
-.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: var(--m-blue0-hover);
-    border-color    : var(--m-blue0-hover);
-    color           : var(--m-white0-hover);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-grey2);
-}
-
-.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: var(--m-grey1);
-}
-
-.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: var(--m-white1);
-}
-
-.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     : var(--m-blue0);
-}
-
-.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-panel {
-    background  : var(--m-grey22);
-    border-color: var(--m-grey22);
-}
-
-.ant-calendar-picker-container .ant-calendar-month-calendar .ant-calendar-month-panel .ant-calendar-month-panel-header {
-    border-color: var(--m-grey1);
-}
-
-.ant-calendar-range .ant-calendar-in-range-cell::before {
-    background: var(--m-grey22-hover);
-}
-
-.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: var(--m-grey21);
-}
-
-.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           : var(--m-black27);
-    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: var(--m-blue11);
-}
-
-.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     : var(--m-blue0);
-    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     : var(--m-white0);
-    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, var(--m-grey12) 0%, var(--m-grey13) 100%);
-    font-size    : 16px;
-    color        : var(--m-white0);
-    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, var(--m-grey12-hover) 0%, var(--m-grey13-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.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, var(--m-blue2) 0%, var(--m-blue0) 100%);
-    border-radius: 3px;
-    font-size    : 16px;
-    color        : var(--m-white0);
-    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, var(--m-blue2-hover) 0%, var(--m-blue0-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.tltLeft {
-    font-size : 16px;
-    text-align: left;
-}
-
-.tltLeft .icon {
-    font-size   : 20px;
-    fill        : var(--m-blue0);
-    margin-right: 10px;
-}
-
-.tltRight {
-    font-size : 16px;
-    text-align: right;
-    padding   : 5px 20px 5px 0;
-}
-
-.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        : var(--m-grey17);
-    font-size    : 14px;
-    border-bottom: 1px solid var(--m-grey18);
-    padding      : 10px 8px 10px 44px;
-    height       : 43px;
-}
-
-.ant-collapse.spotCollapse.ant-collapse-borderless .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
-    fill     : var(--m-grey17);
-    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        : var(--m-white1);
-    margin-bottom: 10px;
-    background   : var(--m-black15);
-    border       : 1px solid var(--m-blue3);
-    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           : var(--m-black15);
-    border               : 1px solid var(--m-blue3);
-    /*圆角兼容性*/
-    -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        : var(--m-grey17);
-    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     : var(--m-grey17);
-    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        : var(--m-white1);
-    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           : var(--m-black15);
-    border               : 1px solid var(--m-blue3);
-    /*圆角兼容性*/
-    -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        : var(--m-grey17);
-    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     : var(--m-grey17);
-    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        : var(--m-white1);
-    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 var(--m-grey21);
-    -webkit-text-fill-color: var(--m-white1);
-}
-
-.dialogSpan {
-    color: var(--m-white1);
-}
-
-input:-internal-autofill-selected {
-    background-color: var(--m-grey21) !important;
-}
-
-.login input:-webkit-autofill {
-    box-shadow: inset 0 0 0 1000px var(--m-white0);
-}
-
-.ant-checkbox-group.commonCheckboxGroup {
-    width: 100%;
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
-    color    : var(--m-white0);
-    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   : var(--m-grey21);
-    border       : 1px solid var(--m-grey14);
-    border-radius: 3px;
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
-    border-color: var(--m-blue0);
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper .ant-checkbox.ant-checkbox-checked::after {
-    border-color: var(--m-blue0);
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper span+span {
-    margin-right: 15px;
-    color       : var(--m-white0);
-    font-size   : 14px;
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled {
-    outline-color: var(--m-grey14);
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-input {
-    color    : var(--m-white0);
-    font-size: 14px;
-}
-
-.ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper-disabled .ant-checkbox-disabled .ant-checkbox-inner {
-    border-color: var(--m-grey14) !important;
-}
-
-.ant-checkbox-wrapper.commonCheckbox .ant-checkbox {
-    margin-right: 2px;
-}
-
-.ant-checkbox-wrapper.commonCheckbox .ant-checkbox .ant-checkbox-inner {
-    background   : var(--m-grey21);
-    border       : 1px solid var(--m-grey14);
-    border-radius: 3px;
-}
-
-.ant-checkbox-wrapper.commonCheckbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
-    border-color: var(--m-blue0);
-}
-
-.ant-checkbox-wrapper.commonCheckbox .ant-checkbox.ant-checkbox-checked::after {
-    border-color: var(--m-blue0);
-}
-
-.ant-checkbox-wrapper.commonCheckbox span+span {
-    margin-right: 15px;
-    color       : var(--m-white13);
-    font-size   : 14px;
-}
-
-.commonRadioGroup .ant-radio-wrapper {
-    color    : var(--m-white6);
-    font-size: 14px;
-}
-
-.commonRadioGroup .ant-radio-wrapper .ant-radio .ant-radio-inner {
-    border-color: var(--m-blue0);
-    background  : var(--m-grey21);
-}
-
-.commonRadioGroup .ant-radio-wrapper .ant-radio .ant-radio-inner::after {
-    left         : 4px;
-    top          : 4px;
-    width        : 6px;
-    height       : 6px;
-    background   : var(--m-blue0);
-    border-radius: 50%;
-}
-
-.commonRadioGroup .ant-radio-wrapper-disabled .ant-radio-disabled .ant-radio-inner {
-    border-color: var(--m-blue0) !important;
-    background  : var(--m-grey21);
-}
-
-.commonRadioGroup .ant-radio-wrapper-disabled .ant-radio-disabled .ant-radio-inner::after {
-    left         : 4px;
-    top          : 4px;
-    width        : 6px;
-    height       : 6px;
-    background   : var(--m-blue0);
-    border-radius: 50%;
-}
-
-.commonRadioGroup .ant-radio-wrapper-disabled span+span {
-    color    : var(--m-white0);
-    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      : var(--m-grey2);
-    height     : 30px;
-    line-height: 30px;
-}
-
-.topTableHeight {
-    height: calc(100% - 28px);
-}
-
-.topTableHeight40 {
-    height: calc(100% - 35px);
-}
-
-.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: var(--m-black1);
-}
-
-.buy-sell-market .buy-sell-market-title {
-    width         : 100%;
-    height        : 40px;
-    background    : var(--m-black1);
-    display       : inline-flex;
-    font-size     : 14px;
-    position      : relative;
-    line-height   : 40px;
-    border-bottom : 1PX solid var(--m-blue0);
-    padding-bottom: 2px;
-}
-
-.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: 40px;
-}
-
-.buy-sell-market .buy-sell-market-title .titleBtn {
-    min-width: 90px;
-    height   : 32px;
-    display  : inline-flex;
-}
-
-.buy-sell-market .buy-sell-market-title .titleBtn .name {
-    background           : var(--m-blue12);
-    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                : var(--m-white9);
-    height               : 32px;
-    line-height          : 32px;
-    font-size            : 14px;
-}
-
-.buy-sell-market .buy-sell-market-title .titleBtn .arrowRightIcon,
-.buy-sell-market .buy-sell-market-title .titleBtn .arrowLeftIcon {
-    width              : 12px;
-    height             : 32px;
-    background-image   : var(--m-arrowRight);
-    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      : var(--m-grey1);
-    position   : absolute;
-    top        : auto;
-    right      : 16px;
-    bottom     : 0;
-    left       : auto;
-    line-height: 28px;
-    z-index    : 2;
-}
-
-.buy-sell-market .buy-sell-market-title .numBlock {
-    display    : inline-flex;
-    white-space: nowrap;
-    text-align : left;
-    min-width  : 80px;
-    margin-left: 15px;
-}
-
-.buy-sell-market .buy-sell-market-title .numBlock .first {
-    font-size: 14px;
-}
-
-.buy-sell-market .buy-sell-market-title .numBlock .last {
-    font-size  : 14px;
-    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           : var(--m-blue3);
-    border               : 1px solid var(--m-blue13);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    color                : var(--m-grey2);
-    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: var(--m-red1);
-}
-
-.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, var(--m-blue2), var(--m-blue0));
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    font-size            : 14px;
-    color                : var(--m-white0);
-    text-align           : center;
-    border               : none;
-    margin-left          : 10px;
-}
-
-.buy-sell-market .buy-sell-market-title .publishBuy.ant-btn:hover {
-    background: linear-gradient(0deg, var(--m-blue2-hover), var(--m-blue0-hover));
-    color     : var(--m-white0-hover);
-}
-
-.buy-sell-market .buy-sell-market-title .detailBtn.ant-btn {
-    min-width            : 80px;
-    height               : 30px;
-    line-height          : 30px;
-    background           : linear-gradient(0deg, var(--m-grey12) 0%, var(--m-grey13) 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                : var(--m-white0);
-    text-align           : center;
-    border               : none;
-}
-
-.buy-sell-market .buy-sell-market-title .detailBtn.ant-btn:hover {
-    background: linear-gradient(0deg, var(--m-grey12-hover) 0%, var(--m-grey13-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.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;
-}
-
-.buy-sell-market .buy-sell-market-title .btn-list .operBtn.ant-btn {
-    margin-top   : 0;
-    margin-bottom: 0;
-}
-
-.bdf1 {
-    border-left: 1PX solid var(--m-grey31);
-}
-
-.topTableHeight .srcollYTable .ant-table .ant-table-body {
-    min-height: calc(100vh - 378px);
-    max-height: calc(100vh - 378px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .srcollYTable .ant-table .ant-table-placeholder {
-    height: calc(100vh - 378px);
-}
-
-.topTableHeight .srcollYTable .ant-table .ant-table-placeholder .ant-empty.ant-empty-normal {
-    margin: 0;
-}
-
-.topTableHeight .srcollYTableNoBottom .ant-table .ant-table-body {
-    min-height: calc(100vh - 138px);
-    max-height: calc(100vh - 138px);
-}
-
-.topTableHeight .srcollYTableNoBottom .ant-table .ant-table-placeholder {
-    height: calc(100vh - 138px);
-}
-
-.topTableHeight .noPlaceHolder .ant-table-placeholder {
-    display: none;
-}
-
-.topTableHeight .hasPlaceHolder .ant-table-placeholder {
-    position   : absolute;
-    top        : 28px;
-    right      : auto;
-    bottom     : auto;
-    left       : 50%;
-    margin-left: -56px;
-}
-
-.layout-bottom .srcollYTable .ant-table .ant-table-tbody {
-    min-height: 190px;
-    background: var(--m-black33);
-}
-
-.topTableHeight .secondTabTable .ant-table .ant-table-body {
-    min-height: calc(100vh - 407px);
-    max-height: calc(100vh - 407px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .secondTabTable .ant-table .ant-table-placeholder {
-    height: calc(100vh - 407px);
-}
-
-.topTableHeight .secondTabTableNoBottom .ant-table .ant-table-body {
-    min-height: calc(100vh - 167px);
-    max-height: calc(100vh - 167px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .secondTabTableNoBottom .ant-table .ant-table-placeholder {
-    height: calc(100vh - 167px);
-}
-
-.topTableHeight .condSecondTabTable .ant-table .ant-table-body {
-    min-height: calc(100vh - 443px);
-    max-height: calc(100vh - 443px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .condSecondTabTable .ant-table .ant-table-placeholder {
-    height: calc(100vh - 443px);
-}
-
-.topTableHeight .condSecondTabTableNoBottom .ant-table .ant-table-body {
-    min-height: calc(100vh - 196px);
-    max-height: calc(100vh - 196px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .condSecondTabTableNoBottom .ant-table .ant-table-placeholder {
-    height: calc(100vh - 196px);
-}
-
-.topTableHeight .condSecondTabTableHalfTop .ant-table .ant-table-body {
-    min-height: calc((100vh - 443px)/2 - 13px);
-    max-height: calc((100vh - 443px)/2 - 13px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .condSecondTabTableHalfTop .ant-table .ant-table-thead tr th {
-    background: var(--m-green1);
-    color     : var(--m-grey17);
-}
-
-.topTableHeight .condSecondTabTableHalfTop .ant-table .ant-table-placeholder {
-    height: calc((100vh - 443px)/2 - 13px);
-}
-
-.topTableHeight .halfBottom .ant-table .ant-table-thead tr th {
-    background: var(--m-red2);
-}
-
-.topTableHeight .condSecondTabTableHalfTopNoBottom .ant-table .ant-table-body {
-    min-height: calc((100vh - 196px)/2 - 16px);
-    max-height: calc((100vh - 196px)/2 - 16px);
-    background: var(--m-black2);
-}
-
-.topTableHeight .condSecondTabTableHalfTopNoBottom .ant-table .ant-table-placeholder {
-    height: calc((100vh - 196px)/2 - 16px);
-}
-
-.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-image: linear-gradient(90deg, var(--m-black34) 60px, var(--m-red2) 0);
-}
-
-.buyHallTable .ant-table .ant-table-thead tr,
-.sellHallTable .ant-table .ant-table-thead tr {
-    box-shadow: 0px 1px 0px 0px var(--m-black17);
-}
-
-.buyHallTable .ant-table .ant-table-thead tr th,
-.sellHallTable .ant-table .ant-table-thead tr th {
-    line-height   : 26px;
-    background    : var(--m-black34);
-    padding-top   : 0;
-    padding-bottom: 0;
-    color         : var(--m-grey17);
-    font-size     : 14px;
-    border-right  : 1px solid var(--m-black10);
-    border-bottom : 1px solid var(--m-black10);
-    white-space   : nowrap;
-    text-overflow : ellipsis;
-    overflow      : hidden;
-}
-
-.buyHallTable .ant-table .ant-table-tbody tr td,
-.sellHallTable .ant-table .ant-table-tbody tr td {
-    height       : 30px;
-    line-height  : 30px;
-    padding      : 0 8px;
-    border-right : 1px solid var(--m-black10);
-    border-bottom: 1px solid var(--m-black10);
-    font-size    : 14px;
-    color        : var(--m-grey17);
-    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: var(--m-black34);
-    color     : var(--m-grey17);
-    min-width : 61px;
-}
-
-.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: var(--m-red2);
-    color     : var(--m-white1);
-}
-
-.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: var(--m-black2);
-}
-
-.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: var(--m-blue3) !important;
-}
-
-.buyHallTable .ant-table .ant-table-placeholder,
-.sellHallTable .ant-table .ant-table-placeholder {
-    border    : 0;
-    background: var(--m-black2);
-}
-
-.buyHallTable .ant-table-row-expand-icon,
-.sellHallTable .ant-table-row-expand-icon {
-    border-color    : var(--m-grey17);
-    background-color: transparent;
-    color           : var(--m-grey17);
-}
-
-.sellHallTable .ant-table .ant-table-content {
-    background-image: linear-gradient(90deg, var(--m-black34) 60px, var(--m-green1) 0);
-}
-
-.sellHallTable .ant-table .ant-table-tbody tr td:first-child {
-    color: var(--m-grey17);
-}
-
-.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child :nth-child(1)) {
-    background: var(--m-green1);
-}
-
-.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child),
-.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) {
-    background-color: var(--m-black2);
-}
-
-.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 - 378px);
-    max-height: calc(100vh - 378px);
-}
-
-.buyHallTable .ant-table .ant-table-tbody,
-.sellHallTable .ant-table .ant-table-tbody {
-    min-height: calc(100vh - 378px);
-    max-height: calc(100vh - 378px);
-}
-
-.noDataTable .ant-table .ant-table-header {
-    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 - 135px);
-    max-height: calc(100vh - 135px);
-}
-
-.buyHallTableHigh .ant-table .ant-table-tbody,
-.sellHallTableHigh .ant-table .ant-table-tbody {
-    min-height: calc(100vh - 135px);
-    max-height: calc(100vh - 135px);
-}
-
-.formBar {
-    width     : 100%;
-    flex      : 1;
-    padding   : 28px 16px 0;
-    max-height: calc(100% - 70px);
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.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           : var(--m-grey14);
-    /*圆角兼容性*/
-    -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: var(--m-blue0);
-}
-
-.formBar ::v-deep.formProgress .ant-progress-text {
-    display: none;
-}
-
-.formBar .listedBtn {
-    width        : 120px;
-    height       : 30px;
-    line-height  : 30px;
-    background   : linear-gradient(0deg, var(--m-blue2) 0%, var(--m-blue0) 100%);
-    border-radius: 3px;
-    color        : var(--m-white0);
-    font-size    : 14px;
-    text-align   : center;
-    border       : 0;
-}
-
-.formBar .listedBtn:hover {
-    background: linear-gradient(0deg, var(--m-blue0-hover) 0%, var(--m-blue2-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.formBar .cancelBtn {
-    background: linear-gradient(0deg, var(--m-grey12) 0%, var(--m-grey13) 100%);
-}
-
-.formBar .cancelBtn:hover {
-    background: linear-gradient(0deg, var(--m-grey12-hover) 0%, var(--m-grey13-hover) 100%);
-    color     : var(--m-white0-hover);
-}
-
-.fixedBtns {
-    position: absolute;
-    top     : auto;
-    right   : 0;
-    bottom  : 9px;
-    left    : 0;
-    z-index : 2;
-}
-
-.c_c_s_s .fixedBtns {
-    left       : 8px;
-    right      : 8px;
-    padding-top: 18px;
-    background : var(--m-black40);
-}
-
-.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: var(--m-blue14);
-}
-
-.ant-slider.formSlider .ant-slider-track {
-    height          : 3px;
-    background-color: var(--m-blue0);
-}
-
-.ant-slider.formSlider .ant-slider-step {
-    height: 3px;
-}
-
-.ant-slider.formSlider .ant-progress-text {
-    display: none;
-}
-
-.noData {
-    width          : 80px;
-    height         : 80px;
-    background     : var(--m-nodata) center center no-repeat;
-    background-size: cover;
-}
-
-.ant-empty.ant-empty-normal .ant-empty-image {
-    width          : 80px;
-    height         : 80px;
-    background     : var(--m-nodata) 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: var(--m-black33);
-}
-
-.layout-bottom .srcollYTable .ant-table .ant-table-placeholder {
-    border-top: 1PX solid var(--m-black9);
-    background: var(--m-black33);
-}
-
-.conditionPicker.ant-calendar-picker .ant-input {
-    width     : 90px;
-    background: transparent;
-    font-size : 14px;
-    color     : var(--m-white6);
-}
-
-.conditionPicker.ant-calendar-picker .ant-calendar-picker-icon {
-    display: none;
-}
-
-.btn-list-sticky {
-    position: sticky;
-    position: -webkit-sticky;
-    right   : 2px;
-}
-
-.commonSteps .ant-steps-item .block {
-    display: inline-flex;
-}
-
-.commonSteps .ant-steps-item .ant-steps-item-tail {
-    left   : 9.5px !important;
-    padding: 30px 0 0 0 !important;
-}
-
-.commonSteps .ant-steps-item .ant-steps-item-icon {
-    margin-top  : 5px;
-    width       : 20px;
-    height      : 20px;
-    background  : var(--m-grey11);
-    border-color: #2484FC;
-}
-
-.commonSteps .ant-steps-item .ant-steps-item-icon .ant-steps-icon {
-    font-size  : 12px;
-    line-height: 20px;
-    top        : -9px;
-}
-
-.commonSteps .ant-steps-item .ant-steps-item-content {
-    min-height: 60px;
-}
-
-.commonSteps .ant-steps-item .line {
-    width                : 280px;
-    height               : 30px;
-    background           : var(--m-blue17);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    display              : inline-flex;
-    position             : relative;
-}
-
-.commonSteps .ant-steps-item .line .num {
-    width                : 30px;
-    height               : 30px;
-    background           : var(--m-blue0);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    text-align           : center;
-    line-height          : 30px;
-    font-size            : 14px;
-    color                : var(--m-white0);
-}
-
-.commonSteps .ant-steps-item .line .desc {
-    flex        : 1;
-    padding-left: 14px;
-    font-size   : 16px;
-    color       : var(--m-white0);
-    line-height : 28px;
-}
-
-.commonSteps .ant-steps-item .line .day {
-    width       : 70px;
-    text-align  : right;
-    color       : var(--m-blue0);
-    margin-right: 17px;
-    line-height : 28px;
-}
-
-.commonSteps .ant-steps-item .line .arrowRight {
-    display    : none;
-    position   : absolute;
-    top        : auto;
-    right      : -9px;
-    bottom     : 0;
-    left       : auto;
-    font-size  : 12px;
-    color      : var(--m-blue0);
-    line-height: 30px;
-    z-index    : 2;
-}
-
-.commonSteps .ant-steps-item .tip {
-    margin-left: 13px;
-    font-size  : 16px;
-    line-height: 30px;
-    color      : #223F7E;
-}
-
-.commonSteps .ant-steps-item-process .line {
-    border: 1px solid var(--m-blue0);
-}
-
-.commonSteps .ant-steps-item-process .line .arrowRight {
-    display: block;
-}
-
-.commonSteps .ant-steps-item-process .tip {
-    color: var(--m-blue0);
-}
-
-.commonSteps .ant-steps-item-process .ant-steps-item-icon {
-    width          : 22px !important;
-    height         : 22px !important;
-    background     : url(../images/stepPro.png) center center no-repeat !important;
-    background-size: cover !important;
-    border         : 0;
-}
-
-.commonSteps .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
-    display: none;
-}
-
-.commonSteps .ant-steps-item-wait .line .num {
-    background: #36506B;
-}
-
-.commonSteps .ant-steps-item-wait .line .desc {
-    color: #4D647A;
-}
-
-.commonSteps .ant-steps-item-wait .tip {
-    color: #223548;
-}
-
-.commonSteps .ant-steps-item-wait .ant-steps-item-icon {
-    border         : 0;
-    width          : 22px !important;
-    height         : 22px !important;
-    background     : url(../images/stepWait.png) center center no-repeat !important;
-    background-size: cover !important;
-}
-
-.commonSteps .ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
-    display: none;
-}
-
-.commonSteps>.ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-tail::after {
-    background-color: #2484FC;
-}
-
-.commonSteps>.ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-tail::after {
-    background-color: #223548;
-}
-
-.ant-menu-dark .ant-menu-inline.ant-menu-sub {
-    background: var(--m-black28);
-    box-shadow: none;
-}
-
-.ant-select-tree-dropdown {
-    background: var(--m-grey9);
-    box-shadow: none;
-}
-
-.ant-select-tree-dropdown .ant-select-tree {
-    color: var(--m-grey1);
-}
-
-.ant-select-tree-dropdown .ant-select-tree li .ant-select-tree-node-content-wrapper-open:hover {
-    background: var(--m-blue3);
-}
-
-.ant-select-tree-dropdown .ant-select-tree li .ant-select-tree-node-content-wrapper {
-    color: var(--m-grey1);
-}
-
-.ant-select-tree-dropdown .ant-select-tree li .ant-select-tree-child-tree li:hover {
-    background: var(--m-blue3);
-}
-
-.ant-select-tree-dropdown .ant-select-tree li .ant-select-tree-child-tree li:hover span {
-    background: var(--m-blue3);
-    color     : var(--m-white0);
-}
-
-.ant-menu-dark .ant-menu-sub .ant-menu-item,
-.ant-menu-dark .ant-menu-sub .ant-menu-item {
-    color: var(--m-grey34);
-}
-
-.ant-menu-dark .ant-menu-sub .ant-menu-item-selected,
-.ant-menu-dark .ant-menu-sub .ant-menu-item-selected {
-    color: var(--m-white8);
-}
-
-.ant-select-tree-dropdown .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-    background: transparent !important;
-}
-
-.ant-input-number-handler-wrap {
-    display: none;
-}
-
-.chartTabs.ant-tabs-top {
-    height    : calc(100% - 22px);
-    background: transparent;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar {
-    margin-bottom: 0;
-    border-bottom: 0;
-    height       : 30px;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav {
-    width: 100%;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav>div {
-    display: -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display: -moz-box;
-    /* Firefox 17- */
-    display: -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display: -moz-flex;
-    /* Firefox 18+ */
-    display: -ms-flexbox;
-    /* IE 10 */
-    display: flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav .ant-tabs-tab {
-    margin-right: 0;
-    padding     : 0;
-    height      : 30px;
-    line-height : 30px;
-    background  : var(--m-black39);
-    color       : var(--m-grey1);
-    font-size   : 14px;
-    flex        : 1;
-    text-align  : center;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav .ant-tabs-tab-active {
-    background: var(--m-green1);
-    color     : var(--m-blue0);
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-bar .ant-tabs-nav-container .ant-tabs-nav-wrap .ant-tabs-nav-scroll .ant-tabs-nav .ant-tabs-ink-bar-animated {
-    width : 0 !important;
-    height: 0 !important;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-content {
-    width     : 100%;
-    height    : calc(100% - 29px);
-    min-height: calc(100% - 29px);
-    margin-top: -1px;
-    position  : relative;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-content .ant-tabs-tabpane {
-    height        : 100%;
-    display       : -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display       : -moz-box;
-    /* Firefox 17- */
-    display       : -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display       : -moz-flex;
-    /* Firefox 18+ */
-    display       : -ms-flexbox;
-    /* IE 10 */
-    display       : flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-    flex-direction: column;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-content .ant-tabs-tabpane-active {
-    background: var(--m-green1);
-    position  : absolute;
-    top       : 0;
-    right     : 0;
-    bottom    : 0;
-    left      : 0;
-    z-index   : 2;
-}
-
-.chartTabs.ant-tabs-top .ant-tabs-content-animated {
-    margin-left: 0 !important;
-}
-
-.watchMore {
-    width      : 100%;
-    height     : 22px;
-    line-height: 22px;
-    background : var(--m-grey48);
-    font-size  : 14px;
-    color      : var(--m-grey49);
-    text-align : center;
-    cursor     : pointer;
-}
-
-.chartRow {
-    width        : 100%;
-    padding-left : 8px;
-    padding-right: 10px;
-    display      : inline-flex;
-}
-
-.chartRow>div {
-    flex       : 1;
-    font-size  : 14px;
-    color      : var(--m-grey50);
-    height     : 40px;
-    line-height: 40px;
-}
-
-.chartRow .left {
-    text-align: left;
-}
-
-.chartRow .middle {
-    text-align: center;
-    color     : var(--m-red11);
-}
-
-.chartRow .right {
-    text-align: right;
-}
-
-.ant-input-search.searchFriendInput {
-    width                : 100%;
-    height               : 30px;
-    background           : var(--m-grey53);
-    border-color         : var(--m-grey54);
-    /*圆角兼容性*/
-    -moz-border-radius   : 15px 15px 15px 15px;
-    -webkit-border-radius: 15px 15px 15px 15px;
-    border-radius        : 15px 15px 15px 15px;
-}
-
-.ant-input-search.searchFriendInput .anticon-search {
-    color: var(--m-grey55);
-}
-
-.ant-input-search.searchFriendInput .ant-input {
-    background : var(--m-grey53);
-    color      : var(--m-white6);
-    font-size  : 14px;
-    font-weight: 400;
-}
-
-.ant-input-search.searchFriendInput .ant-input-suffix .ant-input-search-icon {
-    display: none;
-}
-
-.ant-input-search.searchFriendInput .ant-input-group .ant-input-group-addon {
-    background           : var(--m-grey53);
-    /*圆角兼容性*/
-    -moz-border-radius   : 0 15px 15px 0;
-    -webkit-border-radius: 0 15px 15px 0;
-    border-radius        : 0 15px 15px 0;
-}
-
-.ant-input-search.searchFriendInput .ant-input-group .ant-input-group-addon .ant-input-search-button {
-    width                : 56px;
-    height               : 26px;
-    background           : #3A87F7;
-    padding              : 0;
-    align-self           : center;
-    align-items          : center;
-    /*圆角兼容性*/
-    -moz-border-radius   : 13px 13px 13px 13px;
-    -webkit-border-radius: 13px 13px 13px 13px;
-    border-radius        : 13px 13px 13px 13px;
-}
-
-.ant-input-search.searchFriendInput .ant-input-group .ant-input-group-addon .ant-input-search-button span {
-    width      : 100%;
-    height     : 26px;
-    line-height: 22px;
-    text-align : center;
-    color      : #ffffff;
-    font-weight: 400;
-    font-size  : 14px;
-}
-
-.ant-input-search.noSuffixInput .ant-input-group .ant-input-group-addon {
-    display: none;
-}
-
-.ant-popover.friendPopover .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
-    padding: 0;
-}
-
-.rulesCont {
-    margin-top: 10px;
-    display   : -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display   : -moz-box;
-    /* Firefox 17- */
-    display   : -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display   : -moz-flex;
-    /* Firefox 18+ */
-    display   : -ms-flexbox;
-    /* IE 10 */
-    display   : flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-    overflow-x: auto;
-    overflow-y: hidden;
-    max-width : 450px;
-}
-
-.rulesCont .ruleCol.ant-col {
-    margin-bottom: 10px;
-}
-
-.rulesCont .ant-row {
-    margin-left : 0 !important;
-    margin-right: 0 !important;
-}
-
-.rulesCont .ant-row .ant-col {
-    padding-left         : 0 !important;
-    padding-right        : 0 !important;
-    margin-bottom        : 20px;
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    display              : inline-flex;
-}
-
-.rulesCont .ant-row .ant-col .line {
-    width         : 100%;
-    display       : -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display       : -moz-box;
-    /* Firefox 17- */
-    display       : -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display       : -moz-flex;
-    /* Firefox 18+ */
-    display       : -ms-flexbox;
-    /* IE 10 */
-    display       : flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-    flex-direction: column;
-}
-
-.rulesCont .ant-row .ant-col .line .name {
-    min-width            : 120px;
-    height               : 30px;
-    line-height          : 28px;
-    background           : var(--m-blue28);
-    border               : 1px solid var(--m-black37);
-    /*圆角兼容性*/
-    -moz-border-radius   : 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius        : 3px 3px 3px 3px;
-    text-align           : center;
-    font-size            : 14px;
-    color                : var(--m-white6);
-}
-
-.rulesCont .ant-row .ant-col .line .time {
-    margin               : 6px auto 0;
-    width                : 50px;
-    height               : 28px;
-    background           : var(--m-black38);
-    /*圆角兼容性*/
-    -moz-border-radius   : 5px 5px 5px 5px;
-    -webkit-border-radius: 5px 5px 5px 5px;
-    border-radius        : 5px 5px 5px 5px;
-    color                : var(--m-blue26);
-    font-size            : 12px;
-    text-align           : center;
-}
-
-.rulesCont .ant-row .ant-col .line:nth-child(2n) .name {
-    background  : var(--m-yellow4);
-    border-color: var(--m-yellow5);
-}
-
-.rulesCont .ant-row .ant-col .line+.line {
-    margin-left: 5px;
-}
-
-.account_info_container {
-    height: calc(100% - 40px);
-}
-
-.account_info_container .a-collapse-container {
-    height  : calc(100vh - 70px);
-    overflow: auto;
-}
-
-.inputIconBox {
-    position: relative;
-    float   : left;
-    width   : 425px;
-}
-
-.inputIconBox .ant-form-item-children {
-    width  : 350px;
-    display: block;
-}
-
-.inputIconBox .ant-form-item-children .anticon {
-    width      : 15px;
-    height     : 32px;
-    line-height: 37px;
-    font-size  : 15px;
-    color      : var(--m-blue15);
-    cursor     : pointer;
-}
-
-.inputIconBox .ant-form-item-children .anticon-minus {
-    position: absolute;
-    top     : 0px;
-    left    : 9px;
-    z-index : 1;
-}
-
-.inputIconBox .ant-form-item-children .anticon-plus {
-    position: absolute;
-    top     : 0px;
-    right   : 98px;
-    z-index : 1;
-}
-
-.inputIconBox .ant-form-item-children .anticon-calendar {
-    font-size: 20px;
-    position : absolute;
-    top      : 5px;
-    right    : 13px;
-    color    : var(--m-blue15);
-}
-
-.inputIconBox .ant-form-item-children .commonInput input {
-    text-align: center;
-    color     : var(--m-yellow6);
-}
-
-.inputIconBox .ant-form-item-children .ant-checkbox-wrapper {
-    margin-left: 10px;
-    color      : var(--m-white14);
-    font-size  : 14px;
-    position   : absolute;
-    top        : 0;
-    right      : auto;
-    bottom     : auto;
-    left       : 260px;
-    white-space: nowrap;
-    line-height: 32px;
-    height     : 30px;
-}
-
-.inputIconBox .ant-form-item-children .svg-icon {
-    position : absolute;
-    top      : 6px;
-    right    : 98px;
-    color    : var(--m-blue15) !important;
-    font-size: 20px;
-}
-
-.inputIconBox .input-enumdicname {
-    right: 125px;
-}
-
-.clickBox {
-    display      : inline-block;
-    width        : 260px;
-    text-indent  : 8px;
-    border-radius: 4px;
-    line-height  : 30px;
-    color        : var(--m-grey66);
-    border       : 1px solid var(--m-grey14);
-    cursor       : pointer;
-    background   : var(--m-grey21);
-}
-
-.labelTip {
-    font-size: 14px;
-    color    : var(--m-blue16);
-    position : absolute;
-    top      : 15px;
-    left     : -66px;
-}
-
-/*滚动条样式*/
-::-webkit-scrollbar {
-    width : 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius   : 10px;
-    background-color: var(--m-grey8);
-}
-
-::-webkit-scrollbar-button {
-    background-color: var(--m-grey7);
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: var(--m-grey7);
-}
-
-::-webkit-scrollbar-corner,
-.el-input::-webkit-scrollbar-corner {
-    background-color: var(--m-grey7);
-}
-
-html {
-    font-family                : system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-    -webkit-text-size-adjust   : 100%;
-    -webkit-tap-highlight-color: #000000;
-    -webkit-font-smoothing     : antialiased;
-    -moz-osx-font-smoothing    : grayscale;
-}
-
-body {
-    margin          : 0;
-    overflow        : hidden;
-    background-color: #e9eef3;
-}
-
-.ant-layout {
-    background: var(--m-white0);
-}
-
-.ant-layout aside {
-    background: var(--m-white0);
-}
-
-.ant-layout>section header {
-    background: var(--m-white0);
-    padding   : 0;
-}
-
-.ant-layout>section main {
-    background: var(--m-white0);
-}
-
-.ant-card .ant-card-head {
-    border: none;
-}
-
-.ant-card .ant-card-head .ant-card-head-wrapper {
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.ant-card .ant-card-head .ant-card-head-wrapper .ant-card-head-title {
-    text-align : left;
-    font-size  : 16px;
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    color      : #444444;
-}
-
-.ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role='button']:hover .ant-steps-item-title,
-.ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role='button']:hover .ant-steps-item-subtitle,
-.ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role='button']:hover .ant-steps-item-description {
-    color: #1abbcf;
-}
-
-.ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)>.ant-steps-item-container[role='button']:hover .ant-steps-item-icon {
-    border-color: #1abbcf;
-}
-
-.ant-modal-title {
-    font-size  : 18px;
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    color      : #1abbcf;
-}
-
-.submit {
-    background   : #1abbcf;
-    border-radius: 3px;
-    color        : var(--m-white0);
-}
-
-.ant-btn-primary {
-    background-color: #1abbcf;
-}
-
-.ant-btn:hover,
-.ant-btn:focus,
-.ant-menu-item:hover,
-.ant-menu-item-active,
-.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
-.ant-menu-submenu-active,
-.ant-menu-submenu-title:hover,
-.ant-menu-submenu-selected,
-.ant-menu-item-selected,
-.ant-menu-item-selected>a,
-.ant-menu-item-selected>a:hover {
-    color: #1abbcf;
-}
-
-.ant-menu-vertical .ant-menu-item::after,
-.ant-menu-vertical-left .ant-menu-item::after,
-.ant-menu-vertical-right .ant-menu-item::after,
-.ant-menu-inline .ant-menu-item::after {
-    border-right: 3px solid #1abbcf;
-}
-
-.ant-checkbox-checked::after,
-.ant-checkbox-wrapper:hover .ant-checkbox-inner,
-.ant-checkbox:hover .ant-checkbox-inner,
-.ant-checkbox-input:focus+.ant-checkbox-inner,
-.ant-input-affix-wrapper:hover,
-.ant-input-affix-wrapper:focus,
-.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
-.ant-btn-primary,
-.ant-btn:hover,
-.ant-input:focus,
-.ant-input:hover,
-.ant-btn:focus,
-.ant-btn-primary,
-.ant-btn:hover,
-.ant-input:focus,
-.ant-input:hover,
-.ant-btn:focus {
-    border-color: #1abbcf;
-}
-
-.ant-input-affix-wrapper:focus,
-.ant-btn:focus {
-    box-shadow: var(--m-black19) 0px 0px 0px 2px;
-}
-
-::selection {
-    color     : var(--m-white0);
-    background: #f0f0f0;
-}
-
-.ant-modal-wrap {
-    overflow-y: scroll;
-}
-
-.theme {
-    color: #3a87f7;
-}
-
-.icon {
-    width         : 1em;
-    height        : 1em;
-    vertical-align: -0.15em;
-    fill          : currentColor;
-    overflow      : hidden;
-}
-
-.ant-spin-nested-loading>div>.ant-spin {
-    max-height: 100%;
-}
-
-.ant-spin-nested-loading {
-    width : 100%;
-    height: 100%;
-}
-
-.ant-spin-nested-loading .ant-spin-container {
-    width  : 100%;
-    height : 100%;
-    display: flex;
-}
-
-.ant-switch-checked {
-    background-color: #3a87f7;
-}
-
-.icon {
-    cursor: pointer;
-}
-
-.ant-empty {
-    height         : 100%;
-    display        : flex;
-    flex-direction : column;
-    justify-content: center;
-    align-items    : center;
-}
-
-.mt15 {
-    margin-top: 15px;
-}
-
-.mt25 {
-    margin-top: 25px;
-}
-
-.ellipsis {
-    font-size    : 12px;
-    display      : block / inline-block;
-    overflow     : hidden;
-    white-space  : nowrap;
-    text-overflow: ellipsis;
-    width        : 120px;
-    display      : inline-block;
-}
-
-.ellipsis_temp {
-    white-space  : nowrap;
-    overflow     : hidden;
-    text-overflow: ellipsis;
-    width        : 250px;
-    display      : inline-block;
-}
-
-.ant-menu-dark,
-.ant-menu-dark {
-    background-color: var(--m-grey18);
-}
-
-.ant-menu-dark .ant-menu-submenu-title,
-.ant-menu-dark .ant-menu-submenu-title {
-    font-size : 16px;
-    text-align: left;
-}
-
-.ant-menu-dark .ant-menu-sub,
-.ant-menu-dark .ant-menu-sub {
-    background-color: var(--m-black4);
-}
-
-.ant-menu-dark .ant-menu-sub .ant-menu-item,
-.ant-menu-dark .ant-menu-sub .ant-menu-item {
-    font-size  : 14px;
-    font-family: Adobe Heiti Std;
-    color      : #88A0AE;
-    text-align : left;
-}
-
-.ant-menu-dark .ant-menu-sub .ant-menu-item-selected,
-.ant-menu-dark .ant-menu-sub .ant-menu-item-selected {
-    color: var(--m-white0);
-}
-
-.ant-menu-horizontal>.ant-menu-item-active,
-.ant-menu-horizontal>.ant-menu-item-open,
-.ant-menu-horizontal>.ant-menu-item-selected,
-.ant-menu-horizontal>.ant-menu-item:hover,
-.ant-menu-horizontal>.ant-menu-submenu-active,
-.ant-menu-horizontal>.ant-menu-submenu-open,
-.ant-menu-horizontal>.ant-menu-submenu-selected,
-.ant-menu-horizontal>.ant-menu-submenu:hover {
-    color: #3a87f7;
-}
-
-.mine_layout .ant-menu .ant-menu-item-selected,
-.mine_layout .ant-menu .ant-menu-item:hover {
-    color        : #3a87f7;
-    border-bottom: 2px solid #3a87f7;
-}
-
-.pointer {
-    cursor: pointer;
-}
-
-.ant-table-wrapper .ant-table-thead tr th {
-    background : var(--m-black8);
-    color      : var(--m-grey17);
-    font-size  : 14px;
-    font-family: Adobe Heiti Std;
-}
-
-.ant-table-wrapper .ant-table-thead>tr:first-child>th:last-child,
-.ant-table-wrapper .ant-table-thead>tr:first-child>th:first-child {
-    border-radius: 0px;
-}
-
-.ant-table-wrapper .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
-    background: var(--m-blue3);
-}
-
-.ant-table-wrapper .ant-table-body tr td {
-    background-color: var(--m-black2);
-    color           : white;
-    cursor          : pointer;
-}
-
-.ant-table-wrapper .ant-table-bordered .ant-table-thead>tr>th,
-.ant-table-wrapper .ant-table-bordered .ant-table-tbody>tr>td {
-    padding     : 0;
-    height      : 34px;
-    line-height : 34px;
-    border-color: var(--m-black9);
-    font-family : Adobe Heiti Std;
-    font-size   : 16px;
-}
-
-.ant-table-wrapper .ant-table-fixed {
-    width            : max-content !important;
-    color            : var(--m-white1);
-    background       : var(--m-black2);
-    border-top-color : var(--m-black2) !important;
-    border-left-color: var(--m-black9) !important;
-}
-
-.table-height {
-    height: calc(100% - 40px);
-}
-
-.table-detail-container {
-    position: relative;
-    overflow: hidden;
-}
-
-.iframe-container {
-    height: calc(100% - 40px);
-}
-
-.iframe-container>iframe {
-    border: 0;
-    width : 100%;
-    height: 100%;
-}
-
-.up-quote-color {
-    color: var(--m-red1) !important;
-}
-
-.down-quote-color {
-    color: #1ee18c !important;
-}
-
-.not-copy {
-    user-select: none;
-}

src/assets/styles/mixin.css

@@ -1,34 +0,0 @@
-/* 定制宽高按钮 */
-.flex {
-  display: -webkit-box;
-  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-  display: -moz-box;
-  /* Firefox 17- */
-  display: -webkit-flex;
-  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-  display: -moz-flex;
-  /* Firefox 18+ */
-  display: -ms-flexbox;
-  /* IE 10 */
-  display: flex;
-  /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-.inlineflex {
-  display: -webkit-inline-box;
-  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-  display: -moz-inline-box;
-  /* Firefox 17- */
-  display: -webkit-inline-flex;
-  /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-  display: -moz-inline-flex;
-  /* Firefox 18+ */
-  display: -ms-inline-flexbox;
-  /* IE 10 */
-  display: inline-flex;
-  /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-.ellipse {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}

src/assets/styles/mixin.less

@@ -3640,6 +3640,7 @@ input:-internal-autofill-selected {
         position : relative;
         max-width: 350px;
         display  : inline-flex;
+        flex-wrap: wrap;
 
         .anticon {
             width      : 32px;
@@ -3670,7 +3671,7 @@ input:-internal-autofill-selected {
             font-size: 20px;
             position : absolute;
             top      : 5px;
-            right    : 13px;
+            right    : 11px;
             color    : @m-blue15;
         }
 
@@ -3694,7 +3695,7 @@ input:-internal-autofill-selected {
         .svg-icon {
             position : absolute;
             top      : 6px;
-            right    : 98px;
+            right    : 6px;
             color    : @m-blue15  !important;
             font-size: 20px;
         }

src/assets/styles/variables.css

@@ -1,2255 +0,0 @@
-/* 定制宽高按钮 */
-.flex {
-    display: -webkit-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display: -moz-box;
-    /* Firefox 17- */
-    display: -webkit-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display: -moz-flex;
-    /* Firefox 18+ */
-    display: -ms-flexbox;
-    /* IE 10 */
-    display: flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-
-.inlineflex {
-    display: -webkit-inline-box;
-    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-    display: -moz-inline-box;
-    /* Firefox 17- */
-    display: -webkit-inline-flex;
-    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-    display: -moz-inline-flex;
-    /* Firefox 18+ */
-    display: -ms-inline-flexbox;
-    /* IE 10 */
-    display: inline-flex;
-    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-}
-
-.ellipse {
-    white-space  : nowrap;
-    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;
-    padding              : 0 15px;
-}
-
-.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: #171A1B;
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: #171A1B;
-}
-
-::-webkit-scrollbar-corner,
-.el-input::-webkit-scrollbar-corner {
-    background-color: #171A1B;
-}

src/assets/styles/variables.less

@@ -2,72 +2,72 @@
 @import 'mixin';
 @import 'theme.less';
 
-@m-grey0: var(--m-grey0);
-@m-grey1: var(--m-grey1);
-@m-grey1-hover: var(--m-grey1-hover);
-@m-grey2:  var(--m-grey2);
-@m-grey3: #ccc;          // 登录界面颜色不变
-@m-grey4: #333333;       // 登录界面颜色不变
-@m-grey5: var(--m-grey5);
-@m-grey6: var(--m-grey6);
-@m-grey7: var(--m-grey7);  // 滚动条颜色 -- 底色
-@m-grey8: var(--m-grey8);  // 滚动条颜色 -- 滑条颜色
-@m-grey9: var(--m-grey9);       
-@m-grey10: var(--m-grey10);
-@m-grey11: var(--m-grey11);
-@m-grey12: var(--m-grey12);
+@m-grey0       : var(--m-grey0);
+@m-grey1       : var(--m-grey1);
+@m-grey1-hover : var(--m-grey1-hover);
+@m-grey2       : var(--m-grey2);
+@m-grey3       : #ccc; // 登录界面颜色不变
+@m-grey4       : #333333; // 登录界面颜色不变
+@m-grey5       : var(--m-grey5);
+@m-grey6       : var(--m-grey6);
+@m-grey7       : var(--m-grey7); // 滚动条颜色 -- 底色
+@m-grey8       : var(--m-grey8); // 滚动条颜色 -- 滑条颜色
+@m-grey9       : var(--m-grey9);
+@m-grey10      : var(--m-grey10);
+@m-grey11      : var(--m-grey11);
+@m-grey12      : var(--m-grey12);
 @m-grey12-hover: var(--m-grey12-hover);
-@m-grey13: var(--m-grey13);
+@m-grey13      : var(--m-grey13);
 @m-grey13-hover: var(--m-grey13-hover);
-@m-grey14: var(--m-grey14);
-@m-grey15: var(--m-grey15);
+@m-grey14      : var(--m-grey14);
+@m-grey15      : var(--m-grey15);
 @m-grey15-hover: var(--m-grey15-hover);
-@m-grey16: var(--m-grey16);
+@m-grey16      : var(--m-grey16);
 @m-grey16-hover: var(--m-grey16-hover);
-@m-grey17: var(--m-grey17);
-@m-grey18: var(--m-grey18);
-@m-grey19: var(--m-grey19);
-@m-grey20: var(--m-grey20);
-@m-grey21: var(--m-grey21);
-@m-grey22: var(--m-grey22);
+@m-grey17      : var(--m-grey17);
+@m-grey18      : var(--m-grey18);
+@m-grey19      : var(--m-grey19);
+@m-grey20      : var(--m-grey20);
+@m-grey21      : var(--m-grey21);
+@m-grey22      : var(--m-grey22);
 @m-grey22-hover: var(--m-grey22-hover);
-@m-grey23: var(--m-grey23);
-@m-grey24: #444444;
-@m-grey25: var(--m-grey25);
-@m-grey26: var(--m-grey26);
-@m-grey27: #34444E;
-@m-grey28: #36506B;
-@m-grey29: #4D647A;
-@m-grey30: #223548;
-@m-grey31: var(--m-grey31);
-@m-grey32: var(--m-grey32);
-@m-grey33: var(--m-grey33);
-@m-grey34: var(--m-grey34);
-@m-grey35: var(--m-grey35);
-@m-grey36: var(--m-grey36);
-@m-grey37: var(--m-grey37);
-@m-grey38: var(--m-grey38);
-@m-grey39: var(--m-grey39);
+@m-grey23      : var(--m-grey23);
+@m-grey24      : #444444;
+@m-grey25      : var(--m-grey25);
+@m-grey26      : var(--m-grey26);
+@m-grey27      : #34444E;
+@m-grey28      : #36506B;
+@m-grey29      : #4D647A;
+@m-grey30      : #223548;
+@m-grey31      : var(--m-grey31);
+@m-grey32      : var(--m-grey32);
+@m-grey33      : var(--m-grey33);
+@m-grey34      : var(--m-grey34);
+@m-grey35      : var(--m-grey35);
+@m-grey36      : var(--m-grey36);
+@m-grey37      : var(--m-grey37);
+@m-grey38      : var(--m-grey38);
+@m-grey39      : var(--m-grey39);
 @m-grey39-hover: var(--m-grey39-hover);
-@m-grey40: var(--m-grey40);
+@m-grey40      : var(--m-grey40);
 @m-grey40-hover: var(--m-grey40-hover);
-@m-grey41: var(--m-grey41);
-@m-grey42: var(--m-grey42);
-@m-grey43: var(--m-grey43);
+@m-grey41      : var(--m-grey41);
+@m-grey42      : var(--m-grey42);
+@m-grey43      : var(--m-grey43);
 @m-grey43-hover: var(--m-grey43-hover);
-@m-grey44: var(--m-grey44);
+@m-grey44      : var(--m-grey44);
 @m-grey44-hover: var(--m-grey44-hover);
-@m-grey45: var(--m-grey45);
-@m-grey46: var(--m-grey46);
-@m-grey47: var(--m-grey47);
-@m-grey48: var(--m-grey48);
-@m-grey49: var(--m-grey49);
-@m-grey50: var(--m-grey50);
-@m-grey51: var(--m-grey51);
-@m-grey52: var(--m-grey52);
-@m-grey53: var(--m-grey53);
-@m-grey54: var(--m-grey54);
-@m-grey55: var(--m-grey55);
+@m-grey45      : var(--m-grey45);
+@m-grey46      : var(--m-grey46);
+@m-grey47      : var(--m-grey47);
+@m-grey48      : var(--m-grey48);
+@m-grey49      : var(--m-grey49);
+@m-grey50      : var(--m-grey50);
+@m-grey51      : var(--m-grey51);
+@m-grey52      : var(--m-grey52);
+@m-grey53      : var(--m-grey53);
+@m-grey54      : var(--m-grey54);
+@m-grey55      : var(--m-grey55);
 
 @m-grey56: var(--m-grey56);
 @m-grey57: var(--m-grey57);
@@ -83,127 +83,127 @@
 @m-grey67: var(--m-grey67);
 @m-grey68: var(--m-grey68);
 
-@m-black: #000000;
-@m-black0: var(--m-black0);
-@m-black1: var(--m-black1);
-@m-black2: var(--m-black2);
-@m-black3: var(--m-black3);
-@m-black4: var(--m-black4);
-@m-black5: var(--m-black5);
-@m-black6: var(--m-black6);
-@m-black7: var(--m-black7);
+@m-black       : #000000;
+@m-black0      : var(--m-black0);
+@m-black1      : var(--m-black1);
+@m-black2      : var(--m-black2);
+@m-black3      : var(--m-black3);
+@m-black4      : var(--m-black4);
+@m-black5      : var(--m-black5);
+@m-black6      : var(--m-black6);
+@m-black7      : var(--m-black7);
 @m-black7-hover: var(--m-black7-hover);
-@m-black8: var(--m-black8);
-@m-black9: var(--m-black9);
-@m-black10: var(--m-black10);
-@m-black11: var(--m-black11);
-@m-black12: var(--m-black12);
-@m-black13: var(--m-black13);
-@m-black14: var(--m-black14);
-@m-black15: var(--m-black15);
-@m-black16: var(--m-black16);
-@m-black17: var(--m-black17);
-@m-black18: var(--m-black18);
-@m-black19: var(--m-black19);
-@m-black20: var(--m-black20);
-@m-black21: var(--m-black21);                // 角色详情复选框未选中背景色   白色版本等色值修改
-@m-black22: var(--m-black22);                // 交易弹窗背景色
-@m-black23: var(--m-black23);
-@m-black24: var(--m-black24);
-@m-black25: var(--m-black25);
-@m-black26: var(--m-black26);
-@m-black27: var(--m-black27);
-@m-black28: var(--m-black28);
-@m-black29: var(--m-black29);                // 角色详情复选框未选中边框色   白色版本等色值修改
-@m-black30: var(--m-black30);                // 角色详情复选框选中背景色   白色版本等色值修改
-@m-black31: var(--m-black31);
-@m-black32: var(--m-black32);
-@m-black33: var(--m-black33);
-@m-black34: var(--m-black34);
-@m-black35: var(--m-black35);
-@m-black36: var(--m-black36);
-@m-black37: var(--m-black37);
-@m-black38: var(--m-black38);
-@m-black39: var(--m-black39);
-@m-black40: var(--m-black40);
-@m-black41: var(--m-black41);
-@m-black42: var(--m-black42);
-@m-black43: var(--m-black43);
-@m-black44: var(--m-black44);
-@m-black45: var(--m-black45);
-@m-black46: var(--m-black46);
-@m-black47: var(--m-black47);
-@m-black48: var(--m-black48);
+@m-black8      : var(--m-black8);
+@m-black9      : var(--m-black9);
+@m-black10     : var(--m-black10);
+@m-black11     : var(--m-black11);
+@m-black12     : var(--m-black12);
+@m-black13     : var(--m-black13);
+@m-black14     : var(--m-black14);
+@m-black15     : var(--m-black15);
+@m-black16     : var(--m-black16);
+@m-black17     : var(--m-black17);
+@m-black18     : var(--m-black18);
+@m-black19     : var(--m-black19);
+@m-black20     : var(--m-black20);
+@m-black21     : var(--m-black21); // 角色详情复选框未选中背景色   白色版本等色值修改
+@m-black22     : var(--m-black22); // 交易弹窗背景色
+@m-black23     : var(--m-black23);
+@m-black24     : var(--m-black24);
+@m-black25     : var(--m-black25);
+@m-black26     : var(--m-black26);
+@m-black27     : var(--m-black27);
+@m-black28     : var(--m-black28);
+@m-black29     : var(--m-black29); // 角色详情复选框未选中边框色   白色版本等色值修改
+@m-black30     : var(--m-black30); // 角色详情复选框选中背景色   白色版本等色值修改
+@m-black31     : var(--m-black31);
+@m-black32     : var(--m-black32);
+@m-black33     : var(--m-black33);
+@m-black34     : var(--m-black34);
+@m-black35     : var(--m-black35);
+@m-black36     : var(--m-black36);
+@m-black37     : var(--m-black37);
+@m-black38     : var(--m-black38);
+@m-black39     : var(--m-black39);
+@m-black40     : var(--m-black40);
+@m-black41     : var(--m-black41);
+@m-black42     : var(--m-black42);
+@m-black43     : var(--m-black43);
+@m-black44     : var(--m-black44);
+@m-black45     : var(--m-black45);
+@m-black46     : var(--m-black46);
+@m-black47     : var(--m-black47);
+@m-black48     : var(--m-black48);
 
-@m-blue0: var(--m-blue0);
-@m-blue0-hover: var(--m-blue0-hover);
-@m-blue1: #4885eb;               // 登录界面色值
-@m-blue2: var(--m-blue2);
-@m-blue2-hover: var(--m-blue2-hover);
-@m-blue3: var(--m-blue3);
-@m-blue4: var(--m-blue4);
-@m-blue5: var(--m-blue5);
-@m-blue6: var(--m-blue6);
-@m-blue6-hover: var(--m-blue6-hover);
-@m-blue7: var(--m-blue7);
-@m-blue7-hover: var(--m-blue7-hover);
-@m-blue8: var(--m-blue8);
-@m-blue8-hover: var(--m-blue8-hover);
-@m-blue9: var(--m-blue9);
-@m-blue9-hover: var(--m-blue9-hover);
-@m-blue10: var(--m-blue10);
+@m-blue0       : var(--m-blue0);
+@m-blue0-hover : var(--m-blue0-hover);
+@m-blue1       : #4885eb; // 登录界面色值
+@m-blue2       : var(--m-blue2);
+@m-blue2-hover : var(--m-blue2-hover);
+@m-blue3       : var(--m-blue3);
+@m-blue4       : var(--m-blue4);
+@m-blue5       : var(--m-blue5);
+@m-blue6       : var(--m-blue6);
+@m-blue6-hover : var(--m-blue6-hover);
+@m-blue7       : var(--m-blue7);
+@m-blue7-hover : var(--m-blue7-hover);
+@m-blue8       : var(--m-blue8);
+@m-blue8-hover : var(--m-blue8-hover);
+@m-blue9       : var(--m-blue9);
+@m-blue9-hover : var(--m-blue9-hover);
+@m-blue10      : var(--m-blue10);
 @m-blue10-hover: var(--m-blue10-hover);
-@m-blue11: var(--m-blue11);
-@m-blue12: var(--m-blue12);
-@m-blue13: var(--m-blue13);                           // 白色版本买卖大厅小行情背景色
-@m-blue14: var(--m-blue14);
-@m-blue15: var(--m-blue15);
-@m-blue16: var(--m-blue16);
-@m-blue17: var(--m-blue17);
-@m-blue18: var(--m-blue18);
-@m-blue19: var(--m-blue19);
-@m-blue20: var(--m-blue20);
-@m-blue21: var(--m-blue21);
-@m-blue22: #0e2f4c;                                 // 交易界面色值
-@m-blue23: #223F7E;                                 // 履约明细界面色值
-@m-blue24: #2484FC;                                 // 履约明细界面色值
-@m-blue25: var(--m-blue25);
-@m-blue26: var(--m-blue26);
-@m-blue27: var(--m-blue27);
-@m-blue28: var(--m-blue28);
-@m-blue29: var(--m-blue29);
+@m-blue11      : var(--m-blue11);
+@m-blue12      : var(--m-blue12);
+@m-blue13      : var(--m-blue13); // 白色版本买卖大厅小行情背景色
+@m-blue14      : var(--m-blue14);
+@m-blue15      : var(--m-blue15);
+@m-blue16      : var(--m-blue16);
+@m-blue17      : var(--m-blue17);
+@m-blue18      : var(--m-blue18);
+@m-blue19      : var(--m-blue19);
+@m-blue20      : var(--m-blue20);
+@m-blue21      : var(--m-blue21);
+@m-blue22      : #0e2f4c; // 交易界面色值
+@m-blue23      : #223F7E; // 履约明细界面色值
+@m-blue24      : #2484FC; // 履约明细界面色值
+@m-blue25      : var(--m-blue25);
+@m-blue26      : var(--m-blue26);
+@m-blue27      : var(--m-blue27);
+@m-blue28      : var(--m-blue28);
+@m-blue29      : var(--m-blue29);
 @m-blue29-hover: var(--m-blue29-hover);
-@m-blue30: var(--m-blue30);
+@m-blue30      : var(--m-blue30);
 @m-blue30-hover: var(--m-blue30-hover);
-@m-blue31: var(--m-blue31);
+@m-blue31      : var(--m-blue31);
 @m-blue31-hover: var(--m-blue31-hover);
-@m-blue32: var(--m-blue32);
+@m-blue32      : var(--m-blue32);
 @m-blue32-hover: var(--m-blue32-hover);
-@m-blue33: var(--m-blue33);
-@m-blue34: var(--m-blue34);
-@m-blue35: var(--m-blue35);
-@m-blue36: var(--m-blue36);
-@m-blue37: var(--m-blue37);
-@m-blue38: var(--m-blue38);
-@m-blue39: var(--m-blue39);
+@m-blue33      : var(--m-blue33);
+@m-blue34      : var(--m-blue34);
+@m-blue35      : var(--m-blue35);
+@m-blue36      : var(--m-blue36);
+@m-blue37      : var(--m-blue37);
+@m-blue38      : var(--m-blue38);
+@m-blue39      : var(--m-blue39);
 
-@body-bg: #e9eef3;
-@m-white0: var(--m-white0);
+@body-bg       : #e9eef3;
+@m-white0      : var(--m-white0);
 @m-white0-hover: var(--m-white0-hover);
-@m-white1: var(--m-white1);
-@m-white2: rgb(240, 240, 240);
-@m-white3: rgb(54 187 207);
-@m-white4: #FEFEFE;
-@m-white5: var(--m-white5);
-@m-white6: var(--m-white6);
-@m-white7: var(--m-white7);
-@m-white8: var(--m-white8);
-@m-white9: var(--m-white9);
-@m-white10: var(--m-white10);
-@m-white11: var(--m-white11);
-@m-white12: var(--m-white12);
-@m-white13: var(--m-white13);
-@m-white14: var(--m-white14);
+@m-white1      : var(--m-white1);
+@m-white2      : rgb(240, 240, 240);
+@m-white3      : rgb(54 187 207);
+@m-white4      : #FEFEFE;
+@m-white5      : var(--m-white5);
+@m-white6      : var(--m-white6);
+@m-white7      : var(--m-white7);
+@m-white8      : var(--m-white8);
+@m-white9      : var(--m-white9);
+@m-white10     : var(--m-white10);
+@m-white11     : var(--m-white11);
+@m-white12     : var(--m-white12);
+@m-white13     : var(--m-white13);
+@m-white14     : var(--m-white14);
 
 @m-green0: var(--m-green0);
 @m-green1: var(--m-green1);
@@ -212,28 +212,28 @@
 @m-green4: #1ee18c;
 @m-green5: #42b983;
 
-@m-red0: #ff4d4f;
-@m-red0-hover: rgba(@m-red0, .8);
-@m-red1: var(--m-red1);
-@m-red1-hover: rgba(@m-red1, .8);
-@m-red2: var(--m-red2);
-@m-red3: #ff2b2f;                // 交易界面色值
-@m-red4: #2c1b1b;                // 交易界面色值
-@m-red5: #691010;                // 交易界面色值
-@m-red6: #422b0d;                // 交易界面色值
-@m-red7: #f52b2b;                // 交易界面色值
-@m-red8: #f12a2d;                // 交易界面色值
-@m-red9: #FF5C6F;
-@m-red9-hover: rgba(@m-red9, .8);
-@m-red10: #FB7F75;
+@m-red0       : #ff4d4f;
+@m-red0-hover : rgba(@m-red0, .8);
+@m-red1       : var(--m-red1);
+@m-red1-hover : rgba(@m-red1, .8);
+@m-red2       : var(--m-red2);
+@m-red3       : #ff2b2f; // 交易界面色值
+@m-red4       : #2c1b1b; // 交易界面色值
+@m-red5       : #691010; // 交易界面色值
+@m-red6       : #422b0d; // 交易界面色值
+@m-red7       : #f52b2b; // 交易界面色值
+@m-red8       : #f12a2d; // 交易界面色值
+@m-red9       : #FF5C6F;
+@m-red9-hover : rgba(@m-red9, .8);
+@m-red10      : #FB7F75;
 @m-red10-hover: rgba(@m-red10, .8);
-@m-red11: var(--m-red11);
+@m-red11      : var(--m-red11);
 
 @m-nodata: var(--m-nodata);
 
-@m-tabbg: var(--m-tabbg);
+@m-tabbg       : var(--m-tabbg);
 @m-tabbg-active: var(--m-tabbg-active);
-@m-arrowRight: var(--m-arrowRight);
+@m-arrowRight  : var(--m-arrowRight);
 
 @m-boxShadow: var(--m-boxShadow);
 
@@ -256,24 +256,24 @@
 
 /*滚动条样式*/
 ::-webkit-scrollbar {
-    width: 10px;
+    width : 10px;
     height: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
+    border-radius   : 10px;
     background-color: @m-grey8;
 }
 
 ::-webkit-scrollbar-button {
-    background-color:  @m-grey7;
+    background-color: @m-grey7;
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color:  @m-grey7;
+    background-color: @m-grey7;
 }
 
 ::-webkit-scrollbar-corner,
 .el-input::-webkit-scrollbar-corner {
-    background-color:  @m-grey7;
-}
+    background-color: @m-grey7;
+}

src/common/components/drawer/index.less

@@ -0,0 +1,195 @@
+.mtp-modal {
+    display       : flex;
+    flex-direction: column;
+    height        : 100%;
+
+    &__header {
+        padding      : 10px 0;
+        margin       : 0 16px;
+        border-bottom: 1px solid @m-black6;
+
+        .block {
+            display  : flex;
+            flex-wrap: wrap;
+
+            &-tag {
+                min-width  : 80px;
+                height     : 28px;
+                line-height: 28px;
+                background : @m-black7;
+                .rounded-corners(3px);
+                font-size : 14px;
+                color     : @m-blue0;
+                text-align: center;
+                padding   : 0 15px;
+
+                &:not(:first-child) {
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+
+    &__container {
+        flex      : 1;
+        overflow-y: auto;
+        padding   : 20px 16px 0 16px;
+
+        // 表单水平多列显示
+        &.form-row {
+            .ant-form-item {
+                width: 50%;
+
+                .ant-select,
+                .ant-input-number,
+                .ant-calendar-picker,
+                .ant-slider,
+                .clickBox {
+                    width: 140px;
+                }
+            }
+        }
+
+        // 表单垂直单列显示
+        &.form-column {
+            .ant-form {
+                flex-direction: column;
+                flex-wrap     : nowrap;
+
+                &-item {
+
+                    .ant-select,
+                    .ant-input-number,
+                    .ant-calendar-picker,
+                    .ant-slider,
+                    .clickBox {
+                        width: 100%;
+                    }
+
+                    .block-content {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+
+        .ant-form {
+            display  : flex;
+            flex-wrap: wrap;
+
+            &-item {
+                color: var(--m-grey41);
+
+                &-label {
+                    width: 100px;
+
+                    >label {
+                        color: var(--m-grey1);
+                    }
+                }
+
+                .block {
+                    display    : flex;
+                    align-items: center;
+                    flex-wrap  : wrap;
+
+                    &-content {
+                        position: relative;
+
+                        &__picker {
+                            .anticon-calendar {
+                                right     : 11px;
+                                width     : 20px;
+                                height    : 20px;
+                                font-size : 20px;
+                                color     : var(--m-blue15);
+                                margin-top: 0;
+                                transform : translateY(-50%);
+                            }
+                        }
+
+                        &__suffix {
+                            position : absolute;
+                            right    : 11px;
+                            top      : 50%;
+                            transform: translateY(-50%);
+
+                            &.svg-icon {
+                                color    : var(--m-blue15) !important;
+                                font-size: 20px;
+                            }
+                        }
+                    }
+
+                    &-after {
+                        margin-left: 8px;
+                    }
+
+                    &-slider {
+                        margin: 10px 0 20px 0;
+
+                        .ant-slider {
+                            &-step {
+                                display: none;
+                            }
+
+                            &-rail {
+                                background-color: var(--m-blue14);
+                            }
+
+                            &-track {
+                                background-color: var(--m-blue0);
+                            }
+
+                            &-mark-text {
+                                color: var(--m-grey41);
+
+                                &:first-child {
+                                    transform: none !important;
+                                }
+
+                                &:last-child {
+                                    transform: none !important;
+                                    left     : auto !important;
+                                    right    : 0;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &__footer {
+        text-align: center;
+        padding   : 20px 16px;
+
+        .ant-btn {
+            width        : 120px;
+            height       : 30px;
+            line-height  : 30px;
+            background   : linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+            border-radius: 3px;
+            color        : @m-white0;
+            font-size    : 14px;
+            text-align   : center;
+            border       : 0;
+
+            &:hover {
+                background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+                color     : @m-white0-hover;
+            }
+
+            &:not(:first-child) {
+                background : linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+                margin-left: 10px;
+
+                &:hover {
+                    background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+                    color     : @m-white0-hover;
+                }
+            }
+        }
+    }
+}

src/common/components/drawer/index.vue

@@ -10,59 +10,6 @@
         <slot></slot>
       </div>
     </div>
-
-    <div class="gpDetail" style="display: none">
-      <div class="title">挂牌详情</div>
-      <div class="content">
-        <div class="item">
-          <div class="left">交易账户</div>
-          <div class="right">3237545143</div>
-        </div>
-        <div class="item">
-          <div class="left">挂牌方式</div>
-          <div class="right">贸易圈</div>
-        </div>
-        <div class="item">
-          <div class="left">挂牌价格</div>
-          <div class="right">
-            <span>1680.00</span>
-            <span class="grey">(可议价)</span>
-          </div>
-        </div>
-        <div class="item">
-          <div class="left">现货仓单</div>
-          <div class="right">335999666555222222</div>
-        </div>
-        <div class="item">
-          <div class="left">挂牌数量</div>
-          <div class="right">
-            <span>30吨</span>
-            <span class="grey">整单</span>
-          </div>
-        </div>
-        <div class="item">
-          <div class="left">起摘数量</div>
-          <div class="right">2吨</div>
-        </div>
-        <div class="someItems">1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业</div>
-        <div class="item">
-          <div class="left">现货仓单</div>
-          <div class="right">335999666555222222</div>
-        </div>
-        <div class="item">
-          <div class="left">指定朋友</div>
-          <div class="right">1000 江**业、1201 *融、1123 南...</div>
-        </div>
-        <div class="item">
-          <div class="left">挂牌金额</div>
-          <div class="right">50400.00</div>
-        </div>
-        <div class="item">
-          <div class="left">履约保证金</div>
-          <div class="right">5040.00</div>
-        </div>
-      </div>
-    </div>
   </a-drawer>
 </template>
 
@@ -109,6 +56,7 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+@import './index.less';
 .gpDetail {
     width: 400px;
     height: 450px;
@@ -262,7 +210,7 @@ export default defineComponent({
         background: @m-black46 !important;
     }
     .ant-drawer-content-wrapper {
-        width: 650px !important;
+        width: 740px !important;
         height: 450px;
         bottom: 0;
         right: 0;

src/hooks/form/verify.ts

@@ -47,7 +47,7 @@ export const useVerifyListingNum = <T extends object, k extends keyof T>(formSta
 export const useVerifyListingBasis = <T, k extends keyof T>(formState: T, key: k) => {
     const v_basis = async (rule: RuleObject, value: number) => {
         if (formState[key]) {
-            if (value) {
+            if (typeof value === 'number') {
                 const goodsCode = getGoodsById(formState[key] as unknown as number)?.goodscode as string;
                 const quote = getQuoteDayInfoByCode(goodsCode);
                 if (quote) {
@@ -57,20 +57,23 @@ export const useVerifyListingBasis = <T, k extends keyof T>(formState: T, key: k
                     // 最大值 = 基差上限百分比 * 昨日收盘价
                     const maxValue = (basisupratio * quote.presettle).toFixed(2);
 
-                    if (value < Number(minValue)) {
-                        return Promise.reject(`基差不能小于${minValue}`);
+                    if (value >= Number(minValue) && value <= Number(maxValue)) {
+                        return Promise.resolve();
+                    } else {
+                        if (value < Number(minValue)) {
+                            return Promise.reject(`基差不能小于${minValue}`);
+                        }
+                        if (value > Number(maxValue)) {
+                            return Promise.reject(`基差不能大于${maxValue}`);
+                        }
                     }
-                    if (value > Number(maxValue)) {
-                        return Promise.reject(`基差不能大于${maxValue}`);
-                    }
-                    return Promise.resolve();
                 }
-                return Promise.reject('商品合约不存在');
+                return Promise.reject('合约不存在');
             } else {
                 return Promise.reject('请输入基差');
             }
         } else {
-            return Promise.reject('请选择商品合约');
+            return Promise.reject('请选择合约');
         }
     };
     return { v_basis }

src/layout/components/main.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, Ref, computed } from 'vue'
+import { defineComponent, inject, Ref, ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { OperationTabMenu } from '@/services/go/commonService/interface'
 import MtpTabbar from '@/@next/components/base/tabbar/index.vue'
@@ -19,6 +19,7 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const route = useRoute();
+    const routerKey = ref('default');
     const list = inject<Ref<OperationTabMenu[]>>('thirdMenuList');
     const index = inject<Ref<string[]>>('index');
 
@@ -32,22 +33,21 @@ export default defineComponent({
       }
     })
 
+    // 切换路由
+    function selectMenu(value: OperationTabMenu) {
+      router.push({ name: value.code });
+    }
+
     // 处理当路由跳转时页面不刷新的问题
     // 有两种情况判断是否刷新，1.当前标签code中不存在子路由时刷新，2.当前标签code中存在子路由时不刷新
-    const routerKey = computed(() => {
+    watch(() => route.name, (val) => {
       const currentTab = list?.value[selectedIndex.value];
       // 通过当前标签code和当前路由name做比较，如果相同说明无子路由
-      if (currentTab?.code === route.name) {
-        return route.fullPath;
+      if (currentTab?.code === val) {
+        routerKey.value = route.fullPath;
       }
-      return 'default';
     })
 
-    // 切换路由
-    function selectMenu(value: OperationTabMenu) {
-      router.push({ name: value.code });
-    }
-
     return {
       selectMenu,
       list,

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_order_summary/components/listed/index.vue

@@ -1,313 +1,149 @@
 <template>
-    <!-- 预售仓单 现货明细 挂牌 -->
-    <Drawer
-        :title="'挂牌'"
-        :placement="'right'"
-        class="delistingBottom650"
-        :visible="visible"
-        @cancel="cancel"
-    >
-        <div class="listed">
-            <div class="condition">
-                <a-button class="conditionBtn">{{ selectedRow.deliverygoodsname }}</a-button>
-                <a-button class="conditionBtn">{{ selectedRow.wrtypename }}</a-button>
-                <a-button class="conditionBtn">{{ selectedRow.warehousename }}</a-button>
+  <!-- 预售仓单 现货明细 挂牌 -->
+  <Drawer class="delistingBottom650" title="挂牌" placement="right" :visible="visible" @cancel="cancel">
+    <div class="mtp-modal">
+      <div class="mtp-modal__header">
+        <div class="block">
+          <span class="block-tag">{{ selectedRow.deliverygoodsname }}</span>
+          <span class="block-tag">{{ selectedRow.wrtypename }}</span>
+          <span class="block-tag">{{ selectedRow.warehousename }}</span>
+        </div>
+      </div>
+      <div class="mtp-modal__container form-row">
+        <a-form ref="formRef" :model="formState" :rules="rules">
+          <a-form-item label="挂牌方式" name="WRPriceType">
+            <a-select class="inlineFormSelect" default-value="1" v-model:value="formState.WRPriceType" style="width: 140px">
+              <a-select-option :value="1">一口价</a-select-option>
+              <a-select-option :value="2">浮动价</a-select-option>
+              <a-select-option :value="3">贸易圈</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item ref="FixedPrice" label="挂牌价格" name="FixedPrice" :autoLink="false" v-if="isFixed() || isBlocs()">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input dialogInput" :min="0" v-model:value="formState.FixedPrice" @blur="() => $refs.FixedPrice.onFieldBlur()" />
+              </div>
+              <div class="block-after" v-if="isBlocs()">
+                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
+              </div>
             </div>
-
-            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
-                <div class="formBar">
-                    <a-row :gutter="24">
-                        <a-col :span="12">
-                            <a-form-item label="挂牌方式" name="WRPriceType">
-                                <a-select
-                                    class="inlineFormSelect"
-                                    default-value="1"
-                                    v-model:value="formState.WRPriceType"
-                                    style="width: 140px"
-                                >
-                                    <a-select-option :value="1">一口价</a-select-option>
-                                    <a-select-option :value="2">浮动价</a-select-option>
-                                    <a-select-option :value="3">贸易圈</a-select-option>
-                                </a-select>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12" v-if="isFixed()">
-                            <a-form-item label="挂牌价" name="FixedPrice">
-                                <a-input-number
-                                    class="dialogInput"
-                                    :min="0"
-                                    style="width: 140px"
-                                    v-model:value="formState.FixedPrice"
-                                    placeholder="请输入挂牌价"
-                                />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12" v-if="isBlocs()">
-                            <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
-                                <a-input-number
-                                    class="commonInput"
-                                    style="width: 140px"
-                                    :min="0"
-                                    v-model:value="formState.FixedPrice"
-                                />
-                                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12" v-if="isFloat()">
-                            <a-form-item label="基差" name="PriceMove">
-                                <a-input-number
-                                    class="commonInput"
-                                    v-model:value="formState.PriceMove"
-                                    style="width: 140px"
-                                />
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                    <a-row :gutter="24">
-                        <a-col :span="12">
-                            <a-form-item label="挂牌数量" name="OrderQty">
-                                <a-input-number
-                                    class="dialogInput"
-                                    style="width: 140px !important"
-                                    :min="0"
-                                    v-model:value="formState.OrderQty"
-                                    placeholder="请输入挂牌数量"
-                                />
-                                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
-                                <a-checkbox
-                                    class="commonCheckbox"
-                                    v-if="isBlocs()"
-                                    v-model:checked="numCheck"
-                                >整单</a-checkbox>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12" v-if="!numCheck">
-                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
-                                <a-input-number
-                                    class="commonInput"
-                                    :min="0"
-                                    v-model:value="formState.DelistMinQty"
-                                    style="width: 140px !important"
-                                />
-                                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
-                                <div class="tip">
-                                    <span>最小单位：</span>
-                                    <span>{{ selectedRow.minivalue }}{{ selectedRow.enumdicname }}</span>
-                                </div>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                    <a-row :gutter="24">
-                        <a-col :span="12" class="mt-20">
-                            <a-form-item>
-                                <a-slider
-                                    v-model:value="formState.OrderQty"
-                                    :min="0"
-                                    :max="selectedRow.enableqty"
-                                    class="formSlider"
-                                    style="width: 140px"
-                                />
-                                <div class="unit">
-                                    <span>0</span>
-                                    <span>{{ selectedRow.enableqty }}{{ selectedRow.enumdicname }}</span>
-                                </div>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">&nbsp;</a-col>
-                    </a-row>
-                    <a-row :gutter="24">
-                        <a-col :span="12">
-                            <a-form-item label="交收月" name="DeliveryMonth">
-                                <a-month-picker
-                                    style="width: 140px"
-                                    v-model:value="formState.DeliveryMonth"
-                                    :allowClear="false"
-                                    class="commonDatePicker dialogDatePicker"
-                                />
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="12">
-                            <a-form-item>&nbsp;</a-form-item>
-                        </a-col>
-                    </a-row>
-                    <template v-if="isBlocs()">
-                        <a-row :gutter="24">
-                            <a-col :span="12">
-                                <a-form-item label="履约保证金" name="margin">
-                                    <a-input-number
-                                        class="commonInput"
-                                        v-model:value="formState.margin"
-                                        :min="0"
-                                        style="width: 140px"
-                                    />
-                                    <span class="input-enumdicname">%</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="12">
-                                <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
-                                    <a-date-picker
-                                        style="width: 140px"
-                                        v-model:value="formState.vidaliteTime"
-                                        :allowClear="false"
-                                        class="commonDatePicker dialogDatePicker"
-                                    />
-                                </a-form-item>
-                            </a-col>
-                        </a-row>
-                        <a-row :gutter="24">
-                            <a-col :span="12">
-                                <a-form-item label="履约方式" class="inputIconBox">
-                                    <span
-                                        :class="['clickBox', formState.permanceTempName ? 'white' : '']"
-                                        style="width: 140px"
-                                        @click="openPermance"
-                                    >{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
-                                    <svg
-                                        class="icon svg-icon"
-                                        aria-hidden="true"
-                                        @click="openPermance"
-                                    >
-                                        <use xlink:href="#icon-moban" />
-                                    </svg>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="12">
-                                <a-form-item label="指定朋友" class="inputIconBox">
-                                    <span
-                                        :class="['clickBox', getFriendLength() ? 'white' : '']"
-                                        style="width: 140px"
-                                        @click="openFriend"
-                                    >{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
-                                    <svg
-                                        class="icon svg-icon"
-                                        aria-hidden="true"
-                                        @click="openFriend"
-                                    >
-                                        <use xlink:href="#icon-pengyou1" />
-                                    </svg>
-                                    <a-checkbox
-                                        class="commonCheckbox"
-                                        v-model:checked="friendCheck"
-                                        @change="limiteFriends"
-                                    >不限</a-checkbox>
-                                </a-form-item>
-                            </a-col>
-                        </a-row>
-                    </template>
-                    <a-row :gutter="24" v-if="isFloat()">
-                        <a-col :span="24">
-                            <a-form-item label="行情商品" name="goodsid">
-                                <!-- <a-select class="inlineFormSelect"
+          </a-form-item>
+          <a-form-item label="行情商品" name="goodsid" v-if="isFloat()" style="width:100%">
+            <!-- <a-select class="inlineFormSelect"
                           style="width: 135px"
                           placeholder="请择交易所">
-                                </a-select>-->
-                                <a-select
-                                    class="inlineFormSelect ml5"
-                                    @change="handleGoodsGroups"
-                                    style="width: 135px"
-                                    v-model:value="formState.goodsgroupid"
-                                    placeholder="请选择商品"
-                                >
-                                    <a-select-option
-                                        v-for="item in goodsGroup"
-                                        :value="item.goodsgroupid"
-                                        :key="item.goodsgroupid"
-                                    >{{ item.goodsgroupname }}</a-select-option>
-                                </a-select>
-                                <a-select
-                                    class="inlineFormSelect ml5"
-                                    style="width: 135px"
-                                    @change="handleGoodsChange"
-                                    v-model:value="formState.goodsid"
-                                    placeholder="请选择合约"
-                                >
-                                    <a-select-option
-                                        v-for="item in goodsList"
-                                        :value="item.goodsid"
-                                        :key="item.goodsid"
-                                    >{{ item.goodsname }}</a-select-option>
-                                </a-select>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                    <a-row :gutter="24">
-                        <a-col :span="24" v-if="isFloat()" class="relative">
-                            <a-form-item :label="'估算价'">
-                                <span class="white ml8">{{ getPrice() }}</span>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                    <a-row :gutter="24">
-                        <a-col :span="24" v-if="isFloat()" class="relative">
-                            <a-form-item :label="'估算金额'">
-                                <span class="white ml8">{{ getWrMoney() }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24" v-if="isFixed()" class="relative">
-                            <a-form-item :label="'挂牌金额'">
-                                <span class="white ml8">{{ getWrMoney() }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24" v-if="isBlocs()" class="relative">
-                            <a-form-item :label="'挂牌金额'">
-                                <span class="white ml8">{{ getMoney() }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24" v-if="getWrMargin() && !isBlocs()">
-                            <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
-                                <span class="white ml8">{{ getWrMargin() }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24" v-if="isBlocs()">
-                            <a-form-item label="履约保证金">
-                                <span class="white ml8">{{ getMargin() }}</span>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="可用资金">
-                                <span
-                                    class="white ml8"
-                                >{{ getCanUseMoney(handleSelectedAccount()) }}</span>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
+                </a-select>-->
+            <a-select class="inlineFormSelect" @change="handleGoodsGroups" style="width: 180px" v-model:value="formState.goodsgroupid" placeholder="请选择商品">
+              <a-select-option v-for="item in goodsGroup" :value="item.goodsgroupid" :key="item.goodsgroupid">{{ item.goodsgroupname }}</a-select-option>
+            </a-select>
+            <a-select class="inlineFormSelect" style="width: 180px;margin-left: 5px" @change="handleGoodsChange" v-model:value="formState.goodsid" placeholder="请选择合约">
+              <a-select-option v-for="item in goodsList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item ref="OrderQty" label="挂牌数量" name="OrderQty" :autoLink="false">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input dialogInput" :min="0" v-model:value="formState.OrderQty" @blur="() => $refs.OrderQty.onFieldBlur()" />
+                <span class="block-content__suffix">{{ selectedRow.enumdicname }}</span>
+              </div>
+              <div class="block-after">
+                <a-checkbox class="block-content__checkbox commonCheckbox" v-if="isBlocs()" v-model:checked="numCheck">整单</a-checkbox>
+              </div>
+            </div>
+            <div class="block" v-if="Number.isInteger(formState.OrderQty)">
+              <a-slider class="block-slider" :min="0" :max="selectedRow.enalbeqty" :marks="{ 0: '0', [selectedRow.enalbeqty]: selectedRow.enalbeqty + selectedRow.enumdicname }" v-model:value="formState.OrderQty" @afterChange="() => $refs.OrderQty.onFieldBlur()" />
+            </div>
+          </a-form-item>
+          <a-form-item ref="DelistMinQty" label="起摘数量" name="DelistMinQty" :autoLink="false" v-if="!numCheck">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input commonInput" :min="0" v-model:value="formState.DelistMinQty" @blur="() => $refs.DelistMinQty.onFieldBlur()" />
+                <span class="block-content__suffix">{{ selectedRow.enumdicname }}</span>
+              </div>
+            </div>
+            <div class="block">
+              <div class="block-tip">最小单位：{{ selectedRow.minivalue }}{{ selectedRow.enumdicname }}</div>
+            </div>
+          </a-form-item>
+          <a-form-item label="交收月" name="DeliveryMonth">
+            <a-month-picker class="block-content__picker commonDatePicker" v-model:value="formState.DeliveryMonth" :allowClear="false" />
+          </a-form-item>
+          <template v-if="isBlocs()">
+            <a-form-item ref="margin" label="履约保证金" name="margin" :autoLink="false">
+              <div class="block">
+                <div class="block-content">
+                  <a-input-number class="block-content__input commonInput" v-model:value="formState.margin" :min="0" @blur="() => $refs.margin.onFieldBlur()" />
+                  <span class="block-content__suffix">%</span>
                 </div>
-                <a-row :gutter="24">
-                    <a-col :span="24" class="fixedBtns">
-                        <a-form-item class="btnCenter">
-                            <a-button
-                                class="listedBtn"
-                                :loading="loading"
-                                :disabled="loading"
-                                @click="submit"
-                            >卖出</a-button>
-                            <a-button
-                                class="ml10 cancelBtn"
-                                :loading="loading"
-                                :disabled="loading"
-                                @click="cancel"
-                            >取消</a-button>
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
-        </div>
-    </Drawer>
-    <!-- 选择朋友 -->
-    <Friend
-        v-if="showFriend"
-        :friends="formState.friends"
-        :position="'bottom'"
-        @cancel="chooseFriend"
-        @update="chooseFriend"
-    />
-    <!-- 选择履约模板 -->
-    <Permance
-        v-if="showPermance"
-        :position="'bottom'"
-        @cancel="choosePermance"
-        @update="choosePermance"
-    />
+              </div>
+            </a-form-item>
+            <a-form-item label="挂牌有效期" name="vidaliteTime">
+              <a-date-picker class="block-content__picker commonDatePicker" v-model:value="formState.vidaliteTime" :allowClear="false" />
+            </a-form-item>
+          </template>
+          <a-form-item label="履约模板" required>
+            <div class="block">
+              <div class="block-content">
+                <span :class="['clickBox', formState.permanceTempName ? 'white' : '']" @click="openPermance">{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
+                <svg class="block-content__suffix icon svg-icon" aria-hidden="true" @click="openPermance">
+                  <use xlink:href="#icon-moban" />
+                </svg>
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item label="指定朋友" v-if="isBlocs()">
+            <div class="block">
+              <div class="block-content">
+                <span :class="['clickBox', getFriendLength() ? 'white' : '']" @click="openFriend">{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
+                <svg class="block-content__suffix icon svg-icon" aria-hidden="true" @click="openFriend">
+                  <use xlink:href="#icon-pengyou1" />
+                </svg>
+              </div>
+              <div class="block-after">
+                <a-checkbox class="commonCheckbox" v-model:checked="friendCheck" @change="limiteFriends">不限</a-checkbox>
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item ref="PriceMove" label="基差" name="PriceMove" :autoLink="false" v-if="isFloat()">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input commonInput" v-model:value="formState.PriceMove" @blur="() => $refs.PriceMove.onFieldBlur()" />
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item label="估算价" style="width:100%" v-if="isFloat()">
+            <span class="white ml8">{{ getPrice() }}</span>
+          </a-form-item>
+          <a-form-item label="估算金额" style="width:100%" v-if="isFloat()">
+            <span class="white ml8">{{ getWrMoney() }}</span>
+          </a-form-item>
+          <a-form-item label="挂牌金额" style="width:100%" v-if="isFixed()">
+            <span class="white ml8">{{ getWrMoney() }}</span>
+          </a-form-item>
+          <a-form-item label="挂牌金额" style="width:100%" v-if="isBlocs()">
+            <span class="white ml8">{{ getMoney() }}</span>
+          </a-form-item>
+          <a-form-item label="履约保证金" style="width:100%" v-if="isBlocs()">
+            <span class="white ml8">{{ getMargin() }}</span>
+          </a-form-item>
+          <a-form-item label="履约保证金" style="width:100%" v-else-if="getWrMargin()">
+            <span class="white ml8">{{ getWrMargin() }}</span>
+          </a-form-item>
+          <a-form-item label="可用资金" style="width:100%">
+            <span class="white ml8">{{ getCanUseMoney(handleSelectedAccount()) }}</span>
+          </a-form-item>
+        </a-form>
+      </div>
+      <div class="mtp-modal__footer">
+        <a-button :loading="loading" :disabled="loading" @click="submit">卖出</a-button>
+        <a-button :loading="loading" :disabled="loading" @click="cancel">取消</a-button>
+      </div>
+    </div>
+  </Drawer>
+  <!-- 选择朋友 -->
+  <Friend v-if="showFriend" :friends="formState.friends" :position="'bottom'" @cancel="chooseFriend" @update="chooseFriend" />
+  <!-- 选择履约模板 -->
+  <Permance v-if="showPermance" :position="'bottom'" @cancel="choosePermance" @update="choosePermance" />
 </template>
 
 <script lang="ts">
@@ -338,346 +174,195 @@ import { ListingForm } from './interface';
 import { handleForm, handleGoods, handleNumAndPrice } from './setup';
 
 export default defineComponent({
-    name: ModalEnum.spot_warrant_spot_details_listed,
-    components: { Drawer, Friend, Permance },
-    emits: ['cancel', 'update'],
-    props: {
-        selectedRow: {
-            type: Object as PropType<WrPosition>,
-            default: {},
-        },
+  name: ModalEnum.spot_warrant_spot_details_listed,
+  components: { Drawer, Friend, Permance },
+  emits: ['cancel', 'update'],
+  props: {
+    selectedRow: {
+      type: Object as PropType<WrPosition>,
+      default: {},
     },
-    setup(props, context) {
-        const loading = ref<boolean>(false);
-        const { visible, cancel } = _closeModal(context);
-        const { rules, formState, formRef } = handleForm(props.selectedRow);
-
-        // 选择朋友
-        const { friendCheck, showFriend, chooseFriend, openFriend, getFriendLength, limiteFriends } = useBlocksFriends(formState);
-        // 履约模板
-        const { showPermance, choosePermance, openPermance } = useBlocksPermaceTemp(formState);
-        // 价格
-        const { priceCheck, increasePrice, decreasePrice } = useBlocksPrice(formState);
-        // 摘牌数量
-        const { numCheck, increaseNumber, decreaseNumber } = useBlocksNumber(formState);
+  },
+  setup(props, context) {
+    const loading = ref<boolean>(false);
+    const { visible, cancel } = _closeModal(context);
+    const { rules, formState, formRef } = handleForm(props.selectedRow);
 
-        const { goodsGroup, goodsList, groupsChange, findGoodsCode } = handleGoods();
-        // 切换商品组
-        function handleGoodsGroups(value: number) {
-            groupsChange(value);
-            formRef.value.validate();
-        }
-        const uuid = v4();
-        const goodsCode = ref<string>('');
-        // 切换商品
-        function handleGoodsChange(id: number) {
-            //行情订阅
-            removeSubscribeQuotation(uuid);
-            goodsCode.value = goodsList.value.find((e) => e.goodsid === id)?.goodscode as string;
-            const arr = [{ exchangeCode: 250, goodsCode: goodsCode.value, subState: 0 }];
-            addSubscribeQuotation(uuid, arr);
-            formRef.value.validate();
-        }
-        // 估算价
-        // 估算价
-        function getPrice() {
-            let result = '--';
-            if (goodsCode.value) {
-                const goodsPrice = getQuoteDayInfoByCodeFindPrice(goodsCode.value);
-                if (goodsPrice && goodsPrice !== '--') {
-                    // 有实时行情价格
-                    result = ((goodsPrice as number) + formState.PriceMove).toFixed(2);
-                }
-            }
+    // 选择朋友
+    const { friendCheck, showFriend, chooseFriend, openFriend, getFriendLength, limiteFriends } = useBlocksFriends(formState);
+    // 履约模板
+    const { showPermance, choosePermance, openPermance } = useBlocksPermaceTemp(formState);
+    // 价格
+    const { priceCheck, increasePrice, decreasePrice } = useBlocksPrice(formState);
+    // 摘牌数量
+    const { numCheck, increaseNumber, decreaseNumber } = useBlocksNumber(formState);
 
-            return result;
-        }
-        onBeforeUnmount(() => {
-            removeSubscribeQuotation(uuid);
-        });
-        const { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs } = handleNumAndPrice();
-        // 处理内部资金账号
-        function handleSelectedAccount() {
-            const item = getSelectedAccount();
-            const list = getAccountTypeList([2]);
-            return item.taaccounttype === 2 ? item : list[0];
-        }
-        function submit() {
-            const marketInfo = getMarketRunByTradeMode(17);
-            if (marketInfo) {
-                // 无仓单挂牌
-                validateAction<ListingForm>(formRef, formState).then((res) => {
-                    const wrGoodsInfo: WRGoodsInfo = {
-                        GoodsID: props.selectedRow.deliverygoodsid as number, // uint32 配置商品ID
-                        GoodsCode: findGoodsCode(res.goodsid as number) as string, // string 配置商品代码
-                        PriceFactor: 1, // double 商品价格系数
-                        PriceMove: 0, // double 商品升贴水值
-                        WeightRatio: 1, // double 商品重量系数
-                    };
-                    const param = {
-                        AccountID: getInTaAccount(),
-                        ClientSerialNo: uuidv4(), // 客户端流水号
-                        // OperateSrc: 2,
-                        ClientType: 4,
-                        // MarketID: 17201,
-                        LadingBillId: props.selectedRow.ladingbillid ? props.selectedRow.ladingbillid : 0, // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
-                        // LadingBillId: 'uint642081626946446000001', // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
-                        TradeDate: moment(marketInfo.tradedate).format('YYYYMMDD'), // 交易日 string
-                        // SubNum: '0', // 提单子单号
-                        SubNum: props.selectedRow.subnum ? props.selectedRow.subnum : 0,
-                        // WRFactorTypeId: '2121626946446000001', // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
-                        WRFactorTypeId: props.selectedRow.wrfactortypeid, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
-                        IsSpecified: 0, // 是否指定对手 0：不指定 1：指定 uint32
-                        MatchAccIDs: [], // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
-                        OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
-                        DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID
-                        WRPriceType: res.WRPriceType, // 价格方式 1：固定价 2：浮动价
-                        FixedPrice: res.FixedPrice, // 固定价格
-                        PriceFactor: 1, // 价格系数(浮动价时填写)
-                        PriceMove: res.PriceMove, // 升贴水(浮动价时填写)
-                        TimevalidType: 4, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
-                        // ValidTime: moment('2021-08-25 00:00:00').format('YYYY-MM-DD HH:mm:ss'), // 有效期限
-                        ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
-                        FirstRatio: 0, // 首付比例
-                        PerformanceTemplateID: res.permaceTempId, // 履约计划模板ID
-                        UserID: getUserId(),
-                        OperatorID: getUserId(), // 操作员账号ID
-                        BuyOrSell: BuyOrSell.sell, // 买卖方向 0买1卖
-                        PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
-                        CanBargain: priceCheck.value ? 1 : 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
-                        Attachment1: '', // 附件1
-                        Attachment2: '', // 附件2
-                        Remark: '', // 备注
-                        ApplyID: 0, // 申请ID
-                        CanPart: numCheck.value ? 0 : 1, // 是否允许部份摘牌0:不允许;1:允许
-                        WRTradeGoods: [wrGoodsInfo],
-                        wrstandardid: props.selectedRow.wrstandardid,
-                        DeliveryMonth: moment(res.DeliveryMonth).format('YYYY-MM'), // string 交收月
-                        HasWr: 0, // 0 无仓单  1： 有仓单
-                        MarginFlag: 0,
-                        DelistMinQty: res.DelistMinQty, // 起摘数量
-                    };
-                    if (isBlocs()) {
-                        // 贸易圈 是后加的， 处理贸易圈
-                        if (!formState.permanceTempName) {
-                            message.error('请选择履约模板');
-                            return;
-                        }
-                        if (!friendCheck.value) {
-                            if (formState.friends.length === 0) {
-                                message.error('请选择朋友');
-                                return;
-                            }
-                        }
-                        const obj = {
-                            IsSpecified: 1,
-                            MatchAccIDs: res.friends,
-                            WRPriceType: 1,
-                            TimevalidType: 3, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
-                            MarginFlag: 1, // 挂牌是否指定保证金 0:否 1:是
-                            MarginAlgorithm: 1, // 指定保证金方式 1:比率 2:固定
-                            ValidTime: moment(res.vidaliteTime).format('YYYY-MM-DD HH:mm:ss'), // 有效期限
-                            MarginValue: +(formState.margin / 100).toFixed(2), // 指定保证金设置值
-                            AllFriendsFlag: friendCheck.value ? 1 : 0, //是否全好友可见 0：否 1:是
-                        };
-                        Object.assign(param, obj);
-                    }
-                    requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
-                        Bus.$emit('spotTrade', true);
-                        cancel(true);
-                    });
-                });
-            }
+    const { goodsGroup, goodsList, groupsChange, findGoodsCode } = handleGoods();
+    // 切换商品组
+    function handleGoodsGroups(value: number) {
+      groupsChange(value);
+      formRef.value.validate();
+    }
+    const uuid = v4();
+    const goodsCode = ref<string>('');
+    // 切换商品
+    function handleGoodsChange(id: number) {
+      //行情订阅
+      removeSubscribeQuotation(uuid);
+      goodsCode.value = goodsList.value.find((e) => e.goodsid === id)?.goodscode as string;
+      const arr = [{ exchangeCode: 250, goodsCode: goodsCode.value, subState: 0 }];
+      addSubscribeQuotation(uuid, arr);
+      formRef.value.validate();
+    }
+    // 估算价
+    // 估算价
+    function getPrice() {
+      let result = '--';
+      if (goodsCode.value) {
+        const goodsPrice = getQuoteDayInfoByCodeFindPrice(goodsCode.value);
+        if (goodsPrice && goodsPrice !== '--') {
+          // 有实时行情价格
+          result = ((goodsPrice as number) + formState.PriceMove).toFixed(2);
         }
+      }
 
-        return {
-            submit,
-            visible,
-            cancel,
-            loading,
-            rules,
-            formState,
-            formRef,
-            goodsGroup,
-            goodsList,
-            handleGoodsGroups,
-            handleGoodsChange,
-            getWrMoney,
-            getWrMargin,
-            isFloat,
-            isFixed,
-            isBlocs,
-            getCanUseMoney,
-            priceCheck,
-            increasePrice,
-            decreasePrice,
-            ...useBlocksAccount(formState),
-            ...useBlocksMoney(formState),
-            showPermance,
-            choosePermance,
-            openPermance,
-            numCheck,
-            increaseNumber,
-            decreaseNumber,
-            friendCheck,
-            showFriend,
-            chooseFriend,
-            openFriend,
-            getFriendLength,
-            limiteFriends,
-            getPrice,
-        };
-    },
-});
-</script>
-
-<style lang="less" scoped>
-.inputIconBox .input-enumdicname {
-    right: 100px;
-}
-.ant-form.inlineForm .relative.ant-form-item .tip {
-    top: -5px;
-    left: calc(100% + 5px);
-    white-space: normal;
-    span {
-        display: block;
-        line-height: 15px;
+      return result;
     }
-}
-.listed {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    overflow: hidden;
-    .condition {
-        width: calc(100% - 32px);
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
-            }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
-        }
+    onBeforeUnmount(() => {
+      removeSubscribeQuotation(uuid);
+    });
+    const { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs } = handleNumAndPrice();
+    // 处理内部资金账号
+    function handleSelectedAccount() {
+      const item = getSelectedAccount();
+      const list = getAccountTypeList([2]);
+      return item.taaccounttype === 2 ? item : list[0];
     }
-    /deep/.ant-form {
-        .formBar {
-            height: calc(100% - 98px);
-            .clickBox {
-                height: 30px;
+    function submit() {
+      const marketInfo = getMarketRunByTradeMode(17);
+      if (marketInfo) {
+        // 无仓单挂牌
+        validateAction<ListingForm>(formRef, formState).then((res) => {
+          const wrGoodsInfo: WRGoodsInfo = {
+            GoodsID: props.selectedRow.deliverygoodsid as number, // uint32 配置商品ID
+            GoodsCode: findGoodsCode(res.goodsid as number) as string, // string 配置商品代码
+            PriceFactor: 1, // double 商品价格系数
+            PriceMove: 0, // double 商品升贴水值
+            WeightRatio: 1, // double 商品重量系数
+          };
+          const param = {
+            AccountID: getInTaAccount(),
+            ClientSerialNo: uuidv4(), // 客户端流水号
+            // OperateSrc: 2,
+            ClientType: 4,
+            // MarketID: 17201,
+            LadingBillId: props.selectedRow.ladingbillid ? props.selectedRow.ladingbillid : 0, // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
+            // LadingBillId: 'uint642081626946446000001', // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
+            TradeDate: moment(marketInfo.tradedate).format('YYYYMMDD'), // 交易日 string
+            // SubNum: '0', // 提单子单号
+            SubNum: props.selectedRow.subnum ? props.selectedRow.subnum : 0,
+            // WRFactorTypeId: '2121626946446000001', // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
+            WRFactorTypeId: props.selectedRow.wrfactortypeid, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
+            IsSpecified: 0, // 是否指定对手 0：不指定 1：指定 uint32
+            MatchAccIDs: [], // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
+            OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
+            DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID
+            WRPriceType: res.WRPriceType, // 价格方式 1：固定价 2：浮动价
+            FixedPrice: res.FixedPrice, // 固定价格
+            PriceFactor: 1, // 价格系数(浮动价时填写)
+            PriceMove: res.PriceMove, // 升贴水(浮动价时填写)
+            TimevalidType: 4, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
+            // ValidTime: moment('2021-08-25 00:00:00').format('YYYY-MM-DD HH:mm:ss'), // 有效期限
+            ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+            FirstRatio: 0, // 首付比例
+            PerformanceTemplateID: res.permaceTempId, // 履约计划模板ID
+            UserID: getUserId(),
+            OperatorID: getUserId(), // 操作员账号ID
+            BuyOrSell: BuyOrSell.sell, // 买卖方向 0买1卖
+            PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
+            CanBargain: priceCheck.value ? 1 : 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
+            Attachment1: '', // 附件1
+            Attachment2: '', // 附件2
+            Remark: '', // 备注
+            ApplyID: 0, // 申请ID
+            CanPart: numCheck.value ? 0 : 1, // 是否允许部份摘牌0:不允许;1:允许
+            WRTradeGoods: [wrGoodsInfo],
+            wrstandardid: props.selectedRow.wrstandardid,
+            DeliveryMonth: moment(res.DeliveryMonth).format('YYYY-MM'), // string 交收月
+            HasWr: 0, // 0 无仓单  1： 有仓单
+            MarginFlag: 0,
+            DelistMinQty: res.DelistMinQty, // 起摘数量
+          };
+          if (isBlocs()) {
+            // 贸易圈 是后加的， 处理贸易圈
+            if (!formState.permanceTempName) {
+              message.error('请选择履约模板');
+              return;
             }
-            .ant-row.inputIconBox.ant-form-item {
-                .ant-col.ant-form-item-control-wrapper {
-                    .ant-form-item-control {
-                        .ant-form-item-children {
-                            width: 232px;
-                            .ant-checkbox-wrapper.commonCheckbox {
-                                left: 140px;
-                                .ant-checkbox {
-                                    margin-right: 0;
-                                }
-                            }
-                        }
-                    }
-                }
+            if (!friendCheck.value) {
+              if (formState.friends.length === 0) {
+                message.error('请选择朋友');
+                return;
+              }
             }
-        }
+            const obj = {
+              IsSpecified: 1,
+              MatchAccIDs: res.friends,
+              WRPriceType: 1,
+              TimevalidType: 3, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
+              MarginFlag: 1, // 挂牌是否指定保证金 0:否 1:是
+              MarginAlgorithm: 1, // 指定保证金方式 1:比率 2:固定
+              ValidTime: moment(res.vidaliteTime).format('YYYY-MM-DD HH:mm:ss'), // 有效期限
+              MarginValue: +(formState.margin / 100).toFixed(2), // 指定保证金设置值
+              AllFriendsFlag: friendCheck.value ? 1 : 0, //是否全好友可见 0：否 1:是
+            };
+            Object.assign(param, obj);
+          }
+          requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
+            Bus.$emit('spotTrade', true);
+            cancel(true);
+          });
+        });
+      }
     }
-}
-.mt-20 {
-    margin-top: -20px;
-}
-::v-deep.ant-slider.formSlider {
-    width: 140px;
-    // height: 3px;
-    // .rounded-corners(2px);
-    margin-left: 70px;
-    .ant-slider-rail {
-        margin-right: 0;
-        padding-right: 0;
-        height: 3px !important;
-        border-radius: 2px !important;
-        background-color: @m-blue14;
-        // .ant-slider-track {
-        //     background: @m-grey14;
-        //     .rounded-corners(2px);
-        //     .ant-progress-bg {
 
-        //     }
-        // }
-    }
-    .ant-slider-track {
-        height: 3px;
-        background-color: @m-blue0;
-    }
-    .ant-slider-step {
-        height: 3px;
-    }
-    .ant-progress-text {
-        display: none;
-    }
-}
-.unit {
-    margin-left: 70px;
-    width: 140px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
-}
-.listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(
-            0deg,
-            @m-blue0-hover 0%,
-            @m-blue2-hover 100%
-        );
-        color: @m-white0-hover;
-    }
-}
-.cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
-    &:hover {
-        background: linear-gradient(
-            0deg,
-            @m-grey12-hover 0%,
-            @m-grey13-hover 100%
-        );
-        color: @m-white0-hover;
-    }
-}
-.ml10 {
-    margin-left: 10px;
-}
-.ml5 {
-    margin-left: 5px;
-}
-</style>
+    return {
+      submit,
+      visible,
+      cancel,
+      loading,
+      rules,
+      formState,
+      formRef,
+      goodsGroup,
+      goodsList,
+      handleGoodsGroups,
+      handleGoodsChange,
+      getWrMoney,
+      getWrMargin,
+      isFloat,
+      isFixed,
+      isBlocs,
+      getCanUseMoney,
+      priceCheck,
+      increasePrice,
+      decreasePrice,
+      ...useBlocksAccount(formState),
+      ...useBlocksMoney(formState),
+      showPermance,
+      choosePermance,
+      openPermance,
+      numCheck,
+      increaseNumber,
+      decreaseNumber,
+      friendCheck,
+      showFriend,
+      chooseFriend,
+      openFriend,
+      getFriendLength,
+      limiteFriends,
+      getPrice,
+    };
+  },
+});
+</script>

src/views/order/pre_sale_warehouse_receipt/components/pre_sale_warehouse_receipt_order_summary/index.vue

@@ -34,7 +34,7 @@ export default defineComponent({
   components: {
     BtnList,
     MtpTableScroll,
-    listed: defineAsyncComponent(() => import('./components/listed/index.vue')),
+    listed: defineAsyncComponent(() => import('./components/listed/index.vue')), // 挂牌
   },
   setup(props) {
     const { buttons } = props.parentComponent;

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -1,177 +1,138 @@
 <template>
   <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'" :placement="'right'" class="delistingBottom650" :visible="visible" @cancel="cancel">
-    <div class="listing">
-      <div class="condition">
-        <a-button class="conditionBtn">{{ selectedRow.deliverygoodsname }}</a-button>
-        <a-button class="conditionBtn">{{ selectedRow.wrtypename }}</a-button>
-        <a-button class="conditionBtn">{{ selectedRow.warehousename }}</a-button>
+  <Drawer class="delistingBottom650" title="挂牌" placement="right" :visible="visible" @cancel="cancel">
+    <div class="mtp-modal">
+      <div class="mtp-modal__header">
+        <div class="block">
+          <span class="block-tag">{{ selectedRow.deliverygoodsname }}</span>
+          <span class="block-tag">{{ selectedRow.wrtypename }}</span>
+          <span class="block-tag">{{ selectedRow.warehousename }}</span>
+        </div>
       </div>
-
-      <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
-        <div class="formBar">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="交易市场" name="marketid">
-                <a-select class="inlineFormSelect" v-model:value="formState.marketid" @change="handleMarket" style="width: 140px" placeholder="请选择交易市场">
-                  <!-- <a-select-option :value="1">一口价</a-select-option>
+      <div class="mtp-modal__container form-row">
+        <a-form ref="formRef" :model="formState" :rules="rules">
+          <a-form-item label="交易市场" name="marketid">
+            <a-select class="inlineFormSelect" v-model:value="formState.marketid" @change="handleMarket" placeholder="请选择交易市场">
+              <!-- <a-select-option :value="1">一口价</a-select-option>
                   <a-select-option :value="2">浮动价</a-select-option>
                   <a-select-option :value="3">贸易圈</a-select-option>-->
-                  <a-select-option v-for="item in spotMarkets" :key="item.marketid" :value="item.marketid">{{ item.marketname }}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="isFixed()">
-              <a-form-item label="挂牌价格" name="FixedPrice">
-                <a-input-number class="dialogInput" :min="0" style="width: 140px" v-model:value="formState.FixedPrice" placeholder="请输入挂牌价" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="isBlocs()">
-              <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
-                <a-input-number class="commonInput" style="width: 140px" :min="0" v-model:value="formState.FixedPrice" />
+              <a-select-option v-for="item in spotMarkets" :key="item.marketid" :value="item.marketid">{{ item.marketname }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item ref="FixedPrice" label="挂牌价格" name="FixedPrice" :autoLink="false" v-if="!isFloat()">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input dialogInput" :min="0" v-model:value="formState.FixedPrice" @blur="() => $refs.FixedPrice.onFieldBlur()" />
+              </div>
+              <div class="block-after" v-if="isBlocs()">
                 <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24" v-if="isFloat()">
-            <a-col :span="24">
-              <a-form-item label="行情商品" name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item label="行情商品" name="goodsid" v-if="isFloat()" style="width:100%">
+            <!-- <a-select class="inlineFormSelect"
                           style="width: 135px"
                           placeholder="请择交易所">
                 </a-select>-->
-                <a-select class="inlineFormSelect ml5" @change="handleGoodsGroups" style="width: 180px" v-model:value="formState.goodsgroupid" placeholder="请选择商品">
-                  <a-select-option v-for="item in goodsGroup" :value="item.goodsgroupid" :key="item.goodsgroupid">{{ item.goodsgroupname }}</a-select-option>
-                </a-select>
-                <a-select class="inlineFormSelect ml5" style="width: 180px" @change="handleGoodsChange" v-model:value="formState.goodsid" placeholder="请选择合约">
-                  <a-select-option v-for="item in goodsList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量" class="inputIconBox" name="OrderQty">
-                <a-input-number class="dialogInput" style="width: 140px !important" :min="0" v-model:value="formState.OrderQty" placeholder="请输入挂牌数量" />
-                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
-                <a-checkbox class="commonCheckbox" v-if="isBlocs()" v-model:checked="numCheck">整单</a-checkbox>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="!numCheck">
-              <a-form-item label="起摘数量" class="inputIconBox relative" name="DelistMinQty">
-                <a-input-number class="commonInput" :min="0" v-model:value="formState.DelistMinQty" style="width: 140px !important" />
-                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
-                <div class="tip-listing">
-                  <span>最小单位：</span>
-                  <span>{{ selectedRow.minivalue }}{{ selectedRow.enumdicname }}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12" class="mt-20">
-              <a-form-item>
-                <a-slider v-model:value="formState.OrderQty" :min="0" :max="selectedRow.enableqty" class="formSlider" style="width: 140px" />
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{ selectedRow.enableqty }}{{ selectedRow.enumdicname }}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
+            <a-select class="inlineFormSelect" @change="handleGoodsGroups" style="width: 180px" v-model:value="formState.goodsgroupid" placeholder="请选择商品">
+              <a-select-option v-for="item in goodsGroup" :value="item.goodsgroupid" :key="item.goodsgroupid">{{ item.goodsgroupname }}</a-select-option>
+            </a-select>
+            <a-select class="inlineFormSelect" style="width: 180px;margin-left: 5px" @change="handleGoodsChange" v-model:value="formState.goodsid" placeholder="请选择合约">
+              <a-select-option v-for="item in goodsList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item ref="OrderQty" label="挂牌数量" name="OrderQty" :autoLink="false">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input dialogInput" :min="0" v-model:value="formState.OrderQty" @blur="() => $refs.OrderQty.onFieldBlur()" />
+                <span class="block-content__suffix">{{ selectedRow.enumdicname }}</span>
+              </div>
+              <div class="block-after">
+                <a-checkbox class="block-content__checkbox commonCheckbox" v-if="isBlocs()" v-model:checked="numCheck">整单</a-checkbox>
+              </div>
+            </div>
+            <div class="block" v-if="Number.isInteger(formState.OrderQty)">
+              <a-slider class="block-slider" :min="0" :max="selectedRow.enableqty" :marks="{ 0: '0', [selectedRow.enableqty]: selectedRow.enableqty + selectedRow.enumdicname }" v-model:value="formState.OrderQty" @afterChange="() => $refs.OrderQty.onFieldBlur()" />
+            </div>
+          </a-form-item>
+          <a-form-item ref="DelistMinQty" label="起摘数量" name="DelistMinQty" :autoLink="false" v-if="!numCheck">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input commonInput" :min="0" v-model:value="formState.DelistMinQty" @blur="() => $refs.DelistMinQty.onFieldBlur()" />
+                <span class="block-content__suffix">{{ selectedRow.enumdicname }}</span>
+              </div>
+            </div>
+            <div class="block">
+              <div class="block-tip">最小单位：{{ selectedRow.minivalue }}{{ selectedRow.enumdicname }}</div>
+            </div>
+          </a-form-item>
           <template v-if="isBlocs()">
-            <a-row :gutter="24">
-              <a-col :span="12">
-                <a-form-item label="履约保证金" name="margin">
-                  <a-input-number class="commonInput" v-model:value="formState.margin" :min="0" style="width: 140px" />
-                  <span class="input-enumdicname">%</span>
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
-                  <a-date-picker style="width: 140px" v-model:value="formState.vidaliteTime" :allowClear="false" class="commonDatePicker dialogDatePicker" />
-                </a-form-item>
-              </a-col>
-            </a-row>
+            <a-form-item ref="margin" label="履约保证金" name="margin" :autoLink="false">
+              <div class="block">
+                <div class="block-content">
+                  <a-input-number class="block-content__input commonInput" v-model:value="formState.margin" :min="0" @blur="() => $refs.margin.onFieldBlur()" />
+                  <span class="block-content__suffix">%</span>
+                </div>
+              </div>
+            </a-form-item>
+            <a-form-item label="挂牌有效期" name="vidaliteTime">
+              <a-date-picker class="block-content__picker commonDatePicker" v-model:value="formState.vidaliteTime" :allowClear="false" />
+            </a-form-item>
           </template>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="履约模板" class="inputIconBox">
-                <span :class="['clickBox', formState.permanceTempName ? 'white' : '']" style="width: 140px" @click="handlePermance">{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
-                <svg class="icon svg-icon" aria-hidden="true" @click="handlePermance">
+          <a-form-item label="履约模板" required>
+            <div class="block">
+              <div class="block-content">
+                <span :class="['clickBox', formState.permanceTempName ? 'white' : '']" @click="handlePermance">{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
+                <svg class="block-content__suffix icon svg-icon" aria-hidden="true" @click="handlePermance">
                   <use xlink:href="#icon-moban" />
                 </svg>
-              </a-form-item>
-            </a-col>
-            <template v-if="isBlocs()">
-              <a-col :span="12">
-                <a-form-item label="指定朋友" class="inputIconBox">
-                  <span :class="['clickBox', getFriendLength() ? 'white' : '']" style="width: 140px" @click="openFriend">{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
-                  <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">
-                    <use xlink:href="#icon-pengyou1" />
-                  </svg>
-                  <a-checkbox class="commonCheckbox" v-model:checked="friendCheck" @change="limiteFriends">不限</a-checkbox>
-                </a-form-item>
-              </a-col>
-            </template>
-          </a-row>
-          <a-row :gutter="24" v-if="isFloat()">
-            <a-col :span="12">
-              <a-form-item label="基差" name="PriceMove">
-                <a-input-number class="commonInput" v-model:value="formState.PriceMove" style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24" v-if="isFloat()" class="relative">
-              <a-form-item :label="'估算价'">
-                <span class="white ml8">{{ getPrice() }}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24" v-if="isFloat()" class="relative">
-              <a-form-item :label="'估算金额'">
-                <span class="white ml8">{{ getWrMoney() }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="isFixed()" class="relative">
-              <a-form-item :label="'挂牌金额'">
-                <span class="white ml8">{{ getWrMoney() }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="isBlocs()" class="relative">
-              <a-form-item :label="'挂牌金额'">
-                <span class="white ml8">{{ getMoney() }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="getWrMargin() && !isBlocs()">
-              <a-form-item :label="getWrMargin() ? '履约保证金' : ''">
-                <span class="white ml8">{{ getWrMargin() }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24" v-if="isBlocs()">
-              <a-form-item label="履约保证金">
-                <span class="white ml8">{{ getMargin() }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="可用资金">
-                <span class="white ml8">{{ getCanUseMoney(handleSelectedAccount()) }}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </div>
-        <a-row :gutter="24">
-          <a-col :span="24" class="fixedBtns">
-            <a-form-item class="btnCenter">
-              <a-button class="listedBtn" :loading="loading" :disabled="loading" @click="submit">卖出</a-button>
-              <a-button class="ml10 cancelBtn" :loading="loading" :disabled="loading" @click="cancel">取消</a-button>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item label="指定朋友" v-if="isBlocs()">
+            <div class="block">
+              <div class="block-content">
+                <span :class="['clickBox', getFriendLength() ? 'white' : '']" @click="openFriend">{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
+                <svg class="block-content__suffix icon svg-icon" aria-hidden="true" @click="openFriend">
+                  <use xlink:href="#icon-pengyou1" />
+                </svg>
+              </div>
+              <div class="block-after">
+                <a-checkbox class="commonCheckbox" v-model:checked="friendCheck" @change="limiteFriends">不限</a-checkbox>
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item ref="PriceMove" label="基差" name="PriceMove" :autoLink="false" v-if="isFloat()">
+            <div class="block">
+              <div class="block-content">
+                <a-input-number class="block-content__input commonInput" v-model:value="formState.PriceMove" @blur="() => $refs.PriceMove.onFieldBlur()" />
+              </div>
+            </div>
+          </a-form-item>
+          <a-form-item label="估算价" style="width:100%" v-if="isFloat()">
+            <span class="white ml8">{{ getPrice() }}</span>
+          </a-form-item>
+          <a-form-item label="估算金额" style="width:100%" v-if="isFloat()">
+            <span class="white ml8">{{ getWrMoney() }}</span>
+          </a-form-item>
+          <a-form-item label="挂牌金额" style="width:100%" v-else>
+            <span class="white ml8">{{ getWrMoney() }}</span>
+          </a-form-item>
+          <a-form-item label="履约保证金" style="width:100%" v-if="isBlocs()">
+            <span class="white ml8">{{ getMargin() }}</span>
+          </a-form-item>
+          <a-form-item label="履约保证金" style="width:100%" v-else-if="getWrMargin()">
+            <span class="white ml8">{{ getWrMargin() }}</span>
+          </a-form-item>
+          <a-form-item label="可用资金" style="width:100%">
+            <span class="white ml8">{{ getCanUseMoney(handleSelectedAccount()) }}</span>
+          </a-form-item>
+        </a-form>
+      </div>
+      <div class="mtp-modal__footer">
+        <a-button :loading="loading" :disabled="loading" @click="submit">卖出</a-button>
+        <a-button :loading="loading" :disabled="loading" @click="cancel">取消</a-button>
+      </div>
     </div>
   </Drawer>
   <!-- 选择朋友 -->
@@ -237,15 +198,9 @@ export default defineComponent({
     // 切换市场
     function handleMarket(value: number) {
       const market = spotMarkets.value.find(item => item.marketid === value)
-      if (!market) return
-
-      // 判断所选择市场挂牌方式 1:一口价 2:浮动价 3:贸易圈 4:协议指定
-      if (market.listingmode === 1) {
-        formState.WRPriceType = 1
-      } else if (market.listingmode === 2) {
-        formState.WRPriceType = 2
-      } else {
-        formState.WRPriceType = 3
+      if (market) {
+        // 市场挂牌方式 1:一口价 2:浮动价 3:贸易圈 4:协议指定
+        formState.WRPriceType = market.listingmode;
       }
     }
 
@@ -280,7 +235,7 @@ export default defineComponent({
     // 估算价
     function getPrice() {
       let result = '--';
-      if (goodsCode.value) {
+      if (goodsCode.value && typeof formState.PriceMove === 'number') {
         const goodsPrice = getQuoteDayInfoByCodeFindPrice(goodsCode.value);
         if (goodsPrice && goodsPrice !== '--') {
           // 有实时行情价格
@@ -293,7 +248,7 @@ export default defineComponent({
     onBeforeUnmount(() => {
       removeSubscribeQuotation(uuid);
     });
-    const { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs } = handleNumAndPrice();
+    const { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs, isAgreemt } = handleNumAndPrice();
     function submit() {
       // 市场信息
       if (!formState.marketid) {
@@ -420,6 +375,7 @@ export default defineComponent({
       isFloat,
       isFixed,
       isBlocs,
+      isAgreemt,
       getCanUseMoney,
       priceCheck,
       increasePrice,
@@ -445,117 +401,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-
-<style lang="less" scoped>
-.inputIconBox .input-enumdicname {
-    right: 100px;
-}
-.ant-form.inlineForm .relative.ant-form-item .tip {
-    top: -5px;
-    left: calc(100% + 5px);
-    white-space: normal;
-    span {
-        display: block;
-        line-height: 15px;
-    }
-}
-.listing {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    overflow: hidden;
-    .condition {
-        width: calc(100% - 32px);
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
-            }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
-        }
-    }
-    /deep/.ant-form {
-        .formBar {
-            height: calc(100% - 98px);
-            .clickBox {
-                height: 30px;
-            }
-            .ant-row.inputIconBox.ant-form-item {
-                .ant-col.ant-form-item-control-wrapper {
-                    .ant-form-item-control {
-                        .ant-form-item-children {
-                            width: 232px;
-                            .ant-checkbox-wrapper.commonCheckbox {
-                                left: 140px;
-                                .ant-checkbox {
-                                    margin-right: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-.mt-20 {
-    margin-top: -20px;
-}
-.unit {
-    margin-left: 70px;
-    width: 140px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
-}
-.listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-        color: @m-white0-hover;
-    }
-}
-.cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
-    &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
-        color: @m-white0-hover;
-    }
-}
-.ml10 {
-    margin-left: 10px;
-}
-.ml5 {
-    margin-left: 5px;
-}
-</style>
+</script>

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/interface.ts

@@ -1,6 +1,6 @@
 import { BlocsListingForm } from '@/common/setup/warehouse_receipt_trade/interface';
 export interface ListingForm extends BlocsListingForm {
-    WRPriceType: 1 | 2 | 3,// 价格方式 1：固定价 2：浮动价 3:贸易圈
+    WRPriceType: number,// 价格方式 1：固定价 2：浮动价 3:贸易圈
     FixedPrice: number, // 固定价格
     OrderQty: number,
     DelistMinQty: number,

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/setup.ts

@@ -86,15 +86,23 @@ export function handleGoods() {
 
 
 export function handleNumAndPrice() {
+    // 浮动价
     function isFloat() {
         return formState.WRPriceType === 2;
     }
+    // 一口价
     function isFixed() {
         return formState.WRPriceType === 1;
     }
+    // 贸易圈
     function isBlocs() {
         return formState.WRPriceType === 3;
     }
+    // 协议指定
+    function isAgreemt() {
+        return formState.WRPriceType === 4;
+    }
+
     // 获取选中的资金账号
     const hasRules = () => getRules().length > 0
     //  摘牌金额
@@ -130,7 +138,7 @@ export function handleNumAndPrice() {
         }
 
     }
-    return { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs }
+    return { getWrMoney, getWrMargin, isFloat, isFixed, isBlocs, isAgreemt }
 }
 
 /**
@@ -144,14 +152,17 @@ export function queryMarketSection(isPre: boolean) {
         // 根据有无仓单过滤出仓单市场
         // 过滤掉没有权限的市场
         const markets = getAllMarkets()
-        resMarkets = resMarkets.filter(item =>
-            item.auctionwrtype === (isPre ? 1 : 2) && (item.trademode === TradeMode.WarehouseReceiptTrade)
-        ).filter(item =>
-            markets.findIndex(m => m.marketid === item.marketid) !== -1
-        )
+        resMarkets = resMarkets.filter(item => {
+            const a = item.auctionwrtype === (isPre ? 1 : 2);
+            const b = item.trademode === TradeMode.WarehouseReceiptTrade;
+            const c = markets.findIndex(m => m.marketid === item.marketid) > -1;
+            return a && b && c;
+        })
         spotMarkets.value = resMarkets
-        if (resMarkets.length === 1) {
-            formState.marketid = resMarkets[0].marketid;
+
+        const market = resMarkets.find((e) => e.listingmode === formState.WRPriceType)
+        if (market) {
+            formState.marketid = market.marketid;
         }
     })