commit 首页UI优化

templates/home.html

@@ -74,23 +74,23 @@
         /* 主标题 - 华康魏碑 */
         .main-title {
             font-family: "HuakangWeibei", "STSong", serif;
-            font-size: 32px;
+            font-size: 34px;
             font-weight: normal;
             color: #1a1008;
-            letter-spacing: 0.08em;
+            letter-spacing: 0.06em;
             text-align: center;
-            line-height: 1.4;
-            margin-bottom: 10px;
+            line-height: 1.35;
+            margin-bottom: 8px;
         }
 
         /* 副标题 - 思源宋体 */
         .edition {
             font-family: "SourceHanSerif", "STSong", serif;
-            font-size: 16px;
+            font-size: 15px;
             color: #6b5840;
-            letter-spacing: 0.3em;
-            padding-left: 0.3em;
-            margin-bottom: 30px;
+            letter-spacing: 0.28em;
+            padding-left: 0.28em;
+            margin-bottom: 28px;
         }
 
         /* 主按钮 */
@@ -102,7 +102,9 @@
 
         .action-btn {
             position: relative;
-            display: block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             width: 295px;
             height: 62px;
             text-decoration: none;
@@ -110,26 +112,32 @@
         }
 
         .action-btn img {
+            position: absolute;
+            inset: 0;
             width: 100%;
             height: 100%;
             display: block;
         }
 
         .action-btn-text {
-            position: absolute;
-            left: 72px;
-            top: 50%;
-            transform: translateY(-50%);
+            position: relative;
+            z-index: 1;
             font-family: "HuakangWeibei", "STSong", serif;
-            font-size: 18px;
-            color: #3a2810;
-            letter-spacing: 0.1em;
+            font-size: 21px;
+            font-weight: normal;
+            color: #2a1a08;
+            letter-spacing: 0.18em;
+            padding-left: 0.18em;
             pointer-events: none;
             white-space: nowrap;
+            line-height: 1;
+            /* 图标区约占左侧 56px，文字在按钮内视觉居中 */
+            transform: translateX(14px);
         }
 
         .action-btn--scan .action-btn-text {
-            color: #3a3a3a;
+            color: #2a2a2a;
+            transform: translateX(12px);
         }
 
         .action-btn .btn-img-hover { display: none; }
@@ -173,9 +181,9 @@
             justify-content: center;
             gap: 2px;
             font-family: "AdobeKaiti", "KaiTi", serif;
-            font-size: 15px;
+            font-size: 14px;
             color: #2a1a08;
-            line-height: 2.2;
+            line-height: 2.4;
         }
 
         .quick-nav a {
@@ -194,43 +202,63 @@
         }
 
         .nav-seal {
-            width: 90px;
+            width: 72px;
             height: auto;
-            margin: 0 4px;
+            margin: 0 6px;
             vertical-align: middle;
         }
 
-        /* 编委会面板 */
+        /* 编委会面板 — 标签框尺寸来自切图 committee-bg.png 实测：x=0~63, y=78~406 */
         .committee-panel {
             width: 100%;
             height: 242px;
             background: url("{{ url_for('static', filename='images/home/committee-bg.png') }}") center / 100% 100% no-repeat;
             position: relative;
-            padding: 26px 32px 26px 62px;
+            padding: 24px 40px 24px calc(100% * 72 / 2115);
             margin-bottom: 36px;
         }
 
         .committee-side-label {
             position: absolute;
-            left: 18px;
-            top: 50%;
-            transform: translateY(-50%);
-            writing-mode: vertical-rl;
-            text-orientation: mixed;
+            left: 0;
+            top: calc(100% * 78 / 484);
+            width: calc(100% * 63 / 2115);
+            height: calc(100% * 329 / 484);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .committee-side-label-text {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 3px;
             font-family: "HuakangWeibei", "STSong", serif;
-            font-size: 14px;
+            font-size: 13px;
             color: #4a3820;
-            letter-spacing: 0.35em;
-            padding-top: 0.35em;
+            line-height: 1;
+        }
+
+        .committee-side-label-text span {
+            display: block;
+        }
+
+        .committee-body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
         }
 
         .cm-row {
             display: flex;
-            align-items: baseline;
-            gap: 10px;
-            padding: 9px 0;
-            border-bottom: 1px dashed rgba(160, 140, 100, 0.3);
-            min-height: 36px;
+            align-items: center;
+            gap: 8px;
+            padding: 7px 0;
+            border-bottom: 1px dashed rgba(160, 140, 100, 0.28);
+            min-height: 34px;
         }
 
         .cm-row:last-child { border-bottom: none; }
