Merge remote-tracking branch 'origin/master'

src/assets/styles/mixin.less

@@ -165,6 +165,8 @@
     .ant-input-suffix {
         color: @m-grey41;
         margin-left: 0;
+        position: absolute;
+        right: 5px;
     }
     &:hover, &:focus {
         border-color:@m-blue10;
@@ -744,13 +746,14 @@
 
 .input-enumdicname {
     color: @m-grey41;
-    margin-left: 9px;
     font-size: 14px;
+    position: absolute;
+    right: 5px;
   }
 .input-enumdicname-absolute {
     position: absolute;
     top: -8px;
-    right: -110px;
+    right: -78px;
     color: @m-grey41;
     margin-left: 5px;
     font-size: 14px;

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

@@ -116,7 +116,7 @@
                                     v-model:value="formState.num"
                                     :max="selectedRow.orderqty"
                                     class="formSlider"
-                                    style="width: 260px;"
+                                    style="width: 140px;"
                                 />
                                 <div class="unit">
                                     <span>0</span>

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

@@ -1,55 +1,55 @@
 <template>
-  <!-- 买卖大厅 -->
-  <div class="buy-sell-market">
-    <div class="buy-sell-market-title">
-      <a class="backIcon"
-         @click="cancel">
-        <LeftOutlined />
-      </a>
-      <div class="titleBtn">
-        <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="green bdf1 ml20">
-        <div class="numBlock ml15">
-          <div class="first">卖价</div>
-          <div class="last">{{selectedRow.sellprice}}</div>
+    <!-- 买卖大厅 -->
+    <div class="buy-sell-market">
+        <div class="buy-sell-market-title">
+            <a class="backIcon" @click="cancel">
+                <LeftOutlined />
+            </a>
+            <div class="titleBtn">
+                <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="priceBar bdf1 ml20">
+                <div class="greenBar green" @click="changeMarketOrDetail">
+                    <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="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>
+                </div>
+            </div>
+            <BtnList :btnList="btnListData" :record="selectedRow" @click="openComponent" />
         </div>
-        <div class="numBlock">
-          <div class="first">卖量</div>
-          <div class="last">{{selectedRow.sellqty}}</div>
-        </div>
-      </div>
-      <div class="red ml35">
-        <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>
-      <BtnList :btnList="btnListData"
-               :record="selectedRow"
-               @click="openComponent" />
+        <a-row class="buySellHall" v-if="showMarketOrDetail">
+            <a-col :span="12">
+                <Sell ref="sellRef" :parantSelectedRow="deliverGoods" />
+            </a-col>
+            <a-col :span="12">
+                <Buy ref="buyRef" :parantSelectedRow="deliverGoods" />
+            </a-col>
+        </a-row>
+        <StockExchange :deliverGoods="deliverGoods" v-else />
+        <component
+            :is="componentId"
+            v-if="componentId"
+            :selectedRow="deliverGoods"
+            :parantSelectedRow="deliverGoods"
+            @cancel="closeComponent"
+        ></component>
     </div>
-    <a-row class="buySellHall">
-      <a-col :span="12">
-        <Sell ref="sellRef"
-              :parantSelectedRow="deliverGoods" />
-      </a-col>
-      <a-col :span="12">
-        <Buy ref="buyRef"
-             :parantSelectedRow="deliverGoods" />
-      </a-col>
-    </a-row>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="deliverGoods"
-               :parantSelectedRow="deliverGoods"
-               @cancel="closeComponent"></component>
-  </div>
 </template>
 
 <script lang="ts">
@@ -69,6 +69,7 @@ import { BtnListType } from '@/common/components/btnList/interface';
 import moment, { Moment } from 'moment';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import StockExchange from '../stock-exchange/index.vue';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -90,6 +91,7 @@ export default defineComponent({
         LeftOutlined,
         Listing: defineAsyncComponent(() => import('../listing/index.vue')),
         Detail: defineAsyncComponent(() => import('../detail/index.vue')),
+        StockExchange,
     },
     setup(props, context) {
         const loading = ref<boolean>(false);
@@ -112,6 +114,11 @@ export default defineComponent({
         };
         const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
 
+        const showMarketOrDetail = ref<boolean>(true);
+        function changeMarketOrDetail() {
+            showMarketOrDetail.value = !showMarketOrDetail.value;
+        }
+
         TimerUtils.setInterval(
             () => {
                 queryFn();
@@ -131,9 +138,21 @@ export default defineComponent({
             closeComponent,
             openComponent,
             btnListData,
+            showMarketOrDetail,
+            changeMarketOrDetail,
         };
     },
 });
 </script>
 <style lang="less">
+.priceBar {
+    .flex;
+    flex-direction: column;
+    height: 32px;
+    .greenBar,
+    .redBar {
+        height: 16px;
+        line-height: 16px;
+    }
+}
 </style>

src/views/market/spot_trade/spot_trade_order_transaction/components/stock-exchange/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 成交明细  -->
-  <a-row class="buySellHall">
+  <a-row>
     <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
@@ -11,7 +11,7 @@
                :data-source="tableList[0]">
       </a-table>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
                :pagination="false"
@@ -21,7 +21,7 @@
                :data-source="tableList[1]">
       </a-table>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="8">
       <a-table :columns="columnsList"
                class="srcollYTable"
                :pagination="false"
@@ -53,10 +53,6 @@ export default defineComponent({
     emits: ['cancel', 'update'],
     name: 'stock-exchange',
     props: {
-        selectedRow: {
-            type: Object as PropType<QueryQuoteDayRsp>,
-            default: {},
-        },
         deliverGoods: {
             type: Object as PropType<QueryDeliveryRelationRsp>,
             default: {},