2860 lines
127 KiB
HTML
2860 lines
127 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="theme-light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智绘微刻 · 设计系统样例</title>
|
||
<style>
|
||
:root {
|
||
--bg-page: #faf7f2;
|
||
--bg-card: #ffffff;
|
||
--bg-muted: #f3eee7;
|
||
--bg-input: #f5f1eb;
|
||
--text-primary: #2e2622;
|
||
--text-secondary: #8a7e76;
|
||
--text-muted: #b3a89e;
|
||
--accent-primary: #d96c6a;
|
||
--accent-primary-strong: #c75b59;
|
||
--accent-primary-soft: #f6e0dc;
|
||
--accent-secondary: #6c7bdb;
|
||
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
||
--success: #4fa477;
|
||
--warning: #d99a4e;
|
||
--danger: #d85d5d;
|
||
--border: #ede5dc;
|
||
--border-strong: #e0d5c8;
|
||
--glass: rgba(255, 255, 255, 0.72);
|
||
--glass-line: rgba(255, 255, 255, 0.55);
|
||
--shadow-card: 0 2px 10px rgba(46, 38, 34, 0.06);
|
||
--shadow-elevated: 0 12px 30px rgba(46, 38, 34, 0.14);
|
||
--space-1: 2px;
|
||
--space-2: 4px;
|
||
--space-3: 8px;
|
||
--space-4: 12px;
|
||
--space-5: 16px;
|
||
--space-6: 24px;
|
||
--space-7: 32px;
|
||
--space-8: 48px;
|
||
--space-9: 64px;
|
||
--radius-sm: 8px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-pill: 999px;
|
||
--font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
html.theme-dark {
|
||
--bg-page: #191919;
|
||
--bg-card: #23201d;
|
||
--bg-muted: #2b2622;
|
||
--bg-input: #2b2622;
|
||
--text-primary: #f5efe8;
|
||
--text-secondary: #b3a79c;
|
||
--text-muted: #82766c;
|
||
--accent-primary: #f09198;
|
||
--accent-primary-strong: #ffa7ad;
|
||
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
||
--accent-secondary: #8e97e8;
|
||
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
||
--success: #67c58e;
|
||
--warning: #e0ad68;
|
||
--danger: #ef7a7a;
|
||
--border: #37312c;
|
||
--border-strong: #463e37;
|
||
--glass: rgba(25, 25, 25, 0.72);
|
||
--glass-line: rgba(255, 255, 255, 0.14);
|
||
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||
--shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.48);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
background: var(--bg-page);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
transition: background 200ms var(--ease), color 200ms var(--ease);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
button, input, textarea, select {
|
||
font: inherit;
|
||
}
|
||
|
||
.appbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 64px;
|
||
padding: 0 24px;
|
||
background: color-mix(in srgb, var(--bg-page) 78%, transparent);
|
||
backdrop-filter: blur(20px);
|
||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.brand-mark {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-sm);
|
||
background: var(--accent-primary);
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.appbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.icon-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 40px;
|
||
height: 40px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-pill);
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
transition: transform 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
|
||
}
|
||
|
||
.icon-button:hover {
|
||
background: var(--bg-muted);
|
||
}
|
||
|
||
.icon-button:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
max-width: 1240px;
|
||
margin: 0 auto;
|
||
padding: 32px 24px 96px;
|
||
}
|
||
|
||
.section {
|
||
margin: 56px 0;
|
||
}
|
||
|
||
.section-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
line-height: 1.2;
|
||
margin: 0;
|
||
}
|
||
|
||
.section-note {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.grid-2 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.grid-3 {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.grid-4 {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.panel {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 24px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.panel-title {
|
||
margin: 0 0 16px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.swatch-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.swatch {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 12px;
|
||
}
|
||
|
||
.swatch-color {
|
||
height: 64px;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.swatch-label {
|
||
margin-top: 10px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.swatch-value {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 240px minmax(0, 1fr);
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.type-meta {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.type-sample {
|
||
outline: none;
|
||
border: 0;
|
||
background: none;
|
||
padding: 0;
|
||
color: var(--text-primary);
|
||
text-align: left;
|
||
min-width: 0;
|
||
}
|
||
|
||
.space-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.space-bar {
|
||
flex: 1;
|
||
height: 14px;
|
||
border-radius: 4px;
|
||
background: var(--accent-secondary-soft);
|
||
}
|
||
|
||
.space-label {
|
||
width: 72px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.radius-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.radius-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.radius-shape {
|
||
aspect-ratio: 1;
|
||
max-width: 88px;
|
||
margin: 0 auto 8px;
|
||
background: var(--accent-primary-soft);
|
||
border: 1px solid var(--accent-primary);
|
||
}
|
||
|
||
.radius-label {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.glass-preview {
|
||
background:
|
||
linear-gradient(135deg, rgba(217, 108, 106, 0.35), rgba(108, 123, 219, 0.24)),
|
||
linear-gradient(180deg, #f6e0dc, #e9e2f5);
|
||
min-height: 184px;
|
||
border-radius: var(--radius-lg);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.glass-overlay {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 34px 16px 14px;
|
||
background: linear-gradient(to top, rgba(20, 16, 14, 0.62), transparent);
|
||
color: #fff;
|
||
}
|
||
|
||
.glass-overlay strong {
|
||
display: block;
|
||
font-size: 15px;
|
||
color: #fff;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.glass-overlay span {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.component-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
min-width: 72px;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--radius-pill);
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
transition: transform 160ms var(--ease), opacity 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.45;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-lg {
|
||
height: 48px;
|
||
padding: 0 28px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.btn-md {
|
||
height: 40px;
|
||
padding: 0 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn-sm {
|
||
height: 32px;
|
||
padding: 0 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--accent-primary);
|
||
color: #fff;
|
||
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
background: var(--accent-primary-strong);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: var(--danger);
|
||
color: #fff;
|
||
}
|
||
|
||
.spinner {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2px solid rgba(255, 255, 255, 0.45);
|
||
border-top-color: #fff;
|
||
border-radius: 50%;
|
||
animation: spin 760ms linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 20px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.card-title {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.card-desc {
|
||
margin: 6px 0 0;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.media-card {
|
||
overflow: hidden;
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-card);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.media-card-image {
|
||
aspect-ratio: 4 / 3;
|
||
background:
|
||
linear-gradient(135deg, rgba(217, 108, 106, 0.35), rgba(108, 123, 219, 0.22)),
|
||
#d9c6b8;
|
||
}
|
||
|
||
.media-card-body {
|
||
padding: 14px 16px 16px;
|
||
}
|
||
|
||
.media-card-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.media-card-desc {
|
||
margin: 4px 0 0;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.field {
|
||
display: block;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
.field-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.input {
|
||
display: block;
|
||
width: 100%;
|
||
height: 44px;
|
||
padding: 0 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--bg-input);
|
||
color: var(--text-primary);
|
||
outline: none;
|
||
transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
|
||
}
|
||
|
||
.input::placeholder {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.input:focus {
|
||
border-color: var(--accent-primary);
|
||
box-shadow: 0 0 0 3px var(--accent-primary-soft);
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
.input-error {
|
||
border-color: var(--danger);
|
||
}
|
||
|
||
.field-error {
|
||
display: block;
|
||
margin: 8px 0 0;
|
||
font-size: 12px;
|
||
color: var(--danger);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
textarea.input {
|
||
height: auto;
|
||
min-height: 120px;
|
||
padding: 12px 14px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.list-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
min-height: 56px;
|
||
padding: 14px 0;
|
||
}
|
||
|
||
.list-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.list-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
flex: 0 0 24px;
|
||
width: 24px;
|
||
height: 24px;
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.list-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.list-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.list-sub {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 20px;
|
||
padding: 0 10px;
|
||
border-radius: var(--radius-pill);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.tag-accent { background: var(--accent-primary-soft); color: var(--accent-primary); }
|
||
.tag-blue { background: var(--accent-secondary-soft); color: var(--accent-secondary); }
|
||
.tag-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
|
||
.tag-warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
|
||
.tag-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
|
||
|
||
.badge {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
min-width: 14px;
|
||
height: 14px;
|
||
padding: 0 4px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--accent-primary);
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.tabset {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px;
|
||
background: var(--bg-muted);
|
||
border-radius: var(--radius-md);
|
||
width: fit-content;
|
||
}
|
||
|
||
.tab {
|
||
min-height: 44px;
|
||
padding: 0 20px;
|
||
border: 0;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: color 160ms var(--ease), background 160ms var(--ease);
|
||
}
|
||
|
||
.tab.is-active {
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.tabs-line {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.tabs-line .tab {
|
||
position: relative;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: 0 4px;
|
||
height: 48px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.tabs-line .tab.is-active {
|
||
color: var(--accent-primary);
|
||
font-weight: 600;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.tabs-line .tab.is-active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: -1px;
|
||
height: 3px;
|
||
border-radius: 2px;
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
.stepper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.step-btn {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.step-btn:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
.step-value {
|
||
display: inline-block;
|
||
min-width: 32px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.slider-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.range-input {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
flex: 1;
|
||
height: 4px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--border-strong);
|
||
outline: none;
|
||
}
|
||
|
||
.range-input::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: var(--bg-card);
|
||
border: 3px solid var(--accent-primary);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.slider-value {
|
||
min-width: 44px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--accent-primary);
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 32px 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-bottom: 12px;
|
||
border-radius: 50%;
|
||
background: var(--accent-primary-soft);
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.empty-title {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.empty-desc {
|
||
max-width: 280px;
|
||
margin: 4px 0 16px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.skeleton-line {
|
||
height: 14px;
|
||
border-radius: 6px;
|
||
background: var(--bg-muted);
|
||
animation: pulse 1400ms ease-in-out infinite;
|
||
}
|
||
|
||
.skeleton-circle {
|
||
flex: 0 0 40px;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--bg-muted);
|
||
animation: pulse 1400ms ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.55; }
|
||
}
|
||
|
||
.mini-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
height: 48px;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.mini-nav-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.mini-nav-spacer {
|
||
width: 40px;
|
||
}
|
||
|
||
.mini-tabbar {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 56px;
|
||
padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
|
||
background: rgba(255, 255, 255, 0.55);
|
||
border: 1px solid var(--glass-line);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 -2px 12px rgba(46, 38, 34, 0.1);
|
||
backdrop-filter: blur(32px) saturate(1.2);
|
||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||
}
|
||
|
||
html.theme-dark .mini-tabbar {
|
||
background: rgba(25, 25, 25, 0.55);
|
||
border-color: rgba(255, 255, 255, 0.14);
|
||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.38);
|
||
}
|
||
|
||
.mini-tab {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
flex: 1;
|
||
min-height: 48px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mini-tab.is-active {
|
||
color: var(--accent-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mini-tab svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.mini-capsule {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 26px;
|
||
padding: 0 9px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
background: var(--bg-muted);
|
||
}
|
||
|
||
.mini-capsule i {
|
||
display: block;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--text-muted);
|
||
}
|
||
|
||
.mock-topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: block;
|
||
margin: 0 -16px 10px;
|
||
padding: 8px 14px 16px;
|
||
background: linear-gradient(to bottom, var(--glass), transparent 92%);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.mock-topbar.scroll-away {
|
||
position: static;
|
||
}
|
||
|
||
.mock-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.mock-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-height: 48px;
|
||
}
|
||
|
||
.mock-title {
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.mock-section {
|
||
margin: 18px 0 10px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.phone-frame {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
margin: 0 auto;
|
||
background: var(--bg-page);
|
||
border: 1px solid var(--border);
|
||
border-radius: 28px;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-elevated);
|
||
}
|
||
|
||
.phone-screen {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 780px;
|
||
background: var(--bg-page);
|
||
position: relative;
|
||
}
|
||
|
||
.phone-screen .mini-tabbar,
|
||
.phone-screen > div[style*="padding:0 16px 16px"] {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
.phone-screen .mini-tabbar {
|
||
margin: 0 12px 12px;
|
||
}
|
||
|
||
.phone-content {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.phone-screen .phone-content {
|
||
/* 底部留白，避免悬浮底栏盖住可滚动内容 */
|
||
padding-bottom: 88px !important;
|
||
}
|
||
|
||
.phone-content::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.screen-head {
|
||
margin: 10px 4px 16px;
|
||
}
|
||
|
||
.searchbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
height: 38px;
|
||
padding: 0 12px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--bg-input);
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.searchbox:focus-within {
|
||
border-color: var(--accent-primary);
|
||
box-shadow: 0 0 0 3px var(--accent-primary-soft);
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
.chip-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
overflow-x: auto;
|
||
padding: 4px 0;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.chip-row::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.chip {
|
||
flex: 0 0 auto;
|
||
height: 32px;
|
||
padding: 0 14px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--bg-card);
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.chip.is-active {
|
||
background: var(--accent-primary);
|
||
border-color: var(--accent-primary);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.home-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.home-grid .media-card-image {
|
||
aspect-ratio: 1 / 1;
|
||
}
|
||
|
||
.home-grid .media-card-body {
|
||
padding: 10px 12px 12px;
|
||
}
|
||
|
||
.home-grid .media-card-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.home-grid .media-card-desc {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.hero-block {
|
||
position: relative;
|
||
height: 168px;
|
||
margin: 0 0 16px;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(140deg, rgba(217, 108, 106, 0.5), rgba(108, 123, 219, 0.18)),
|
||
#cbb4a4;
|
||
}
|
||
|
||
.hero-top {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
}
|
||
|
||
.hero-round {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: var(--glass);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid var(--glass-line);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.detail-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-md);
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.detail-title {
|
||
margin: 0;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.detail-desc {
|
||
margin: 4px 0 0;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.price-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: var(--accent-primary);
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.price-old {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
text-decoration: line-through;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.spec-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 14px 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.spec-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.spec-key {
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.spec-value {
|
||
font-weight: 600;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.bottom-action {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
padding: 12px;
|
||
background: rgba(255, 255, 255, 0.55);
|
||
border: 1px solid var(--glass-line);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 -2px 12px rgba(46, 38, 34, 0.1);
|
||
backdrop-filter: blur(32px) saturate(1.2);
|
||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||
}
|
||
|
||
html.theme-dark .bottom-action {
|
||
background: rgba(25, 25, 25, 0.55);
|
||
border-color: rgba(255, 255, 255, 0.14);
|
||
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.38);
|
||
}
|
||
|
||
.bottom-action .price {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.stat-cell {
|
||
text-align: center;
|
||
padding: 14px 8px;
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.modal-layer, .sheet-layer {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 100;
|
||
display: grid;
|
||
place-items: center;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 200ms var(--ease);
|
||
}
|
||
|
||
.modal-layer.is-open, .sheet-layer.is-open {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.modal {
|
||
width: min(320px, calc(100vw - 48px));
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
padding: 24px;
|
||
box-shadow: var(--shadow-elevated);
|
||
transform: translateY(8px) scale(0.98);
|
||
transition: transform 200ms var(--ease);
|
||
}
|
||
|
||
.modal-layer.is-open .modal {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
.modal-title {
|
||
margin: 0;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.modal-text {
|
||
margin: 8px 0 20px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sheet {
|
||
position: absolute;
|
||
inset: auto 0 0 0;
|
||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||
background: var(--bg-card);
|
||
padding: 20px 24px 24px;
|
||
box-shadow: var(--shadow-elevated);
|
||
transform: translateY(24px);
|
||
transition: transform 240ms var(--ease);
|
||
}
|
||
|
||
.sheet-layer.is-open .sheet {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.sheet-handle {
|
||
width: 32px;
|
||
height: 4px;
|
||
margin: 0 auto 16px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--border-strong);
|
||
}
|
||
|
||
.toast {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 96px;
|
||
z-index: 200;
|
||
transform: translate(-50%, 16px);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
border-radius: var(--radius-md);
|
||
background: rgba(40, 35, 32, 0.92);
|
||
color: #fff;
|
||
font-size: 13px;
|
||
letter-spacing: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
|
||
}
|
||
|
||
.toast.is-open {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
|
||
.toast svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: #67c58e;
|
||
}
|
||
|
||
.demo-groups {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
gap: 24px;
|
||
align-items: start;
|
||
}
|
||
|
||
.icon {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.main {
|
||
padding: 24px 16px 72px;
|
||
}
|
||
|
||
.grid-3, .grid-4 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.type-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.radius-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.appbar {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="appbar">
|
||
<div class="brand">
|
||
<span class="brand-mark">微</span>
|
||
<span class="brand-name">智绘微刻设计样例</span>
|
||
</div>
|
||
<div class="appbar-actions">
|
||
<button class="icon-button" id="theme-toggle" type="button" aria-label="切换深浅色">
|
||
<span class="icon" style="width:18px;height:18px">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"></path>
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2 class="section-title">设计原则</h2>
|
||
<span class="section-note">克制、现代、保留一点品牌温度</span>
|
||
</div>
|
||
<div class="grid grid-4">
|
||
<div class="panel">
|
||
<div class="panel-title">去装饰</div>
|
||
<div style="font-size:13px;color:var(--text-secondary)">去掉 3px 虚线卡片与星星贴纸，装饰只承载功能与层级。</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">留白优先</div>
|
||
<div style="font-size:13px;color:var(--text-secondary)">用间距和字重组织信息，不靠边框和卡片嵌套来制造层次。</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">克制色彩</div>
|
||
<div style="font-size:13px;color:var(--text-secondary)">珊瑚粉只用于主操作、选中态和关键价格；大面积保持暖白与深墨。</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">现代质感</div>
|
||
<div style="font-size:13px;color:var(--text-secondary)">毛玻璃只用于浮层、吸顶栏和底部操作区；动效轻、阴影低饱和。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="section" id="colors">
|
||
<div class="section-head">
|
||
<h2 class="section-title">色彩 Token</h2>
|
||
<span class="section-note">浅色与深色共用同一组变量</span>
|
||
</div>
|
||
<div class="panel" style="margin-bottom:16px">
|
||
<div class="panel-title">中性色</div>
|
||
<div class="swatch-grid">
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--bg-page)"></div>
|
||
<div class="swatch-label">页面背景</div>
|
||
<div class="swatch-value">--bg-page</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--bg-card)"></div>
|
||
<div class="swatch-label">卡片背景</div>
|
||
<div class="swatch-value">--bg-card</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--bg-muted)"></div>
|
||
<div class="swatch-label">弱化背景</div>
|
||
<div class="swatch-value">--bg-muted</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--bg-input)"></div>
|
||
<div class="swatch-label">输入背景</div>
|
||
<div class="swatch-value">--bg-input</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--text-primary);color:var(--bg-page);display:grid;place-items:center;font-size:12px;font-weight:700">Aa</div>
|
||
<div class="swatch-label">主文字</div>
|
||
<div class="swatch-value">--text-primary</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--text-secondary)"></div>
|
||
<div class="swatch-label">次要文字</div>
|
||
<div class="swatch-value">--text-secondary</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--text-muted)"></div>
|
||
<div class="swatch-label">弱提示</div>
|
||
<div class="swatch-value">--text-muted</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--border)"></div>
|
||
<div class="swatch-label">分隔线</div>
|
||
<div class="swatch-value">--border</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">品牌与辅助色</div>
|
||
<div class="swatch-grid">
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--accent-primary)"></div>
|
||
<div class="swatch-label">主色</div>
|
||
<div class="swatch-value">--accent-primary</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--accent-primary-strong)"></div>
|
||
<div class="swatch-label">主色按压</div>
|
||
<div class="swatch-value">--accent-primary-strong</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--accent-primary-soft)"></div>
|
||
<div class="swatch-label">主色浅底</div>
|
||
<div class="swatch-value">--accent-primary-soft</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--accent-secondary)"></div>
|
||
<div class="swatch-label">辅助蓝紫</div>
|
||
<div class="swatch-value">--accent-secondary</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--success)"></div>
|
||
<div class="swatch-label">成功</div>
|
||
<div class="swatch-value">--success</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--warning)"></div>
|
||
<div class="swatch-label">提醒</div>
|
||
<div class="swatch-value">--warning</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--danger)"></div>
|
||
<div class="swatch-label">危险</div>
|
||
<div class="swatch-value">--danger</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:var(--glass);border:1px solid var(--glass-line)"></div>
|
||
<div class="swatch-label">毛玻璃</div>
|
||
<div class="swatch-value">--glass</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="typography">
|
||
<div class="section-head">
|
||
<h2 class="section-title">字体与排版</h2>
|
||
<span class="section-note">系统字体栈，尺寸以 750rpx 设计稿换算</span>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="type-row">
|
||
<div class="type-meta">Display · 56rpx · 800</div>
|
||
<div class="type-sample" style="font-size:34px;line-height:1.15;font-weight:800">遇见更克制的设计</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Title-LG · 44rpx · 700</div>
|
||
<div class="type-sample" style="font-size:26px;line-height:1.2;font-weight:700">页面主标题</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Title · 36rpx · 700</div>
|
||
<div class="type-sample" style="font-size:21px;line-height:1.25;font-weight:700">区块标题</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Heading · 32rpx · 600</div>
|
||
<div class="type-sample" style="font-size:19px;line-height:1.3;font-weight:600">列表项名称</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Body · 28rpx · 400</div>
|
||
<div class="type-sample" style="font-size:16px;line-height:1.6;font-weight:400">正文内容，行高保持舒适阅读节奏。</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Caption · 24rpx · 400</div>
|
||
<div class="type-sample" style="font-size:14px;line-height:1.4;font-weight:400">说明文字与辅助信息</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">Micro · 20rpx · 500</div>
|
||
<div class="type-sample" style="font-size:12px;line-height:1.2;font-weight:500">标签 / 角标 / 时间</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="space-radius">
|
||
<div class="grid grid-2">
|
||
<div class="panel">
|
||
<div class="panel-title">间距梯度</div>
|
||
<div class="space-row"><span class="space-label">8rpx</span><span class="space-bar" style="width:4px"></span></div>
|
||
<div class="space-row"><span class="space-label">16rpx</span><span class="space-bar" style="width:8px"></span></div>
|
||
<div class="space-row"><span class="space-label">24rpx</span><span class="space-bar" style="width:12px"></span></div>
|
||
<div class="space-row"><span class="space-label">32rpx</span><span class="space-bar" style="width:16px"></span></div>
|
||
<div class="space-row"><span class="space-label">48rpx</span><span class="space-bar" style="width:24px"></span></div>
|
||
<div class="space-row"><span class="space-label">64rpx</span><span class="space-bar" style="width:32px"></span></div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">圆角 Token</div>
|
||
<div class="radius-grid">
|
||
<div class="radius-item">
|
||
<div class="radius-shape" style="border-radius:0"></div>
|
||
<div class="radius-label">0</div>
|
||
</div>
|
||
<div class="radius-item">
|
||
<div class="radius-shape" style="border-radius:8px"></div>
|
||
<div class="radius-label">16rpx 输入框</div>
|
||
</div>
|
||
<div class="radius-item">
|
||
<div class="radius-shape" style="border-radius:12px"></div>
|
||
<div class="radius-label">24rpx 卡片</div>
|
||
</div>
|
||
<div class="radius-item">
|
||
<div class="radius-shape" style="border-radius:16px"></div>
|
||
<div class="radius-label">32rpx 弹层</div>
|
||
</div>
|
||
<div class="radius-item">
|
||
<div class="radius-shape" style="border-radius:999px"></div>
|
||
<div class="radius-label">按钮胶囊</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="shadow-glass">
|
||
<div class="grid grid-2">
|
||
<div class="panel">
|
||
<div class="panel-title">阴影</div>
|
||
<div class="card" style="box-shadow:var(--shadow-card);margin-bottom:12px">
|
||
<div class="card-title">卡片阴影</div>
|
||
<div class="card-desc">低饱和、低扩散，只表达层级。</div>
|
||
</div>
|
||
<div class="card" style="box-shadow:var(--shadow-elevated)">
|
||
<div class="card-title">浮层阴影</div>
|
||
<div class="card-desc">用于弹窗、吸顶与底部操作区。</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-title">毛玻璃</div>
|
||
<div class="glass-preview">
|
||
<div class="glass-overlay">
|
||
<strong>半透明浮层</strong>
|
||
<span>backdrop-filter: blur(24rpx)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="components">
|
||
<div class="section-head">
|
||
<h2 class="section-title">组件样例</h2>
|
||
<span class="section-note">尺寸、状态与交互按规范落地</span>
|
||
</div>
|
||
|
||
<div class="grid grid-3">
|
||
<div class="panel">
|
||
<div class="panel-title">按钮</div>
|
||
<div class="component-row">
|
||
<button class="btn btn-lg btn-primary" type="button">主按钮</button>
|
||
<button class="btn btn-lg btn-secondary" type="button">次按钮</button>
|
||
<button class="btn btn-lg btn-ghost" type="button">幽灵</button>
|
||
</div>
|
||
<div class="component-row">
|
||
<button class="btn btn-md btn-primary" type="button">中等</button>
|
||
<button class="btn btn-md btn-danger" type="button">危险操作</button>
|
||
<button class="btn btn-md btn-secondary" type="button" disabled>禁用</button>
|
||
</div>
|
||
<div class="component-row">
|
||
<button class="btn btn-sm btn-primary" type="button">
|
||
<span class="spinner" style="width:13px;height:13px"></span>
|
||
加载中
|
||
</button>
|
||
<button class="btn btn-sm btn-ghost" type="button">小尺寸</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">卡片</div>
|
||
<div class="card" style="margin-bottom:12px">
|
||
<div class="card-title">Surface Card</div>
|
||
<div class="card-desc">默认内容容器，边线与轻投影。</div>
|
||
</div>
|
||
<div class="media-card">
|
||
<div class="media-card-image"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">Media Card</div>
|
||
<div class="media-card-desc">图片使用 aspect-ratio，宽度固定不跳动。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">表单</div>
|
||
<label class="field">
|
||
<span class="field-label">默认输入</span>
|
||
<input class="input" value="暖白内容" placeholder="请输入">
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">聚焦状态</span>
|
||
<input class="input" placeholder="输入 8 位验证码" value="382 912" style="border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-soft)">
|
||
</label>
|
||
<label class="field">
|
||
<span class="field-label">错误状态</span>
|
||
<input class="input input-error" value="137">
|
||
<span class="field-error">请输入完整手机号</span>
|
||
</label>
|
||
<label class="field" style="margin-bottom:0">
|
||
<span class="field-label">多行输入</span>
|
||
<textarea class="input" placeholder="补充说明"></textarea>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-2" style="margin-top:16px">
|
||
<div class="panel">
|
||
<div class="panel-title">列表行</div>
|
||
<div class="list-row">
|
||
<span class="list-icon"><span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-4.6-9.3-9A5.4 5.4 0 0 1 12 6.4 5.4 5.4 0 0 1 21.3 12C19 16.4 12 21 12 21Z"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">订单提醒</div>
|
||
<div class="list-sub">你有 2 条新消息</div>
|
||
</div>
|
||
<span class="icon" style="width:16px;height:16px;color:var(--text-muted)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></span>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="list-icon"><span class="icon" style="width:22px;height:22px;color:var(--accent-secondary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 2v4"/><path d="M16 2v4"/><path d="M3 8h18"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">设计档期</div>
|
||
<div class="list-sub">3 月 18 日 14:00</div>
|
||
</div>
|
||
<span class="tag tag-blue">已预约</span>
|
||
</div>
|
||
<div class="list-row" style="border-bottom:0">
|
||
<span class="list-icon"><span class="icon" style="width:22px;height:22px;color:var(--success)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m9 11 3 3L22 4"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">已完成</div>
|
||
<div class="list-sub">已交付源文件</div>
|
||
</div>
|
||
<span class="tag tag-success">成功</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">标签与徽标</div>
|
||
<div class="component-row">
|
||
<span class="tag tag-accent">主色标签</span>
|
||
<span class="tag tag-blue">地址</span>
|
||
<span class="tag tag-success">成功</span>
|
||
<span class="tag tag-warning">待处理</span>
|
||
<span class="tag tag-danger">需要确认</span>
|
||
</div>
|
||
<div class="component-row">
|
||
<button class="btn btn-md btn-secondary" type="button">
|
||
通知
|
||
<span class="badge">12</span>
|
||
</button>
|
||
<button class="btn btn-md btn-ghost" type="button">
|
||
草稿
|
||
<span class="badge" style="background:var(--accent-secondary)">3</span>
|
||
</button>
|
||
</div>
|
||
<div class="panel-title" style="margin:18px 0 12px">Tabs 与分段</div>
|
||
<div class="tabset" id="segmented-demo">
|
||
<button class="tab is-active" type="button">推荐</button>
|
||
<button class="tab" type="button">新品</button>
|
||
<button class="tab" type="button">热销</button>
|
||
</div>
|
||
<div class="tabs-line" id="tabline-demo" style="margin-top:20px">
|
||
<button class="tab is-active" type="button">全部</button>
|
||
<button class="tab" type="button">待付款</button>
|
||
<button class="tab" type="button">待发货</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-2" style="margin-top:16px">
|
||
<div class="panel">
|
||
<div class="panel-title">步进器与滑块</div>
|
||
<div class="stepper" style="margin-bottom:24px">
|
||
<button class="step-btn" type="button" id="step-minus" aria-label="减少">−</button>
|
||
<span class="step-value" id="step-value">1</span>
|
||
<button class="step-btn" type="button" id="step-plus" aria-label="增加">+</button>
|
||
</div>
|
||
<div class="slider-wrap">
|
||
<input class="range-input" type="range" min="0" max="100" value="72" id="range-input">
|
||
<span class="slider-value" id="range-value">72%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">空状态与反馈</div>
|
||
<div class="empty-state">
|
||
<div class="empty-icon">
|
||
<span class="icon" style="width:24px;height:24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h18"/><path d="M7 7v13h10V7"/><path d="M8 3h8"/></svg></span>
|
||
</div>
|
||
<div class="empty-title">暂无设计任务</div>
|
||
<div class="empty-desc">创建第一个任务，把想法变成可预览的方案。</div>
|
||
<button class="btn btn-md btn-primary" type="button" id="toast-trigger">创建任务</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-2" style="margin-top:16px">
|
||
<div class="panel">
|
||
<div class="panel-title">骨架屏</div>
|
||
<div class="list-row">
|
||
<span class="skeleton-circle"></span>
|
||
<div class="list-main">
|
||
<div class="skeleton-line" style="width:68%"></div>
|
||
<div class="skeleton-line" style="width:42%;margin-top:8px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="skeleton-circle"></span>
|
||
<div class="list-main">
|
||
<div class="skeleton-line" style="width:56%"></div>
|
||
<div class="skeleton-line" style="width:34%;margin-top:8px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-title">自定义导航与 TabBar</div>
|
||
<div class="mini-nav">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%"><span class="icon" style="width:17px;height:17px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span></span>
|
||
<span class="mini-nav-title">作品详情</span>
|
||
<span class="mini-nav-spacer"></span>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin-top:12px">
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="page-examples">
|
||
<div class="section-head">
|
||
<h2 class="section-title">完整页面排版示例</h2>
|
||
<span class="section-note">全部 17 个页面按微信真实结构复现</span>
|
||
</div>
|
||
<div class="mock-section" style="margin-top:40px">Tab 主页面</div>
|
||
<div class="grid grid-3">
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar scroll-away">
|
||
<div class="mock-status"><span>9:41</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header" style="justify-content:flex-start">
|
||
<span class="mock-title">智绘微刻</span>
|
||
</div>
|
||
</div>
|
||
<div class="searchbox" style="margin-top:12px">
|
||
<span class="icon" style="width:15px;height:15px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg></span>
|
||
<span>搜索定制品类：笔记本、杯垫、书灯...</span>
|
||
</div>
|
||
<div class="mock-section">定制成品展示</div>
|
||
<div class="hero-block" style="height:176px;border-radius:var(--radius-md);background:linear-gradient(150deg,#3b2e26 0%,#211a15 78%)">
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>毕业纪念笔记本</strong>
|
||
<span>全班名字组成校徽</span>
|
||
</div>
|
||
</div>
|
||
<div class="mock-section">热门品类</div>
|
||
<div class="home-grid">
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(145deg, rgba(217,108,106,.42), rgba(108,123,219,.16)), #e4c3b4"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">微雕笔记本</div>
|
||
<div class="media-card-desc">¥12 起</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(205deg, rgba(108,123,219,.38), rgba(217,108,106,.2)), #d6cbb5"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">铜质杯垫</div>
|
||
<div class="media-card-desc">¥25 起</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(155deg, rgba(217,169,98,.42), rgba(79,164,119,.2)), #cfc3b2"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">竹制笔盒</div>
|
||
<div class="media-card-desc">¥75 起</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(120deg, rgba(79,164,119,.3), rgba(108,123,219,.22)), #d9c8bb"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">书本型灯</div>
|
||
<div class="media-card-desc">¥45 起</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-section">为你推荐</div>
|
||
<div class="home-grid">
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(140deg, rgba(217,108,106,.46), rgba(108,123,219,.18)), #d9c1b6"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">毕业纪念册</div>
|
||
<div class="media-card-desc">¥45 起</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(210deg, rgba(108,123,219,.4), rgba(217,108,106,.18)), #d8c4b8"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">情侣微雕</div>
|
||
<div class="media-card-desc">¥25 起</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(160deg, rgba(217,169,98,.42), rgba(79,164,119,.2)), #cfc0b2"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">企业定制</div>
|
||
<div class="media-card-desc">批量更优惠</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(120deg, rgba(79,164,119,.34), rgba(108,123,219,.2)), #d8c7bc"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">词云纪念</div>
|
||
<div class="media-card-desc">¥19 起</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin:0 12px 12px">
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>10:05</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header" style="flex-direction:column;align-items:center;gap:2px;justify-content:center">
|
||
<span class="mock-title">智绘精选</span>
|
||
<span style="font-size:11px;color:var(--text-secondary)">激光微雕定制好物</span>
|
||
</div>
|
||
</div>
|
||
<div class="home-grid">
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(145deg, rgba(217,108,106,.4), rgba(108,123,219,.16)), #2a2218"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">微雕笔记本（小）</div>
|
||
<div class="media-card-desc">¥12</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(205deg, rgba(108,123,219,.34), rgba(217,108,106,.16)), #2e251c"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">微雕笔记本（大）</div>
|
||
<div class="media-card-desc">¥45</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(155deg, rgba(217,169,98,.4), rgba(79,164,119,.16)), #2a2018"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">铜质杯垫</div>
|
||
<div class="media-card-desc">¥25</div>
|
||
</div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-image" style="background:
|
||
linear-gradient(120deg, rgba(79,164,119,.3), rgba(108,123,219,.2)), #241d17"></div>
|
||
<div class="media-card-body">
|
||
<div class="media-card-title">竹制笔盒</div>
|
||
<div class="media-card-desc">¥75</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin:0 12px 12px">
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>11:18</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">我的设计清单</span>
|
||
<span style="font-size:13px;color:var(--accent-secondary);width:32px;text-align:center">管理</span>
|
||
</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<button class="chip is-active" type="button">全部</button>
|
||
<button class="chip" type="button">待设计</button>
|
||
<button class="chip" type="button">设计中</button>
|
||
<button class="chip" type="button">已下单</button>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;gap:12px;align-items:center">
|
||
<div class="media-card-image" style="width:48px;height:48px;border-radius:10px;flex-shrink:0;background:linear-gradient(145deg, rgba(217,108,106,.4), rgba(108,123,219,.16)), #e4c3b4"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;gap:8px">
|
||
<span style="font-size:14px;font-weight:700">微雕笔记本（小）</span>
|
||
<span class="tag tag-blue">设计中</span>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text-secondary);margin-top:4px">数量：1 件 | 单价：¥12</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;margin-top:12px">
|
||
<button class="btn btn-sm btn-primary" type="button">继续设计</button>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;gap:12px;align-items:center">
|
||
<div class="media-card-image" style="width:48px;height:48px;border-radius:10px;flex-shrink:0;background:linear-gradient(205deg, rgba(108,123,219,.36), rgba(217,108,106,.18)), #d6cbb5"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;gap:8px">
|
||
<span style="font-size:14px;font-weight:700">铜质杯垫</span>
|
||
<span class="tag tag-success">已下单</span>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text-secondary);margin-top:4px">数量：2 件 | 单价：¥25</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;margin-top:12px">
|
||
<button class="btn btn-sm btn-secondary" type="button">查看订单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin:0 12px 12px">
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>12:02</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span style="width:32px"></span>
|
||
<span class="mock-title" style="flex:1;text-align:center">我的</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;display:flex;align-items:center;gap:12px;padding:16px">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:var(--bg-muted);display:grid;place-items:center;color:var(--text-secondary)">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
</div>
|
||
<div style="flex:1">
|
||
<div style="font-size:16px;font-weight:800">点击登录</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">授权微信，开启专属定制</div>
|
||
</div>
|
||
<span style="font-size:16px;color:var(--text-muted)">›</span>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:18px 8px">
|
||
<div style="display:flex">
|
||
<div style="flex:1;text-align:center">
|
||
<span class="icon" style="width:22px;height:22px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;color:var(--accent-primary);margin-top:4px">0</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">待设计</div>
|
||
</div>
|
||
<div style="flex:1;text-align:center">
|
||
<span class="icon" style="width:22px;height:22px;color:var(--warning)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z"/><path d="M16 14h.01"/><path d="M16 3H6a2 2 0 0 0-2 2v2h16V5a2 2 0 0 0-2-2Z"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;color:var(--warning);margin-top:4px">0</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">待付款</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;margin-top:18px">
|
||
<div style="flex:1;text-align:center">
|
||
<span class="icon" style="width:22px;height:22px;color:var(--accent-secondary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;color:var(--accent-secondary);margin-top:4px">0</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">待发货</div>
|
||
</div>
|
||
<div style="flex:1;text-align:center">
|
||
<span class="icon" style="width:22px;height:22px;color:var(--success)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 17h4V5H2v12h3"/><path d="M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h1"/><circle cx="7.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;color:var(--success);margin-top:4px">0</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">待收货</div>
|
||
</div>
|
||
<div style="flex:1;text-align:center">
|
||
<span class="icon" style="width:22px;height:22px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;color:var(--accent-primary);margin-top:4px">0</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">已完成</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="home-grid" style="margin-top:12px">
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span><div class="media-card-title" style="margin-top:8px">我的设计</div></div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--accent-secondary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a10 10 0 0 0-9.95 9h19.9A10 10 0 0 0 12 2Z"/><path d="M12 22a10 10 0 0 0 9.95-9H2.05A10 10 0 0 0 12 22Z"/></svg></span><div class="media-card-title" style="margin-top:8px">词云生成</div></div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--success)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg></span><div class="media-card-title" style="margin-top:8px">收货地址</div></div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--warning)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z"/></svg></span><div class="media-card-title" style="margin-top:8px">联系客服</div></div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--accent-secondary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg></span><div class="media-card-title" style="margin-top:8px">使用帮助</div></div>
|
||
</div>
|
||
<div class="media-card" style="text-align:center">
|
||
<div class="media-card-body" style="padding:16px 10px"><span class="icon" style="width:24px;height:24px;color:var(--text-secondary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg></span><div class="media-card-title" style="margin-top:8px">设置</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:16px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;gap:10px">
|
||
<div>
|
||
<div style="font-size:15px;font-weight:800">企业批量定制</div>
|
||
<div style="font-size:11px;color:var(--text-secondary);margin-top:4px">年会礼品、入职纪念、团建伴手礼</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-primary" type="button">立即咨询</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin:0 12px 12px">
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock-section" style="margin-top:40px">商品与定制流程</div>
|
||
<div class="grid grid-3">
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>10:24</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<button class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</button>
|
||
<span class="mock-title" style="flex:1;text-align:center">商品详情</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-block" style="height:190px;border-radius:var(--radius-md);background:linear-gradient(160deg,#3d2f28 0%,#201a16 80%)">
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>微雕笔记本</strong>
|
||
<span>高清晰 CO2 激光微雕 · 永不褪色</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="price-line" style="justify-content:space-between;align-items:flex-end;display:flex">
|
||
<div>
|
||
<div class="detail-title">微雕笔记本（小）</div>
|
||
<div class="detail-desc" style="margin-top:4px">便携随行，记录点滴</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<span class="price">¥12.00</span>
|
||
<div style="font-size:11px;color:var(--text-muted);text-decoration:line-through">¥18.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="spec-row"><span class="spec-key">单价</span><span class="spec-value">¥12.00</span></div>
|
||
<div class="spec-row"><span class="spec-key">工期</span><span class="spec-value">3-5 个工作日</span></div>
|
||
<div class="spec-row"><span class="spec-key">尺寸</span><span class="spec-value">105 × 148mm</span></div>
|
||
<div class="spec-row" style="border-bottom:0"><span class="spec-key">定制工艺</span><span class="spec-value">激光微雕</span></div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="mock-section" style="margin:0 0 8px">商品介绍</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);line-height:1.7">精选优质纸张，封面采用高档 PU 材质，内页可定制横线、方格或空白版式。</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<div style="flex:0 0 auto;margin-right:10px">
|
||
<div style="font-size:11px;color:var(--text-secondary)">起价</div>
|
||
<div class="price" style="font-size:17px">¥12</div>
|
||
</div>
|
||
<button class="btn btn-md btn-secondary" type="button" style="flex:1">加入清单</button>
|
||
<button class="btn btn-md btn-primary" type="button" style="flex:1">立即下单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="hero-block" style="height:220px;border-radius:var(--radius-md);background:linear-gradient(160deg,#65534a 0%,#221b16 80%)">
|
||
<div class="hero-top">
|
||
<button class="hero-round" type="button" aria-label="返回">
|
||
<span class="icon" style="width:15px;height:15px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</button>
|
||
<span style="color:var(--bg-page);font-size:11px;font-weight:600">10:05</span>
|
||
</div>
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>微雕笔记本（小）</strong>
|
||
<span>掌心间的专属印记 · 激光微雕 · 三色内页可选</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="mock-section" style="margin:0 0 8px">设计理念</div>
|
||
<div style="font-size:13px;color:var(--text-secondary);line-height:1.7">灵感源自手账文化中对书写仪式感的追求。激光微雕在 PU 封面留下专属印记。</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="spec-row"><span class="spec-key">尺寸</span><span class="spec-value">105 × 148mm（A6）</span></div>
|
||
<div class="spec-row"><span class="spec-key">页数</span><span class="spec-value">120张 / 240页</span></div>
|
||
<div class="spec-row" style="border-bottom:0"><span class="spec-key">雕刻工艺</span><span class="spec-value">CO2 激光微雕</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>10:20</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">设计工作台</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<button class="chip is-active" type="button">1 选品类</button>
|
||
<button class="chip" type="button">2 加元素</button>
|
||
<button class="chip" type="button">3 预览</button>
|
||
</div>
|
||
<div class="hero-block" style="height:176px;border-radius:var(--radius-md);margin-top:12px;background:linear-gradient(150deg,#2e2722 0%,#191512 80%)">
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>设计画布</strong>
|
||
<span>拖入图片或文字开始定制</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;display:flex;align-items:center;gap:10px;justify-content:space-between">
|
||
<span style="font-size:13px;font-weight:600">已添加元素</span>
|
||
<span class="tag tag-accent">+ 添加图片</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<button class="btn btn-md btn-secondary" type="button" style="flex:1">预览</button>
|
||
<button class="btn btn-md btn-primary" type="button" style="flex:1">下一步</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>10:31</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">贴纸编辑</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-block" style="height:176px;border-radius:var(--radius-md);background:linear-gradient(150deg,#59423c 0%,#241e1a 80%)">
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>贴纸预览</strong>
|
||
<span>亮度、色相、对比度实时生效</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="slider-wrap" style="padding:8px 0"><span style="width:56px;font-size:13px;color:var(--text-secondary)">亮度</span><div style="flex:1;height:4px;border-radius:999px;background:var(--border-strong)"><div style="width:60%;height:100%;border-radius:999px;background:var(--accent-primary)"></div></div><span class="slider-value">+12</span></div>
|
||
<div class="slider-wrap" style="padding:8px 0"><span style="width:56px;font-size:13px;color:var(--text-secondary)">色相</span><div style="flex:1;height:4px;border-radius:999px;background:var(--border-strong)"><div style="width:34%;height:100%;border-radius:999px;background:var(--accent-secondary)"></div></div><span class="slider-value">18°</span></div>
|
||
<div class="slider-wrap" style="padding:8px 0"><span style="width:56px;font-size:13px;color:var(--text-secondary)">对比度</span><div style="flex:1;height:4px;border-radius:999px;background:var(--border-strong)"><div style="width:74%;height:100%;border-radius:999px;background:var(--accent-primary)"></div></div><span class="slider-value">+28</span></div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<button class="btn btn-lg btn-primary" type="button" style="width:100%">保存贴纸</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>10:42</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">设计效果确认</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-block" style="height:170px;border-radius:var(--radius-md);background:linear-gradient(160deg,#4d3d34 0%,#211a15 80%)">
|
||
<div class="glass-overlay" style="left:14px;right:14px;bottom:14px">
|
||
<strong>定制效果预览</strong>
|
||
<span>确认后将进入下单流程</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div class="spec-row"><span class="spec-key">商品</span><span class="spec-value">微雕笔记本（小）</span></div>
|
||
<div class="spec-row"><span class="spec-key">数量</span><span class="spec-value">1 件</span></div>
|
||
<div class="spec-row"><span class="spec-key">单价</span><span class="spec-value">¥12.00</span></div>
|
||
<div class="spec-row" style="border-bottom:0"><span class="spec-key">总价</span><span class="price" style="font-size:16px">¥12.00</span></div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||
<span style="font-size:13px;color:var(--text-secondary)">收货地址</span>
|
||
<span style="font-size:13px;color:var(--accent-secondary)">更改</span>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:13px;font-weight:600">李微 · 138****6688</div>
|
||
<div style="font-size:12px;color:var(--text-secondary)">浙江省杭州市西湖区文三路 128 号</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<button class="btn btn-md btn-secondary" type="button" style="flex:1">返回修改</button>
|
||
<button class="btn btn-md btn-primary" type="button" style="flex:1">确认下单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock-section" style="margin-top:40px">订单与个人</div>
|
||
<div class="grid grid-3">
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>16:02</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span style="width:32px"></span>
|
||
<span class="mock-title" style="flex:1;text-align:center">我的订单</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<button class="chip is-active" type="button">全部</button>
|
||
<button class="chip" type="button">待付款</button>
|
||
<button class="chip" type="button">待发货</button>
|
||
<button class="chip" type="button">待收货</button>
|
||
<button class="chip" type="button">已完成</button>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||
<span style="font-size:11px;color:var(--text-secondary)">2026-08-06</span>
|
||
<span class="tag tag-accent">待付款</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;align-items:center">
|
||
<div class="media-card-image" style="width:56px;height:56px;border-radius:10px;flex-shrink:0;background:linear-gradient(145deg, rgba(217,108,106,.38), rgba(108,123,219,.18)), #e4c3b4"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:14px;font-weight:700;letter-spacing:0">微雕笔记本（小）</div>
|
||
<div style="font-size:11px;color:var(--text-secondary);letter-spacing:0">数量：1 件 | 单号 20260806</div>
|
||
</div>
|
||
<span class="price" style="font-size:15px">¥12.00</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px">
|
||
<button class="btn btn-sm btn-secondary" type="button">详情</button>
|
||
<button class="btn btn-sm btn-primary" type="button">立即付款</button>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
|
||
<span style="font-size:11px;color:var(--text-secondary)">2026-08-04</span>
|
||
<span class="tag tag-blue">待发货</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;align-items:center">
|
||
<div class="media-card-image" style="width:56px;height:56px;border-radius:10px;flex-shrink:0;background:linear-gradient(205deg, rgba(108,123,219,.36), rgba(217,108,106,.2)), #d6cbb5"></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:14px;font-weight:700;letter-spacing:0">铜质杯垫</div>
|
||
<div style="font-size:11px;color:var(--text-secondary);letter-spacing:0">数量：2 件 | 单号 20260731</div>
|
||
</div>
|
||
<span class="price" style="font-size:15px">¥50.00</span>
|
||
</div>
|
||
<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px">
|
||
<button class="btn btn-sm btn-secondary" type="button">详情</button>
|
||
<button class="btn btn-sm btn-secondary" type="button">催发货</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-tabbar" style="margin:0 12px 12px">
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg></span>
|
||
首页
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="M3.5 7.5 12 12l8.5-4.5"/><path d="M12 22V12"/></svg></span>
|
||
商品
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
设计清单
|
||
</button>
|
||
<button class="mini-tab is-active" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>
|
||
订单
|
||
</button>
|
||
<button class="mini-tab" type="button">
|
||
<span class="icon" style="width:22px;height:22px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
我的
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>14:16</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">订单详情</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:16px;text-align:center">
|
||
<div style="font-size:17px;font-weight:800">待发货</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin-top:4px">商品正在打包中，即将发货</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
|
||
<span style="font-size:13px;font-weight:700">物流信息</span>
|
||
<span style="font-size:11px;color:var(--text-muted)">单号 SF1234567890</span>
|
||
</div>
|
||
<div class="spec-row"><span class="spec-key">运输中</span><span class="spec-value" style="font-weight:500">2024-01-15 14:30</span></div>
|
||
<div class="spec-row"><span class="spec-key">已发货</span><span class="spec-value" style="font-weight:500">2024-01-15 09:00</span></div>
|
||
<div class="spec-row" style="border-bottom:0"><span class="spec-key">已下单</span><span class="spec-value" style="font-weight:500">2024-01-14 20:15</span></div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;display:flex;align-items:center;gap:12px">
|
||
<div class="media-card-image" style="width:48px;height:48px;border-radius:10px;flex-shrink:0;background:linear-gradient(145deg, rgba(217,108,106,.38), rgba(108,123,219,.16)), #e4c3b4"></div>
|
||
<div style="flex:1">
|
||
<div style="font-size:14px;font-weight:700">微雕笔记本（小）</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">A6 横线款</div>
|
||
</div>
|
||
<span class="price" style="font-size:15px">¥12.00</span>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||
<span style="font-size:13px;font-weight:700">收货地址</span>
|
||
<span style="font-size:12px;color:var(--accent-secondary)">更改</span>
|
||
</div>
|
||
<div style="font-size:13px;font-weight:600">李微 · 138****6688</div>
|
||
<div style="font-size:12px;color:var(--text-secondary)">浙江省杭州市西湖区文三路 128 号</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>15:08</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">收货地址</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-size:14px;font-weight:700">李微</span>
|
||
<span style="font-size:12px;color:var(--text-secondary)">138****6688</span>
|
||
<span class="tag tag-accent">默认</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin-top:6px">浙江省杭州市西湖区文三路 128 号</div>
|
||
<div style="display:flex;gap:18px;margin-top:14px">
|
||
<span style="font-size:12px;color:var(--accent-secondary)">编辑</span>
|
||
<span style="font-size:12px;color:var(--text-secondary)">复制</span>
|
||
<span style="font-size:12px;color:var(--danger)">删除</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:14px">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-size:14px;font-weight:700">陈墨</span>
|
||
<span style="font-size:12px;color:var(--text-secondary)">159****2233</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin-top:6px">江苏省南京市鼓楼区中山北路 66 号</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<button class="btn btn-lg btn-primary" type="button" style="width:100%">新增收货地址</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>15:26</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">设置</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;display:flex;align-items:center;gap:12px;padding:16px">
|
||
<div style="width:44px;height:44px;border-radius:50%;background:var(--bg-muted);display:grid;place-items:center;color:var(--text-secondary)">
|
||
<span class="icon" style="width:20px;height:20px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21s1-5 8-5 8 5 8 5"/></svg></span>
|
||
</div>
|
||
<div style="flex:1">
|
||
<div style="font-size:15px;font-weight:700">微信用户</div>
|
||
<div style="font-size:11px;color:var(--text-secondary)">ID: a1b2c3d4</div>
|
||
</div>
|
||
<span style="font-size:16px;color:var(--text-muted)">›</span>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="font-size:12px;color:var(--text-secondary);margin-bottom:10px">外观</div>
|
||
<div class="chip-row">
|
||
<button class="chip is-active" type="button">浅色模式</button>
|
||
<button class="chip" type="button">深色模式</button>
|
||
<button class="chip" type="button">跟随系统</button>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:6px 14px">
|
||
<div class="list-row"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">个人信息</div></div><span style="color:var(--text-muted)">›</span></div>
|
||
<div class="list-row"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">账号管理</div></div><span style="color:var(--text-muted)">›</span></div>
|
||
<div class="list-row"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">定制协议</div></div><span style="color:var(--text-muted)">›</span></div>
|
||
<div class="list-row" style="border-bottom:0"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">关于我们</div></div><span style="color:var(--text-muted)">›</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>16:40</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">定制协议</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top:10px;font-size:18px;font-weight:800">定制协议</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="font-size:14px;font-weight:700;margin-bottom:6px">一、用户权责</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);line-height:1.7">用户确认提交的设计内容不侵犯第三方知识产权，定制商品一经确认下单即进入生产流程。</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="font-size:14px;font-weight:700;margin-bottom:6px">二、隐私保护</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);line-height:1.7">头像与昵称仅用于提升服务体验，不与第三方分享。</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="font-size:14px;font-weight:700;margin-bottom:6px">三、售后说明</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);line-height:1.7">签收后如有质量问题，7 天内联系客服免费重做或退款。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mock-section" style="margin-top:40px">服务与工具</div>
|
||
<div class="grid grid-3">
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>17:05</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">联系客服</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:20px;text-align:center">
|
||
<span class="icon" style="width:26px;height:26px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;margin-top:8px">智绘微刻客服中心</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin:4px 0 14px">工作日 09:00 - 18:00 在线</div>
|
||
<button class="btn btn-md btn-primary" type="button">发起咨询</button>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:6px 14px">
|
||
<div class="list-row"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L8.1 10a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">客服电话</div><div class="list-sub">400-XXX-XXXX</div></div></div>
|
||
<div class="list-row"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">客服微信</div><div class="list-sub">smart_engraving（点击复制）</div></div></div>
|
||
<div class="list-row" style="border-bottom:0"><span class="list-icon"><span class="icon" style="width:18px;height:18px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6L22 7"/></svg></span></span><div class="list-main"><div class="list-title" style="font-size:14px">商务邮箱</div><div class="list-sub">biz@smart-engraving.com</div></div></div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px">
|
||
<div style="font-size:14px;font-weight:700;margin-bottom:4px">Q: 定制周期需要多久？</div>
|
||
<div style="font-size:12px;color:var(--text-secondary)">通常下单后 3-5 个工作日内发货。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>17:22</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">AI词云生成</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<button class="chip is-active" type="button">1 上传底图</button>
|
||
<button class="chip" type="button">2 输入名单</button>
|
||
<button class="chip" type="button">3 生成预览</button>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:24px;text-align:center">
|
||
<span class="icon" style="width:30px;height:30px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22a10 10 0 1 1 10-10c0 2.21-1.79 4-4 4h-2a2 2 0 0 0-2 2c0 .53.2 1 .54 1.36C14.78 21.4 13.5 22 12 22Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;margin-top:10px">点击上传底图</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin:4px 0 16px">支持照片、Logo、图案等</div>
|
||
<button class="btn btn-md btn-primary" type="button">选择图片</button>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 16px 16px">
|
||
<div class="bottom-action">
|
||
<button class="btn btn-lg btn-primary" type="button" style="width:100%">下一步：输入名单</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-frame">
|
||
<div class="phone-screen">
|
||
<div class="phone-content" style="padding:0 16px">
|
||
<div class="mock-topbar">
|
||
<div class="mock-status"><span>18:01</span><span class="mini-capsule"><i></i><i></i><i></i></span></div>
|
||
<div class="mock-header">
|
||
<span class="icon-button" style="width:32px;height:32px;min-width:32px;border-radius:50%" type="button" aria-label="返回">
|
||
<span class="icon" style="width:16px;height:16px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></svg></span>
|
||
</span>
|
||
<span class="mock-title" style="flex:1;text-align:center">本地用户数据库</span>
|
||
<span style="width:32px"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-card" style="margin-top:12px;padding:24px;text-align:center">
|
||
<span class="icon" style="width:30px;height:30px;color:var(--warning)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span>
|
||
<div style="font-size:16px;font-weight:800;margin-top:10px">管理员验证</div>
|
||
<div style="font-size:12px;color:var(--text-secondary);margin:4px 0 16px">请输入密码以访问用户数据库</div>
|
||
<input class="input" style="text-align:center" type="password" placeholder="输入密码">
|
||
<div style="height:12px"></div>
|
||
<button class="btn btn-md btn-primary" type="button" style="width:100%">进入数据库</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
</section>
|
||
</main>
|
||
|
||
<div class="demo-float" style="position:fixed;right:20px;bottom:20px;z-index:90;display:flex;gap:8px">
|
||
<button class="btn btn-md btn-secondary" type="button" id="modal-trigger">打开弹窗</button>
|
||
<button class="btn btn-md btn-primary" type="button" id="sheet-trigger">底部弹层</button>
|
||
</div>
|
||
|
||
<div class="modal-layer" id="modal-layer">
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
|
||
<h3 class="modal-title" id="modal-title">清空草稿？</h3>
|
||
<p class="modal-text">将移除本页面未保存的修改，此操作不可撤销。</p>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-md btn-secondary" type="button" data-close="modal-layer">取消</button>
|
||
<button class="btn btn-md btn-danger" type="button" data-close="modal-layer">确认清空</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sheet-layer" id="sheet-layer">
|
||
<div class="sheet" role="dialog" aria-modal="true">
|
||
<div class="sheet-handle"></div>
|
||
<h3 class="modal-title" id="sheet-title" style="margin-bottom:16px">选择导出尺寸</h3>
|
||
<div class="list-row" style="cursor:pointer">
|
||
<span class="list-icon"><span class="icon" style="width:20px;height:20px;color:var(--accent-primary)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">1080 × 1080 方图</div>
|
||
<div class="list-sub">适合社媒分享</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="list-icon"><span class="icon" style="width:20px;height:20px;color:var(--text-muted)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">1242 × 1660 海报</div>
|
||
<div class="list-sub">适合打印与长图</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" style="border-bottom:0">
|
||
<span class="list-icon"><span class="icon" style="width:20px;height:20px;color:var(--text-muted)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg></span></span>
|
||
<div class="list-main">
|
||
<div class="list-title">PNG + SVG 源文件</div>
|
||
<div class="list-sub">包含透明底版本</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-lg btn-primary" type="button" data-close="sheet-layer" style="width:100%;margin-top:8px">确认导出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast">
|
||
<span class="icon" style="width:16px;height:16px;color:#67c58e"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span>
|
||
<span>任务已创建</span>
|
||
</div>
|
||
<script>
|
||
(function () {
|
||
var root = document.documentElement;
|
||
var saved = localStorage.getItem('ds-theme');
|
||
if (saved === 'dark') {
|
||
root.classList.add('theme-dark');
|
||
}
|
||
var themeBtn = document.getElementById('theme-toggle');
|
||
themeBtn.addEventListener('click', function () {
|
||
root.classList.toggle('theme-dark');
|
||
localStorage.setItem('ds-theme', root.classList.contains('theme-dark') ? 'dark' : 'light');
|
||
});
|
||
|
||
document.querySelectorAll('.tabset, .tabs-line').forEach(function (group) {
|
||
group.addEventListener('click', function (e) {
|
||
var tab = e.target.closest('.tab');
|
||
if (!tab) return;
|
||
group.querySelectorAll('.tab').forEach(function (item) {
|
||
item.classList.remove('is-active');
|
||
});
|
||
tab.classList.add('is-active');
|
||
});
|
||
});
|
||
|
||
var stepValue = document.getElementById('step-value');
|
||
var step = parseInt(stepValue.textContent, 10) || 1;
|
||
document.getElementById('step-minus').addEventListener('click', function () {
|
||
step = Math.max(1, step - 1);
|
||
stepValue.textContent = step;
|
||
});
|
||
document.getElementById('step-plus').addEventListener('click', function () {
|
||
step = Math.min(99, step + 1);
|
||
stepValue.textContent = step;
|
||
});
|
||
|
||
var range = document.getElementById('range-input');
|
||
var rangeValue = document.getElementById('range-value');
|
||
function updateRange() {
|
||
rangeValue.textContent = range.value + '%';
|
||
}
|
||
range.addEventListener('input', updateRange);
|
||
updateRange();
|
||
|
||
var toast = document.getElementById('toast');
|
||
var toastTimer;
|
||
document.getElementById('toast-trigger').addEventListener('click', function () {
|
||
toast.classList.add('is-open');
|
||
clearTimeout(toastTimer);
|
||
toastTimer = setTimeout(function () {
|
||
toast.classList.remove('is-open');
|
||
}, 2200);
|
||
});
|
||
|
||
function openLayer(id) {
|
||
document.getElementById(id).classList.add('is-open');
|
||
}
|
||
function closeLayer(id) {
|
||
document.getElementById(id).classList.remove('is-open');
|
||
}
|
||
document.getElementById('modal-trigger').addEventListener('click', function () {
|
||
openLayer('modal-layer');
|
||
});
|
||
document.getElementById('sheet-trigger').addEventListener('click', function () {
|
||
openLayer('sheet-layer');
|
||
});
|
||
document.querySelectorAll('[data-close]').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
closeLayer(btn.getAttribute('data-close'));
|
||
});
|
||
});
|
||
['modal-layer', 'sheet-layer'].forEach(function (id) {
|
||
var layer = document.getElementById(id);
|
||
layer.addEventListener('click', function (e) {
|
||
if (e.target === layer) {
|
||
closeLayer(id);
|
||
}
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|