lcoco/pages/perfect/cards.vue

<template>
  <view class="pass-box">
    <en-nav  ></en-nav>
    <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>
        </view>
        <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">
        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK}">下一步</view>
      </view>
    </view>
  </view>
</template>


<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: {LoginAgreement, EnNav},
  data() {
    return {
      navHeight:40,
      isOK:false,
      isShakeBut:false,
      nickname:'',
      password:'',
    }
  },
  watch:{

  },
  methods: {
    setNextStep(){
      if(this.isOK){
        uni.navigateTo({
          'url':'/pages/perfect/cards'
        })
      }else {
        tools.error('请完善信息')
        this.isShakeBut=true
        setTimeout(()=>{
          this.isShakeBut=false
        },500)
      }
    },
    verifyIsOK(){
      this.isOK = this.nickname!=='' && this.password.length>=6;
    },
    setNavHeight(navHeight){
      this.navHeight=navHeight+41
    },

  }
}
</script>

<style scoped lang="scss">
@import "/static/css/shake.css";
.login-box{
  padding: 82rpx 80rpx 0 80rpx;
  box-sizing: border-box;
  position: relative;
  .login-top{
    .login-title{
      padding-bottom: 24rpx;
      .title-item{
        font-size: 48rpx;
      }
    }
    .card-text{
      padding-bottom: 16rpx;
      text{
        font-size: 28rpx;
      }
    }
    .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;
        }
      }

    }
    .card-agreement{
      margin-top: 32rpx;
    }

  }
  .login-bottom{
    padding-bottom: calc(58rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 68rpx;
    width:calc(100vw - 136rpx);
    .login-but{
      margin-top: 120rpx;
    }
  }
}

</style>