From 7d9a179671de7c94463f80c1700c99983924d430 Mon Sep 17 00:00:00 2001
From: pplokijuhyg <1162963624@qq.com>
Date: Mon, 25 Nov 2019 16:59:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.vue | 109 +++++++++++++++++++++++++++++++++++++++++---------
 src/router.js |   2 +-
 2 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/src/index.vue b/src/index.vue
index caedf73..5125b64 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -1,35 +1,97 @@
 <template>
   <div class="box">
-      <div class="head">
-          <img class="logo" src="" alt="" srcset="">
-          <div class="search"></div>
+    <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }" >
+        <div style="height:0.88rem"></div>
+        <div class="list">
+            <div>首页</div>
+            <div>我的主页</div>
+            <div>退出登录</div>
+        </div>
+    </van-popup>
+    <div class="head">
+      <img class="logo" src alt srcset />
+      <div class="search">
+        <img src alt />
+        <input type="text" />
       </div>
+      <div class="mnue" @click="isshow">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
 .box {
   min-height: 100vh;
   background-color: #f6f6f6;
-  .head{
-      width: 100%;
-      height: 88px;
-      background-color: #fff;
+  padding-top: 88px;
+  box-sizing: border-box;
+  .head {
+      position: fixed;
+      top: 0;
+      z-index: 9999;
+    width: 100%;
+    height: 88px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    .logo {
+      width: 115px;
+      height: 37px;
+      background-color: #000;
+      display: block;
+      margin-left: 30px;
+    }
+    .search {
+      margin-left: 24px;
+      width: 485px;
+      height: 60px;
+      background-color: #f0f0f0;
+      box-sizing: border-box;
+      border: 1px solid rgba(233, 233, 233, 1);
+      border-radius: 30px;
       display: flex;
       align-items: center;
-      .logo{
-          width: 115px;
-          height: 37px;
-          background-color: #000;
-          display: block;
+      > img {
+        margin-left: 23px;
+        width: 30px;
+        height: 30px;
+        background-color: #000;
       }
-      .search{
-          width: 485px;
-          height: 60px;
-          background-color: #F0F0F0;
-          box-sizing: border-box;
-          border:1px solid rgba(233,233,233,1);
-          border-radius: 30px;
+      > input {
+        margin-left: 21px;
+        color: #333;
+        font-size: 24px;
+        height: 26px;
+        border: none;
+        background-color: #f0f0f0;
       }
+    }
+    .mnue {
+      display: flex;
+      flex-direction: column;
+      height: 15px;
+      width: 24px;
+      justify-content: space-between;
+      margin-left: 42px;
+      > div {
+        width: 100%;
+        height: 3px;
+        background-color: #95998f;
+      }
+    }
+  }
+  .list{
+      padding:26px;
+      height: 194px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      color: #333;
+      font-size: 24px;
   }
 }
 </style>
@@ -37,7 +99,14 @@
 export default {
   name: "index",
   data() {
-    return {};
+    return {
+        show:false
+    };
+  },
+  methods:{
+      isshow(){
+          this.show = !this.show
+      }
   }
 };
 </script>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 4d4b855..9d83633 100644
--- a/src/router.js
+++ b/src/router.js
@@ -15,7 +15,7 @@ const router=new Router({
       component: index
     },
     {
-      path: '/ IndexArticleDetaill',
+      path: '/IndexArticleDetaill',
       component: IndexArticleDetail
     },
     {