style update

src/assets/styles/theme.css

@@ -121,6 +121,7 @@
     --m-black43: #091a32;
     --m-black44: #1B2F41;
     --m-black45: #10202F;
+    --m-black46: rgba(0, 0, 0, 0.45);
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -333,6 +334,7 @@
     --m-black43: #091a32;
     --m-black44: #1B2F41;
     --m-black45: #10202F;
+    --m-black46: rgba(0, 0, 0, 0.45);
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -541,6 +543,7 @@
     --m-black43: #DEE8ED;
     --m-black44: #ebf1f5;
     --m-black45: #D6E0F0;
+    --m-black46: rgba(0, 0, 0, 0.45);
 
     --m-blue0: #5179E2;
     --m-blue0-hover: rgba(81, 121, 226, .8);

src/assets/styles/variables.less

@@ -129,6 +129,7 @@
 @m-black43: var(--m-black43);
 @m-black44: var(--m-black44);
 @m-black45: var(--m-black45);
+@m-black46: var(--m-black46);
 
 @m-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);

src/common/components/drawer/index.vue

@@ -1,6 +1,6 @@
 <template>
     <a-drawer
-        :placement="placement"
+        placement="right"
         :closable="false"
         :visible="visible"
         :destroyOnClose="true"
@@ -74,22 +74,34 @@ export default defineComponent({
 <style lang="less">
 .bottom {
     .position(fixed, auto, 0, -2px, auto);
-    width: 586px;
-    height: 450px;
-    background: transparent;
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 586px !important;
+        height: 450px;
+        bottom: 0;
+        right: 0;
     }
 }
 .bottom486 {
     .position(fixed, auto, 0, -2px, auto);
-    width: 486px;
-    height: 450px;
-    background: transparent;
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 486px !important;
+        height: 450px;
+        bottom: 0;
+        right: 0;
         .ant-drawer-body {
             .collapseCont {
                 .highContent {
@@ -101,92 +113,178 @@ export default defineComponent({
 }
 .delistingBottom {
     .position(fixed, auto, 0, -2px, auto);
-    width: 586px;
-    height: 450px;
-    background: transparent;
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 586px !important;
+        height: 450px;
+        bottom: 0;
+        right: 0;
+    }
+}
+.ant-drawer.ant-drawer-bottom.ant-drawer-open.bottomListed {
+    .position(fixed, auto, 0, 0, auto);
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
+    .ant-drawer-content-wrapper {
+        width: 566px !important;
+        height: 405px;
+        bottom: 0;
+        right: 0;
+    }
+}
+.bottomListed.delistingBottom {
+    .position(fixed, auto, 0, -2px, auto);
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
+    .ant-drawer-content-wrapper {
+        width: 486px !important;
+        height: 450px;
+        bottom: 0;
+        right: 0;
     }
 }
 .delistingBottom650 {
     .position(fixed, auto, 0, -2px, auto);
-    width: 650px;
-    height: 450px;
-    background: transparent;
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 650px !important;
+        height: 450px;
+        bottom: 0;
+        right: 0;
     }
 }
 .top {
-    .position(fixed, 101px, 0, auto, auto);
-    width: 430px;
-    height: 450px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 430px !important;
+        height: 450px;
+        right: 0;
+        top: 101px;
     }
 }
 .top486 {
-    .position(fixed, 101px, 0, auto, auto);
-    width: 486px;
-    height: 450px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 11;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 486px !important;
+        height: 450px;
+        right: 0;
+        top: 101px;
     }
 }
 .top600 {
-    .position(fixed, 101px, 0, auto, auto);
-    width: 600px;
-    height: 450px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 11;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 600px !important;
+        height: 450px;
+        right: 0;
+        top: 101px;
     }
 }
 .top500 {
-    .position(fixed, 101px, 0, auto, auto);
-    width: 500px;
-    height: 450px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 500px !important;
+        height: 450px;
+        right: 0;
+        top: 101px;
     }
 }
 .topHigh {
-    .position(fixed, 101px, 0, auto, auto);
-    width: 580px;
-    height: 450px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 580px !important;
+        height: 450px;
+        right: 0;
+        top: 101px;
     }
 }
 .bottomWidth {
     .position(fixed, auto, 0, 0, auto);
-    width: 765px;
-    height: 396px;
-    background: transparent;
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 765px !important;
+        height: 396px;
+        right: 0;
+        bottom: 0;
     }
 }
 .tradeDialog {
-    .position(fixed, 116px, 0, auto, auto);
-    width: 467px;
-    height: 310px;
-    background: transparent;
+    .position(fixed, 0, 0, auto, auto);
+    width: 100%;
+    height: 100%;
     z-index: 10;
+    .ant-drawer-mask {
+        height: 100%;
+        background: @m-black46 !important;
+    }
     .ant-drawer-content-wrapper {
         width: 467px !important;
+        height: 310px;
+        right: 0;
+        top: 116px;
     }
 }
 .collapse {
@@ -204,7 +302,7 @@ export default defineComponent({
 }
 .ant-drawer.ant-drawer-open {
     .ant-drawer-mask {
-        background: transparent;
+        background: @m-black46;
     }
     .ant-drawer-content-wrapper {
         box-shadow: none;
@@ -258,14 +356,4 @@ export default defineComponent({
 .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label label {
     width: 90px;
 }
-.ant-drawer.ant-drawer-bottom.ant-drawer-open.bottomListed {
-    .position(fixed, auto, 0, 0, auto);
-    width: 566px;
-    height: 405px !important;
-    background: transparent;
-    z-index: 10;
-    .ant-drawer-content-wrapper {
-        width: 566px !important;
-    }
-}
 </style>

src/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/components/choose-finance/index.vue

@@ -150,6 +150,9 @@ export default defineComponent({
                 .ant-col:first-child {
                     color: @m-yellow1;
                     line-height: 40px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
                 .ant-col:last-child {
                     text-align: right;

src/views/order/performance_information/components/components/breach_contract/index.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 违约-->
-    <Drawer :title="'违约'" :placement="'bottom'" :visible="visible" @cancel="cancel">
+    <Drawer :title="'违约'" :placement="'right'" class="bottom" :visible="visible" @cancel="cancel">
         <div class="listed">
             <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                 <div class="formBar">