cfc/cfc-frontend/pages/wisdom/self-quiz.vue

<template>
  <view class="container">
    <view class="resume-prompt" v-if="showResume">
      <text class="resume-text">检测到上次未完成的测评</text>
      <view class="resume-btns">
        <view class="btn btn--outline" @tap="resumeSession">继续答题</view>
        <view class="btn btn--ghost" @tap="clearSession">重新开始</view>
      </view>
    </view>

    <view class="step-wrap" v-if="!showResume">
      <view class="step-row">
        <view class="step-item" v-for="i in 4" :key="i" @tap="goStep(i)">
          <view class="step-dot" :class="{
            'step-dot--active': step === i,
            'step-dot--done': step > i,
            'step-dot--pending': step < i
          }">
            <text v-if="step > i" class="step-check">&#10003;</text>
            <text v-else class="step-num">{{ i }}</text>
          </view>
          <text class="step-label" :class="{
            'step-label--active': step >= i,
            'step-label--muted': step < i
          }">{{ stepLabels[i - 1] }}</text>
        </view>
      </view>
    </view>

    <view class="step-content" v-if="step === 1 && !showResume">
      <view class="content-header">
        <text class="content-title">选择测评目标</text>
        <text class="content-sub">选择你想提升的能力维度</text>
      </view>
      <view class="goal-grid">
        <view class="goal-card" v-for="g in goals" :key="g.id" :class="{ 'goal-card--selected': selectedGoal && selectedGoal.id === g.id }" @tap="selectGoal(g)">
          <view class="goal-icon-wrap">
            <text class="goal-icon">{{ g.icon }}</text>
          </view>
          <text class="goal-title">{{ g.title }}</text>
          <text class="goal-desc">{{ g.desc }}</text>
        </view>
      </view>
      <view class="action-bar">
        <view class="btn btn--primary" :class="{ 'btn--disabled': !selectedGoal }" @tap="goStep2">下一步</view>
      </view>
    </view>

    <view class="step-content" v-if="step === 2 && !showResume">
      <view class="content-header">
        <text class="content-title">选择题目类型</text>
        <text class="content-sub">共5道题，选择适合的答题方式</text>
      </view>
      <view class="type-list">
        <view class="type-card" v-for="t in questionTypes" :key="t.id" :class="{ 'type-card--selected': questionType === t.id }" @tap="selectType(t.id)">
          <view class="type-icon-wrap">
            <text class="type-icon">{{ t.icon }}</text>
          </view>
          <view class="type-info">
            <text class="type-name">{{ t.name }}</text>
            <text class="type-desc">{{ t.desc }}</text>
          </view>
          <view class="type-radio" :class="{ 'type-radio--checked': questionType === t.id }">
            <view v-if="questionType === t.id" class="type-radio-dot"></view>
          </view>
        </view>
      </view>
      <view class="action-bar action-bar--double">
        <view class="btn btn--outline" @tap="goStep1">上一步</view>
        <view class="btn btn--primary" :class="{ 'btn--disabled': !questionType }" @tap="startQuiz">开始答题</view>
      </view>
    </view>

    <view class="step-content" v-if="step === 3 && !showResume">
      <view class="progress-header">
        <text class="progress-label">第 {{ currentQ + 1 }}/{{ questions.length }} 题</text>
        <view class="progress-bar">
          <view class="progress-fill" :style="'width:' + progressPct + '%'"></view>
        </view>
      </view>
      <view class="question-card" v-if="currentQuestion">
        <view class="q-tag">{{ tagLabel }}</view>
        <text class="q-text">{{ currentQuestion.question }}</text>
        <view class="q-options" v-if="currentQuestion.isTF">
          <view class="q-option q-option--tf" :class="{ 'q-option--selected': currentAnswer === '正确' }" @tap="currentAnswer = '正确'">
            <text class="q-option-tf-text">正确</text>
          </view>
          <view class="q-option q-option--tf" :class="{ 'q-option--selected': currentAnswer === '错误' }" @tap="currentAnswer = '错误'">
            <text class="q-option-tf-text">错误</text>
          </view>
        </view>
        <view class="q-options" v-else>
          <view class="q-option" v-for="(opt, oi) in currentQuestion.options" :key="oi" :class="{ 'q-option--selected': currentAnswer === opt }" @tap="currentAnswer = opt">
            <view class="q-radio" :class="{ 'q-radio--checked': currentAnswer === opt }">
              <view v-if="currentAnswer === opt" class="q-radio-dot"></view>
            </view>
            <text class="q-option-text">{{ opt }}</text>
          </view>
        </view>
      </view>
      <view class="action-bar action-bar--double">
        <view class="btn btn--outline" :class="{ 'btn--disabled': currentQ === 0 }" @tap="prevQuestion">上一题</view>
        <view class="btn btn--primary" :class="{ 'btn--disabled': !currentAnswer }" @tap="nextQuestion">{{ currentQ < questions.length - 1 ? '下一题' : '查看结果' }}</view>
      </view>
    </view>

    <view class="step-content" v-if="step === 4 && !showResume">
      <view class="result-header">
        <view class="score-circle">
          <text class="score-value">{{ score }}/5</text>
        </view>
        <text class="score-label">{{ resultMessage }}</text>
      </view>
      <view class="section-title">维度分析</view>
      <view class="result-dims">
        <view class="dim-bar-item" v-for="(dim, di) in dimBreakdown" :key="di">
          <view class="dim-bar-header">
            <text class="dim-bar-name">{{ dim.name }}</text>
            <text class="dim-bar-count">{{ dim.correct }}/{{ dim.total }}</text>
          </view>
          <view class="dim-bar-track">
            <view class="dim-bar-fill" :style="'width:' + dim.pct + '%'"></view>
          </view>
        </view>
      </view>
      <view class="action-bar">
        <view class="btn btn--primary" @tap="resetQuiz">再测一次</view>
        <view class="btn btn--outline" @tap="goHome">返回首页</view>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
