fix:登录组件css变更

src/components/signin/emailLogin.vue

@@ -4,55 +4,65 @@
     <h1>邮箱登录</h1>
     <div class="tip">
       您还可以进行
-      <span @click="changeLogin">{{loginMethod}}</span>&nbsp;登录
+      <span @click="changeLogin">{{ loginMethod }}</span
+      >&nbsp;登录
     </div>
     <div>
       <el-input
         placeholder="请输入邮箱地址"
         class="input-box"
         v-model.trim="email"
-        @input="email=email.replace(/[\u4e00-\u9fa5]/ig,'')"
+        @input="email = email.replace(/[\u4e00-\u9fa5]/gi, '')"
       />
       <!-- code输入框 -->
-      <div class="el-input input-box input-box__code" v-if="loginType===1">
+      <div class="el-input input-box input-box__code" v-if="loginType === 1">
         <input
           type="text"
           maxlength="9"
           autocomplete="off"
           v-model.trim="code"
-          @input="code=code.replace(/[^\d]/g,'')"
+          @input="code = code.replace(/[^\d]/g, '')"
           class="el-input__inner"
           placeholder="请输入邮箱验证码"
         />
         <div
           class="btn"
+          :class="{ 'btn-js__active': curIntervalSeconds === 0 }"
           @click="getCode"
-        >{{curIntervalSeconds === 0 ? '发送验证码' : curIntervalSeconds + '秒后重新发送'}}</div>
+        >
+          {{
+            curIntervalSeconds === 0
+              ? "发送验证码"
+              : curIntervalSeconds + "秒后重新发送"
+          }}
+        </div>
       </div>
       <!-- 密码输入框 -->
-      <div class="el-input input-box input-password" v-if="loginType===0">
+      <div class="el-input input-box input-password" v-if="loginType === 0">
         <input
-          :type="[openOrClose?'password':'text']"
+          :type="[openOrClose ? 'password' : 'text']"
           maxlength="30"
           autocomplete="off"
           v-model.trim="password"
-          @input="password=password.replace(/[\u4e00-\u9fa5]/ig,'')"
+          @input="password = password.replace(/[\u4e00-\u9fa5]/gi, '')"
           class="el-input__inner"
           placeholder="请输入密码"
         />
         <div class="icon" @click="changeOpen">
-          <i class="iconfont" :class="[openOrClose?'iconYJ':'iconYC']"></i>
+          <i class="iconfont" :class="[openOrClose ? 'iconYJ' : 'iconYC']"></i>
         </div>
       </div>
       <!-- 底部登录按钮 -->
       <div class="sign-in-btn" @click="loginStart">登录</div>
       <!-- 记住密码or设置密码等 -->
-      <div class="operation-box" v-if="loginType===0">
+      <div class="operation-box" v-if="loginType === 0">
         <div class="left-link-zone">
           <el-checkbox v-model="isAutoLogin">记住密码</el-checkbox>
         </div>
         <div class="right-link-zone">
-          <a href="javascript:void(0)" class="set-up" @click="SetPassword(2)">设置密码</a>
+          <a href="javascript:void(0)" class="set-up" @click="SetPassword(2)"
+            >设置密码</a
+          >
           <a href="javascript:void(0)" @click="SetPassword(3)">忘记密码</a>
         </div>
       </div>
@@ -291,6 +301,9 @@ export default {
     background: rgba(244, 244, 244, 1);
     border-radius: 3px;
   }
