1402 lines
43 KiB
HTML
1402 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>安心验 · 用户端 UI 探索 V1</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--ink-strong: #191815;
|
||
--ink: #2e2a24;
|
||
--ink-soft: #666055;
|
||
--paper: #f5f1e8;
|
||
--paper-strong: #efe7d9;
|
||
--card: rgba(255, 252, 246, 0.92);
|
||
--line: rgba(114, 101, 77, 0.14);
|
||
--gold: #d0aa3d;
|
||
--gold-deep: #a8801b;
|
||
--gold-soft: rgba(208, 170, 61, 0.18);
|
||
--success: #305d4f;
|
||
--warning: #9a5c24;
|
||
--shadow-xl: 0 36px 96px rgba(52, 39, 17, 0.14);
|
||
--shadow-lg: 0 18px 50px rgba(40, 29, 13, 0.12);
|
||
--radius-xl: 30px;
|
||
--radius-lg: 24px;
|
||
--radius-md: 18px;
|
||
--radius-pill: 999px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
margin: 0;
|
||
min-height: 100%;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(208, 170, 61, 0.16), transparent 25%),
|
||
radial-gradient(circle at bottom right, rgba(25, 24, 21, 0.08), transparent 22%),
|
||
linear-gradient(180deg, #faf7f1 0%, #f3ede1 100%);
|
||
color: var(--ink);
|
||
font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
body {
|
||
padding: 42px;
|
||
}
|
||
|
||
#root {
|
||
max-width: 1680px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.prototype-shell {
|
||
display: grid;
|
||
gap: 28px;
|
||
}
|
||
|
||
.intro-panel {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 0.8fr;
|
||
gap: 24px;
|
||
padding: 30px;
|
||
border-radius: 34px;
|
||
background: rgba(255, 253, 248, 0.78);
|
||
border: 1px solid rgba(194, 176, 142, 0.28);
|
||
box-shadow: var(--shadow-lg);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.intro-main {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.intro-kicker {
|
||
display: inline-flex;
|
||
width: fit-content;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 16px;
|
||
border-radius: var(--radius-pill);
|
||
background: rgba(255, 255, 255, 0.68);
|
||
color: var(--ink-soft);
|
||
font-size: 13px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.intro-title {
|
||
margin: 0;
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 58px;
|
||
line-height: 0.94;
|
||
color: var(--ink-strong);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.intro-desc {
|
||
margin: 0;
|
||
color: var(--ink-soft);
|
||
font-size: 18px;
|
||
line-height: 1.9;
|
||
max-width: 760px;
|
||
}
|
||
|
||
.intro-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.intro-tag {
|
||
padding: 10px 15px;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--gold-soft);
|
||
color: var(--gold-deep);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.intro-note {
|
||
padding: 22px;
|
||
border-radius: 28px;
|
||
background:
|
||
linear-gradient(160deg, rgba(28, 27, 24, 0.98) 0%, rgba(50, 41, 28, 0.98) 100%);
|
||
color: rgba(255, 248, 234, 0.92);
|
||
display: grid;
|
||
gap: 18px;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.brand-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 124px;
|
||
padding: 16px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 255, 255, 0.88);
|
||
}
|
||
|
||
.brand-card img {
|
||
max-width: 100%;
|
||
max-height: 92px;
|
||
object-fit: contain;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.note-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #f4d992;
|
||
}
|
||
|
||
.note-list {
|
||
display: grid;
|
||
gap: 12px;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: rgba(255, 248, 234, 0.74);
|
||
}
|
||
|
||
.device-overview {
|
||
display: grid;
|
||
gap: 22px;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.device-column {
|
||
display: grid;
|
||
gap: 12px;
|
||
justify-items: center;
|
||
}
|
||
|
||
.device-label {
|
||
font-size: 13px;
|
||
color: var(--ink-soft);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.screen-root {
|
||
min-height: 100%;
|
||
padding: 18px 18px 26px;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(208, 170, 61, 0.14), transparent 28%),
|
||
linear-gradient(180deg, #fbf8f1 0%, #f3ecdf 100%);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.screen-root--dark {
|
||
background:
|
||
radial-gradient(circle at top right, rgba(208, 170, 61, 0.24), transparent 28%),
|
||
linear-gradient(180deg, #181614 0%, #1f1b16 100%);
|
||
color: rgba(255, 250, 238, 0.96);
|
||
}
|
||
|
||
.mini-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 12px;
|
||
border-radius: var(--radius-pill);
|
||
background: rgba(255, 255, 255, 0.74);
|
||
color: var(--ink-soft);
|
||
font-size: 11px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.screen-root--dark .mini-kicker {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
color: rgba(255, 248, 234, 0.76);
|
||
}
|
||
|
||
.hero-card {
|
||
position: relative;
|
||
margin-top: 16px;
|
||
padding: 22px;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(circle at top right, rgba(236, 206, 123, 0.22), transparent 36%),
|
||
linear-gradient(160deg, #191815 0%, #27221c 100%);
|
||
box-shadow: 0 18px 34px rgba(26, 22, 18, 0.22);
|
||
color: #fff8ea;
|
||
}
|
||
|
||
.hero-card h2,
|
||
.hero-card h3,
|
||
.section-title,
|
||
.stat-value,
|
||
.report-title,
|
||
.order-number {
|
||
font-family: "Cormorant Garamond", serif;
|
||
}
|
||
|
||
.hero-card h2 {
|
||
margin: 14px 0 0;
|
||
font-size: 42px;
|
||
line-height: 0.98;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.hero-card p {
|
||
margin: 12px 0 0;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: rgba(255, 247, 231, 0.78);
|
||
}
|
||
|
||
.hero-actions {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.primary-button,
|
||
.secondary-button,
|
||
.micro-pill {
|
||
border-radius: var(--radius-pill);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.primary-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 46px;
|
||
background: linear-gradient(135deg, #d8b453 0%, #b88718 100%);
|
||
color: #17130d;
|
||
font-size: 14px;
|
||
box-shadow: 0 12px 24px rgba(184, 135, 24, 0.28);
|
||
}
|
||
|
||
.secondary-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-width: 116px;
|
||
min-height: 46px;
|
||
padding: 0 16px;
|
||
border: 1px solid rgba(255, 248, 234, 0.14);
|
||
background: rgba(255, 255, 255, 0.09);
|
||
color: rgba(255, 248, 234, 0.82);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.metric-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.metric-box {
|
||
padding: 14px 12px;
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 30px;
|
||
line-height: 1;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stat-label {
|
||
margin-top: 8px;
|
||
color: rgba(255, 247, 231, 0.68);
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.section-card {
|
||
margin-top: 14px;
|
||
padding: 16px;
|
||
border-radius: 24px;
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 10px 24px rgba(39, 30, 18, 0.05);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.section-card--soft {
|
||
background: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 242, 231, 0.98) 100%);
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0;
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
color: var(--ink-strong);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.section-subtitle {
|
||
margin-top: 8px;
|
||
color: var(--ink-soft);
|
||
font-size: 12px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.stack {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.service-option {
|
||
padding: 16px;
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.66);
|
||
border: 1px solid rgba(115, 101, 77, 0.1);
|
||
}
|
||
|
||
.service-option--selected {
|
||
background:
|
||
linear-gradient(150deg, rgba(31, 28, 24, 0.98) 0%, rgba(55, 44, 24, 0.98) 100%);
|
||
border-color: rgba(208, 170, 61, 0.4);
|
||
color: rgba(255, 247, 231, 0.92);
|
||
box-shadow: 0 18px 34px rgba(41, 30, 12, 0.2);
|
||
}
|
||
|
||
.service-tag,
|
||
.status-chip,
|
||
.detail-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 28px;
|
||
padding: 0 10px;
|
||
border-radius: var(--radius-pill);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.service-tag {
|
||
background: rgba(208, 170, 61, 0.14);
|
||
color: var(--gold-deep);
|
||
}
|
||
|
||
.service-option--selected .service-tag {
|
||
background: rgba(255, 248, 234, 0.14);
|
||
color: #f3d27d;
|
||
}
|
||
|
||
.service-name {
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.service-desc {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
line-height: 1.75;
|
||
color: inherit;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.service-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
font-size: 11px;
|
||
color: inherit;
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.tab-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
padding: 8px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 255, 255, 0.58);
|
||
border: 1px solid rgba(115, 101, 77, 0.08);
|
||
}
|
||
|
||
.tab-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 40px;
|
||
border-radius: 16px;
|
||
color: var(--ink-soft);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab-item--active {
|
||
background: linear-gradient(180deg, #f0dfb2 0%, #d3ae4b 100%);
|
||
color: #1e1a14;
|
||
box-shadow: 0 8px 16px rgba(184, 135, 24, 0.18);
|
||
}
|
||
|
||
.list-card {
|
||
padding: 16px;
|
||
border-radius: 20px;
|
||
background: rgba(255, 255, 255, 0.66);
|
||
border: 1px solid rgba(115, 101, 77, 0.08);
|
||
box-shadow: 0 8px 20px rgba(55, 44, 24, 0.05);
|
||
}
|
||
|
||
.order-number {
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
color: var(--ink-strong);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.order-sub {
|
||
margin-top: 6px;
|
||
color: var(--ink-soft);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.list-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.list-title {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
color: var(--ink-strong);
|
||
}
|
||
|
||
.list-desc {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.status-chip--warning {
|
||
background: rgba(154, 92, 36, 0.12);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.status-chip--success {
|
||
background: rgba(48, 93, 79, 0.12);
|
||
color: var(--success);
|
||
}
|
||
|
||
.status-chip--info {
|
||
background: rgba(208, 170, 61, 0.14);
|
||
color: var(--gold-deep);
|
||
}
|
||
|
||
.visual-grid {
|
||
display: grid;
|
||
gap: 10px;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.visual-cell {
|
||
min-height: 68px;
|
||
border-radius: 16px;
|
||
background:
|
||
linear-gradient(155deg, rgba(25, 24, 21, 0.86) 0%, rgba(57, 47, 29, 0.82) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 10px;
|
||
color: rgba(255, 248, 234, 0.78);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.visual-cell::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: auto -18px -18px auto;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: rgba(208, 170, 61, 0.22);
|
||
filter: blur(4px);
|
||
}
|
||
|
||
.report-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
border-radius: 16px;
|
||
background: rgba(208, 170, 61, 0.12);
|
||
color: var(--gold-deep);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
width: fit-content;
|
||
}
|
||
|
||
.report-title {
|
||
margin: 14px 0 0;
|
||
font-size: 38px;
|
||
line-height: 0.98;
|
||
color: var(--ink-strong);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.report-result {
|
||
margin-top: 16px;
|
||
padding: 16px;
|
||
border-radius: 22px;
|
||
background: linear-gradient(180deg, #fff 0%, #f5f0e5 100%);
|
||
border: 1px solid rgba(208, 170, 61, 0.18);
|
||
}
|
||
|
||
.result-label {
|
||
color: var(--ink-soft);
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.result-value {
|
||
margin-top: 6px;
|
||
font-size: 26px;
|
||
color: var(--success);
|
||
font-weight: 800;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.result-desc {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: var(--ink-soft);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.kv-table {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.kv-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.kv-label {
|
||
color: var(--ink-soft);
|
||
}
|
||
|
||
.kv-value {
|
||
color: var(--ink-strong);
|
||
text-align: right;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.qrcode-box {
|
||
display: grid;
|
||
grid-template-columns: 92px 1fr;
|
||
gap: 14px;
|
||
margin-top: 16px;
|
||
padding: 14px;
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.74);
|
||
border: 1px solid rgba(115, 101, 77, 0.08);
|
||
}
|
||
|
||
.qrcode-art {
|
||
width: 92px;
|
||
height: 92px;
|
||
border-radius: 18px;
|
||
background:
|
||
linear-gradient(90deg, rgba(25, 24, 21, 0.95) 8%, transparent 8%) 0 0 / 16px 16px,
|
||
linear-gradient(rgba(25, 24, 21, 0.95) 8%, transparent 8%) 0 0 / 16px 16px,
|
||
linear-gradient(180deg, #fff 0%, #f5f2eb 100%);
|
||
border: 6px solid #fff;
|
||
box-shadow: inset 0 0 0 1px rgba(25, 24, 21, 0.08);
|
||
}
|
||
|
||
.timeline {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 7px;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--gold);
|
||
box-shadow: 0 0 0 4px rgba(208, 170, 61, 0.12);
|
||
}
|
||
|
||
.timeline-title {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--ink-strong);
|
||
}
|
||
|
||
.timeline-desc {
|
||
margin-top: 4px;
|
||
font-size: 11px;
|
||
color: var(--ink-soft);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.message-card {
|
||
padding: 14px;
|
||
border-radius: 20px;
|
||
background: rgba(255, 255, 255, 0.66);
|
||
border: 1px solid rgba(115, 101, 77, 0.08);
|
||
}
|
||
|
||
.message-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.message-title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--ink-strong);
|
||
}
|
||
|
||
.message-time {
|
||
color: var(--ink-soft);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.message-body {
|
||
margin-top: 8px;
|
||
color: var(--ink-soft);
|
||
font-size: 12px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.bottom-nav {
|
||
position: absolute;
|
||
left: 14px;
|
||
right: 14px;
|
||
bottom: 4px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
border-radius: 26px;
|
||
background: rgba(255, 255, 255, 0.88);
|
||
border: 1px solid rgba(115, 101, 77, 0.08);
|
||
box-shadow: 0 8px 18px rgba(38, 28, 11, 0.08);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 34px;
|
||
border-radius: 14px;
|
||
color: rgba(102, 96, 85, 0.92);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.nav-item--active {
|
||
color: var(--ink-strong);
|
||
background: linear-gradient(135deg, #d8b453 0%, #b88718 100%);
|
||
box-shadow: 0 8px 14px rgba(184, 135, 24, 0.24);
|
||
}
|
||
|
||
.shield-mark {
|
||
width: 18px;
|
||
height: 20px;
|
||
background: linear-gradient(180deg, #e1bd58 0%, #ba8b1c 100%);
|
||
clip-path: polygon(50% 0%, 88% 14%, 88% 55%, 50% 100%, 12% 55%, 12% 14%);
|
||
position: relative;
|
||
}
|
||
|
||
.shield-mark::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 26%;
|
||
transform: translateX(-50%);
|
||
width: 7px;
|
||
height: 9px;
|
||
border: 2px solid rgba(255,255,255,0.92);
|
||
border-top: none;
|
||
border-radius: 0 0 7px 7px;
|
||
}
|
||
|
||
@media (max-width: 1380px) {
|
||
.device-overview {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.intro-panel {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 980px) {
|
||
body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.device-overview {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.intro-title {
|
||
font-size: 42px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
|
||
<script type="text/babel">
|
||
/*
|
||
Huashu-Design · Junior pass assumptions
|
||
1. 这是一版设计评审用高保真总览稿，不直接替换现有业务页面。
|
||
2. 先看整体视觉语言和关键屏一致性，再决定是否进入真实页面改造。
|
||
3. 本稿优先展示品牌调性、履约秩序感、报告凭证感，图片与商品素材使用诚实 placeholder。
|
||
4. 输出形态选择 overview 平铺，而不是单流程 click demo，便于一次看清 6 个核心屏。
|
||
*/
|
||
|
||
const iosFrameStyles = {
|
||
wrapper: {
|
||
display: "inline-block",
|
||
padding: 12,
|
||
background: "#000",
|
||
borderRadius: 60,
|
||
boxShadow: "0 0 0 2px #1f2937, 0 20px 60px rgba(0,0,0,0.3)",
|
||
position: "relative",
|
||
},
|
||
screen: {
|
||
position: "relative",
|
||
borderRadius: 48,
|
||
overflow: "hidden",
|
||
background: "#fff",
|
||
},
|
||
statusBar: {
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: 54,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
padding: "0 32px 0 32px",
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
fontFamily: '-apple-system, "SF Pro Text", sans-serif',
|
||
zIndex: 20,
|
||
pointerEvents: "none",
|
||
},
|
||
dynamicIsland: {
|
||
position: "absolute",
|
||
top: 12,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
width: 124,
|
||
height: 36,
|
||
background: "#000",
|
||
borderRadius: 999,
|
||
zIndex: 30,
|
||
},
|
||
statusIcons: {
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
},
|
||
signalIcon: {
|
||
display: "flex",
|
||
alignItems: "flex-end",
|
||
gap: 2,
|
||
height: 12,
|
||
},
|
||
signalBar: {
|
||
width: 3,
|
||
background: "currentColor",
|
||
borderRadius: 1,
|
||
},
|
||
batteryIcon: {
|
||
width: 26,
|
||
height: 12,
|
||
border: "1.5px solid currentColor",
|
||
borderRadius: 3,
|
||
padding: 1,
|
||
position: "relative",
|
||
opacity: 0.8,
|
||
},
|
||
batteryCap: {
|
||
position: "absolute",
|
||
top: 3,
|
||
right: -3,
|
||
width: 2,
|
||
height: 6,
|
||
background: "currentColor",
|
||
borderRadius: "0 1px 1px 0",
|
||
},
|
||
content: {
|
||
position: "absolute",
|
||
top: 54,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 34,
|
||
overflow: "auto",
|
||
},
|
||
homeIndicator: {
|
||
position: "absolute",
|
||
bottom: 10,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
width: 140,
|
||
height: 5,
|
||
background: "rgba(0,0,0,0.3)",
|
||
borderRadius: 999,
|
||
zIndex: 10,
|
||
},
|
||
homeIndicatorDark: {
|
||
background: "rgba(255,255,255,0.5)",
|
||
},
|
||
};
|
||
|
||
function IosFrame({
|
||
children,
|
||
width = 393,
|
||
height = 852,
|
||
time = "9:41",
|
||
battery = 85,
|
||
darkMode = false,
|
||
showStatusBar = true,
|
||
showDynamicIsland = true,
|
||
showHomeIndicator = true,
|
||
}) {
|
||
const textColor = darkMode ? "#fff" : "#000";
|
||
|
||
return (
|
||
<div style={iosFrameStyles.wrapper}>
|
||
<div
|
||
style={{
|
||
...iosFrameStyles.screen,
|
||
width,
|
||
height,
|
||
background: darkMode ? "#000" : "#fff",
|
||
}}
|
||
>
|
||
{showStatusBar && (
|
||
<div style={{ ...iosFrameStyles.statusBar, color: textColor }}>
|
||
<span>{time}</span>
|
||
<div style={iosFrameStyles.statusIcons}>
|
||
<div style={iosFrameStyles.signalIcon}>
|
||
<div style={{ ...iosFrameStyles.signalBar, height: 4 }} />
|
||
<div style={{ ...iosFrameStyles.signalBar, height: 6 }} />
|
||
<div style={{ ...iosFrameStyles.signalBar, height: 9 }} />
|
||
<div style={{ ...iosFrameStyles.signalBar, height: 11 }} />
|
||
</div>
|
||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" style={{ color: textColor }}>
|
||
<path d="M8 11.5a1 1 0 100-2 1 1 0 000 2z" fill="currentColor" />
|
||
<path d="M3 7.5a7 7 0 0110 0" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" />
|
||
<path d="M1 4.5a11 11 0 0114 0" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" opacity="0.7" />
|
||
</svg>
|
||
<div style={iosFrameStyles.batteryIcon}>
|
||
<div
|
||
style={{
|
||
width: `${battery}%`,
|
||
height: "100%",
|
||
background: "currentColor",
|
||
borderRadius: 1,
|
||
opacity: 0.9,
|
||
}}
|
||
/>
|
||
<div style={iosFrameStyles.batteryCap} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showDynamicIsland && <div style={iosFrameStyles.dynamicIsland} />}
|
||
|
||
<div style={iosFrameStyles.content}>{children}</div>
|
||
|
||
{showHomeIndicator && (
|
||
<div
|
||
style={{
|
||
...iosFrameStyles.homeIndicator,
|
||
...(darkMode ? iosFrameStyles.homeIndicatorDark : {}),
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function NavBar({ active }) {
|
||
const items = ["首页", "订单", "报告", "我的"];
|
||
return (
|
||
<div className="bottom-nav">
|
||
{items.map((item) => (
|
||
<div key={item} className={`nav-item ${active === item ? "nav-item--active" : ""}`}>
|
||
<div>{item}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function HomeScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="mini-kicker">
|
||
<div className="shield-mark" />
|
||
<span>安心验 · 鉴证收藏级服务</span>
|
||
</div>
|
||
|
||
<div className="hero-card">
|
||
<div className="service-tag">独立第三方 · 黑金识别</div>
|
||
<h2>把「信任」做成<br />可验证的体验</h2>
|
||
<p>不是普通电商式下单，而是让用户感到“这是一家能出具凭证、能解释流程、能给出结果责任感”的鉴证服务。</p>
|
||
|
||
<div className="hero-actions">
|
||
<div className="primary-button">立即发起鉴定</div>
|
||
<div className="secondary-button">服务说明</div>
|
||
</div>
|
||
|
||
<div className="metric-row">
|
||
<div className="metric-box">
|
||
<div className="stat-value">48h</div>
|
||
<div className="stat-label">标准结果时效</div>
|
||
</div>
|
||
<div className="metric-box">
|
||
<div className="stat-value">100%</div>
|
||
<div className="stat-label">正式报告可验真</div>
|
||
</div>
|
||
<div className="metric-box">
|
||
<div className="stat-value">12.8k</div>
|
||
<div className="stat-label">累计鉴定申请</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-card section-card--soft">
|
||
<div className="section-title">选择鉴定服务</div>
|
||
<div className="section-subtitle">这版首页把“服务入口”做成收藏卡片感，而不是普通列表。视觉上更像凭证和服务券。</div>
|
||
<div className="stack" style={{ marginTop: 14 }}>
|
||
<div className="service-option service-option--selected">
|
||
<div className="service-tag">标准服务</div>
|
||
<div className="service-name">实物鉴定</div>
|
||
<div className="service-desc">适合正式结果交付场景，强调清晰流程、寄送履约与报告可验真。</div>
|
||
<div className="service-meta">
|
||
<span>预计 48 小时</span>
|
||
<span>进入</span>
|
||
</div>
|
||
</div>
|
||
<div className="service-option">
|
||
<div className="service-tag">更高规格机构</div>
|
||
<div className="service-name">中检鉴定</div>
|
||
<div className="service-desc">同流程，但机构规格更高，价格与时效也会相应变化。</div>
|
||
<div className="service-meta">
|
||
<span>机构差异化交付</span>
|
||
<span>进入</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<NavBar active="首页" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ServiceScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="mini-kicker">步骤 1 / 6 · 选择鉴定服务</div>
|
||
<div className="section-card section-card--soft" style={{ marginTop: 16 }}>
|
||
<div className="section-title">先选服务，再进入商品信息</div>
|
||
<div className="section-subtitle">服务页不再只是参数比较，而是让用户理解“出具机构差异”这件事。</div>
|
||
</div>
|
||
|
||
<div className="stack" style={{ marginTop: 16 }}>
|
||
<div className="service-option service-option--selected">
|
||
<div className="service-tag">当前推荐</div>
|
||
<div className="service-name">实物鉴定</div>
|
||
<div className="service-desc">安心验标准服务，适合正式结果交付。强调速度、稳妥与流程透明。</div>
|
||
<div className="service-meta">
|
||
<span>¥99 起</span>
|
||
<span>预计 48 小时</span>
|
||
</div>
|
||
</div>
|
||
<div className="service-option">
|
||
<div className="service-tag">更高规格</div>
|
||
<div className="service-name">中检鉴定</div>
|
||
<div className="service-desc">更高规格合作机构出具鉴定结果，更适合高要求使用场景。</div>
|
||
<div className="service-meta">
|
||
<span>¥199 起</span>
|
||
<span>时效略长</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-card">
|
||
<div className="section-title">对比说明</div>
|
||
<div className="kv-table">
|
||
<div className="kv-row"><span className="kv-label">流程</span><span className="kv-value">保持一致</span></div>
|
||
<div className="kv-row"><span className="kv-label">出具机构</span><span className="kv-value">安心验 / 中检机构</span></div>
|
||
<div className="kv-row"><span className="kv-label">适合场景</span><span className="kv-value">标准交付 / 更高要求</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="primary-button" style={{ marginTop: 16 }}>下一步 · 进入商品信息</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OrdersScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="hero-card">
|
||
<div className="service-tag">订单履约</div>
|
||
<h3 style={{ margin: "12px 0 0", fontSize: 36, lineHeight: 1 }}>每一笔订单<br />都像在走一条履约轨道</h3>
|
||
<p>把订单看板从“列表”提升成“履约状态中心”，让用户第一眼知道现在需要做什么，而不是自己猜。</p>
|
||
<div className="metric-row">
|
||
<div className="metric-box">
|
||
<div className="stat-value">1</div>
|
||
<div className="stat-label">待补资料</div>
|
||
</div>
|
||
<div className="metric-box">
|
||
<div className="stat-value">2</div>
|
||
<div className="stat-label">进行中</div>
|
||
</div>
|
||
<div className="metric-box">
|
||
<div className="stat-value">3</div>
|
||
<div className="stat-label">已完成</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stack" style={{ marginTop: 16 }}>
|
||
<div className="list-card">
|
||
<div className="list-title-row">
|
||
<div>
|
||
<div className="list-title">Louis Vuitton Neverfull MM</div>
|
||
<div className="order-sub">AXY20260423******</div>
|
||
</div>
|
||
<div className="status-chip status-chip--warning">待补资料</div>
|
||
</div>
|
||
<div className="list-desc">鉴定师需要补充编码近照与五金细节，建议优先处理，避免订单继续停滞。</div>
|
||
</div>
|
||
<div className="list-card">
|
||
<div className="list-title-row">
|
||
<div>
|
||
<div className="list-title">Cartier Santos</div>
|
||
<div className="order-sub">AXY20260422******</div>
|
||
</div>
|
||
<div className="status-chip status-chip--info">进行中</div>
|
||
</div>
|
||
<div className="list-desc">商品已签收，当前进入专业判断与复核流程，后续节点会持续同步。</div>
|
||
</div>
|
||
<div className="list-card">
|
||
<div className="list-title-row">
|
||
<div>
|
||
<div className="list-title">Chanel CF 25</div>
|
||
<div className="order-sub">AXY20260421******</div>
|
||
</div>
|
||
<div className="status-chip status-chip--success">待寄回</div>
|
||
</div>
|
||
<div className="list-desc">正式报告已生成，平台将按已确认地址安排回寄，您可继续关注物流节点。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<NavBar active="订单" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OrderDetailScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="section-card section-card--soft">
|
||
<div className="status-chip status-chip--info">鉴定中心已收货</div>
|
||
<div className="section-title" style={{ marginTop: 12 }}>订单详情</div>
|
||
<div className="section-subtitle">这版详情页把“下一步”做成一张焦点卡，避免用户在大量信息里迷路。</div>
|
||
<div className="section-card" style={{ marginTop: 14, background: "rgba(25,24,21,0.96)", color: "#fff7e8", borderColor: "rgba(208,170,61,0.18)" }}>
|
||
<div style={{ color: "#f1d27e", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>当前建议动作</div>
|
||
<div style={{ marginTop: 8, fontSize: 18, fontWeight: 700 }}>等待专业鉴定与复核</div>
|
||
<div style={{ marginTop: 8, fontSize: 12, lineHeight: 1.8, color: "rgba(255,248,234,0.76)" }}>
|
||
商品已签收，后续如需补资料、生成报告或安排回寄，都会在本页和消息中心同步提醒。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-card">
|
||
<div className="section-title">商品与资料</div>
|
||
<div className="section-subtitle">把商品信息和资料回看拆成两个层级，不再互相打架。</div>
|
||
<div className="kv-table">
|
||
<div className="kv-row"><span className="kv-label">品类 / 品牌</span><span className="kv-value">奢侈品箱包 / Louis Vuitton</span></div>
|
||
<div className="kv-row"><span className="kv-label">型号 / 规格</span><span className="kv-value">Neverfull MM / 42</span></div>
|
||
<div className="kv-row"><span className="kv-label">购买渠道</span><span className="kv-value">代购</span></div>
|
||
<div className="kv-row"><span className="kv-label">使用情况</span><span className="kv-value">轻微使用痕迹</span></div>
|
||
</div>
|
||
<div className="visual-grid" style={{ marginTop: 14 }}>
|
||
<div className="visual-cell">正面整体图</div>
|
||
<div className="visual-cell">编码近照</div>
|
||
<div className="visual-cell">五金细节</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-card">
|
||
<div className="section-title">处理记录</div>
|
||
<div className="timeline">
|
||
<div className="timeline-item">
|
||
<div className="timeline-title">鉴定中心已收货</div>
|
||
<div className="timeline-desc">2026-04-23 15:39 · 包裹已完成签收，等待鉴定师开始处理。</div>
|
||
</div>
|
||
<div className="timeline-item">
|
||
<div className="timeline-title">用户已提交运单</div>
|
||
<div className="timeline-desc">顺丰速运 · 运单号 789456****</div>
|
||
</div>
|
||
<div className="timeline-item">
|
||
<div className="timeline-title">订单创建成功</div>
|
||
<div className="timeline-desc">AXY-APP-20260423-5448</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ReportScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="report-badge">正式结果凭证 · 可验真</div>
|
||
<div className="report-title">鉴定报告</div>
|
||
<div className="section-subtitle">报告页被做成“凭证感”更强的阅读体验，而不是普通信息列表。</div>
|
||
|
||
<div className="report-result">
|
||
<div className="result-label">鉴定结论</div>
|
||
<div className="result-value">正品</div>
|
||
<div className="result-desc">符合正品工艺特征，包身结构、五金细节与编码信息均与品牌标准一致。</div>
|
||
</div>
|
||
|
||
<div className="section-card">
|
||
<div className="section-title">商品摘要</div>
|
||
<div className="kv-table">
|
||
<div className="kv-row"><span className="kv-label">商品名称</span><span className="kv-value">Neverfull MM</span></div>
|
||
<div className="kv-row"><span className="kv-label">品类 / 品牌</span><span className="kv-value">箱包 / Louis Vuitton</span></div>
|
||
<div className="kv-row"><span className="kv-label">颜色 / 规格</span><span className="kv-value">白盘 / 42</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="qrcode-box">
|
||
<div className="qrcode-art" />
|
||
<div>
|
||
<div className="section-title" style={{ fontSize: 24 }}>报告凭证</div>
|
||
<div className="section-subtitle" style={{ marginTop: 6 }}>AXY-R-20260423-8841<br />支持扫码或编号验真</div>
|
||
<div className="primary-button" style={{ marginTop: 12, minHeight: 40 }}>去验真</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-card">
|
||
<div className="section-title">说明</div>
|
||
<div className="section-subtitle" style={{ marginTop: 10 }}>
|
||
本报告基于送检商品及当前提交资料出具。若商品状态或所附资料发生变化，报告结论可能不再适用。
|
||
</div>
|
||
</div>
|
||
|
||
<NavBar active="报告" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MessageScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="section-card section-card--soft">
|
||
<div className="section-title">服务提醒与处理进度</div>
|
||
<div className="section-subtitle">
|
||
这里集中展示订单流转、补资料、报告出具和工单回复等关键通知，减少用户在不同页面里来回找状态。
|
||
</div>
|
||
<div className="tab-strip">
|
||
<div className="tab-item tab-item--active">全部</div>
|
||
<div className="tab-item">订单</div>
|
||
<div className="tab-item">报告</div>
|
||
<div className="tab-item">工单</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="stack" style={{ marginTop: 16 }}>
|
||
<div className="message-card">
|
||
<div className="message-head">
|
||
<div className="message-title">报告已出具</div>
|
||
<div className="status-chip status-chip--success">报告</div>
|
||
</div>
|
||
<div className="message-body">您的正式报告已生成，可前往报告中心查看并完成验真。</div>
|
||
</div>
|
||
<div className="message-card">
|
||
<div className="message-head">
|
||
<div className="message-title">请补充鉴定资料</div>
|
||
<div className="status-chip status-chip--warning">补资料</div>
|
||
</div>
|
||
<div className="message-body">鉴定师需要您补充编码近照与五金细节图，以便继续完成判断。</div>
|
||
</div>
|
||
<div className="message-card">
|
||
<div className="message-head">
|
||
<div className="message-title">工单有新回复</div>
|
||
<div className="status-chip status-chip--info">工单</div>
|
||
</div>
|
||
<div className="message-body">客服已回复您的工单「验真结果咨询」，点击查看最新进展。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MineScreen() {
|
||
return (
|
||
<div className="screen-root">
|
||
<div className="hero-card">
|
||
<div className="service-tag">服务资产中心</div>
|
||
<h3 style={{ margin: "12px 0 0", fontSize: 36, lineHeight: 1 }}>我的安心验</h3>
|
||
<p>用一个更“资产中心”而不是“功能入口”的框架，统一收束订单、报告、地址、消息和设置。</p>
|
||
</div>
|
||
|
||
<div className="tab-strip" style={{ gridTemplateColumns: "repeat(2, minmax(0, 1fr))", marginTop: 16 }}>
|
||
<div className="tab-item tab-item--active">账号与服务</div>
|
||
<div className="tab-item">帮助与设置</div>
|
||
</div>
|
||
|
||
<div className="stack" style={{ marginTop: 16 }}>
|
||
<div className="list-card">
|
||
<div className="list-title">我的订单</div>
|
||
<div className="list-desc">查看当前进度、补图要求和寄回物流。</div>
|
||
</div>
|
||
<div className="list-card">
|
||
<div className="list-title">我的报告</div>
|
||
<div className="list-desc">查看正式结果、下载 PDF 并进入验真。</div>
|
||
</div>
|
||
<div className="list-card">
|
||
<div className="list-title">地址管理</div>
|
||
<div className="list-desc">维护寄送、收货和回寄地址，减少重复填写。</div>
|
||
</div>
|
||
<div className="list-card">
|
||
<div className="list-title">设置中心</div>
|
||
<div className="list-desc">账号安全、通知偏好、隐私说明统一维护。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<NavBar active="我的" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DeviceColumn({ label, children }) {
|
||
return (
|
||
<div className="device-column">
|
||
<div className="device-label">{label}</div>
|
||
<IosFrame>{children}</IosFrame>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<div className="prototype-shell">
|
||
<section className="intro-panel">
|
||
<div className="intro-main">
|
||
<div className="intro-kicker">
|
||
<span>Huashu-Design · User-App Hi-Fi Overview</span>
|
||
</div>
|
||
<h1 className="intro-title">安心验用户端 UI 方向稿<br />鉴证收藏级体验 V1</h1>
|
||
<p className="intro-desc">
|
||
这版不是去做一个“普通小程序首页”，而是把用户端整体重构成一种更像
|
||
「鉴定凭证服务」的产品气质：黑金作为识别，米白作为阅读底，秩序感和报告感作为核心体验锚点。
|
||
</p>
|
||
<div className="intro-tags">
|
||
<span className="intro-tag">方向：鉴证收藏级</span>
|
||
<span className="intro-tag">形态：Overview 平铺评审稿</span>
|
||
<span className="intro-tag">风格：温润纸感 + 炭黑结构 + 验证金</span>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="intro-note">
|
||
<div className="brand-card">
|
||
<img src="../logo.jpeg" alt="安心验品牌标识参考" />
|
||
</div>
|
||
<h3 className="note-title">本稿基于以下假设</h3>
|
||
<div className="note-list">
|
||
<div>1. 先看整体调性和关键屏一致性，不直接改线上页面。</div>
|
||
<div>2. 强化「鉴定结果凭证感」和「服务履约可信度」，弱化电商促销感。</div>
|
||
<div>3. 当前缺少真实商品图，因此资料图使用诚实 placeholder，不伪造品牌素材。</div>
|
||
<div>4. 如果方向对，再继续做第二轮：真实页面改造版或单流程可点击原型。</div>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section className="device-overview">
|
||
<DeviceColumn label="01 · 首页">
|
||
<HomeScreen />
|
||
</DeviceColumn>
|
||
<DeviceColumn label="02 · 发起鉴定">
|
||
<ServiceScreen />
|
||
</DeviceColumn>
|
||
<DeviceColumn label="03 · 订单中心">
|
||
<OrdersScreen />
|
||
</DeviceColumn>
|
||
<DeviceColumn label="04 · 订单详情">
|
||
<OrderDetailScreen />
|
||
</DeviceColumn>
|
||
<DeviceColumn label="05 · 报告详情">
|
||
<ReportScreen />
|
||
</DeviceColumn>
|
||
<DeviceColumn label="06 · 消息 / 我的">
|
||
<div className="stack" style={{ minHeight: "100%", paddingBottom: 18 }}>
|
||
<MessageScreen />
|
||
<MineScreen />
|
||
</div>
|
||
</DeviceColumn>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|