本机号码登陆页面功能完成

pages/login/localPhoneLogin.vue

@@ -1,14 +1,41 @@
 <template>
   <view>
     <en-nav @navHeight="setNavHeight" ></en-nav>
-    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}"></view>
+    <view class="login-box" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
+      <view class="login-top">
+        <view class="login-title">
+          <text class="title-item sys-color-black sys-weight-600">登录/注册</text>
+          <text class="title-item title-two sys-color-black sys-weight-600">更精彩</text>
+        </view>
+        <view class="local-txt sys-color-gray-9">本机号码登录</view>
+        <view class="local-phone sys-color-black sys-weight-400">188****4188</view>
+        <view class="login-but sys-color-white sys-background-black">一键登录</view>
+        <view class="other-phone sys-color-gray-6">其他手机号登录</view>
+      </view>
+      <view class="login-bottom">
+        <view class="other-login">
+          <view class="other-wire"></view>
+          <view class="other-text sys-color-gray-9">其他登录方式</view>
+          <view class="other-wire"></view>
+        </view>
+        <view class="login-icon">
+          <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
+          <image class="login-icon-img" src="/static/img/login/apple.png" mode="aspectFill"></image>
+        </view>
+        <login-agreement :type="2"></login-agreement>
+      </view>
+
+
+    </view>
   </view>
 </template>
 
 <script>
 import EnNav from "@/components/en-utils/en-nav/en-nav";
+import LoginAgreement from "@/pages/login/model/loginAgreement";
 export default {
-  components: {EnNav},
+  name:'localPhoneLogin',
+  components: {LoginAgreement, EnNav},
   data() {
     return {
       navHeight:40
@@ -27,8 +54,74 @@ export default {
 
 .login-box{
   padding: 82rpx 80rpx 0 80rpx;
-  background-color: #2C405A;
   box-sizing: border-box;
+  position: relative;
+  .login-top{
+    .login-title{
+      padding-bottom: 60rpx;
+      .title-item{
+        font-size: 48rpx;
+      }
+      .title-two{
+        margin-left: 30rpx;
+      }
+
+    }
+    .local-txt{
+      padding-bottom: 40rpx;
+      font-size: 24rpx;
+    }
+    .local-phone{
+      padding-bottom: 120rpx;
+      font-size: 48rpx;
+    }
+    .login-but{
+      border-radius: 200rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+    }
+    .other-phone{
+      padding-top: 60rpx;
+     font-size: 28rpx;
+      text-align: center;
+    }
+  }
+  .login-bottom{
+    padding-bottom: calc(62rpx + env(safe-area-inset-bottom));
+    position: absolute;
+    bottom: 0;
+    left: 80rpx;
+    width:calc(100vw - 160rpx);
+    .other-login{
+      width:calc(100vw - 160rpx);
+      display: flex;
+      justify-content: space-between;
+      .other-text{
+        font-size: 24rpx;
+        margin: 0 14rpx;
+        height: 45rpx;
+        line-height: 45rpx;
+      }
+      .other-wire{
+        margin-top: 22rpx;
+        width:calc((100vw - 348rpx) / 2);
+        height: 1rpx;
+        background-color: #E0E0E0;
+      }
+    }
+    .login-icon{
+      padding:40rpx 156rpx 80rpx 156rpx;
+      display: flex;
+      justify-content: space-between;
+      .login-icon-img{
+        width: 88rpx;
+        height: 88rpx;
+        border-radius: 50%;
+      }
+    }
+  }
+
 
 }
 

pages/login/model/loginAgreement.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="data-agreement">
-    <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':'no')+'.png'" mode="aspectFill"></image>
+    <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':(type===1?'no':'no-white'))+'.png'" mode="aspectFill"></image>
     <view class="agreement-text" @click="setIsCheck">
-      <text class="text-item sys-size-24 sys-color-white">我已阅读并同意</text>
+      <text class="text-item sys-size-24" :class="{'sys-color-white':type===1,'sys-color-gray-9':type!==1}">我已阅读并同意</text>
     </view>
     <view class="agreement-text ">
       <text class="text-item sys-size-24 sys-color-green">《用户协议》</text>
     </view>
     <view class="agreement-text ">
-      <text class="text-item sys-size-24 sys-color-white">和</text>
+      <text class="text-item sys-size-24 " :class="{'sys-color-white':type===1,'sys-color-gray-9':type!==1}">和</text>
     </view>
     <view class="agreement-text ">
       <text class="text-item sys-size-24 sys-color-green">《隐私政策》</text>
@@ -20,7 +20,12 @@
 export default {
   name: "loginAgreement",
   components: {},
-  props: {},
+  props: {
+    type:{
+      type: Number,
+      default:1
+    }
+  },
   data() {
     return {
       isCheck:false,

static/css/sys.css

@@ -4,9 +4,31 @@
 .sys-weight-600{
   font-weight: 600;
 }
+.sys-weight-400{
+  font-weight: 400;
+}
 .sys-color-white{
   color: #fff;
 }
 .sys-color-green{
   color: #12CE87;
 }
+.sys-color-black{
+  color: #141414;
+}
+.sys-color-gray-9{
+  color: #999999;
+}
+.sys-color-gray-6{
+  color: #666666;
+}
+.sys-color-gray-3{
+  color: #333333;
+}
+.sys-background-black{
+  background-color: #141414;
+}
+.sys-background-gray-9{
+  background-color: #999999;
+}
+