feat: 调整闪现消息淡出的样式

app/rank/views.py

@@ -1,4 +1,4 @@
-from flask import render_template, Blueprint, Flask
+from flask import render_template, Blueprint, Flask, request, abort
 from tool.type_ import Optional
 from app import views
 
@@ -6,16 +6,26 @@ rank = Blueprint("rank", __name__)
 app: Optional[Flask] = None
 
 
-@rank.route('/up/<int:page>')
-def rank_up(page: int):
-    data = views.website.get_rank(page, "DESC")
-    return render_template("rank/ranking.html", rank_info=data, ranking_name="高分榜")
+@rank.route('/up')
+def rank_up():
+    try:
+        page = int(request.args.get("page", 1))
+    except (ValueError, TypeError):
+        abort(404)
+    else:
+        data = views.website.get_rank(page, "DESC")
+        return render_template("rank/ranking.html", rank_info=data, ranking_name="高分榜")
 
 
-@rank.route('/down/<int:page>')
-def rank_down(page: int):
-    data = views.website.get_rank(page, "ASC")
-    return render_template("rank/ranking.html", rank_info=data, ranking_name="警示榜")
+@rank.route('/down')
+def rank_down():
+    try:
+        page = int(request.args.get("page", 1))
+    except (ValueError, TypeError):
+        abort(404)
+    else:
+        data = views.website.get_rank(page, "ASC")
+        return render_template("rank/ranking.html", rank_info=data, ranking_name="警示榜")
 
 
 def creat_ranking_website(app_: Flask):

app/static/styles/base.css

@@ -96,6 +96,7 @@ a.nav-top-item:hover, a.nav-top-item:active {
 
     border-radius: 15px;
 
+    color: white;
     font-size: 25px;
     height: 50px;
     line-height: 50px;

app/templates/base.html

@@ -57,29 +57,20 @@
 
 <article>
     {% block flash %}
-        <style>
-            .top-msg-section {
-                height: calc({{ flash_height }}px * 55);
-                transition: height 1.5s;
-            }
-        </style>
-
-        <ul class="top-msg-section">
-            {% for message in flash_msg %}
-                <li class="top-msg"> {{ flash_height }} {{ message }} </li>
-            {% endfor %}
+        {% if flash_height != 0 %}
+            <ul class="top-msg-section">
+                {% for message in flash_msg %}
+                    <li class="top-msg"> {{ flash_height }} {{ message }} </li>
+                {% endfor %}
+            </ul>
+
             <script>
                 setTimeout(function () {
                     let ul_flash = document.querySelector("ul.top-msg-section");
-                    ul_flash.style.height = "20px";
-
-                    let li_flash = document.querySelectorAll("li.top-msg");
-                    for (let i = 0; i < li_flash.length; i += 1) {
-                        li_flash[i].style.display = 'none';
-                    }
-                }, 3000)
+                    ul_flash.style.display = "none";
+                }, 3100)
             </script>
-        </ul>
+        {% endif %}
     {% endblock %}
 
     {% block h1_title_ %}