验证码发送与确认页面优化

src/components/MFA/index.vue

@@ -17,11 +17,13 @@
       </el-form-item>
       <!-- 验证码 -->
       <el-form-item :label="$t('mfa:form:MFACode')" prop="Code">
-        <el-input :placeholder="$t('mfa:form:input:placeholder:Codes')" v-model="form.Code"
-          style="width: 200px; margin-right: 10px" />
-        <el-button type="primary" size="small" @click.stop="sendMFACode" :disabled="flag || sendFlag"
-          style="float: right;margin-right: 35px;">{{ flag ?
-            `${second}s ${$t("mfa:form:sendMFACodeCountDown")}` : $t("mfa:form:sendMFACode") }}</el-button>
+        <div style="display: flex;justify-content: space-between;width: 90%;">
+          <el-input :placeholder="$t('mfa:form:input:placeholder:Codes')" v-model="form.Code" />
+          <el-button size="small" @click.stop="sendMFACode" :disabled="flag || sendFlag" style="margin-left: 10px;"
+            class="codeBtn">{{
+              flag ?
+                `${second}s ${$t("mfa:form:sendMFACodeCountDown")}` : $t("mfa:form:sendMFACode") }}</el-button>
+        </div>
       </el-form-item>
     </el-form>
     <div slot="footer">
@@ -178,6 +180,21 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.codeBtn {
+  color: #409EFF;
+  border-color: #409EFF;
+}
+
+.codeBtn.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #fff;
+  border-color: #ebeef5;
+}
+
 .tip_mfa {
   width: 86%;
   margin: auto;

src/views/forgetpassword/index.vue

@@ -21,13 +21,19 @@
         <el-form-item :label="$t('trials:researchForm:form:verifyCode')" required>
           <el-col :span="18">
             <el-form-item prop="VerificationCode">
-              <el-input v-model="form.VerificationCode" autocomplete="off" />
+              <div style="display: flex;justify-content: space-between;">
+                <el-input v-model="form.VerificationCode" autocomplete="off" />
+                <el-button size="small" class="codeBtn" :disabled="sendDisabled" @click="handleSendCode"
+                  style="width: 30%;margin-left: 10px;">
+                  {{ sendTitle }}
+                </el-button>
+              </div>
+
             </el-form-item>
           </el-col>
-          <el-col :span="6" style="text-align: right">
-            <el-button size="small" type="primary" style="width: 80%" :disabled="sendDisabled"
-              @click="handleSendCode">{{ sendTitle }}</el-button>
-          </el-col>
+          <!-- <el-col :span="6" style="text-align: right">
+     
+          </el-col> -->
         </el-form-item>
       </el-form>
       <!-- 校验 -->
@@ -381,6 +387,10 @@ export default {
 /*::v-deep .is-error{*/
 /*  margin-bottom: 40px;*/
 /*}*/
+.codeBtn {
+  color: #409EFF;
+  border-color: #409EFF;
+}
 .is-error.my_new_pwd {
   margin-bottom: 45px;
 }

src/views/research/login.vue

@@ -64,7 +64,7 @@
               </el-form-item>
             </el-col>
             <el-col style="width: 120px;margin-left: 10px">
-              <el-button size="small" type="primary" style="width:100%;"
+              <el-button size="small" class="codeBtn" style="width:100%;"
                 :disabled="sendDisabled || !form.EmailOrPhone || count > 0" @click="handleSendCode">{{
                   this.$t('trials:researchForm:button:send') }} {{ sendTitle ? `${sendTitle}` : null }}</el-button>
             </el-col>
@@ -343,6 +343,21 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.codeBtn {
+  color: #409EFF;
+  border-color: #409EFF;
+}
+
+.codeBtn.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #fff;
+  border-color: #ebeef5;
+}
+
 .question-login-wrapper {
   padding: 20px;
 

src/views/trials/trials-myinfo/account.vue

@@ -81,7 +81,6 @@
           <el-button
             class="sendCode"
             :disabled="sendDisabled"
-            type="primary"
             size="mini"
             @click="sendVerificationCode"
             >{{ sendTitle }}</el-button