Merge branch 'xuebaoxin' of pplokijuhyg/falvpingtai into master

src/index.vue

@@ -1,8 +1,24 @@
 <template>
   <div class="box">
+    <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"></div>
+      <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>
@@ -10,26 +26,72 @@
 .box {
   min-height: 100vh;
   background-color: #f6f6f6;
-  .head{
+  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{
+    .logo {
       width: 115px;
       height: 37px;
       background-color: #000;
       display: block;
+      margin-left: 30px;
     }
-      .search{
+    .search {
+      margin-left: 24px;
       width: 485px;
       height: 60px;
-          background-color: #F0F0F0;
+      background-color: #f0f0f0;
       box-sizing: border-box;
-          border:1px solid rgba(233,233,233,1);
+      border: 1px solid rgba(233, 233, 233, 1);
       border-radius: 30px;
+      display: flex;
+      align-items: center;
+      > img {
+        margin-left: 23px;
+        width: 30px;
+        height: 30px;
+        background-color: #000;
       }
+      > 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>

src/router.js

@@ -15,7 +15,7 @@ const router=new Router({
       component: index
     },
     {
-      path: '/ IndexArticleDetaill',
+      path: '/IndexArticleDetaill',
       component: IndexArticleDetail
     },
     {