From 51705dd628c0d145b2d95e33fd8aacee594b6cd1 Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Sun, 27 Sep 2020 17:24:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C+=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=80=E5=8D=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                        |  10 +
 {static => src/static/images}/agree.png    | Bin
 {static => src/static/images}/email.png    | Bin
 {static => src/static/images}/facebook.png | Bin
 {static => src/static/images}/loginbg.png  | Bin
 {static => src/static/images}/logo.png     | Bin
 {static => src/static/images}/success.png  | Bin
 {static => src/static/images}/tel.png      | Bin
 {static => src/static/images}/weibo.png    | Bin
 {static => src/static/images}/weixin.png   | Bin
 {static => src/static}/js/common.ts        |   0
 src/views/login/About.vue                  |  23 ++
 src/views/login/Login.vue                  |  12 +-
 src/views/login/Reset.vue                  | 340 +++++++++++++++++++++
 src/views/login/Sign.vue                   |  12 +-
 15 files changed, 385 insertions(+), 12 deletions(-)
 rename {static => src/static/images}/agree.png (100%)
 rename {static => src/static/images}/email.png (100%)
 rename {static => src/static/images}/facebook.png (100%)
 rename {static => src/static/images}/loginbg.png (100%)
 rename {static => src/static/images}/logo.png (100%)
 rename {static => src/static/images}/success.png (100%)
 rename {static => src/static/images}/tel.png (100%)
 rename {static => src/static/images}/weibo.png (100%)
 rename {static => src/static/images}/weixin.png (100%)
 rename {static => src/static}/js/common.ts (100%)
 create mode 100644 src/views/login/About.vue
 create mode 100644 src/views/login/Reset.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 6886dda..acd5d8a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -43,6 +43,16 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Sign',
     component: () => import('../views/login/Sign.vue')
   },
