修改页面样式

chocotan · May 3, 2021 · 9919058 · 9919058
1 parent 7aba42f
commit 9919058
Showing 1 changed file with 34 additions and 28 deletions.
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -6,35 +6,41 @@
     <script th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>
     <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet"/>
 </head>
+<style>
+    body{
+        margin-top: 20px;
+    }
+</style>
 <body>
-1-启用 2-关闭 3-录制中
-<a th:href="@{/record/add}" class="btn btn-info">添加房间</a>
-<table class="table">
-    <thead>
-    <tr>
-        <th scope="col">#</th>
-        <th scope="col">房间号</th>
-        <th scope="col">用户名</th>
-        <th scope="col">状态</th>
-        <th scope="col">文件大小</th>
-        <th scope="col">操作</th>
-    </tr>
-    <tbody>
-    <tr th:each="r:${list}">
-        <th scope="row" th:text="${r.id}"></th>
-        <td th:text="${r.roomId}"></td>
-        <td th:text="${r.uname}"></td>
-        <td><span th:remove="tag" th:text="${r.statusText}"></span></td>
-        <td th:if="${r.dataSize!=null}" th:text="${r.dataSize}+'M'"></td>
-        <td th:if="${r.dataSize==null}"></td>
-        <td><a th:if="${r.status!='3'}" th:href="@{/record/startRecord(id=${r.id})}" class="btn btn-info btn-sm">开始录制</a>
-            <a th:if="${r.status=='3'}" th:href="@{/record/stopRecord(id=${r.id})}" class="btn btn-danger btn-sm">结束录制</a>
-            <a th:if="${r.status!='3'}" th:href="@{/record/edit(id=${r.id})}" class="btn btn-info btn-sm">编辑</a>
-            <a th:if="${r.status!='3'}" th:href="@{/record/delete(id=${r.id})}" class="btn btn-danger btn-sm">删除</a>
+<div class="container">
+    <a th:href="@{/record/add}" class="btn btn-info">添加房间</a>
+    <table class="table">
+        <thead>
+        <tr>
+            <th scope="col">#</th>
+            <th scope="col">房间号</th>
+            <th scope="col">用户名</th>
+            <th scope="col">状态</th>
+            <th scope="col">文件大小</th>
+            <th scope="col">操作</th>
+        </tr>
+        <tbody>
+        <tr th:each="r:${list}">
+            <th scope="row" th:text="${r.id}"></th>
+            <td th:text="${r.roomId}"></td>
+            <td th:text="${r.uname}"></td>
+            <td><span th:remove="tag" th:text="${r.statusText}"></span></td>
+            <td th:if="${r.dataSize!=null}" th:text="${r.dataSize}+'M'"></td>
+            <td th:if="${r.dataSize==null}"></td>
+            <td><a th:if="${r.status!='3'}" th:href="@{/record/startRecord(id=${r.id})}" class="btn btn-info btn-sm">开始录制</a>
+                <a th:if="${r.status=='3'}" th:href="@{/record/stopRecord(id=${r.id})}" class="btn btn-danger btn-sm">结束录制</a>
+                <a th:if="${r.status!='3'}" th:href="@{/record/edit(id=${r.id})}" class="btn btn-info btn-sm">编辑</a>
+                <a th:if="${r.status!='3'}" th:href="@{/record/delete(id=${r.id})}" class="btn btn-danger btn-sm">删除</a>
 
-        </td>
-    </tr>
-    </tbody>
-</table>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
 </body>
 </html>