Browse Source

优化页面样式

niujiuru 3 weeks atrás
parent
commit
96c01744a9

+ 9 - 4
web-ui.service/web/app.html

@@ -26,10 +26,6 @@
     <div class="actions">
       <!-- 系统时间 -->
       <span id="sys-time" class="clock">--</span>
-      <!-- 退出系统 -->
-      <button class="btn btn-red" onclick="logout()">退出登录</button>
-      <!-- 退出系统 -->
-      <button class="btn btn-red" onclick="reboot()">系统重启</button>
     </div>
   </header>
 
@@ -43,6 +39,15 @@
       <div class="menu-item" data-page="page6">📦 应用管理</div>
       <div class="menu-item" data-page="page7">🧪 一键自检</div>
       <div class="menu-item" data-page="page8">🖥️ 命令终端</div>
+
+      <div class="sidebar-actions">
+        <div class="action-item" onclick="reboot()">
+          🔁 重启设备
+        </div>
+        <div class="action-item" onclick="logout()">
+          ↪️ 退出登录
+        </div>
+      </div>
     </aside>
 
     <main id="view" class="view">

+ 32 - 1
web-ui.service/web/static/css/app.css

@@ -76,6 +76,7 @@ body{
     display:flex;
     align-items:center;
     gap:10px;
+    margin-right:10px;
 }
 
 .clock {
@@ -117,6 +118,36 @@ body{
     padding: 20px;
 }
 
+.sidebar-actions {
+    margin-top:auto;
+    display:flex;
+    flex-direction:column;
+    gap:10px;
+}
+
+.action-item {
+    display:flex;
+    align-items:center;
+    gap:10px;
+    padding:14px 16px;
+    border-radius:4px;
+    cursor:pointer;
+    color:#94a3b8;
+    font-size:15px;
+    font-weight:500;
+    transition:0.2s;
+}
+
+.action-item:hover {
+    background:#1e293b;
+    color:white;
+}
+
+.action-reboot
+.action-logout {
+    color:#94a3b8;
+}
+
 .menu-item{
     display:flex;
     align-items:center;
@@ -222,7 +253,7 @@ p{
     color: #e5e7eb;
     font-size: 14px;
     padding: 6px 8px;
-    height: 30px;
+    height: 35px;
     min-width: 80px;
     cursor: pointer;
     outline: none;

+ 3 - 2
web-ui.service/web/static/css/button.css

@@ -3,14 +3,15 @@
     border: 1px solid #2b3444;
     color: #e5e7eb;
     font-size: 14px;
-    padding: 6px 12px;
+    padding: 0 12px;
+    height: 35px;
     border-radius: 4px;
     cursor: pointer;
     user-select: none;
     display: inline-flex;
     align-items: center;
-    gap: 6px;
     transition: background 0.15s ease, border-color 0.15s ease;
+    justify-content: center;
     flex-shrink:0;
     white-space:nowrap;
 }

+ 1 - 1
web-ui.service/web/static/css/page8.css

@@ -1,6 +1,6 @@
 .page8-card {
     padding: 8px;
-    height: calc(100vh - 120px);
+    height:calc(100% - 12px);
 }
 
 #ssh-terminal {