会员登录页优化

src/views/member/memberLogin.vue

 <template>
   <div class="member_login">
-    <NafmHeader />
-    <van-form class="login_form" @submit="onSubmit">
-      <van-field v-model="code" placeholder="请输入社会信用代码或组织机构代码" :rules="[{ required: true, message: '请输入社会信用代码或组织机构代码' }]">
-        <div slot="left-icon">
-          <van-icon name="coupon-o" />
-        </div>
+    <img src="@/assets/icon/bg_login_2.png" />
+    <NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" title=" " />
+    <main class="login_content">
+      <van-form class="login_form">
+        <van-field v-model="code" :left-icon="shtyxydmIcon" placeholder="请输入社会信用代码或组织机构代码">
         </van-field>
-      <van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
+        <van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码">
         </van-field>
-      <van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
+        <van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码">
           <template #button>
-          <span>111111</span>
+            <span class="verfication_code">111111</span>
           </template>
         </van-field>
-      <p class="wraning_tip">
+        <p v-show="isLogin" class="wraning_tip">
           提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
         </p>
-      <div style="margin: 16px;">
-        <van-button class="login_btn" block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
+        <div>
+          <van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
         </div>
       </van-form>
+    </main>
     <div class="membership_about">
       <van-cell title="入会指南" is-link to="/member/membershipGuide" />
       <van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
@@ -36,7 +36,8 @@ export default {
       password: '',
       checkCode: '',
       passwordIcon: require('@/assets/icon/password.png'),
-      verificationIcon: require('@/assets/icon/verification.png')
+      verificationIcon: require('@/assets/icon/verification.png'),
+      shtyxydmIcon: require('@/assets/icon/shtyxydm.png'),
     }
   },
   computed: {
@@ -45,24 +46,48 @@ export default {
     }
   },
   methods: {
-    onSubmit(value) {
-      
+    loginSubmit() {
+      if (!this.code || this.code === '') {
+        return Toast('请输入社会信用统一代码或组织机构代码')
+      }
+      if (!this.password || this.password === '') {
+        return Toast('请输入密码')
+      }
+      if (!this.checkCode || this.checkCode === '') {
+        return Toast('请输入验证码')
+      }
     }
   }
 }
 </script>
 <style lang="less" scoped>
 .member_login {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 83px;
-  background-color: #f6f6f6;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .login_content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     .login_form {
+      margin-top: 20px;
+      width: 330px;
       background-color: #ffffff;
-    padding-right: 20px;
-    padding-bottom: 40px;
+
+      ::v-deep .van-cell:not(:last-child)::after {
+        border-bottom: 1px solid #efefef;
+      }
+
+      ::v-deep .van-cell {
+        padding-right: 0 !important;
+        padding-left: 0 !important;
+        border-bottom: 1px solid #ebedf0;
+      }
+
+      ::v-deep .van-cell:not(:last-child)::after {
+        border: none;
+      }
       ::v-deep .van-field__control {
         font-size: 14px;
         color: #333333;
@@ -80,12 +105,25 @@ export default {
         color: #ea5c6d;
         font-size: 12px;
         text-align: justify;
-      margin-left: 20px;
         margin-top: 16px;
       }
       .login_btn {
-      background: linear-gradient(to right, #25a3df, #106abc);
+        width: 100%;
+        border-radius: 5px;
+        text-align: center;
+        height: 45px;
+        line-height: 45px;
+        color: #fff;
+        font-size: 16px;
+        margin-top: 20px;
+        background-image: linear-gradient(to right, #25a3df, #106abc);
+        // background: linear-gradient(to right, #25a3df, #106abc);
         border: none;
+        opacity: 0.3;
+      }
+      .act_btn {
+        opacity: 1;
+      }
     }
   }
   .membership_about {