var QUESTION_BANK = [
  { dimension: 'focus', question: '以下哪个因素最容易影响注意力集中？', options: ['噪音', '温度', '光照', '以上都是'], answer: '以上都是' },
  { dimension: 'focus', question: '持续专注工作建议多久休息一次？', options: ['15分钟', '30分钟', '45分钟', '60分钟'], answer: '45分钟' },
  { dimension: 'focus', question: '舒尔特方格的训练目标是提升什么？', options: ['记忆力', '专注力', '逻辑思维', '创造力'], answer: '专注力' },
  { dimension: 'memory', question: '短期记忆通常能记住几个信息组块？', options: ['3-4个', '5-9个', '10-15个', '20个以上'], answer: '5-9个' },
  { dimension: 'memory', question: '以下哪个方法有助于增强记忆？', options: ['死记硬背', '联想记忆', '反复抄写', '一次性学习'], answer: '联想记忆' },
  { dimension: 'memory', question: '睡眠对记忆的影响是什么？', options: ['削弱记忆', '巩固记忆', '无影响', '干扰记忆'], answer: '巩固记忆' },
  { dimension: 'logic', question: '如果A>B且B>C，那么？', options: ['A=C', 'A>C', 'A<C', '不确定'], answer: 'A>C' },
  { dimension: 'logic', question: '1, 1, 2, 3, 5, 8, ? 下一个数是多少？', options: ['10', '11', '12', '13'], answer: '13' },
  { dimension: 'logic', question: '以下哪个不是有效推理方式？', options: ['归纳推理', '演绎推理', '循环论证', '类比推理'], answer: '循环论证' },
  { dimension: 'perception', question: '人眼能分辨约多少种颜色？', options: ['几百种', '几千种', '几万种', '数百万种'], answer: '数百万种' },
  { dimension: 'perception', question: '以下哪种错觉与视觉感知有关？', options: ['缪勒-莱尔错觉', '德布罗意错觉', '薛定谔错觉', '迈克尔逊错觉'], answer: '缪勒-莱尔错觉' },
  { dimension: 'perception', question: '感觉适应是指什么？', options: ['敏感度降低', '敏感度升高', '感知消失', '感知增强'], answer: '敏感度降低' },
  { dimension: 'spatial', question: '正方体有多少个面？', options: ['4', '6', '8', '12'], answer: '6' },
  { dimension: 'spatial', question: '以下哪个是立体几何的基本要素？', options: ['点线面', '正反合', '红黄蓝', '上下左右'], answer: '点线面' },
  { dimension: 'spatial', question: '一个立方体展开图有几个正方形？', options: ['4', '6', '8', '12'], answer: '6' },
  { dimension: 'speed', question: '反应时实验测量的是什么？', options: ['思考速度', '反应速度', '运动速度', '阅读速度'], answer: '反应速度' },
  { dimension: 'speed', question: '以下哪个因素会影响加工速度？', options: ['年龄', '情绪', '疲劳', '以上都是'], answer: '以上都是' },
  { dimension: 'speed', question: '信息加工速度最快的年龄段是？', options: ['儿童期', '青春期', '成年早期', '中老年期'], answer: '成年早期' }
]

