novel-front-app/pages_order/novel/components/AgreementCheck.vue

<template>
  <div class="agreement-check">
    <input type="checkbox" v-model="checked" @change="$emit('update:checked', checked)" id="agreement" />
    <label for="agreement">
      <slot />
    </label>
  </div>
</template>

<script>
export default {
  name: 'AgreementCheck',
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.agreement-check {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #b3b3b3;
  margin-top: 16px;
}
.agreement-check input[type='checkbox'] {
  margin-right: 6px;
  accent-color: #183b6b;
}
.agreement-check a {
  color: #183b6b;
  text-decoration: underline;
  margin: 0 2px;
}
</style>