JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
77 lines
2.8 KiB
HTML
77 lines
2.8 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>Astrion 形象组件 · 验收</title>
|
||
<link rel="stylesheet" href="../shared/astrion-avatar.css" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<header class="page-head">
|
||
<h1>形象组件验收</h1>
|
||
<p>参数 1:1 还原产品 StatusAvatar.vue：viewBox 200 · 外框 12 · 眼睛 10 · currentColor。移动鼠标看追踪，等几秒看眨眼。</p>
|
||
</header>
|
||
|
||
<section class="panel panel--light">
|
||
<div class="live-row">
|
||
<div class="live-avatar" data-avatar data-mode="idle"></div>
|
||
<div class="live-note">
|
||
<strong>idle · 活</strong>
|
||
<span>随机眨眼（2.2–4.8s）· 眼睛追踪鼠标方向</span>
|
||
</div>
|
||
</div>
|
||
<div class="live-row">
|
||
<div class="live-avatar" data-avatar data-mode="think"></div>
|
||
<div class="live-note">
|
||
<strong>think</strong>
|
||
<span>三个波浪圆点（产品思考态原样）</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel panel--dark">
|
||
<div class="live-row">
|
||
<div class="live-avatar" data-avatar data-mode="idle"></div>
|
||
<div class="live-note">
|
||
<strong>深色底</strong>
|
||
<span>颜色 = currentColor，跟随文字色，不需要任何适配代码</span>
|
||
</div>
|
||
</div>
|
||
<div class="live-row">
|
||
<div class="live-avatar" data-avatar data-mode="think"></div>
|
||
<div class="live-note">
|
||
<strong>think</strong>
|
||
<span>同一组件，零改动</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel panel--light">
|
||
<h2>尺寸序列</h2>
|
||
<div class="size-row">
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="16"></div><span>16</span></div>
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="24"></div><span>24</span></div>
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="32"></div><span>32</span></div>
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="48"></div><span>48</span></div>
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="64"></div><span>64</span></div>
|
||
<div class="size-cell"><div data-avatar data-mode="idle" data-size="96"></div><span>96</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="../shared/astrion-avatar.js"></script>
|
||
<script>
|
||
document.querySelectorAll('[data-avatar]').forEach(function (el) {
|
||
var size = parseInt(el.dataset.size || '160', 10);
|
||
el.style.width = size + 'px';
|
||
el.style.height = size + 'px';
|
||
AstrionAvatar.mount(el, {
|
||
mode: el.dataset.mode || 'idle',
|
||
blink: el.dataset.mode !== 'think',
|
||
track: el.dataset.mode !== 'think' && size >= 32
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|