no message

pages.json

@@ -1,17 +1,18 @@
 {
   "pages": [
     {
-      "path": "pages/index/index",
+      "path": "pages/login/index",
       "style": {
-        "navigationBarTitleText": "首页演示"
+        "navigationBarTitleText": "登陆"
       }
     },
     {
-      "path": "pages/login/index",
+      "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "登陆"
+        "navigationBarTitleText": "首页演示"
       }
     }
+
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",

pages/login/index.vue

@@ -1,14 +1,45 @@
 <template>
   <view class="page-box login-box">
-      <view class="login-form">
+      <view class="login-form sys-radius-50">
         <view class="from-title">
           <view class="title-list">
-            <view class="title-text dominant-text-color sys-size-28 text-center sys-weight-500" @click="setType(1)">验证码登录</view>
-            <view class="title-text sys-size-28 text-center sys-weight-500" @click="setType(2)">密码登录</view>
+            <view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}" @click="setType(1)">验证码登录</view>
+            <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}" @click="setType(2)">密码登录</view>
+          </view>
+          <view class="title-bg one-background-color" :class="{'title-bg-two':type===2}">
+            <view class="bg-icon dominant-background-color "></view>
           </view>
-          <view class="title-bg one-background-color"></view>
         </view>
+        <view class="from-box one-background-color">
+          <view class="from-animation" v-if="type===1">
+            <view class="input-item  sys-from-background-color sys-radius-30 ">
+              <input type="number" class="login-input" placeholder="请输入手机号" maxlength="11"></input>
+            </view>
+            <view class="input-item   sys-from-background-color sys-radius-30">
+              <input type="number" class="login-input" placeholder="请输入验证码"></input>
+            </view>
+          </view>
+          <view class="from-animation" v-else>
+            <view class="input-item  sys-from-background-color sys-radius-30 ">
+              <input type="number" class="login-input" placeholder="请输入手机号" maxlength="11"></input>
+            </view>
+            <view class="input-item   sys-from-background-color sys-radius-30">
+              <input type="password" class="login-input" placeholder="请输入密码"></input>
+            </view>
+          </view>
+
+          <view class="input-agreement" @click="setIsConsent">
+            <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
+            <image class="agreement-agree" v-else src="/static/img/login/Checked1@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>
 
+          <view
+              class="input-but dominant-background-color one-text-color sys-size-30 sys-radius-100 sys-weight-600"
+              :class="{'sys-selected-but':isLogin,'sys-unselected-but':!isLogin}"
+          >登陆</view>
+        </view>
       </view>
 
 
@@ -23,13 +54,18 @@
       return {
         type:1,
         password:'',
-        code:''
+        code:'',
+        isConsent:false,
+        isLogin:false
       }
     },
     mounted() {
 
     },
     methods: {
+      setIsConsent(){
+        this.isConsent=!this.isConsent
+      },
       setType(type){
         if(type!==this.type){
           this.type=type
@@ -68,18 +104,27 @@
           width: 50%;
           transition: .5s ease;
           z-index: 0;
+          .bg-icon{
+            margin: 86rpx auto 0 auto;
+            width: 36rpx;
+            height: 6rpx;
+            border-radius: 99rpx;
+          }
         }
-        .title-bg::after {
-          content: '';
-          position: absolute;
-          right: -50rpx;
-          bottom: 0;
-          width: 50rpx;
-          height:50rpx;
-          background-color: #fff;
-          border-radius: 50rpx 50rpx  50rpx 0;
-          clip-path:path('M 50,0 C 25,0 25,50 0,50 L 50,50 Z');
+        .title-bg-two{
+          left: 50%;
+          transition: .5s ease;
         }
+        //.title-bg::after {
+        //  content: '';
+        //  position: absolute;
+        //  right: -50rpx;
+        //  bottom: 0;
+        //  width: 50rpx;
+        //  height:50rpx;
+        //  background-color: #fff;
+        //  border-radius: 50rpx 50rpx  50rpx 0;
+        //}
         .title-list{
           display: flex;
           justify-content: space-between;
@@ -89,10 +134,48 @@
             width: 50%;
             height: 102rpx;
             line-height: 102rpx;
+            color: #333333;
+          }
+          .default-text{
+            color: #10B261;
           }
         }
 
       }
+      .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;
+        .input-item{
+          height: 96rpx;
+          padding: 28rpx 40rpx;
+        }
+        .input-item:last-child{
+          margin-top: 30rpx;
+        }
+        .input-agreement{
+          margin-top: 25rpx;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          .agreement-agree{
+            width: 32rpx;
+            height: 32rpx;
+            transition: .5s ease;
+          }
+          .agreement-text{
+            margin-left: 18rpx;
+          }
+        }
+        .input-but{
+          margin-top: 40rpx;
+          width: 100%;
+          height: 96rpx;
+          line-height: 96rpx;
+          text-align: center;
+        }
+      }
     }
 
   }

static/css/common.css

@@ -76,6 +76,15 @@
 .sys-radius-20{
     border-radius: 20rpx;
 }
+.sys-radius-30{
+    border-radius: 30rpx;
+}
+.sys-radius-50{
+    border-radius: 50rpx;
+}
+.sys-radius-100{
+    border-radius: 100rpx;
+}
 .sys-radius-200{
     border-radius: 200rpx;
 }

static/css/default-color.scss

@@ -5,6 +5,9 @@
 .page-box .one-background-color{
   background-color: #fff;;
 }
+.page-box .sys-from-background-color{
+  background: #F7F9FE;
+}
 .page-box {
   background-color: #EEF1F7;
 }
@@ -28,3 +31,5 @@
 .page-box .four-text-color{
   color: #999;;
 }
+
+

static/css/login.css

@@ -4,3 +4,13 @@
     background-repeat: no-repeat;
     background-size: 100% auto;
 }
+
+
+.page-box .title-text{
+    transition: .5s ease;
+    color: #333333;
+}
+.page-box .default-text{
+    transition: .5s ease;
+    color: #10B261;
+}