Procházet zdrojové kódy

编辑修改代码

niujiuru před 1 měsícem
rodič
revize
7c5537603e

+ 2 - 1
web-ui.service/web/app.html

@@ -5,6 +5,7 @@
 <meta charset="utf-8">
 <title>河南云飞科技设备管理平台</title>
 <link rel="stylesheet" href="static/css/app.css">
+<link rel="stylesheet" href="static/css/button.css">
 </head>
 
 <body>
@@ -15,7 +16,7 @@
       <span id="imei-value">--</span>
     </div>
     <div class="actions">
-      <button class="logout-btn" onclick="logout()">退出</button>
+      <button class="btn btn-red" onclick="logout()">退出</button>
     </div>
   </header>
 

+ 0 - 18
web-ui.service/web/static/css/app.css

@@ -57,24 +57,6 @@ body{
     gap:10px;
 }
 
-.logout-btn{
-    background:rgba(239,68,68,0.08);
-    border:1px solid rgba(239,68,68,0.35);
-    color:#f87171;
-    padding:6px 12px;
-    display:flex;
-    border-radius:6px;
-    font-size:12px;
-    cursor:pointer;
-    transition:0.2s;
-}
-
-.logout-btn:hover{
-    background:#ef4444;
-    border-color:#ef4444;
-    color:#fff;
-}
-
 /* 次布局 */
 .layout{
     display:flex;

+ 63 - 0
web-ui.service/web/static/css/button.css

@@ -0,0 +1,63 @@
+.btn {
+    background: #2b3444;
+    border: 1px solid #2b3444;
+    color: #e5e7eb;
+    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.18s ease;
+}
+
+.btn:hover {
+    background: #3a475c;
+    border-color: #3a475c;
+}
+
+.btn:active {
+    transform: translateY(1px);
+    background: #1f2937;
+    border-color: #1f2937;
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn-blue {
+    background: #2563eb;
+    border: 1px solid #2563eb;
+    color: white;
+}
+
+.btn-blue:hover {
+    background: #1d4ed8;
+    border-color: #1d4ed8;
+}
+
+.btn-blue:active {
+    transform: translateY(1px);
+    background: #1e40af;
+}
+
+.btn-red {
+    background: #ef4444;
+    border: 1px solid #ef4444;
+    color: white;
+}
+
+.btn-red:hover {
+    background: #dc2626;
+    border-color: #dc2626;
+}
+
+.btn-red:active {
+    transform: translateY(1px);
+    background: #b91c1c;
+}