no message

pages/login/index.vue

@@ -3,11 +3,10 @@
       <view class="login-form">
         <view class="from-title">
           <view class="title-list">
-            <view class="title-text dominant-text-color sys-size-28">验证码登录</view>
-            <view class="title-text sys-size-28">密码登录</view>
+            <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>
-          <view class="title-bg"></view>
-
+          <view class="title-bg one-background-color"></view>
         </view>
 
       </view>
@@ -22,13 +21,20 @@
     },
     data() {
       return {
-
+        type:1,
+        password:'',
+        code:''
       }
     },
     mounted() {
 
     },
     methods: {
+      setType(type){
+        if(type!==this.type){
+          this.type=type
+        }
+      },
       login() {
         uni.redirectTo({
           url: '/pages/index/index'
@@ -40,16 +46,19 @@
 <style lang="scss" scoped>
   @import "/static/css/login.css";
   .page-box{
-    background-color: #EEF1F7;
+
     padding-top: 370rpx;
     .login-form{
       margin: 0 30rpx;
       height: 630rpx;
       border-radius: 50rpx;
-      background-color: rgba(255,255,255,0.5);
+
       .from-title{
+        background-color: rgba(255,255,255,0.5);
+        border-radius: 50rpx 50rpx 0 0;
         height: 110rpx;
         position: relative;
+
         .title-bg{
           position: absolute;
           border-radius: 50rpx 50rpx 0 0;
@@ -57,10 +66,20 @@
           left: 0;
           height:110rpx;
           width: 50%;
-          background-color: #fff;
           transition: .5s ease;
           z-index: 0;
         }
+        .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-list{
           display: flex;
           justify-content: space-between;
@@ -68,7 +87,8 @@
           position: relative;
           .title-text{
             width: 50%;
-            height: 110rpx;
+            height: 102rpx;
+            line-height: 102rpx;
           }
         }
 

static/css/default-color.scss

@@ -2,6 +2,12 @@
 .page-box .dominant-background-color{
   background-color: #10B261;;
 }
+.page-box .one-background-color{
+  background-color: #fff;;
+}
+.page-box {
+  background-color: #EEF1F7;
+}
 //字体颜色
 //主字体颜色
 .page-box .dominant-text-color{