样式调整

src/assets/styles/mixin.less

@@ -937,6 +937,9 @@
 .red {
     color: @m-red0;
 }
+.red1 {
+    color: @m-red1;
+}
 .grey {
     color: @m-grey2;
 }

src/assets/styles/theme.css

@@ -153,6 +153,7 @@
     --m-green0: #1FF195;
     --m-green1: #10251d;
 
+    --m-red1: #FF2B2B;
     --m-red2: #271112;
 
     --m-yellow4: #3a2215;
@@ -323,6 +324,7 @@
     --m-green0: #1FF195;
     --m-green1: #10251d;
 
+    --m-red1: #FF2B2B;
     --m-red2: #271112;
 
     --m-yellow4: #3a2215;
@@ -491,6 +493,7 @@
     --m-green0: #00A843;
     --m-green1: #e8ffef;
 
+    --m-red1: #EE3434;
     --m-red2: #ffe2e2;
 
     --m-yellow4: #FFE8DB;

src/assets/styles/variables.less

@@ -172,7 +172,7 @@
 
 @m-red0: #ff4d4f;
 @m-red0-hover: rgba(@m-red0, .8);
-@m-red1: #FF2B2B;
+@m-red1: var(--m-red1);
 @m-red1-hover: rgba(@m-red1, .8);
 @m-red2: var(--m-red2);
 @m-red3: #ff2b2f;                // 交易界面色值

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

@@ -9,46 +9,50 @@
                 <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
                 <div class="arrowRightIcon"></div>
             </div>
-            <div class="priceBar bdf1 ml20">
-                <div>
+            <div class="inlineBar">
+                <div class="valNums bdf1 ml10">
                     <!-- 最新价 -->
-                    <span>1255.00</span>
-                    <!-- 涨跌值 -->
-                    <span>1255.00</span>
-                    <!-- 涨跌幅 -->
-                    <span>1255.00</span>
-                </div>
-                <div class="inlineBar">
-                    <div class="greenBar green">
-                        <div class="numBlock ml15">
-                            <div class="first">卖价</div>
-                            <div class="last">{{selectedRow.sellprice}}</div>
-                        </div>
-                        <div class="numBlock">
-                            <div class="first">卖量</div>
-                            <div class="last">{{selectedRow.sellqty}}</div>
-                        </div>
+                    <div class="firstNum start red1">1255.00</div>
+                    <div class="lastNum start">
+                        <!-- 涨跌值 -->
+                        <div class="red1">1255.00</div>
+                        <!-- 涨跌幅 -->
+                        <div class="red1 ml20">1255.00</div>
                     </div>
-                    <div class="greenBar green">
-                        <div class="numBlock ml15">
-                            <div class="first">卖价</div>
-                            <div class="last">{{selectedRow.sellprice}}</div>
+                </div>
+                <div class="priceBar ml20">
+                    <div class="inlineBar start">
+                        <div class="greenBar green">
+                            <div class="numBlock ml15">
+                                <div class="first">卖价</div>
+                                <div class="last">{{selectedRow.sellprice}}</div>
+                            </div>
+                            <div class="numBlock">
+                                <div class="first">卖量</div>
+                                <div class="last">{{selectedRow.sellqty}}</div>
+                            </div>
                         </div>
-                        <div class="numBlock">
-                            <div class="first">卖量</div>
-                            <div class="last">{{selectedRow.sellqty}}</div>
+                        <div class="greenBar green">
+                            <div class="numBlock ml15">
+                                <div class="first">卖价</div>
+                                <div class="last">{{selectedRow.sellprice}}</div>
+                            </div>
+                            <div class="numBlock">
+                                <div class="first">卖量</div>
+                                <div class="last">{{selectedRow.sellqty}}</div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="inlineBar">
-                    <div class="redBar red">
-                        <div class="numBlock">
-                            <div class="first">买价</div>
-                            <div class="last">{{selectedRow.buyprice}}</div>
-                        </div>
-                        <div class="numBlock">
-                            <div class="first">买量</div>
-                            <div class="last">{{selectedRow.buyqty}}</div>
+                    <div class="inlineBar start">
+                        <div class="redBar red1">
+                            <div class="numBlock">
+                                <div class="first">买价</div>
+                                <div class="last">{{selectedRow.buyprice}}</div>
+                            </div>
+                            <div class="numBlock">
+                                <div class="first">买量</div>
+                                <div class="last">{{selectedRow.buyqty}}</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -189,21 +193,38 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
-.priceBar {
+.valNums {
     .flex;
     flex-direction: column;
-    height: 32px;
-    .inlineBar {
+    padding-left: 20px;
+    .firstNum {
+        font-size: 18px;
+        line-height: 18px;
+        font-weight: 400;
+    }
+    .lastNum {
+        margin-top: 2px;
         display: inline-flex;
+        font-size: 12px;
+        line-height: 12px;
+        font-weight: 300;
     }
+}
+.inlineBar {
+    display: inline-flex;
+}
+.priceBar {
+    .flex;
+    flex-direction: column;
+    height: 32px;
     .greenBar,
     .redBar {
         height: 16px;
         line-height: 16px;
     }
 }
-.buy-sell-market .buy-sell-market-title div {
-    align-self: flex-start;
-    align-items: flex-start;
+.start {
+    align-self: flex-start !important;
+    align-items: flex-start !important;
 }
 </style>