@@ -239,7 +267,6 @@
             width: 11px;
             height: 11px;
             flex-shrink: 0;
-            margin-top: 4px;
             background: url("{{ url_for('static', filename='images/home/committee-dot.png') }}") center / contain no-repeat;
         }
 
@@ -248,6 +275,8 @@
             font-size: 15px;
             color: #4a3820;
             white-space: nowrap;
+            width: 92px;
+            flex-shrink: 0;
         }
 
         .cm-value {
@@ -258,7 +287,7 @@
         }
 
         .cm-names {
-            word-spacing: 0.55em;
+            word-spacing: 0.5em;
         }
 
         /* 页脚 - 思源黑体 */
@@ -282,14 +311,16 @@
             .edition { font-size: 14px; margin-bottom: 24px; }
             .action-btns { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
             .action-btn { width: 260px; height: 55px; }
-            .action-btn-text { font-size: 16px; left: 64px; }
+            .action-btn-text { font-size: 18px; transform: translateX(10px); }
+            .action-btn--scan .action-btn-text { transform: translateX(8px); }
             .committee-panel {
                 height: auto;
                 min-height: 220px;
-                padding: 20px 20px 20px 56px;
+                padding: 20px 16px 20px calc(100% * 72 / 2115);
                 background-size: cover;
             }
-            .committee-side-label { left: 14px; font-size: 12px; }
+            .committee-side-label-text { font-size: 11px; gap: 2px; }
+            .cm-label { width: 76px; font-size: 14px; }
             .cm-row { flex-wrap: wrap; padding: 8px 0; }
             .quick-nav { font-size: 13px; }
             .nav-seal { width: 72px; }
@@ -345,31 +376,37 @@
         </div>
 
         <div class="committee-panel">
-            <div class="committee-side-label">编委会成员</div>
-            <div class="cm-row">
-                <span class="cm-dot"></span>
-                <span class="cm-label">主编：</span>
-                <span class="cm-value">留文正</span>
-            </div>
-            <div class="cm-row">
-                <span class="cm-dot"></span>
-                <span class="cm-label">编委成员：</span>
-                <span class="cm-value cm-names">留忠德　留文正　留越　留良吾　留如藩　留强　……</span>
-            </div>
-            <div class="cm-row">
-                <span class="cm-dot"></span>
-                <span class="cm-label">外支顾问：</span>
-                <span class="cm-value">留朝信</span>
-            </div>
-            <div class="cm-row">
-                <span class="cm-dot"></span>
-                <span class="cm-label">技术支持：</span>
-                <span class="cm-value">留越</span>
+            <div class="committee-side-label">
+                <div class="committee-side-label-text">
+                    <span>编</span><span>委</span><span>会</span><span>成</span><span>员</span>
+                </div>
             </div>
-            <div class="cm-row">
-                <span class="cm-dot"></span>
-                <span class="cm-label">技术实现：</span>
-                <span class="cm-value">春笋秋竹（杭州）科技有限公司</span>
+            <div class="committee-body">
+                <div class="cm-row">
+                    <span class="cm-dot"></span>
+                    <span class="cm-label">主编：</span>
+                    <span class="cm-value">留文正</span>
+                </div>
+                <div class="cm-row">
+                    <span class="cm-dot"></span>
+                    <span class="cm-label">编委成员：</span>
+                    <span class="cm-value cm-names">留忠德　留文正　留越　留良吾　留如藩　留强　……</span>
+                </div>
+                <div class="cm-row">
+                    <span class="cm-dot"></span>
+                    <span class="cm-label">外支顾问：</span>
+                    <span class="cm-value">留朝信</span>
+                </div>
+                <div class="cm-row">
+                    <span class="cm-dot"></span>
+                    <span class="cm-label">技术支持：</span>
+                    <span class="cm-value">留越</span>
+                </div>
+                <div class="cm-row">
+                    <span class="cm-dot"></span>
+                    <span class="cm-label">技术实现：</span>
+                    <span class="cm-value">春笋秋竹（杭州）科技有限公司</span>
+                </div>
             </div>
         </div>