update: 登录组件

public/assets/img/dingding.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616652640756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="651" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M512 2C230.2 2 2 230.2 2 512s228.2 510 510 510 510-228.2 510-510S793.3 2 512 2z m235.9 442c-1 4.6-3.6 10.8-7.2 19.1l-0.5 0.5c-21.6 45.8-77.3 135.5-77.3 135.5l-0.5-0.5-16.5 28.3h78.8L574.3 826.8l34-136h-61.8l21.6-90.2c-17.5 4.1-38.1 9.8-62.3 18 0 0-33 19.1-94.8-37.1 0 0-41.7-37.1-17.5-45.8 10.3-4.1 50-8.8 81.4-12.9 42.2-5.7 68.5-8.8 68.5-8.8s-130.3 2.1-161.2-3.1c-30.9-4.6-70.1-56.7-78.3-102 0 0-12.9-24.7 27.8-12.9 40.2 11.8 209.2 45.8 209.2 45.8S321.4 375 307 358.5c-14.4-16.5-42.8-89.6-39.2-134.5 0 0 1.5-11.3 12.9-8.2 0 0 161.8 74.2 272.5 114.4C664.5 371.4 760.8 392 747.9 444z" fill="#3296FA" p-id="652"></path></svg>
\ No newline at end of file

public/assets/img/qiyeweixin.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616652700601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="973" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M512 2c281.7 0 510 228.3 510 510s-228.3 510-510 510S2 793.7 2 512 230.3 2 512 2z m159.8 680.3c-4 3.9-4 10.2-0.2 14.1 0.4 0.5 0.9 0.9 1.5 1.2 22.1 20.4 36.4 47.9 40.4 77.7 6.2 22.4 29.7 35.7 52.4 29.5 22.5-5.9 35.9-28.9 30-51.3 0-0.1-0.1-0.2-0.1-0.4-4.7-16.8-19.3-29.1-36.7-30.8-28-5.1-53.5-19.2-72.8-40.1-4.1-3.8-10.5-3.8-14.5 0.1z m-225.7-483c-76.4 8.3-145.8 40.6-195.6 91-19.4 19.4-35.5 41.8-47.8 66.3-37.7 74.9-31.4 164.4 16.5 233.2 13.5 20.2 35.8 45.4 56.1 63.3l-9.2 71.3-1 3c-0.3 0.9-0.3 1.9-0.4 2.8l-0.2 2.3 0.2 2.3c1.2 12.7 12.5 22 25.2 20.9 3.5-0.3 6.8-1.4 9.8-3.1h0.4l1.4-1 22-10.8 65.5-32.5c31.1 8.8 63.4 13.2 95.8 13 40 0.1 79.8-6.7 117.5-20.2-18.8-6-30.9-24.3-29-44-39 12.4-80.2 16.4-120.8 11.9l-6.5-0.9c-14.7-1.9-29.2-4.9-43.4-8.9-7.8-2.4-16.1-1.5-23.3 2.4l-1.8 0.9-53.9 31.3-2.3 1.4c-1.3 0.7-1.9 1-2.6 1-2-0.1-3.5-1.8-3.4-3.8l2-8.2 2.4-8.9 3.9-14.7 4.5-16.4c3-9.2-0.3-19.2-8.2-24.8-21.1-15.5-39.5-34.4-54.4-56-37.9-54.2-43-124.8-13.3-183.8 9.9-19.5 22.9-37.4 38.4-52.9 40.9-41.6 98.3-68.1 161.9-74.9 22-2.4 44.2-2.4 66.2 0 63.2 7.2 120.4 34 161.1 75.4 15.4 15.7 28.2 33.6 37.9 53.2 12.5 24.8 19 52.3 19.1 80.1 0 2.9-0.3 5.8-0.4 8.6 16.8-10.2 38.4-7.7 52.4 6.1l1.9 2.3c3.3-41.2-4.8-82.5-23.3-119.5-12.1-24.5-28.1-46.8-47.3-66.3-52.5-52-121.4-84.3-194.9-91.7-26.4-3.4-52.9-3.5-79.1-0.7z m418.2 405.4c-7.2 1.9-13.8 5.7-19.2 11h-0.1c-6.9 6.8-11.2 15.7-12.2 25.3-5.2 27.8-19.5 53.1-40.5 72-4 3.8-4.1 10.1-0.3 14.1l0.1 0.1c4 4 10.5 4.1 14.6 0.1 0.5-0.5 0.9-0.9 1.2-1.5 20.9-21.9 48.7-36 78.7-39.8 22.8-6.1 36.2-29.2 30.1-51.6-6.2-22.5-29.6-35.8-52.4-29.7z m-160.4-42l-0.7 0.7c-20.9 22.7-49.2 37.3-79.9 41.2-22.6 5.9-36.2 28.7-30.2 51.1 1.9 7.3 5.9 14 11.3 19.3 16.7 16.4 43.7 16.4 60.4-0.1 6.8-6.8 11.1-15.7 12.2-25.2 5.3-27.8 19.6-53.1 40.7-72 4.1-3.7 4.5-10 0.9-14.1l-0.1-0.1c-4-4.2-10.4-4.5-14.6-0.8z m39.6-76.6c-7.1 1.9-13.6 5.7-18.7 10.8-16.4 16.2-16.6 42.6-0.4 59l0.5 0.5c6.9 6.8 15.9 11 25.5 12.1 28 5.1 53.6 19.1 72.9 39.9 4 4 10.4 4 14.4 0.1 4-3.8 4.1-10.1 0.3-14.1-0.5-0.5-1.1-1-1.7-1.4-22.1-20.4-36.4-47.8-40.4-77.6-6.1-22.4-29.6-35.5-52.4-29.3z" fill="#0082EF" p-id="974"></path></svg>
\ No newline at end of file

