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

<template>
  <view class="agreement-box">
    <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>
  </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">
.agreement-box{
  margin-top: 25rpx;
  height: 32rpx;
  .input-agreement{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .agreement-agree{
      width: 32rpx;
      height: 32rpx;
      transition: .5s ease;
    }
    .agreement-text{
      margin-left: 18rpx;
    }
  }
}

</style>