lcoco/pages/login/model/loginContent.nvue

<template>
  <view class="login-content" @touchmove.stop.prevent>
    <view class="data" >
      <view class="data-img">
        <image :style="{'margin-left':((windowWidth-124)/2)+'rpx'}" class="img" src="/static/img/common/logo.png" mode="aspectFill"></image>
      </view>
      <view class="data-text">
        <text class="text-content" :style="{'width':(windowWidth-156)+'rpx'}">
          ICOCO是为了人们摆脱自己单身的生活 而去结交 认识他人的过程一个网络交友平台
        </text>
      </view>
      <view class="data-but" @click.stop="goToLogin" >
        <!--          开始ICOCO-->
        <image class="but-img" src="/static/img/login/login-but.png" mode="aspectFill"></image>
      </view>
      <view class="agreement-item">
        <login-agreement v-model="isCheck"></login-agreement>
      </view>


    </view>
  </view>
</template>

<script>
import LoginAgreement from "@/pages/login/model/loginAgreement";
import tools from "@/service/tools";

export default {
  name: "loginContent",
  components: {LoginAgreement},
  props: {},
  data() {
    return {
      windowWidth:750,
      isCheck:false,
      isPreLogin:false
    }
  },
  watch: {},
  onLoad(query) {
    //#ifdef APP-NVUE
    // uni.preLogin({
    //   provider: 'univerify',
    //   success(){  //预登录成功
    //     // 显示一键登录选项
    //     this.isPreLogin=true
    //   },
    //   fail(res){  // 预登录失败
    //     // 不显示一键登录选项（或置灰）
    //     // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
    //     console.log(res)
    //     console.log(res.errCode)
    //     console.log(res.errMsg)
    //   }
    // })
    //#endif

  },
  mounted() {

  },
  methods: {

    goToLogin(){
      if(!this.isCheck){
        tools.error('请阅读并同意协议')
        return false
      }
      if(this.isPreLogin){
        uni.navigateTo({
          'url':'/pages/login/localPhoneLogin'
        })
      }else {
        uni.navigateTo({
          'url':'/pages/login/otherPhoneLogin'
        })
      }

    }
  }
}
</script>

<style scoped lang="scss">
.login-content{
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /*background-color: rgba(0, 0, 0, 0);*/
  /*background: #fff;*/
}

 .data{
  position: absolute;
  /*width: 100vw;*/
  height: 528rpx;
  bottom: 0;
  left: 0;
}
 .data-img{
  /*width: 100vw;*/
  height: 124rpx;
}
 .img{
  /*margin-left: calc((100vw - 124rpx) / 2);*/
  height: 124rpx;
  width: 124rpx;
  border-radius: 24rpx;
}
 .data-text{
  margin-top: 24rpx;
  padding: 0 78rpx;
  line-height: 44rpx;

}
 .text-content{
  //width: calc( 100vw - 156rpx );
  font-size: 24rpx;
  color: #FFFFFF;
  display:flex;
  white-space: pre-wrap;
  word-wrap: break-word;
}
 .data-but{
  width: 590rpx;
  box-sizing: border-box;
  margin:64rpx 78rpx 0 78rpx ;
  border-radius: 200rpx;
  /*background:#FFFFFF ;*/
  /*height: 88rpx;*/
  /*line-height: 88rpx;*/
  /*color: #000000;*/
  /*font-size: 28rpx;*/
  /*font-weight: 600;*/
  /*text-align: center;*/
  /*mix-blend-mode: darken;*/
  /*-webkit-background-clip: text;*/
  /*-webkit-text-fill-color: transparent;*/

}
 .but-img{
  width: 590rpx;
  height: 88rpx;
  border-radius: 200rpx;
  /*width: calc(100vw - 156rpx);*/
  margin-bottom: 40rpx;
}
.agreement-item{
  margin-left:122rpx;
}


</style>