样式新增

src/assets/styles/mixin.less

@@ -162,6 +162,9 @@
     .ant-input-suffix {
         color: #E5E5E5;
     }
+    &:hover, &:focus {
+        border-color:#0C95FF;
+    }
 }
 .tableConditionInput {
     width: 140px;
@@ -337,29 +340,44 @@
 }
 .inlineFormSelect.ant-select-single {
     .rounded-corners(3px);
+    border: 1px solid #2B3F52;
+    &:hover, &:focus {
+        border-color:#0C95FF;
+    }
     .ant-select-selector {
         height: 30px;
         padding: 0 8px;
         background: #15202B;
-        border: 1px solid #2B3F52;
-        border-radius: 3px;
+        border: 0;
         color: #E5E5E5;
         .ant-select-selection-placeholder {
             color: @m-grey10;
         }
+        
     } 
     .ant-select-arrow {
         right: 8px;
         color: #3A87F7 !important;
     }
 }
+.shortSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) {
+    margin-right: 0;
+    .ant-select-selector {
+        padding: 0 5px;
+        .ant-select-selection-item {
+            padding-right: 14px;
+        }
+    }
+}
 .typeSelect.ant-select-single:extend(.inlineFormSelect.ant-select-single) {
     .ant-select-selector {
-        border: 1px solid #0C95FF;
         .ant-select-selection-placeholder {
             color: @m-grey10;
         }
     }
+    .ant-select-arrow {
+        color: @m-blue0;
+    }
 }
 
 .dialogInput {

src/components/drawer/index.vue

@@ -69,6 +69,9 @@ export default defineComponent({
     height: 330px;
     background: transparent;
     z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 586px !important;
+    }
 }
 .top {
     .position(fixed, 116px, 0, auto, auto);
@@ -76,6 +79,9 @@ export default defineComponent({
     height: 350px;
     background: transparent;
     z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 446px !important;
+    }
 }
 .tradeDialog {
     .position(fixed, 116px, 0, auto, auto);
@@ -83,13 +89,15 @@ export default defineComponent({
     height: 310px;
     background: transparent;
     z-index: 10;
+    .ant-drawer-content-wrapper {
+        width: 467px !important;
+    }
 }
 .ant-drawer.ant-drawer-open {
     .ant-drawer-mask {
         background: transparent;
     }
     .ant-drawer-content-wrapper {
-        width: 586px !important;
         box-shadow: none;
         .ant-drawer-content {
             background: transparent;

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

@@ -34,7 +34,7 @@
                     <div slot="addonBefore"><a-icon type="minus" /></div>
                     <div slot="addonAfter"><a-icon type="plus" /></div>
                 </a-input>
-                <a-select class="inlineFormSelect"  default-value="1" style="width: 60px; margin-left: 7px;">
+                <a-select class="shortSelect"  default-value="1" style="width: 60px; margin-left: 7px;">
                     <a-select-option value="1">
                         最新
                     </a-select-option>
@@ -50,20 +50,20 @@
                     <div slot="addonBefore"><a-icon type="minus" /></div>
                     <div slot="addonAfter"><a-icon type="plus" /></div>
                 </a-input>
-                <a-button>复位</a-button>
+                <a-button class="resetBtn">复位</a-button>
             </a-col>
         </a-row>
-        <a-row>
+        <a-row class="btnBlock">
             <a-col :span="24">
-                <a-button>
+                <a-button class="numAndOperBtn red">
                     <p>54353</p>
                     <p>买入</p>
                 </a-button>
-                <a-button>
+                <a-button class="numAndOperBtn green">
                     <p>54353</p>
                     <p>卖出</p>
                 </a-button>
-                <a-button>
+                <a-button class="numAndOperBtn yellow">
                     <p>先开先平</p>
                     <p>平仓</p>
                 </a-button>
@@ -71,13 +71,102 @@
         </a-row>
         <a-row class="btns">
             <a-col :span="24">
-                <div><span>可买&lt;=</span><span>0</span></div>
-                <div><span>可买&lt;=</span><span>0</span></div>
+                <div class="avaliable">
+                    <div><span>可买&lt;=</span><span class="white">0</span></div>
+                    <div><span>可买&lt;=</span><span class="white">0</span></div>
+                </div>
             </a-col>
         </a-row>
     </div>
     <div class="right">
-
+        <div class="rightBar">
+            <div class="topFive">
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">5</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">32.3K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">4</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">24.5K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">3</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">40.2K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">2</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">23.3K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">1</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">54.0K</a-col>
+                </a-row>
+            </div>
+            <div class="bottomFive">
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">1</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">32.3K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">2</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">24.5K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">3</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">40.2K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">4</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">23.3K</a-col>
+                </a-row>
+                <a-row class="line">
+                    <a-col class="firstCol">
+                        <div class="no">5</div>
+                        <div class="num">355.000</div>
+                    </a-col>
+                    <a-col class="lastCol">54.0K</a-col>
+                </a-row>
+            </div>
+            <div class="newLine">
+                <div class="lineBlock">
+                    <div>最新</div>
+                    <div class="red">546546</div>
+                </div>
+            </div>
+            <div class="newLine">
+                <div class="lineBlock">
+                    <div>涨幅</div>
+                    <div class="red">0.76%</div>
+                </div>
+            </div>
+        </div>
     </div>
   </div>
 </template>
@@ -104,13 +193,17 @@ export default defineComponent({
 .trade {
     width: 100%;
     height: 100%;
+    background: #1D2F3F;
     .inlineflex;
-    overflow: auto;
+    overflow: hidden;
     .left {
         flex: 1;
         height: 100%;
         padding-left: 18px;
         padding-right: 9px;
+        .inlineFormSelect.ant-select-single {
+            margin-right: 0;
+        }
         .ant-row {
             margin-bottom: 10px;
             font-size: 14px;
@@ -118,7 +211,7 @@ export default defineComponent({
             line-height: 30px;
             color: @m-grey1;
             .ant-col.label {
-                width: 50px;
+                width: 42px;
             }
             .ant-col:last-child {
                 color: @m-white1;
@@ -127,13 +220,175 @@ export default defineComponent({
         .ant-row:first-child {
             margin-top: 21px;
         }
+        .ant-row.btnBlock {
+            height: 64px;
+            margin-top: 22px;
+        }
         .btns {
-            
+            margin-top: -5px;
+            .avaliable {
+                .inlineflex;
+                color: #7A8A94;
+                div+div {
+                    margin-left: 33px;
+                }
+            }
+            .white {
+                color: @m-white0;
+            }
+        }
+        .ant-btn.numAndOperBtn {
+            width: 80px;
+            height: 64px;
+            border-radius: 5px;
+            text-align: center;
+            padding: 0;
+            p {
+                width: 100%;
+                height: 32px;
+                line-height: 30px;
+                text-align: center;
+                font-size: 16px;
+                margin-bottom: 0;
+            }
+            p:last-child {
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 28px;
+            }
+        }
+        .numAndOperBtn+.numAndOperBtn {
+            margin-left: 5px;
+        }
+        .red {
+            color: #FF2B2F;
+            background: #2C1B1B;
+            border: 1px solid #FF2B2B;
+            p:first-child{
+                border-bottom: 1px dashed #691010
+            }
+            p:last-child {
+                color: #FF2B2F;
+            }
+        }
+        .green {
+            background: #173025;
+            border: 1px solid #1EE18C;
+            p:first-child {
+                border-bottom: 1px dashed #1EE18C;     
+                color: #1EE18C;
+            }
+            p:last-child { 
+                color: #1EE18C;
+            }
+        }
+        .yellow { 
+            background: #422B0D;           
+            border: 1px solid #FFAE00;
+            p:first-child {
+                border-bottom: 1px dashed #653F0D;     
+                color: #FFAE00;
+            }
+            p:last-child { 
+                color: #FFAE00;
+            }
+        }
+        .ant-btn.resetBtn {
+            margin-left: 6px;
+            width: 60px;
+            height: 30px;
+            line-height: 28px;
+            padding: 0;
+            color: #0C95FF;            
+            font-size: 14px;
+            text-align: center;
+            background: #0E2F4C;
+            border: 1px solid #0C95FF;
+            border-radius: 3px;
         }
     }
     .right {
-        width: 126px;
+        width: 150px;
+        height: 100%;
+        padding-top: 6px;
+        margin-right: 12px;
+        .flex;
+        flex-direction: column;
+        .rightBar {
+            height: 292px;
+            background: #15202B;
+            border: 2px solid #15202B;
+            .rounded-corners(5px);
+        }
+    }
+}
+.ant-row.line {
+    width: 100%;
+    height: 14px;
+    margin-bottom: 8px;
+    .inlineflex;
+    .ant-col.firstCol {
+        width: 70%;
+        .inlineflex;
+        .no {
+            width: 14px;
+            height: 14px;
+            line-height: 14px;
+            background: #FFAE00;
+            .rounded-corners(2px);
+            text-align: center;
+            font-size: 12px;
+            color: @m-white0;
+            align-self: center;
+            align-items: center;
+        }
+        .num {
+            margin-left: 9px;
+            font-size: 12px;
+            color: #F52B2B;
+            align-self: center;
+            align-items: center;
+        }
+    }
+    .ant-col.lastCol {
+        flex: 1;
+        max-width: 30%;
+        text-align: right;
+        align-self: center;
+        align-items: center;
+        color: @m-white1;
+        font-size: 12px;
+    }
+}
+.topFive {
+    width: 100%;
+    height: 124px;
+    padding: 4px 6px;
+    background: #422B0D;
+    .rounded-corners(5px, 5px, 0, 0);
+    
+}
+.bottomFive:extend(.topFive) {
+    background: #0E2F4C;
+    .rounded-corners(0);
+}
+.newLine {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    .lineBlock {
+        width: 100%;
         height: 100%;
+        .inlineflex;
+        justify-content: space-between;
+        div {
+            color: @m-white0;
+            font-size: 12px;
+        }
+        .red {
+           color: #F12A2D;
+        }
     }
 }
 </style>;