style update

src/assets/styles/mixin.less

@@ -2196,7 +2196,34 @@ input:-internal-autofill-selected {
         }
     }
 }
+.ant-checkbox-wrapper.commonCheckbox {
+    .ant-checkbox {
+            margin-right: 2px;
+            .ant-checkbox-inner {
+                background: @m-grey21;
+                border: 1px solid @m-grey14;
+                border-radius: 3px;
+            }
+        }
+
+        .ant-checkbox.ant-checkbox-checked {
+            .ant-checkbox-inner {
+                &::after {
+                    border-color: @m-blue0;
+                }
+            }
+
+            &::after {
+                border-color: @m-blue0;
+            }
+        }
 
+        span+span {
+            margin-right: 15px;
+            color: @m-white13;
+            font-size: 14px;
+        }
+}
 .commonRadioGroup {
     .ant-radio-wrapper {
         color: @m-white0;

src/assets/styles/theme.css

@@ -71,6 +71,7 @@
     --m-grey63: #08131F;
     --m-grey64: #15202B;
     --m-grey65: #7a8a94;
+    --m-grey66: #334C5C;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -180,6 +181,8 @@
     --m-white10: #FEFEFF;
     --m-white11: #ffffff;
     --m-white12: #ffffff;
+    --m-white13: #ffffff;
+    --m-white14: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -280,6 +283,7 @@
     --m-grey63: #08131F;
     --m-grey64: #15202B;
     --m-grey65: #7a8a94;
+    --m-grey66: #334C5C;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -388,6 +392,8 @@
     --m-white10: #FEFEFF;
     --m-white11: #ffffff;
     --m-white12: #ffffff;
+    --m-white13: #ffffff;
+    --m-white14: #ffffff;
 
     --m-green0: #1FF195;
     --m-green1: #10251d;
@@ -486,6 +492,7 @@
     --m-grey63: #F6F8FA;
     --m-grey64: #FFFFFF;
     --m-grey65: #333333;
+    --m-grey66: #ACBBC5;
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -595,6 +602,8 @@
     --m-white10: #FEFEFF;
     --m-white11: #333333;
     --m-white12: #718FAE;
+    --m-white13: #ADBCC5;
+    --m-white14: #7A8A94;
 
     --m-green0: #00A843;
     --m-green1: #e8ffef;

src/assets/styles/variables.less

@@ -79,6 +79,7 @@
 @m-grey63: var(--m-grey63);
 @m-grey64: var(--m-grey64);
 @m-grey65: var(--m-grey65);
+@m-grey66: var(--m-grey66);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -192,6 +193,8 @@
 @m-white10: var(--m-white10);
 @m-white11: var(--m-white11);
 @m-white12: var(--m-white12);
+@m-white13: var(--m-white13);
+@m-white14: var(--m-white14);
 
 @m-green0: var(--m-green0);
 @m-green1: var(--m-green1);

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/index.vue

@@ -1,134 +1,152 @@
 <template>
-  <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
-  <Drawer :title="'挂牌求购'"
-          :placement="'right'"
-          :visible="visible"
-          @cancel="cancel"
-          class="top486">
-    <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">
-              <a-form-item label="挂牌价格"
-                           name="FixedPrice">
-                <a-input-number class="commonInput"
-                                style="width: 260px"
-                                :min="0"
-                                v-model:value="formState.FixedPrice" />
-                <a-checkbox v-model:checked="priceCheck">可议价</a-checkbox>
-              </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"
-                                v-model:value="formState.OrderQty" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-                <a-checkbox v-model:checked="numCheck">整单</a-checkbox>
-              </a-form-item>
-            </a-col>
+    <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
+    <Drawer :title="'挂牌求购'" :placement="'right'" :visible="visible" @cancel="cancel" class="top486">
+        <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">
+                            <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    v-model:value="formState.FixedPrice"
+                                />
+                                <MinusOutlined />
+                                <PlusOutlined />
+                                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
+                            </a-form-item>
+                            <!-- <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
+                                <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.FixedPrice" />
+                                <MinusOutlined />
+                                <PlusOutlined  />
+                                <a-checkbox v-model:checked="priceCheck" class="commonCheckbox">可议价</a-checkbox>
+                            </a-form-item>-->
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
+                                <a-input-number
+                                    class="commonInput"
+                                    style="width: 260px"
+                                    :min="0"
+                                    v-model:value="formState.OrderQty"
+                                />
+                                <MinusOutlined />
+                                <PlusOutlined />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                                <a-checkbox v-model:checked="numCheck" class="commonCheckbox">整单</a-checkbox>
+                            </a-form-item>
+                        </a-col>
 
-            <a-col :span="24"
-                   v-if="!numCheck">
-              <a-form-item label="起摘数量"
-                           name="delistingQty">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.delistingQty"
-                                :min="0"
-                                style="width: 260px" />
-                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约保证金"
-                           name="margin">
-                <a-input-number class="commonInput"
-                                v-model:value="formState.margin"
-                                :min="0"
-                                style="width: 260px" />
-                <span class="input-enumdicname">%</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="挂牌有效期"
-                           name="DeliveryMonth">
-                <a-date-picker style="width: 260px"
-                               v-model:value="formState.DeliveryMonth"
-                               :allowClear="false"
-                               class="commonDatePicker dialogDatePicker" />
-              </a-form-item>
-            </a-col>
+                        <a-col :span="24" v-if="!numCheck">
+                            <a-form-item label="起摘数量" name="delistingQty">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.delistingQty"
+                                    :min="0"
+                                    style="width: 260px"
+                                />
+                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约保证金" name="margin">
+                                <a-input-number
+                                    class="commonInput"
+                                    v-model:value="formState.margin"
+                                    :min="0"
+                                    style="width: 260px"
+                                />
+                                <span class="input-enumdicname">%</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌有效期" name="DeliveryMonth" class="inputIconBox">
+                                <a-date-picker
+                                    style="width: 260px"
+                                    v-model:value="formState.DeliveryMonth"
+                                    :allowClear="false"
+                                    class="commonDatePicker dialogDatePicker"
+                                />
+                            </a-form-item>
+                        </a-col>
 
-            <a-col :span="24">
-              <a-form-item label="履约方式">
-                <span class="white ml8"
-                      @click="openPermance">{{selectedPermance ? selectedPermance.templatename : '选择履约模板'}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="指定朋友">
-                <span class="white ml8"
-                      @click="openFriend">{{frineds ? `已选${frineds.length}人` : '选择朋友'}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="挂牌金额">
-                <span class="white ml8">{{getMoney()}}</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="履约保证金">
-                <span class="white ml8">{{getMargin()}}</span>
-              </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>
+                        <a-col :span="24">
+                            <a-form-item label="履约方式" class="inputIconBox">
+                                <span
+                                    class="clickBox"
+                                    @click="openPermance"
+                                >{{selectedPermance ? selectedPermance.templatename : '选择履约模板'}}</span>
+                                <svg
+                                    class="icon svg-icon"
+                                    aria-hidden="true"
+                                    @click="openPermance"
+                                >
+                                    <use xlink:href="#icon-moban" />
+                                </svg>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="指定朋友" class="inputIconBox">
+                                <span
+                                    class="clickBox"
+                                    @click="openFriend"
+                                >{{frineds ? `已选${frineds.length}人` : '选择朋友'}}</span>
+                                <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">
+                                    <use xlink:href="#icon-pengyou1" />
+                                </svg>
+                                <a-checkbox class="commonCheckbox">不限</a-checkbox>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="挂牌金额">
+                                <span class="white ml8">{{getMoney()}}</span>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item label="履约保证金">
+                                <span class="white ml8">{{getMargin()}}</span>
+                            </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">买入</a-button>
+                            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
         </div>
-        <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>
-    </div>
-  </Drawer>
-  <!-- 选择朋友 -->
-  <Friend v-if="showFriend"
-          @cancel="chooseFriend"
-          @update="chooseFriend" />
-  <!-- 选择履约模板 -->
-  <Permance v-if="showPermance"
-            @cancel="choosePermance"
-            @update="choosePermance" />
+    </Drawer>
+    <!-- 选择朋友 -->
+    <Friend v-if="showFriend" @cancel="chooseFriend" @update="chooseFriend" />
+    <!-- 选择履约模板 -->
+    <Permance v-if="showPermance" @cancel="choosePermance" @update="choosePermance" />
 </template>
 
 <script lang="ts">
@@ -429,6 +447,78 @@ export default defineComponent({
     right: 14px;
     z-index: 1;
 }
+.inputIconBox {
+    position: relative;
+    float: left;
+    width: 425px;
+    .ant-form-item-children {
+        width: 350px;
+        display: block;
+        .anticon {
+            width: 15px;
+            height: 32px;
+            line-height: 37px;
+            font-size: 15px;
+            color: @m-blue15;
+            cursor: pointer;
+        }
+        .anticon-minus {
+            position: absolute;
+            top: 0px;
+            left: 9px;
+            z-index: 1;
+        }
+        .anticon-plus {
+            position: absolute;
+            top: 0px;
+            right: 98px;
+            z-index: 1;
+        }
+        .anticon-calendar {
+            font-size: 20px;
+            position: absolute;
+            top: 5px;
+            right: 13px;
+            color: @m-blue15;
+        }
+        .commonInput {
+            input {
+                text-align: center;
+                color: @m-yellow6;
+            }
+        }
+        .ant-checkbox-wrapper {
+            margin-left: 10px;
+            color: @m-white14;
+            font-size: 14px;
+            .position(absolute, 0, auto, auto, 260px);
+            white-space: nowrap;
+            line-height: 32px;
+            height: 30px;
+        }
+        .svg-icon {
+            position: absolute;
+            top: 6px;
+            right: 98px;
+            color: @m-blue15 !important;
+            font-size: 20px;
+        }
+    }
+    .input-enumdicname {
+        right: 125px;
+    }
+}
+.clickBox {
+    display: inline-block;
+    width: 260px;
+    text-indent: 8px;
+    border-radius: 4px;
+    line-height: 30px;
+    color: @m-grey66;
+    border: 1px solid var(--m-grey14);
+    cursor: pointer;
+    background: var(--m-grey21);
+}
 .stepper {
     padding-left: 30px;
     padding-right: 30px;