feat(ui): 引入液态玻璃设计风格并重构消息页面样式

- 将消息页面整体布局更新为液态玻璃设计风格，使用渐变背景和毛玻璃效果 - 重构 CSS 文件，移除旧样式并实现新的设计系统，包括变量定义和组件样式 - 优化响应式布局和视觉层次，提升页面美观度和现代感 - 保留原有功能内容的同时全面更新视觉呈现方式
2026-02-11 13:55:46 +08:00
parent 476e42b919
commit de68963f40
2 changed files with 189 additions and 364 deletions
@@ -7,25 +7,26 @@
    <title>{{.title}}</title>
    <meta name="description" content="{{.description}}">
 </head>
-<body>
-
-<div>
-    <div class="article-container" style="max-width: 960px">
-        <div class="columns is-desktop">
-            <div class="column">
-                <article id="article">
-                    <h1 class="title is-3 is-4-mobile">{{.title}}</h1>
-                    <div class="info">
-                        <span class="line">发布于：<span class="tag is-light">{{.time}}</span></span>
-                    </div>
-                    <blockquote>
-                        {{.description | unescape}}
-                    </blockquote>
+<body class="liquid-glass-container">
+    <div class="wrapper">
+        <!-- Liquid Glass Card -->
+        <div class="liquid-glass" style="position: relative; overflow: hidden;">
+            <!-- Edge Highlight Effect -->
+            <div class="liquid-glass-highlight"></div>
+            
+            <article id="article">
+                <h1 class="title">{{.title}}</h1>
+                <div class="info">
+                    <span class="line">发布于：<span class="liquid-glass-pill">{{.time}}</span></span>
+                </div>
+                <blockquote>
+                    {{.description | unescape}}
+                </blockquote>
+                <div class="content-body">
                    {{.content | unescape}}
-                </article>
-            </div>
+                </div>
+            </article>
        </div>
    </div>
-</div>
 </body>
-</html>
+</html>