488 lines
18 KiB
HTML
488 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>记之 · 纯色配色提案</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--page-ink: #252722;
|
|
--page-muted: #72766c;
|
|
--page-paper: #eeeae0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--page-ink);
|
|
font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
|
|
background: #f3f4f6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-shell {
|
|
width: min(1540px, calc(100% - 40px));
|
|
margin: 0 auto;
|
|
padding: 64px 0 88px;
|
|
}
|
|
|
|
.page-head {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
|
|
align-items: end;
|
|
gap: 42px;
|
|
margin-bottom: 44px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
color: #77756d;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: .18em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
width: 34px;
|
|
height: 2px;
|
|
content: "";
|
|
background: #252722;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
|
|
font-size: clamp(42px, 6vw, 82px);
|
|
font-weight: 700;
|
|
letter-spacing: -.06em;
|
|
line-height: .98;
|
|
}
|
|
|
|
h1 span { color: #202124; }
|
|
|
|
.intro {
|
|
max-width: 580px;
|
|
margin: 22px 0 0;
|
|
color: var(--page-muted);
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.brief {
|
|
padding: 22px 24px;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 18px;
|
|
background: #ffffff;
|
|
|
|
}
|
|
|
|
.brief strong {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.brief p {
|
|
margin: 0;
|
|
color: var(--page-muted);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.concept-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
|
|
.concept {
|
|
--bg: #f5f3ed;
|
|
--surface: #ffffff;
|
|
--primary: #2f5d50;
|
|
--primary-soft: #dde8e1;
|
|
--accent: #d68f4c;
|
|
--ink: #1d2a25;
|
|
--muted: #6f776f;
|
|
--line: #d8d8ce;
|
|
--expense: #c75b50;
|
|
--income: #347b66;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 22px;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 28px;
|
|
background: #ffffff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.concept::after { display: none; }
|
|
|
|
.concept-head {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.concept-index {
|
|
color: var(--primary);
|
|
font-family: Georgia, serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: .16em;
|
|
}
|
|
|
|
.concept h2 {
|
|
margin: 4px 0 5px;
|
|
color: var(--ink);
|
|
font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif;
|
|
font-size: 27px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.concept-note {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.recommend {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--primary);
|
|
border-radius: 999px;
|
|
color: var(--primary);
|
|
background: var(--primary-soft);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.swatches {
|
|
display: flex;
|
|
gap: 7px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.swatch {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid #ffffff;
|
|
border-radius: 50%;
|
|
background: var(--swatch);
|
|
box-shadow: 0 0 0 1px rgba(37, 39, 34, .12);
|
|
}
|
|
|
|
.phone {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(100%, 334px);
|
|
height: 696px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border: 7px solid #242622;
|
|
border-radius: 43px;
|
|
color: var(--ink);
|
|
background: var(--bg);
|
|
box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 33px;
|
|
padding: 7px 19px 0;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.status-icons { display: flex; gap: 5px; align-items: center; }
|
|
.signal { width: 12px; height: 7px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: skew(-15deg); }
|
|
.battery { width: 16px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
|
|
.battery::after { display: block; width: 10px; height: 4px; margin: 1px; content: ""; background: currentColor; }
|
|
|
|
.app-content {
|
|
height: calc(100% - 33px);
|
|
padding: 9px 16px 78px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.brand { display: flex; align-items: center; gap: 9px; }
|
|
.brand img { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; object-fit: cover; }
|
|
.brand-name { font-family: "LXGW WenKai", "STKaiti", "KaiTi", serif; font-size: 19px; font-weight: 800; }
|
|
.brand-sub { margin-top: 1px; color: var(--muted); font-size: 9px; }
|
|
|
|
.avatar {
|
|
display: grid;
|
|
width: 31px;
|
|
height: 31px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: var(--surface);
|
|
background: var(--primary);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.balance-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 17px 18px 16px;
|
|
border-radius: 22px;
|
|
color: var(--surface);
|
|
background: var(--primary);
|
|
}
|
|
|
|
.balance-card::after { display: none; }
|
|
|
|
.balance-label { opacity: .78; font-size: 10px; }
|
|
.balance { margin: 3px 0 13px; font-family: Georgia, serif; font-size: 31px; font-weight: 700; letter-spacing: -.04em; }
|
|
.balance-meta { display: flex; gap: 25px; font-size: 10px; }
|
|
.balance-meta b { display: block; margin-top: 2px; font-size: 13px; }
|
|
|
|
.quick-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
margin: 13px 0;
|
|
}
|
|
|
|
.quick {
|
|
padding: 10px 2px 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.quick-icon {
|
|
display: grid;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: 0 auto 5px;
|
|
place-items: center;
|
|
border-radius: 10px;
|
|
color: var(--primary);
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
.quick:nth-child(2) .quick-icon { color: var(--primary); background: var(--primary-soft); }
|
|
.quick:nth-child(3) .quick-icon { color: var(--primary); background: var(--primary-soft); }
|
|
.quick:nth-child(4) .quick-icon { color: var(--primary); background: var(--primary-soft); }
|
|
.quick span { font-size: 9px; font-weight: 700; }
|
|
|
|
.budget-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 13px 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.section-title { font-size: 12px; font-weight: 800; }
|
|
.budget-copy { margin: 4px 0 9px; color: var(--muted); font-size: 9px; }
|
|
.budget-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
|
|
.budget-track i { display: block; width: 63%; height: 100%; border-radius: inherit; background: var(--accent); }
|
|
.budget-number { color: var(--primary); font-family: Georgia, serif; font-size: 17px; font-weight: 800; }
|
|
.budget-number small { display: block; margin-top: 2px; color: var(--muted); font-family: inherit; font-size: 8px; font-weight: 500; text-align: right; }
|
|
|
|
.insight {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin: 11px 0 14px;
|
|
padding: 9px 11px;
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 6px 13px 13px 6px;
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.insight-mark { color: var(--accent); font-family: Georgia, serif; font-size: 18px; font-weight: 800; }
|
|
.insight strong { display: block; font-size: 9px; }
|
|
.insight p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
|
|
|
|
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
|
.list-head a { color: var(--primary); font-size: 8px; font-weight: 700; }
|
|
|
|
.transaction {
|
|
display: grid;
|
|
grid-template-columns: 34px 1fr auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.tx-icon {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border-radius: 12px;
|
|
color: var(--primary);
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
.transaction:nth-of-type(3) .tx-icon { color: var(--primary); background: var(--primary-soft); }
|
|
.transaction:nth-of-type(4) .tx-icon { color: var(--income); background: var(--income-soft); }
|
|
.tx-name { font-size: 10px; font-weight: 800; }
|
|
.tx-note { margin-top: 2px; color: var(--muted); font-size: 8px; }
|
|
.tx-money { font-family: Georgia, serif; font-size: 11px; font-weight: 800; }
|
|
.tx-money.income { color: var(--income); }
|
|
|
|
.bottom-nav {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
height: 68px;
|
|
padding: 8px 10px 9px;
|
|
border-top: 1px solid var(--line);
|
|
background: var(--surface);
|
|
|
|
}
|
|
|
|
.nav-item { display: grid; place-items: center; gap: 2px; color: var(--muted); font-size: 8px; }
|
|
.nav-item.active { color: var(--primary); font-weight: 800; }
|
|
.nav-item.add { transform: translateY(-17px); }
|
|
.add-button { display: grid; width: 43px; height: 43px; place-items: center; border: 4px solid var(--bg); border-radius: 50%; color: var(--surface); background: var(--primary); box-shadow: 0 8px 18px rgba(17, 24, 39, .16); }
|
|
|
|
svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.theme-blue { --bg:#f5f7fa; --surface:#ffffff; --primary:#2563eb; --primary-soft:#e8efff; --accent:#2563eb; --accent-soft:#eef3ff; --ink:#111827; --muted:#667085; --line:#e4e7ec; --expense:#d92d20; --income:#14804a; --income-soft:#e9f7ef; }
|
|
.theme-green { --bg:#f4f7f6; --surface:#ffffff; --primary:#087f6d; --primary-soft:#e3f2ef; --accent:#087f6d; --accent-soft:#edf7f5; --ink:#17201e; --muted:#66736f; --line:#e1e7e5; --expense:#cf3f36; --income:#087f6d; --income-soft:#e3f2ef; }
|
|
.theme-orange { --bg:#f7f7f5; --surface:#ffffff; --primary:#ed5a2b; --primary-soft:#ffebe4; --accent:#ed5a2b; --accent-soft:#fff2ed; --ink:#1c1c1c; --muted:#707070; --line:#e6e6e2; --expense:#cf3f36; --income:#267a52; --income-soft:#e7f4ec; }
|
|
.theme-black { --bg:#f4f4f4; --surface:#ffffff; --primary:#202124; --primary-soft:#ececec; --accent:#202124; --accent-soft:#f0f0f0; --ink:#171717; --muted:#6b6b6b; --line:#e1e1e1; --expense:#d63b32; --income:#24754d; --income-soft:#e8f3ed; }
|
|
@media (max-width: 820px) {
|
|
.page-shell { width: min(100% - 22px, 430px); padding: 38px 0 62px; }
|
|
.page-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
|
|
.concept-grid { grid-template-columns: 1fr; gap: 20px; }
|
|
.concept { padding: 17px; border-radius: 23px; }
|
|
.phone { height: 685px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page-shell">
|
|
<header class="page-head">
|
|
<div>
|
|
<div class="eyebrow">COLOR STUDY · FLAT</div>
|
|
<h1>记之<span>纯色提案</span></h1>
|
|
<p class="intro">所有方案只保留一个品牌主色，不使用渐变、发光或半透明背景。页面结构保持一致，只比较大面积底色、主按钮和状态色是否舒服。</p>
|
|
</div>
|
|
<aside class="brief">
|
|
<strong>这次只看纯色</strong>
|
|
<p>四套方案都采用白色卡片与中性文字，收入和支出只在金额处使用语义色，避免一个页面同时出现过多颜色。</p>
|
|
</aside>
|
|
</header>
|
|
|
|
<section class="concept-grid" id="conceptGrid" aria-label="记之配色方案"></section>
|
|
</main>
|
|
|
|
<script>
|
|
const themes = [
|
|
{ cls: 'theme-blue', index: '01', name: '清爽蓝白', note: '清晰、可靠，最接近成熟工具产品', colors: ['#F5F7FA','#FFFFFF','#2563EB','#111827'] },
|
|
{ cls: 'theme-green', index: '02', name: '克制青绿', note: '温和、耐看，适合长期使用', colors: ['#F4F7F6','#FFFFFF','#087F6D','#17201E'] },
|
|
{ cls: 'theme-orange', index: '03', name: '活力橙黑', note: '直接、轻快，记账操作更醒目', colors: ['#F7F7F5','#FFFFFF','#ED5A2B','#1C1C1C'] },
|
|
{ cls: 'theme-black', index: '04', name: '极简黑白', note: '克制、清楚，与黑白图标最统一', recommended: true, colors: ['#F4F4F4','#FFFFFF','#202124','#171717'] }
|
|
];
|
|
|
|
const icons = {
|
|
mic: '<svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3M9 21h6"/></svg>',
|
|
camera: '<svg viewBox="0 0 24 24"><path d="M4 7h3l1.5-2h7L17 7h3v12H4z"/><circle cx="12" cy="13" r="3.5"/></svg>',
|
|
scan: '<svg viewBox="0 0 24 24"><path d="M8 3H4v4M16 3h4v4M8 21H4v-4M16 21h4v-4M7 12h10"/></svg>',
|
|
sparkle: '<svg viewBox="0 0 24 24"><path d="M12 3c.8 4.3 2.7 6.2 7 7-4.3.8-6.2 2.7-7 7-.8-4.3-2.7-6.2-7-7 4.3-.8 6.2-2.7 7-7z"/></svg>',
|
|
food: '<svg viewBox="0 0 24 24"><path d="M7 3v8M4 3v5c0 2 1 3 3 3s3-1 3-3V3M7 11v10M16 3v18M16 3c3 2 4 5 4 8h-4"/></svg>',
|
|
bus: '<svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="16" rx="3"/><path d="M5 12h14M8 16h.01M16 16h.01M8 21v-2M16 21v-2"/></svg>',
|
|
wallet: '<svg viewBox="0 0 24 24"><path d="M4 6h14a2 2 0 0 1 2 2v11H4zM4 6V4h12v2M15 12h5"/></svg>',
|
|
home: '<svg viewBox="0 0 24 24"><path d="m4 11 8-7 8 7v9h-6v-6h-4v6H4z"/></svg>',
|
|
chart: '<svg viewBox="0 0 24 24"><path d="M4 20V9M10 20V4M16 20v-7M22 20H2"/></svg>',
|
|
chat: '<svg viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 10h8"/></svg>',
|
|
user: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1-5 4-7 8-7s7 2 8 7"/></svg>',
|
|
plus: '<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>'
|
|
};
|
|
|
|
const phone = () => `
|
|
<div class="phone">
|
|
<div class="status"><span>9:41</span><span class="status-icons"><i class="signal"></i><i class="battery"></i></span></div>
|
|
<div class="app-content">
|
|
<div class="app-head">
|
|
<div class="brand">
|
|
<img src="frontend/assets/branding/jizhi-app-icon-1024.png" alt="记之图标">
|
|
<div><div class="brand-name">记之</div><div class="brand-sub">把日子记明白</div></div>
|
|
</div>
|
|
<div class="avatar">之</div>
|
|
</div>
|
|
|
|
<section class="balance-card">
|
|
<div class="balance-label">七月结余</div>
|
|
<div class="balance">¥ 4,286.50</div>
|
|
<div class="balance-meta"><span>收入<b>¥ 8,640</b></span><span>支出<b>¥ 4,353.50</b></span></div>
|
|
</section>
|
|
|
|
<div class="quick-row">
|
|
<div class="quick"><div class="quick-icon">${icons.mic}</div><span>说一笔</span></div>
|
|
<div class="quick"><div class="quick-icon">${icons.camera}</div><span>拍账单</span></div>
|
|
<div class="quick"><div class="quick-icon">${icons.scan}</div><span>截屏记</span></div>
|
|
<div class="quick"><div class="quick-icon">${icons.sparkle}</div><span>问一问</span></div>
|
|
</div>
|
|
|
|
<section class="budget-card">
|
|
<div><div class="section-title">本月预算</div><div class="budget-copy">已使用 63%，节奏刚刚好</div><div class="budget-track"><i></i></div></div>
|
|
<div class="budget-number">¥ 1,847<small>剩余可用</small></div>
|
|
</section>
|
|
|
|
<div class="insight"><div class="insight-mark">i</div><div><strong>今天比平时少花了 18 元</strong><p>晚餐控制得不错，继续按这个节奏。</p></div></div>
|
|
|
|
<div class="list-head"><div class="section-title">今天</div><a>全部明细</a></div>
|
|
<div class="transaction"><div class="tx-icon">${icons.food}</div><div><div class="tx-name">午餐</div><div class="tx-note">园区食堂 · 12:26</div></div><div class="tx-money">- ¥ 28</div></div>
|
|
<div class="transaction"><div class="tx-icon">${icons.bus}</div><div><div class="tx-name">地铁</div><div class="tx-note">交通出行 · 08:41</div></div><div class="tx-money">- ¥ 4</div></div>
|
|
<div class="transaction"><div class="tx-icon">${icons.wallet}</div><div><div class="tx-name">稿费到账</div><div class="tx-note">兼职收入 · 07:30</div></div><div class="tx-money income">+ ¥ 680</div></div>
|
|
</div>
|
|
|
|
<nav class="bottom-nav">
|
|
<div class="nav-item active">${icons.home}<span>明细</span></div>
|
|
<div class="nav-item">${icons.chart}<span>统计</span></div>
|
|
<div class="nav-item add"><div class="add-button">${icons.plus}</div><span>记一笔</span></div>
|
|
<div class="nav-item">${icons.user}<span>我的</span></div>
|
|
</nav>
|
|
</div>`;
|
|
|
|
document.querySelector('#conceptGrid').innerHTML = themes.map(theme => `
|
|
<article class="concept ${theme.cls}">
|
|
<header class="concept-head">
|
|
<div>
|
|
<div class="concept-index">SCHEME ${theme.index}</div>
|
|
<h2>${theme.name}</h2>
|
|
<div class="concept-note">${theme.note}</div>
|
|
<div class="swatches">${theme.colors.map(color => `<i class="swatch" style="--swatch:${color}" title="${color}"></i>`).join('')}</div>
|
|
</div>
|
|
${theme.recommended ? '<span class="recommend">优先推荐</span>' : ''}
|
|
</header>
|
|
${phone()}
|
|
</article>`).join('');
|
|
</script>
|
|
</body>
|
|
</html> |