登陆样式功能完成

pages/login/index.vue

@@ -17,8 +17,8 @@
             </view>
             <view class="input-item  input-send sys-from-background-color sys-radius-30" :class="{'apply-shake':codedShake}">
               <input type="number" class="login-input" placeholder="请输入验证码" v-model="loginData.code"></input>
-              <view class="login-send dominant-text-color sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
-              <view class="login-send dominant-text-color sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
+              <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
+              <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
             </view>
           </view>
           <view class="from-animation animate__animated animate__fadeIn" v-else>
@@ -33,17 +33,29 @@
           <view class="input-agreement" @click="setIsConsent" :class="{'apply-shake':consentShake}">
             <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
             <image class="agreement-agree" v-else src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
-            <view class="agreement-text three-text-color sys-size-24">已阅读并同意</view>
-            <view class="agreement-text dominant-text-color sys-size-24">《隐私政策》</view>
+            <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
+            <view class="agreement-text text-color-dominant sys-size-24">《隐私政策》</view>
           </view>
 
           <view
-              class="input-but dominant-background-color one-text-color sys-size-30 sys-radius-100 sys-weight-600"
+              class="input-but dominant-background-color text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
               :class="{'sys-selected-but':isLogin,'sys-unselected-but':!isLogin}"
               @click="login"
           >登陆</view>
         </view>
       </view>
+      <view class="register-box">
+        <view class="register-text sys-weight-400 sys-size-24 text-color-666">还没有账号？</view>
+        <view class="register-text text-color-dominant sys-size-24 sys-weight-400">立即注册</view>
+      </view>
+      <view class="wx-box">
+        <view class="wx-title">
+          <view class="wx-wire"></view>
+          <view class="wx-text sys-size-24 text-color-7c sys-weight-400">第三方登录</view>
+          <view class="wx-wire"></view>
+        </view>
+        <image class="wx-logo" src="/static/img/login/wx-img.png" mode="aspectFill"></image>
+      </view>
 
 
   </view>
@@ -81,6 +93,9 @@
           this.verifyData()
         },
         deep: true
+      },
+      'isConsent':function () {
+        this.verifyData()
       }
     },
     mounted() {
@@ -187,14 +202,12 @@
 <style lang="scss" scoped>
   @import "/static/css/login.css";
   .page-box{
-
+    position: relative;
     padding-top: 370rpx;
     .login-form{
       margin: 0 30rpx;
-      height: 630rpx;
       border-radius: 50rpx;
       background-color: rgba(255,255,255,0.5);
-
       .from-title{
         border-radius: 50rpx 50rpx 0 0;
         height: 110rpx;
@@ -258,7 +271,6 @@
 
       }
       .from-box{
-        height:520rpx;
         box-shadow: 0rpx 4rpx 36rpx 0rpx rgba(196,196,196,0.25);
         border-radius: 0 0 50rpx 50rpx;
         padding: 50rpx 45rpx;
@@ -314,6 +326,49 @@
         border-radius:  50rpx 0 50rpx 50rpx;
       }
     }
+    .register-box{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 60rpx;
+      .register-text{
+        height: 34rpx;
+        line-height: 34rpx;
+      }
+      .register-text:last-child{
+        margin-right: 5rpx;
+      }
+    }
+    .wx-box{
+      position: absolute;
+      bottom: calc(60rpx + env(safe-area-inset-bottom));
+      left: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .wx-title{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .wx-wire{
+          background: linear-gradient( 90deg, #D9D9D9 0%, rgba(115,115,115,0) 100%);
+          width: 174rpx;
+          height: 2rpx;
+          border-radius: 50%;
+        }
+        .wx-text{
+          margin: 0 15rpx;
+          height: 34rpx;
+          line-height: 34rpx;
+        }
+      }
+      .wx-logo{
+        margin: 25rpx auto 0 auto;
+        width: 80rpx;
+        height: 80rpx;
+      }
+    }
 
   }
 </style>

static/css/default-color.scss

@@ -13,23 +13,27 @@
 }
 //字体颜色
 //主字体颜色
-.page-box .dominant-text-color{
+.page-box .text-color-dominant{
   color: #10B261;;
 }
 //主背景颜色中字体颜色
-.page-box .one-text-color{
+.page-box .text-color-fff{
   color: #fff;;
 }
 //次文字颜色
-.page-box .two-text-color{
+.page-box .text-color-333{
   color: #333333;;
 }
 
-.page-box .three-text-color{
+.page-box .text-color-666{
   color: #666;;
 }
-.page-box .four-text-color{
+.page-box .text-color-999{
   color: #999;;
 }
 
+.page-box .text-color-7c{
+  color: #7C7C7C;;
+}
+