lcoco/pages/login/model/loginAgreement.vue

<template>
  <view class="data-agreement">
    <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':(type===1?'no':'no-white'))+'.png'" mode="aspectFill"></image>
    <view class="agreement-text" @click="setIsCheck">
      <text class="text-item sys-size-24" :class="{'sys-color-white':type===1,'sys-color-gray-9':type!==1}">我已阅读并同意</text>
    </view>
    <view class="agreement-text ">
      <text class="text-item sys-size-24 sys-color-green">《用户协议》</text>
    </view>
    <view class="agreement-text ">
      <text class="text-item sys-size-24 " :class="{'sys-color-white':type===1,'sys-color-gray-9':type!==1}">和</text>
    </view>
    <view class="agreement-text ">
      <text class="text-item sys-size-24 sys-color-green">《隐私政策》</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "loginAgreement",
  components: {},
  props: {
    type:{
      type: Number,
      default:1
    },
    value:{
      default: false
    }
  },
  data() {
    return {
      isCheck:false,
    }
  },
  watch: {
    'value':function (){
      if(this.isCheck!==this.value){
        this.isCheck=this.value
      }
    }
  },
  mounted() {
      this.isCheck=this.value
  },
  methods: {
    setIsCheck(){
      this.isCheck=!this.isCheck
      this.$emit('input',this.isCheck)
    }
  }
}
</script>

<style scoped lang="scss">
.data-agreement{
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;

}
 .agreement-img{
  width: 24rpx;
  height: 24rpx;
  border-radius: 4rpx;
  margin-right: 6rpx;
  /*border: 2rpx solid #FFFFFF;*/
}
 .agreement-text{
  line-height: 24rpx;
  margin-left: 6rpx;
}
</style>