diff --git a/src/assets/close.png b/src/assets/close.png
new file mode 100644
index 0000000..8ffa705
Binary files /dev/null and b/src/assets/close.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503..328ca55 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/assets/order.png b/src/assets/order.png
new file mode 100644
index 0000000..4bf19b7
Binary files /dev/null and b/src/assets/order.png differ
diff --git a/src/assets/qq.png b/src/assets/qq.png
new file mode 100644
index 0000000..059eb36
Binary files /dev/null and b/src/assets/qq.png differ
diff --git a/src/assets/wechat.png b/src/assets/wechat.png
new file mode 100644
index 0000000..fba1126
Binary files /dev/null and b/src/assets/wechat.png differ
diff --git a/src/assets/weibo.png b/src/assets/weibo.png
new file mode 100644
index 0000000..ccd1a5c
Binary files /dev/null and b/src/assets/weibo.png differ
diff --git a/src/login.vue b/src/login.vue
new file mode 100644
index 0000000..28595bf
--- /dev/null
+++ b/src/login.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="login">
+    <div class="logo">
+      <img src="./assets/close.png" alt class="close" />
+    </div>
+    <div class="tel">
+      <p>+86</p>
+      <img src="./assets/order.png" alt class="order" />
+      <div class="line"></div>
+      <input type="text" class="shuru" placeholder="输入手机号" />
+    </div>
+
+    <div class="tel yzm">
+      <input type="text" class="shuru tel1" placeholder="输入6位验证码" />
+      <button class="getyzm">发送验证码</button>
+    </div>
+    <div class="ale">
+    <p class="alert">未注册手机验证后自动登录</p>
+    <p >注册即同意《隐私保护指引》</p>
+    </div>
+    <button class="submit">登录</button>
+    <div class="other">
+        <p>密码登录</p>
+        <p>需要帮助？</p>
+    </div>
+    <div class="ways">
+        <div class="top">
+            <div class="line"></div>
+            <p class="text">社交帐号登录</p>
+            <div class="line"></div>
+        </div>
+    <div class="icons">
+        <img src="./assets/wechat.png" alt="" class="iocn">
+        <img src="./assets/weibo.png" alt="" class="iocn">
+        <img src="./assets/qq.png" alt="" class="iocn">
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.login {
+  .close {
+    width: 36px;
+    height: 36px;
+    float: right;
+    margin-top: 26px;
+    margin-right: 30px;
+  }
+  .logo {
+    width: 100%;
+    height: 272px;
+    background: url("./assets/logo.png");
+    background-size: 100% 100%;
+  }
+  .tel {
+    width: 690px;
+    height: 84px;
+    line-height: 84px;
+    text-indent: 9px;
+    font-size: 25px;
+    color: #333333;
+    display: flex;
+    border-bottom: 2px solid #dfdfdf;
+    margin-left: 30px;
+    .order {
+      width: 13px;
+      height: 24px;
+      margin: auto 0;
+      margin-left: 25px;
+    }
+    .line {
+      width: 1px;
+      height: 30px;
+      margin: auto 0;
+      margin-left: 35px;
+      background-color: #dfdfdf;
+    }
+    .shuru {
+      width: 75%;
+      height: 74px;
+      color: #333333;
+      font-size: 28px;
+      margin: auto 0;
+      margin-left: 36px;
+      // position: relative;
+      // top: -1px;
+      outline-style: none;
+      outline-width: 0px;
+      border: none;
+      border-style: none;
+      text-shadow: none;
+      -webkit-appearance: none;
+      -webkit-user-select: text;
+      outline-color: transparent;
+      box-shadow: none;
+    }
+    .shuru::placeholder{
+        color: #999999
+    }
+  }
+  .tel1 {
+    margin-left: 11px !important;
+    font-size: 26px !important;
+  }
+  .yzm {
+    display: flex;
+    justify-content: space-between;
+  }
+  .getyzm {
+    width: 166px;
+    height: 54px;
+    border: 2px solid rgba(107, 145, 71, 1);
+    border-radius: 4px;
+    background-color: white;
+    margin: auto 0;
+    color: #6B9147;
+    font-size: 24px;
+    line-height: 54px;
+  }
+    .ale{
+    height: 58px;
+    margin: 0 auto;
+    margin-top: 50px;
+    color: #999999;
+    font-size: 22px;
+    text-align: center;
+    // line-height: 30px;
+    .alert{
+        text-indent: -15px;
+        margin-bottom: 15px;
+    }
+    }
+    .submit{
+        width: 690px;
+        height:88px;
+        background-color: #6B9147;
+        line-height: 88px;
+        text-align: center;
+        color: white;
+        font-size:36px;
+        border-radius:4px; 
+        margin-left: 30px;
+        margin-top: 129px;
+    }
+    .other{
+        color: #6B9147;
+        font-size: 26px;
+        margin-top: 39px;
+        display: flex;
+        justify-content: space-between;
+        >p:first-child{
+            margin-left: 31px
+        }
+        >p:last-child{
+            margin-right: 43px;
+        }
+    }
+    .ways{
+        margin-top: 149px;
+        .top{
+            display: flex;
+            justify-content: center;
+            margin-bottom: 99px;
+            height: 24px;
+            .line{
+                width: 120px;
+                height: 2px;
+                margin-top: 12px;
+            }
+            .text{
+                color: #999999;
+                font-size: 24px;
+                margin-left: 20px;
+                margin-right: 20px;
+            }
+        }
+    }
+    .icons{
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 165px;
+        .icon{
+            width: 71px;
+            height: 71px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 9d83633..6f181f1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -8,10 +8,15 @@ import index from "./index"
 // import PersonalHomepage from "./PersonalHomepage"
 import ManualAppeal from "./ManualAppeal"
 import IndexArticleDetail from "./IndexArticleDetail"
+import login from "./login"
 const router=new Router({
   routes: [
     {
       path: '/',
+      component: login
+    },
+    {
+      path: '/index',
       component: index
     },
     {