168 lines
8.4 KiB
HTML
168 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>首页标题图标对照</title>
|
|
<style>
|
|
:root { color-scheme: light; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: #eef2f6;
|
|
color: #12304f;
|
|
font-family: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
|
|
}
|
|
header.page {
|
|
padding: 28px 24px 8px;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
header.page h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: .04em; }
|
|
header.page p { margin: 8px 0 0; color: #5c6b7a; font-size: 14px; line-height: 1.6; }
|
|
main { max-width: 1080px; margin: 0 auto; padding: 16px 24px 48px; display: grid; gap: 22px; }
|
|
section.board {
|
|
background: #fff;
|
|
border: 1px solid #d7e0ea;
|
|
border-radius: 14px;
|
|
padding: 18px 18px 8px;
|
|
}
|
|
section.board > h2 {
|
|
margin: 0 0 14px;
|
|
font-size: 13px;
|
|
letter-spacing: .16em;
|
|
color: #5c6b7a;
|
|
font-weight: 600;
|
|
}
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 44px;
|
|
border-bottom: 1px solid #eef2f6;
|
|
padding: 6px 0 10px;
|
|
}
|
|
.row .name {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: .16em;
|
|
font-family: "Songti SC", "Source Han Serif SC", "Noto Serif SC", serif;
|
|
}
|
|
.row .hint { margin-left: auto; color: #8a97a6; font-size: 12px; letter-spacing: 0; }
|
|
.ico { width: 22px; height: 22px; flex: none; display: block; }
|
|
.brand .ico { color: #0b3a66; }
|
|
.brand .name { color: #12304f; }
|
|
.tech { background: #f7faff; border-color: #d6e4ff; }
|
|
.tech .ico { color: #1677ff; }
|
|
.tech .name {
|
|
font-family: "PingFang SC", "Noto Sans SC", sans-serif;
|
|
letter-spacing: .06em;
|
|
font-size: 18px;
|
|
color: #1677ff;
|
|
}
|
|
.note { font-size: 13px; color: #5c6b7a; margin: 0 0 12px; }
|
|
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="page">
|
|
<h1>首页标题图标对照</h1>
|
|
<p>线框图标，22px，放在栏目标题左侧。上面一栏按 LOGO 蓝的标题字色，下面一栏按科技蓝。确认后再写进正式页面。</p>
|
|
</header>
|
|
<main>
|
|
<section class="board brand">
|
|
<h2>LOGO 蓝</h2>
|
|
<p class="note">新闻、公告、法规、看板、服务对象、荣誉与会员，以及页脚三列。</p>
|
|
<div class="grid" id="brand"></div>
|
|
</section>
|
|
<section class="board tech">
|
|
<h2>科技蓝</h2>
|
|
<div class="grid" id="tech"></div>
|
|
</section>
|
|
</main>
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
|
<symbol id="news" viewBox="0 0 24 24">
|
|
<path d="M5 4.5h11.5A1.5 1.5 0 0 1 18 6v13.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M7.2 19.5h11.3a1.5 1.5 0 0 0 1.5-1.5V7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M8 8.2h7M8 11.4h7M8 14.6h4.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="notice" viewBox="0 0 24 24">
|
|
<path d="M5.5 10.2v3.2a1.6 1.6 0 0 0 1.6 1.6h1.1l1.2 2.4a.8.8 0 0 0 1.4-.4V6.8a.8.8 0 0 0-1.3-.6L8.2 8.6H7.1a1.6 1.6 0 0 0-1.6 1.6Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M14.2 9.2a3.2 3.2 0 0 1 0 5.2M16.4 7.2a6 6 0 0 1 0 9.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="policy" viewBox="0 0 24 24">
|
|
<path d="M7 3.8h7.2L19 8.4V20a1.2 1.2 0 0 1-1.2 1.2H7A1.2 1.2 0 0 1 5.8 20V5A1.2 1.2 0 0 1 7 3.8Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M14 3.8V8.2h4.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M8.4 12.2h6.4M8.4 15.2h4.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<circle cx="15.6" cy="16.2" r="1.7" fill="none" stroke="currentColor" stroke-width="1.4"/>
|
|
</symbol>
|
|
<symbol id="board" viewBox="0 0 24 24">
|
|
<path d="M4.5 19.5h15" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M7 19.5V12.2M12 19.5V8.2M17 19.5V5.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="appraiser" viewBox="0 0 24 24">
|
|
<circle cx="10" cy="8" r="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
<path d="M5.2 18.2c.6-2.6 2.5-3.8 4.8-3.8s4.2 1.2 4.8 3.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M16.2 10.2h3.2v2.1h-3.2z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
|
<path d="M17.8 8.6v1.6M17.8 12.3v1.4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="agency" viewBox="0 0 24 24">
|
|
<path d="M4.5 19.5h15M6.2 19.5V9.2L12 5.2l5.8 4V19.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M10 19.5v-4.2h4V19.5M9.2 11.2h1.6M13.2 11.2h1.6M9.2 14.2h1.6M13.2 14.2h1.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="public" viewBox="0 0 24 24">
|
|
<circle cx="8" cy="8.2" r="2.1" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
<circle cx="15.6" cy="8.6" r="1.8" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
<path d="M3.8 17.8c.5-2.2 2.1-3.3 4.2-3.3s3.7 1.1 4.2 3.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M13.2 14.8c1.2-.4 2.3-.3 3.4.4 1 .7 1.6 1.6 1.9 2.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="honor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="9" r="4.2" fill="none" stroke="currentColor" stroke-width="1.6"/>
|
|
<path d="M12 13.2 10.2 19l1.8-1 1.8 1-1.8-5.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M10.2 9.1 12 7.6l1.8 1.5-.4 2.1H10.6l-.4-2.1Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
|
</symbol>
|
|
<symbol id="member" viewBox="0 0 24 24">
|
|
<path d="M3.8 19.5h16.4M5 19.5V10.2h5.2V19.5M13.2 19.5V7.2H19V19.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M6.6 12.6h1.8M6.6 15.2h1.8M15 9.8h1.8M15 12.6h1.8M15 15.2h1.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="contact" viewBox="0 0 24 24">
|
|
<path d="M7.2 4.8h2.2l1.2 3-1.6 1a9.2 9.2 0 0 0 4.2 4.2l1-1.6 3 1.2v2.2a1.4 1.4 0 0 1-1.5 1.4A12.2 12.2 0 0 1 5.8 6.3a1.4 1.4 0 0 1 1.4-1.5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
</symbol>
|
|
<symbol id="links" viewBox="0 0 24 24">
|
|
<path d="M10 13.2a4 4 0 0 0 5.6.2l2.2-2.2a4 4 0 0 0-5.6-5.6L11 6.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M14 10.8a4 4 0 0 0-5.6-.2L6.2 12.8a4 4 0 0 0 5.6 5.6L13 17.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</symbol>
|
|
<symbol id="compliance" viewBox="0 0 24 24">
|
|
<path d="M12 3.8 19 6.4v5.4c0 4-2.8 6.6-7 8.4-4.2-1.8-7-4.4-7-8.4V6.4L12 3.8Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<path d="M9.2 12.1 11 13.9l3.8-3.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</symbol>
|
|
</svg>
|
|
<script>
|
|
const items = [
|
|
["news", "新闻动态", "折起的报纸"],
|
|
["notice", "通知公告", "喇叭"],
|
|
["policy", "政策法规", "带印章的文件"],
|
|
["board", "数据看板", "柱状图"],
|
|
["appraiser", "估价师", "人员与证件"],
|
|
["agency", "估价机构", "楼宇"],
|
|
["public", "公众", "人群"],
|
|
["honor", "协会荣誉", "奖章"],
|
|
["member", "会员单位", "成排机构"],
|
|
["contact", "联系方式", "电话"],
|
|
["links", "相关链接", "链接"],
|
|
["compliance", "合规链接", "盾牌"],
|
|
]
|
|
for (const id of ["brand", "tech"]) {
|
|
const root = document.getElementById(id)
|
|
for (const [icon, name, hint] of items) {
|
|
const row = document.createElement("div")
|
|
row.className = "row"
|
|
row.innerHTML = `<svg class="ico" aria-hidden="true"><use href="#${icon}"/></svg><span class="name">${name}</span><span class="hint">${hint}</span>`
|
|
root.appendChild(row)
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|