lcoco/pages/login/model/loginContent.nvue

<template>
  <view class="login-content" @touchmove.stop.prevent>
    <view class="content-data">

      <view class="data">
        <view class="data-img">
          <image class="img" src="@/static/img/common/logo.png" mode="aspectFill"></image>
        </view>
        <view class="data-text">
          ICOCO是为了人们摆脱自己单身的生活 而去结交 认识他人的过程一个网络交友平台
        </view>
        <view class="data-but">
<!--          开始ICOCO-->
          <image class="but-img" src="@/static/img/login/login-but.png" mode="aspectFill"></image>
        </view>
        <view class="data-agreement">
          <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':'no')+'.png'" mode="aspectFill"></image>
          <view class="agreement-text sys-size-24 sys-color-white">我已阅读并同意</view>
          <view class="agreement-text sys-size-24 sys-color-green">《用户协议》</view>
          <view class="agreement-text sys-size-24 sys-color-white">和</view>
          <view class="agreement-text sys-size-24 sys-color-green">《隐私政策》</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "loginContent",
  components: {},
  props: {},
  data() {
    return {
      isCheck:false
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    setIsCheck(){
      this.isCheck=!this.isCheck
    }
  }
}
</script>

<style scoped>
.login-content{
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
}
.content-data{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.content-data .data{
  position: absolute;
  width: 100vw;
  height: calc(528rpx + env(safe-area-inset-bottom)) ;
  bottom: 0;
  left: 0;
}
.content-data .data .data-img{
  width: 100vw;
  height: 124rpx;
}
.content-data .data-img .img{
  margin-left: calc((100vw - 124rpx) / 2);
  height: 124rpx;
  width: 124rpx;
  border-radius: 24rpx;
}
.content-data .data .data-text{
  margin-top: 24rpx;
  padding: 0 78rpx;
  font-size: 28rpx;
  line-height: 44rpx;
  color: #FFFFFF;
}
.content-data .data .data-but{
  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;*/

}
.data-but .but-img{
  height: 88rpx;
  border-radius: 200rpx;
  width: calc(100vw - 156rpx);
}

.data-agreement{
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}
.data-agreement .agreement-img{
  width: 24rpx;
  height: 24rpx;
  border-radius: 4rpx;
  margin-right: 6rpx;
  /*border: 2rpx solid #FFFFFF;*/
}
.data-agreement .agreement-text{
  line-height: 24rpx;
    margin-left: 6rpx;
}

</style>