1178 lines
40 KiB
HTML
1178 lines
40 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>员工报销助手 Android 界面设计稿</title>
|
|
<style>
|
|
:root {
|
|
--ink: #111827;
|
|
--muted: #64748b;
|
|
--faint: #94a3b8;
|
|
--line: #e2e8f0;
|
|
--panel: #ffffff;
|
|
--canvas: #f6f7f4;
|
|
--warm: #ca8a04;
|
|
--warm-soft: #fff7df;
|
|
--blue: #1e40af;
|
|
--blue-soft: #e8eefc;
|
|
--teal: #0f766e;
|
|
--teal-soft: #e4f7f3;
|
|
--red: #dc2626;
|
|
--red-soft: #fee2e2;
|
|
--shadow: 0 20px 50px rgba(17, 24, 39, 0.14);
|
|
--radius: 8px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
linear-gradient(180deg, #faf7ef 0, #f6f7f4 360px),
|
|
var(--canvas);
|
|
color: var(--ink);
|
|
font-family: "Source Sans 3", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
|
|
line-height: 1.5;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.page {
|
|
max-width: 1680px;
|
|
margin: 0 auto;
|
|
padding: 36px 32px 64px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 360px;
|
|
gap: 24px;
|
|
align-items: stretch;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.hero-main,
|
|
.hero-side {
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.84);
|
|
box-shadow: 0 16px 42px rgba(17, 24, 39, 0.08);
|
|
}
|
|
|
|
.hero-main {
|
|
padding: 28px;
|
|
}
|
|
|
|
.hero-side {
|
|
padding: 22px;
|
|
}
|
|
|
|
.label {
|
|
display: inline-flex;
|
|
min-height: 28px;
|
|
align-items: center;
|
|
border: 1px solid #ead28a;
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
background: var(--warm-soft);
|
|
color: #8a5b00;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 920px;
|
|
margin: 14px 0 10px;
|
|
font-family: "Lexend", "Microsoft YaHei UI", sans-serif;
|
|
font-size: 34px;
|
|
line-height: 1.18;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hero p {
|
|
max-width: 880px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.principles {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.principle {
|
|
display: grid;
|
|
grid-template-columns: 86px minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
padding: 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.principle strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.principle span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.screen-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(300px, 1fr));
|
|
gap: 26px;
|
|
align-items: start;
|
|
}
|
|
|
|
.screen-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.screen-meta {
|
|
min-height: 92px;
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
}
|
|
|
|
.screen-meta h2 {
|
|
margin: 0 0 6px;
|
|
font-size: 17px;
|
|
font-family: "Lexend", "Microsoft YaHei UI", sans-serif;
|
|
}
|
|
|
|
.screen-meta p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.phone {
|
|
width: 300px;
|
|
height: 660px;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
border-radius: 28px;
|
|
background: #111827;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.glass {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 22px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 28px;
|
|
padding: 0 16px;
|
|
color: var(--ink);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.system-icons {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.signal,
|
|
.wifi,
|
|
.battery {
|
|
display: inline-block;
|
|
border: 1.7px solid var(--ink);
|
|
}
|
|
|
|
.signal {
|
|
width: 12px;
|
|
height: 10px;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
transform: skew(-8deg);
|
|
}
|
|
|
|
.wifi {
|
|
width: 12px;
|
|
height: 8px;
|
|
border-bottom: 0;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
.battery {
|
|
width: 18px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--ink) 65%, transparent 65%);
|
|
}
|
|
|
|
.app {
|
|
height: calc(100% - 28px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 12px 14px 86px;
|
|
}
|
|
|
|
.content.no-tab {
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.top-title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
font-family: "Lexend", "Microsoft YaHei UI", sans-serif;
|
|
}
|
|
|
|
.small-action {
|
|
min-width: 34px;
|
|
height: 34px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.brand-block {
|
|
padding: 18px 0 14px;
|
|
}
|
|
|
|
.brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 9px;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.headline {
|
|
font-family: "Lexend", "Microsoft YaHei UI", sans-serif;
|
|
font-size: 26px;
|
|
line-height: 1.18;
|
|
font-weight: 900;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.copy {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--panel);
|
|
padding: 12px;
|
|
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.04);
|
|
}
|
|
|
|
.card + .card,
|
|
.field + .field,
|
|
.row + .row {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0 0 8px;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 44px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
padding: 10px 12px;
|
|
background: var(--warm);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.btn.secondary {
|
|
background: #fff;
|
|
border-color: var(--line);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.btn.blue {
|
|
background: var(--blue);
|
|
}
|
|
|
|
.btn.danger {
|
|
background: #fff;
|
|
border-color: #fecaca;
|
|
color: var(--red);
|
|
}
|
|
|
|
.btn-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 9px;
|
|
}
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: 5px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.field:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.field label {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.field-value {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.placeholder {
|
|
color: var(--faint);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 9px;
|
|
margin: 13px 0;
|
|
}
|
|
|
|
.metric {
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
}
|
|
|
|
.metric strong {
|
|
display: block;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.metric span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.quick-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 9px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.quick {
|
|
min-height: 86px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
display: grid;
|
|
align-content: space-between;
|
|
}
|
|
|
|
.quick .line-icon {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.quick strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quick span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.line-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.line-icon svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.hero-panel {
|
|
border: 1px solid #ead28a;
|
|
border-radius: var(--radius);
|
|
background: linear-gradient(135deg, #fff, var(--warm-soft));
|
|
padding: 13px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.hero-panel strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
line-height: 1.25;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 11px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 38px;
|
|
height: 38px;
|
|
flex: none;
|
|
border-radius: var(--radius);
|
|
background: var(--blue-soft);
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--blue);
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar.teal {
|
|
background: var(--teal-soft);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.avatar.warm {
|
|
background: var(--warm-soft);
|
|
color: #8a5b00;
|
|
}
|
|
|
|
.item-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-sub {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
min-height: 24px;
|
|
align-items: center;
|
|
border-radius: 999px;
|
|
padding: 2px 8px;
|
|
background: var(--blue-soft);
|
|
color: var(--blue);
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.chip.warm {
|
|
background: var(--warm-soft);
|
|
color: #8a5b00;
|
|
}
|
|
|
|
.chip.teal {
|
|
background: var(--teal-soft);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.chip.red {
|
|
background: var(--red-soft);
|
|
color: var(--red);
|
|
}
|
|
|
|
.bottom-nav {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 70px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 2px;
|
|
border-top: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
padding: 8px 8px 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 3px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: var(--warm);
|
|
}
|
|
|
|
.nav-item .line-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.tab-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab {
|
|
min-height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 4px 10px;
|
|
background: #fff;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab.active {
|
|
border-color: #ead28a;
|
|
background: var(--warm-soft);
|
|
color: #8a5b00;
|
|
}
|
|
|
|
.camera-box {
|
|
position: relative;
|
|
height: 240px;
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px),
|
|
linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
|
|
#101827;
|
|
background-size: 34px 34px;
|
|
overflow: hidden;
|
|
border: 1px solid #0f172a;
|
|
color: #fff;
|
|
}
|
|
|
|
.scan-frame {
|
|
position: absolute;
|
|
left: 32px;
|
|
right: 32px;
|
|
top: 54px;
|
|
height: 130px;
|
|
border: 2px solid #f8d873;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.scan-frame::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 12px;
|
|
right: 12px;
|
|
top: 62px;
|
|
height: 2px;
|
|
background: #f8d873;
|
|
box-shadow: 0 0 12px #f8d873;
|
|
}
|
|
|
|
.camera-copy {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 18px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.shutter {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 999px;
|
|
border: 6px solid #fff;
|
|
background: var(--warm);
|
|
margin: 14px auto 0;
|
|
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.2);
|
|
}
|
|
|
|
.receipt-thumb-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.receipt-thumb {
|
|
height: 70px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(135deg, #fff 0, #fff 48%, #f8fafc 48%, #f8fafc 100%);
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 10px;
|
|
bottom: 14px;
|
|
width: 2px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.step {
|
|
position: relative;
|
|
padding: 0 0 15px;
|
|
}
|
|
|
|
.step::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -19px;
|
|
top: 4px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
border: 2px solid var(--line);
|
|
}
|
|
|
|
.step.done::before {
|
|
background: var(--teal);
|
|
border-color: var(--teal);
|
|
}
|
|
|
|
.step.current::before {
|
|
background: var(--warm);
|
|
border-color: var(--warm);
|
|
}
|
|
|
|
.step strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.step span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.fixed-action {
|
|
position: absolute;
|
|
left: 14px;
|
|
right: 14px;
|
|
bottom: 82px;
|
|
display: grid;
|
|
gap: 8px;
|
|
background: linear-gradient(180deg, rgba(248,250,252,0), #f8fafc 25%);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.approval-bar {
|
|
grid-template-columns: 1fr 1fr 1.2fr;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.summary-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.summary-row span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.summary-row strong {
|
|
text-align: right;
|
|
}
|
|
|
|
.amount-total {
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
font-family: "Lexend", "Microsoft YaHei UI", sans-serif;
|
|
}
|
|
|
|
@media (max-width: 1560px) {
|
|
.screen-grid {
|
|
grid-template-columns: repeat(4, minmax(300px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
.screen-grid {
|
|
grid-template-columns: repeat(3, minmax(300px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.screen-grid {
|
|
grid-template-columns: repeat(2, minmax(300px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.page {
|
|
padding: 22px 12px 40px;
|
|
}
|
|
.screen-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.phone {
|
|
width: min(300px, 100%);
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg width="0" height="0" style="position:absolute">
|
|
<symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11.5 12 4l8 7.5"/><path d="M6.5 10.5V20h5v-5h3v5h5v-9.5"/></symbol>
|
|
<symbol id="i-doc" viewBox="0 0 24 24"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/><path d="M9.5 13h7"/><path d="M9.5 17h5"/></symbol>
|
|
<symbol id="i-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="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.6-4 4.2-6 8-6s6.4 2 8 6"/></symbol>
|
|
<symbol id="i-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="i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
|
|
<symbol id="i-money" viewBox="0 0 24 24"><path d="M4 7h16v12H4z"/><path d="M8 11h5a2 2 0 0 1 0 4H8"/><path d="M10 9v8"/></symbol>
|
|
<symbol id="i-approve" 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>
|
|
</svg>
|
|
|
|
<main class="page">
|
|
<section class="hero">
|
|
<div class="hero-main">
|
|
<span class="label">Android-first UI proposal</span>
|
|
<h1>员工报销助手：面向普通员工的简洁移动报销应用设计稿</h1>
|
|
<p>
|
|
本稿舍弃旧版浅绿设计，改为低干扰的企业工具界面。核心路径是：
|
|
申请出差、记一笔、拍票据、提交报销、查看进度、移动审批。界面优先服务员工快速完成动作。
|
|
</p>
|
|
</div>
|
|
<div class="hero-side">
|
|
<span class="label">设计原则</span>
|
|
<div class="principles">
|
|
<div class="principle"><strong>单屏单目标</strong><span>每个页面只突出一个主操作，减少移动端误触。</span></div>
|
|
<div class="principle"><strong>先记账后报销</strong><span>员工可以随手记费用，后续合并提交申请。</span></div>
|
|
<div class="principle"><strong>拍照即暂存</strong><span>拍票据先识别和预览，不默认创建正式报销单。</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="screen-grid">
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>01 登录与身份确认</h2>
|
|
<p>进入 App 后确认当前员工身份，后续请求带用户上下文。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content no-tab">
|
|
<div class="brand-block">
|
|
<div class="brand-row"><div class="brand-mark">XF</div><div><div class="brand-name">X-Financial</div><div class="muted">员工报销助手</div></div></div>
|
|
<h3 class="headline">用手机完成报销，不再攒票据。</h3>
|
|
<p class="copy">申请出差、记账、拍票据、查看审批进度，都在一个入口完成。</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="field"><label>账号</label><div class="field-value">zhangsan</div></div>
|
|
<div class="field"><label>部门</label><div class="field-value">销售部</div></div>
|
|
<div class="field"><label>角色</label><div class="field-value">员工 / 可发起报销</div></div>
|
|
</div>
|
|
<div style="height:14px"></div>
|
|
<div class="btn">进入报销助手</div>
|
|
<div style="height:9px"></div>
|
|
<div class="btn secondary">切换账号</div>
|
|
</div></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>02 首页工作台</h2>
|
|
<p>首页只放员工最高频动作：申请出差、记账、拍票据、看进度。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div><div class="muted">上午好，张三</div><div class="top-title">报销助手</div></div><div class="small-action">消息</div></div>
|
|
<div class="hero-panel">
|
|
<strong>今天先处理哪件事？</strong>
|
|
<p class="copy">可先记账和拍票据，月底再合并提交。</p>
|
|
</div>
|
|
<div class="quick-grid">
|
|
<div class="quick"><span class="line-icon"><svg><use href="#i-plane"/></svg></span><div><strong>申请出差</strong><span>目的地与预算</span></div></div>
|
|
<div class="quick"><span class="line-icon"><svg><use href="#i-money"/></svg></span><div><strong>记一笔</strong><span>先记录费用</span></div></div>
|
|
<div class="quick"><span class="line-icon"><svg><use href="#i-camera"/></svg></span><div><strong>拍票据</strong><span>识别发票小票</span></div></div>
|
|
<div class="quick"><span class="line-icon"><svg><use href="#i-doc"/></svg></span><div><strong>看进度</strong><span>3 单审批中</span></div></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">最近单据</div>
|
|
<div class="list-item"><div class="avatar teal">差</div><div class="item-main"><div class="item-title">上海客户拜访</div><div class="item-sub">REQ-2026-0422 · 主管审批中</div></div><div class="amount">¥3,280</div></div>
|
|
<div class="list-item"><div class="avatar warm">餐</div><div class="item-main"><div class="item-title">客户招待费</div><div class="item-sub">待补充同行人员</div></div><span class="chip warm">待补</span></div>
|
|
</div>
|
|
</div><nav class="bottom-nav">
|
|
<div class="nav-item active"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div>
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div>
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div>
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>03 出差申请</h2>
|
|
<p>员工先提交出差计划，行程和预算进入后续报销上下文。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">申请出差</div><div class="small-action">草稿</div></div>
|
|
<div class="card">
|
|
<div class="field"><label>出差事由</label><div class="field-value">上海客户拜访</div></div>
|
|
<div class="field"><label>目的地</label><div class="field-value">上海市 <span class="muted">更改</span></div></div>
|
|
<div class="field"><label>日期</label><div class="field-value">06-12 至 06-14</div></div>
|
|
<div class="field"><label>客户 / 项目</label><div class="field-value">Northstar 项目</div></div>
|
|
<div class="field"><label>同行人员</label><div class="field-value">李四、王五</div></div>
|
|
</div>
|
|
<div class="metric-grid">
|
|
<div class="metric"><strong>3 天</strong><span>预计行程</span></div>
|
|
<div class="metric"><strong>¥2,600</strong><span>预算合计</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">预算明细</div>
|
|
<div class="summary-row"><span>交通</span><strong>¥900</strong></div>
|
|
<div class="summary-row"><span>住宿</span><strong>¥1,200</strong></div>
|
|
<div class="summary-row"><span>餐补</span><strong>¥500</strong></div>
|
|
</div>
|
|
</div><div class="fixed-action"><div class="btn">提交出差申请</div></div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>04 记一笔费用</h2>
|
|
<p>随手记录费用，允许暂不上传票据，后续可补拍。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">记一笔</div><div class="small-action">保存</div></div>
|
|
<div class="card">
|
|
<div class="field"><label>金额</label><div class="field-value" style="font-size:28px">¥ 320.00</div></div>
|
|
<div class="field"><label>费用类型</label><div class="field-value">业务招待费 <span class="muted">选择</span></div></div>
|
|
<div class="field"><label>发生时间</label><div class="field-value">今天 18:30</div></div>
|
|
<div class="field"><label>商户</label><div class="field-value">海悦餐厅</div></div>
|
|
<div class="field"><label>说明</label><div class="field-value"><span class="placeholder">请输入招待对象与事由</span></div></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">票据</div>
|
|
<div class="btn secondary"><span class="line-icon"><svg><use href="#i-camera"/></svg></span>拍照或上传票据</div>
|
|
</div>
|
|
</div><div class="fixed-action"><div class="btn">保存这笔费用</div></div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>05 拍照上传票据</h2>
|
|
<p>移动端核心能力。取景框明确提示票据位置，底部保留相册入口。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content no-tab">
|
|
<div class="topbar"><div class="small-action">关闭</div><div class="top-title">拍票据</div><div class="small-action">闪光</div></div>
|
|
<div class="camera-box">
|
|
<div class="scan-frame"></div>
|
|
<div class="camera-copy">将发票或小票放入框内，保持文字清晰</div>
|
|
</div>
|
|
<div class="shutter"></div>
|
|
<div style="height:12px"></div>
|
|
<div class="btn-row">
|
|
<div class="btn secondary">从相册选择</div>
|
|
<div class="btn secondary">批量上传</div>
|
|
</div>
|
|
<div style="height:12px"></div>
|
|
<div class="card">
|
|
<div class="card-title">上传规则</div>
|
|
<p class="copy">支持发票、小票、行程单。单张不超过 20MB。</p>
|
|
</div>
|
|
</div></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>06 票据识别确认</h2>
|
|
<p>识别结果先展示给员工确认，不直接写入正式报销单。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">识别结果</div><div class="small-action">重识别</div></div>
|
|
<div class="receipt-thumb-row">
|
|
<div class="receipt-thumb">出租车票</div>
|
|
<div class="receipt-thumb">餐饮小票</div>
|
|
<div class="receipt-thumb">酒店发票</div>
|
|
</div>
|
|
<div style="height:10px"></div>
|
|
<div class="card">
|
|
<div class="card-title">AI 建议分类</div>
|
|
<div class="list-item"><div class="avatar teal">车</div><div class="item-main"><div class="item-title">市内交通费</div><div class="item-sub">出租车票 · 置信度 92%</div></div><div class="amount">¥86</div></div>
|
|
<div class="list-item"><div class="avatar warm">餐</div><div class="item-main"><div class="item-title">业务招待费</div><div class="item-sub">餐饮小票 · 待补客户名称</div></div><div class="amount">¥320</div></div>
|
|
<div class="list-item"><div class="avatar">住</div><div class="item-main"><div class="item-title">住宿费</div><div class="item-sub">酒店发票 · 已识别</div></div><div class="amount">¥900</div></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">需补充</div>
|
|
<span class="chip warm">业务招待对象</span>
|
|
<span class="chip warm" style="margin-left:5px">同行人员</span>
|
|
</div>
|
|
</div><div class="fixed-action"><div class="btn">确认并加入记账</div></div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>07 提交报销申请</h2>
|
|
<p>把记账项合并成报销申请，提交前展示缺失项和风险提示。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">提交报销</div><div class="small-action">草稿</div></div>
|
|
<div class="card">
|
|
<div class="summary-row"><span>报销类型</span><strong>差旅报销</strong></div>
|
|
<div class="summary-row"><span>关联出差</span><strong>上海客户拜访</strong></div>
|
|
<div class="summary-row"><span>费用条目</span><strong>5 项</strong></div>
|
|
<div class="summary-row"><span>附件票据</span><strong>5 张</strong></div>
|
|
<div class="summary-row"><span>合计金额</span><strong class="amount-total">¥3,280</strong></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">提交前检查</div>
|
|
<div class="list-item"><div class="avatar teal"><span class="line-icon"><svg><use href="#i-check"/></svg></span></div><div class="item-main"><div class="item-title">发票金额与明细一致</div><div class="item-sub">已通过</div></div><span class="chip teal">正常</span></div>
|
|
<div class="list-item"><div class="avatar warm">!</div><div class="item-main"><div class="item-title">餐费需补充同行人员</div><div class="item-sub">提交后可能被退回</div></div><span class="chip warm">需补</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-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>08 单据进度列表</h2>
|
|
<p>员工查看全部单据，按草稿、审批中、待补充、已完成筛选。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="top-title">单据进度</div><div class="small-action">筛选</div></div>
|
|
<div class="tab-row"><span class="tab active">全部</span><span class="tab">草稿</span><span class="tab">审批中</span><span class="tab">待补</span></div>
|
|
<div class="card">
|
|
<div class="list-item"><div class="avatar teal">差</div><div class="item-main"><div class="item-title">上海客户拜访</div><div class="item-sub">REQ-2026-0422 · 财务复核</div></div><span class="chip">审批中</span></div>
|
|
<div class="list-item"><div class="avatar warm">餐</div><div class="item-main"><div class="item-title">客户招待费</div><div class="item-sub">REQ-2026-0458 · 部门经理退回</div></div><span class="chip warm">待补</span></div>
|
|
<div class="list-item"><div class="avatar">采</div><div class="item-main"><div class="item-title">办公采购</div><div class="item-sub">REQ-2026-0431 · 已打款</div></div><span class="chip teal">完成</span></div>
|
|
<div class="list-item"><div class="avatar">交</div><div class="item-main"><div class="item-title">市内交通</div><div class="item-sub">草稿 · 2 张票据</div></div><span class="chip warm">草稿</span></div>
|
|
</div>
|
|
</div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>09 单据进度详情</h2>
|
|
<p>突出当前节点和下一步动作，员工知道为什么卡住、该补什么。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">报销详情</div><div class="small-action">更多</div></div>
|
|
<div class="hero-panel">
|
|
<span class="chip">财务复核中</span>
|
|
<div style="height:8px"></div>
|
|
<strong>上海客户拜访</strong>
|
|
<p class="copy">REQ-2026-0422 · 合计 ¥3,280</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">审批进度</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 class="card">
|
|
<div class="card-title">费用明细</div>
|
|
<div class="summary-row"><span>交通</span><strong>¥860</strong></div>
|
|
<div class="summary-row"><span>住宿</span><strong>¥900</strong></div>
|
|
<div class="summary-row"><span>餐饮</span><strong>¥520</strong></div>
|
|
</div>
|
|
</div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-doc"/></svg></span>单据</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
|
|
<article class="screen-card">
|
|
<div class="screen-meta">
|
|
<h2>10 移动审批详情</h2>
|
|
<p>审批人直接看到金额、风险、票据和流程，底部固定审批动作。</p>
|
|
</div>
|
|
<div class="phone"><div class="glass">
|
|
<div class="status"><span>9:41</span><span class="system-icons"><i class="signal"></i><i class="wifi"></i><i class="battery"></i></span></div>
|
|
<div class="app"><div class="content">
|
|
<div class="topbar"><div class="small-action">返回</div><div class="top-title">审批详情</div><div class="small-action">转交</div></div>
|
|
<div class="hero-panel">
|
|
<span class="chip warm">待我审批</span>
|
|
<div style="height:8px"></div>
|
|
<strong>差旅报销 · 李四</strong>
|
|
<p class="copy">销售部 · 上海客户拜访 · ¥3,280</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">AI 风控提示</div>
|
|
<div class="list-item"><div class="avatar warm">!</div><div class="item-main"><div class="item-title">酒店费用接近标准上限</div><div class="item-sub">建议关注住宿天数和城市标准</div></div><span class="chip warm">关注</span></div>
|
|
<div class="list-item"><div class="avatar teal"><span class="line-icon"><svg><use href="#i-check"/></svg></span></div><div class="item-main"><div class="item-title">未发现重复报销风险</div><div class="item-sub">票据号码未重复</div></div><span class="chip teal">正常</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">审批意见</div>
|
|
<div class="field"><label>输入意见</label><div class="field-value"><span class="placeholder">选填，驳回时建议填写原因</span></div></div>
|
|
</div>
|
|
</div><div class="fixed-action"><div class="btn-row approval-bar"><div class="btn danger">驳回</div><div class="btn secondary">转交</div><div class="btn blue">同意</div></div></div><nav class="bottom-nav">
|
|
<div class="nav-item"><span class="line-icon"><svg><use href="#i-home"/></svg></span>首页</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-money"/></svg></span>记账</div><div class="nav-item active"><span class="line-icon"><svg><use href="#i-approve"/></svg></span>审批</div><div class="nav-item"><span class="line-icon"><svg><use href="#i-user"/></svg></span>我的</div>
|
|
</nav></div>
|
|
</div></div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|