96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { NGrid, NGridItem, NSelect } from 'naive-ui'
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
const questionOptions = [
|
|||
|
|
{ label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
|
|||
|
|
{ label: '同音字辨析 - 根据拼音书写', value: 'tongyin' },
|
|||
|
|
{ label: '偏旁部首 - 按要求写字', value: 'pianpang' },
|
|||
|
|
{ label: '词语听写 - 综合练习', value: 'ciyu' },
|
|||
|
|
{ label: '成语填空 - 四字成语', value: 'chengyu' },
|
|||
|
|
{ label: '反义词挑战', value: 'fanyi' },
|
|||
|
|
{ label: '近义词挑战', value: 'jinyi' },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const pkOptions = [
|
|||
|
|
{ label: '极速成语接龙 - 每题10秒', value: 'speed10' },
|
|||
|
|
{ label: '极速成语接龙 - 每题20秒', value: 'speed20' },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const regularQuestions = ref([
|
|||
|
|
{ value: 'hanzi' },
|
|||
|
|
{ value: 'tongyin' },
|
|||
|
|
{ value: 'pianpang' },
|
|||
|
|
{ value: 'ciyu' },
|
|||
|
|
{ value: 'chengyu' },
|
|||
|
|
{ value: 'fanyi' },
|
|||
|
|
{ value: 'jinyi' },
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const pkQuestions = ref([
|
|||
|
|
{ value: 'speed10' },
|
|||
|
|
{ value: 'speed10' },
|
|||
|
|
{ value: 'speed10' },
|
|||
|
|
{ value: 'speed10' },
|
|||
|
|
{ value: 'speed10' },
|
|||
|
|
])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="py-4">
|
|||
|
|
<NGrid :x-gap="48" :y-gap="24" cols="1 l:2" responsive="screen">
|
|||
|
|
<!-- 左侧：常规赛题包 -->
|
|||
|
|
<NGridItem>
|
|||
|
|
<div class="h-full rounded-xl bg-gray-50/50 p-6">
|
|||
|
|
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
|||
|
|
<div class="i-carbon-notebook text-lg text-blue-500" />
|
|||
|
|
<span>常规赛题包</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex flex-col gap-4">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, idx) in regularQuestions"
|
|||
|
|
:key="idx"
|
|||
|
|
class="flex items-center gap-4"
|
|||
|
|
>
|
|||
|
|
<span class="w-12 text-xs text-gray-400 font-medium">第{{ idx + 1 }}题</span>
|
|||
|
|
<NSelect
|
|||
|
|
v-model:value="item.value"
|
|||
|
|
:options="questionOptions"
|
|||
|
|
placeholder="请选择题型"
|
|||
|
|
class="flex-1 bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</NGridItem>
|
|||
|
|
|
|||
|
|
<!-- 右侧：加时赛 (PK环节) -->
|
|||
|
|
<NGridItem>
|
|||
|
|
<div class="h-full border border-orange-100/50 rounded-xl bg-orange-50/30 p-6">
|
|||
|
|
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
|||
|
|
<div class="i-carbon-timer text-lg text-orange-500" />
|
|||
|
|
<span>加时赛 (PK环节)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="flex flex-col gap-4">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, idx) in pkQuestions"
|
|||
|
|
:key="idx"
|
|||
|
|
class="flex items-center gap-4"
|
|||
|
|
>
|
|||
|
|
<span class="w-8 text-xs text-orange-400 font-medium">PK{{ idx + 1 }}</span>
|
|||
|
|
<NSelect
|
|||
|
|
v-model:value="item.value"
|
|||
|
|
:options="pkOptions"
|
|||
|
|
placeholder="请选择PK规则"
|
|||
|
|
class="flex-1 bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</NGridItem>
|
|||
|
|
</NGrid>
|
|||
|
|
</div>
|
|||
|
|
</template>
|