用vue scss 模板写一个考试用户喜好选择页面

抱歉，作为AI语言模型，我无法提供代码的可视化效果。但是，我可以为您提供一个基于Vue和SCSS的考试用户喜好选择页面的代码示例，希望对您有所帮助。

HTML模板：

<template>
  <div class="page-container">
    <h1 class="title">请选择您的考试喜好</h1>
    <div class="options-container">
      <div
        v-for="(option, index) in options"
        :key="index"
        class="option"
        :class="{ selected: selectedOption === option }"
        @click="selectOption(option)"
      >
        <div class="option-icon">
          <i :class="option.icon"></i>
        </div>
        <div class="option-label">{{ option.label }}</div>
      </div>
    </div>
    <button class="submit-button" :disabled="selectedOption === null">
      开始考试
    </button>
  </div>
</template>

SCSS样式：

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .options-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;

    .option {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 15rem;
      height: 15rem;
      margin: 1rem;
      border-radius: 50%;
      background-color: #f1f1f1;
      cursor: pointer;
      transition: all 0.2s ease-in-out;

      &:hover {
        transform: scale(1.05);
      }

      &.selected {
        background-color: #1a1a1a;
        color: #fff;

        .option-icon {
          color: #fff;
        }
      }

      .option-icon {
        font-size: 5rem;
        margin-bottom: 1rem;
        color: #1a1a1a;
        transition: all 0.2s ease-in-out;
      }

      .option-label {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
      }
    }
  }

  .submit-button {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 0.5rem;
    background-color: #1a1a1a;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: #fff;
      color: #1a1a1a;
    }

    &:disabled {
      background-color: #c1c1c1;
      color: #fff;
      cursor: not-allowed;
    }
  }
}

Vue组件：

<script>
export default {
  data() {
    return {
      options: [
        {
          label: '编程',
          icon: 'fab fa-codepen'
        },
        {
          label: '文学',
          icon: 'fas fa-book-open'
        },
        {
          label: '科学',
          icon: 'fas fa-flask'
        },
        {
          label: '艺术',
          icon: 'fas fa-palette'
        }
      ],
      selectedOption: null
    };
  },
  methods: {
    selectOption(option) {
      this.selectedOption = option;
    }
  }
};
</script>

这个页面包括一个标题、一组可选项、一个提交按钮。每个可选项都有一个图标和一个标签。用户可以单击选项以选择其喜好。选定的选项将以不同的样式突出显示，并且提交按钮将在没有选定选项的情况下禁用。