JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
107 lines
1.5 KiB
CSS
107 lines
1.5 KiB
CSS
/* 形象验收 demo —— 刻意无装饰，只验证组件本身 */
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
|
|
background: #faf9f5;
|
|
color: #1f1c17;
|
|
}
|
|
|
|
.page-head {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
padding: 48px 24px 8px;
|
|
}
|
|
|
|
.page-head h1 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.page-head p {
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
color: #6b655a;
|
|
}
|
|
|
|
.panel {
|
|
max-width: 760px;
|
|
margin: 24px auto;
|
|
padding: 40px 24px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.panel--light {
|
|
background: #ffffff;
|
|
border: 1px solid #e8e2d5;
|
|
color: #1f1c17;
|
|
}
|
|
|
|
.panel--dark {
|
|
background: #14161b;
|
|
color: #e8e6e1;
|
|
}
|
|
|
|
.panel h2 {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.live-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.live-row + .live-row {
|
|
margin-top: 32px;
|
|
padding-top: 32px;
|
|
border-top: 1px solid currentColor;
|
|
}
|
|
|
|
.live-avatar {
|
|
flex-shrink: 0;
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.live-note {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.live-note strong {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.live-note span {
|
|
font-size: 13px;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.size-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 40px;
|
|
}
|
|
|
|
.size-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.size-cell span {
|
|
font-size: 11px;
|
|
font-family: ui-monospace, monospace;
|
|
opacity: 0.45;
|
|
}
|