48629736f4
- Django backend with projects, templates, exports apps - SQLite database models for Project, Asset, CardLayer - REST API endpoints for project management - Vue frontend with Vite, Element Plus, Fabric.js - Home page for project selection - Editor page with Fabric.js canvas integration
117 lines
5.2 KiB
HTML
117 lines
5.2 KiB
HTML
<h2>扑克牌设计管理系统 - 核心架构</h2>
|
||
<p class="subtitle">个人从零开始设计完整扑克牌系列</p>
|
||
|
||
<div class="section">
|
||
<h3>系统核心功能模块</h3>
|
||
|
||
<div class="cards">
|
||
<div class="card" data-choice="upload" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
|
||
<div style="font-size: 48px; margin-bottom: 10px;">??</div>
|
||
<div style="font-size: 14px; font-weight: 600;">图案上传</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>图案素材管理</h3>
|
||
<p>上传花色图案、数字字体、JQK人像、大小王图片、背面图案等设计素材</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="design" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
|
||
<div style="font-size: 48px; margin-bottom: 10px;">??</div>
|
||
<div style="font-size: 14px; font-weight: 600;">实时设计</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>可视化设计编辑器</h3>
|
||
<p>实时预览54张牌面，调整布局、颜色、字体等设计元素</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="export" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 40px; text-align: center; color: white; border-radius: 8px;">
|
||
<div style="font-size: 48px; margin-bottom: 10px;">??</div>
|
||
<div style="font-size: 14px; font-weight: 600;">批量导出</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>PNG导出系统</h3>
|
||
<p>一键导出整套54张扑克牌为PNG格式，支持多种分辨率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>扑克牌设计规范</h3>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-header">标准扑克牌结构（54张）</div>
|
||
<div class="mockup-body">
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 20px;">
|
||
|
||
<div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
|
||
<div style="font-weight: 600; margin-bottom: 8px; color: #333;">数字牌 (40张)</div>
|
||
<div style="font-size: 13px; color: #666; line-height: 1.6;">
|
||
? 4种花色 × 10张 (A, 2-10)<br>
|
||
? 左右对称布局<br>
|
||
? 中间花色图案均匀分布<br>
|
||
? 四角标注点数与花色
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
|
||
<div style="font-weight: 600; margin-bottom: 8px; color: #333;">花牌 JQK (12张)</div>
|
||
<div style="font-size: 13px; color: #666; line-height: 1.6;">
|
||
? 4种花色 × 3张 (J, Q, K)<br>
|
||
? <strong>中心对称设计</strong><br>
|
||
? 人像上下倒置可正常观看<br>
|
||
? 沿中轴线对称绘制
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f9f9f9;">
|
||
<div style="font-weight: 600; margin-bottom: 8px; color: #333;">大小王 (2张)</div>
|
||
<div style="font-size: 13px; color: #666; line-height: 1.6;">
|
||
? 大王、小王各1张<br>
|
||
? 无花色区分<br>
|
||
? 独立图案设计<br>
|
||
? 视觉对称原则
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>设计工作流程</h3>
|
||
|
||
<div style="display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #f5f5f5; border-radius: 8px;">
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="width: 60px; height: 60px; background: #667eea; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">1</div>
|
||
<div style="font-size: 13px; font-weight: 600;">上传素材</div>
|
||
</div>
|
||
<div style="font-size: 24px; color: #999;">→</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="width: 60px; height: 60px; background: #f093fb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">2</div>
|
||
<div style="font-size: 13px; font-weight: 600;">配置样式</div>
|
||
</div>
|
||
<div style="font-size: 24px; color: #999;">→</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="width: 60px; height: 60px; background: #4facfe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">3</div>
|
||
<div style="font-size: 13px; font-weight: 600;">实时预览</div>
|
||
</div>
|
||
<div style="font-size: 24px; color: #999;">→</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="width: 60px; height: 60px; background: #00f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: white; font-weight: 600;">4</div>
|
||
<div style="font-size: 13px; font-weight: 600;">导出PNG</div>
|
||
</div>
|
||
</div>
|
||
</div>
|