|
@@ -1,921 +0,0 @@
|
|
|
-<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">✓</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>
|
|
|