commit

src/assets/styles/variables.less

@@ -18,6 +18,7 @@
 @m-grey12-hover: rgba(@m-grey12, .8);
 @m-grey13: #38444F;
 @m-grey13-hover: rgba(@m-grey13, .8);
+@m-grey14: #2B3F52;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;

src/components/drawer/index.vue

@@ -3,13 +3,14 @@
     <a-drawer :placement="placement"
               :closable="false"
               :visible="visible"
-              class="bottom">
+              class="top">  <!-- 摘牌是top  挂牌是bottom -->
       <div class="collapse"
            @click="cancel"></div>
       <div class="collapseCont">
         <div class="title">{{ title }}</div>
         <div class="content">
-            <Listed></Listed>
+            <!-- <Listed></Listed> -->
+            <Delisting></Delisting>
         </div>
       </div>
     </a-drawer>
@@ -20,6 +21,7 @@
 import { defineComponent, ref, PropType } from 'vue';
 import { closeModal, ModalName } from '@/setup/controlModal/index';
 import Listed from '@/views/market/warehouseTrade/components/listed/index.vue';
+import Delisting from '@/views/market/warehouseTrade/components/delisting/index.vue';
 
 interface Key {
     [propName: string]: string;
@@ -43,7 +45,8 @@ export default defineComponent({
         },
     },
     components: {
-        Listed
+        Listed,
+        Delisting
     },
     setup(props, context) {
         const { visible, cancel, handleOk } = closeModal(props.modalName);
@@ -57,11 +60,17 @@ export default defineComponent({
 
 <style lang="less">
 .bottom {
-    .position(fixed, auto, 0, 0, auto);
+    .position(fixed, auto, 0, -2px, auto);
     width: 586px;
     height: 330px;
     background: transparent;
 }
+.top {
+    .position(fixed, 116px, 0, auto, auto);
+    width: 446px;
+    height: 350px;
+    background: transparent;
+}
 .ant-drawer.ant-drawer-open {
     .ant-drawer-mask {
         background: transparent;
@@ -88,8 +97,8 @@ export default defineComponent({
                     .collapseCont {
                         flex: 1;
                         height: 100%;
-                        border-top: 2px solid @m-blue0;
-                        border-left: 2px solid @m-blue0;
+                        border: 2px solid @m-blue0;
+                        border-right: 0;
                         .flex;
                         flex-direction: column;
                         .title {

src/views/market/warehouseTrade/components/delisting/index.vue

@@ -0,0 +1,267 @@
+<template>
+    <!-- 挂牌 -->
+  <div class="delisting">
+    <div class="condition">
+        <a-button class="conditionBtn">螺纹钢</a-button>
+        <a-button class="conditionBtn">12</a-button>
+        <a-button class="conditionBtn">江铜</a-button>
+        <a-button class="conditionBtn">华南仓库</a-button>
+    </div>
+    <div class="formBar">
+        <a-form class="inlineForm" :form="form" @submit="handleSearch">
+            <a-row :gutter="24">
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="挂牌方式">
+                        <a-select class="inlineFormSelect"  default-value="1" style="width: 140px">
+                            <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-col
+                :span="12"
+                >
+                    <a-form-item label="挂牌价">
+                        <a-input class="commonInput" style="width: 140px"/>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24">
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="挂牌数量">
+                        <a-input class="commonInput" suffix="吨" style="width: 140px"/>
+                    </a-form-item>
+                </a-col>
+                <a-col
+                :span="12"
+                >
+                    <a-form-item label="起摘数量" class="relative">
+                        <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                        <div class="tip">最小单位：1吨</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-row>
+            <a-row :gutter="24"  type="flex" justify="center">
+                <a-col
+                :span="24"
+                >
+                    <a-form-item class="tc">
+                        <a-button class="listedBtn">挂牌</a-button>
+                        <a-button class="ml10 cancelBtn">取消</a-button>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'warehouse-trade-fixed-price',
+    components: {},
+    setup() {
+        const form = {
+            type: '1'
+        };
+        return {
+            form,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.delisting {
+    width: 100%;
+    height: 100%;
+    .flex;
+    flex-direction: column;
+    .condition {
+        width: 100%;
+        height: 48px;
+        padding: 10px 16px;
+        border-bottom: 1px solid @m-black6;
+        .inlineflex;
+        .conditionBtn {
+            align-self: center;
+            align-items: center;
+            border: 0;
+            width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background: @m-black7;
+           .rounded-corners(3px);
+           font-size: 14px;
+           color: @m-blue0;
+           &:hover {
+               background: rgba(@m-black7, .8);
+               color: rgba(@m-blue0, .8);
+           }
+        }
+        .conditionBtn+.conditionBtn {
+            margin-left: 10px;
+        }
+    }
+    .formBar {
+        width: 100%;
+        flex: 1;
+        padding: 28px 16px 7px;
+    }
+}
+::v-deep.ant-form.inlineForm {
+    .ant-row.ant-form-item {
+        margin-bottom: 21px;
+        .ant-form-item-label {
+            width: 80px;
+            line-height: 30px;
+            text-align: left;
+            label {
+                color: @m-grey1;
+                &::after {
+                    content: ''
+                }
+            }
+        }
+        .ant-form-item-control-wrapper {
+            .ant-form-item-control {
+                line-height: 30px;
+            }
+
+        }
+    }
+    .relative.ant-form-item {
+        position: relative;
+        .tip {
+            position: absolute;
+            font-size: 14px;
+            color: @m-grey1;
+        }
+    }
+    .tc.ant-form-item {
+        .ant-form-item-control-wrapper {
+            margin: 0 auto;
+        }
+    }
+}
+::v-deep.ant-select-single {
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: #15202B;
+        border: 1px solid #0C95FF;
+        border-radius: 3px;
+        color: #E5E5E5;
+    }
+    .ant-select-arrow {
+        right: 8px;
+        color: #3A87F7;
+    }
+}
+::v-deep.ant-select-dropdown {
+    background:  #15202B;
+    color: #E5E5E5;
+    .ant-select-dropdown-content {
+        .rc-virtual-list {
+            .rc-virtual-list-holder {
+                .rc-virtual-list-holder-inner {
+                    .ant-select-item {
+
+                    }
+                    .ant-select-item-option-selected {
+
+                    }
+                }
+            }
+        }
+    }
+}
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        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;
+            }
+        }
+    }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+::v-deep.commonInput {
+    background: #15202B;
+    border: 1px solid @m-grey14;
+    border-radius: 3px;
+    color: #E5E5E5;
+    .ant-input {
+        color: #E5E5E5;
+        background: transparent;
+    }
+    .ant-input-suffix {
+        color: #E5E5E5;
+    }
+}
+.listedBtn {
+    width: 120px;
+    height: 30px;
+    line-height: 30px;
+    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
+    border-radius: 3px;
+    color: @m-white0;
+    font-size: 14px;
+    text-align: center;
+    border: 0;
+    &:hover {
+        background:  linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.cancelBtn:extend(.listedBtn) {
+    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
+    &:hover {
+        background:  linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
+        color: @m-white0-hover;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+</style>;

src/views/market/warehouseTrade/components/listed/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <!-- 挂牌 -->
+    <!-- 挂牌 -->
   <div class="listed">
     <div class="condition">
-      <a-button class="conditionBtn">螺纹钢</a-button>
-      <a-button class="conditionBtn">12</a-button>
-      <a-button class="conditionBtn">江铜</a-button>
-      <a-button class="conditionBtn">华南仓库</a-button>
+        <a-button class="conditionBtn">螺纹钢</a-button>
+        <a-button class="conditionBtn">12</a-button>
+        <a-button class="conditionBtn">江铜</a-button>
+        <a-button class="conditionBtn">华南仓库</a-button>
     </div>
     <div class="formBar">
         <a-form class="inlineForm" :form="form" @submit="handleSearch">
@@ -43,8 +43,9 @@
                 <a-col
                 :span="12"
                 >
-                    <a-form-item label="起摘数量">
+                    <a-form-item label="起摘数量" class="relative">
                         <a-input class="commonInput" suffix="吨" style="width: 140px" />
+                        <div class="tip">最小单位：1吨</div>
                     </a-form-item>
                 </a-col>
             </a-row>
@@ -53,16 +54,16 @@
                 :span="24"
                 >
                     <a-form-item>
-                        <a-progress :percent="30" />
+                        <a-progress class="formProgress" :percent="30" />
+                        <div class="unit"><span>0</span><span>300吨</span></div>
                     </a-form-item>
                 </a-col>
             </a-row>
-            <a-row :gutter="24">
+            <a-row :gutter="24"  type="flex" justify="center">
                 <a-col
                 :span="24"
-                :style="{ 'text-align': center }"
                 >
-                    <a-form-item>
+                    <a-form-item class="tc">
                         <a-button class="listedBtn">挂牌</a-button>
                         <a-button class="ml10 cancelBtn">取消</a-button>
                     </a-form-item>
@@ -80,7 +81,7 @@ export default defineComponent({
     components: {},
     setup() {
         const form = {
-            type: '1',
+            type: '1'
         };
         return {
             form,
@@ -109,15 +110,15 @@ export default defineComponent({
             height: 28px;
             line-height: 28px;
             background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: rgba(@m-black7, 0.8);
-                color: rgba(@m-blue0, 0.8);
-            }
+           .rounded-corners(3px);
+           font-size: 14px;
+           color: @m-blue0;
+           &:hover {
+               background: rgba(@m-black7, .8);
+               color: rgba(@m-blue0, .8);
+           }
         }
-        .conditionBtn + .conditionBtn {
+        .conditionBtn+.conditionBtn {
             margin-left: 10px;
         }
     }
@@ -127,7 +128,7 @@ export default defineComponent({
         padding: 28px 16px 7px;
     }
 }
-::deep.ant-form.inlineForm {
+::v-deep.ant-form.inlineForm {
     .ant-row.ant-form-item {
         margin-bottom: 21px;
         .ant-form-item-label {
@@ -137,7 +138,7 @@ export default defineComponent({
             label {
                 color: @m-grey1;
                 &::after {
-                    content: '';
+                    content: ''
                 }
             }
         }
@@ -145,49 +146,97 @@ export default defineComponent({
             .ant-form-item-control {
                 line-height: 30px;
             }
+
+        }
+    }
+    .relative.ant-form-item {
+        position: relative;
+        .tip {
+            position: absolute;
+            font-size: 14px;
+            color: @m-grey1;
+        }
+    }
+    .tc.ant-form-item {
+        .ant-form-item-control-wrapper {
+            margin: 0 auto;
         }
     }
 }
-::deep.ant-select-single {
+::v-deep.ant-select-single {
     .ant-select-selector {
         height: 30px;
         padding: 0 8px;
-        background: #15202b;
-        border: 1px solid #0c95ff;
+        background: #15202B;
+        border: 1px solid #0C95FF;
         border-radius: 3px;
-        color: #e5e5e5;
+        color: #E5E5E5;
     }
     .ant-select-arrow {
         right: 8px;
-        color: #3a87f7;
+        color: #3A87F7;
     }
 }
-::deep.ant-select-dropdown {
-    background: #15202b;
-    color: #e5e5e5;
+::v-deep.ant-select-dropdown {
+    background:  #15202B;
+    color: #E5E5E5;
     .ant-select-dropdown-content {
         .rc-virtual-list {
             .rc-virtual-list-holder {
                 .rc-virtual-list-holder-inner {
                     .ant-select-item {
+
                     }
                     .ant-select-item-option-selected {
+
                     }
                 }
             }
         }
     }
 }
-::deep.commonInput {
-    background: #15202b;
-    border: 1px solid #2b3f52;
+::v-deep.formProgress {
+    width: 140px;
+    // height: 3px;
+    // .rounded-corners(2px);
+    margin-left: 80px;
+    .ant-progress-outer {
+        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;
+            }
+        }
+    }
+    .ant-progress-text {
+        display: none;
+    }
+}
+.unit {
+    margin-left: 80px;
+    .flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @m-grey1;
+    height: 14px;
+    line-height: 14px;
+}
+::v-deep.commonInput {
+    background: #15202B;
+    border: 1px solid @m-grey14;
     border-radius: 3px;
+    color: #E5E5E5;
     .ant-input {
-        color: #7a8a94;
+        color: #E5E5E5;
         background: transparent;
     }
     .ant-input-suffix {
-        color: #7a8a94;
+        color: #E5E5E5;
     }
 }
 .listedBtn {