export default {
  data() {
    return {
      step: 1,
      selectedGoal: null,
      questionType: null,
      questions: [],
      currentQ: 0,
      answers: [],
      showResume: false,
      savedSession: null,
      goals: [
        { id: 'focus', title: '专注力', desc: '提升注意力集中能力', icon: '集' },
        { id: 'memory', title: '记忆力', desc: '增强信息记忆与回忆能力', icon: '忆' },
        { id: 'logic', title: '逻辑思维', desc: '锻炼逻辑推理与判断能力', icon: '逻' },
        { id: 'perception', title: '感知觉', desc: '提高感官信息处理能力', icon: '感' },
        { id: 'spatial', title: '空间思维', desc: '培养空间想象与构建能力', icon: '间' },
        { id: 'speed', title: '加工速度', desc: '加快信息处理与反应速度', icon: '速' }
      ],
      questionTypes: [
        { id: 'choice', name: '选择题', desc: '四选一标准选择题', icon: '选' },
        { id: 'truefalse', name: '判断题', desc: '判断陈述正误', icon: '判' },
        { id: 'mix', name: '混合题型', desc: '选择题与判断题混合', icon: '混' }
      ],
      stepLabels: ['目标', '题型', '答题', '结果']
    }
  },
  computed: {
    currentQuestion: function() {
      if (this.questions.length === 0) {
        return null
      }
      return this.questions[this.currentQ]
    },
    currentAnswer: {
      get: function() {
        return this.answers[this.currentQ] || null
      },
      set: function(val) {
        this.$set(this.answers, this.currentQ, val)
      }
    },
    progressPct: function() {
      if (this.questions.length === 0) {
        return 0
      }
      return ((this.currentQ + 1) / this.questions.length) * 100
    },
    score: function() {
      var correct = 0
      for (var i = 0; i < this.questions.length; i++) {
        var q = this.questions[i]
        var a = this.answers[i]
        if (q && a && q.answer === a) {
          correct++
        }
      }
      return correct
    },
    resultMessage: function() {
      var s = this.score
      if (s >= 5) return '太棒了！满分通过！'
      if (s >= 4) return '非常优秀！继续保持！'
      if (s >= 3) return '表现不错，还有提升空间！'
      return '继续加油，多练习会更好！'
    },
    tagLabel: function() {
      if (!this.currentQuestion) return ''
      var dimMap = {
        focus: '专注力',
        memory: '记忆力',
        logic: '逻辑思维',
        perception: '感知觉',
        spatial: '空间思维',
        speed: '加工速度'
      }
      return dimMap[this.currentQuestion.dimension] || ''
    },
    dimBreakdown: function() {
      var dimNames = {
        focus: '专注力',
        memory: '记忆力',
        logic: '逻辑思维',
        perception: '感知觉',
        spatial: '空间思维',
        speed: '加工速度'
      }
      var dims = {}
      for (var i = 0; i < this.questions.length; i++) {
        var q = this.questions[i]
        if (!q) continue
        if (!dims[q.dimension]) {
          dims[q.dimension] = { total: 0, correct: 0 }
        }
        dims[q.dimension].total++
        if (this.answers[i] && q.answer === this.answers[i]) {
          dims[q.dimension].correct++
        }
      }
      var result = []
      var keys = Object.keys(dims)
      for (var k = 0; k < keys.length; k++) {
        var key = keys[k]
        var item = dims[key]
        result.push({
          name: dimNames[key] || key,
          total: item.total,
          correct: item.correct,
          pct: item.total > 0 ? Math.round((item.correct / item.total) * 100) : 0
        })
      }
      return result
    }
  },
  onLoad: function() {
    this.checkSession()
  },
  onUnload: function() {
    this.saveSession()
  },
  methods: {
    checkSession: function() {
      var saved = uni.getStorageSync('selfQuizSession')
      if (saved) {
        try {
          var session = JSON.parse(saved)
          if (session && session.step && session.step >= 2 && session.step <= 3) {
            this.showResume = true
            this.savedSession = session
          } else {
            uni.removeStorageSync('selfQuizSession')
          }
        } catch (e) {
          uni.removeStorageSync('selfQuizSession')
        }
      }
    },
    saveSession: function() {
      var session = {
        step: this.step,
        selectedGoal: this.selectedGoal,
        questionType: this.questionType,
        questions: this.questions,
        currentQ: this.currentQ,
        answers: this.answers
      }
      uni.setStorageSync('selfQuizSession', JSON.stringify(session))
    },
    resumeSession: function() {
      if (!this.savedSession) return
      var s = this.savedSession
      this.step = s.step
      this.selectedGoal = s.selectedGoal
      this.questionType = s.questionType
      this.questions = s.questions || []
      this.currentQ = s.currentQ || 0
      this.answers = s.answers || []
      this.showResume = false
      this.savedSession = null
    },
    clearSession: function() {
      uni.removeStorageSync('selfQuizSession')
      this.showResume = false
      this.savedSession = null
    },
    selectGoal: function(g) {
      this.selectedGoal = g
    },
    goStep2: function() {
      if (this.selectedGoal) {
        this.step = 2
        this.saveSession()
      }
    },
    goStep1: function() {
      this.step = 1
      this.saveSession()
    },
    selectType: function(id) {
      this.questionType = id
    },
    startQuiz: function() {
      if (!this.questionType) return
      this.generateQuestions()
      this.currentQ = 0
      this.answers = []
      this.step = 3
      this.saveSession()
    },
    shuffle: function(arr) {
      var a = arr.slice()
      for (var i = a.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1))
        var tmp = a[i]
        a[i] = a[j]
        a[j] = tmp
      }
      return a
    },
    convertToTF: function(q) {
      var opts = q.options
      var idx = opts.indexOf(q.answer)
      var wrongOpts = []
      for (var w = 0; w < opts.length; w++) {
        if (opts[w] !== q.answer) {
          wrongOpts.push(opts[w])
        }
      }
      var isTrue = Math.random() > 0.4
      var claimIdx
      if (isTrue) {
        claimIdx = idx
      } else {
        var randomWrong = wrongOpts[Math.floor(Math.random() * wrongOpts.length)]
        claimIdx = opts.indexOf(randomWrong)
      }
      return {
        dimension: q.dimension,
        question: q.question + ' 正确答案是"' + opts[claimIdx] + '"',
        options: ['正确', '错误'],
        answer: isTrue ? '正确' : '错误',
        isTF: true
      }
    },
    generateQuestions: function() {
      var goalId = this.selectedGoal && this.selectedGoal.id
      if (!goalId) return
      var pool = []
      for (var p = 0; p < QUESTION_BANK.length; p++) {
        if (QUESTION_BANK[p].dimension === goalId) {
          pool.push(QUESTION_BANK[p])
        }
      }
      var shuffled = this.shuffle(pool)
      var type = this.questionType
      if (type === 'truefalse') {
        var tfQuestions = []
        var count = Math.min(5, shuffled.length)
        for (var ti = 0; ti < count; ti++) {
          tfQuestions.push(this.convertToTF(shuffled[ti]))
        }
        this.questions = tfQuestions
      } else if (type === 'mix') {
        var allDims = ['focus', 'memory', 'logic', 'perception', 'spatial', 'speed']
        var otherDims = []
        for (var od = 0; od < allDims.length; od++) {
          if (allDims[od] !== goalId) {
            otherDims.push(allDims[od])
          }
        }
        otherDims = this.shuffle(otherDims)
        var selectedDims = [goalId].concat(otherDims.slice(0, 4))
        var mixedQuestions = []
        for (var di = 0; di < selectedDims.length; di++) {
          var dimPool = []
          for (var dq = 0; dq < QUESTION_BANK.length; dq++) {
            if (QUESTION_BANK[dq].dimension === selectedDims[di]) {
              dimPool.push(QUESTION_BANK[dq])
            }
          }
          if (dimPool.length > 0) {
            var pick = this.shuffle(dimPool)
            mixedQuestions.push(pick[0])
          }
        }
        this.questions = this.shuffle(mixedQuestions).slice(0, 5)
      } else {
        this.questions = shuffled.slice(0, 5)
      }
    },
    nextQuestion: function() {
      if (!this.currentAnswer) return
      if (this.currentQ < this.questions.length - 1) {
        this.currentQ++
        this.saveSession()
      } else {
        this.step = 4
        this.saveSession()
      }
    },
    prevQuestion: function() {
      if (this.currentQ > 0) {
        this.currentQ--
      }
    },
    resetQuiz: function() {
      uni.removeStorageSync('selfQuizSession')
      this.step = 1
      this.selectedGoal = null
      this.questionType = null
      this.questions = []
      this.currentQ = 0
      this.answers = []
    },
    goHome: function() {
      uni.navigateTo({ url: '/pages/wisdom-detail/index' })
    },
    goStep: function(n) {
      if (n === this.step) return
      if (n < this.step) {
        this.step = n
        this.saveSession()
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 30rpx;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.resume-prompt {
  background: #fff;
  border-radius: 20rpx;
  padding: 50rpx 30rpx;
  text-align: center;
  margin-top: 160rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.resume-text {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}
.resume-btns {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.step-wrap {
  margin-bottom: 10rpx;
}
.step-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20rpx 0;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 24rpx;
}
.step-dot {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #ddd;
  background: #fff;
  transition: all 0.3s;
}
.step-dot--active {
  background: #FFD700;
  border-color: #FFD700;
}
.step-dot--done {
  border-color: #FFD700;
  background: #FFD700;
}
.step-dot--pending {
  border-color: #ddd;
  background: #fff;
}
.step-check {
  font-size: 22rpx;
  color: #fff;
  font-weight: bold;
}
.step-num {
  font-size: 22rpx;
  color: #999;
}
.step-dot--active .step-num {
  color: #fff;
}
.step-label {
  font-size: 20rpx;
  margin-top: 8rpx;
  color: #999;
}
.step-label--active {
  color: #FFD700;
  font-weight: bold;
}
.step-label--muted {
  color: #ccc;
}

.step-content {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.content-header {
  text-align: center;
  margin-bottom: 30rpx;
}
.content-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.content-sub {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.goal-grid {
  display: flex;
  flex-wrap: wrap;
}
.goal-card {
  width: calc(50% - 12rpx);
  margin: 6rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3rpx solid transparent;
  transition: all 0.3s;
  box-sizing: border-box;
}
.goal-card--selected {
  border-color: #FFD700;
  background: #FFF8E1;
}
.goal-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.goal-icon {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}
.goal-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 6rpx;
}
.goal-desc {
  font-size: 22rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

.type-list {
  margin-top: 10rpx;
}
.type-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  border: 3rpx solid transparent;
  transition: all 0.3s;
}
.type-card--selected {
  border-color: #FFD700;
  background: #FFF8E1;
}
.type-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.type-icon {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}
.type-info {
  flex: 1;
}
.type-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.type-desc {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.type-radio {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 3rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 16rpx;
}
.type-radio--checked {
  border-color: #FFD700;
}
.type-radio-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #FFD700;
}

.progress-header {
  margin-bottom: 30rpx;
}
.progress-label {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
}
.progress-bar {
  height: 8rpx;
  background: #eee;
  border-radius: 4rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.question-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx 28rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  margin-bottom: 30rpx;
}
.q-tag {
  display: inline-block;
  padding: 6rpx 20rpx;
  background: #FFF8E1;
  color: #B8860B;
  font-size: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.q-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  display: block;
  margin-bottom: 30rpx;
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.q-option {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 16rpx;
  border: 2rpx solid #eee;
  transition: all 0.3s;
}
.q-option--selected {
  border-color: #FFD700;
  background: #FFF8E1;
}
.q-option--tf {
  justify-content: center;
  padding: 28rpx;
}
.q-option-tf-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}
.q-option--selected .q-option-tf-text {
  color: #B8860B;
}
.q-radio {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 3rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16rpx;
}
.q-radio--checked {
  border-color: #FFD700;
}
.q-radio-dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background: #FFD700;
}
.q-option-text {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.action-bar {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.action-bar--double {
  flex-direction: row;
  gap: 20rpx;
}
.action-bar--double .btn {
  flex: 1;
}

.btn {
  padding: 24rpx 0;
  border-radius: 16rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  transition: all 0.3s;
  box-sizing: border-box;
}
.btn--primary {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #fff;
}
.btn--primary:active {
  opacity: 0.9;
  transform: scale(0.98);
}
.btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn--outline {
  border: 3rpx solid #FFD700;
  color: #B8860B;
  background: #fff;
}
.btn--outline:active {
  background: #FFF8E1;
}
.btn--ghost {
  color: #999;
  background: transparent;
}

.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40rpx 0;
}
.score-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(255,215,0,0.3);
  margin-bottom: 20rpx;
}
.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}
.score-label {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.result-dims {
  margin: 20rpx 0 30rpx;
}
.dim-bar-item {
  margin-bottom: 24rpx;
}
.dim-bar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.dim-bar-name {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}
.dim-bar-count {
  font-size: 22rpx;
  color: #999;
}
.dim-bar-track {
  height: 8rpx;
  background: #eee;
  border-radius: 4rpx;
  overflow: hidden;
}
.dim-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 4rpx;
  transition: width 0.6s ease;
}

.bottom-spacer {
  height: 120rpx;
}
</style>