ranjl/reader-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化用户界面组件与调整布局样式

Browse Source 
- 新增田字格组件用于汉字书写练习
- 调整模板详情页的生成参数和页面编号
- 优化用户主页轮播图和游戏页布局
- 修复答题结果页图片显示和状态切换问题
- 移除卡片悬停阴影并优化背景图片显示
- 更新状态管理注释和类型声明
This commit is contained in:
冉军林
2026-03-03 08:35:28 +08:00
parent 81643c61ae
commit 94af0bec6a
16 changed files with 121 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/admin/src/views/user/modules/QuestionRenderer.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, watch } from 'vue'
import TianZiGe from '@/components/custom/user/TianZiGe.vue'
import { QuestionCategoryEnum } from '@/enum/business'
import { useCompetitionStore } from '@/store/modules/competition'
@ -85,28 +86,9 @@ watch(
<div class="ptions-container1 mb-2 text-center text-2xl">
{{ title }}
</div>
<div class="rich-content flex gap-1">
<div
v-for="(char, index) in pinyinChars" :key="index"
class="relative h-38 w-42 flex select-none items-center justify-center border-2 border-red-500 bg-white"
>
<!-- 米字格背景 -->
<div class="pointer-events-none absolute inset-0 z-0 h-full w-full">
<!-- 横虚线 -->
<div class="absolute left-0 top-1/2 h-[1px] w-full border-t border-red-400 border-dashed opacity-60" />
<!-- 竖虚线 -->
<div class="absolute left-1/2 top-0 h-full w-[1px] border-l border-red-400 border-dashed opacity-60" />
<!-- 斜虚线 (SVG) -->
<svg width="100%" height="100%" class="absolute inset-0 opacity-60">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
</svg>
</div>
<!-- 文字 -->
<span class="z-10 text-4xl text-gray-800 font-bold font-sans">{{ char }}</span>
</div>
</div>
<!-- <div class="rich-content ml-3 flex gap-1">
<TianZiGe v-for="(char, index) in pinyinChars" :key="index" :char="char" />
</div> -->
</div>
</div>
@ -139,26 +121,7 @@ watch(
<!-- 模板D: 词语听写 (拼音+提示) -->
<div v-else-if="template === QuestionCategoryEnum.WordDictation" class="flex flex-col items-center">
<div class="mb-8 flex flex-wrap justify-center gap-6">
<div
v-for="(char, index) in pinyinChars" :key="index"
class="relative h-32 w-32 flex select-none items-center justify-center border-2 border-red-500 bg-white"
>
<!-- 米字格背景 -->
<div class="pointer-events-none absolute inset-0 z-0 h-full w-full">
<!-- 横虚线 -->
<div class="absolute left-0 top-1/2 h-[1px] w-full border-t border-red-400 border-dashed opacity-60" />
<!-- 竖虚线 -->
<div class="absolute left-1/2 top-0 h-full w-[1px] border-l border-red-400 border-dashed opacity-60" />
<!-- 斜虚线 (SVG) -->
<svg width="100%" height="100%" class="absolute inset-0 opacity-60">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="#f87171" stroke-width="1" stroke-dasharray="4 2" />
</svg>
</div>
<!-- 文字 -->
<span class="z-10 text-5xl text-gray-800 font-bold font-sans">{{ char }}</span>
</div>
<TianZiGe v-for="(char, index) in pinyinChars" :key="index" :char="char" />
</div>
</div>