assess-app/pages/login/model/agreement.vue

<template>
  <view class="input-agreement animate__animated" :class="{'animate__shakeX':consentShake}" @click="setIsConsent" >
    <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
    <image class="agreement-agree" v-else src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
    <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
    <view class="agreement-text text-color-dominant sys-size-24">《隐私政策》</view>
  </view>
</template>

<script>
export default {
  name:'agreement',
  data() {
    return {
      isConsent:false,
      consentShake:false
    };
  },
  methods:{
    setIsConsent(){
      this.isConsent=!this.isConsent
      this.$emit('input', this.isConsent)
    },
    setConsentShake(){
      this.consentShake=true
      console.log('consentShake:'+this.consentShake)
      setTimeout(()=>{
        this.consentShake=false
      },500)
    }
  }
}
</script>

<style lang="scss">
.input-agreement{
  margin-top: 25rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .agreement-agree{
    width: 32rpx;
    height: 32rpx;
    transition: .5s ease;
  }
  .agreement-text{
    margin-left: 18rpx;
  }
}
</style>