img

src/components/Bottom.vue

@@ -16,7 +16,7 @@
   right: 0;
   height: $bottom-height;
   background: #ffa18e;
-  z-index: 200;
+  z-index: 100;
   display: flex;
   box-sizing: border-box;
   align-items: center;

src/components/Swiper.vue

@@ -46,7 +46,7 @@ const modules = [Pagination, Navigation]
     padding: 0 7px;
     left: 0;
     bottom: -300px;
-    z-index: 200;
+    z-index: 100;
     right: 0;
     width: 100%;
     height: 340px;

src/components/Top.vue

@@ -2,6 +2,21 @@
   <div class="top_container">
     <div class="logo_container"></div>
     <div class="fold_icon" @click="openDrawer"></div>
+    <div class="modal_drawer">
+      <div class="content">
+        <div class="icon_wrap">
+          <p class="icon"></p>
+        </div>
+        <div class="btn_wrap">
+          <div class="btn">公司简介</div>
+          <div class="btn">案例展示</div>
+          <div class="btn">联系我们</div>
+          <div class="btn">招贤纳士</div>
+          <div class="btn">软硬件研发</div>
+          <div class="btn">产品研发</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -37,9 +52,47 @@ const openDrawer = () => {
     height: 12px;
     background: #000;
   }
-  .drawer {
-    border-top-right-radius: 20px;
-    border-top-left-radius: 20px;
+  .modal_drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.67);
+    .content {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 50vh;
+      background: #fff;
+      border-top-right-radius: 20px;
+      border-top-left-radius: 20px;
+      display: flex;
+      flex-direction: column;
+      .icon_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10px 0;
+        .icon {
+          width: 20px;
+          height: 2px;
+          border-radius: 1px;
+          background: #000;
+        }
+      }
+      .btn_wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        .btn {
+        }
+      }
+    }
   }
 }
 </style>

src/style.scss

@@ -11,3 +11,7 @@
   margin-left: auto;
   margin-right: auto;
 }
+@font-face {
+  font-family: Zona Pro;
+  src: url(./static/font/ZONAPRO-BLACK.OTF);
+}