+  {
+    path: '/reset',
+    name: 'Reset',
+    component: () => import('../views/login/Reset.vue')
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('../views/login/About.vue')
+  },
 ]
 
 const router = createRouter({
diff --git a/static/agree.png b/src/static/images/agree.png
similarity index 100%
rename from static/agree.png
rename to src/static/images/agree.png
diff --git a/static/email.png b/src/static/images/email.png
similarity index 100%
rename from static/email.png
rename to src/static/images/email.png
diff --git a/static/facebook.png b/src/static/images/facebook.png
similarity index 100%
rename from static/facebook.png
rename to src/static/images/facebook.png
diff --git a/static/loginbg.png b/src/static/images/loginbg.png
similarity index 100%
rename from static/loginbg.png
rename to src/static/images/loginbg.png
diff --git a/static/logo.png b/src/static/images/logo.png
similarity index 100%
rename from static/logo.png
rename to src/static/images/logo.png
diff --git a/static/success.png b/src/static/images/success.png
similarity index 100%
rename from static/success.png
rename to src/static/images/success.png
diff --git a/static/tel.png b/src/static/images/tel.png
similarity index 100%
rename from static/tel.png
rename to src/static/images/tel.png
diff --git a/static/weibo.png b/src/static/images/weibo.png
similarity index 100%
rename from static/weibo.png
rename to src/static/images/weibo.png
diff --git a/static/weixin.png b/src/static/images/weixin.png
similarity index 100%
rename from static/weixin.png
rename to src/static/images/weixin.png
diff --git a/static/js/common.ts b/src/static/js/common.ts
similarity index 100%
rename from static/js/common.ts
rename to src/static/js/common.ts
diff --git a/src/views/login/About.vue b/src/views/login/About.vue
new file mode 100644
index 0000000..f4e69ea
--- /dev/null
+++ b/src/views/login/About.vue
@@ -0,0 +1,23 @@
+<template>
+<div class="about">
+    
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "About",
+  components: {
+  },
+  setup() {
+
+    return {
+
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 042d88a..95c88b9 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -114,9 +114,9 @@
           </div>
         </div>
         <div class="icons">
-          <img src="../../../static/weixin.png" alt="" class="icon" />
-          <img src="../../../static/weibo.png" alt="" class="icon" />
-          <img src="../../../static/facebook.png" alt="" class="icon" />
+          <img src="@/static/images/weixin.png" alt="" class="icon" />
+          <img src="@/static/images/weibo.png" alt="" class="icon" />
+          <img src="@/static/images/facebook.png" alt="" class="icon" />
         </div>
       </div>
     </div>
@@ -131,10 +131,10 @@
         </div>
         <div class="relation">
           <div class="more">了解更多</div>
-          <img src="../../../static/tel.png" alt="" class="icon">
+          <img src="@/static/images/tel.png" alt="" class="icon">
           <div>136-0111-1111</div> 
 
-          <img src="../../../static/email.png" alt="" class="icon email">
+          <img src="@/static/images/email.png" alt="" class="icon email">
           <div>136-0111-1111</div>       
         </div>
       </div>
@@ -208,7 +208,7 @@ export default defineComponent({
 .login {
   min-width: 100%;
   height: 100vh;
-  background: url("../../../static/loginbg.png");
+  background: url("../../static/images/loginbg.png");
   background-size: 100% 130%;
   background-repeat: no-repeat;
   padding-top: 145px;
diff --git a/src/views/login/Reset.vue b/src/views/login/Reset.vue
new file mode 100644
index 0000000..afe2650
--- /dev/null
+++ b/src/views/login/Reset.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="login">
+    <div class="box">
+      <div :class="stepnow != 2 ? 'left' : 'left left1'">
+        <div class="title">
+         <span class="orgname">Beelink</span>密码重置
+        </div>
+
+        <div v-if="stepnow == 1">
+          <div class="nosign">
+            想起密码？
+            <span class="tosign"> 去登录 </span>
+          </div>
+
+          <a-form :layout="formLayout">
+            <a-form-item label="账户名" class="form-item">
+                <a-input class="shuru" placeholder="请输入您的邮箱或者手机号" />
+            </a-form-item>
+            <div class="submit" @click="next(2)">下一步</div>
+        
+          </a-form>
+        </div>
+
+        <div v-if="stepnow == 2">
+          <div class="nosign">
+            已有账号？
+            <span class="tosign"> 去登录 </span>
+          </div>
+          <a-form :layout="formLayout">
+            <div class="signform">
+              <a-form-item label="手机号" class="form-item">
+                <a-input style="width: 50%" placeholder="请输入您的手机号" />
+
+            </a-form-item>
+            <a-form-item label="验证码" class="form-item">
+              <!-- <a-input-group compact>
+                <div class="getcode" @/click="getcode">
+                  点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
+                </div>
+                <div class="line"></div>
+                <a-input style="width: 50%" placeholder="请输入您的验证码" />
+              </a-input-group> -->
+
+               <a-input-group compact>
+                   <div class="getcode" @click="getcode">
+                  点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
+                </div>
+      
+                <div class="line"></div>
+                <a-input style="width: 50%" placeholder="请输入您的手机号" />
+              </a-input-group>
+            </a-form-item>
+            </div>
+
+            <div class="submit" @click="next(3)">立刻注册</div>
+            <div class="orginfo">Beelink公司版权所有 2019—2022</div>
+          </a-form>
+        </div>
+
+        <div v-if="stepnow == 3">
+          <div class="nosign">您已完成注册</div>
+          <img src="@/static/images/success.png" alt="" class="success">
+          <div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
+        </div>
+      </div>
+      <div :class="stepnow != 2 ? 'right' : 'right right1'">
+        <div class="steps">
+          <div class="step">
+            <div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
+            <div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
+          </div>
+          <div class="stepline"></div>
+          <div class="step">
+            <div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
+            <div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
+            <div class="back" @click="next(1)" v-if="stepnow==2">
+              返回上一步
+            </div>
+          </div>
+          <div class="stepline"></div>
+          <div class="step">
+            <div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
+            <div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
+          </div>
+        </div>
+        <div class="icons" v-if="stepnow == 2">
+          <img src="@/static/images/weixin.png" alt="" class="icon" />
+          <img src="@/static/images/weibo.png" alt="" class="icon" />
+          <img src="@/static/images/facebook.png" alt="" class="icon" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Sign",
+  components: {},
+  setup() {
+    const formLayout = {
+      labelCol: 4,
+      wrapperCol: 14,
+    };
+    const time = ref(60);
+    const getcode: () => void = () => {
+      console.log(11111);
+      const timestep = setInterval(() => {
+        console.log(11112);
+        time.value = time.value - 1;
+        if (time.value > 0) {
+          console.log();
+        } else {
+          time.value = 60;
+          clearInterval(timestep);
+        }
+      }, 1000);
+    };
+    const ifagree = ref(true);
+    const agree: () => void = () => {
+      ifagree.value = ifagree.value == true ? false : true;
+      console.log(ifagree.value, 600);
+    };
+
+    const stepnow = ref(1);
+    const next: (e: number) => void = (e: number) => {
+      stepnow.value = e;
+    };
+    return {
+      formLayout,
+      getcode,
+      time,
+      agree,
+      ifagree,
+      stepnow,
+      next,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.login /deep/ .ant-select-selection {
+  border: none;
+}
+.login /deep/ .ant-input {
+  border: none;
+}
+.ant-input:focus {
+  border: none;
+  border-bottom: 1px solid white !important;
+  box-shadow: none;
+}
+.login /deep/ .ant-form-item-label {
+  line-height: 14px;
+}
+.login /deep/ .ant-form-item /deep/ label {
+  color: #0dbba4;
+  font-size: 11px;
+  left: 1px;
+}
+.login {
+  min-width: 100vw;
+  height: 100vh;
+  background: url("../../static/images/loginbg.png");
+  background-size: 100% 130%;
+  background-repeat: no-repeat;
+  padding-top: 145px;
+  .box {
+    display: flex;
+    justify-content: space-around;
+    .left1 {
+      width: 710px !important;
+    }
+    .left {
+      width: 314px;
+      .title {
+        font-size: 17px;
+        font-weight: bold;
+      }
+      .orgname {
+        font-size: 29px;
+        color: #0dbba4;
+        cursor: pointer;
+      }
+      .nosign {
+        font-size: 12px;
+        color: #666666;
+        margin-top: 17px;
+        margin-bottom: 35px;
+      }
+      .tosign {
+        color: #0dbba4;
+        cursor: pointer;
+      }
+      .tab {
+        margin-bottom: 30px;
+      }
+
+      .form-item {
+        border-bottom: 1px solid #e5e5e5;
+        font-size: 15px;
+        margin-right: 40px;
+      }
+      .line {
+        width: 1px;
+        height: 14px;
+        background: #e5e5e5;
+        margin-top: 10px;
+        position: relative;
+        z-index: 999;
+      }
+      .getcode {
+        font-size: 15px;
+        color: #08ae98;
+        width: 119px;
+        line-height: 30px;
+        cursor: pointer;
+      }
+      .orginfo {
+        margin-top: 178px;
+      }
+      .submit {
+        width: 143px;
+        height: 35px;
+        background: linear-gradient(
+          90deg,
+          #00dac2,
+          #42de9e,
+          #88e062,
+          #d0eb3e,
+          #fffa18
+        );
+        border-radius: 18px;
+        font-size: 15px;
+        color: white;
+        font-weight: 800;
+        text-align: center;
+        line-height: 35px;
+        margin-top: 45px;
+      }
+      .agreement {
+        font-size: 12px;
+        display: flex;
+        margin-top: 23px;
+        cursor: default;
+        .ifagree {
+          width: 12px;
+          height: 12px;
+          border-radius: 3px;
+          border: 1px solid #0ebca4;
+          margin: auto 0;
+          margin-right: 7px;
+          .agree {
+            width: 8px;
+            height: 6px;
+            position: relative;
+            top: -4px;
+            left: 2.5px;
+          }
+        }
+      }
+    }
+    .right1 {
+      width: 230px !important;
+    }
+    .right {
+      width: 690px;
+      .steps {
+        padding-top: 112px;
+        .stepline {
+          width: 1px;
+          height: 50px;
+          border: 1px dashed #eeeeee;
+          position: relative;
+          left: 13px;
+        }
+        .step {
+          display: flex;
+          color: #999999;
+          font-size: 11px;
+          line-height: 28px;
+          font-weight: bold;
+          .back {
+            color: #0dbba4;
+            margin-left: 23px;
+          }
+          .circle {
+            width: 29px;
+            height: 29px;
+            border-radius: 15px;
+            background: #eeeeee;
+            font-size: 12px;
+            color: #999999;
+            text-align: center;
+            line-height: 29px;
+            font-weight: 800;
+            margin-right: 17px;
+          }
+        }
+        .step1 {
+          background: #08ae98 !important;
+          color: white !important;
+        }
+        .stepnow {
+          color: #111111;
+        }
+      }
+    }
+  }
+  .signform {
+    display: flex;
+    flex-wrap: wrap;
+    .shuru {
+      width: 313px;
+    }
+  }
+  .icons {
+    margin-right: 41px;
+    margin-top: 227px;
+    .icon {
+      width: 28px;
+      height: 28px;
+      margin-right: 18px;
+      float: right;
+    }
+  }
+  .success{
+    width: 250px;
+    height: 233px;
+  }
+  .ale{
+    color:#08AE98;
+    font-size: 14px;
+    font-weight: 800;
+    margin-top: 34px;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/Sign.vue b/src/views/login/Sign.vue
index 4d44b20..f1a8eb7 100644
--- a/src/views/login/Sign.vue
+++ b/src/views/login/Sign.vue
@@ -42,7 +42,7 @@
             <div class="agreement" @click="agree">
               <div class="ifagree">
                 <img
-                  src="../../../static/agree.png"
+                  src="@/static/images/agree.png"
                   alt=""
                   class="agree"
                   v-if="ifagree"
@@ -92,7 +92,7 @@
 
         <div v-if="stepnow == 3">
           <div class="nosign">您已完成注册</div>
-          <img src="../../../static/success.png" alt="" class="success">
+          <img src="@/static/images/success.png" alt="" class="success">
           <div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
         </div>
       </div>
@@ -117,9 +117,9 @@
           </div>
         </div>
         <div class="icons" v-if="stepnow == 2">
-          <img src="../../../static/weixin.png" alt="" class="icon" />
-          <img src="../../../static/weibo.png" alt="" class="icon" />
-          <img src="../../../static/facebook.png" alt="" class="icon" />
+          <img src="@/static/images/weixin.png" alt="" class="icon" />
+          <img src="@/static/images/weibo.png" alt="" class="icon" />
+          <img src="@/static/images/facebook.png" alt="" class="icon" />
         </div>
       </div>
     </div>
@@ -195,7 +195,7 @@ export default defineComponent({
 .login {
   min-width: 100vw;
   height: 100vh;
-  background: url("../../../static/loginbg.png");
+  background: url("../../static/images/loginbg.png");
   background-size: 100% 130%;
   background-repeat: no-repeat;
   padding-top: 145px;