Merge branch 'master' of http://47.101.159.18:3000/Muchinfo/MTP2.0_WEB

src/assets/styles/mixin.less

@@ -160,7 +160,8 @@
         background: transparent;
     }
     .ant-input-suffix {
-        color: @m-white1;
+        color: @m-grey41;
+        margin-left: 0;
     }
     &:hover, &:focus {
         border-color:@m-blue10;
@@ -191,7 +192,7 @@
 
     .ant-select-item-option-active,.ant-select-item-option-selected,.ant-select-item-option-hover {
         background: @m-blue0;
-        color: @m-white1;
+        color: @m-white8;
     }
 }
 
@@ -618,7 +619,7 @@
             width: 200px;
             .unit {
                 float: right;
-                color: @m-grey2;
+                color: @m-grey41;
             }
             .backUnit {
                 position: absolute;
@@ -658,6 +659,16 @@
             width: calc(100% - 70px);
         }
     }
+    .btnCenter.ant-form-item {
+        width: 100%;
+        .ant-form-item-label {
+            width: 0;
+        }
+        .ant-form-item-control-wrapper {
+            width: 100%;
+            text-align: center;
+        }
+    }
 }
 .ant-select-single {
     .ant-select-selector {
@@ -729,7 +740,7 @@
 
 .input-enumdicname {
     color: @m-grey41;
-    margin-left: 5px;
+    margin-left: 9px;
     font-size: 14px;
   }
 .input-enumdicname-absolute {
@@ -1165,13 +1176,13 @@
 
 .commonDatePicker.ant-calendar-picker {
     .ant-input {
-        background: @m-grey9;
+        background: @m-grey21;
         padding: 0 8px;
         height: 30px;
         line-height: 30px;
-        border: 0;
         color: @m-white1;
-
+        border: 1PX solid @m-grey14;
+        .rounded-corners(3px);
 
     }
     .ant-calendar-picker-icon {
@@ -1179,6 +1190,7 @@
     }
 
     .ant-calendar-picker-clear {
+        display: none;
         background: transparent;
         color: @m-grey1;
         svg {
@@ -1232,7 +1244,7 @@
                 border-bottom-color: @m-grey23;
                 .ant-calendar-input {
                     background: transparent;
-                    border: 1px solid @m-grey1;
+                    border: 1px solid @m-grey42;
                     color: @m-white0;
                     &::placeholder {
                         color: @m-grey1;
@@ -1242,7 +1254,7 @@
             .ant-calendar-date-panel {
                 // .ant-calendar-range-part {
                     .ant-calendar-header {
-                        border-color: @m-grey1;
+                        border-color: @m-grey42;
                         .ant-calendar-prev-year-btn,.ant-calendar-prev-month-btn {
                             color: @m-grey1;
                             &::before,&::after {
@@ -1255,14 +1267,14 @@
                     }
 
                     .ant-calendar-body {
-                        border-top-color: @m-grey1;
+                        border-top-color: @m-grey42;
                         .ant-calendar-column-header-inner {
                             color: @m-grey1;
                         }
                         .ant-calendar-cell {
                             .ant-calendar-date {
                                 background: transparent;
-                                color: @m-white0;
+                                color: @m-white6;
                             }
                             &:hover {
                                 .ant-calendar-date {
@@ -1302,7 +1314,7 @@
 
         }
         .ant-calendar-footer {
-            border-top-color: @m-grey1;
+            border-top-color: @m-grey42;
             .ant-calendar-time-picker-btn {
                 color: @m-grey1;
             }
@@ -2100,6 +2112,12 @@ input:-internal-autofill-selected {
 }
 // 表单里面的内容
 .formBar {
+    width: 100%;
+    flex: 1;
+    padding: 28px 16px 0;
+    max-height: calc(100% - 70px);
+    overflow-y: auto;
+    overflow-x: hidden;
     ::v-deep.formProgress {
         width: 140px;
         // height: 3px;
@@ -2146,7 +2164,10 @@ input:-internal-autofill-selected {
         }
     }
 }
-
+.fixedBtns {
+    .position(absolute, auto, 0, 9px, 0);
+    z-index: 2;
+}
 .ant-slider.formSlider {
     width: 140px;
     margin-left: 70px;
@@ -2399,4 +2420,5 @@ input:-internal-autofill-selected {
 .ant-menu-dark .ant-menu-sub .ant-menu-item-selected,
 .ant-menu-dark .ant-menu-sub .ant-menu-item-selected {
   color: @m-white8;
-}
+}
+

src/assets/styles/theme.css

@@ -42,6 +42,7 @@
     --m-grey40: #405066;
     --m-grey40-hover: rgba(64, 80, 102, .8);
     --m-grey41: #7A8A94;
+    --m-grey42: #7A8A94;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -82,6 +83,8 @@
     --m-black34: #212629;
     --m-black35: #181E22;
     --m-black36: #181e22;
+    --m-black37: #2794ff;
+    --m-black38: #15293a;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -117,6 +120,7 @@
     --m-blue25: #0C95FF;
     --m-blue26: #3A87F7;
     --m-blue27: #1F3245;
+    --m-blue28: #15293a;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -134,6 +138,9 @@
     --m-green1: #10251d;
 
     --m-red2: #271112;
+
+    --m-yellow4: #3a2215;
+    --m-yellow5: #fc9618;
     
     --m-nodata: url("../images/nodata.png");
 
@@ -144,152 +151,7 @@
     --m-boxShadow: rgba(18, 22, 24, 0.36);
     
 } 
-/* 白色主题 */
-/* :root[theme="light"] { */
-:root[theme="light"] { 
-    --m-grey0: #5179E2;
-    --m-grey1: #7A8A94;
-    --m-grey1-hover: rgba(122, 138, 148, .8);
-    --m-grey2: #7A8A94;
-    --m-grey5: #B2C4DD;
-    --m-grey6: #ffffff;
-    --m-grey7: #F5FAFC;
-    --m-grey8: #D2DAEF;
-    --m-grey9: #FFFFFF;
-    --m-grey10: #99B5FF;
-    --m-grey11: #ffffff; 
-    --m-grey12: #727C98;
-    --m-grey12-hover: rgba(114, 124, 152, .8);
-    --m-grey13: #727C98;
-    --m-grey13-hover: rgba(114, 124, 152, .8);
-    --m-grey14: #ECF2F5;
-    --m-grey15: #727C98;
-    --m-grey15-hover: rgba(114, 124, 152, .8);
-    --m-grey16: #727C98;
-    --m-grey16-hover: rgba(114, 124, 152, .8);
-    --m-grey17: #808E97; 
-    --m-grey18: #FFFFFF; /* #ECF2F5 */
-    --m-grey19: #F6F8FA;
-    --m-grey20: #DAE5EC;
-    --m-grey21: #F6F8FA;
-    --m-grey22: #E4F5FF;  
-    --m-grey22-hover: rgba(228, 245, 255, .8);
-    --m-grey23: #A5CDFF;
-    --m-grey26: #5179E2;
-
-    --m-grey31: #D6DEE3;
-    --m-grey32: #FEFFFF;
-    --m-grey33: #5E6E78;
-    --m-grey34: #808E97;
-    --m-grey35: #ffffff;
-    --m-grey36: #ffffff;
-    --m-grey37: #CBD7DD;
-    --m-grey38: #7A8A94;
-    --m-grey39: #5179E2;
-    --m-grey39-hover: rgba(81, 121, 226, .8);
-    --m-grey40: #5179E2;
-    --m-grey40-hover: rgba(81, 121, 226, .8);
-    --m-grey41: #ACBBC5;
-
-    --m-black0: #F8FBFF;
-    --m-black1: #ECF2F5;
-    --m-black2: #FFFFFF;
-    --m-black3: #718FAE;
-    --m-black4: #EDF2F7;
-    --m-black5: #ECF2F5;
-    --m-black6: #DAE5EC;
-    --m-black7: #D4E0FF;
-    --m-black7-hover: rgba(212, 224, 255, .8);
-    --m-black8: #DAE5EC; 
-    --m-black9: #e3ebf1;
-    --m-black10: #ddebed;
-    --m-black11: #ECF2F5;
-    --m-black12: #ECF2F5;
-    --m-black13: #ECF2F5;
-    --m-black14: #FFFFFF;
-    --m-black15: #F6F8FA;
-    --m-black16: #CBD7DD;
-    --m-black17: #DAE5EC;
-    --m-black18: rgba(18, 22, 24, 0.15);
-    --m-black19: rgba(246 248 250 / 20%);
-    --m-black20: #EDF2F7;
-    --m-black21: #182635;
-    --m-black22: #ffffff;
-    --m-black23: #173025;
-    --m-black24: #2c3e50;
-    --m-black25: #E4F5FF;
-    --m-black26: #3A87F7;
-    --m-black27: #ffffff;
-    --m-black28: #DDE3E8;
-    --m-black29: #2B3F52;
-    --m-black30: #15202B;
-    --m-black31: #FFFFFF;
-    --m-black32: #CED8E6;
-    --m-black33: #ffffff;
-    --m-black34: #F6F8FA;
-    --m-black35: #ECF2F5;
-    --m-black36: #ffffff;
 
-    --m-blue0: #5179E2;
-    --m-blue0-hover: rgba(81, 121, 226, .8);
-    --m-blue2: #5179E2;
-    --m-blue2-hover: rgba(81, 121, 226, .8);
-    --m-blue3: #DEEFFF;
-    --m-blue4: #5179E2;
-    --m-blue5: #7497F4;
-    --m-blue6: #5179E2;
-    --m-blue6-hover: rgba(81, 121, 226, .8);
-    --m-blue7: #5179E2;
-    --m-blue7-hover: rgba(81, 121, 226, .8);
-    --m-blue8: #5179E2;
-    --m-blue8-hover: rgba(81, 121, 226, .8);
-    --m-blue9: #5179E2;
-    --m-blue9-hover: rgba(81, 121, 226, .8);
-    --m-blue10: #0C95FF;
-    --m-blue10-hover: rgba(12, 149, 255, .8);
-    --m-blue11: #ffffff;
-    --m-blue12: #D4E0FF;
-    --m-blue13: #DEEFFF;
-    --m-blue14: #ECF2F5;
-    --m-blue15: #0D8AEB;
-    --m-blue16: #ADBCC5;
-    --m-blue17: #3A87F7;
-    --m-blue18:#5179E2;
-    --m-blue19: #ECF2F5;
-    --m-blue20: #D6E0F0;
-    --m-blue21: #5179E2;
-
-
-    --m-blue25: #ffffff;
-    --m-blue26: #3A87F7;
-    --m-blue27: #ECF2F5;
-
-    --body-bg: #FFFFFF;
-    --m-white0: #ffffff;
-    --m-white0-hover: rgba(255, 255, 255, .8);
-    --m-white1: #333333;
-    --m-white5: #FFFFFF;
-    --m-white6: #333333;
-    --m-white7: #718FAE;
-    --m-white8: #ffffff;
-    --m-white9: #5179E2;
-    --m-white10: #FEFEFF;
-    --m-white11: #333333;
-
-    --m-green0: #00A843;
-    --m-green1: #e8ffef;
-
-    --m-red2: #ffe2e2;
-
-    --m-nodata: url("../images/nodata_white.png");
-
-    --m-tabbg: url("../images/tabbg_white.png");
-    --m-tabbg-active: url("../images/tabbg_active_white.png");
-    --m-arrowRight: url("../images/titleArrow_white.png");
-
-    --m-boxShadow: rgba(18, 22, 24, 0.15);
-    
-}
 
 /* 黑色主题 */
 :root[theme="black"] {
@@ -336,6 +198,7 @@
     --m-grey40: #405066;
     --m-grey40-hover: rgba(64, 80, 102, .8);
     --m-grey41: #7A8A94;
+    --m-grey42: #7A8A94;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -376,6 +239,8 @@
     --m-black34: #212629;
     --m-black35: #181E22;
     --m-black36: #181e22;
+    --m-black37: #2794ff;
+    --m-black38: #15293a;
 
     --m-blue0: #3a87f7;
     --m-blue0-hover: rgba(58, 135, 247, .8);
@@ -410,6 +275,7 @@
     --m-blue25: #0C95FF;
     --m-blue26: #3A87F7;
     --m-blue27: #1F3245;
+    --m-blue28: #15293a;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -428,6 +294,9 @@
 
     --m-red2: #271112;
 
+    --m-yellow4: #3a2215;
+    --m-yellow5: #fc9618;
+
     --m-nodata: url("../images/nodata.png");
 
     --m-tabbg: url("../images/tabbg.png");
@@ -437,3 +306,156 @@
     --m-boxShadow: rgba(18, 22, 24, 0.36);
 }
 
+/* 白色主题 */
+/* :root[theme="light"] { */
+:root[theme="light"] { 
+    --m-grey0: #5179E2;
+    --m-grey1: #7A8A94;
+    --m-grey1-hover: rgba(122, 138, 148, .8);
+    --m-grey2: #7A8A94;
+    --m-grey5: #B2C4DD;
+    --m-grey6: #ffffff;
+    --m-grey7: #F5FAFC;
+    --m-grey8: #D2DAEF;
+    --m-grey9: #FFFFFF;
+    --m-grey10: #99B5FF;
+    --m-grey11: #ffffff; 
+    --m-grey12: #727C98;
+    --m-grey12-hover: rgba(114, 124, 152, .8);
+    --m-grey13: #727C98;
+    --m-grey13-hover: rgba(114, 124, 152, .8);
+    --m-grey14: #ECF2F5;
+    --m-grey15: #727C98;
+    --m-grey15-hover: rgba(114, 124, 152, .8);
+    --m-grey16: #727C98;
+    --m-grey16-hover: rgba(114, 124, 152, .8);
+    --m-grey17: #808E97; 
+    --m-grey18: #FFFFFF; /* #ECF2F5 */
+    --m-grey19: #F6F8FA;
+    --m-grey20: #DAE5EC;
+    --m-grey21: #F6F8FA;
+    --m-grey22: #E4F5FF;  
+    --m-grey22-hover: rgba(228, 245, 255, .8);
+    --m-grey23: #A5CDFF;
+    --m-grey26: #5179E2;
+
+    --m-grey31: #D6DEE3;
+    --m-grey32: #FEFFFF;
+    --m-grey33: #5E6E78;
+    --m-grey34: #808E97;
+    --m-grey35: #ffffff;
+    --m-grey36: #ffffff;
+    --m-grey37: #CBD7DD;
+    --m-grey38: #7A8A94;
+    --m-grey39: #5179E2;
+    --m-grey39-hover: rgba(81, 121, 226, .8);
+    --m-grey40: #5179E2;
+    --m-grey40-hover: rgba(81, 121, 226, .8);
+    --m-grey41: #ACBBC5;
+    --m-grey42: #b4cedd;
+
+    --m-black0: #F8FBFF;
+    --m-black1: #ECF2F5;
+    --m-black2: #FFFFFF;
+    --m-black3: #718FAE;
+    --m-black4: #EDF2F7;
+    --m-black5: #ECF2F5;
+    --m-black6: #DAE5EC;
+    --m-black7: #D4E0FF; 
+    --m-black7-hover: rgba(212, 224, 255, .8);
+    --m-black8: #DAE5EC; 
+    --m-black9: #e3ebf1;
+    --m-black10: #ddebed;
+    --m-black11: #ECF2F5;
+    --m-black12: #ECF2F5;
+    --m-black13: #ECF2F5;
+    --m-black14: #FFFFFF;
+    --m-black15: #F6F8FA;
+    --m-black16: #CBD7DD;
+    --m-black17: #DAE5EC;
+    --m-black18: rgba(18, 22, 24, 0.15);
+    --m-black19: rgba(246 248 250 / 20%);
+    --m-black20: #EDF2F7;
+    --m-black21: #182635;
+    --m-black22: #ffffff;
+    --m-black23: #173025;
+    --m-black24: #2c3e50;
+    --m-black25: #E4F5FF;
+    --m-black26: #3A87F7;
+    --m-black27: #ffffff;
+    --m-black28: #DDE3E8;
+    --m-black29: #2B3F52;
+    --m-black30: #15202B;
+    --m-black31: #FFFFFF;
+    --m-black32: #CED8E6;
+    --m-black33: #ffffff;
+    --m-black34: #F6F8FA;
+    --m-black35: #ECF2F5;
+    --m-black36: #ffffff;
+    --m-black37: #73BAFF;
+    --m-black38: #ECF2F5;
+
+    --m-blue0: #5179E2;
+    --m-blue0-hover: rgba(81, 121, 226, .8);
+    --m-blue2: #5179E2;
+    --m-blue2-hover: rgba(81, 121, 226, .8);
+    --m-blue3: #DEEFFF;
+    --m-blue4: #5179E2;
+    --m-blue5: #7497F4;
+    --m-blue6: #5179E2;
+    --m-blue6-hover: rgba(81, 121, 226, .8);
+    --m-blue7: #5179E2;
+    --m-blue7-hover: rgba(81, 121, 226, .8);
+    --m-blue8: #5179E2;
+    --m-blue8-hover: rgba(81, 121, 226, .8);
+    --m-blue9: #5179E2;
+    --m-blue9-hover: rgba(81, 121, 226, .8);
+    --m-blue10: #0C95FF;
+    --m-blue10-hover: rgba(12, 149, 255, .8);
+    --m-blue11: #ffffff;
+    --m-blue12: #D4E0FF;
+    --m-blue13: #DEEFFF;
+    --m-blue14: #ECF2F5;
+    --m-blue15: #0D8AEB;
+    --m-blue16: #ADBCC5;
+    --m-blue17: #3A87F7;
+    --m-blue18:#5179E2;
+    --m-blue19: #ECF2F5;
+    --m-blue20: #D6E0F0;
+    --m-blue21: #5179E2;
+
+
+    --m-blue25: #ffffff;
+    --m-blue26: #3A87F7;
+    --m-blue27: #ECF2F5;
+    --m-blue28: #DBF3FF;
+
+    --body-bg: #FFFFFF;
+    --m-white0: #ffffff;
+    --m-white0-hover: rgba(255, 255, 255, .8);
+    --m-white1: #333333;
+    --m-white5: #FFFFFF;
+    --m-white6: #333333;
+    --m-white7: #718FAE;
+    --m-white8: #ffffff;
+    --m-white9: #5179E2;
+    --m-white10: #FEFEFF;
+    --m-white11: #333333;
+
+    --m-green0: #00A843;
+    --m-green1: #e8ffef;
+
+    --m-red2: #ffe2e2;
+
+    --m-yellow4: #FFE8DB;
+    --m-yellow5: #FFC277;
+
+    --m-nodata: url("../images/nodata_white.png");
+
+    --m-tabbg: url("../images/tabbg_white.png");
+    --m-tabbg-active: url("../images/tabbg_active_white.png");
+    --m-arrowRight: url("../images/titleArrow_white.png");
+
+    --m-boxShadow: rgba(18, 22, 24, 0.15);
+    
+}

src/assets/styles/variables.less

@@ -52,6 +52,7 @@
 @m-grey40: var(--m-grey40);
 @m-grey40-hover: var(--m-grey40-hover);
 @m-grey41: var(--m-grey41);
+@m-grey42: var(--m-grey42);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -92,6 +93,8 @@
 @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-blue0: var(--m-blue0);
 @m-blue0-hover: var(--m-blue0-hover);
@@ -128,6 +131,7 @@
 @m-blue25: var(--m-blue25);
 @m-blue26: var(--m-blue26);
 @m-blue27: var(--m-blue27);
+@m-blue28: var(--m-blue28);
 
 @body-bg: #e9eef3;
 @m-white0: var(--m-white0);
@@ -179,6 +183,8 @@
 @m-yellow1: #FC9618;
 @m-yellow2: #ffae00;
 @m-yellow3: #653f0d;
+@m-yellow4: var(--m-yellow4);
+@m-yellow5: var(--m-yellow5);
 
 @m-orange0: #F52929;
 

src/common/components/drawer/index.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 .bottom {
     .position(fixed, auto, 0, -2px, auto);
     width: 586px;
-    height: 330px;
+    height: 380px;
     background: transparent;
     z-index: 10;
     .ant-drawer-content-wrapper {
@@ -85,7 +85,7 @@ export default defineComponent({
 .delistingBottom {
     .position(fixed, auto, 0, -2px, auto);
     width: 586px;
-    height: 440px;
+    height: 450px;
     background: transparent;
     z-index: 10;
     .ant-drawer-content-wrapper {
@@ -94,11 +94,17 @@ export default defineComponent({
 }
 .top {
     .position(fixed, 101px, 0, auto, auto);
-    width: 486px;
-    height: 479px;
+    width: 430px;
+    height: 450px;
     background: transparent;
     z-index: 10;
     .ant-drawer-content-wrapper {
+        width: 430px !important;
+    }
+}
+.top486 {
+    width: 486px;
+    .ant-drawer-content-wrapper {
         width: 486px !important;
     }
 }

src/views/market/spot_trade/components/buy-sell-market/components/delisting/index.vue

@@ -314,11 +314,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 ::v-deep.ant-slider.formSlider {
     width: 260px;
@@ -333,13 +328,10 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
-.listedBtn:first-child {
-    margin-left: -35px;
-}
 .listedBtn {
     width: 120px;
     height: 30px;

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

@@ -1,180 +1,193 @@
 <template>
-  <!-- 仓单贸易&仓单预售 买/卖 摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'right'"
-          :visible="visible"
-          width="486px"
-          height="580px"
-          @cancel="cancel"
-          class="topHigh">
-    <div class="delisting">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="交易账户"
-                           name="accountid">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.accountid"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in accountList"
-                                   :value="item.accountid"
-                                   :key="item.accountid">{{item.accountid}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="挂牌方">
-                <span class="white ml8">{{selectedRow.username}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="基差"
-                           v-if="isFloat()">
-                <span class="yellow ml8">{{selectedRow.pricemove}}</span>
-              </a-form-item>
-              <a-form-item label="挂牌价格"
-                           v-if="!isFloat()">
-                <span class="yellow ml8">{{selectedRow.fixedprice}}</span>
-              </a-form-item>
-              <a-row :gutter="24">
-                <a-col :span="24"></a-col>
-              </a-row>
-              <a-form-item label="挂牌数量">
-                <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-10">
-              <a-form-item label="融资方案"
-                           @click="openComponent({code: 'ChooseFinance'})"
-                           name="caseId">
-                <div class="way">
-                  <div class="left">{{formState.case ? formState.case : '请选择'}}</div>
-                  <div class="right">
-                    <svg class="icon svg-icon"
-                         aria-hidden="true">
-                      <use xlink:href="#icon-fangan" />
-                    </svg>
-                  </div>
-                </div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 v-if="isBuy() && isWR()">
-            <a-col :span="24">
-              <a-form-item label="现货仓单"
-                           name="LadingBillId">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.LadingBillId"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in wrHoldList"
-                                   :value="item.id"
-                                   :key="item.id">{{item.name}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="摘牌数量"
-                           class="relative"
-                           name="num">
-                <a-input-number class="dialogInput yellowInput"
-                                style="width: 260px"
-                                :min="0"
-                                :max="getMaxNum()"
-                                v-model:value="formState.num" />
-                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
-                <div class="labelTip">({{selectedRow.minivalue}}{{selectedRow.enumdicname}}起)</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider ::min="0"
-                          v-model:value="formState.num"
-                          :max="selectedRow.orderqty"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{getMaxNum()}}{{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="24"
-                   class="mt-20">
-              <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24"
-                   class="mt-20">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</span>
-                  </a-col>
-                </a-row>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">{{isBuy() ? '卖出' : '买入'}}</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
-  <component :is="componentId"
-             v-if="componentId"
-             :selectedRow="selectedRow"
-             :isFloat="isFloat()"
-             @update="choose"
-             @cancel="closeComponent"></component>
+    <!-- 仓单贸易&仓单预售 买/卖 摘牌 -->
+    <Drawer
+        :title="'摘牌'"
+        :placement="'right'"
+        :visible="visible"
+        width="486px"
+        height="580px"
+        @cancel="cancel"
+        class="topHigh"
+    >
+        <div class="delisting">
+            <div class="formBar">
+                <a-form
+                    class="inlineForm dialogForm"
+                    ref="formRef"
+                    :model="formState"
+                    :rules="rules"
+                >
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="交易账户" name="accountid">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    v-model:value="formState.accountid"
+                                    placeholder="请选择"
+                                >
+                                    <a-select-option
+                                        v-for="item in accountList"
+                                        :value="item.accountid"
+                                        :key="item.accountid"
+                                    >{{item.accountid}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="挂牌方">
+                                <span class="white ml8">{{selectedRow.username}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="基差" v-if="isFloat()">
+                                <span class="yellow ml8">{{selectedRow.pricemove}}</span>
+                            </a-form-item>
+                            <a-form-item label="挂牌价格" v-if="!isFloat()">
+                                <span class="yellow ml8">{{selectedRow.fixedprice}}</span>
+                            </a-form-item>
+                            <a-row :gutter="24">
+                                <a-col :span="24"></a-col>
+                            </a-row>
+                            <a-form-item label="挂牌数量">
+                                <span
+                                    class="white ml8"
+                                >{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-10">
+                            <a-form-item
+                                label="融资方案"
+                                @click="openComponent({code: 'ChooseFinance'})"
+                                name="caseId"
+                            >
+                                <div class="way">
+                                    <div class="left">{{formState.case ? formState.case : '请选择'}}</div>
+                                    <div class="right">
+                                        <svg class="icon svg-icon" aria-hidden="true">
+                                            <use xlink:href="#icon-fangan" />
+                                        </svg>
+                                    </div>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" v-if="isBuy() && isWR()">
+                        <a-col :span="24">
+                            <a-form-item label="现货仓单" name="LadingBillId">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    v-model:value="formState.LadingBillId"
+                                    placeholder="请选择"
+                                >
+                                    <a-select-option
+                                        v-for="item in wrHoldList"
+                                        :value="item.id"
+                                        :key="item.id"
+                                    >{{item.name}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="摘牌数量" class="relative" name="num">
+                                <a-input-number
+                                    class="dialogInput yellowInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    :max="getMaxNum()"
+                                    v-model:value="formState.num"
+                                />
+                                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
+                                <div
+                                    class="labelTip"
+                                >({{selectedRow.minivalue}}{{selectedRow.enumdicname}}起)</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item>
+                                <a-slider
+                                    ::min="0"
+                                    v-model:value="formState.num"
+                                    :max="selectedRow.orderqty"
+                                    class="formSlider"
+                                />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>{{getMaxNum()}}{{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="24" class="mt-20">
+                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(getSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <a-button
+                                    class="listedBtn"
+                                    :loading="loading"
+                                    :disabled="loading"
+                                    @click="submit"
+                                >{{isBuy() ? '卖出' : '买入'}}</a-button>
+                                <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+        </div>
+    </Drawer>
+    <component
+        :is="componentId"
+        v-if="componentId"
+        :selectedRow="selectedRow"
+        :isFloat="isFloat()"
+        @update="choose"
+        @cancel="closeComponent"
+    ></component>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, onMounted, PropType, ref } from 'vue';
 import Drawer from '@/common/components/drawer/index.vue';
 import { WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
-import {getAccountTypeList, getSelectedAccountId, getUserId} from '@/services/bus/account';
+import { getAccountTypeList, getSelectedAccountId, getUserId } from '@/services/bus/account';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { handleForm, handleSpotWarrant } from './setup';
@@ -187,12 +200,12 @@ import { handleNumAndMoney, getWrPosition, selecedFinance } from './setup';
 import { handleIs } from '../../setup';
 import { getCanUseMoney } from '@/services/bus/account';
 import Bus from '@/utils/eventBus/index';
-import {ListingForm} from "@/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/interface";
-import {HdWRDealOrderReq} from "@/services/proto/warehousetrade/interface";
-import {v4 as uuidv4} from "uuid";
-import moment from "moment";
-import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-import {HdWRDealOrder} from "@/services/proto/warehousetrade";
+import { ListingForm } from '@/views/market/spot_trade/components/buy-sell-market/components/financing_delisting/interface';
+import { HdWRDealOrderReq } from '@/services/proto/warehousetrade/interface';
+import { v4 as uuidv4 } from 'uuid';
+import moment from 'moment';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { HdWRDealOrder } from '@/services/proto/warehousetrade';
 
 export default defineComponent({
     name: ModalEnum.spot_trade_warehouse_delisting,
@@ -349,11 +362,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
     .need {
         color: @m-grey0;
         font-size: 12px;
@@ -409,13 +417,10 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
-.listedBtn:first-child {
-    margin-left: -35px;
-}
 .listedBtn {
     width: 120px;
     height: 30px;

src/views/market/spot_trade/components/detail/index.vue

@@ -1,6 +1,12 @@
 <template>
     <!-- 买卖大厅详情 -->
-    <Drawer :title="'详情'" :placement="'right'" :visible="visible" class="top" @cancel="cancel">
+    <Drawer
+        :title="'详情'"
+        :placement="'right'"
+        :visible="visible"
+        class="top top486"
+        @cancel="cancel"
+    >
         <div class="detailCont">
             <div class="rows">
                 <div class="row" v-for="item in lstitem" :key="item.name">
@@ -11,9 +17,9 @@
             <div class="ruleTitle">履约规则：</div>
             <div class="rulesCont">
                 <a-row>
-                    <a-col :span="24" v-for="(item, index) in lststep" :key="item.autoid">
-                        <div class="line">
-                            <div class="no">{{index + 1}}</div>
+                    <a-col :span="24" class="ruleCol">
+                        <div class="line" v-for="item in lststep" :key="item.autoid">
+                            <!-- <div class="no">{{index + 1}}</div> -->
                             <div class="name">{{item.steptypename}}</div>
                             <div class="time">{{item.stepdate}}</div>
                         </div>
@@ -118,57 +124,59 @@ export default defineComponent({
     .rulesCont {
         margin-top: 10px;
         .flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        max-width: 450px;
+        .ruleCol.ant-col {
+            margin-bottom: 10px;
+        }
     }
 }
 .ant-row {
     margin-left: 0 !important;
     margin-right: 0 !important;
     .ant-col {
-        height: 30px;
-        line-height: 30px;
         padding-left: 0 !important;
         padding-right: 0 !important;
         margin-bottom: 20px;
         .rounded-corners(3px);
+        display: inline-flex;
         .line {
             width: 100%;
-            display: inline-flex;
-        }
-        > div {
-            font-size: 14px;
-            color: @m-white11;
-            align-self: center;
-            align-items: center;
-            background: @m-blue27;
-        }
-        .no {
-            width: 30px;
-            background: @m-blue26;
-            .rounded-corners(3px);
-            text-align: center;
-            color: @m-white8;
+            .flex;
+            flex-direction: column;
+            .name {
+                min-width: 120px;
+                height: 30px;
+                background: @m-blue28;
+                border: 1px solid @m-black37;
+                .rounded-corners(3px);
+                text-align: center;
+                font-size: 16px;
+                color: @m-white6;
+            }
+
+            .time {
+                margin: 6px auto 0;
+                width: 50px;
+                height: 28px;
+                background: @m-black38;
+                .rounded-corners(5px);
+                color: @m-blue26;
+                font-size: 14px;
+                text-align: center;
+            }
         }
-        .name {
-            padding-left: 15px;
-            flex: 1;
-            font-size: 16px;
-            width: calc(100% - 93px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
+        .line:nth-child(2n) {
+            .name {
+                background: @m-yellow4;
+                border-color: @m-yellow5;
+            }
         }
-        .time {
-            width: 40px;
-            text-align: right;
-            color: @m-blue26;
-            margin-right: 8px;
+
+        .line + .line {
+            margin-left: 5px;
         }
     }
-    // .ant-col:nth-child(even) {
-    //     padding-left: 10px !important;
-    // }
-    // .ant-col:nth-child(odd) {
-    //     padding-right: 10px !important;
-    // }
 }
 </style>

src/views/market/spot_trade/components/post_buying/index.vue

@@ -1,143 +1,135 @@
 <template>
-  <!-- 挂牌求购 -->
-  <Drawer :title="'挂牌求购'"
-          :placement="'right'"
-          :visible="visible"
-          @cancel="cancel"
-          class="top">
-    <div class="post_buying">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="24">
-              <a-form-item label="交易账户"
-                           name="accountid">
-                <a-select class="inlineFormSelect"
-                          style="width: 260px"
-                          v-model:value="formState.accountid"
-                          placeholder="请选择">
-                  <a-select-option v-for="item in accountList"
-                                   :value="item.accountid"
-                                   :key="item.accountid">{{item.accountid}}</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="!isFloat()">
-              <a-form-item label="挂牌价格"
-                           name="FixedPrice">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-else>
-              <a-form-item label="基差"
-                           name="PriceMove">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                v-model:value="formState.PriceMove" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="isFloat()">
-              <a-form-item label="估算价"
-                           name="PriceMove">
-                <span class="white">{{getPrice()}}</span>
-              </a-form-item>
-            </a-col>
+    <!-- 挂牌求购 -->
+    <Drawer :title="'挂牌求购'" :placement="'right'" :visible="visible" @cancel="cancel" class="top">
+        <div class="post_buying">
+            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
+                <div class="formBar">
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="交易账户" name="accountid">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    v-model:value="formState.accountid"
+                                    placeholder="请选择"
+                                >
+                                    <a-select-option
+                                        v-for="item in accountList"
+                                        :value="item.accountid"
+                                        :key="item.accountid"
+                                    >{{item.accountid}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="!isFloat()">
+                            <a-form-item label="挂牌价格" name="FixedPrice">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-else>
+                            <a-form-item label="基差" name="PriceMove">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    v-model:value="formState.PriceMove"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="isFloat()">
+                            <a-form-item label="估算价" name="PriceMove">
+                                <span class="white">{{getPrice()}}</span>
+                            </a-form-item>
+                        </a-col>
 
-            <a-col :span="24">
-              <a-form-item label="挂牌数量"
-                           name="OrderQty">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                :min="0"
-                                :max="getMaxNum()"
-                                v-model:value="formState.OrderQty" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   v-if="!isWR()">
-              <a-form-item label="交收月"
-                           name="DeliveryMonth">
-                <a-month-picker style="width: 260px"
-                                v-model:value="formState.DeliveryMonth"
-                                :allowClear="false"
-                                class="commonDatePicker dialogDatePicker" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="mt-10">
-              <a-form-item>
-                <a-slider :min="0"
-                          v-model:value="formState.OrderQty"
-                          :max="getMaxNum()"
-                          class="formSlider" />
-                <div class="unit">
-                  <span>{{getMaxNum() ? selectedRow.minivalue : 0}}</span>
-                  <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌数量" name="OrderQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    :max="getMaxNum()"
+                                    v-model:value="formState.OrderQty"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" v-if="!isWR()">
+                            <a-form-item label="交收月" name="DeliveryMonth">
+                                <a-month-picker
+                                    style="width: 260px"
+                                    v-model:value="formState.DeliveryMonth"
+                                    :allowClear="false"
+                                    class="commonDatePicker dialogDatePicker"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="mt-10">
+                            <a-form-item>
+                                <a-slider
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                    :max="getMaxNum()"
+                                    class="formSlider"
+                                />
+                                <div class="unit">
+                                    <span>{{getMaxNum() ? selectedRow.minivalue : 0}}</span>
+                                    <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="起摘数量" class="relative">
+                                <a-input
+                                    class="commonInput"
+                                    :suffix="selectedRow.enumdicname"
+                                    :min="selectedRow.minivalue"
+                                    style="width: 260px"
+                                />
+                                <div
+                                    class="tip"
+                                >最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative mt20">
+                            <a-form-item :label="isFloat() ? '估算金额' : '挂牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(getSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
                 </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="起摘数量"
-                           class="relative">
-                <a-input class="commonInput"
-                         :suffix="selectedRow.enumdicname"
-                         :min="selectedRow.minivalue"
-                         style="width: 260px" />
-                <div class="tip">最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative mt20">
-              <a-form-item :label="isFloat() ? '估算金额' : '挂牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</span>
-                  </a-col>
+                <a-row :gutter="24">
+                    <a-col :span="24" class="fixedBtns">
+                        <a-form-item class="btnCenter">
+                            <a-button class="listedBtn" @click="submit">买入</a-button>
+                            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+                        </a-form-item>
+                    </a-col>
                 </a-row>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24"
-                   class="mt20">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          @click="submit">买入</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -293,6 +285,11 @@ export default defineComponent({
     height: 100%;
     .flex;
     flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    .ant-form {
+        height: 100%;
+    }
     .condition {
         width: 100%;
         height: 48px;
@@ -320,11 +317,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 
 .unit {
@@ -333,13 +325,10 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
-.listedBtn:first-child {
-    margin-left: -35px;
-}
 .listedBtn {
     width: 120px;
     height: 30px;

src/views/market/spot_trade/spot_trade_order_transaction/components/buy-sell-market/components/delisting/index.vue

@@ -315,11 +315,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 ::v-deep.ant-slider.formSlider {
     width: 260px;
@@ -334,13 +329,10 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
-.listedBtn:first-child {
-    margin-left: -35px;
-}
 .listedBtn {
     width: 120px;
     height: 30px;

src/views/market/warehouseTrade/components/delisting/index.vue

@@ -141,11 +141,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 .mt-20 {
     margin-top: -20px;
@@ -178,7 +173,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }

src/views/market/warehouseTrade/components/listed/index.vue

@@ -141,11 +141,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 .mt-20 {
     margin-top: -20px;
@@ -178,7 +173,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }

src/views/order/financing_manager/components/financing_manager_contract/components/buyback/index.vue

@@ -1,89 +1,98 @@
 <template>
-  <!-- 回购仓单 -->
-  <Drawer :title="'回购仓单'"
-          :placement="'right'"
-          :visible="visible"
-          class="delistingBottom"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="品种">
-                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="仓库">
-                <span class="white ml10">{{selectedRow.warehousename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约商品">
-                <span class="white ml10">{{selectedRow.wrtypename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="购买数量">
-                <span class="white ml10">{{ selectedRow.wrqty + " " + selectedRow.enumdicname }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="已回购数量">
-                <span class="white ml10">{{ selectedRow.buybackwrpositionqty + " " + selectedRow.enumdicname }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="待回购数量">
-                <span class="white ml10">{{ selectedRow.remainwrpositionqty + " " + selectedRow.enumdicname }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="本次回购数量"
-                           name="num"
-                           class="relative">
-                <a-input-number class="commonInput ml10"
-                                :min="1"
-                                v-model:value="formState.num"
-                                style="width: 200px" />
+    <!-- 回购仓单 -->
+    <Drawer
+        :title="'回购仓单'"
+        :placement="'right'"
+        :visible="visible"
+        class="delistingBottom"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <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="品种">
+                                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="仓库">
+                                <span class="white ml10">{{selectedRow.warehousename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约商品">
+                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="购买数量">
+                                <span
+                                    class="white ml10"
+                                >{{ selectedRow.wrqty + " " + selectedRow.enumdicname }}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="已回购数量">
+                                <span
+                                    class="white ml10"
+                                >{{ selectedRow.buybackwrpositionqty + " " + selectedRow.enumdicname }}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="待回购数量">
+                                <span
+                                    class="white ml10"
+                                >{{ selectedRow.remainwrpositionqty + " " + selectedRow.enumdicname }}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="本次回购数量" name="num" class="relative">
+                                <a-input-number
+                                    class="commonInput ml10"
+                                    :min="1"
+                                    v-model:value="formState.num"
+                                    style="width: 200px"
+                                />
 
-                <div class="day">吨</div>
-                  <!-- 本次可回购数量=min{资金方对应仓单头寸可用数量，融资合同剩余待回购数量} -->
-                <div class="tip">{{ "本次可回购数量" + selectedRow.remainwrpositionqty + " " + selectedRow.enumdicname }}</div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-                <!--（回购数量/合同剩余数量） * 合同剩余金额 -->
-              <a-form-item label="本次回购金额">
-                <span class="white ml10">{{ (((formState.num ===  0 ? 1 : formState.num) * selectedRow.remainamount) / selectedRow.remainwrpositionqty).toFixed(2) + " 元" }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="剩余保证金">
-                <span class="white ml10">{{ selectedRow.initmargin + " 元" }}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+                                <span class="input-enumdicname">吨</span>
+                                <!-- 本次可回购数量=min{资金方对应仓单头寸可用数量，融资合同剩余待回购数量} -->
+                                <div
+                                    class="tip"
+                                >{{ "本次可回购数量" + selectedRow.remainwrpositionqty + " " + selectedRow.enumdicname }}</div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <!--（回购数量/合同剩余数量） * 合同剩余金额 -->
+                            <a-form-item label="本次回购金额">
+                                <span
+                                    class="white ml10"
+                                >{{ (((formState.num === 0 ? 1 : formState.num) * selectedRow.remainamount) / selectedRow.remainwrpositionqty).toFixed(2) + " 元" }}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="剩余保证金">
+                                <span class="white ml10">{{ selectedRow.initmargin + " 元" }}</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-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -95,11 +104,11 @@ import { _closeModal } from '@/common/setup/modal/modal';
 import { handleForm } from './setup';
 import { validateAction } from '@/common/setup/form';
 import { FormState } from './interface';
-import {WarehouseRepurchase} from "@/services/proto/warehousetrade";
-import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-import {WarehouseRepurchaseReq} from "@/services/proto/warehousetrade/interface";
-import {getTimeValue} from "@/utils/time";
-import Long from "long";
+import { WarehouseRepurchase } from '@/services/proto/warehousetrade';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { WarehouseRepurchaseReq } from '@/services/proto/warehousetrade/interface';
+import { getTimeValue } from '@/utils/time';
+import Long from 'long';
 
 export default defineComponent({
     name: ModalEnum.financing_manager_contract_repurchase_warrant,
@@ -121,7 +130,7 @@ export default defineComponent({
                     ExtBusinessID: getTimeValue(), // uint64 外部业务流水号
                     SCFContractID: Long.fromString(props.selectedRow.scfcontractid), // uint64 SCF合同ID
                     SCFContractType: props.selectedRow.scfcontracttype, // int32 合同类型
-                    WRPositionQty: param.num // uint64 仓单头寸数量
+                    WRPositionQty: param.num, // uint64 仓单头寸数量
                 };
                 requestResultLoadingAndInfo(WarehouseRepurchase, paramReq, loading, ['回购仓单成功', '回购仓单失败:']).then(() => {
                     cancel(true);

src/views/order/financing_manager/components/financing_manager_contract/components/pay/index.vue

@@ -1,52 +1,53 @@
 <template>
-  <!-- 付款-->
-  <Drawer :title="'付款'"
-          :placement="'right'"
-          :visible="visible"
-          class="delistingBottom"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="借款金额">
-                <span class="white ml10">{{ selectedRow.lenderamount + " 元"}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="剩余金额">
-                <span class="white ml10">{{ selectedRow.remainamount + " 元"}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="已计费用">
-                <span class="white ml10">{{ selectedRow.totalinterest + " 元"}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="费用欠款">
-                <span class="red ml10">{{ selectedRow.interestdebt + " 元"}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 付款-->
+    <Drawer
+        :title="'付款'"
+        :placement="'right'"
+        :visible="visible"
+        class="delistingBottom"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <a-form class="inlineForm dialogForm" ref="formRef">
+                <div class="formBar">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="借款金额">
+                                <span class="white ml10">{{ selectedRow.lenderamount + " 元"}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="剩余金额">
+                                <span class="white ml10">{{ selectedRow.remainamount + " 元"}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="已计费用">
+                                <span class="white ml10">{{ selectedRow.totalinterest + " 元"}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="费用欠款">
+                                <span class="red ml10">{{ selectedRow.interestdebt + " 元"}}</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-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -55,11 +56,11 @@ import Drawer from '@/common/components/drawer/index.vue';
 import { WrScfContract } from '@/services/go/wrtrade/interface';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 import { _closeModal } from '@/common/setup/modal/modal';
-import {PaymentArrears} from "@/services/proto/warehousetrade";
-import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-import {PaymentArrearsReq} from "@/services/proto/warehousetrade/interface";
-import {getTimeValue} from "@/utils/time";
-import * as Long from "long";
+import { PaymentArrears } from '@/services/proto/warehousetrade';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { PaymentArrearsReq } from '@/services/proto/warehousetrade/interface';
+import { getTimeValue } from '@/utils/time';
+import * as Long from 'long';
 
 export default defineComponent({
     name: ModalEnum.financing_manager_contract_pay_arrears,

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

@@ -1,78 +1,78 @@
 <template>
-  <!-- 延期-->
-  <Drawer :title="'延期申请'"
-          :placement="'right'"
-          class="delistingBottom"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="品种">
-                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="仓库">
-                <span class="white ml10">{{selectedRow.warehousename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约商品">
-                <span class="white ml10">{{selectedRow.wrtypename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="当前步骤">
-                <span class="white ml10">{{selectedRow.curstepname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="关联单号">
-                <span class="white ml10">{{selectedRow.relatedorderid}}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="申请延期天数"
-                           name="days"
-                           class="relative">
-                <a-input-number class="commonInput ml10"
-                                :min="1"
-                                v-model:value="formState.days"
-                                style="width: 200px" />
-                <div class="day">天</div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="备注"
-                           name="remark">
-                <a-input class="commonInput ml10"
-                         v-model:value="formState.remark"
-                         style="width: 420px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 延期-->
+    <Drawer
+        :title="'延期申请'"
+        :placement="'right'"
+        class="delistingBottom"
+        :visible="visible"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <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="品种">
+                                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="仓库">
+                                <span class="white ml10">{{selectedRow.warehousename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约商品">
+                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="当前步骤">
+                                <span class="white ml10">{{selectedRow.curstepname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="关联单号">
+                                <span class="white ml10">{{selectedRow.relatedorderid}}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="申请延期天数" name="days" class="relative">
+                                <a-input-number
+                                    class="commonInput ml10"
+                                    :min="1"
+                                    v-model:value="formState.days"
+                                    style="width: 200px"
+                                />
+                                <span class="input-enumdicname">天</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="备注" name="remark">
+                                <a-input
+                                    class="commonInput ml10"
+                                    v-model:value="formState.remark"
+                                    style="width: 420px"
+                                />
+                            </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-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">

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

@@ -1,67 +1,68 @@
 <template>
-  <!-- 付款-->
-  <Drawer :title="'付款'"
-          :placement="'right'"
-          :visible="visible"
-          class="delistingBottom"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="品种">
-                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="仓库">
-                <span class="white ml10">{{selectedRow.warehousename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约商品">
-                <span class="white ml10">{{selectedRow.wrtypename}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约总金额">
-                <span class="white ml10">{{selectedRow.amount.toFixed(2)}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="当前步骤">
-                <span class="white ml10">{{selectedRow.curstepname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="本次需支付">
-                <span class="white ml10">{{ stepamount }}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="剩余款">
-                <span class="white ml10">{{selectedRow.unpaidamount.toFixed(2)}}</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">提交</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+    <!-- 付款-->
+    <Drawer
+        :title="'付款'"
+        :placement="'right'"
+        :visible="visible"
+        class="delistingBottom"
+        @cancel="cancel"
+    >
+        <div class="listed">
+            <a-form class="inlineForm dialogForm" ref="formRef">
+                <div class="formBar">
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="品种">
+                                <span class="white ml10">{{selectedRow.deliverygoodsname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="仓库">
+                                <span class="white ml10">{{selectedRow.warehousename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约商品">
+                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约总金额">
+                                <span class="white ml10">{{selectedRow.amount.toFixed(2)}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="当前步骤">
+                                <span class="white ml10">{{selectedRow.curstepname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="本次需支付">
+                                <span class="white ml10">{{ stepamount }}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="剩余款">
+                                <span class="white ml10">{{selectedRow.unpaidamount.toFixed(2)}}</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-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -76,7 +77,7 @@ import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo
 import { HdWRDealOrder } from '@/services/proto/warehousetrade';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import { handlePerformancePlanStep } from '../setup';
-import * as Long from "long";
+import * as Long from 'long';
 
 export default defineComponent({
     name: ModalEnum.performance_information_buy_performance_pay,
@@ -111,7 +112,7 @@ export default defineComponent({
             cancel,
             submit,
             loading,
-            stepamount
+            stepamount,
         };
     },
 });

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

@@ -1,186 +1,195 @@
 <template>
-  <!-- 预售仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'right'"
-          class="delistingBottom"
-          :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>
-      </div>
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <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>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="!isFloat()">
-              <a-form-item label="挂牌价"
-                           name="FixedPrice">
-                <a-input-number class="dialogInput"
-                                style="width: 140px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice"
-                                placeholder="请输入挂牌价" />
-              </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"
-                                :min="0"
-                                v-model:value="formState.OrderQty"
-                                placeholder="请输入挂牌数量" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="起摘数量"
-                           class="relative"
-                           name="DelistMinQty">
-                <a-input-number class="commonInput"
-                                :min="0"
-                                v-model:value="formState.DelistMinQty"
-                                style="width: 140px" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <div class="tip">最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</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" />
-                <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>
+    <!-- 预售仓单 现货明细 挂牌 -->
+    <Drawer
+        :title="'挂牌'"
+        :placement="'right'"
+        class="delistingBottom"
+        :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>
+            </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>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="!isFloat()">
+                            <a-form-item label="挂牌价" name="FixedPrice">
+                                <a-input-number
+                                    class="dialogInput"
+                                    style="width: 140px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                    placeholder="请输入挂牌价"
+                                />
+                            </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"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                    placeholder="请输入挂牌数量"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    :min="0"
+                                    v-model:value="formState.DelistMinQty"
+                                    style="width: 140px"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <div
+                                    class="tip"
+                                >最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</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>
 
-          <a-row :gutter="24"
-                 v-if="isFloat()">
-            <a-col :span="24">
-              <a-form-item label="行情商品"
-                           name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+                    <a-row :gutter="24" v-if="isFloat()">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品" name="goodsid">
+                                <!-- <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"
-                          v-model:value="formState.goodsid"
-                          @change="handleGoodsChange"
-                          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"
-                   class="relative">
-              <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</span>
-                  </a-col>
+                                <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"
+                                    v-model:value="formState.goodsid"
+                                    @change="handleGoodsChange"
+                                    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" class="relative">
+                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(handleSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </div>
+                <a-row :gutter="24" class="fixedBtns">
+                    <a-col :span="24">
+                        <a-form-item class="btnCenter">
+                            <a-button
+                                class="listedBtn"
+                                :loading="loading"
+                                :disabled="loading"
+                                @click="submit"
+                            >卖出</a-button>
+                            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+                        </a-form-item>
+                    </a-col>
                 </a-row>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <a-button class="listedBtn"
-                          :loading="loading"
-                          :disabled="loading"
-                          @click="submit">卖出</a-button>
-                <a-button class="ml10 cancelBtn"
-                          @click="cancel">取消</a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-    </div>
-  </Drawer>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -362,9 +371,7 @@ export default defineComponent({
         }
     }
     .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
+        max-height: 100%;
     }
 }
 .mt-20 {
@@ -406,7 +413,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
@@ -438,10 +445,4 @@ export default defineComponent({
 .ml5 {
     margin-left: 5px;
 }
-
-::v-deep.dialogDatePicker.ant-calendar-picker .ant-input {
-    background: @m-grey21;
-    border: 1px solid @m-grey14;
-    .rounded-corners(3px);
-}
 </style>;

src/views/order/spot_warran/components/spot_warrant_inventory_summary/components/listing.vue

@@ -141,11 +141,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 .mt-20 {
     margin-top: -20px;
@@ -178,7 +173,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }

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

@@ -201,11 +201,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 .mt-20 {
     margin-top: -20px;
@@ -238,7 +233,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }

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

@@ -1,175 +1,183 @@
 <template>
-  <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'right'"
-          class="delistingBottom"
-          :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>
-      </div>
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <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>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="!isFloat()">
-              <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="isFloat()">
-              <a-form-item label="基差"
-                           name="PriceMove">
-                <a-input-number class="commonInput"
-                                :min="0"
-                                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"
-                                :min="0"
-                                v-model:value="formState.OrderQty"
-                                placeholder="请输入挂牌数量" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="起摘数量"
-                           class="relative"
-                           name="DelistMinQty">
-                <a-input-number class="commonInput"
-                                :min="0"
-                                v-model:value="formState.DelistMinQty"
-                                style="width: 140px" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <div class="tip">最小单位：1{{selectedRow.enumdicname}}</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" />
-                <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"
-                 v-if="isFloat()">
-            <a-col :span="24">
-              <a-form-item label="行情商品"
-                           name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+    <!-- 现货仓单 现货明细 挂牌 -->
+    <Drawer
+        :title="'挂牌'"
+        :placement="'right'"
+        class="delistingBottom"
+        :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>
+            </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>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="!isFloat()">
+                            <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="isFloat()">
+                            <a-form-item label="基差" name="PriceMove">
+                                <a-input-number
+                                    class="commonInput"
+                                    :min="0"
+                                    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"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                    placeholder="请输入挂牌数量"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    :min="0"
+                                    v-model:value="formState.DelistMinQty"
+                                    style="width: 140px"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <div class="tip">最小单位：1{{selectedRow.enumdicname}}</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" v-if="isFloat()">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品" name="goodsid">
+                                <!-- <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"
-                   class="relative">
-              <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24"
-                   class="relative">
-              <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                <a-row>
-                  <a-col :span="8"
-                         v-if="getMargin()">
-                    <span class="white ml8">{{getMargin()}}</span>
-                  </a-col>
-                  <a-col :span="4"
-                         class="tr">
-                    <span class="grey1">可用资金</span>
-                  </a-col>
-                  <a-col :span="12">
-                    <span class="white ml8">{{getCanUseMoney(handleSelectedAccount())}}</span>
-                  </a-col>
+                                <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" class="relative">
+                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24" class="relative">
+                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                                <a-row>
+                                    <a-col :span="8" v-if="getMargin()">
+                                        <span class="white ml8">{{getMargin()}}</span>
+                                    </a-col>
+                                    <a-col :span="4" class="tr">
+                                        <span class="grey1">可用资金</span>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <span
+                                            class="white ml8"
+                                        >{{getCanUseMoney(handleSelectedAccount())}}</span>
+                                    </a-col>
+                                </a-row>
+                            </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-item>
-            </a-col>
-          </a-row>
-
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <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>
-  </Drawer>
+            </a-form>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -361,9 +369,7 @@ export default defineComponent({
         }
     }
     .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
+        max-height: 100%;
     }
 }
 .mt-20 {
@@ -375,7 +381,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }

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

@@ -8,13 +8,8 @@
                 <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
                 <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
             </div>
-            <div class="formBar">
-                <a-form
-                    class="inlineForm dialogForm"
-                    ref="formRef"
-                    :model="formState"
-                    :rules="rules"
-                >
+            <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="OutQty">
@@ -41,7 +36,14 @@
                     <a-row :gutter="24">
                         <a-col :span="12" class="mt-20">
                             <a-form-item>
-                                <a-progress class="formProgress" :percent="30" />
+                                <!-- <a-progress class="formProgress" :percent="30" /> -->
+                                <a-slider
+                                    v-model:value="formState.OutQty"
+                                    ::min="0"
+                                    :max="selectedRow.enableqty"
+                                    class="formSlider"
+                                    style="width: 140px;"
+                                />
                                 <div class="unit">
                                     <span>0</span>
                                     <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
@@ -64,6 +66,7 @@
                             <a-form-item label="预约日期" name="AppointmentDate">
                                 <a-date-picker
                                     class="commonDatePicker dialogDatePicker"
+                                    allowClear="false"
                                     v-model:value="formState.AppointmentDate"
                                     style="width: 140px"
                                 />
@@ -82,21 +85,21 @@
                         </a-col>
                         <a-col :span="12">&nbsp;</a-col>
                     </a-row>
-                    <a-row :gutter="24" type="flex" justify="center">
-                        <a-col :span="24">
-                            <a-form-item class="tc">
-                                <a-button
-                                    class="listedBtn"
-                                    :loading="loading"
-                                    :disabled="loading"
-                                    @click="submit"
-                                >提货</a-button>
-                                <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
-                            </a-form-item>
-                        </a-col>
-                    </a-row>
-                </a-form>
-            </div>
+                </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" @click="cancel">取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
         </div>
     </Drawer>
 </template>
@@ -210,9 +213,7 @@ export default defineComponent({
         }
     }
     .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
+        max-height: 100%;
     }
 }
 
@@ -243,13 +244,10 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }
-.listedBtn:first-child {
-    margin-left: -35px;
-}
 .listedBtn {
     width: 120px;
     height: 30px;
@@ -275,9 +273,4 @@ export default defineComponent({
 .ml10 {
     margin-left: 10px;
 }
-::v-deep.dialogDatePicker.ant-calendar-picker .ant-input {
-    background: @m-grey21;
-    border: 1px solid @m-grey14;
-    .rounded-corners(3px);
-}
 </style>;

src/views/order/spot_warran/components/spot_warrant_spot_summary/components/index.vue

@@ -80,11 +80,6 @@ export default defineComponent({
             margin-left: 10px;
         }
     }
-    .formBar {
-        width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
-    }
 }
 
 ::v-deep.formProgress {
@@ -114,7 +109,7 @@ export default defineComponent({
     .flex;
     justify-content: space-between;
     font-size: 14px;
-    color: @m-grey1;
+    color: @m-grey41;
     height: 14px;
     line-height: 14px;
 }