1339 lines
50 KiB
HTML
1339 lines
50 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 员工报销助手 Android V2</title>
|
||
<style>
|
||
:root {
|
||
--bg: #eef2f0;
|
||
--ink: #101827;
|
||
--ink-2: #263244;
|
||
--muted: #6b778a;
|
||
--line: #d9e0e7;
|
||
--surface: #ffffff;
|
||
--surface-2: #f7f9fb;
|
||
--primary: #005b4f;
|
||
--primary-2: #0f766e;
|
||
--primary-soft: #e2f5f1;
|
||
--accent: #ffb020;
|
||
--accent-soft: #fff3d6;
|
||
--blue: #2563eb;
|
||
--blue-soft: #e8efff;
|
||
--red: #dc2626;
|
||
--red-soft: #fee2e2;
|
||
--purple: #6d5dfc;
|
||
--purple-soft: #efeaff;
|
||
--shadow: 0 22px 58px rgba(16, 24, 39, 0.16);
|
||
--radius: 18px;
|
||
--radius-sm: 12px;
|
||
--phone-w: 316px;
|
||
--phone-h: 684px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
body {
|
||
margin: 0;
|
||
color: var(--ink);
|
||
background:
|
||
linear-gradient(90deg, rgba(16, 24, 39, 0.04) 1px, transparent 1px),
|
||
linear-gradient(rgba(16, 24, 39, 0.04) 1px, transparent 1px),
|
||
var(--bg);
|
||
background-size: 28px 28px;
|
||
font-family: "Source Sans 3", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1780px;
|
||
margin: 0 auto;
|
||
padding: 34px 30px 64px;
|
||
}
|
||
|
||
.cover {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 390px;
|
||
gap: 22px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.cover-main,
|
||
.cover-side,
|
||
.screen-note {
|
||
border: 1px solid rgba(16, 24, 39, 0.08);
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.84);
|
||
box-shadow: 0 18px 48px rgba(16, 24, 39, 0.08);
|
||
}
|
||
|
||
.cover-main { padding: 30px; }
|
||
.cover-side { padding: 22px; }
|
||
|
||
.kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
padding: 4px 11px;
|
||
border: 1px solid rgba(0, 91, 79, 0.18);
|
||
border-radius: 999px;
|
||
color: var(--primary);
|
||
background: var(--primary-soft);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
h1 {
|
||
max-width: 920px;
|
||
margin: 14px 0 10px;
|
||
font-size: 36px;
|
||
line-height: 1.15;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.cover p {
|
||
max-width: 920px;
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 15px;
|
||
line-height: 1.58;
|
||
}
|
||
|
||
.principles {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.principle {
|
||
display: grid;
|
||
grid-template-columns: 36px minmax(0, 1fr);
|
||
gap: 10px;
|
||
align-items: center;
|
||
min-height: 58px;
|
||
padding: 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.principle strong {
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.principle span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.board {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(316px, 1fr));
|
||
gap: 28px;
|
||
align-items: start;
|
||
}
|
||
|
||
.screen-block {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.screen-note {
|
||
min-height: 96px;
|
||
padding: 14px;
|
||
}
|
||
|
||
.screen-note h2 {
|
||
margin: 0 0 5px;
|
||
font-size: 17px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.screen-note p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.42;
|
||
}
|
||
|
||
.phone {
|
||
width: var(--phone-w);
|
||
height: var(--phone-h);
|
||
margin: 0 auto;
|
||
padding: 9px;
|
||
border-radius: 34px;
|
||
background: #101827;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.screen {
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 27px;
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.screen.dark {
|
||
color: #fff;
|
||
background: #071417;
|
||
}
|
||
|
||
.status {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 30px;
|
||
padding: 0 16px;
|
||
color: currentColor;
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
opacity: 0.94;
|
||
}
|
||
|
||
.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%);
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
padding: 12px 16px 88px;
|
||
}
|
||
|
||
.content.no-nav { padding-bottom: 18px; }
|
||
|
||
.appbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
min-height: 42px;
|
||
}
|
||
|
||
.title-stack {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.eyebrow {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.screen-title {
|
||
color: var(--ink);
|
||
font-size: 20px;
|
||
font-weight: 950;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.dark .screen-title,
|
||
.dark .eyebrow { color: #fff; }
|
||
|
||
.icon-btn {
|
||
width: 38px;
|
||
height: 38px;
|
||
flex: none;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 13px;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.icon-btn.ghost {
|
||
border-color: transparent;
|
||
background: rgba(255,255,255,0.12);
|
||
color: #fff;
|
||
}
|
||
|
||
.chev {
|
||
font-size: 25px;
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.i {
|
||
width: 21px;
|
||
height: 21px;
|
||
stroke: currentColor;
|
||
stroke-width: 2;
|
||
fill: none;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.i.fill {
|
||
fill: currentColor;
|
||
stroke: none;
|
||
}
|
||
|
||
.brand-mark {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 56px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 17px;
|
||
background: linear-gradient(145deg, #0b3b36, #00806f);
|
||
color: #fff;
|
||
box-shadow: 0 18px 38px rgba(0, 91, 79, 0.35);
|
||
}
|
||
|
||
.brand-mark::before,
|
||
.brand-mark::after {
|
||
content: "";
|
||
position: absolute;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.9);
|
||
}
|
||
|
||
.brand-mark::before {
|
||
width: 15px;
|
||
height: 32px;
|
||
left: 15px;
|
||
top: 12px;
|
||
transform: rotate(28deg);
|
||
}
|
||
|
||
.brand-mark::after {
|
||
width: 15px;
|
||
height: 32px;
|
||
right: 15px;
|
||
bottom: 12px;
|
||
transform: rotate(28deg);
|
||
opacity: 0.72;
|
||
}
|
||
|
||
.app-name {
|
||
font-size: 18px;
|
||
font-weight: 950;
|
||
}
|
||
|
||
.hero-title {
|
||
margin: 22px 0 8px;
|
||
font-size: 30px;
|
||
line-height: 1.08;
|
||
font-weight: 950;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.copy {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.52;
|
||
}
|
||
|
||
.dark .copy { color: rgba(255,255,255,0.72); }
|
||
|
||
.splash-system {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100%;
|
||
padding: 38px 0 20px;
|
||
isolation: isolate;
|
||
}
|
||
|
||
.splash-system::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -30px -18px auto;
|
||
height: 310px;
|
||
background:
|
||
radial-gradient(circle at 28% 18%, rgba(255, 176, 32, 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;
|
||
opacity: 0.9;
|
||
z-index: -1;
|
||
}
|
||
|
||
.splash-topline {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: rgba(255,255,255,0.68);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.splash-lockup {
|
||
display: grid;
|
||
gap: 15px;
|
||
justify-items: center;
|
||
margin-top: 42px;
|
||
text-align: center;
|
||
}
|
||
|
||
.splash-logo-large {
|
||
width: 74px;
|
||
height: 74px;
|
||
border-radius: 22px;
|
||
box-shadow:
|
||
0 24px 58px rgba(0, 0, 0, 0.35),
|
||
0 0 0 1px rgba(255,255,255,0.16) inset;
|
||
}
|
||
|
||
.splash-logo-large::before {
|
||
width: 20px;
|
||
height: 42px;
|
||
left: 20px;
|
||
top: 15px;
|
||
}
|
||
|
||
.splash-logo-large::after {
|
||
width: 20px;
|
||
height: 42px;
|
||
right: 20px;
|
||
bottom: 15px;
|
||
}
|
||
|
||
.splash-name {
|
||
font-size: 25px;
|
||
line-height: 1.05;
|
||
font-weight: 950;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.splash-tag {
|
||
max-width: 230px;
|
||
color: rgba(255,255,255,0.68);
|
||
font-size: 12px;
|
||
line-height: 1.48;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.splash-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);
|
||
}
|
||
|
||
.splash-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);
|
||
}
|
||
|
||
.splash-ledger {
|
||
position: absolute;
|
||
inset: 20px 14px auto;
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.splash-ledger span {
|
||
display: block;
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.splash-ledger span:nth-child(1) { width: 72%; background: rgba(255,255,255,0.78); }
|
||
.splash-ledger span:nth-child(2) { width: 92%; }
|
||
.splash-ledger span:nth-child(3) { width: 58%; }
|
||
|
||
.splash-amount {
|
||
position: absolute;
|
||
left: 14px;
|
||
right: 14px;
|
||
bottom: 18px;
|
||
padding: 11px;
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,0.08);
|
||
color: #fff;
|
||
font-size: 19px;
|
||
font-weight: 950;
|
||
}
|
||
|
||
.splash-amount small {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
color: rgba(255,255,255,0.52);
|
||
font-size: 9px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.splash-receipt-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);
|
||
}
|
||
|
||
.splash-receipt-card h3 {
|
||
margin: 8px 0 4px;
|
||
font-size: 15px;
|
||
line-height: 1.18;
|
||
}
|
||
|
||
.splash-receipt-card.secondary {
|
||
top: 132px;
|
||
right: 34px;
|
||
width: 174px;
|
||
}
|
||
|
||
.splash-float {
|
||
position: absolute;
|
||
left: 18px;
|
||
bottom: 18px;
|
||
display: inline-flex;
|
||
gap: 7px;
|
||
align-items: center;
|
||
min-height: 32px;
|
||
padding: 6px 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;
|
||
}
|
||
|
||
.splash-progress {
|
||
width: 118px;
|
||
height: 4px;
|
||
margin: 0 auto;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.14);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.splash-progress::after {
|
||
content: "";
|
||
display: block;
|
||
width: 66%;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(90deg, #dffcf4, var(--accent));
|
||
}
|
||
|
||
.login-card,
|
||
.card,
|
||
.panel {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
box-shadow: 0 10px 24px rgba(16, 24, 39, 0.05);
|
||
}
|
||
|
||
.login-card { padding: 15px; margin-top: 22px; }
|
||
.card { padding: 14px; }
|
||
.panel { padding: 13px; }
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: 5px;
|
||
padding: 11px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.field:last-child { border-bottom: 0; }
|
||
|
||
.field label {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
}
|
||
|
||
.value {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
align-items: center;
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #9aa5b5;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.btn {
|
||
min-height: 48px;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
border: 1px solid transparent;
|
||
color: #fff;
|
||
background: var(--primary);
|
||
font-size: 14px;
|
||
font-weight: 950;
|
||
box-shadow: 0 13px 26px rgba(0, 91, 79, 0.24);
|
||
}
|
||
|
||
.btn.gold {
|
||
background: var(--accent);
|
||
color: #3c2800;
|
||
box-shadow: 0 13px 26px rgba(255, 176, 32, 0.24);
|
||
}
|
||
|
||
.btn.blue {
|
||
background: var(--blue);
|
||
box-shadow: 0 13px 26px rgba(37, 99, 235, 0.22);
|
||
}
|
||
|
||
.btn.danger {
|
||
background: #fff;
|
||
color: var(--red);
|
||
border-color: #fecaca;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn.secondary {
|
||
background: #fff;
|
||
color: var(--ink);
|
||
border-color: var(--line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 9px;
|
||
}
|
||
|
||
.hero-panel {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 16px;
|
||
border-radius: 22px;
|
||
color: #fff;
|
||
background:
|
||
linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px),
|
||
linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
|
||
linear-gradient(145deg, #092f2a, #006b5e);
|
||
background-size: 24px 24px, 24px 24px, auto;
|
||
box-shadow: 0 16px 34px rgba(0, 91, 79, 0.2);
|
||
}
|
||
|
||
.hero-panel h3 {
|
||
max-width: 190px;
|
||
margin: 8px 0 6px;
|
||
font-size: 20px;
|
||
line-height: 1.18;
|
||
}
|
||
|
||
.quick-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin: 13px 0;
|
||
}
|
||
|
||
.quick {
|
||
min-height: 104px;
|
||
padding: 13px;
|
||
display: grid;
|
||
align-content: space-between;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.quick strong {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.quick span {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.icon-tile {
|
||
width: 38px;
|
||
height: 38px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 14px;
|
||
color: var(--primary);
|
||
background: var(--primary-soft);
|
||
}
|
||
|
||
.icon-tile.gold { color: #9a6700; background: var(--accent-soft); }
|
||
.icon-tile.blue { color: var(--blue); background: var(--blue-soft); }
|
||
.icon-tile.purple { color: var(--purple); background: var(--purple-soft); }
|
||
.icon-tile.red { color: var(--red); background: var(--red-soft); }
|
||
|
||
.list {
|
||
display: grid;
|
||
gap: 9px;
|
||
}
|
||
|
||
.expense-item {
|
||
display: grid;
|
||
grid-template-columns: 42px minmax(0, 1fr) auto;
|
||
gap: 10px;
|
||
align-items: center;
|
||
min-height: 66px;
|
||
padding: 11px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 17px;
|
||
background: #fff;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 14px;
|
||
font-weight: 950;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item-sub {
|
||
margin-top: 2px;
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.money {
|
||
font-size: 16px;
|
||
font-weight: 950;
|
||
}
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 24px;
|
||
border-radius: 999px;
|
||
padding: 3px 9px;
|
||
color: var(--primary);
|
||
background: var(--primary-soft);
|
||
font-size: 11px;
|
||
font-weight: 950;
|
||
}
|
||
|
||
.chip.gold { color: #8a5a00; background: var(--accent-soft); }
|
||
.chip.blue { color: var(--blue); background: var(--blue-soft); }
|
||
.chip.red { color: var(--red); background: var(--red-soft); }
|
||
.chip.purple { color: var(--purple); background: var(--purple-soft); }
|
||
|
||
.metric-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 9px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.metric {
|
||
padding: 13px;
|
||
border-radius: 18px;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
}
|
||
|
||
.metric strong {
|
||
display: block;
|
||
font-size: 21px;
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.metric span {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
}
|
||
|
||
.receipt-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.receipt {
|
||
height: 74px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background:
|
||
linear-gradient(135deg, #fff 0 50%, #f1f5f9 50% 100%);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--muted);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.camera-view {
|
||
position: relative;
|
||
height: 310px;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
|
||
linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
|
||
#101827;
|
||
background-size: 30px 30px;
|
||
color: #fff;
|
||
}
|
||
|
||
.camera-frame {
|
||
position: absolute;
|
||
left: 28px;
|
||
right: 28px;
|
||
top: 64px;
|
||
height: 150px;
|
||
border: 2px solid var(--accent);
|
||
border-radius: 16px;
|
||
box-shadow: 0 0 0 999px rgba(0,0,0,0.28);
|
||
}
|
||
|
||
.camera-frame::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 18px;
|
||
right: 18px;
|
||
top: 70px;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 12px var(--accent);
|
||
}
|
||
|
||
.camera-tip {
|
||
position: absolute;
|
||
left: 20px;
|
||
right: 20px;
|
||
bottom: 20px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: 850;
|
||
color: rgba(255,255,255,0.88);
|
||
}
|
||
|
||
.shutter-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 74px 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.shutter {
|
||
width: 66px;
|
||
height: 66px;
|
||
justify-self: center;
|
||
border-radius: 999px;
|
||
border: 7px solid #fff;
|
||
background: var(--primary);
|
||
box-shadow: 0 12px 25px rgba(16,24,39,0.26);
|
||
}
|
||
|
||
.summary-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 9px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.summary-line:last-child { border-bottom: 0; }
|
||
.summary-line span { color: var(--muted); }
|
||
.summary-line strong { text-align: right; }
|
||
|
||
.total {
|
||
font-size: 27px;
|
||
font-weight: 950;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 0;
|
||
padding-left: 22px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 8px;
|
||
top: 10px;
|
||
bottom: 14px;
|
||
width: 2px;
|
||
background: var(--line);
|
||
}
|
||
|
||
.step {
|
||
position: relative;
|
||
padding-bottom: 14px;
|
||
}
|
||
|
||
.step::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -21px;
|
||
top: 4px;
|
||
width: 13px;
|
||
height: 13px;
|
||
border: 2px solid var(--line);
|
||
border-radius: 999px;
|
||
background: #fff;
|
||
}
|
||
|
||
.step.done::before {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.step.current::before {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.step strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.step span {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.bottom-nav {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
height: 76px;
|
||
padding: 8px 8px 10px;
|
||
border-top: 1px solid var(--line);
|
||
background: rgba(255,255,255,0.96);
|
||
backdrop-filter: blur(14px);
|
||
}
|
||
|
||
.nav {
|
||
display: grid;
|
||
place-items: center;
|
||
gap: 3px;
|
||
color: var(--muted);
|
||
font-size: 10px;
|
||
font-weight: 950;
|
||
}
|
||
|
||
.nav.active { color: var(--primary); }
|
||
.nav .i { width: 22px; height: 22px; }
|
||
|
||
.fixed-action {
|
||
position: absolute;
|
||
left: 16px;
|
||
right: 16px;
|
||
bottom: 88px;
|
||
z-index: 2;
|
||
display: grid;
|
||
gap: 9px;
|
||
padding-top: 28px;
|
||
background: linear-gradient(180deg, rgba(247,249,251,0), #f7f9fb 28px);
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 7px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tab {
|
||
min-height: 32px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 950;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab.active {
|
||
color: var(--primary);
|
||
background: var(--primary-soft);
|
||
border-color: rgba(0,91,79,0.18);
|
||
}
|
||
|
||
@media (max-width: 1460px) {
|
||
.board { grid-template-columns: repeat(3, minmax(316px, 1fr)); }
|
||
}
|
||
|
||
@media (max-width: 1080px) {
|
||
.cover { grid-template-columns: 1fr; }
|
||
.board { grid-template-columns: repeat(2, minmax(316px, 1fr)); }
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.wrap { padding: 22px 10px 40px; }
|
||
.board { grid-template-columns: 1fr; }
|
||
.phone { width: min(var(--phone-w), 100%); }
|
||
h1 { font-size: 29px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg width="0" height="0" style="position:absolute">
|
||
<symbol id="home" viewBox="0 0 24 24"><path d="M3 11.5 12 4l9 7.5"/><path d="M6 10.5V21h5v-6h2v6h5V10.5"/></symbol>
|
||
<symbol id="wallet" viewBox="0 0 24 24"><path d="M4 7h15a2 2 0 0 1 2 2v10H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h13"/><path d="M16 13h5"/></symbol>
|
||
<symbol id="camera" viewBox="0 0 24 24"><path d="M5 7h3l1.5-2h5L16 7h3a2 2 0 0 1 2 2v10H3V9a2 2 0 0 1 2-2z"/><circle cx="12" cy="14" r="3.5"/></symbol>
|
||
<symbol id="receipt" viewBox="0 0 24 24"><path d="M7 3h10v18l-2-1-2 1-2-1-2 1-2-1z"/><path d="M9 8h6M9 12h6M9 16h4"/></symbol>
|
||
<symbol id="shield" viewBox="0 0 24 24"><path d="M12 21s8-4 8-11V5l-8-3-8 3v5c0 7 8 11 8 11z"/><path d="m8.5 11.5 2.5 2.5 5-5"/></symbol>
|
||
<symbol id="user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.2-6 8-6s6.5 2 8 6"/></symbol>
|
||
<symbol id="plane" viewBox="0 0 24 24"><path d="M3 11.5 21 4l-7.5 18-3-7.5z"/><path d="m10.5 14.5 5-5"/></symbol>
|
||
<symbol id="car" viewBox="0 0 24 24"><path d="M5 16h14l-1.5-5h-11z"/><path d="M7 16v3M17 16v3"/><circle cx="7.5" cy="19" r="1"/><circle cx="16.5" cy="19" r="1"/></symbol>
|
||
<symbol id="hotel" viewBox="0 0 24 24"><path d="M4 21V4h9v17"/><path d="M13 10h7v11"/><path d="M7 8h2M7 12h2M7 16h2M16 14h2M16 18h2"/></symbol>
|
||
<symbol id="meal" viewBox="0 0 24 24"><path d="M7 3v8M4 3v8M10 3v8"/><path d="M4 11h6"/><path d="M7 11v10"/><path d="M16 3v18"/><path d="M16 3c3 2 4 5 3 9h-3"/></symbol>
|
||
<symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||
<symbol id="bell" viewBox="0 0 24 24"><path d="M6 9a6 6 0 0 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9"/><path d="M10 21h4"/></symbol>
|
||
<symbol id="search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m16 16 5 5"/></symbol>
|
||
<symbol id="mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></symbol>
|
||
<symbol id="upload" viewBox="0 0 24 24"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></symbol>
|
||
<symbol id="check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
|
||
<symbol id="alert" viewBox="0 0 24 24"><path d="M12 3 2 21h20z"/><path d="M12 9v5M12 18h.01"/></symbol>
|
||
<symbol id="calendar" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M8 3v4M16 3v4M4 10h16"/></symbol>
|
||
<symbol id="map" viewBox="0 0 24 24"><path d="M12 21s7-5 7-11a7 7 0 0 0-14 0c0 6 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></symbol>
|
||
<symbol id="clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></symbol>
|
||
<symbol id="send" viewBox="0 0 24 24"><path d="M3 11 21 3l-8 18-2-8z"/><path d="m11 13 4-4"/></symbol>
|
||
<symbol id="filter" viewBox="0 0 24 24"><path d="M4 5h16M7 12h10M10 19h4"/></symbol>
|
||
<symbol id="more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></symbol>
|
||
</svg>
|
||
|
||
<main class="wrap">
|
||
<section class="cover">
|
||
<div class="cover-main">
|
||
<span class="kicker">V2 Android visual direction</span>
|
||
<h1>员工报销助手：加入启动素材页、登录页、统一返回图标和完整图标系统</h1>
|
||
<p>这版按真实 App 启动链路重新设计：启动素材页、品牌开机页、登录页、首页工作台、出差申请、记账、拍票据、识别确认、提交、进度、审批。开机页从独立素材系统生成，避免直接把业务卡片堆到首屏。</p>
|
||
</div>
|
||
<div class="cover-side">
|
||
<span class="kicker">修正点</span>
|
||
<div class="principles">
|
||
<div class="principle"><div class="icon-tile"><svg class="i"><use href="#check"/></svg></div><div><strong>补启动素材</strong><span>新增独立素材页，统一启动图形、背景、动效和落地规格。</span></div></div>
|
||
<div class="principle"><div class="icon-tile gold"><svg class="i"><use href="#check"/></svg></div><div><strong>统一返回</strong><span>所有二级页使用小于号形态 chevron，而不是文字返回。</span></div></div>
|
||
<div class="principle"><div class="icon-tile blue"><svg class="i"><use href="#check"/></svg></div><div><strong>图标系统</strong><span>首页、导航、表单、审批、上传、风险全部补齐图标。</span></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="board">
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>00 开机页</h2><p>由启动素材页统一输出品牌图形、票据场景和启动状态。</p></div>
|
||
<div class="phone"><div class="screen dark">
|
||
<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="content no-nav">
|
||
<div class="splash-system">
|
||
<div class="splash-topline"><span>SECURE EXPENSE</span><span>ANDROID</span></div>
|
||
<div class="splash-lockup">
|
||
<div class="brand-mark splash-logo-large"></div>
|
||
<div>
|
||
<div class="splash-name">X-Financial<br/>Expense</div>
|
||
<div class="splash-tag">出差申请、票据采集、报销提交、移动审批</div>
|
||
</div>
|
||
</div>
|
||
<div class="splash-scene">
|
||
<div class="splash-device">
|
||
<div class="splash-ledger"><span></span><span></span><span></span></div>
|
||
<div class="splash-amount"><small>本月待处理</small>¥ 3,280</div>
|
||
</div>
|
||
<div class="splash-receipt-card">
|
||
<span class="chip gold">AI 识别</span>
|
||
<h3>票据已归类</h3>
|
||
<p class="copy">5 张票据 · 2 项待补</p>
|
||
</div>
|
||
<div class="splash-receipt-card secondary">
|
||
<div class="expense-item" style="box-shadow:none;border:0;padding:0;min-height:48px;background:transparent">
|
||
<div class="icon-tile"><svg class="i"><use href="#shield"/></svg></div>
|
||
<div><div class="item-title">审批流已同步</div><div class="item-sub">财务复核中</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="splash-float"><svg class="i" style="width:15px;height:15px"><use href="#camera"/></svg> 拍照上传</div>
|
||
</div>
|
||
<div class="splash-footer">
|
||
<div class="splash-progress"></div>
|
||
<p class="copy">正在加载安全工作台</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>01 登录页</h2><p>明确员工身份、部门和安全登录状态。登录页不放多余入口。</p></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="content no-nav">
|
||
<div class="appbar"><div class="brand-mark" style="width:44px;height:44px;border-radius:14px"></div><div class="title-stack"><div class="screen-title">员工登录</div><div class="eyebrow">X-Financial Expense</div></div></div>
|
||
<div class="hero-title" style="font-size:28px;color:var(--ink)">报销从手机开始。</div>
|
||
<p class="copy">登录后可申请出差、记账、拍票据并查看审批进度。</p>
|
||
<div class="login-card">
|
||
<div class="field"><label>员工账号</label><div class="value">zhangsan</div></div>
|
||
<div class="field"><label>密码</label><div class="value"><span class="placeholder">输入密码</span><svg class="i"><use href="#user"/></svg></div></div>
|
||
<div class="field"><label>登录组织</label><div class="value">星海科技 · 销售部</div></div>
|
||
</div>
|
||
<div style="height:14px"></div>
|
||
<div class="btn">登录</div>
|
||
<div style="height:9px"></div>
|
||
<div class="btn secondary">使用企业 SSO</div>
|
||
</div>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>02 首页工作台</h2><p>首页突出四个高频动作，并增加图标和统计摘要。</p></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="content">
|
||
<div class="appbar"><div class="title-stack"><div class="eyebrow">上午好，张三</div><div class="screen-title">报销工作台</div></div><div class="icon-btn"><svg class="i"><use href="#bell"/></svg></div></div>
|
||
<div class="hero-panel"><span class="chip gold">本月待处理</span><h3>3 张单据需要你处理</h3><p class="copy">建议先补齐票据，再提交审批。</p></div>
|
||
<div class="quick-grid">
|
||
<div class="quick"><div class="icon-tile"><svg class="i"><use href="#plane"/></svg></div><div><strong>申请出差</strong><span>目的地与预算</span></div></div>
|
||
<div class="quick"><div class="icon-tile gold"><svg class="i"><use href="#wallet"/></svg></div><div><strong>记一笔</strong><span>随手记费用</span></div></div>
|
||
<div class="quick"><div class="icon-tile blue"><svg class="i"><use href="#camera"/></svg></div><div><strong>拍票据</strong><span>上传并识别</span></div></div>
|
||
<div class="quick"><div class="icon-tile purple"><svg class="i"><use href="#shield"/></svg></div><div><strong>移动审批</strong><span>2 单待处理</span></div></div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="expense-item"><div class="icon-tile"><svg class="i"><use href="#plane"/></svg></div><div><div class="item-title">上海客户拜访</div><div class="item-sub">财务复核中 · REQ-0422</div></div><div class="money">¥3,280</div></div>
|
||
<div class="expense-item"><div class="icon-tile gold"><svg class="i"><use href="#meal"/></svg></div><div><div class="item-title">客户招待费</div><div class="item-sub">待补同行人员</div></div><span class="chip gold">待补</span></div>
|
||
</div>
|
||
</div>
|
||
<nav class="bottom-nav"><div class="nav active"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>03 出差申请</h2><p>二级页面使用 chevron 返回，表单项配图标。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">申请出差</div><div class="icon-btn"><svg class="i"><use href="#more"/></svg></div></div>
|
||
<div class="card">
|
||
<div class="field"><label>出差事由</label><div class="value">上海客户拜访</div></div>
|
||
<div class="field"><label>目的地</label><div class="value"><span><svg class="i" style="width:16px;height:16px;vertical-align:-3px"><use href="#map"/></svg> 上海市</span><span class="chip">变更</span></div></div>
|
||
<div class="field"><label>日期</label><div class="value"><span><svg class="i" style="width:16px;height:16px;vertical-align:-3px"><use href="#calendar"/></svg> 06-12 至 06-14</span></div></div>
|
||
<div class="field"><label>客户 / 项目</label><div class="value">Northstar 项目</div></div>
|
||
<div class="field"><label>同行人员</label><div class="value">李四、王五</div></div>
|
||
</div>
|
||
<div class="metric-row"><div class="metric"><strong>3 天</strong><span>预计行程</span></div><div class="metric"><strong>¥2,600</strong><span>预算合计</span></div></div>
|
||
<div class="panel"><div class="summary-line"><span>交通预算</span><strong>¥900</strong></div><div class="summary-line"><span>住宿预算</span><strong>¥1,200</strong></div><div class="summary-line"><span>餐补预算</span><strong>¥500</strong></div></div>
|
||
</div>
|
||
<div class="fixed-action"><div class="btn">提交出差申请</div></div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav active"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>04 记一笔</h2><p>金额为视觉中心，费用类型和票据作为下一步。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">记一笔</div><div class="icon-btn"><svg class="i"><use href="#mic"/></svg></div></div>
|
||
<div class="card">
|
||
<div class="field"><label>金额</label><div class="value total">¥ 320.00</div></div>
|
||
<div class="field"><label>费用类型</label><div class="value"><span><svg class="i" style="width:17px;height:17px;vertical-align:-3px"><use href="#meal"/></svg> 业务招待费</span><span class="chip">选择</span></div></div>
|
||
<div class="field"><label>发生时间</label><div class="value"><span><svg class="i" style="width:17px;height:17px;vertical-align:-3px"><use href="#clock"/></svg> 今天 18:30</span></div></div>
|
||
<div class="field"><label>说明</label><div class="value"><span class="placeholder">客户名称、招待事由</span></div></div>
|
||
</div>
|
||
<div class="panel" style="margin-top:10px"><div class="expense-item" style="border:0;padding:0"><div class="icon-tile blue"><svg class="i"><use href="#camera"/></svg></div><div><div class="item-title">票据</div><div class="item-sub">可现在拍，也可提交前补</div></div><span class="chip blue">拍照</span></div></div>
|
||
</div>
|
||
<div class="fixed-action"><div class="btn">保存费用</div></div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav active"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>05 拍票据</h2><p>取景框和底部按钮更像真实相机页，保留相册和批量上传。</p></div>
|
||
<div class="phone"><div class="screen dark">
|
||
<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="content no-nav">
|
||
<div class="appbar"><div class="icon-btn ghost"><span class="chev"><</span></div><div class="screen-title">拍票据</div><div class="icon-btn ghost"><svg class="i"><use href="#more"/></svg></div></div>
|
||
<div class="camera-view"><div class="camera-frame"></div><div class="camera-tip">对齐票据边缘，保持文字清晰</div></div>
|
||
<div class="shutter-row"><div class="btn secondary"><svg class="i"><use href="#receipt"/></svg>相册</div><div class="shutter"></div><div class="btn secondary"><svg class="i"><use href="#upload"/></svg>批量</div></div>
|
||
<div style="height:12px"></div>
|
||
<p class="copy" style="text-align:center">支持发票、小票、行程单，单张不超过 20MB。</p>
|
||
</div>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>06 识别确认</h2><p>识别结果以费用卡片呈现，员工先确认再入账。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">识别结果</div><div class="icon-btn"><svg class="i"><use href="#camera"/></svg></div></div>
|
||
<div class="receipt-row"><div class="receipt">出租车票</div><div class="receipt">餐饮小票</div><div class="receipt">酒店发票</div></div>
|
||
<div style="height:10px"></div>
|
||
<div class="list">
|
||
<div class="expense-item"><div class="icon-tile"><svg class="i"><use href="#car"/></svg></div><div><div class="item-title">市内交通费</div><div class="item-sub">出租车票 · 置信度 94%</div></div><div class="money">¥86</div></div>
|
||
<div class="expense-item"><div class="icon-tile gold"><svg class="i"><use href="#meal"/></svg></div><div><div class="item-title">业务招待费</div><div class="item-sub">需补客户名称</div></div><div class="money">¥320</div></div>
|
||
<div class="expense-item"><div class="icon-tile blue"><svg class="i"><use href="#hotel"/></svg></div><div><div class="item-title">住宿费</div><div class="item-sub">酒店发票 · 已识别</div></div><div class="money">¥900</div></div>
|
||
</div>
|
||
<div class="panel" style="margin-top:10px"><span class="chip gold"><svg class="i" style="width:14px;height:14px"><use href="#alert"/></svg> 待补：客户名称、同行人员</span></div>
|
||
</div>
|
||
<div class="fixed-action"><div class="btn">确认并加入记账</div></div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav active"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>07 提交报销</h2><p>提交前强调合计、附件数量和缺失检查。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">提交报销</div><div class="icon-btn"><svg class="i"><use href="#more"/></svg></div></div>
|
||
<div class="card"><div class="summary-line"><span>报销类型</span><strong>差旅报销</strong></div><div class="summary-line"><span>关联出差</span><strong>上海客户拜访</strong></div><div class="summary-line"><span>费用条目</span><strong>5 项</strong></div><div class="summary-line"><span>附件票据</span><strong>5 张</strong></div><div class="summary-line"><span>合计金额</span><strong class="total">¥3,280</strong></div></div>
|
||
<div style="height:10px"></div>
|
||
<div class="list">
|
||
<div class="expense-item"><div class="icon-tile"><svg class="i"><use href="#check"/></svg></div><div><div class="item-title">发票金额与明细一致</div><div class="item-sub">已通过</div></div><span class="chip">正常</span></div>
|
||
<div class="expense-item"><div class="icon-tile gold"><svg class="i"><use href="#alert"/></svg></div><div><div class="item-title">餐费需补同行人员</div><div class="item-sub">否则可能被退回</div></div><span class="chip gold">需补</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="fixed-action"><div class="btn-row"><div class="btn secondary">保存草稿</div><div class="btn">提交审批</div></div></div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav active"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>08 单据进度</h2><p>列表加搜索、筛选和图标状态，减少“数据表”味道。</p></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="content">
|
||
<div class="appbar"><div class="title-stack"><div class="screen-title">单据进度</div><div class="eyebrow">3 单审批中 · 1 单待补</div></div><div class="icon-btn"><svg class="i"><use href="#filter"/></svg></div></div>
|
||
<div class="tabs"><span class="tab active">全部</span><span class="tab">草稿</span><span class="tab">审批中</span><span class="tab">待补</span></div>
|
||
<div class="list">
|
||
<div class="expense-item"><div class="icon-tile"><svg class="i"><use href="#plane"/></svg></div><div><div class="item-title">上海客户拜访</div><div class="item-sub">REQ-0422 · 财务复核</div></div><span class="chip blue">审批中</span></div>
|
||
<div class="expense-item"><div class="icon-tile gold"><svg class="i"><use href="#meal"/></svg></div><div><div class="item-title">客户招待费</div><div class="item-sub">REQ-0458 · 待补同行</div></div><span class="chip gold">待补</span></div>
|
||
<div class="expense-item"><div class="icon-tile blue"><svg class="i"><use href="#receipt"/></svg></div><div><div class="item-title">办公采购</div><div class="item-sub">REQ-0431 · 已打款</div></div><span class="chip">完成</span></div>
|
||
<div class="expense-item"><div class="icon-tile purple"><svg class="i"><use href="#wallet"/></svg></div><div><div class="item-title">市内交通</div><div class="item-sub">草稿 · 2 张票据</div></div><span class="chip purple">草稿</span></div>
|
||
</div>
|
||
</div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav active"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>09 报销详情</h2><p>详情页突出当前节点，用时间线展示审批真实进度。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">报销详情</div><div class="icon-btn"><svg class="i"><use href="#more"/></svg></div></div>
|
||
<div class="hero-panel"><span class="chip gold">财务复核中</span><h3>上海客户拜访</h3><p class="copy">REQ-2026-0422 · 合计 ¥3,280</p></div>
|
||
<div style="height:10px"></div>
|
||
<div class="card"><div class="card-title" style="font-weight:950;margin-bottom:10px">审批进度</div><div class="timeline"><div class="step done"><strong>已提交</strong><span>张三 · 06-02 10:20</span></div><div class="step done"><strong>主管审批通过</strong><span>李四 · 06-02 15:08</span></div><div class="step current"><strong>财务复核中</strong><span>预计今天 18:00 前处理</span></div><div class="step"><strong>待打款</strong><span>复核通过后自动进入</span></div></div></div>
|
||
<div style="height:10px"></div>
|
||
<div class="card"><div class="summary-line"><span>交通</span><strong>¥860</strong></div><div class="summary-line"><span>住宿</span><strong>¥900</strong></div><div class="summary-line"><span>餐饮</span><strong>¥520</strong></div></div>
|
||
</div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav active"><svg class="i"><use href="#receipt"/></svg>单据</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
|
||
<article class="screen-block">
|
||
<div class="screen-note"><h2>10 移动审批</h2><p>审批页展示风险、票据、意见，底部固定驳回/转交/同意。</p></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="content">
|
||
<div class="appbar"><div class="icon-btn"><span class="chev"><</span></div><div class="screen-title">审批详情</div><div class="icon-btn"><svg class="i"><use href="#send"/></svg></div></div>
|
||
<div class="hero-panel"><span class="chip gold">待我审批</span><h3>差旅报销 · 李四</h3><p class="copy">销售部 · 上海客户拜访 · ¥3,280</p></div>
|
||
<div style="height:10px"></div>
|
||
<div class="list">
|
||
<div class="expense-item"><div class="icon-tile gold"><svg class="i"><use href="#alert"/></svg></div><div><div class="item-title">酒店费用接近标准上限</div><div class="item-sub">建议关注城市和住宿天数</div></div><span class="chip gold">关注</span></div>
|
||
<div class="expense-item"><div class="icon-tile"><svg class="i"><use href="#check"/></svg></div><div><div class="item-title">未发现重复报销风险</div><div class="item-sub">票据号码未重复</div></div><span class="chip">正常</span></div>
|
||
</div>
|
||
<div style="height:10px"></div>
|
||
<div class="card"><div class="field"><label>审批意见</label><div class="value"><span class="placeholder">选填，驳回时建议填写原因</span></div></div></div>
|
||
</div>
|
||
<div class="fixed-action"><div class="btn-row" style="grid-template-columns:1fr 1fr 1.2fr"><div class="btn danger">驳回</div><div class="btn secondary">转交</div><div class="btn blue">同意</div></div></div>
|
||
<nav class="bottom-nav"><div class="nav"><svg class="i"><use href="#home"/></svg>首页</div><div class="nav"><svg class="i"><use href="#wallet"/></svg>记账</div><div class="nav"><svg class="i"><use href="#camera"/></svg>拍票</div><div class="nav active"><svg class="i"><use href="#shield"/></svg>审批</div><div class="nav"><svg class="i"><use href="#user"/></svg>我的</div></nav>
|
||
</div></div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|