From a9d7a909d9f50f5aa88a85453dc56ee4e0424e61 Mon Sep 17 00:00:00 2001
From: asd <a374367073@126.com>
Date: Tue, 26 Nov 2019 14:37:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=AE=8C=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/login.vue    | 190 ++++++++++++++++++++++--------------
 src/loginpwd.vue | 247 +++++++++++++++++++++++++++++++++++++++++++++++
 src/router.js    |   5 +
 3 files changed, 371 insertions(+), 71 deletions(-)
 create mode 100644 src/loginpwd.vue

diff --git a/src/login.vue b/src/login.vue
index 28595bf..1f696f8 100644
--- a/src/login.vue
+++ b/src/login.vue
@@ -15,31 +15,52 @@
       <button class="getyzm">发送验证码</button>
     </div>
     <div class="ale">
-    <p class="alert">未注册手机验证后自动登录</p>
-    <p >注册即同意《隐私保护指引》</p>
+      <p class="alert">未注册手机验证后自动登录</p>
+      <p>注册即同意《隐私保护指引》</p>
     </div>
     <button class="submit">登录</button>
     <div class="other">
-        <p>密码登录</p>
-        <p>需要帮助？</p>
+      <p>密码登录</p>
+      <p @click="open">需要帮助？</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 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="icon" />
+        <img src="./assets/weibo.png" alt class="icon" />
+        <img src="./assets/qq.png" alt class="icon" />
+      </div>
     </div>
+    <div class="tanchuangbox" v-if="ifshow">
+      <div class="tanchuang">
+        <p class="desc desc1">找回密码</p>
+        <p class="desc">人工申诉</p>
+        <p class="off" @click="off">取消</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      ifshow: false
+    };
+  },
+  methods: {
+    open() {
+      this.ifshow = true;
+    },
+    off() {
+      this.ifshow = false;
+    }
+  }
+};
 </script>
 
 <style lang="scss">
@@ -99,8 +120,8 @@ export default {};
       outline-color: transparent;
       box-shadow: none;
     }
-    .shuru::placeholder{
-        color: #999999
+    .shuru::placeholder {
+      color: #999999;
     }
   }
   .tel1 {
@@ -118,11 +139,11 @@ export default {};
     border-radius: 4px;
     background-color: white;
     margin: auto 0;
-    color: #6B9147;
+    color: #6b9147;
     font-size: 24px;
     line-height: 54px;
   }
-    .ale{
+  .ale {
     height: 58px;
     margin: 0 auto;
     margin-top: 50px;
@@ -130,64 +151,91 @@ export default {};
     font-size: 22px;
     text-align: center;
     // line-height: 30px;
-    .alert{
-        text-indent: -15px;
-        margin-bottom: 15px;
+    .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;
     }
-    .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;
+    > p:last-child {
+      margin-right: 43px;
     }
-    .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;
+      }
     }
-    .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;
+    margin-bottom: 100px;
+    .icon {
+      width: 71px;
+      height: 71px;
     }
-    .icons{
-        display: flex;
-        justify-content: space-around;
-        margin-bottom: 165px;
-        .icon{
-            width: 71px;
-            height: 71px;
-        }
+  }
+  .tanchuangbox {
+    width: 750px;
+    height: 1334px;
+    background: rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 0;
+    .tanchuang {
+      width: 580px;
+      height: 339px;
+      background-color: white;
+      margin: auto;
+      margin-top: 353px;
+      color: #333333;
+      font-size: 36px;
+      text-align: center;
+      .desc {
+        margin-bottom: 59px;
+      }
+      .desc1 {
+        padding-top: 59px;
+      }
+      .off {
+        color: #666666;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/loginpwd.vue b/src/loginpwd.vue
new file mode 100644
index 0000000..3601c55
--- /dev/null
+++ b/src/loginpwd.vue
@@ -0,0 +1,247 @@
+<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="输入手机号或邮箱" />
+      <!-- <button class="getyzm">发送验证码</button> -->
+    </div>
+    <div class="tel yzm">
+      <input type="text" class="shuru tel1" placeholder="输入密码" />
+      <!-- <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 @click="open">需要帮助？</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="icon" />
+        <img src="./assets/weibo.png" alt class="icon" />
+        <img src="./assets/qq.png" alt class="icon" />
+      </div>
+    </div>
+    <div class="tanchuangbox" v-if="ifshow">
+      <div class="tanchuang">
+          <p class="desc desc1">找回密码</p>
+          <p class="desc">人工申诉</p>
+          <p class="off" @click="off">取消</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ifshow: false
+    };
+  },
+  methods: {
+    open() {
+      this.ifshow=true
+    },
+    off(){
+      this.ifshow=false
+    }
+  }
+};
+</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 {
+    border: 0;
+    background-color: transparent;
+    outline: none;
+    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;
+    margin-bottom: 100px;
+    .icon {
+      width: 71px;
+      height: 71px;
+    }
+  }
+  .tanchuangbox{
+    width: 750px;
+    height: 1334px;
+    background: rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 0;
+    .tanchuang{
+      width: 580px;
+      height: 339px;
+      background-color: white;
+      margin: auto;
+      margin-top: 353px;
+      color: #333333;
+      font-size: 36px;
+      text-align: center;
+      .desc{
+        margin-bottom:59px;
+      }
+      .desc1{
+        padding-top: 59px;
+      }
+      .off{
+        color: #666666
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 6f181f1..a52da0c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -9,10 +9,15 @@ import index from "./index"
 import ManualAppeal from "./ManualAppeal"
 import IndexArticleDetail from "./IndexArticleDetail"
 import login from "./login"
+import loginpwd from "./loginpwd"
 const router=new Router({
   routes: [
     {
       path: '/',
+      component: loginpwd
+    },
+    {
+      path: '/login',
       component: login
     },
     {