src/assets/img/dingding.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616652640756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="651" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M512 2C230.2 2 2 230.2 2 512s228.2 510 510 510 510-228.2 510-510S793.3 2 512 2z m235.9 442c-1 4.6-3.6 10.8-7.2 19.1l-0.5 0.5c-21.6 45.8-77.3 135.5-77.3 135.5l-0.5-0.5-16.5 28.3h78.8L574.3 826.8l34-136h-61.8l21.6-90.2c-17.5 4.1-38.1 9.8-62.3 18 0 0-33 19.1-94.8-37.1 0 0-41.7-37.1-17.5-45.8 10.3-4.1 50-8.8 81.4-12.9 42.2-5.7 68.5-8.8 68.5-8.8s-130.3 2.1-161.2-3.1c-30.9-4.6-70.1-56.7-78.3-102 0 0-12.9-24.7 27.8-12.9 40.2 11.8 209.2 45.8 209.2 45.8S321.4 375 307 358.5c-14.4-16.5-42.8-89.6-39.2-134.5 0 0 1.5-11.3 12.9-8.2 0 0 161.8 74.2 272.5 114.4C664.5 371.4 760.8 392 747.9 444z" fill="#3296FA" p-id="652"></path></svg>
\ No newline at end of file

src/assets/img/qiyeweixin.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616652700601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="973" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M512 2c281.7 0 510 228.3 510 510s-228.3 510-510 510S2 793.7 2 512 230.3 2 512 2z m159.8 680.3c-4 3.9-4 10.2-0.2 14.1 0.4 0.5 0.9 0.9 1.5 1.2 22.1 20.4 36.4 47.9 40.4 77.7 6.2 22.4 29.7 35.7 52.4 29.5 22.5-5.9 35.9-28.9 30-51.3 0-0.1-0.1-0.2-0.1-0.4-4.7-16.8-19.3-29.1-36.7-30.8-28-5.1-53.5-19.2-72.8-40.1-4.1-3.8-10.5-3.8-14.5 0.1z m-225.7-483c-76.4 8.3-145.8 40.6-195.6 91-19.4 19.4-35.5 41.8-47.8 66.3-37.7 74.9-31.4 164.4 16.5 233.2 13.5 20.2 35.8 45.4 56.1 63.3l-9.2 71.3-1 3c-0.3 0.9-0.3 1.9-0.4 2.8l-0.2 2.3 0.2 2.3c1.2 12.7 12.5 22 25.2 20.9 3.5-0.3 6.8-1.4 9.8-3.1h0.4l1.4-1 22-10.8 65.5-32.5c31.1 8.8 63.4 13.2 95.8 13 40 0.1 79.8-6.7 117.5-20.2-18.8-6-30.9-24.3-29-44-39 12.4-80.2 16.4-120.8 11.9l-6.5-0.9c-14.7-1.9-29.2-4.9-43.4-8.9-7.8-2.4-16.1-1.5-23.3 2.4l-1.8 0.9-53.9 31.3-2.3 1.4c-1.3 0.7-1.9 1-2.6 1-2-0.1-3.5-1.8-3.4-3.8l2-8.2 2.4-8.9 3.9-14.7 4.5-16.4c3-9.2-0.3-19.2-8.2-24.8-21.1-15.5-39.5-34.4-54.4-56-37.9-54.2-43-124.8-13.3-183.8 9.9-19.5 22.9-37.4 38.4-52.9 40.9-41.6 98.3-68.1 161.9-74.9 22-2.4 44.2-2.4 66.2 0 63.2 7.2 120.4 34 161.1 75.4 15.4 15.7 28.2 33.6 37.9 53.2 12.5 24.8 19 52.3 19.1 80.1 0 2.9-0.3 5.8-0.4 8.6 16.8-10.2 38.4-7.7 52.4 6.1l1.9 2.3c3.3-41.2-4.8-82.5-23.3-119.5-12.1-24.5-28.1-46.8-47.3-66.3-52.5-52-121.4-84.3-194.9-91.7-26.4-3.4-52.9-3.5-79.1-0.7z m418.2 405.4c-7.2 1.9-13.8 5.7-19.2 11h-0.1c-6.9 6.8-11.2 15.7-12.2 25.3-5.2 27.8-19.5 53.1-40.5 72-4 3.8-4.1 10.1-0.3 14.1l0.1 0.1c4 4 10.5 4.1 14.6 0.1 0.5-0.5 0.9-0.9 1.2-1.5 20.9-21.9 48.7-36 78.7-39.8 22.8-6.1 36.2-29.2 30.1-51.6-6.2-22.5-29.6-35.8-52.4-29.7z m-160.4-42l-0.7 0.7c-20.9 22.7-49.2 37.3-79.9 41.2-22.6 5.9-36.2 28.7-30.2 51.1 1.9 7.3 5.9 14 11.3 19.3 16.7 16.4 43.7 16.4 60.4-0.1 6.8-6.8 11.1-15.7 12.2-25.2 5.3-27.8 19.6-53.1 40.7-72 4.1-3.7 4.5-10 0.9-14.1l-0.1-0.1c-4-4.2-10.4-4.5-14.6-0.8z m39.6-76.6c-7.1 1.9-13.6 5.7-18.7 10.8-16.4 16.2-16.6 42.6-0.4 59l0.5 0.5c6.9 6.8 15.9 11 25.5 12.1 28 5.1 53.6 19.1 72.9 39.9 4 4 10.4 4 14.4 0.1 4-3.8 4.1-10.1 0.3-14.1-0.5-0.5-1.1-1-1.7-1.4-22.1-20.4-36.4-47.8-40.4-77.6-6.1-22.4-29.6-35.5-52.4-29.3z" fill="#0082EF" p-id="974"></path></svg>
\ No newline at end of file

