style update

src/assets/styles/theme.css

@@ -72,6 +72,8 @@
     --m-grey64: #15202B;
     --m-grey65: #7a8a94;
     --m-grey66: #334C5C;
+    --m-grey67: #88A0AE;
+    --m-grey68: #7a8a94;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -171,6 +173,10 @@
     --m-blue33: #3a87f7;
     --m-blue34: #102442;
     --m-blue35: #18345C;
+    --m-blue36: #0d2140;
+    --m-blue37: #0a162b;
+    --m-blue38: #133566;
+    --m-blue39: #74b5ff;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -287,6 +293,8 @@
     --m-grey64: #15202B;
     --m-grey65: #7a8a94;
     --m-grey66: #334C5C;
+    --m-grey67: #88A0AE;
+    --m-grey68: #7a8a94;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -385,6 +393,10 @@
     --m-blue33: #3a87f7;
     --m-blue34: #102442;
     --m-blue35: #18345C;
+    --m-blue36: #0d2140;
+    --m-blue37: #0a162b;
+    --m-blue38: #133566;
+    --m-blue39: #74b5ff;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -499,6 +511,8 @@
     --m-grey64: #FFFFFF;
     --m-grey65: #333333;
     --m-grey66: #ACBBC5;
+    --m-grey67: #ffffff;
+    --m-grey68: #3A87F7;
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -596,6 +610,10 @@
     --m-blue33: #ffffff;
     --m-blue34: #ECF2F5;
     --m-blue35: #D2DAEF;
+    --m-blue36: #6FA6EA;
+    --m-blue37: #E4F5FF;
+    --m-blue38: #5179E2;
+    --m-blue39: #FFFFFF;
 
     --body-bg: #FFFFFF;
     --m-white0: #ffffff;

src/assets/styles/variables.less

@@ -80,6 +80,8 @@
 @m-grey64: var(--m-grey64);
 @m-grey65: var(--m-grey65);
 @m-grey66: var(--m-grey66);
+@m-grey67: var(--m-grey67);
+@m-grey68: var(--m-grey68);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -180,6 +182,10 @@
 @m-blue33: var(--m-blue33);
 @m-blue34: var(--m-blue34);
 @m-blue35: var(--m-blue35);
+@m-blue36: var(--m-blue36);
+@m-blue37: var(--m-blue37);
+@m-blue38: var(--m-blue38);
+@m-blue39: var(--m-blue39);
 
 @body-bg: #e9eef3;
 @m-white0: var(--m-white0);

src/common/components/drawer/index.vue

@@ -20,6 +20,61 @@
                 <!-- <Trade></Trade> -->
             </div>
         </div>
+
+        <div class="gpDetail" style="display: none">
+            <div class="title">挂牌详情</div>
+            <div class="content">
+                <div class="item">
+                    <div class="left">交易账户</div>
+                    <div class="right">3237545143</div>
+                </div>
+                <div class="item">
+                    <div class="left">挂牌方式</div>
+                    <div class="right">贸易圈</div>
+                </div>
+                <div class="item">
+                    <div class="left">挂牌价格</div>
+                    <div class="right">
+                        <span>1680.00</span>
+                        <span class="grey">(可议价)</span>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="left">现货仓单</div>
+                    <div class="right">335999666555222222</div>
+                </div>
+                <div class="item">
+                    <div class="left">挂牌数量</div>
+                    <div class="right">
+                        <span>30吨</span>
+                        <span class="grey">整单</span>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="left">起摘数量</div>
+                    <div class="right">2吨</div>
+                </div>
+                <div
+                    class="someItems"
+                >1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业、1000 江**业、1201 *融、1123 南**业</div>
+                <div class="item">
+                    <div class="left">现货仓单</div>
+                    <div class="right">335999666555222222</div>
+                </div>
+                <div class="item">
+                    <div class="left">指定朋友</div>
+                    <div class="right">1000 江**业、1201 *融、1123 南...</div>
+                </div>
+                <div class="item">
+                    <div class="left">挂牌金额</div>
+                    <div class="right">50400.00</div>
+                </div>
+                <div class="item">
+                    <div class="left">履约保证金</div>
+                    <div class="right">5040.00</div>
+                </div>
+            </div>
+        </div>
     </a-drawer>
 </template>
 
@@ -72,6 +127,62 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+.gpDetail {
+    width: 400px;
+    height: 450px;
+    .position(fixed, auto, 486px, 0, auto);
+    z-index: 10000;
+    font-size: 16px;
+    .title {
+        width: 100%;
+        height: 38px;
+        line-height: 38px;
+        background: @m-blue36;
+        text-align: center;
+        color: @m-grey67;
+        .rounded-corners(5px);
+    }
+    .content {
+        padding: 0 30px 0 20px;
+        width: 100%;
+        height: 412px;
+        overflow-y: auto;
+        background: @m-blue37;
+        .flex;
+        flex-direction: column;
+        .item {
+            display: inline-flex;
+            height: 40px;
+            line-height: 40px;
+            .left {
+                width: 80px;
+                color: @m-grey2;
+            }
+            .right {
+                width: calc(100% - 85px);
+                flex: 1;
+                padding-left: 5px;
+                color: @m-white6;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                .grey {
+                    color: @m-grey68;
+                    margin-left: 5px;
+                }
+            }
+        }
+        .someItems {
+            line-height: 24px;
+            box-shadow: 0px 10px 10px 0px @m-black18;
+            background: @m-blue38;
+            .rounded-corners(5px);
+            padding: 10px 15px;
+            font-size: 14px;
+            color: @m-blue39;
+        }
+    }
+}
 .bottom {
     .position(fixed, auto, 0, -2px, auto);
     width: 100%;