rjl
18e3f6f7f2
- 新增大屏开发调试指南文档，包含设计基准、调试方法和字体配置说明 - 添加字体大小预览工具，支持多分辨率视口切换（2048x1080/1920x1080/3840x2160） - 新增字体资源 README 文档和团队标题背景图片 - 优化用户界面背景图片（title-bg3.png、title-bg4.png） - 更新 ActionButton 和 CompetitionLayout 组件样式 - 完善用户模块各页面布局（分析、封面、抽签、游戏、规则、团队） - 优化题目渲染器组件和成绩详情页面 - 更新 UnoCSS 配置以支持大屏字体缩放方案
240 lines
6.7 KiB
HTML
240 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>字体大小预览 - 2048x1080</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 40px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 2048px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 60px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.info {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 60px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
|
|
.label {
|
|
width: 200px;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.size-info {
|
|
width: 150px;
|
|
color: #999;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.sample {
|
|
flex: 1;
|
|
color: #333;
|
|
}
|
|
|
|
/* UnoCSS 字体大小映射 */
|
|
.text-xs {
|
|
font-size: 0.8rem;
|
|
}
|
|
.text-sm {
|
|
font-size: 0.95rem;
|
|
}
|
|
.text-base {
|
|
font-size: 1.1rem;
|
|
}
|
|
.text-lg {
|
|
font-size: 1.3rem;
|
|
}
|
|
.text-xl {
|
|
font-size: 1.5rem;
|
|
}
|
|
.text-2xl {
|
|
font-size: 1.75rem;
|
|
}
|
|
.text-3xl {
|
|
font-size: 2.1rem;
|
|
}
|
|
.text-4xl {
|
|
font-size: 2.5rem;
|
|
}
|
|
.text-5xl {
|
|
font-size: 3.2rem;
|
|
}
|
|
.text-6xl {
|
|
font-size: 4rem;
|
|
}
|
|
.text-7xl {
|
|
font-size: 5rem;
|
|
}
|
|
.text-8xl {
|
|
font-size: 6.5rem;
|
|
}
|
|
.text-9xl {
|
|
font-size: 8.5rem;
|
|
|
|
.controls {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.controls button {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
margin-bottom: 10px;
|
|
background: #667eea;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.controls button:hover {
|
|
background: #5568d3;
|
|
}
|
|
|
|
.current-size {
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="controls">
|
|
<button onclick="setViewport(2048, 1080)">2048x1080 (设计基准)</button>
|
|
<button onclick="setViewport(1920, 1080)">1920x1080 (Full HD)</button>
|
|
<button onclick="setViewport(3840, 2160)">3840x2160 (4K)</button>
|
|
<div class="current-size" id="currentSize">当前窗口: <span id="sizeDisplay"></span></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h1>字体大小预览</h1>
|
|
<div class="info">设计基准: 2048 x 1080 | 使用 VScaleScreen 自动缩放</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-xs</div>
|
|
<div class="size-info">0.8rem (12.8px)</div>
|
|
<div class="sample text-xs">辅助文字、标注信息 - The quick brown fox jumps over the lazy dog</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-sm</div>
|
|
<div class="size-info">0.95rem (15.2px)</div>
|
|
<div class="sample text-sm">次要文字内容 - The quick brown fox jumps over the lazy dog</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-base</div>
|
|
<div class="size-info">1.1rem (17.6px)</div>
|
|
<div class="sample text-base">正文内容 - The quick brown fox jumps over the lazy dog</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-lg</div>
|
|
<div class="size-info">1.3rem (20.8px)</div>
|
|
<div class="sample text-lg">小标题 - The quick brown fox jumps over the lazy dog</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-xl</div>
|
|
<div class="size-info">1.5rem (24px)</div>
|
|
<div class="sample text-xl">中标题 - The quick brown fox jumps over the lazy dog</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-2xl</div>
|
|
<div class="size-info">1.75rem (28px)</div>
|
|
<div class="sample text-2xl">大标题 - 重庆市教育学会</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-3xl</div>
|
|
<div class="size-info">2.1rem (33.6px)</div>
|
|
<div class="sample text-3xl">特大标题 - 阅读之星展示活动</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-4xl</div>
|
|
<div class="size-info">2.5rem (40px)</div>
|
|
<div class="sample text-4xl">主标题 - 队伍名单</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-5xl</div>
|
|
<div class="size-info">3.2rem (51.2px)</div>
|
|
<div class="sample text-5xl">超大标题 - 星辞海遨游</div>
|
|
</div>
|
|
|
|
<div class="preview-item">
|
|
<div class="label">text-6xl</div>
|
|
<div class="size-info">4rem (64px)</div>
|
|
<div class="sample text-6xl">巨大标题 - 开始答题</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setViewport(width, height) {
|
|
// 这个函数只是提示，实际需要在浏览器 DevTools 中手动设置
|
|
alert(
|
|
`请在浏览器 DevTools 中设置视口为 ${width}x${height}\n\n步骤：\n1. 按 F12 打开 DevTools\n2. 按 Ctrl+Shift+M 进入响应式模式\n3. 输入宽度: ${width}\n4. 输入高度: ${height}`,
|
|
)
|
|
|
|
function updateSize() {
|
|
const width = window.innerWidth
|
|
const height = window.innerHeight
|
|
document.getElementById('sizeDisplay').textContent = `${width}x${height}`
|
|
}
|
|
|
|
updateSize();
|
|
window.addEventListener('resize', updateSize)
|
|
</script>
|
|
</body>
|
|
</html>
|