样式更新

src/assets/styles/mixin.less

@@ -636,6 +636,9 @@
             width: 70px;
             label {
                 padding-left: 0;
+                &::before {
+                    display: none;
+                }
             }
         }
         .ant-form-item-control-wrapper {
@@ -1827,7 +1830,12 @@ input:-internal-autofill-selected {
                     color: @m-white1;
                 }
             }
-            tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row,
+            // tr.ant-table-expanded-row:hover { //tr.ant-table-expanded-row,
+            //     td {
+            //         background-color: @m-black2;
+            //     }
+            // }
+            tr.ant-table-expanded-row, tr.ant-table-expanded-row:hover {
                 td {
                     background-color: @m-black2;
                 }
@@ -1856,7 +1864,9 @@ input:-internal-autofill-selected {
         }
     }
 }
-
+.sellHallTable .ant-table .ant-table-tbody tr td:not(:first-child),.buyHallTable .ant-table .ant-table-tbody tr td:not(:first-child) {
+    background-color: @m-black2;
+}
 // 表单里面的内容
 .formBar {
     ::v-deep.formProgress {

src/assets/styles/variables.less

@@ -70,6 +70,7 @@
 @m-blue13: #193778;
 @m-blue14: #1D2F3F;
 @m-blue15: #0D8AEB;
+@m-blue16: #334c5c;;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

src/common/components/drawer/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <a-drawer :placement="placement"
-            :closable="false"
-            :visible="visible"
-            :destroyOnClose="true"
-            class="bottomListed"
-            height="406px">
-    <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
-    <div class="collapse"
-         @click="cancel">
-      <DoubleRightOutlined />
-    </div>
-    <div class="collapseCont">
-      <div class="title">{{ title }}</div>
-      <div class="content highContent">
-        <!-- <Listed></Listed> -->
-        <!-- <Delisting></Delisting> -->
-        <slot></slot>
-        <!-- <Trade></Trade> -->
-      </div>
-    </div>
-  </a-drawer>
+    <a-drawer
+        :placement="placement"
+        :closable="false"
+        :visible="visible"
+        :destroyOnClose="true"
+        class="bottomListed"
+        height="406px"
+    >
+        <!-- 摘牌是top  挂牌是bottom 期货交易是tradeDialog -->
+        <div class="collapse" @click="cancel">
+            <DoubleRightOutlined />
+        </div>
+        <div class="collapseCont">
+            <div class="title">{{ title }}</div>
+            <div class="content highContent">
+                <!-- <Listed></Listed> -->
+                <!-- <Delisting></Delisting> -->
+                <slot></slot>
+                <!-- <Trade></Trade> -->
+            </div>
+        </div>
+    </a-drawer>
 </template>
 
 <script lang="ts">
@@ -82,13 +83,13 @@ export default defineComponent({
     }
 }
 .top {
-    .position(fixed, 116px, 0, auto, auto);
-    width: 446px;
-    height: 350px;
+    .position(fixed, 80px, 0, auto, auto);
+    width: 486px;
+    height: 479px;
     background: transparent;
     z-index: 10;
     .ant-drawer-content-wrapper {
-        width: 446px !important;
+        width: 486px !important;
     }
 }
 .tradeDialog {

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

@@ -1,27 +1,103 @@
 <template>
-  <!-- 摘牌 -->
-  <Drawer :title="'摘牌'"
-          :placement="'top'"
-          :visible="visible">
-    <a-form class="inlineForm dialogForm"
-            ref="formRef">
-      <a-form-item label="摘牌数量">
-        <a-input class="commonInput"
-                 suffix="吨"
-                 v-model:value="num"
-                 style="width: 140px" />
-      </a-form-item>
-      <a-form-item class="tc">
-        <a-button class="listedBtn"
-                  @click="submit">卖出</a-button>
-        <a-button class="ml10 cancelBtn"
-                  @click="cancel">取消</a-button>
-      </a-form-item>
-    </a-form>
-  </Drawer>
+    <!-- 仓单贸易  一口价    摘牌 -->
+    <Drawer
+        :title="'摘牌'"
+        :placement="'top'"
+        :visible="visible"
+        width="486px"
+        height="479px"
+        class="top"
+    >
+        <div class="delisting">
+            <div class="formBar">
+                <a-form class="inlineForm dialogForm" ref="formRef">
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="交易账户">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    style="width: 260px"
+                                    placeholder="请选择"
+                                >
+                                    <!-- <a-select-option value="1">一口价</a-select-option>
+                                    <a-select-option value="2">一口价2</a-select-option>-->
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="挂牌方">
+                                <span class="white">南方铜业</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="挂牌价格">
+                                <span class="yellow">1680.00</span>
+                            </a-form-item>
+                            <a-row :gutter="24">
+                                <a-col :span="24"></a-col>
+                            </a-row>
+                            <a-form-item label="挂牌数量">
+                                <span class="white">100吨</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item label="摘牌数量">
+                                <a-input
+                                    class="commonInput stepper"
+                                    suffix="吨"
+                                    style="width: 260px"
+                                />
+                                <div class="labelTip">（10吨起）</div>
+                                <div class="minusBtn">
+                                    <MinusOutlined />
+                                </div>
+                                <div class="plusBtn">
+                                    <PlusOutlined />
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item>
+                                <a-progress class="formProgress" :percent="30" />
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>300吨</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24" class="mt-20">
+                            <a-form-item label="挂牌金额">
+                                <span class="white">50400.00</span>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <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>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
 import { defineComponent, PropType, ref } from 'vue';
 import { enumOrderComponents } from '@/common/constants/enumOrderComponents';
 import Drawer from '@/common/components/drawer/index.vue';
@@ -39,7 +115,7 @@ import { message } from 'ant-design-vue';
 
 export default defineComponent({
     name: ModalEnum.spot_trade_warehouse_delisting,
-    components: { Drawer },
+    components: { Drawer, PlusOutlined, MinusOutlined },
     emits: ['cancel'],
     props: {
         selectedRow: {
@@ -101,7 +177,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.listed {
+.delisting {
     width: 100%;
     height: 100%;
     .flex;
@@ -139,9 +215,12 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-
+::v-deep.ant-input-suffix {
+    position: absolute;
+    right: -25px;
+}
 ::v-deep.formProgress {
-    width: 140px;
+    width: 260px;
     // height: 3px;
     // .rounded-corners(2px);
     margin-left: 70px;
@@ -163,7 +242,8 @@ export default defineComponent({
     }
 }
 .unit {
-    margin-left: 80px;
+    margin-left: 70px;
+    width: 260px;
     .flex;
     justify-content: space-between;
     font-size: 14px;
@@ -171,6 +251,9 @@ export default defineComponent({
     height: 14px;
     line-height: 14px;
 }
+.listedBtn:first-child {
+    margin-left: -35px;
+}
 .listedBtn {
     width: 120px;
     height: 30px;
@@ -187,13 +270,57 @@ export default defineComponent({
     }
 }
 .cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
     &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
         color: @m-white0-hover;
     }
 }
 .ml10 {
     margin-left: 10px;
 }
+.ant-form.dialogForm .ant-row.ant-form-item {
+    margin-bottom: 14px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mt-20 {
+    margin-top: -20px;
+}
+.labelTip {
+    font-size: 14px;
+    color: @m-blue16;
+    position: absolute;
+    top: 15px;
+    left: -80px;
+}
+.minusBtn,
+.plusBtn {
+    width: 15px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 15px;
+    color: @m-blue15;
+    cursor: pointer;
+}
+.minusBtn {
+    position: absolute;
+    top: -6px;
+    left: 14px;
+    z-index: 1;
+}
+.plusBtn {
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    z-index: 1;
+}
+.stepper {
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+    color: @m-yellow1;
+    font-size: 16px;
+}
 </style>;

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_price/index.vue

@@ -1,25 +1,27 @@
 <template>
-  <!-- 仓单预售 一口价挂牌-->
-  <div class="topTableHeight">
-    <a-table :columns="columns"
-             class="srcollYTable"
-             :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="key"
-             :data-source="tableList"></a-table>
-    <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="firstBtn"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :enumName="name"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </div>
+    <!-- 仓单预售 一口价挂牌-->
+    <div class="topTableHeight">
+        <a-table
+            :columns="columns"
+            class="srcollYTable"
+            :scroll="{ x: '100%', y: 'calc(100vh - 444px)' }"
+            :pagination="false"
+            :loading="loading"
+            :expandedRowKeys="expandedRowKeys"
+            :customRow="Rowclick"
+            rowKey="key"
+            :data-source="tableList"
+        ></a-table>
+        <!-- 右键 -->
+        <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu>
+        <component
+            :is="componentId"
+            v-if="componentId"
+            :enumName="name"
+            :selectedRow="selectedRow"
+            @cancel="closeComponent"
+        ></component>
+    </div>
 </template>
 
 <script lang="ts">

src/views/order/spot_warran/components/spot_warrant_inventory_summary/components/listing/index.vue

@@ -60,7 +60,7 @@
                                 <a-select
                                     class="inlineFormSelect"
                                     style="width: 135px"
-                                    placeholder="请择交易所"
+                                    placeholder="请选择交易所"
                                 >
                                     <!-- <a-select-option value="1">一口价</a-select-option>
                                     <a-select-option value="2">一口价2</a-select-option>-->
@@ -154,14 +154,12 @@ export default defineComponent({
             CanPart: 1, // 是否允许部份摘牌0:不允许;1:允许
             WRTradeGoods: [],
             wrstandardid: 1,
-            HasWr: 0,  // 0 无仓单  1： 有仓单
+            HasWr: 0, // 0 无仓单  1： 有仓单
         };
         console.log(param);
 
         console.log(props.selectedRow);
-        requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
-
-        });
+        requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {});
         return {
             visible: true,
         };

src/views/order/spot_warran/components/spot_warrant_spot_details/components/listing/index.vue

@@ -1,141 +1,142 @@
 <template>
-  <!-- 现货仓单 现货明细 挂牌 -->
-  <Drawer :title="'挂牌'"
-          :placement="'bottom'"
-          :visible="visible"
-          @cancel="cancel">
-    <div class="listed">
-      <div class="condition">
-        <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
-        <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
-      </div>
-      <div class="formBar">
-        <a-form class="inlineForm dialogForm"
-                ref="formRef"
-                :model="formState"
-                :rules="rules">
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌方式"
-                           name="WRPriceType">
-                <a-select class="inlineFormSelect"
-                          default-value="1"
-                          v-model:value="formState.WRPriceType"
-                          style="width: 140px">
-                  <a-select-option :value="1">一口价</a-select-option>
-                  <a-select-option :value="2">浮动价</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="formState.WRPriceType === 1">
-
-              <a-form-item label="挂牌价"
-                           name="FixedPrice">
-                <a-input-number class="dialogInput"
-                                style="width: 140px"
-                                v-model:value="formState.FixedPrice"
-                                placeholder="请输入挂牌价" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12"
-                   v-if="formState.WRPriceType === 2">
-              <a-form-item label="升贴水"
-                           name="PriceMove">
-                <a-input class="commonInput"
-                         v-model:value="formState.PriceMove"
-                         style="width: 140px" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="挂牌数量"
-                           name="OrderQty">
-                <a-input-number class="dialogInput"
-                                style="width: 140px"
-                                :suffix="selectedRow.enumdicname"
-                                v-model:value="formState.OrderQty"
-                                placeholder="请输入挂牌数量" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="起摘数量"
-                           class="relative">
-                <a-input class="commonInput"
-                         :suffix="selectedRow.enumdicname"
-                         style="width: 140px" />
-                <div class="tip">最小单位：1{{selectedRow.enumdicname}}</div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24">
-            <a-col :span="12"
-                   class="mt-20">
-              <a-form-item>
-                <a-slider v-model:value="formState.OrderQty"
-                          :min="0"
-                          :max="selectedRow.enableqty" />
-                <!-- <a-progress class="formProgress"
-                            :percent="30" /> -->
-                <div class="unit">
-                  <span>0</span>
-                  <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
-                </div>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">&nbsp;</a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 v-if="formState.WRPriceType === 2">
-            <a-col :span="24">
-              <a-form-item label="行情商品"
-                           name="goodsid">
-                <!-- <a-select class="inlineFormSelect"
+    <!-- 现货仓单 现货明细 挂牌 -->
+    <Drawer :title="'挂牌'" :placement="'bottom'" :visible="visible" @cancel="cancel">
+        <div class="listed">
+            <div class="condition">
+                <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
+                <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
+            </div>
+            <div class="formBar">
+                <a-form
+                    class="inlineForm dialogForm"
+                    ref="formRef"
+                    :model="formState"
+                    :rules="rules"
+                >
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌方式" name="WRPriceType">
+                                <a-select
+                                    class="inlineFormSelect"
+                                    default-value="1"
+                                    v-model:value="formState.WRPriceType"
+                                    style="width: 140px"
+                                >
+                                    <a-select-option :value="1">一口价</a-select-option>
+                                    <a-select-option :value="2">浮动价</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="formState.WRPriceType === 1">
+                            <a-form-item label="挂牌价" name="FixedPrice">
+                                <a-input-number
+                                    class="dialogInput"
+                                    style="width: 140px"
+                                    v-model:value="formState.FixedPrice"
+                                    placeholder="请输入挂牌价"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12" v-if="formState.WRPriceType === 2">
+                            <a-form-item label="升贴水" name="PriceMove">
+                                <a-input
+                                    class="commonInput"
+                                    v-model:value="formState.PriceMove"
+                                    style="width: 140px"
+                                />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12">
+                            <a-form-item label="挂牌数量" name="OrderQty">
+                                <a-input-number
+                                    class="dialogInput"
+                                    style="width: 140px"
+                                    :suffix="selectedRow.enumdicname"
+                                    v-model:value="formState.OrderQty"
+                                    placeholder="请输入挂牌数量"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item label="起摘数量" class="relative">
+                                <a-input
+                                    class="commonInput"
+                                    :suffix="selectedRow.enumdicname"
+                                    style="width: 140px"
+                                />
+                                <div class="tip">最小单位：1{{selectedRow.enumdicname}}</div>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24">
+                        <a-col :span="12" class="mt-20">
+                            <a-form-item>
+                                <a-slider
+                                    v-model:value="formState.OrderQty"
+                                    :min="0"
+                                    :max="selectedRow.enableqty"
+                                    class="formSlider"
+                                />
+                                <!-- <a-progress class="formProgress"
+                                :percent="30" />-->
+                                <div class="unit">
+                                    <span>0</span>
+                                    <span>{{selectedRow.enableqty}}{{selectedRow.enumdicname}}</span>
+                                </div>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">&nbsp;</a-col>
+                    </a-row>
+                    <a-row :gutter="24" v-if="formState.WRPriceType === 2">
+                        <a-col :span="24">
+                            <a-form-item label="行情商品" name="goodsid">
+                                <!-- <a-select class="inlineFormSelect"
                           style="width: 135px"
                           placeholder="请择交易所">
-                </a-select> -->
-                <a-select class="inlineFormSelect ml5"
-                          @change="groupsChange"
-                          style="width: 135px"
-                          v-model:value="formState.goodsgroupid"
-                          placeholder="请选择商品">
-                  <a-select-option v-for="item in goodsGroup"
-                                   :value="item.goodsgroupid"
-                                   :key="item.goodsgroupid">
-                    {{item.goodsgroupname}}
-                  </a-select-option>
-                </a-select>
-                <a-select class="inlineFormSelect ml5"
-                          style="width: 135px"
-                          v-model:value="formState.goodsid"
-                          placeholder="请选择合约">
-                  <a-select-option v-for="item in goodsList"
-                                   :value="item.goodsid"
-                                   :key="item.goodsid">
-                    {{item.goodsname}}
-                  </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row :gutter="24"
-                 type="flex"
-                 justify="center">
-            <a-col :span="24">
-              <a-form-item class="tc">
-                <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>
-    </div>
-  </Drawer>
+                                </a-select>-->
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    @change="groupsChange"
+                                    style="width: 135px"
+                                    v-model:value="formState.goodsgroupid"
+                                    placeholder="请选择商品"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsGroup"
+                                        :value="item.goodsgroupid"
+                                        :key="item.goodsgroupid"
+                                    >{{item.goodsgroupname}}</a-select-option>
+                                </a-select>
+                                <a-select
+                                    class="inlineFormSelect ml5"
+                                    style="width: 135px"
+                                    v-model:value="formState.goodsid"
+                                    placeholder="请选择合约"
+                                >
+                                    <a-select-option
+                                        v-for="item in goodsList"
+                                        :value="item.goodsid"
+                                        :key="item.goodsid"
+                                    >{{item.goodsname}}</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                    <a-row :gutter="24" type="flex" justify="center">
+                        <a-col :span="24">
+                            <a-form-item class="tc">
+                                <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>
+        </div>
+    </Drawer>
 </template>
 
 <script lang="ts">
@@ -296,23 +297,31 @@ export default defineComponent({
 .mt-20 {
     margin-top: -20px;
 }
-.formProgress {
+::v-deep.ant-slider.formSlider {
     width: 140px;
     // height: 3px;
     // .rounded-corners(2px);
     margin-left: 70px;
-    .ant-progress-outer {
+    .ant-slider-rail {
         margin-right: 0;
         padding-right: 0;
-        .ant-progress-inner {
-            background: @m-grey14;
-            .rounded-corners(2px);
-            .ant-progress-bg {
-                height: 3px !important;
-                border-radius: 2px !important;
-                background-color: @m-blue0;
-            }
-        }
+        height: 3px !important;
+        border-radius: 2px !important;
+        background-color: @m-blue14;
+        // .ant-slider-track {
+        //     background: @m-grey14;
+        //     .rounded-corners(2px);
+        //     .ant-progress-bg {
+
+        //     }
+        // }
+    }
+    .ant-slider-track {
+        height: 3px;
+        background-color: @m-blue0;
+    }
+    .ant-slider-step {
+        height: 3px;
     }
     .ant-progress-text {
         display: none;