+  .btn-js__active {
+    color: #4a90e2;
+  }
 }
 .input-password {
   position: relative;

src/components/signin/phoneLogin.vue

@@ -4,7 +4,8 @@
     <h1>手机登录</h1>
     <div class="tip">
       您还可以进行
-      <span @click="changeLogin">{{loginMethod}}</span>&nbsp;登录
+      <span @click="changeLogin">{{ loginMethod }}</span
+      >&nbsp;登录
     </div>
     <div>
       <el-input
@@ -12,48 +13,57 @@
         class="input-box"
         v-model.trim="phone"
         maxlength="11"
-        @input="phone=phone.replace(/[^\d]/g,'')"
+        @input="phone = phone.replace(/[^\d]/g, '')"
       />
       <!-- code输入框 -->
-      <div class="el-input input-box input-box__code" v-if="loginType===1">
+      <div class="el-input input-box input-box__code" v-if="loginType === 1">
         <input
           type="text"
           maxlength="9"
           autocomplete="off"
           v-model.trim="code"
-          @input="code=code.replace(/[^\d]/g,'')"
+          @input="code = code.replace(/[^\d]/g, '')"
           class="el-input__inner"
           placeholder="请输入短信验证码"
         />
         <div
           class="btn"
+          :class="{ 'btn-js__active': curIntervalSeconds === 0 }"
           @click="getCode"
-        >{{curIntervalSeconds === 0 ? '发送验证码' : curIntervalSeconds + '秒后重新发送'}}</div>
+        >
+          {{
+            curIntervalSeconds === 0
+              ? "发送验证码"
+              : curIntervalSeconds + "秒后重新发送"
+          }}
+        </div>
       </div>
       <!-- 密码输入框 -->
-      <div class="el-input input-box input-password" v-if="loginType===0">
+      <div class="el-input input-box input-password" v-if="loginType === 0">
         <input
-          :type="[openOrClose?'password':'text']"
+          :type="[openOrClose ? 'password' : 'text']"
           maxlength="30"
           autocomplete="off"
           v-model.trim="password"
-          @input="password=password.replace(/[\u4e00-\u9fa5]/ig,'')"
+          @input="password = password.replace(/[\u4e00-\u9fa5]/gi, '')"
           class="el-input__inner"
           placeholder="请输入密码"
         />
         <div class="icon" @click="changeOpen">
-          <i class="iconfont" :class="[openOrClose?'iconYJ':'iconYC']"></i>
+          <i class="iconfont" :class="[openOrClose ? 'iconYJ' : 'iconYC']"></i>
         </div>
       </div>
       <!-- 底部登录按钮 -->
       <div class="sign-in-btn" @click="loginStart">登录</div>
       <!-- 记住密码or设置密码等 -->
-      <div class="operation-box" v-if="loginType===0">
+      <div class="operation-box" v-if="loginType === 0">
         <div class="left-link-zone">
           <el-checkbox v-model="isAutoLogin">记住密码</el-checkbox>
         </div>
         <div class="right-link-zone">
-          <a href="javascript:void(0)" class="set-up" @click="SetPassword(0)">设置密码</a>
+          <a href="javascript:void(0)" class="set-up" @click="SetPassword(0)"
+            >设置密码</a
+          >
           <a href="javascript:void(0)" @click="SetPassword(1)">忘记密码</a>
         </div>
       </div>
@@ -297,6 +307,9 @@ export default {
     background: rgba(244, 244, 244, 1);
     border-radius: 3px;
   }
+  .btn-js__active {
+    color: #4a90e2;
+  }
 }
 .input-password {
   position: relative;

src/components/signin/setPassword.vue

 <template>
   <div>
-    <h1>{{title}}</h1>
+    <h1>{{ title }}</h1>
     <el-input
       placeholder="请输入手机号"
       class="input-box"
       v-model="phone"
-      v-if="getType===0||getType===1"
+      v-if="getType === 0 || getType === 1"
       maxlength="11"
-      @input="phone=phone.replace(/[^\d]/g,'')"
+      @input="phone = phone.replace(/[^\d]/g, '')"
     />
     <el-input
-      v-if="getType===2||getType===3"
+      v-if="getType === 2 || getType === 3"
       placeholder="请输入邮箱地址"
       class="input-box"
       v-model.trim="email"
       @blur="cheack"
-      @input="email=email.replace(/[\u4e00-\u9fa5]/ig,'')"
+      @input="email = email.replace(/[\u4e00-\u9fa5]/gi, '')"
     />
     <!-- code输入框 -->
-    <div class="el-input input-box input-box__code" v-if="getType===0||getType===1">
+    <div
+      class="el-input input-box input-box__code"
+      v-if="getType === 0 || getType === 1"
+    >
       <input
         type="text"
         maxlength="9"
         autocomplete="off"
         v-model="code"
-        @input="code=code.replace(/[^\d]/g,'')"
+        @input="code = code.replace(/[^\d]/g, '')"
         class="el-input__inner"
         placeholder="请输入短信验证码"
       />
       <div
         class="btn"
+        :class="{ 'btn-js__active': curIntervalSeconds === 0 }"
         @click="getCode"
-      >{{curIntervalSeconds === 0 ? '发送验证码' : curIntervalSeconds + '秒后重新发送'}}</div>
+      >
+        {{
+          curIntervalSeconds === 0
+            ? "发送验证码"
+            : curIntervalSeconds + "秒后重新发送"
+        }}
+      </div>
     </div>
-    <div class="el-input input-box input-box__code" v-if="getType===2||getType===3">
+    <div
+      class="el-input input-box input-box__code"
+      v-if="getType === 2 || getType === 3"
+    >
       <input
         type="text"
         maxlength="9"
         autocomplete="off"
         v-model.trim="code"
-        @input="code=code.replace(/[^\d]/g,'')"
+        @input="code = code.replace(/[^\d]/g, '')"
         class="el-input__inner"
         placeholder="请输入邮箱验证码"
       />
       <div
         class="btn"
+        :class="{ 'btn-js__active': curIntervalSeconds === 0 }"
         @click="getEmailCode"
-      >{{curIntervalSeconds === 0 ? '发送验证码' : curIntervalSeconds + '秒后重新发送'}}</div>
+      >
+        {{
+          curIntervalSeconds === 0
+            ? "发送验证码"
+            : curIntervalSeconds + "秒后重新发送"
+        }}
+      </div>
     </div>
     <!-- 密码输入框 -->
     <div class="el-input input-box input-password">
       <input
-        :type="[openOrClose1?'password':'text']"
+        :type="[openOrClose1 ? 'password' : 'text']"
         maxlength="30"
         autocomplete="off"
         v-model.trim="passwordOne"
-        @input="passwordOne=passwordOne.replace(/[\u4e00-\u9fa5]/ig,'')"
+        @input="passwordOne = passwordOne.replace(/[\u4e00-\u9fa5]/gi, '')"
         class="el-input__inner"
         placeholder="请输入密码"
       />
       <div class="icon" @click="changeOpen1">
-        <i class="iconfont" :class="[openOrClose1?'iconYJ':'iconYC']"></i>
+        <i class="iconfont" :class="[openOrClose1 ? 'iconYJ' : 'iconYC']"></i>
       </div>
     </div>
     <div class="el-input input-box input-password">
       <input
-        :type="[openOrClose2?'password':'text']"
+        :type="[openOrClose2 ? 'password' : 'text']"
         maxlength="30"
         autocomplete="off"
         v-model.trim="passwordTwo"
-        @input="passwordTwo=passwordTwo.replace(/[\u4e00-\u9fa5]/ig,'')"
+        @input="passwordTwo = passwordTwo.replace(/[\u4e00-\u9fa5]/gi, '')"
         class="el-input__inner"
         placeholder="请再次确认密码"
       />
       <div class="icon" @click="changeOpen2">
-        <i class="iconfont" :class="[openOrClose2?'iconYJ':'iconYC']"></i>
+        <i class="iconfont" :class="[openOrClose2 ? 'iconYJ' : 'iconYC']"></i>
       </div>
     </div>
-    <div class="sign-in-btn" @click="setPassword">{{title}}</div>
+    <div class="sign-in-btn" @click="setPassword">{{ title }}</div>
     <div class="sign-in-btn--bgw" @click="goback">返回登录</div>
   </div>
 </template>
@@ -423,6 +443,9 @@ h1 {
     background: rgba(244, 244, 244, 1);
     border-radius: 3px;
   }
+  .btn-js__active {
+    color: #4a90e2;
+  }
 }
 .sign-in-btn {
   width: 441px;