个性卡片切图完成

pages/login/model/loginAgreement.vue

@@ -47,7 +47,7 @@ export default {
 .data-agreement{
   display: flex;
   flex-direction:row;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
 }

pages/perfect/cards.vue

@@ -6,21 +6,19 @@
         <view class="login-title">
           <text class="title-item sys-color-black sys-weight-600">个性卡牌</text>
         </view>
-        <view class="login-from">
-          <view class="from-title">
-            <view class="title-circle sys-background-black" :class="{'sys-background-green':nickname!==''}"></view>
-            <view class="title-text sys-color-black">设置昵称</view>
-          </view>
-          <view class="from-text from-item">
-            <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="nickname" placeholder="请输入昵称"></input>
-          </view>
-          <view class="from-title from-item">
-            <view class="title-circle sys-background-black" :class="{'sys-background-green':password.length>=6}"></view>
-            <view class="title-text sys-color-black">设置密码</view>
-          </view>
-          <view class="from-text from-item">
-            <input type="password" class="from-input sys-color-gray-3" v-model="password" placeholder="请设置密码(6位以上)"></input>
+        <view class="card-text">
+          <text class="sys-color-gray-9">请使用本人</text>
+          <text class="sys-color-green">真实照片</text>
+          <text class="sys-color-gray-9">，否则部分功能可能会受限</text>
+        </view>
+        <view class="card-img" :style="{'height':'calc(100vh - '+navHeight+'px  - 278rpx - 270rpx - env(safe-area-inset-bottom)'}">
+          <view class="add-box">
+            <image class="add-img" src="/static/img/common/add.png" mode="aspectFill"></image>
           </view>
+
+        </view>
+        <view class="card-agreement">
+          <login-agreement :type="2"></login-agreement>
         </view>
       </view>
       <view class="login-bottom">
@@ -34,8 +32,9 @@
 <script>
 import EnNav from "@/components/en-utils/en-nav/en-nav";
 import tools from "@/service/tools";
+import LoginAgreement from "@/pages/login/model/loginAgreement";
 export default {
-  components: {EnNav},
+  components: {LoginAgreement, EnNav},
   data() {
     return {
       navHeight:40,
@@ -46,12 +45,7 @@ export default {
     }
   },
   watch:{
-    'nickname':function (){
-      this.verifyIsOK()
-    },
-    'password':function (){
-      this.verifyIsOK()
-    },
+
   },
   methods: {
     setNextStep(){
@@ -86,54 +80,39 @@ export default {
   position: relative;
   .login-top{
     .login-title{
-      padding-bottom: 60rpx;
+      padding-bottom: 24rpx;
       .title-item{
         font-size: 48rpx;
       }
     }
-    .login-from{
-      .from-title{
-        display: flex;
-        justify-content: flex-start;
-        height: 44rpx;
-        .title-circle{
-          width: 16rpx;
-          height: 16rpx;
-          border-radius: 50%;
-          margin-top: 14rpx;
-          margin-right: 8rpx;
-        }
-
-
+    .card-text{
+      padding-bottom: 16rpx;
+      text{
+        font-size: 28rpx;
       }
-      .from-text{
-        width: 100%;
-        padding-bottom: 40rpx;
-        border-bottom: 1rpx solid #E0E0E0;
-        .from-input{
-          font-size: 32rpx;
-          height: 44rpx;
-          line-height: 44rpx;
-        }
-        .from-input::placeholder{
-          color: #999999;
+    }
+    .card-img{
+      width: calc(100vw - 160rpx);
+      background: #F6F6F6;
+      border-radius: 20rpx;
+      position: relative;
+      .add-box{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        .add-img{
+          margin: auto auto;
+          width: 84rpx;
+          height: 84rpx;
         }
       }
-      .from-item{
-        margin-top: 60rpx;
-      }
 
     }
-
-    .login-but{
-      margin-top: 120rpx;
+    .card-agreement{
+      margin-top: 32rpx;
     }
 
-    .local-txt{
-      padding-top: 32rpx;
-      font-size: 24rpx;
-      text-align: center;
-    }
   }
   .login-bottom{
     padding-bottom: calc(58rpx + env(safe-area-inset-bottom));