training-wx/src/views/components/Question/Answer.vue

<template>
  <div
    class="answer-box animate__animated animate__bounceInUp"
    :class="{active: active}"
    @click="$emit('click')"
  >
    <div>{{opt}}</div>
    <div class="answer-box-gutter">{{label}}</div>
  </div>
</template>

<script>
export default {
  name: 'Answer',
  props: {
    active: Boolean,
    option: String,
    label: String
  },
  computed: {
    opt() {
      switch (this.option) {
        case 'true':
          return ''
        case 'false':
          return ''
        default:
          return this.option ? `${this.option}:` : ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.answer-box {
  background-color: #f6f6f8;
  color: #4e5053;
  border-radius: 100px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 400;
  padding: 1em 2em;
  // height: 40px;

  & + & {
    margin-top: 26px;
    text-align-last: left;
  }

  &-gutter {
    margin-left: 1em;
    line-height: 1.4em;
  }

  &.active {
    background-color: #409eff;
    color: #fff;
  }
}
</style>