Refactor: Marquee

使用 CSS 还原 Marquee 效果

src/index.css

@@ -31,13 +31,28 @@ button{
   cursor: pointer;
 }
 
-.radius-full{ border-radius: 100% }
-
-.notice{
-  color: #175782;
+/* 仿 Marquee 效果 */
+blockquote.notice{
+  padding: 0;
+  overflow: hidden;
+  color: #227fb9;
   font-style: normal;
+  white-space: nowrap;
 }
 
+blockquote.notice p{
+  padding-left: 100%;
+  display: inline-block;
+  border: 1em solid transparent;
+  animation: marquee 10s infinite linear;
+}
+
+@keyframes marquee{
+  0% { transform: translateX(0%) }
+  100% { transform: translateX(-100%) }
+}
+
+/* 按钮组 */
 .btn-group{
   row-gap: .5em;
   display: flex;
@@ -48,6 +63,7 @@ button{
   margin-right: .5em;
 }
 
+/* 问答 */
 .ask, .answer{
   position: relative;
   padding-left: 1.75em;
@@ -98,6 +114,9 @@ button{
   background-color: #e74c3c;
 }
 
+/* 辅助类 */
+.radius-full{ border-radius: 100% }
+
 /* 1 - 页眉
 -------------------------------- */
 .sidebar{

src/pages/index.tsx

@@ -24,7 +24,9 @@ function Index() {
     <main>
       <ArticleHead title="保罗 API" desc="这里是保罗制作的简易 API 系列~" />
       <article className="post">
-        <blockquote className="notice"><i className="fa fa-bell"></i> 公告：API 重构了 NodeJS 版本，基于 MidwayJS 实现，速度也许会略快一点？</blockquote>
+        <blockquote className="notice">
+          <p><i className="fa fa-bell"></i> 公告：API 重构了 NodeJS 版本，基于 MidwayJS 实现，速度也许会略快一点？</p>
+        </blockquote>
 
         <h3>说明：</h3>
         <p>本网站旨在于提供我开发的简易 API，用更精简的信息为你的网站/软件提供实用的服务。如果您的项目已开始使用我提供的 API 服务，则默认视为遵守 <Link to="/notice">本约定</Link>！项目维护记录详见 <Link to="/log">此页面</Link>！</p>
@@ -34,9 +36,9 @@ function Index() {
 
         <div className="row text-center" style={{ marginTop: "2em" }}>
           {
-            stat?.data && Object.keys(stat.data).map((item) => (
+            Object.keys(apiMap).map(item => (
               <div className="col-4" key={item}>
-                <h2>{stat.data[item]}</h2>
+                <h2>{stat ?. data[item] || "?"}</h2>
                 <p>{apiMap[item]}</p>
               </div>
             ))