fix: #1820

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

@@ -253,7 +253,7 @@ export default defineComponent({
     },
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .priceBar {
     .flex;
     flex-direction: column;

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

@@ -1,70 +1,116 @@
 <template>
-    <!-- 挂牌求购 -->
-    <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>
+  <!-- 挂牌求购 -->
+  <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>
-                                </div>
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="起摘数量" name="DelistMinQty" class="relative">
-                                <a-input-number class="commonInput" :suffix="selectedRow.enumdicname" v-model:value="formState.DelistMinQty" :min="0" style="width: 260px !important" />
-                                <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" v-if="getMargin()">
-                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
-                                <!-- <a-row>
+            <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="起摘数量"
+                           name="DelistMinQty"
+                           class="relative">
+                <a-input-number class="commonInput"
+                                :suffix="selectedRow.enumdicname"
+                                v-model:value="formState.DelistMinQty"
+                                :min="0"
+                                style="width: 260px !important" />
+                <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"
+                   v-if="getMargin()">
+              <a-form-item :label="getMargin() ? '履约保证金' : ''">
+                <!-- <a-row>
                                 <a-col :span="8">-->
-                                <span class="white ml8">{{ getMargin() }}</span>
-                                <!-- </a-col>
+                <span class="white ml8">{{ getMargin() }}</span>
+                <!-- </a-col>
                                     <a-col :span="4" class="tr">
                                         <span class="grey1">可用资金</span>
                                     </a-col>
@@ -74,26 +120,31 @@
                                         >{{getCanUseMoney(getSelectedAccount())}}</span>
                                     </a-col>
                                 </a-row>-->
-                            </a-form-item>
-                        </a-col>
-                        <a-col :span="24">
-                            <a-form-item label="可用资金">
-                                <span class="white ml8">{{ getCanUseMoney(getSelectedAccount()) }}</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" @click="submit" :loading="loading">买入</a-button>
-                            <a-button class="ml10 cancelBtn" @click="cancel" :disabled="loading">取消</a-button>
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="可用资金">
+                <span class="white ml8">{{ getCanUseMoney(getSelectedAccount()) }}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
         </div>
-    </Drawer>
+        <a-row :gutter="24">
+          <a-col :span="24"
+                 class="fixedBtns">
+            <a-form-item class="btnCenter">
+              <a-button class="listedBtn"
+                        @click="submit"
+                        :loading="loading">买入</a-button>
+              <a-button class="ml10 cancelBtn"
+                        @click="cancel"
+                        :disabled="loading">取消</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
@@ -152,8 +203,8 @@ export default defineComponent({
         formState.DeliveryMonth = props.selectedRow.deliverymonth ? moment(props.selectedRow.deliverymonth) : props.time;
 
         const { getMaxNum, getMoney, getMargin, getPrice } = handleNumAndPrice(props.enumName, props.selectedRow);
-        if(getMaxNum()) {
-            formState.OrderQty = props.selectedRow.minivalue
+        if (getMaxNum()) {
+            formState.OrderQty = props.selectedRow.minivalue;
         }
         function submit() {
             const marketInfo = getMarketRunByTradeMode(17);
@@ -249,7 +300,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .post_buying {
     width: 100%;
     height: 100%;

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

@@ -344,7 +344,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .post_buying {
     width: 100%;
     height: 100%;