home.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>留氏(衢州)族谱信息管理系统</title>
  7. <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  8. <style>
  9. @font-face {
  10. font-family: "HuakangWeibei";
  11. src: url("{{ home_font('HuakangWeibei.ttf') }}") format("truetype");
  12. font-weight: normal;
  13. font-style: normal;
  14. }
  15. @font-face {
  16. font-family: "AdobeKaiti";
  17. src: url("{{ home_font('AdobeKaitiStd-Regular.otf') }}") format("opentype");
  18. font-weight: normal;
  19. font-style: normal;
  20. }
  21. @font-face {
  22. font-family: "SourceHanSans";
  23. src: url("{{ home_font('SourceHanSansSC-Regular.otf') }}") format("opentype");
  24. font-weight: normal;
  25. font-style: normal;
  26. }
  27. @font-face {
  28. font-family: "SourceHanSerif";
  29. src: url("{{ home_font('SourceHanSerifCN-Regular.otf') }}") format("opentype");
  30. font-weight: normal;
  31. font-style: normal;
  32. }
  33. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  34. body {
  35. min-height: 100vh;
  36. overflow-x: hidden;
  37. background: #f5f2ed;
  38. }
  39. .page-bg {
  40. position: fixed;
  41. inset: 0;
  42. z-index: 0;
  43. background: url("{{ home_img('bg.png') }}") center center / cover no-repeat;
  44. }
  45. .page-wrap {
  46. position: relative;
  47. z-index: 1;
  48. min-height: 100vh;
  49. display: flex;
  50. flex-direction: column;
  51. align-items: center;
  52. padding: 52px 20px 32px;
  53. }
  54. .page-inner {
  55. width: 100%;
  56. max-width: 1058px;
  57. display: flex;
  58. flex-direction: column;
  59. align-items: center;
  60. }
  61. /* Logo */
  62. .logo {
  63. width: 155px;
  64. height: auto;
  65. margin-bottom: 18px;
  66. }
  67. /* 主标题 - 华康魏碑 */
  68. .main-title {
  69. font-family: "HuakangWeibei", "STSong", serif;
  70. font-size: 34px;
  71. font-weight: normal;
  72. color: #1a1008;
  73. letter-spacing: 0.06em;
  74. text-align: center;
  75. line-height: 1.35;
  76. margin-bottom: 8px;
  77. }
  78. /* 副标题 - 思源宋体 */
  79. .edition {
  80. font-family: "SourceHanSerif", "STSong", serif;
  81. font-size: 15px;
  82. color: #6b5840;
  83. letter-spacing: 0.28em;
  84. padding-left: 0.28em;
  85. margin-bottom: 28px;
  86. }
  87. /* 主按钮 */
  88. .action-btns {
  89. display: flex;
  90. gap: 16px;
  91. margin-bottom: 42px;
  92. }
  93. .action-btn {
  94. position: relative;
  95. display: flex;
  96. align-items: center;
  97. justify-content: center;
  98. width: 295px;
  99. height: 62px;
  100. text-decoration: none;
  101. flex-shrink: 0;
  102. background-repeat: no-repeat;
  103. background-position: center;
  104. background-size: 100% 100%;
  105. border: none;
  106. }
  107. .action-btn--members {
  108. background-image: url("{{ home_img('btn-members-gold.png') }}");
  109. }
  110. .action-btn--scan {
  111. background-image: url("{{ home_img('btn-scan-silver.png') }}");
  112. }
  113. .action-btn--members:hover {
  114. background-image: url("{{ home_img('btn-members-gold.png') }}");
  115. }
  116. .action-btn--scan:hover {
  117. background-image: url("{{ home_img('btn-scan-gold.png') }}");
  118. }
  119. .action-btn-text {
  120. position: relative;
  121. z-index: 1;
  122. font-family: "HuakangWeibei", "STSong", serif;
  123. font-size: 21px;
  124. font-weight: normal;
  125. color: #2a1a08;
  126. letter-spacing: 0.18em;
  127. padding-left: 0.18em;
  128. pointer-events: none;
  129. white-space: nowrap;
  130. line-height: 1;
  131. /* 图标区约占左侧 56px,文字在按钮内视觉居中 */
  132. transform: translateX(14px);
  133. }
  134. .action-btn--scan .action-btn-text {
  135. color: #2a2a2a;
  136. transform: translateX(12px);
  137. }
  138. /* 快速导航 */
  139. .nav-section {
  140. width: 100%;
  141. text-align: center;
  142. margin-bottom: 34px;
  143. }
  144. .nav-frame {
  145. display: inline-flex;
  146. align-items: center;
  147. justify-content: center;
  148. width: 232px;
  149. height: 48px;
  150. background: url("{{ home_img('nav-frame.png') }}") center / 100% 100% no-repeat;
  151. margin-bottom: 16px;
  152. }
  153. .nav-frame-title {
  154. font-family: "HuakangWeibei", "STSong", serif;
  155. font-size: 15px;
  156. color: #4a3820;
  157. letter-spacing: 0.45em;
  158. padding-left: 0.45em;
  159. }
  160. .quick-nav {
  161. display: flex;
  162. flex-wrap: wrap;
  163. align-items: center;
  164. justify-content: center;
  165. gap: 2px;
  166. font-family: "AdobeKaiti", "KaiTi", serif;
  167. font-size: 14px;
  168. color: #2a1a08;
  169. line-height: 2.4;
  170. }
  171. .quick-nav a {
  172. color: #2a1a08;
  173. text-decoration: none;
  174. padding: 0 3px;
  175. transition: color 0.15s;
  176. }
  177. .quick-nav a:hover { color: #8b6020; }
  178. .quick-nav .sep {
  179. color: rgba(80, 60, 40, 0.35);
  180. margin: 0 2px;
  181. user-select: none;
  182. }
  183. .nav-seal {
  184. width: 72px;
  185. height: auto;
  186. margin: 0 6px;
  187. vertical-align: middle;
  188. }
  189. /* 编委会面板 — 标签框尺寸来自切图 committee-bg.png 实测:x=0~63, y=78~406 */
  190. .committee-panel {
  191. width: 100%;
  192. height: 242px;
  193. background: url("{{ home_img('committee-bg.png') }}") center / 100% 100% no-repeat;
  194. position: relative;
  195. padding: 24px 40px 24px calc(100% * 72 / 2115);
  196. margin-bottom: 36px;
  197. }
  198. .committee-side-label {
  199. position: absolute;
  200. left: 0;
  201. top: calc(100% * 78 / 484);
  202. width: calc(100% * 63 / 2115);
  203. height: calc(100% * 329 / 484);
  204. display: flex;
  205. align-items: center;
  206. justify-content: center;
  207. }
  208. .committee-side-label-text {
  209. display: flex;
  210. flex-direction: column;
  211. align-items: center;
  212. justify-content: center;
  213. gap: 3px;
  214. font-family: "HuakangWeibei", "STSong", serif;
  215. font-size: 13px;
  216. color: #4a3820;
  217. line-height: 1;
  218. }
  219. .committee-side-label-text span {
  220. display: block;
  221. }
  222. .committee-body {
  223. display: flex;
  224. flex-direction: column;
  225. justify-content: center;
  226. height: 100%;
  227. }
  228. .cm-row {
  229. display: flex;
  230. align-items: center;
  231. gap: 8px;
  232. padding: 7px 0;
  233. border-bottom: 1px dashed rgba(160, 140, 100, 0.28);
  234. min-height: 34px;
  235. }
  236. .cm-row:last-child { border-bottom: none; }
  237. .cm-dot {
  238. width: 11px;
  239. height: 11px;
  240. flex-shrink: 0;
  241. background: url("{{ home_img('committee-dot.png') }}") center / contain no-repeat;
  242. }
  243. .cm-label {
  244. font-family: "HuakangWeibei", "STSong", serif;
  245. font-size: 15px;
  246. color: #4a3820;
  247. white-space: nowrap;
  248. width: 92px;
  249. flex-shrink: 0;
  250. }
  251. .cm-value {
  252. font-family: "AdobeKaiti", "KaiTi", serif;
  253. font-size: 15px;
  254. color: #1a1008;
  255. flex: 1;
  256. }
  257. .cm-names {
  258. word-spacing: 0.5em;
  259. }
  260. /* 页脚 - 思源黑体 */
  261. .page-footer {
  262. font-family: "SourceHanSans", "PingFang SC", sans-serif;
  263. font-size: 13px;
  264. color: #7a6a58;
  265. text-align: center;
  266. letter-spacing: 0.03em;
  267. padding: 8px 0;
  268. }
  269. .page-footer .sep {
  270. margin: 0 10px;
  271. color: rgba(120, 100, 80, 0.4);
  272. }
  273. @media (max-width: 680px) {
  274. .page-wrap { padding: 32px 16px 24px; }
  275. .main-title { font-size: 22px; letter-spacing: 0.04em; }
  276. .edition { font-size: 14px; margin-bottom: 24px; }
  277. .action-btns { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
  278. .action-btn { width: 260px; height: 55px; }
  279. .action-btn-text { font-size: 18px; transform: translateX(10px); }
  280. .action-btn--scan .action-btn-text { transform: translateX(8px); }
  281. .committee-panel {
  282. height: auto;
  283. min-height: 220px;
  284. padding: 20px 16px 20px calc(100% * 72 / 2115);
  285. background-size: cover;
  286. }
  287. .committee-side-label-text { font-size: 11px; gap: 2px; }
  288. .cm-label { width: 76px; font-size: 14px; }
  289. .cm-row { flex-wrap: wrap; padding: 8px 0; }
  290. .quick-nav { font-size: 13px; }
  291. .nav-seal { width: 72px; }
  292. }
  293. </style>
  294. </head>
  295. <body>
  296. <div class="page-bg"></div>
  297. <div class="page-wrap">
  298. <div class="page-inner">
  299. <img src="{{ home_img('logo.png') }}" alt="留" class="logo">
  300. <h1 class="main-title">留氏(衢州)族谱信息管理系统</h1>
  301. <p class="edition">二〇二五年度版</p>
  302. <div class="action-btns">
  303. <a href="{{ url_for('members') }}" class="action-btn action-btn--members">
  304. <span class="action-btn-text">成员管理</span>
  305. </a>
  306. <a href="{{ url_for('index') }}" class="action-btn action-btn--scan">
  307. <span class="action-btn-text">扫描件管理</span>
  308. </a>
  309. </div>
  310. <div class="nav-section">
  311. <div class="nav-frame">
  312. <span class="nav-frame-title">快速导航</span>
  313. </div>
  314. <div class="quick-nav">
  315. <a href="{{ url_for('members') }}">成员列表</a>
  316. <span class="sep">/</span>
  317. <a href="{{ url_for('add_member') }}">列入新成员</a>
  318. <span class="sep">/</span>
  319. <a href="{{ url_for('tree') }}">关系树状图</a>
  320. <span class="sep">/</span>
  321. <img src="{{ home_img('nav-seal.png') }}" alt="系统管理" class="nav-seal">
  322. <span class="sep">/</span>
  323. <a href="{{ url_for('index') }}">扫描件管理</a>
  324. <span class="sep">/</span>
  325. {% if session.get('is_super_admin') %}
  326. <a href="{{ url_for('pdf_management') }}">家谱管理</a>
  327. <span class="sep">/</span>
  328. {% endif %}
  329. <a href="{{ url_for('suspected_errors') }}">疑似错误汇总</a>
  330. </div>
  331. </div>
  332. <div class="committee-panel">
  333. <div class="committee-side-label">
  334. <div class="committee-side-label-text">
  335. <span>编</span><span>委</span><span>会</span><span>成</span><span>员</span>
  336. </div>
  337. </div>
  338. <div class="committee-body">
  339. <div class="cm-row">
  340. <span class="cm-dot"></span>
  341. <span class="cm-label">主编:</span>
  342. <span class="cm-value">留文正</span>
  343. </div>
  344. <div class="cm-row">
  345. <span class="cm-dot"></span>
  346. <span class="cm-label">编委成员:</span>
  347. <span class="cm-value cm-names">留忠德 留文正 留越 留良吾 留如藩 留强 ……</span>
  348. </div>
  349. <div class="cm-row">
  350. <span class="cm-dot"></span>
  351. <span class="cm-label">外支顾问:</span>
  352. <span class="cm-value">留朝信</span>
  353. </div>
  354. <div class="cm-row">
  355. <span class="cm-dot"></span>
  356. <span class="cm-label">技术支持:</span>
  357. <span class="cm-value">留越</span>
  358. </div>
  359. <div class="cm-row">
  360. <span class="cm-dot"></span>
  361. <span class="cm-label">技术实现:</span>
  362. <span class="cm-value">春笋秋竹(杭州)科技有限公司</span>
  363. </div>
  364. </div>
  365. </div>
  366. <footer class="page-footer">
  367. © 2025 留氏(衢州)族谱信息管理系统
  368. <span class="sep">|</span>
  369. 传承家族文化,弘扬民族精神
  370. </footer>
  371. </div>
  372. </div>
  373. <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
  374. </body>
  375. </html>