tony001 发布系统代码 [后台服务，演示应用]

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

 <template>
-  <div class="app-preset-auth">
+    <div :class="[model.sysCss, 'app-login-captcha']" :style="containerStyle">
         <auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
-    <i-button ghost @click="executeOpen" long class="app-preset-auth-button"
-      >验证</i-button
-    >
+        <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,
     },
 })
-export default class AppPreSetAuth extends Vue {
+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';
+        }
+    }
+
     /**
      * 打开
      */
@@ -34,25 +78,27 @@ export default class AppPreSetAuth extends Vue {
      */
     public onSuccess() {
         this.show = false;
-    this.$emit("success");
+        this.type = 'success';
+        this.$emit("valueChange", { name: this.name, value: true});
     }
 
     /**
      * 失败
      */
     public onFail() {
-    this.$emit("fail");
+        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{
+<style lang="less">
+.app-login-captcha {
+    height: 40px;
+    width: 100%;
+    .ivu-btn {
+        width: 100%;
+        height: 100%;
+        &:hover {
             border: 1px solid #dcdee2;
             color: #515a6e;
         }

app_Web/src/pages/ungroup/app-login-view/app-login-view-base.vue

@@ -32,7 +32,7 @@
         <app-login-button class="app-logout-button" name="auth_logout1"  :model="layoutModelDetails.auth_logout1" @itemClick="handleButtonClick" />
         </template>
         <template #auth_captcha1>
-        <app-login-captcha />
+        <app-login-captcha name="auth_captcha1" :model="layoutModelDetails.auth_captcha1" :value="layoutData.auth_captcha1" @valueChange="handleValueChange" />
         </template>
         <template #auth_verificationcode>
         <app-login-note-verify />

app_Web/src/widgets/ibizorder/sform-form/sform-form-base.vue

@@ -2247,4 +2247,5 @@ export default class SFormBase extends Vue implements ControlInterface {
 
 <style lang='less'>
 @import './sform-form.less';
+</style>form-form.less';
 </style>
\ No newline at end of file