Spaces:
Paused
Paused
| <template> | |
| <Teleport to="body"> | |
| <Transition name="modal"> | |
| <div v-if="modelValue" class="fixed inset-0 z-[200] flex items-center justify-center p-4"> | |
| <div class="absolute inset-0 bg-black/50" @click="$emit('update:modelValue', false)"></div> | |
| <div class="relative z-10 w-full max-w-sm rounded-xl bg-white shadow-xl"> | |
| <!-- Header --> | |
| <div class="flex items-start justify-between border-b border-[var(--border)] px-5 py-4"> | |
| <div> | |
| <div class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ink3)]">Chọn chế độ luyện tập</div> | |
| <div class="mt-0.5 text-[14px] font-bold text-[var(--ink)] leading-snug line-clamp-2">{{ testTitle }}</div> | |
| </div> | |
| <button class="ml-3 flex h-7 w-7 shrink-0 items-center justify-center rounded text-[var(--ink3)] hover:bg-[var(--bg2)]" @click="$emit('update:modelValue', false)"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <!-- Options --> | |
| <div class="grid grid-cols-2 gap-3 p-4"> | |
| <button | |
| class="flex flex-col items-start gap-2 rounded-lg border-2 p-4 text-left transition-colors" | |
| :class="selected === 'practice' ? 'border-[var(--ink)] bg-[var(--bg)]' : 'border-[var(--border)] hover:border-[var(--ink2)]'" | |
| @click="selected = 'practice'" | |
| > | |
| <div class="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border)] bg-white"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/> | |
| </svg> | |
| </div> | |
| <div class="text-[13px] font-bold text-[var(--ink)]">Luyện tập</div> | |
| <div class="text-[11px] leading-relaxed text-[var(--ink3)]">Xem đáp án, highlight, ghi chú, tra từ</div> | |
| </button> | |
| <button | |
| class="flex flex-col items-start gap-2 rounded-lg border-2 p-4 text-left transition-colors" | |
| :class="selected === 'exam' ? 'border-[var(--ink)] bg-[var(--bg)]' : 'border-[var(--border)] hover:border-[var(--ink2)]'" | |
| @click="selected = 'exam'" | |
| > | |
| <div class="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border)] bg-white"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/> | |
| </svg> | |
| </div> | |
| <div class="text-[13px] font-bold text-[var(--ink)]">Thi thật</div> | |
| <div class="text-[11px] leading-relaxed text-[var(--ink3)]">Đếm ngược, không xem đáp án</div> | |
| </button> | |
| </div> | |
| <!-- Confirm --> | |
| <div class="border-t border-[var(--border)] px-4 pb-4 pt-3"> | |
| <button | |
| :disabled="!selected" | |
| class="ct-btn ct-btn-primary w-full disabled:cursor-not-allowed disabled:opacity-40" | |
| @click="confirm" | |
| > | |
| {{ selected === 'practice' ? 'Bắt đầu luyện tập' : selected === 'exam' ? 'Vào phòng thi' : 'Chọn chế độ' }} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </Transition> | |
| </Teleport> | |
| </template> | |
| <script setup> | |
| import { ref, watch } from 'vue' | |
| const props = defineProps({ modelValue: Boolean, testTitle: { type: String, default: '' } }) | |
| const emit = defineEmits(['update:modelValue', 'confirm']) | |
| const selected = ref(null) | |
| watch(() => props.modelValue, v => { if (v) selected.value = null }) | |
| function confirm() { if (!selected.value) return; emit('confirm', selected.value); emit('update:modelValue', false) } | |
| </script> | |