商品详情弹窗编写完成

src/assets/styles/variables.less

@@ -48,6 +48,7 @@
 @m-black10: #121618;
 @m-black11: #0B1620;
 @m-black12: #13202D;
+@m-black13: #08131F;
 @m-blue0: #3a87f7;
 @m-blue0-hover: rgba(@m-blue0, .8);
 @m-blue1: #4885eb;
@@ -70,7 +71,8 @@
 @m-blue13: #193778;
 @m-blue14: #1D2F3F;
 @m-blue15: #0D8AEB;
-@m-blue16: #334c5c;;
+@m-blue16: #334c5c;
+@m-blue17: #1F3245;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-white0-hover: rgba(@m-white0, .8);

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

@@ -1,8 +1,67 @@
 <template>
-    <!-- 详情 -->
+    <!-- 买卖大厅详情 -->
     <Drawer :title="'详情'" :placement="'top'" :visible="visible" class="top" @cancel="cancel">
-        <!-- 挂牌 -->
-        买卖大厅详情
+        <div class="detailCont">
+            <div class="rows">
+                <div class="row">
+                    <div class="left">品种</div>
+                    <div class="right">螺纹钢</div>
+                </div>
+                <div class="row">
+                    <div class="left">品类</div>
+                    <div class="right">直径12mm</div>
+                </div>
+                <div class="row">
+                    <div class="left">品牌</div>
+                    <div class="right">江铜</div>
+                </div>
+                <div class="row">
+                    <div class="left">仓库</div>
+                    <div class="right">华南仓库</div>
+                </div>
+                <div class="row">
+                    <div class="left">产地</div>
+                    <div class="right">云南</div>
+                </div>
+                <div class="row">
+                    <div class="left">含铜量</div>
+                    <div class="right">99%</div>
+                </div>
+            </div>
+            <div class="ruleTitle">履约规则：</div>
+            <div class="rulesCont">
+                <a-row>
+                    <a-col :span="12">
+                        <div class="line">
+                            <div class="no">1</div>
+                            <div class="name">买方30%货款</div>
+                            <div class="time">T+30</div>
+                        </div>
+                    </a-col>
+                    <a-col :span="12">
+                        <div class="line">
+                            <div class="no">2</div>
+                            <div class="name">卖方发货</div>
+                            <div class="time">T+3</div>
+                        </div>
+                    </a-col>
+                    <a-col :span="12">
+                        <div class="line">
+                            <div class="no">3</div>
+                            <div class="name">买方70%货款</div>
+                            <div class="time">T+10</div>
+                        </div>
+                    </a-col>
+                    <a-col :span="12">
+                        <div class="line">
+                            <div class="no">4</div>
+                            <div class="name">卖方开票</div>
+                            <div class="time">T+1</div>
+                        </div>
+                    </a-col>
+                </a-row>
+            </div>
+        </div>
     </Drawer>
 </template>
 
@@ -46,99 +105,96 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.listed {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    .condition {
+.detailCont {
+    padding: 10px;
+    .rows {
+        .flex;
+        flex-direction: column;
         width: 100%;
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            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);
+        border: 1px solid @m-black6;
+        background: @m-black13;
+        .row {
+            display: inline-flex;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            border-bottom: 1px solid @m-black6;
+            > div {
+                text-align: center;
+                font-size: 16px;
+            }
+            .left {
+                width: 126px;
+                color: @m-grey1;
+                border-right: 1px solid @m-black6;
+            }
+            .right {
+                flex: 1;
+                color: @m-white0;
             }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
         }
     }
-    .formBar {
+    .ruleTitle {
         width: 100%;
-        flex: 1;
-        padding: 28px 16px 7px;
+        height: 30px;
+        line-height: 30px;
+        margin-top: 10px;
+        font-size: 16px;
+        color: @m-grey1;
+    }
+    .rulesCont {
+        margin-top: 10px;
+        .flex;
     }
 }
-
-::v-deep.formProgress {
-    width: 140px;
-    // height: 3px;
-    // .rounded-corners(2px);
-    margin-left: 70px;
-    .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-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    .ant-col {
+        height: 30px;
+        line-height: 30px;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-bottom: 20px;
+        .rounded-corners(3px);
+        .line {
+            width: 100%;
+            display: inline-flex;
+        }
+        > div {
+            font-size: 14px;
+            color: @m-white0;
+            align-self: center;
+            align-items: center;
+            background: @m-blue17;
+        }
+        .no {
+            width: 30px;
+            background: @m-blue0;
+            .rounded-corners(3px);
+            text-align: center;
+        }
+        .name {
+            padding-left: 15px;
+            flex: 1;
+            font-size: 16px;
+            width: calc(100% - 93px);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .time {
+            width: 40px;
+            text-align: right;
+            color: @m-blue0;
+            margin-right: 8px;
         }
     }
-    .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;
-}
-.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;
+    .ant-col:nth-child(even) {
+        padding-left: 10px !important;
     }
-}
-.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;
+    .ant-col:nth-child(odd) {
+        padding-right: 10px !important;
     }
 }
-.ml10 {
-    margin-left: 10px;
-}
-</style>;
+</style>