feat(html): 添加仲裁信息展示页面

- 新增 arbitration_ex.html 文件用于展示仲裁信息 - 设计页面布局和样式，包括标题、表格、图片等元素 - 使用 Thymeleaf 模板语法动态显示仲裁数据 - 优化页面背景、字体颜色和样式
KingPrimes · Feb 9, 2025 · b917578 · b917578
1 parent 6dc28c4
commit b917578
Showing 1 changed file with 64 additions and 0 deletions.
diff --git a/Template/html/arbitration_ex.html b/Template/html/arbitration_ex.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <link th:href="@{/css/index.css}" rel="stylesheet" />
+    <title>仲裁</title>
+    <style>
+        h1 {
+            text-align: left;
+        }
+
+        ul {
+            width: 100;
+            text-align: left;
+            font-size: 20px;
+            list-style-type: none;
+        }
+        table{
+            width: 100%;
+        }
+        body {
+            color: #fff;
+            background-color: #283B47;
+        }
+        .arbitration{
+            position: relative;
+            border-radius: 20px;
+            border: 5px solid #ffc;
+            margin: 10px;
+            background-color: #2C414E;
+        }
+
+    </style>
+</head>
+
+
+<body>
+<!--
+生成图片的宽度
+-->
+<w>
+    1290
+</w>
+<h1>仲裁</h1>
+<hr />
+<div class="arbitration">
+    <table>
+        <tr th:each="arbit : ${arbitrations}">
+            <td style="text-align: left;">
+                <ul>
+                    <li th:text="${arbit.type}+' - '+${arbit.enemy}" style="color: #FF7542;"></li>
+                    <li th:text="${arbit.node}" style="color: #7595FF;"></li>
+                    <li th:text="${arbit.etc}" style="color: #FF7474;"></li>
+                    <li th:text="'开始时间：'+${#dates.format(arbit.activation, 'yyyy-MM-dd HH:mm:ss')}" style="color: #FF7474;"></li>
+                </ul>
+            </td>
+            <td><img th:src="@{'/img/faction/'+${arbit.enemy}+'.png'}" /></td>
+        </tr>
+    </table>
+</div>
+
+</body>
+</html>