commit

src/assets/styles/variables.less

@@ -13,9 +13,11 @@
 @m-grey8: #272E32;
 @m-grey9: #252D34;
 @m-grey10: #394753;
+@m-grey11: #0F1A25;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;
+@m-white1: #FEFEFE;
 @m-black0: #242a2e;
 @m-black1: #181e22;
 @m-black2: #0E0E0F;
@@ -26,6 +28,8 @@
 @m-blue1: #4885eb;
 @m-blue2: #3270d2;
 @m-blue3: #172B56;
+@m-blue4: #112C43;
+@m-blue5: #084258;
 @body-bg: #e9eef3;
 @m-white0: #ffffff;
 @m-green0: #1FF195;

src/components/drawer/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="drawer">
+   <a-drawer
+      :placement="placement"
+      :closable="false"
+      :visible="visible"
+      @close="onClose"
+      class="bottom"
+    >
+      <div class="collapse"></div>
+      <div class="collapseCont">
+          <div class="title">{{ title }}</div>
+          <div class="content">
+
+          </div>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType } from 'vue';
+
+interface Key {
+    [propName: string]: string;
+}
+
+export default defineComponent({
+    name: 'drawer',
+    props: {
+        title: {
+            default: '',
+            type: String
+        },
+        visible: {
+            default: true,
+            type: Boolean,
+        },
+        placement: {
+            // 需要绑定的值得 key
+            default: 'right',
+            type: String,
+        },
+        onClose: {
+            default: () => {},
+            type: Function
+        }
+    },
+    components: {},
+    setup(props, context) {
+        // let vis = ref(1);
+        // function onClose(visib: boolean) {
+        //     props.visible.value = visib;
+        // }
+        return {
+            // vis
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.bottom {
+    .position(fixed, auto, 0, 0, auto);
+    width: 586px;
+    height: 330px;
+    background: transparent;
+}
+.ant-drawer.ant-drawer-open {
+    .ant-drawer-mask {
+        background: transparent;
+    }
+    .ant-drawer-content-wrapper {
+        width: 586px !important;
+        box-shadow: none;
+        .ant-drawer-content {
+            background: transparent;
+            .ant-drawer-wrapper-body {
+                overflow: hidden;
+                .ant-drawer-body {
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    .inlineflex;
+                    .collapse {
+                        width: 26px;
+                        height: 66px;
+                        margin-top: 15px;
+                        background: url(../../assets/images/dialogClose.png) center center no-repeat;
+                        background-size: cover;
+                    }
+                    .collapseCont {
+                        flex: 1;
+                        height: 100%;
+                        border-top: 2px solid @m-blue0;
+                        border-left: 2px solid @m-blue0;
+                        .flex;
+                        flex-direction: column;
+                        .title {
+                            width: 100%;
+                            height: 36px;
+                            line-height: 36px;
+                            text-align: center;
+                            background: linear-gradient(0deg, @m-blue4, @m-blue5);
+                            font-size: 16px;
+                            color: @m-white1;
+                            border-bottom: 2px solid @m-blue0;
+                        }
+                        .content {
+                            flex: 1;
+                            width: 100%;
+                            max-height: calc(100% - 40px);
+                            overflow-y: auto;
+                            background: @m-grey11;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>;

src/layout/index.vue

@@ -7,11 +7,15 @@
       </div>
       <LayoutBottom />
     </template>
+    <Drawer 
+    :title="'挂牌'"
+    :visible="visible"></Drawer>
   </div>
 </template>
 <script lang="ts">
 import LayoutTop from './top.vue';
 import LayoutBottom from './bottom.vue';
+import Drawer from '@/components/drawer/index.vue';
 import { defineComponent, ref } from 'vue';
 
 // 控制下半部分是否显示
@@ -28,10 +32,15 @@ export default defineComponent({
     components: {
         LayoutTop,
         LayoutBottom,
+        Drawer
     },
     setup() {
         const { isShowBottomPart, chooseMenu } = submitBottomIsShow();
-        return { isShowBottomPart, chooseMenu };
+        const visible = ref<boolean>(true);
+        // function close(flag: boolean){
+        //   visible = flag;
+        // }
+        return { isShowBottomPart, chooseMenu, visible, close };
     },
 });
 </script>