阅片人简历采集验证码按钮样式修改

src/views/reviewers/ReviewersResearch.vue

@@ -7,51 +7,20 @@
         {{ $t('trials:researchForm:form:title') }}
       </h2>
       <el-card shadow="hover" style="padding-top: 40px">
-        <el-form
-          ref="resetForm"
-          v-loading="loading"
-          :model="form"
-          label-width="150px"
-          style="width: 80%; margin: 0 auto"
-          :rules="rules"
-          class="demo-ruleForm"
-          size="small"
-        >
+        <el-form ref="resetForm" v-loading="loading" :model="form" label-width="150px"
+          style="width: 80%; margin: 0 auto" :rules="rules" class="demo-ruleForm" size="small">
           <!-- 联系邮箱 -->
-          <el-form-item
-            :label="$t('trials:researchForm:form:contactorEmail')"
-            prop="EmailOrPhone"
-          >
-            <el-input
-              v-model="form.EmailOrPhone"
-              autocomplete="new-password"
-              @change="handleEmailChange"
-            />
+          <el-form-item :label="$t('trials:researchForm:form:contactorEmail')" prop="EmailOrPhone">
+            <el-input v-model="form.EmailOrPhone" autocomplete="new-password" @change="handleEmailChange" />
           </el-form-item>
           <!-- 验证码 -->
-          <el-form-item
-            :label="$t('trials:researchForm:form:verifyCode')"
-            required
-          >
-            <el-col :span="20">
-              <el-form-item prop="VerificationCode">
-                <el-input
-                  v-model="form.VerificationCode"
-                  autocomplete="new-password"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-button
-                size="small"
-                type="primary"
-                style="width: 100%"
-                :disabled="sendDisabled"
-                @click="handleSendCode"
-                >{{ this.$t('trials:researchForm:button:send')
-                }}{{ count || count === 0 ? `(${count}s)` : '' }}</el-button
-              >
-            </el-col>
+          <el-form-item :label="$t('trials:researchForm:form:verifyCode')" prop="VerificationCode">
+            <div style="display: flex;;justify-content: space-between;">
+              <el-input v-model="form.VerificationCode" autocomplete="new-password" />
+              <el-button size="small" style="margin-left: 10px;" :disabled="sendDisabled" class="codeBtn"
+                @click="handleSendCode">{{ this.$t('trials:researchForm:button:send')
+                }}{{ count || count === 0 ? `(${count}s)` : '' }}</el-button>
+            </div>
           </el-form-item>
           <el-form-item>
             <!-- 取消 -->
@@ -59,12 +28,7 @@
               {{ $t('common:button:cancel') }}
             </el-button>
             <!-- 提交 -->
-            <el-button
-              size="small"
-              type="primary"
-              :loading="btnLoading"
-              @click="onSubmit"
-            >
+            <el-button size="small" type="primary" :loading="btnLoading" @click="onSubmit">
               {{ $t('common:button:submit') }}
             </el-button>
           </el-form-item>
@@ -216,7 +180,7 @@ export default {
     this.$i18n.locale = this.$route.query.lang
     this.setLanguage(this.$route.query.lang)
   },
-  mounted() {},
+  mounted() { },
   methods: {
     ...mapMutations({ setLanguage: 'lang/setLanguage' }),
     // 提交
@@ -249,21 +213,16 @@ export default {
               // this.$router.push({ path: `/researchForm?trialId=${this.trialId}&trialSiteSurveyId=${res.Result.TrialSiteSurveyId}` })
               if (this.$route.query.trialId) {
                 this.$router.push({
-                  path: `/curriculumVitae?Id=${
-                    res.Result.DoctorId ? res.Result.DoctorId : ''
-                  }&tabActive=BasicInfo&ReviewStatus=${
-                    res.Result.ReviewStatus
-                  }&trialId=${this.$route.query.trialId}&lang=${
-                    this.$route.query.lang
-                  }`,
+                  path: `/curriculumVitae?Id=${res.Result.DoctorId ? res.Result.DoctorId : ''
+                    }&tabActive=BasicInfo&ReviewStatus=${res.Result.ReviewStatus
+                    }&trialId=${this.$route.query.trialId}&lang=${this.$route.query.lang
+                    }`,
                 })
               } else {
                 this.$router.push({
-                  path: `/curriculumVitae?Id=${
-                    res.Result.DoctorId ? res.Result.DoctorId : ''
-                  }&tabActive=BasicInfo&ReviewStatus=${
-                    res.Result.ReviewStatus
-                  }&lang=${this.$route.query.lang}`,
+                  path: `/curriculumVitae?Id=${res.Result.DoctorId ? res.Result.DoctorId : ''
+                    }&tabActive=BasicInfo&ReviewStatus=${res.Result.ReviewStatus
+                    }&lang=${this.$route.query.lang}`,
                 })
               }
             })
@@ -312,9 +271,8 @@ export default {
         this.timer = setInterval(() => {
           if (this.count > 0 && this.count <= TIME_COUNT) {
             this.count--
-            this.sendTitle = `${this.$t('trials:researchForm:button:send')}(${
-              this.count
-            }s)`
+            this.sendTitle = `${this.$t('trials:researchForm:button:send')}(${this.count
+              }s)`
             this.sendDisabled = true
           } else {
             this.sendDisabled = false
@@ -335,6 +293,7 @@ export default {
 <style lang="scss" scoped>
 .question-login-wrapper {
   padding: 20px;
+
   .box-wrapper {
     width: 50%;
     margin: 20px auto;
@@ -342,4 +301,19 @@ export default {
     color: #303133;
   }
 }
+
+.codeBtn {
+  color: #409EFF;
+  border-color: #409EFF;
+}
+
+.codeBtn.is-disabled,
+.codeBtn.is-disabled:focus,
+.codeBtn.is-disabled:hover {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #fff;
+  border-color: #ebeef5;
+}
 </style>