rjl
94af0bec6a
- 新增田字格组件用于汉字书写练习 - 调整模板详情页的生成参数和页面编号 - 优化用户主页轮播图和游戏页布局 - 修复答题结果页图片显示和状态切换问题 - 移除卡片悬停阴影并优化背景图片显示 - 更新状态管理注释和类型声明
49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
char?: string
|
|
width?: string | number
|
|
height?: string | number
|
|
fontSize?: string | number
|
|
showChar?: boolean
|
|
}
|
|
|
|
const _props = withDefaults(defineProps<Props>(), {
|
|
char: '',
|
|
width: '10.8rem', // 对应 w-42 (42 * 0.25rem = 10.5rem)
|
|
height: '9.5rem', // 对应 h-38 (38 * 0.25rem = 9.5rem)
|
|
// fontSize: '3.25rem', // 对应 text-4xl
|
|
showChar: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative flex select-none items-center justify-center border-2 border-red-500 bg-white"
|
|
:style="{ width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"
|
|
>
|
|
<!-- 田字格背景线 -->
|
|
<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 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
|
|
v-if="showChar"
|
|
class="z-10 text-6xl text-gray-800 font-bold font-sans"
|
|
>
|
|
{{ char }}
|
|
</span>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|