pet-front/otherPages/authentication/components/questionCard.vue

<template>
  <view class="mt32 question__view" :class="[props.mode]">
    <view class="size-28 mb20 question">
      {{ `${props.index + 1}、${props.data.question}` }}
    </view>
    <view class="size-28 option"
      v-for="(option, oIdx) in props.data.options"
      :key="`${props.index}-option-${oIdx}`"
      :class="[props.modelValue === option.value ? 'is-selected' : '']"
      @click="onClick(option.value)"
    >
      {{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  index: {
    type: Number,
    default: null,
  },
  data: {
    type: Object,
    default() {
      return {}
    }
  },
  modelValue: {
    type: String | Number,
    default: null,
  },
  mode: {
    type: String,
    default: 'select', // select | display
  }
})

const emit = defineEmits(['update:modelValue'])

const onClick = (val) => {
  emit('update:modelValue', val)
}

</script>

<style lang="scss" scoped>
.question {
  color: #000000;
}

.option {
  background-color: #F3F3F3;
  color: #707070;
  line-height: 37rpx;
  padding: 23rpx;
  border-radius: 28rpx;

  & + & {
    margin-top: 20rpx;
  }
}

.question__view.select {
  .option.is-selected {
    background-color: rgba($color: #FFBF60, $alpha: 0.22);
    color: #FFBF60;
  }
}
</style>