1001 lines
34 KiB
HTML
1001 lines
34 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>安心验 · 其他风格方向参考</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=IBM+Plex+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@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 {
|
||
--bg: #f6f1e8;
|
||
--ink: #1e1914;
|
||
--ink-soft: #73685a;
|
||
--line: rgba(110, 96, 78, 0.16);
|
||
--shadow: 0 24px 80px rgba(36, 28, 16, 0.12);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html, body {
|
||
margin: 0;
|
||
min-height: 100%;
|
||
background:
|
||
radial-gradient(circle at top left, rgba(214, 182, 115, 0.14), transparent 24%),
|
||
radial-gradient(circle at bottom right, rgba(23, 20, 18, 0.08), transparent 22%),
|
||
linear-gradient(180deg, #fbf8f2 0%, #f1eadf 100%);
|
||
color: var(--ink);
|
||
font-family: "IBM Plex Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
|
||
body { padding: 38px; }
|
||
#root { max-width: 1760px; margin: 0 auto; }
|
||
|
||
.page-shell {
|
||
display: grid;
|
||
gap: 26px;
|
||
}
|
||
|
||
.intro {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 0.85fr;
|
||
gap: 24px;
|
||
padding: 28px;
|
||
border-radius: 34px;
|
||
background: rgba(255, 253, 248, 0.8);
|
||
border: 1px solid rgba(193, 176, 147, 0.24);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.intro h1 {
|
||
margin: 14px 0 0;
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 56px;
|
||
line-height: 0.96;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.intro p {
|
||
margin: 14px 0 0;
|
||
font-size: 17px;
|
||
line-height: 1.85;
|
||
color: var(--ink-soft);
|
||
max-width: 760px;
|
||
}
|
||
|
||
.intro-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 16px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.72);
|
||
color: var(--ink-soft);
|
||
font-size: 13px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
width: fit-content;
|
||
}
|
||
|
||
.intro-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.intro-tag {
|
||
padding: 10px 14px;
|
||
border-radius: 999px;
|
||
background: rgba(214, 182, 115, 0.18);
|
||
color: #97721f;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.intro-side {
|
||
display: grid;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
border-radius: 28px;
|
||
background: linear-gradient(165deg, #1b1814 0%, #2b261f 100%);
|
||
color: rgba(255, 248, 234, 0.9);
|
||
}
|
||
|
||
.brand-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 118px;
|
||
border-radius: 22px;
|
||
background: rgba(255,255,255,0.88);
|
||
overflow: hidden;
|
||
padding: 12px;
|
||
}
|
||
|
||
.brand-box img {
|
||
max-width: 100%;
|
||
max-height: 90px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.side-title {
|
||
color: #efd184;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.side-copy {
|
||
color: rgba(255, 248, 234, 0.72);
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.direction-block {
|
||
padding: 28px;
|
||
border-radius: 34px;
|
||
background: rgba(255, 253, 248, 0.78);
|
||
border: 1px solid rgba(193, 176, 147, 0.22);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.direction-head {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.direction-title {
|
||
margin: 0;
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 44px;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.direction-sub {
|
||
margin-top: 10px;
|
||
color: var(--ink-soft);
|
||
font-size: 15px;
|
||
line-height: 1.85;
|
||
max-width: 760px;
|
||
}
|
||
|
||
.direction-badge {
|
||
padding: 10px 16px;
|
||
border-radius: 999px;
|
||
background: rgba(214, 182, 115, 0.18);
|
||
color: #8f6b1d;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.device-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 20px;
|
||
justify-items: center;
|
||
}
|
||
|
||
.device-label {
|
||
margin-bottom: 10px;
|
||
color: var(--ink-soft);
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
}
|
||
|
||
.device-wrap {
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.screen-base {
|
||
min-height: 100%;
|
||
padding: 18px 18px 26px;
|
||
color: #1f1915;
|
||
position: relative;
|
||
}
|
||
|
||
.screen-title {
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: rgba(108, 97, 84, 0.78);
|
||
}
|
||
|
||
.screen-heading {
|
||
margin: 14px 0 0;
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 36px;
|
||
line-height: 0.98;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.screen-copy {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
color: rgba(91, 83, 73, 0.88);
|
||
}
|
||
|
||
.text-nav {
|
||
position: absolute;
|
||
left: 14px;
|
||
right: 14px;
|
||
bottom: 4px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 6px;
|
||
padding: 10px 12px;
|
||
border-radius: 24px;
|
||
background: rgba(255,255,255,0.88);
|
||
border: 1px solid rgba(110, 96, 78, 0.08);
|
||
box-shadow: 0 10px 22px rgba(36,28,16,0.08);
|
||
}
|
||
|
||
.text-nav__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 34px;
|
||
border-radius: 14px;
|
||
color: rgba(108, 97, 84, 0.92);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.text-nav__item--active {
|
||
background: linear-gradient(135deg, #d8b453 0%, #b88718 100%);
|
||
color: #1d1811;
|
||
box-shadow: 0 8px 16px rgba(184, 135, 24, 0.2);
|
||
}
|
||
|
||
.archive-shell {
|
||
background:
|
||
linear-gradient(180deg, #f8f1e4 0%, #efe4d3 100%);
|
||
}
|
||
|
||
.archive-divider {
|
||
height: 1px;
|
||
margin: 18px 0 14px;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(78, 63, 42, 0.22) 22%, rgba(78, 63, 42, 0.22) 78%, transparent 100%);
|
||
}
|
||
|
||
.archive-card {
|
||
padding: 16px;
|
||
border-radius: 0;
|
||
background: rgba(255, 251, 244, 0.68);
|
||
border: 1px solid rgba(78, 63, 42, 0.12);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.archive-card + .archive-card {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.archive-card__eyebrow {
|
||
color: #8e6232;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.archive-card__title {
|
||
margin-top: 8px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.archive-card__desc {
|
||
margin-top: 6px;
|
||
color: rgba(81, 67, 51, 0.82);
|
||
font-size: 12px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.archive-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px 16px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.archive-kv {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
.archive-kv__label {
|
||
color: rgba(113, 97, 75, 0.72);
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.archive-kv__value {
|
||
color: #1b1712;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.archive-list-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
border-top: 1px solid rgba(78, 63, 42, 0.12);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.archive-list-line strong {
|
||
color: #1b1712;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.gallery-shell {
|
||
background:
|
||
radial-gradient(circle at top left, rgba(224, 197, 138, 0.24), transparent 30%),
|
||
linear-gradient(180deg, #fff9f2 0%, #f5eee7 100%);
|
||
}
|
||
|
||
.gallery-hero {
|
||
padding: 18px;
|
||
border-radius: 28px;
|
||
background:
|
||
linear-gradient(150deg, rgba(255,255,255,0.9) 0%, rgba(247, 239, 226, 0.88) 100%);
|
||
border: 1px solid rgba(194, 176, 147, 0.24);
|
||
box-shadow: 0 14px 34px rgba(66, 48, 20, 0.08);
|
||
}
|
||
|
||
.gallery-chip-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.gallery-chip {
|
||
padding: 8px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(214, 182, 115, 0.14);
|
||
color: #916716;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.gallery-card {
|
||
padding: 14px;
|
||
border-radius: 24px;
|
||
background: rgba(255,255,255,0.78);
|
||
border: 1px solid rgba(194, 176, 147, 0.22);
|
||
box-shadow: 0 12px 26px rgba(61, 47, 20, 0.06);
|
||
}
|
||
|
||
.gallery-metric-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.gallery-metric {
|
||
padding: 12px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(180deg, #fff 0%, #f8f1e6 100%);
|
||
text-align: center;
|
||
}
|
||
|
||
.gallery-metric strong {
|
||
display: block;
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
color: #1e1814;
|
||
}
|
||
|
||
.gallery-metric span {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: rgba(95, 83, 69, 0.82);
|
||
font-size: 11px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.gallery-action-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 10px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.gallery-primary {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 44px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, #d9b65d 0%, #bf8d24 100%);
|
||
color: #1b160f;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
box-shadow: 0 10px 22px rgba(191, 141, 36, 0.22);
|
||
}
|
||
|
||
.gallery-secondary {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 108px;
|
||
min-height: 44px;
|
||
padding: 0 16px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.72);
|
||
border: 1px solid rgba(194, 176, 147, 0.24);
|
||
color: rgba(85, 74, 61, 0.94);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.certificate-card {
|
||
margin-top: 14px;
|
||
padding: 16px;
|
||
border-radius: 26px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8f2ea 100%);
|
||
border: 1px solid rgba(194, 176, 147, 0.22);
|
||
}
|
||
|
||
.certificate-card__title {
|
||
font-family: "Cormorant Garamond", serif;
|
||
font-size: 34px;
|
||
line-height: 1;
|
||
color: #1e1814;
|
||
margin: 0;
|
||
}
|
||
|
||
.certificate-result {
|
||
margin-top: 14px;
|
||
padding: 14px;
|
||
border-radius: 18px;
|
||
background: rgba(61, 112, 81, 0.08);
|
||
}
|
||
|
||
.certificate-result strong {
|
||
display: block;
|
||
color: #2f634d;
|
||
font-size: 24px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.certificate-result span {
|
||
display: block;
|
||
margin-top: 6px;
|
||
color: rgba(88, 80, 71, 0.84);
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.badge-line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.badge {
|
||
padding: 8px 11px;
|
||
border-radius: 999px;
|
||
background: rgba(214, 182, 115, 0.14);
|
||
color: #8d6720;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@media (max-width: 1440px) {
|
||
.device-row {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.intro {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
body { padding: 20px; }
|
||
.device-row { grid-template-columns: 1fr; }
|
||
.intro h1 { font-size: 42px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
|
||
<script type="text/babel">
|
||
/*
|
||
Huashu-Design · Variations pass
|
||
用户反馈：
|
||
1. 继续给其他风格参考
|
||
2. 底部四个主按键不要带图标
|
||
|
||
因此本稿不再重复 V1，而是给两个差异化方向：
|
||
B. 档案册 / 信息建筑派
|
||
C. 珠宝盒 / 高级陈列派
|
||
*/
|
||
|
||
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,
|
||
},
|
||
};
|
||
|
||
function IosFrame({ children, width = 393, height = 852, time = "9:41", battery = 87 }) {
|
||
return (
|
||
<div style={iosFrameStyles.wrapper}>
|
||
<div style={{ ...iosFrameStyles.screen, width, height }}>
|
||
<div style={{ ...iosFrameStyles.statusBar, color: "#000" }}>
|
||
<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: "#000" }}>
|
||
<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 }} />
|
||
<div style={iosFrameStyles.batteryCap} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={iosFrameStyles.dynamicIsland} />
|
||
<div style={iosFrameStyles.content}>{children}</div>
|
||
<div style={iosFrameStyles.homeIndicator} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TextNav({ active }) {
|
||
const items = ["首页", "订单", "报告", "我的"];
|
||
return (
|
||
<div className="text-nav">
|
||
{items.map((item) => (
|
||
<div key={item} className={`text-nav__item ${item === active ? "text-nav__item--active" : ""}`}>
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ArchiveHome() {
|
||
return (
|
||
<div className="screen-base archive-shell">
|
||
<div className="screen-title">方向 B · 档案册式</div>
|
||
<h3 className="screen-heading" style={{ fontFamily: "'Noto Serif SC', serif", fontSize: 34 }}>安心验首页</h3>
|
||
<p className="screen-copy">像翻开一本机构档案册：首页更克制、更理性，用户感受到的是“专业判断”而不是营销推动。</p>
|
||
<div className="archive-divider" />
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">鉴证总览</div>
|
||
<div className="archive-card__title">让每一步都留痕，让每一份结果有据可查</div>
|
||
<div className="archive-card__desc">流程、寄送、补资料、报告与验真都被组织进一套秩序中，更像专业服务机构而不是商详页。</div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">服务入口</div>
|
||
<div className="archive-list-line"><strong>实物鉴定</strong><span>标准结果交付</span></div>
|
||
<div className="archive-list-line"><strong>中检鉴定</strong><span>更高规格机构</span></div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">机构摘要</div>
|
||
<div className="archive-grid">
|
||
<div className="archive-kv"><div className="archive-kv__label">累计申请</div><div className="archive-kv__value">12,800+</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">标准时效</div><div className="archive-kv__value">48h</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">报告验真</div><div className="archive-kv__value">100%</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">服务属性</div><div className="archive-kv__value">独立第三方</div></div>
|
||
</div>
|
||
</div>
|
||
<TextNav active="首页" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ArchiveOrder() {
|
||
return (
|
||
<div className="screen-base archive-shell">
|
||
<div className="screen-title">方向 B · 订单详情</div>
|
||
<h3 className="screen-heading" style={{ fontFamily: "'Noto Serif SC', serif", fontSize: 34 }}>订单详情</h3>
|
||
<p className="screen-copy">重点不是“漂亮卡片”，而是像案件档案一样把当前状态、资料和轨迹梳理清楚。</p>
|
||
<div className="archive-divider" />
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">当前状态</div>
|
||
<div className="archive-card__title">鉴定中心已收货</div>
|
||
<div className="archive-card__desc">商品已签收，后续如需补资料或正式报告生成，会同步至订单页与消息中心。</div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">商品摘要</div>
|
||
<div className="archive-grid">
|
||
<div className="archive-kv"><div className="archive-kv__label">品类 / 品牌</div><div className="archive-kv__value">箱包 / LV</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">型号 / 规格</div><div className="archive-kv__value">Neverfull MM / 42</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">购买渠道</div><div className="archive-kv__value">代购</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">使用情况</div><div className="archive-kv__value">轻微使用痕迹</div></div>
|
||
</div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">处理轨迹</div>
|
||
<div className="archive-list-line"><strong>2026-04-23 15:39</strong><span>鉴定中心已收货</span></div>
|
||
<div className="archive-list-line"><strong>2026-04-23 13:58</strong><span>用户已提交运单</span></div>
|
||
<div className="archive-list-line"><strong>2026-04-23 12:16</strong><span>订单创建成功</span></div>
|
||
</div>
|
||
<TextNav active="订单" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ArchiveReport() {
|
||
return (
|
||
<div className="screen-base archive-shell">
|
||
<div className="screen-title">方向 B · 报告详情</div>
|
||
<h3 className="screen-heading" style={{ fontFamily: "'Noto Serif SC', serif", fontSize: 34 }}>报告详情</h3>
|
||
<p className="screen-copy">报告页更像正式证书的数字镜像，强调阅读秩序、留白和凭证编号，而不是营销式大按钮。</p>
|
||
<div className="archive-divider" />
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">鉴定结论</div>
|
||
<div className="archive-card__title">正品</div>
|
||
<div className="archive-card__desc">符合正品工艺特征，包身结构、五金细节与编码信息均与品牌标准一致。</div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">凭证信息</div>
|
||
<div className="archive-grid">
|
||
<div className="archive-kv"><div className="archive-kv__label">报告编号</div><div className="archive-kv__value">AXY-R-20260423-8841</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">机构</div><div className="archive-kv__value">安心验</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">商品</div><div className="archive-kv__value">Neverfull MM</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">颜色 / 规格</div><div className="archive-kv__value">白盘 / 42</div></div>
|
||
</div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">说明</div>
|
||
<div className="archive-card__desc">本报告基于送检商品及当前提交资料出具。若商品状态或所附资料发生变化，报告结论可能不再适用。</div>
|
||
</div>
|
||
<TextNav active="报告" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ArchiveMessages() {
|
||
return (
|
||
<div className="screen-base archive-shell">
|
||
<div className="screen-title">方向 B · 消息中心</div>
|
||
<h3 className="screen-heading" style={{ fontFamily: "'Noto Serif SC', serif", fontSize: 34 }}>消息中心</h3>
|
||
<p className="screen-copy">消息页像一份机构通知簿，分类筛选与时间分组更克制，减少视觉噪音。</p>
|
||
<div className="archive-divider" />
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">筛选条件</div>
|
||
<div className="archive-list-line"><strong>全部</strong><span>订单 · 报告 · 工单</span></div>
|
||
</div>
|
||
<div className="archive-card">
|
||
<div className="archive-card__eyebrow">今天</div>
|
||
<div className="archive-list-line"><strong>报告已出具</strong><span>可进入报告中心查看并验真</span></div>
|
||
<div className="archive-list-line"><strong>请补充鉴定资料</strong><span>需补充编码近照与五金细节</span></div>
|
||
</div>
|
||
<TextNav active="我的" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GalleryHome() {
|
||
return (
|
||
<div className="screen-base gallery-shell">
|
||
<div className="gallery-hero">
|
||
<div className="screen-title">方向 C · 珠宝盒式</div>
|
||
<h3 className="screen-heading">安心验首页</h3>
|
||
<p className="screen-copy">把首页做得更像“高级服务陈列柜”：更轻盈、更有光泽、更偏消费奢品服务体验。</p>
|
||
<div className="gallery-chip-row">
|
||
<div className="gallery-chip">独立第三方</div>
|
||
<div className="gallery-chip">报告可验真</div>
|
||
<div className="gallery-chip">流程可追踪</div>
|
||
</div>
|
||
<div className="gallery-action-row">
|
||
<div className="gallery-primary">立即发起鉴定</div>
|
||
<div className="gallery-secondary">服务说明</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="gallery-metric-row">
|
||
<div className="gallery-metric"><strong>48h</strong><span>标准结果时效</span></div>
|
||
<div className="gallery-metric"><strong>100%</strong><span>正式报告可验真</span></div>
|
||
<div className="gallery-metric"><strong>12.8k</strong><span>累计鉴定申请</span></div>
|
||
</div>
|
||
|
||
<div className="gallery-card" style={{ marginTop: 16 }}>
|
||
<div className="archive-card__eyebrow">服务入口</div>
|
||
<div className="archive-list-line"><strong>实物鉴定</strong><span>标准交付</span></div>
|
||
<div className="archive-list-line"><strong>中检鉴定</strong><span>更高规格机构</span></div>
|
||
</div>
|
||
<TextNav active="首页" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GalleryService() {
|
||
return (
|
||
<div className="screen-base gallery-shell">
|
||
<div className="gallery-hero">
|
||
<div className="screen-title">方向 C · 服务选择</div>
|
||
<h3 className="screen-heading">先选服务，再进商品信息</h3>
|
||
<p className="screen-copy">在这个方向里，服务选择页更像“精品服务目录”，信息被压缩得更轻巧，但气质更高级。</p>
|
||
</div>
|
||
|
||
<div className="stack" style={{ marginTop: 16 }}>
|
||
<div className="gallery-card">
|
||
<div className="badge-line">
|
||
<div className="badge">当前推荐</div>
|
||
</div>
|
||
<div className="archive-card__title" style={{ marginTop: 10 }}>实物鉴定</div>
|
||
<div className="archive-card__desc">适合标准交付，强调流程透明、结果清晰与凭证感。</div>
|
||
<div className="archive-list-line"><strong>¥99 起</strong><span>预计 48 小时</span></div>
|
||
</div>
|
||
<div className="gallery-card">
|
||
<div className="badge-line">
|
||
<div className="badge">更高规格</div>
|
||
</div>
|
||
<div className="archive-card__title" style={{ marginTop: 10 }}>中检鉴定</div>
|
||
<div className="archive-card__desc">更适合高要求场景，机构规格更高，时效与价格也相应变化。</div>
|
||
<div className="archive-list-line"><strong>¥199 起</strong><span>时效略长</span></div>
|
||
</div>
|
||
</div>
|
||
<TextNav active="首页" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GalleryOrder() {
|
||
return (
|
||
<div className="screen-base gallery-shell">
|
||
<div className="gallery-card">
|
||
<div className="badge-line">
|
||
<div className="badge">鉴定中心已收货</div>
|
||
</div>
|
||
<h3 className="screen-heading" style={{ marginTop: 12 }}>订单详情</h3>
|
||
<p className="screen-copy">这条路线会让订单页更像“服务礼盒内页”，焦点在当前动作和用户感受到的被照料感。</p>
|
||
</div>
|
||
|
||
<div className="gallery-card" style={{ marginTop: 14, background: "linear-gradient(160deg, #1a1714 0%, #2d241c 100%)", color: "#fff7ea" }}>
|
||
<div className="archive-card__eyebrow" style={{ color: "#f0d48e" }}>当前建议动作</div>
|
||
<div className="archive-card__title" style={{ color: "#fff7ea", marginTop: 8 }}>等待专业鉴定与复核</div>
|
||
<div className="archive-card__desc" style={{ color: "rgba(255,247,234,0.76)" }}>商品已签收，后续如需补资料、正式报告生成或安排回寄，都会同步提醒。</div>
|
||
</div>
|
||
|
||
<div className="gallery-card" style={{ marginTop: 14 }}>
|
||
<div className="archive-card__eyebrow">商品摘要</div>
|
||
<div className="archive-grid">
|
||
<div className="archive-kv"><div className="archive-kv__label">品类 / 品牌</div><div className="archive-kv__value">箱包 / LV</div></div>
|
||
<div className="archive-kv"><div className="archive-kv__label">型号 / 规格</div><div className="archive-kv__value">Neverfull MM / 42</div></div>
|
||
</div>
|
||
</div>
|
||
<TextNav active="订单" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GalleryReport() {
|
||
return (
|
||
<div className="screen-base gallery-shell">
|
||
<div className="certificate-card">
|
||
<div className="badge-line">
|
||
<div className="badge">正式结果凭证</div>
|
||
<div className="badge">可验真</div>
|
||
</div>
|
||
<h3 className="certificate-card__title">鉴定报告</h3>
|
||
<div className="certificate-result">
|
||
<strong>正品</strong>
|
||
<span>符合正品工艺特征，包身结构、五金细节与编码信息均与品牌标准一致。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="gallery-card" style={{ marginTop: 14 }}>
|
||
<div className="archive-card__eyebrow">商品摘要</div>
|
||
<div className="archive-list-line"><strong>Neverfull MM</strong><span>箱包 / Louis Vuitton</span></div>
|
||
<div className="archive-list-line"><strong>白盘 / 42</strong><span>AXY-R-20260423-8841</span></div>
|
||
</div>
|
||
|
||
<div className="gallery-card" style={{ marginTop: 14 }}>
|
||
<div className="archive-card__eyebrow">报告凭证</div>
|
||
<div className="gallery-action-row" style={{ gridTemplateColumns: "1fr auto" }}>
|
||
<div className="archive-card__desc" style={{ marginTop: 0 }}>支持扫码或输入编号验真，请以验真页面结果为准。</div>
|
||
<div className="gallery-primary" style={{ minWidth: 100 }}>去验真</div>
|
||
</div>
|
||
</div>
|
||
<TextNav active="报告" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Device({ label, children }) {
|
||
return (
|
||
<div className="device-wrap">
|
||
<div className="device-label">{label}</div>
|
||
<IosFrame>{children}</IosFrame>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<div className="page-shell">
|
||
<section className="intro">
|
||
<div>
|
||
<div className="intro-kicker">Huashu-Design · Style Variations</div>
|
||
<h1>安心验用户端<br />其他风格方向参考</h1>
|
||
<p>
|
||
基于你刚才的反馈，我保持同样的功能结构，但把视觉语言拉开差异，重点让你判断
|
||
「这个产品更像专业机构」还是「更像高级服务品牌」。
|
||
</p>
|
||
<div className="intro-tags">
|
||
<div className="intro-tag">共同要求：底部四主按键改成纯文字</div>
|
||
<div className="intro-tag">方向 B：档案册 / 信息建筑</div>
|
||
<div className="intro-tag">方向 C：珠宝盒 / 高级陈列</div>
|
||
</div>
|
||
</div>
|
||
<aside className="intro-side">
|
||
<div className="brand-box">
|
||
<img src="../logo.jpeg" alt="安心验品牌标识参考" />
|
||
</div>
|
||
<div className="side-title">这两套参考怎么区分看</div>
|
||
<div className="side-copy">
|
||
方向 B 更强调秩序、可信、专业判断；方向 C 更强调高级感、服务陈列和消费端亲和力。
|
||
两者都保留黑金识别，但气质重心不同。
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section className="direction-block">
|
||
<div className="direction-head">
|
||
<div>
|
||
<h2 className="direction-title">方向 B · 档案册 / 信息建筑派</h2>
|
||
<div className="direction-sub">
|
||
更像一家专业鉴定机构的数字档案册：排版更规整、边界更克制、阅读更安静。适合强调“公信力”和“流程可信度”。
|
||
</div>
|
||
</div>
|
||
<div className="direction-badge">理性 / 克制 / 专业</div>
|
||
</div>
|
||
<div className="device-row">
|
||
<Device label="B1 · 首页"><ArchiveHome /></Device>
|
||
<Device label="B2 · 订单详情"><ArchiveOrder /></Device>
|
||
<Device label="B3 · 报告详情"><ArchiveReport /></Device>
|
||
<Device label="B4 · 消息中心"><ArchiveMessages /></Device>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="direction-block">
|
||
<div className="direction-head">
|
||
<div>
|
||
<h2 className="direction-title">方向 C · 珠宝盒 / 高级陈列派</h2>
|
||
<div className="direction-sub">
|
||
更像高级服务品牌的小程序：底色更轻盈、卡片更柔和、信息组织像打开一只珠宝盒。适合强调“高级感”和“服务品质”。
|
||
</div>
|
||
</div>
|
||
<div className="direction-badge">轻盈 / 高级 / 陈列感</div>
|
||
</div>
|
||
<div className="device-row">
|
||
<Device label="C1 · 首页"><GalleryHome /></Device>
|
||
<Device label="C2 · 服务选择"><GalleryService /></Device>
|
||
<Device label="C3 · 订单详情"><GalleryOrder /></Device>
|
||
<Device label="C4 · 报告详情"><GalleryReport /></Device>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|