u

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

@@ -1,79 +1,46 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>后台低交互按钮（纯 CSS 自动亮暗）</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AntD 风格按钮点击反馈</title>
     <style>
-      :root {
-        --primary-color: #2563eb;
-        --secondary-color: #6b7280;
-        --danger-color: #dc2626;
-      }
-
-      body {
-        font-family: sans-serif;
-        background: #f8fafc;
-        padding: 40px;
-      }
-      .row {
-        display: flex;
-        gap: 20px;
-        margin-bottom: 36px;
-      }
-
+      /* 基础按钮样式 */
       .btn {
-        padding: 6px 22px;
-        border-radius: 0px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        border: none;
+        background-color: #1677ff; /* 主色 */
         color: #fff;
+        border: none;
+        padding: 10px 24px;
+        font-size: 16px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        position: relative;
         outline: none;
-        transition: background-color 0.1s ease;
       }
 
-      /* 主色按钮 */
-      .btn-primary {
-        background-color: var(--primary-color);
-      }
-      .btn-primary:hover {
-        background-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
-      }
-      .btn-primary:active {
-        background-color: color-mix(in srgb, var(--primary-color) 90%, black 10%);
+      /* hover 高亮 */
+      .btn:hover:not(:disabled) {
+        background-color: #4096ff; /* 调亮 */
       }
 
-      /* 次色按钮 */
-      .btn-secondary {
-        background-color: var(--secondary-color);
-      }
-      .btn-secondary:hover {
-        background-color: color-mix(in srgb, var(--secondary-color) 90%, white 10%);
-      }
-      .btn-secondary:active {
-        background-color: color-mix(in srgb, var(--secondary-color) 90%, black 10%);
+      /* 按下 active 效果 */
+      .btn:active:not(:disabled) {
+        background-color: #0958d9; /* 调暗 */
+        transform: translateY(1px); /* 轻微下移，模拟按下 */
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* 按下阴影 */
       }
 
-      /* 危险按钮 */
-      .btn-danger {
-        background-color: var(--danger-color);
-      }
-      .btn-danger:hover {
-        background-color: color-mix(in srgb, var(--danger-color) 90%, white 10%);
-      }
-      .btn-danger:active {
-        background-color: color-mix(in srgb, var(--danger-color) 90%, black 10%);
+      /* disabled 状态 */
+      .btn:disabled {
+        background-color: #cfe0ff;
+        color: #a0bfff;
+        cursor: not-allowed;
       }
     </style>
   </head>
   <body>
-    <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>
+    <button class="btn">Primary Button</button>
+    <button class="btn" disabled>Disabled</button>
   </body>
 </html>