update: 登录视图验证

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>
+    <div :class="[model.sysCss, 'app-login-captcha']" :style="containerStyle">
+        <auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
+        <i-button :type="type" @click="executeOpen">验证</i-button>
+    </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Model } from "vue-property-decorator";
+import { PanelUserControlModel } from "@/model/panel-detail";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import AuthPuzzleVcode from "./vue-puzzle-code/vue-puzzle-code.vue";
 @Component({
-  components: {
-    "auth-puzzle-vcode": AuthPuzzleVcode,
-  },
+    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");
-  }
+export default class AppLoginCaptcha extends Vue {
+    /**
+     * 模型
+     *
+     * @type {string}
+     * @memberof AppLoginCaptcha
+     */
+    @Prop() public model!: PanelUserControlModel;
+
+    /**
+     * 值
+     *
+     * @type {string}
+     * @memberof AppLoginCaptcha
+     */
+    @Prop() public value!: string;
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppLoginCaptcha
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 容器样式
+     *
+     * @type {any}
+     * @memberof AppLoginCaptcha
+     */
+    public containerStyle: any = null;
+
+    /**
+     * 是否显示
+     */
+    public show: boolean = false;
+
+    /**
+     * 按钮类型
+     */
+    public type: string = 'default';
+
+    public mounted() {
+        if (this.model) {
+            this.containerStyle = this.model.getElementStyle();
+        }
+        if (this.value) {
+            this.type = 'success';
+        }
+    }
+
+    /**
+     * 打开
+     */
+    public executeOpen() {
+        this.show = true;
+    }
+
+    /**
+     * 成功
+     */
+    public onSuccess() {
+        this.show = false;
+        this.type = 'success';
+        this.$emit("valueChange", { name: this.name, value: true});
+    }
+
+    /**
+     * 失败
+     */
+    public onFail() {
+        this.$emit("valueChange", { name: this.name, value: false});
+    }
 }
 </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 lang="less">
+.app-login-captcha {
+    height: 40px;
+    width: 100%;
+    .ivu-btn {
+        width: 100%;
+        height: 100%;
+        &:hover {
+            border: 1px solid #dcdee2;
+            color: #515a6e;
+        }
     }
-  }
 }
-</style>
\ No newline at end of file
+</style>