725 lines
21 KiB
HTML
725 lines
21 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>X-Financial Expense 启动页素材系统</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg: #edf2f0;
|
|||
|
|
--ink: #0f172a;
|
|||
|
|
--muted: #64748b;
|
|||
|
|
--surface: #ffffff;
|
|||
|
|
--line: #d8e1e8;
|
|||
|
|
--primary: #006b5e;
|
|||
|
|
--primary-2: #0f766e;
|
|||
|
|
--primary-dark: #061416;
|
|||
|
|
--mint: #e1f6f1;
|
|||
|
|
--gold: #f5a524;
|
|||
|
|
--gold-soft: #fff2cf;
|
|||
|
|
--blue: #2563eb;
|
|||
|
|
--blue-soft: #e7efff;
|
|||
|
|
--paper: #f8fafc;
|
|||
|
|
--shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { box-sizing: border-box; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--ink);
|
|||
|
|
background:
|
|||
|
|
linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
|
|||
|
|
linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
|
|||
|
|
var(--bg);
|
|||
|
|
background-size: 28px 28px;
|
|||
|
|
font-family: "IBM Plex Sans", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
max-width: 1500px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 34px 30px 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: minmax(0, 1fr) 360px;
|
|||
|
|
gap: 22px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel {
|
|||
|
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: rgba(255,255,255,0.86);
|
|||
|
|
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-main {
|
|||
|
|
min-height: 260px;
|
|||
|
|
padding: 30px;
|
|||
|
|
display: grid;
|
|||
|
|
align-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kicker {
|
|||
|
|
width: fit-content;
|
|||
|
|
min-height: 28px;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
border: 1px solid rgba(0, 107, 94, 0.18);
|
|||
|
|
color: var(--primary);
|
|||
|
|
background: var(--mint);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
max-width: 760px;
|
|||
|
|
margin: 14px 0 10px;
|
|||
|
|
font-size: 36px;
|
|||
|
|
line-height: 1.12;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero p,
|
|||
|
|
.section p {
|
|||
|
|
max-width: 860px;
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 1.62;
|
|||
|
|
font-weight: 650;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-side {
|
|||
|
|
padding: 18px;
|
|||
|
|
display: grid;
|
|||
|
|
gap: 10px;
|
|||
|
|
align-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkline {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 34px minmax(0, 1fr);
|
|||
|
|
gap: 10px;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 58px;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkline strong {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkline span {
|
|||
|
|
display: block;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.35;
|
|||
|
|
font-weight: 650;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 34px;
|
|||
|
|
height: 34px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
color: var(--primary);
|
|||
|
|
background: var(--mint);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon.gold { color: #8a5a00; background: var(--gold-soft); }
|
|||
|
|
.icon.blue { color: var(--blue); background: var(--blue-soft); }
|
|||
|
|
|
|||
|
|
.grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 420px minmax(0, 1fr);
|
|||
|
|
gap: 24px;
|
|||
|
|
align-items: start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section h2 {
|
|||
|
|
margin: 0 0 6px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phone {
|
|||
|
|
width: 316px;
|
|||
|
|
height: 684px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 9px;
|
|||
|
|
border-radius: 34px;
|
|||
|
|
background: #101827;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.screen {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 27px;
|
|||
|
|
color: #fff;
|
|||
|
|
background: var(--primary-dark);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 30px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sys { display: flex; gap: 5px; align-items: center; }
|
|||
|
|
.sig, .wifi, .bat { display: inline-block; border: 1.7px solid currentColor; }
|
|||
|
|
.sig { width: 12px; height: 10px; border-top: 0; border-left: 0; transform: skew(-8deg); }
|
|||
|
|
.wifi { width: 13px; height: 8px; border-bottom: 0; border-left-color: transparent; border-right-color: transparent; border-radius: 14px 14px 0 0; }
|
|||
|
|
.bat { width: 18px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, currentColor 68%, transparent 68%); }
|
|||
|
|
|
|||
|
|
.splash {
|
|||
|
|
position: relative;
|
|||
|
|
height: calc(100% - 30px);
|
|||
|
|
padding: 48px 16px 22px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
isolation: isolate;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splash::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
inset: -34px -18px auto;
|
|||
|
|
height: 320px;
|
|||
|
|
z-index: -1;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(circle at 28% 18%, rgba(245, 165, 36, 0.18), transparent 26%),
|
|||
|
|
linear-gradient(135deg, rgba(255,255,255,0.12), transparent 34%),
|
|||
|
|
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
|
|||
|
|
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
|
|||
|
|
background-size: auto, auto, 24px 24px, 24px 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topline {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: rgba(255,255,255,0.68);
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lockup {
|
|||
|
|
display: grid;
|
|||
|
|
justify-items: center;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-top: 42px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-mark {
|
|||
|
|
position: relative;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
width: 74px;
|
|||
|
|
height: 74px;
|
|||
|
|
border-radius: 22px;
|
|||
|
|
background: linear-gradient(145deg, #0b3b36, #00806f);
|
|||
|
|
box-shadow: 0 24px 58px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.16) inset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-mark::before,
|
|||
|
|
.brand-mark::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 42px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255,255,255,0.92);
|
|||
|
|
transform: rotate(28deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-mark::before { left: 20px; top: 15px; }
|
|||
|
|
.brand-mark::after { right: 20px; bottom: 15px; opacity: 0.72; }
|
|||
|
|
|
|||
|
|
.splash-name {
|
|||
|
|
font-size: 25px;
|
|||
|
|
line-height: 1.05;
|
|||
|
|
font-weight: 950;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splash-tag {
|
|||
|
|
max-width: 230px;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
color: rgba(255,255,255,0.68);
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.48;
|
|||
|
|
font-weight: 750;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scene {
|
|||
|
|
position: relative;
|
|||
|
|
height: 252px;
|
|||
|
|
margin-top: 34px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.13);
|
|||
|
|
overflow: hidden;
|
|||
|
|
background:
|
|||
|
|
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
|
|||
|
|
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
|
|||
|
|
linear-gradient(145deg, #062425, #0a5f56 58%, #103a36);
|
|||
|
|
background-size: 22px 22px, 22px 22px, auto;
|
|||
|
|
box-shadow: 0 22px 50px rgba(0,0,0,0.34);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 18px;
|
|||
|
|
top: 28px;
|
|||
|
|
width: 128px;
|
|||
|
|
height: 188px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|||
|
|
background: rgba(3, 21, 24, 0.72);
|
|||
|
|
box-shadow: 0 18px 36px rgba(0,0,0,0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device span {
|
|||
|
|
display: block;
|
|||
|
|
height: 8px;
|
|||
|
|
margin: 8px 14px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255,255,255,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device span:first-child {
|
|||
|
|
width: 72%;
|
|||
|
|
margin-top: 26px;
|
|||
|
|
background: rgba(255,255,255,0.78);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 14px;
|
|||
|
|
right: 14px;
|
|||
|
|
bottom: 18px;
|
|||
|
|
padding: 11px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: rgba(255,255,255,0.08);
|
|||
|
|
font-size: 19px;
|
|||
|
|
font-weight: 950;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount small {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 3px;
|
|||
|
|
color: rgba(255,255,255,0.52);
|
|||
|
|
font-size: 9px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 15px;
|
|||
|
|
top: 42px;
|
|||
|
|
width: 156px;
|
|||
|
|
padding: 13px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: rgba(255,255,255,0.94);
|
|||
|
|
color: var(--ink);
|
|||
|
|
box-shadow: 0 18px 42px rgba(0,0,0,0.28);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card.secondary {
|
|||
|
|
top: 132px;
|
|||
|
|
right: 34px;
|
|||
|
|
width: 174px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chip {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 24px;
|
|||
|
|
padding: 3px 9px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
color: #8a5a00;
|
|||
|
|
background: var(--gold-soft);
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 950;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card h3 {
|
|||
|
|
margin: 8px 0 4px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 1.18;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-card p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 11px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
font-weight: 750;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float-pill {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 18px;
|
|||
|
|
bottom: 18px;
|
|||
|
|
min-height: 32px;
|
|||
|
|
padding: 7px 10px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
color: #d7fff7;
|
|||
|
|
background: rgba(0, 91, 79, 0.75);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 950;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splash-footer {
|
|||
|
|
margin-top: auto;
|
|||
|
|
display: grid;
|
|||
|
|
gap: 11px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress {
|
|||
|
|
width: 118px;
|
|||
|
|
height: 4px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255,255,255,0.14);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress::after {
|
|||
|
|
content: "";
|
|||
|
|
display: block;
|
|||
|
|
width: 66%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: inherit;
|
|||
|
|
background: linear-gradient(90deg, #dffcf4, var(--gold));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.small-copy {
|
|||
|
|
color: rgba(255,255,255,0.68);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 750;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset {
|
|||
|
|
min-height: 138px;
|
|||
|
|
padding: 14px;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
display: grid;
|
|||
|
|
align-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset.dark {
|
|||
|
|
color: #fff;
|
|||
|
|
background: var(--primary-dark);
|
|||
|
|
border-color: rgba(255,255,255,0.16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-title {
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 950;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset-meta {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 11px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.asset.dark .asset-meta { color: rgba(255,255,255,0.62); }
|
|||
|
|
|
|||
|
|
.app-icons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 14px;
|
|||
|
|
align-items: end;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app-icon {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 22%;
|
|||
|
|
background:
|
|||
|
|
linear-gradient(145deg, #0b3b36, #00806f);
|
|||
|
|
box-shadow: 0 16px 38px rgba(0, 91, 79, 0.26);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app-icon::before,
|
|||
|
|
.app-icon::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: rgba(255,255,255,0.92);
|
|||
|
|
transform: rotate(28deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app-icon::before { left: 27%; top: 20%; width: 22%; height: 56%; }
|
|||
|
|
.app-icon::after { right: 27%; bottom: 20%; width: 22%; height: 56%; opacity: 0.72; }
|
|||
|
|
.app-icon.lg { width: 96px; height: 96px; }
|
|||
|
|
.app-icon.md { width: 72px; height: 72px; }
|
|||
|
|
.app-icon.sm { width: 48px; height: 48px; }
|
|||
|
|
|
|||
|
|
.spec-list {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 180px minmax(0, 1fr);
|
|||
|
|
gap: 12px;
|
|||
|
|
padding: 12px;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec strong {
|
|||
|
|
min-width: 0;
|
|||
|
|
font-weight: 950;
|
|||
|
|
overflow-wrap: anywhere;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec span {
|
|||
|
|
min-width: 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
line-height: 1.45;
|
|||
|
|
font-weight: 650;
|
|||
|
|
overflow-wrap: anywhere;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.motion {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frame {
|
|||
|
|
padding: 14px;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frame strong {
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frame span {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
font-weight: 650;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-scene {
|
|||
|
|
height: 72px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background:
|
|||
|
|
linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
|
|||
|
|
linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
|
|||
|
|
linear-gradient(145deg, #062425, #0a5f56);
|
|||
|
|
background-size: 18px 18px, 18px 18px, auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-row {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(5, 1fr);
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swatch {
|
|||
|
|
min-height: 76px;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid rgba(15,23,42,0.1);
|
|||
|
|
display: grid;
|
|||
|
|
align-content: end;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swatch.light { color: var(--ink); }
|
|||
|
|
|
|||
|
|
@media (max-width: 1180px) {
|
|||
|
|
.hero,
|
|||
|
|
.grid { grid-template-columns: 1fr; }
|
|||
|
|
.phone { margin-left: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 760px) {
|
|||
|
|
.wrap { padding: 22px 12px 40px; }
|
|||
|
|
h1 { font-size: 28px; }
|
|||
|
|
.asset-grid,
|
|||
|
|
.motion,
|
|||
|
|
.color-row { grid-template-columns: 1fr; }
|
|||
|
|
.spec { grid-template-columns: 1fr; }
|
|||
|
|
.phone { width: min(316px, 100%); }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<main class="wrap">
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="panel hero-main">
|
|||
|
|
<span class="kicker">Splash asset system</span>
|
|||
|
|
<h1>X-Financial Expense 启动页素材系统</h1>
|
|||
|
|
<p>这页专门给 Android 开机页使用，不直接复用业务页面卡片。素材分成品牌锁定、深色背景、票据场景、启动动效和 Android 落地规格，后续开发 Compose 或原生启动页时按这里取值。</p>
|
|||
|
|
</div>
|
|||
|
|
<aside class="panel hero-side">
|
|||
|
|
<div class="checkline"><div class="icon">01</div><div><strong>启动页先看品牌</strong><span>Logo、产品名和安全工作台定位占主导，不放登录表单。</span></div></div>
|
|||
|
|
<div class="checkline"><div class="icon gold">02</div><div><strong>业务只做隐喻</strong><span>票据、审批、金额作为启动素材出现，不承载真实操作。</span></div></div>
|
|||
|
|
<div class="checkline"><div class="icon blue">03</div><div><strong>可直接落 Android</strong><span>提供颜色、图标尺寸、动效节奏和 SplashScreen API 参数。</span></div></div>
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="grid">
|
|||
|
|
<div class="panel section">
|
|||
|
|
<h2>启动页预览</h2>
|
|||
|
|
<p>用于 9:16 Android 手机首屏，登录态检查完成后跳转登录页或首页。</p>
|
|||
|
|
<div style="height:16px"></div>
|
|||
|
|
<div class="phone">
|
|||
|
|
<div class="screen">
|
|||
|
|
<div class="status"><span>9:41</span><span class="sys"><i class="sig"></i><i class="wifi"></i><i class="bat"></i></span></div>
|
|||
|
|
<div class="splash">
|
|||
|
|
<div class="topline"><span>SECURE EXPENSE</span><span>ANDROID</span></div>
|
|||
|
|
<div class="lockup">
|
|||
|
|
<div class="brand-mark"></div>
|
|||
|
|
<div>
|
|||
|
|
<div class="splash-name">X-Financial<br/>Expense</div>
|
|||
|
|
<div class="splash-tag">出差申请、票据采集、报销提交、移动审批</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scene">
|
|||
|
|
<div class="device">
|
|||
|
|
<span></span><span></span><span></span>
|
|||
|
|
<div class="amount"><small>本月待处理</small>¥ 3,280</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-card">
|
|||
|
|
<span class="chip">AI 识别</span>
|
|||
|
|
<h3>票据已归类</h3>
|
|||
|
|
<p>5 张票据 · 2 项待补</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-card secondary">
|
|||
|
|
<h3>审批流已同步</h3>
|
|||
|
|
<p>财务复核中 · 待提醒</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="float-pill">拍照上传</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="splash-footer">
|
|||
|
|
<div class="progress"></div>
|
|||
|
|
<div class="small-copy">正在加载安全工作台</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<section class="panel section">
|
|||
|
|
<h2>品牌与 App 图标</h2>
|
|||
|
|
<p>App 图标保留双斜票据形态，避免直接使用文字。启动页 Logo 使用 74dp 等比缩放，图标安全区不低于 12dp。</p>
|
|||
|
|
<div class="app-icons">
|
|||
|
|
<div class="app-icon lg"></div>
|
|||
|
|
<div class="app-icon md"></div>
|
|||
|
|
<div class="app-icon sm"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-grid">
|
|||
|
|
<div class="asset"><div class="brand-mark" style="width:58px;height:58px;border-radius:17px"></div><div><div class="asset-title">启动 Logo</div><div class="asset-meta">74dp / 58dp / 44dp 三档，深色背景使用。</div></div></div>
|
|||
|
|
<div class="asset dark"><div class="app-icon md"></div><div><div class="asset-title">Launcher Icon</div><div class="asset-meta">前景图形居中，保留 Android 自适应图标裁切空间。</div></div></div>
|
|||
|
|
<div class="asset"><div class="chip">AI 识别</div><div><div class="asset-title">业务状态 Chip</div><div class="asset-meta">仅作为视觉线索，不做主操作入口。</div></div></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel section">
|
|||
|
|
<h2>颜色与背景</h2>
|
|||
|
|
<p>启动页走深色金融安全感。绿色做品牌，金色只用于识别和进度强调，蓝色用于信息状态。</p>
|
|||
|
|
<div class="color-row">
|
|||
|
|
<div class="swatch" style="background:#061416">#061416<br/>启动底色</div>
|
|||
|
|
<div class="swatch" style="background:#006b5e">#006B5E<br/>品牌主色</div>
|
|||
|
|
<div class="swatch" style="background:#0f766e">#0F766E<br/>场景渐变</div>
|
|||
|
|
<div class="swatch" style="background:#f5a524;color:#251500">#F5A524<br/>识别强调</div>
|
|||
|
|
<div class="swatch light" style="background:#f8fafc">#F8FAFC<br/>票据纸面</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel section">
|
|||
|
|
<h2>素材拆分</h2>
|
|||
|
|
<p>开发落地时建议拆成 5 个可复用素材层，Compose 中可分别写成 Composable。</p>
|
|||
|
|
<div class="asset-grid">
|
|||
|
|
<div class="asset dark"><div class="mini-scene"></div><div><div class="asset-title">背景层</div><div class="asset-meta">深色底、细网格、顶部柔光，静态即可。</div></div></div>
|
|||
|
|
<div class="asset"><div class="asset-card" style="position:static;width:auto;box-shadow:none;border:1px solid var(--line)"><span class="chip">AI 识别</span><h3>票据已归类</h3><p>5 张票据 · 2 项待补</p></div><div><div class="asset-title">票据层</div><div class="asset-meta">表达拍照上传和 OCR，不显示真实敏感票据信息。</div></div></div>
|
|||
|
|
<div class="asset"><div class="float-pill" style="position:static;color:#006b5e;background:var(--mint);border:0;width:max-content">拍照上传</div><div><div class="asset-title">状态层</div><div class="asset-meta">启动时轻提示，900ms 后淡出。</div></div></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel section">
|
|||
|
|
<h2>启动动效节奏</h2>
|
|||
|
|
<p>控制在 900ms 左右，不阻塞用户进入登录或首页。系统检测慢时只延长进度条，不重复播放动画。</p>
|
|||
|
|
<div class="motion">
|
|||
|
|
<div class="frame"><div class="mini-scene"></div><strong>0ms</strong><span>深色底和网格先出现，避免白屏。</span></div>
|
|||
|
|
<div class="frame"><div class="mini-scene"></div><strong>160ms</strong><span>Logo scale 0.92 到 1，透明度进入。</span></div>
|
|||
|
|
<div class="frame"><div class="mini-scene"></div><strong>320ms</strong><span>产品名和定位文案淡入。</span></div>
|
|||
|
|
<div class="frame"><div class="mini-scene"></div><strong>520ms</strong><span>票据场景上移 8dp，进度条启动。</span></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="panel section">
|
|||
|
|
<h2>Android 落地规格</h2>
|
|||
|
|
<p>先走 Android 原生启动，再进入 Compose 首页。冷启动用系统 SplashScreen，业务素材用于第一个 Activity 的过渡页。</p>
|
|||
|
|
<div class="spec-list">
|
|||
|
|
<div class="spec"><strong>windowSplashScreenBackground</strong><span>#061416。系统启动页避免白屏，和业务过渡页底色一致。</span></div>
|
|||
|
|
<div class="spec"><strong>windowSplashScreenAnimatedIcon</strong><span>只放 App 图标前景，不放产品文字，防止小屏裁切。</span></div>
|
|||
|
|
<div class="spec"><strong>过渡页时长</strong><span>登录态检查完成即跳转；正常 600-900ms，异常最长 1800ms 后进入登录页。</span></div>
|
|||
|
|
<div class="spec"><strong>Compose 拆分</strong><span>SplashBackground、BrandLockup、ExpenseScene、LoadingRail 四个组件。</span></div>
|
|||
|
|
<div class="spec"><strong>无障碍</strong><span>启动页只设置应用名称 contentDescription，业务装饰图不参与朗读。</span></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
</html>
|