diff --git a/src/assets/images/login/4.mp4 b/src/assets/images/login/4.mp4
new file mode 100644
index 0000000..c6c3e3f
Binary files /dev/null and b/src/assets/images/login/4.mp4 differ
diff --git a/src/router/index.js b/src/router/index.js
index 86504fb..7f4007d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-10-18 09:59:44
+ * @LastEditTime: 2021-10-19 11:59:59
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -27,7 +27,13 @@ import WeiboDetails from "@/views/WeiboDetails"
 import BrandComparison from "@/views/BrandComparison"
 import EventInsight from "@/views/EventInsight"
 import EventComparison from "@/views/EventComparison"
+import Login from "@/views/Login"
 const router = [
+    {
+        path: '/login',
+        name: "login",
+        component: Login,
+    },
     {
         path: "/",
         name: "iLayout",
diff --git a/src/styles/index.less b/src/styles/index.less
index 905ddaa..14cc16c 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,6 +1,6 @@
 @import "./antd.less";
 @import "./datav.less";
-@import "//at.alicdn.com/t/font_2847898_ypiobcj3ve.css";
+@import "//at.alicdn.com/t/font_2847898_ku9grgp6ng.css";
 @font-face {
     font-family: "Bebas";
     src: url("./BEBAS_.TTF");
diff --git a/src/views/Login/forgetPWD/index.vue b/src/views/Login/forgetPWD/index.vue
new file mode 100644
index 0000000..caf6a82
--- /dev/null
+++ b/src/views/Login/forgetPWD/index.vue
@@ -0,0 +1,118 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 14:45:23
+ * @LastEditTime: 2021-10-19 15:39:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Login/forgetPWD/index.vue
+-->
+<template>
+    <div class="fpwd-outter">
+        <span class="fpw-label">忘记密码</span>
+        <a-form-model layout="horizontal" :model="form" :rules="rules">
+            <a-form-model-item label="手机号码" prop="phone">
+                <a-input v-model="form.phone" placeholder="手机号码" />
+            </a-form-model-item>
+            <a-form-model-item label="验证码" prop="code">
+                <a-input v-model="form.code" placeholder="验证码">
+                    <span class="fp-s1" slot="suffix" v-if="showCode" @click="countdown">发送验证码</span>
+                    <span class="fp-s1" slot="suffix" v-else>{{count}}</span>
+                </a-input>
+            </a-form-model-item>
+        </a-form-model>
+        <div class="fpw-d1">
+            <span class="ss1" @click="reLogin">想起来了，去登录</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "forgetPWD",
+    data() {
+        const validatePhone = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入手机号"));
+            } else {
+                let reg = /^1\d{10}$/;
+                if (!reg.test(value)) {
+                    callback(new Error("请输入正确的手机号"));
+                } else {
+                    callback();
+                }
+            }
+        };
+        const validateCode = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入验证码"));
+            } else {
+                callback();
+            }
+        };
+        return {
+            showCode: true,
+            timer: null,
+            count: 0,
+            form: {
+                phone: "",
+                code: "",
+            },
+            rules: {
+                phone: [{ validator: validatePhone, trigger: "change" }],
+                code: [{ validator: validateCode, trigger: "change" }],
+            },
+        };
+    },
+    methods: {
+        // 倒计时
+        countdown() {
+            const TIME_COUNT = 60;
+            if (!this.timer) {
+                this.count = TIME_COUNT;
+                this.showCode = false;
+                this.timer = setInterval(() => {
+                    if (this.count > 0 && this.count <= TIME_COUNT) {
+                        this.count--;
+                    } else {
+                        this.showCode = true;
+                        clearInterval(this.timer);
+                        this.timer = null;
+                    }
+                }, 1000);
+            }
+        },
+        // 返回登录
+        reLogin() {
+            this.$emit("reLogin");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.fpw-label {
+    display: block;
+    font-size: 36px;
+    color: #3373cc;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+.fpwd-outter {
+    width: 380px;
+    margin: 0 auto;
+    margin-top: 80px;
+}
+.fp-s1 {
+    cursor: pointer;
+    color: #698198;
+}
+.fpw-d1 {
+    .ss1 {
+        color: #3373cc;
+        font-size: 16px;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
new file mode 100644
index 0000000..8bcc248
--- /dev/null
+++ b/src/views/Login/index.vue
@@ -0,0 +1,87 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 11:53:35
+ * @LastEditTime: 2021-10-19 15:53:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Login/index.vue
+-->
+<template>
+    <div class="login-outter">
+        <video class="f" playsinline="" autoplay muted loop="">
+            <source src="../../assets/images/login/4.mp4" type="video/mp4">
+        </video>
+        <div class="login-inner">
+            <div class="login-div">
+                <loginForm @forgetPassword="handlerForget" v-if="dateType===1"></loginForm>
+                <forgetPWD v-if="dateType===2" @reLogin="handlerRelogin"></forgetPWD>
+                <resetPassword v-if="dateType===3" @reLogin="handlerRelogin"></resetPassword>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import loginForm from "./loginForm";
+import forgetPWD from "./forgetPWD";
+import resetPassword from "./resetPassword"
+export default {
+    name: "Login",
+    components: {
+        loginForm,
+        forgetPWD,
+        resetPassword
+    },
+    data() {
+        return {
+            dateType: 1,
+        };
+    },
+    methods: {
+        handlerForget() {
+            this.dateType = 2;
+        },
+        handlerRelogin() {
+            this.dateType = 1;
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.login-outter {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.f {
+    position: absolute;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    -webkit-transition: 1s opacity;
+    transition: 1s opacity;
+}
+.login-inner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background-color: transparent;
+    .login-div {
+        position: absolute;
+        width: 560px;
+        height: 560px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -60%);
+        background: rgba(12, 35, 66, 0.7);
+        box-shadow: 0px 1px 40px 0px rgba(42, 112, 206, 0.5);
+        border-radius: 8px;
+        border: 3px solid;
+    }
+}
+</style>
diff --git a/src/views/Login/loginForm/index.vue b/src/views/Login/loginForm/index.vue
new file mode 100644
index 0000000..3f2862e
--- /dev/null
+++ b/src/views/Login/loginForm/index.vue
@@ -0,0 +1,143 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 14:14:52
+ * @LastEditTime: 2021-10-19 14:47:20
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Login/loginForm/index.vue
+-->
+<template>
+    <div class="lgf-outter">
+        <a-form-model layout="horizontal" :model="form" :rules="rules">
+            <a-form-model-item label="用户名" prop="phone">
+                <a-input v-model="form.phone" placeholder="请输入账号" />
+            </a-form-model-item>
+            <a-form-model-item label="密码" prop="pwd">
+                <a-input v-model="form.pwd" :type="pwdType" placeholder="请输入密码">
+                    <span slot="suffix" class="iconfont icon-zhengyan-21 login-eye" v-if="pwdType==='password'" @click="changePwdType"></span>
+                    <span slot="suffix" class="iconfont icon-in_biyan login-eye" v-else @click="changePwdType"></span>
+                </a-input>
+            </a-form-model-item>
+            <a-form-model-item label="验证码" prop="code">
+                <a-input v-model="form.code" placeholder="请输入验证码">
+                    <a-button slot="addonAfter" style="width: 100px" @click="countdown" v-if="showCode">FNMAK</a-button>
+                    <a-button slot="addonAfter" style="width: 100px" v-else>{{count}}</a-button>
+                </a-input>
+            </a-form-model-item>
+        </a-form-model>
+        <div class="login-d1">
+            <a-checkbox v-model="remCheck">
+                <span style="color: #3373CC">记住密码</span>
+            </a-checkbox>
+            <span class="stn" style="color: #3373CC" @click="forgetPassword">忘记密码</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "loginForm",
+    data() {
+        const validatePass = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入密码"));
+            } else {
+                let reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
+                if (!reg.test(value)) {
+                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
+                } else if(value.length < 8 || value.length > 16) {
+                    callback(new Error("密码8~16位"));
+                } else {
+                    callback();
+                } 
+            }
+        };
+        const validateAccount = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入账户"));
+            } else {
+                let reg=/^[0-9a-zA-Z]*$/;
+                if (!reg.test(value)) {
+                    callback(new Error("用户名是英文字母或英文字母与数字的组合"));
+                } else if(value.length < 8 || value.length > 13) {
+                     callback(new Error("账号在8~13位之间"));
+                } else {
+                    callback();
+                }   
+            }
+        }
+        const validateCode = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入验证码"));
+            }  else {
+                 callback();
+            }
+        }
+        return {
+            pwdType: "password",
+            remCheck: false,
+            count: 0,
+            showCode: true,
+            timer: null,
+            form: {
+                phone: "",
+                pwd: "",
+                code: "",
+            },
+            rules: {
+                phone: [{ validator: validateAccount, trigger: "change" }],
+                pwd: [{ validator: validatePass, trigger: "change" }],
+                code: [{ validator: validateCode, trigger: "change" }],
+            },
+        };
+    },
+    methods: {
+        // 改变是否可以看密码
+        changePwdType() {
+            this.pwdType = this.pwdType === "password" ? "" : "password";
+        },
+        // 倒计时
+        countdown() {
+            const TIME_COUNT = 60;
+            if (!this.timer) {
+                this.count = TIME_COUNT;
+                this.showCode = false;
+                this.timer = setInterval(() => {
+                    if (this.count > 0 && this.count <= TIME_COUNT) {
+                        this.count--;
+                    } else {
+                        this.showCode = true;
+                        clearInterval(this.timer);
+                        this.timer = null;
+                    }
+                }, 1000);
+            }
+        },
+        //忘记密码
+        forgetPassword(){
+            this.$emit('forgetPassword')
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+.lgf-outter {
+    width: 380px;
+    margin: 0 auto;
+    margin-top: 80px;
+}
+.login-eye {
+    font-size: 16px;
+    color: #3373cc;
+    cursor: pointer;
+}
+.login-d1 {
+    width: 380px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    .stn {
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/views/Login/resetPassword/index.vue b/src/views/Login/resetPassword/index.vue
new file mode 100644
index 0000000..a13c971
--- /dev/null
+++ b/src/views/Login/resetPassword/index.vue
@@ -0,0 +1,104 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-19 15:36:15
+ * @LastEditTime: 2021-10-19 15:51:17
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Login/resetPassword/index.vue
+-->
+<template>
+    <div class="rp-outter">
+        <span class="fpw-label">重新设置密码</span>
+        <a-form-model layout="horizontal" :model="form" :rules="rules">
+            <a-form-model-item label="设置密码" prop="pwd1">
+                <a-input v-model="form.pwd1" placeholder="请输入新密码" />
+            </a-form-model-item>
+            <a-form-model-item label="再次输入" prop="pwd2">
+                <a-input v-model="form.pwd2" placeholder="请再次输入新密码" />
+            </a-form-model-item>
+        </a-form-model>
+        <div class="fpw-d1">
+            <span class="ss1" @click="reLogin">想起来了，去登录</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "resetPassword",
+    data() {
+        const validatePass = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入密码"));
+            } else {
+                let reg =
+                    /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
+                if (!reg.test(value)) {
+                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
+                } else if (value.length < 8 || value.length > 16) {
+                    callback(new Error("密码8~16位"));
+                } else {
+                    callback();
+                }
+            }
+        };
+        const validatePass2 = (rule, value, callback) => {
+            if (value === "") {
+                callback(new Error("请输入密码"));
+            } else {
+                let reg =
+                    /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
+                if (!reg.test(value)) {
+                    callback(new Error("密码由大小写字母、数字和特殊字符组成"));
+                } else if (value.length < 8 || value.length > 16) {
+                    callback(new Error("密码8~16位"));
+                } else if (value != this.form.pwd1) {
+                    callback(new Error("两次密码不一致"));
+                } else {
+                    callback();
+                }
+            }
+        };
+        return {
+            form: {
+                pwd1: "",
+                pwd2: "",
+            },
+            rules: {
+                pwd1: [{ validator: validatePass, trigger: "change" }],
+                pwd2: [{ validator: validatePass2, trigger: "change" }],
+            },
+        };
+    },
+    methods: {
+        // 返回登录
+        reLogin() {
+            this.$emit("reLogin");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.rp-outter {
+    width: 380px;
+    margin: 0 auto;
+    margin-top: 80px;
+}
+.fpw-label {
+    display: block;
+    font-size: 36px;
+    color: #3373cc;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+.fpw-d1 {
+    .ss1 {
+        color: #3373cc;
+        font-size: 16px;
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file