u

code/base-project/base-vue/test.html

@@ -1,90 +1,79 @@
 <!doctype html>
 <html lang="zh-CN">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>后台按钮三状态带轻度阴影</title>
+    <meta charset="utf-8" />
+    <title>后台低交互按钮（纯 CSS 自动亮暗）</title>
     <style>
+      :root {
+        --primary-color: #2563eb;
+        --secondary-color: #6b7280;
+        --danger-color: #dc2626;
+      }
+
       body {
-        font-family: Arial, sans-serif;
-        background: #f5f6fa;
-        padding: 20px;
+        font-family: sans-serif;
+        background: #f8fafc;
+        padding: 40px;
+      }
+      .row {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 36px;
       }
 
-      /* 按钮组容器 */
-      .btn-group {
-        background: #fff;
-        padding: 16px;
-        border-radius: 6px;
-        min-width: 300px;
-      }
-
-      /* 基础按钮 */
-      .admin-btn {
-        padding: 8px 16px;
-        font-size: 13px;
+      .btn {
+        padding: 6px 22px;
+        border-radius: 0px;
+        font-size: 14px;
         font-weight: 500;
-        border: none;
-        border-radius: 4px;
-        color: #fff;
-        margin: 0 6px 6px 0;
         cursor: pointer;
+        border: none;
+        color: #fff;
         outline: none;
-        transition:
-          background 0.2s ease,
-          box-shadow 0.2s ease;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 默认轻度阴影 */
+        transition: background-color 0.1s ease;
       }
 
-      /* hover 增强阴影 */
-      .admin-btn:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-      }
-
-      /* 点击时阴影减小，颜色加深，模拟按钮被按下 */
-      .admin-btn:active {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-      }
-
-      /* 主按钮 - 蓝色系 */
+      /* 主色按钮 */
       .btn-primary {
-        background-color: #4f83ff;
+        background-color: var(--primary-color);
       }
       .btn-primary:hover {
-        background-color: #6a95ff;
+        background-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
       }
       .btn-primary:active {
-        background-color: #1e5bcc;
+        background-color: color-mix(in srgb, var(--primary-color) 90%, black 10%);
       }
 
-      /* 次按钮 - 黑色系 */
+      /* 次色按钮 */
       .btn-secondary {
-        background-color: #4a4a4a;
+        background-color: var(--secondary-color);
       }
       .btn-secondary:hover {
-        background-color: #6a6a6a;
+        background-color: color-mix(in srgb, var(--secondary-color) 90%, white 10%);
       }
       .btn-secondary:active {
-        background-color: #222;
+        background-color: color-mix(in srgb, var(--secondary-color) 90%, black 10%);
       }
 
-      /* 危险按钮 - 红色系 */
+      /* 危险按钮 */
       .btn-danger {
-        background-color: #f03e3e;
+        background-color: var(--danger-color);
       }
       .btn-danger:hover {
-        background-color: #f76666;
+        background-color: color-mix(in srgb, var(--danger-color) 90%, white 10%);
       }
       .btn-danger:active {
-        background-color: #a30000;
+        background-color: color-mix(in srgb, var(--danger-color) 90%, black 10%);
       }
     </style>
   </head>
   <body>
-    <div class="btn-group">
-      <button class="admin-btn btn-primary">保存修改</button>
-      <button class="admin-btn btn-secondary">取消</button>
-      <button class="admin-btn btn-danger">删除</button>
+    <h1>后台低交互按钮（纯 CSS 自动亮暗）</h1>
+
+    <div class="row">
+      <button class="btn btn-primary">确认</button>
+      <button class="btn btn-secondary">取消</button>
+      <button class="btn btn-danger">删除</button>
     </div>
   </body>
 </html>