src/components/layout-element/login/app-login-button/app-login-button.less

+.app-user-button {
+    width: 100%;
+}
\ No newline at end of file

src/components/layout-element/login/app-login-button/app-login-button.vue

+<template>
+    <div class="app-user-button">
+        <i-button @click="handleSubmit" :type="type">{{ caption }} </i-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator";
+
+@Component({})
+export default class AppUserId extends Vue {
+    @Prop() public predefinedType!: string;
+
+    @Prop() public type?: string;
+
+    @Prop() public caption!: string;
+
+    public handleSubmit() {
+        this.$emit('itemClick', this.predefinedType);
+    }
+}
+</script>
+
+<style lang="less">
+@import './app-login-button.less';
+</style>
\ No newline at end of file

src/components/layout-element/login/app-login-captcha/app-login-captcha.vue

+<template>
+  <div class="app-preset-auth">
+    <auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
+    <i-button ghost @click="executeOpen" long class="app-preset-auth-button"
+      >验证</i-button
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Model } from "vue-property-decorator";
+import AuthPuzzleVcode from "./vue-puzzle-code/vue-puzzle-code.vue";
+@Component({
+  components: {
+    "auth-puzzle-vcode": AuthPuzzleVcode,
+  },
+})
+export default class AppPreSetAuth extends Vue {
+
+  /**
+   * 是否显示
+   */
+  public show: boolean = false;
+
+  /**
+   * 打开
+   */
+  public executeOpen() {
+    this.show = true;
+  }
+
+  /**
+   * 成功
+   */
+  public onSuccess() {
+    this.show = false;
+    this.$emit("success");
+  }
+
+  /**
+   * 失败
+   */
+  public onFail() {
+    this.$emit("fail");
+  }
+}
+</script>
+
+<style lang='less'>
+.app-preset-auth {
+  .app-preset-auth-button {
+    border: 1px solid #dcdee2;
+    border-radius: 4px;
+    color: #515a6e;
+    &:hover{
+      border: 1px solid #dcdee2;
+      color: #515a6e;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/layout-element/login/app-login-captcha/vue-puzzle-code/vue-puzzle-code.less

+.vue-puzzle-vcode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms;
+    &.show_ {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .vue-auth-box_ {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background: #fff;
+    user-select: none;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    .auth-body_ {
+      position: relative;
+      overflow: hidden;
+      border-radius: 3px;
+      .loading-box_ {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.8);
+        z-index: 20;
+        opacity: 1;
+        transition: opacity 200ms;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.hide_ {
+          opacity: 0;
+          pointer-events: none;
+          .loading-gif_ {
+            span {
+              animation-play-state: paused;
+            }
+          }
+        }
+        .loading-gif_ {
+          flex: none;
+          height: 5px;
+          line-height: 0;
+          @keyframes load {
+            0% {
+              opacity: 1;
+              transform: scale(1.3);
+            }
+            100% {
+              opacity: 0.2;
+              transform: scale(0.3);
+            }
+          }
+          span {
+            display: inline-block;
+            width: 5px;
+            height: 100%;
+            margin-left: 2px;
+            border-radius: 50%;
+            background-color: #888;
+            animation: load 1.04s ease infinite;
+            &:nth-child(1) {
+              margin-left: 0;
+            }
+            &:nth-child(2) {
+              animation-delay: 0.13s;
+            }
+            &:nth-child(3) {
+              animation-delay: 0.26s;
+            }
+            &:nth-child(4) {
+              animation-delay: 0.39s;
+            }
+            &:nth-child(5) {
+              animation-delay: 0.52s;
+            }
+          }
+        }
+      }
+      .info-box_ {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        overflow: hidden;
+        font-size: 13px;
+        background-color: #83ce3f;
+        opacity: 0;
+        transform: translateY(24px);
+        transition: all 200ms;
+        color: #fff;
+        z-index: 10;
+        &.show {
+          opacity: 0.95;
+          transform: translateY(0);
+        }
+        &.fail {
+          background-color: #ce594b;
+        }
+      }
+      .auth-canvas2_ {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 60px;
+        height: 100%;
+        z-index: 2;
+      }
+      .auth-canvas3_ {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        transition: opacity 600ms;
+        z-index: 3;
+        &.show {
+          opacity: 1;
+        }
+      }
+      .flash_ {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.1);
+        z-index: 3;
+        &.show {
+          transition: transform 600ms;
+        }
+      }
+      .reset_ {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 35px;
+        height: auto;
+        z-index: 12;
+        cursor: pointer;
+        transition: transform 200ms;
+        transform: rotate(0deg);
+        &:hover {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .auth-control_ {
+      .range-box {
+        position: relative;
+        width: 100%;
+        background-color: #eef1f8;
+        margin-top: 20px;
+        border-radius: 3px;
+        box-shadow: 0 0 8px rgba(240, 240, 240, 0.6) inset;
+        .range-text {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 14px;
+          color: #b7bcd1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+          width: 100%;
+        }
+        .range-slider {
+          position: absolute;
+          height: 100%;
+          width: 50px;
+          background-color: rgba(106, 160, 255, 0.8);
+          border-radius: 3px;
+          .range-btn {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            right: 0;
+            width: 50px;
+            height: 100%;
+            background-color: #fff;
+            border-radius: 3px;
+            box-shadow: 0 0 4px #ccc;
+            cursor: pointer;
+            & > div {
+              width: 0;
+              height: 40%;
+  
+              transition: all 200ms;
+              &:nth-child(2) {
+                margin: 0 4px;
+              }
+              border: solid 1px #6aa0ff;
+            }
+            &:hover,
+            &.isDown {
+              & > div:first-child {
+                border: solid 4px transparent;
+                height: 0;
+                border-right-color: #6aa0ff;
+              }
+              & > div:nth-child(2) {
+                border-width: 3px;
+                height: 0;
+                border-radius: 3px;
+                margin: 0 6px;
+                border-right-color: #6aa0ff;
+              }
+              & > div:nth-child(3) {
+                border: solid 4px transparent;
+                height: 0;
+                border-left-color: #6aa0ff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .vue-puzzle-overflow {
+    overflow: hidden !important;
+  }
\ No newline at end of file

src/components/layout-element/login/app-login-input/app-login-input.vue

+<template>
+    <div class="app-user-input">
+        <i-input
+            size='large'
+            :prefix='icon'
+            v-model="value"
+            :placeholder="placeholder">
+        </i-input>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
+
+@Component({
+})
+export default class AppUserId extends Vue {
+    
+    /**
+     * 登录名称
+     *
+     * @type {string}
+     * @memberof AppUserId
+     */
+    @Prop({default: ''}) public value!: string;
+
+    @Prop() public icon?: string;
+
+    @Prop() public placeholder?: string;
+    
+}
+</script>

src/components/layout-element/login/app-login-message/app-login-message.less

+.app-login-message{
+    .ivu-alert{
+        display: flex;
+        align-items: center;
+        background-color: rgb(255, 225, 225);
+        .ivu-alert-icon{
+            position: unset;
+            margin-right: 5px;
+        }
+    }
+    .ivu-alert-error,
+    .ivu-alert-with-icon{
+        padding-left: 10px;
+    }
+}
\ No newline at end of file

src/components/layout-element/login/app-login-message/app-login-message.vue

+<template>
+  <div class="app-login-message">
+    <alert v-show="value" type="error" show-icon>{{ value }}</alert>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component({})
+export default class AppPreSetLoginMessage extends Vue {
+
+    /**
+     * 内容
+     *
+     * @type {string}
+     * @memberof AppPreSetLoginMessage
+     */
+    @Prop() public value?: string;
+
+}
+</script>
+
+<style lang='less'>
+@import "./app-login-message.less";
+</style>
\ No newline at end of file

src/components/layout-element/login/app-login-note-verify/app-login-note-verify.less

+.app-preset-smsverification{
+    .content {
+        display: flex;
+        margin: 5px 0;
+        .el-button {
+            border: 1px solid #dcdee2;
+            margin-left: 10px;
+            color: #606266;
+            background-color: #fff;
+            &:hover {
+                border: 1px solid #dcdee2;
+            }
+        }
+    }
+    .code{
+        padding-top: 8px;
+    }
+    .error {
+        color: red;
+    }
+}
\ No newline at end of file

src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue

+<template>
+  <div class="app-preset-smsverification">
+    <div class="content">
+      <i-input
+        size="default"
+        type="text"
+        v-model="phoneNumber"
+        :placeholder="$t('components.login.phoneplaceholder')"
+        @on-blur="veriPhoneNumber"
+      ></i-input>
+      <el-button
+        :disabled="disabled"
+        size="mini"
+        type="primary"
+        @click="getVeriCode()"
+        >{{ disabled ? `${countDown}s ${$t('components.login.getcodeafter')}` : `${$t('components.login.getcode')}` }}</el-button
+      >
+    </div>
+    <div class="code">
+      <i-input
+        size="default"
+        type="text"
+        :value="currentValue"
+        @input="codeChange"
+        :placeholder="$t('components.login.codeplaceholder')"
+      ></i-input>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component({})
+export default class AppPresetSmsVerification extends Vue {
+
+  /**
+   *验证码值
+   *
+   * @type {string}
+   * @memberof AppPresetSmsVerification
+   */
+  @Prop() public value!: string;
+
+  /**
+   *验证码当前值
+   *
+   * @type {string}
+   * @memberof AppPresetSmsVerification
+   */
+  get currentValue(): string {
+    return this.value;
+  }
+
+
+  /**
+   * 手机号
+   *
+   * @type {*}
+   * @memberof AppPresetSmsVerification
+   */
+  public phoneNumber: string = '';
+
+  /**
+   * 倒计时
+   *
+   * @type {*}
+   * @memberof AppPresetSmsVerification
+   */
+  public countDown: number = 60;
+
+  /**
+   * 错误提示
+   * @type {*}
+   * @memberof AppPresetSmsVerification
+   */
+  public phoneError = false;
+
+  /**
+   * 是否禁用获取验证码按钮
+   *
+   * @type {*}
+   * @memberof AppPresetSmsVerification
+   */
+  public disabled: boolean = false;
+
+  /**
+   * 定时器
+   *
+   * @type {*}
+   * @memberof AppPresetSmsVerification
+   */
+  public timer: any;
+
+  /**
+   * @description 设置倒计时
+   * @memberof AppPresetSmsVerification
+   */
+  public setCountDown() {
+    if (this.countDown > 0) {
+      this.countDown--;
+    } else {
+      this.countDown = 60;
+      this.disabled = false;
+      clearInterval(this.timer);
+    }
+    this.$forceUpdate();
+  }
+
+  /**
+   * @description 验证码输入变化
+   * @memberof AppPresetSmsVerification
+   */
+  public codeChange(value: string) {
+    this.$emit("change", value);
+  }
+
+  /**
+   * @description 校验手机号
+   * @memberof AppPresetSmsVerification
+   */
+  public veriPhoneNumber(): boolean {
+    this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber); 
+    if(this.phoneError) {
+      this.$emit("error", this.$t('components.login.phonefailed'));
+    } else {
+      this.$emit("error", '');
+    }
+    return this.phoneError;
+  }
+
+  /**
+   * @description 获取验证码
+   * @memberof AppPresetSmsVerification
+   */
+  public getVeriCode() {
+    if(this.phoneError) return;
+    // todo
+    this.$http.post(``, {}).then((response: any) => {
+      if (response.status == 200) {
+        this.disabled = true;
+        this.timer = setInterval(() => {
+          this.setCountDown();
+        }, 1000);
+      }
+    });
+  }
+}
+</script>
+
+<style lang='less'>
+@import "./app-login-note-verify.less";
+</style>
\ No newline at end of file

src/components/layout-element/login/app-login-org/app-login-org.less

+
+.app-auth-org-picker {
+    height: 36px;
+    width: 100%;
+    .app-org-sector-remote {
+        width: 100%;
+        .org-sector-choice{
+            background-color: #e6f7ff;
+        }
+    }
+    .ivu-dropdown{
+        width: inherit;
+        position: relative;
+        .ivu-select-dropdown{
+            width: 100%;
+        }
+    }
+    .auth-org-picker-dropdown{
+        width: inherit;
+        position: relative;
+        border-radius: 5px;
+        border: 1px solid gray;
+        .ivu-select-dropdown{
+            width: 100%;
+        }
+    }
+    .menu-item-no-data{
+        width: 100%;
+        font-size: 16px;
+        text-align: center;
+        color: #dbdbdb;
+        padding: 5px 0;
+    }
+}
\ No newline at end of file

src/components/layout-element/login/app-login-org/app-login-org.vue

+<template>
+    <div class="app-org-picker">
+        <div class="app-org-sector-remote">
+            <dropdown @on-click="orgSelect" @on-visible-change="visibleChange">
+                <div class="org-sector">
+                    <Input :value="getSelectedOrgName" placeholder="请选择部门" readonly :icon="iconClass" />
+                </div>
+                <dropdown-menu slot="list">
+                    <dropdown-item
+                        :class="{ 'org-sector-choice': Object.is(item.srforgsectorid, getSelectedOrgName) }"
+                        :name="item.srforgsectorid"
+                        v-for="(item, index) in selectedOrgArray"
+                        :key="index"
+                    >
+                        {{ item.srforgsectorname }}
+                    </dropdown-item>
+                    <div class="menu-item-no-data" v-show="!selectedOrgArray.length">暂无数据</div>
+                </dropdown-menu>
+            </dropdown>
+        </div>
+    </div>
+</template>
+<script lang='ts'>
+import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppAuthOrgPicker extends Vue {
+
+    /**
+     * 输入值
+     *
+     * @type {*}
+     * @memberof AppAuthOrgPicker
+     */
+    @Prop() public value!: string;
+
+    /**
+     * 默认数据来源模式
+     *
+     * @type {string}
+     * @memberof AppAuthOrgPicker
+     *
+     */
+    public selectMode: 'REMOTE' | 'LOCAL' = 'LOCAL';
+
+    /**
+     * 选中组织部门id
+     *
+     * @type {string}
+     * @memberof AppAuthOrgPicker
+     */
+    public selectedOrgId: string = '';
+
+    /**
+     * 图标名称
+     *
+     * @type {boolean}
+     * @memberof AppAuthOrgPicker
+     */
+    public iconClass: string = 'ios-arrow-down';
+
+    /**
+     * 选中组织部门名称
+     *
+     * @type {string}
+     * @memberof AppAuthOrgPicker
+     */
+    get getSelectedOrgName() {
+        if (this.value) {
+            const selectedValue = this.selectedOrgArray.find((item: any) => {
+                return item.srforgsectorid == this.value;
+            });
+            return selectedValue?.srforgsectorname;
+        }
+    }
+
+    /**
+     * 组织部门名称数组
+     *
+     * @type {Array<any>}
+     * @memberof AppAuthOrgPicker
+     */
+    public selectedOrgArray: Array<any> = [];
+
+    /**
+     * 组件初始化数据，vue生命周期
+     *
+     * @memberof AppAuthOrgPicker
+     */
+    public created() {
+        this.getOrgData();
+    }
+
+    /**
+     * 选择组织部门回调
+     *
+     * @memberof AppAuthOrgPicker
+     */
+    public orgSelect(data: string) {
+        if (Object.is(data, this.selectedOrgId)) {
+            return;
+        }
+        let item: any = this.selectedOrgArray.find((_item: any) => Object.is(_item.srforgsectorid, data));
+        this.$emit('valueChange', { value: item.srforgsectorid });
+    }
+
+    /**
+     * 下拉框打开或收起回调
+     *
+     * @memberof AppAuthOrgPicker
+     */
+    visibleChange(data: boolean) {
+        this.iconClass = data ? 'ios-arrow-up' : 'ios-arrow-down';
+    }
+
+    /**
+     * 获取数据
+     *
+     * @memberof AppAuthOrgPicker
+     */
+    public async getOrgData() {
+        // todo
+        console.log('获取数据暂未实现');
+    }
+}
+</script>
+<style lang="less">
+@import './app-login-org.less';
+</style>
\ No newline at end of file

src/components/layout-element/login/app-login-third/app-login-third.less

+   .app-login-third {
+    text-align: center;
+    .app-login-third-imgrwap {
+        .sign-btn {
+            .third-svg-container {
+                margin: 0px;
+                padding: 0px;
+            }
+        }
+    }
+}
\ No newline at end of file

src/locale/lanres/components/components_en_US_base.ts

@@ -158,6 +158,8 @@ function getLocaleResourceBase(){
         placeholder2:'Password',
         name: 'Login',
         reset:'Reset',
+        register: 'Register',
+        logout: 'Logout',
         other:'Other login methods',
         tip: 'Enter username and password',
         warning1:'QQ authorization login not supported',
@@ -171,6 +173,13 @@ function getLocaleResourceBase(){
             message: 'The password cannot be empty',
         },
         loginfailed: 'Login failed',
+        authfailed: 'Authentication failed',
+        phoneplaceholder: 'Please enter your mobile phone number',
+        phonefailed: 'The phone number is incorrect',
+        codeplaceholder: 'Please enter the verification code',
+        getcode: 'Get verification code',
+        getcodeafter: 'Get verification code after',
+        entervercode: 'Please enter the verification code',
       },
       appUser: {
         name: 'System',

src/locale/lanres/components/components_zh_CN_base.ts

@@ -159,6 +159,8 @@ function getLocaleResourceBase(){
         placeholder2:'密码',
         name: '登录',
         reset:'重置',
+        register: '注册',
+        logout: '登出',
         other:'其他登录方式',
         tip: '输入用户名和密码',
         warning1:'qq授权登录暂未支持',
@@ -172,6 +174,13 @@ function getLocaleResourceBase(){
             message: '密码不能为空',
         },
         loginfailed: '登录失败',
+        authfailed: '验证失败',
+        phoneplaceholder: '请输入手机号',
+        phonefailed: '手机号不正确',
+        codeplaceholder: '请输入验证码',
+        getcode: '获取验证码',
+        getcodeafter: '后获取验证码',
+        entervercode: '请输入验证码',
       },
       appUser: {
         name: '系统管理员',