u

code/base-project/base-vue/src/App.vue

@@ -6,33 +6,29 @@ export default {
         el.style.position = 'relative'
         el.style.overflow = 'hidden'
 
-        el.addEventListener('click', (e) => {
+        el.addEventListener('click', () => {
-          if (el.disabled)
+          if (el.disabled) return
-            return
 
-          const rect = el.getBoundingClientRect()
-          const size = Math.max(rect.width, rect.height)
           const ripple = document.createElement('span')
 
           ripple.style.position = 'absolute'
-          ripple.style.width = ripple.style.height = `${size}px`
+          ripple.style.top = 0
-          ripple.style.left = `${e.offsetX - size / 2}px`
+          ripple.style.left = 0
-          ripple.style.top = `${e.offsetY - size / 2}px`
+          ripple.style.height = '100%'
-          ripple.style.background = 'rgba(255,255,255,0.4)' // 柔和水波纹
+          ripple.style.width = '0%'
-          ripple.style.borderRadius = '50%'
+          ripple.style.background = 'rgba(255,255,255,0.2)'
           ripple.style.pointerEvents = 'none'
-          ripple.style.transform = 'scale(0)'
+          ripple.style.transition = 'width 0.4s ease, opacity 0.4s ease'
-          ripple.style.opacity = '0.6'
-          ripple.style.transition = 'transform 0.4s, opacity 0.6s'
 
           el.appendChild(ripple)
 
+          // 从左向右扩展
           setTimeout(() => {
-            ripple.style.transform = 'scale(2)'
+            ripple.style.width = '100%'
             ripple.style.opacity = '0'
           }, 10)
 
-          setTimeout(() => ripple.remove(), 600)
+          setTimeout(() => ripple.remove(), 450)
         })
       },
     },
@@ -42,22 +38,15 @@ export default {
 
 <template>
   <div class="button-demo">
-    <h3>现代后台按钮 - 内凹 + 柔和水波纹</h3>
+    <h3>后台管理按钮 - 蓝色主色 + 左侧线性水波纹</h3>
-    <button v-flash class="btn btn-primary">
+
-      主按钮
+    <div class="btn-row">
-    </button>
+      <button v-flash class="btn btn-primary">主按钮</button>
-    <button v-flash class="btn btn-secondary">
+      <button v-flash class="btn btn-secondary">次按钮</button>
-      次按钮
+      <button v-flash class="btn btn-danger">危险按钮</button>
-    </button>
+      <button v-flash class="btn btn-link">链接按钮</button>
-    <button v-flash class="btn btn-danger">
+      <button class="btn btn-primary" disabled>禁用按钮</button>
-      危险按钮
+    </div>
-    </button>
-    <button v-flash class="btn btn-link">
-      链接按钮
-    </button>
-    <button class="btn btn-primary" disabled>
-      禁用按钮
-    </button>
   </div>
 </template>
 
@@ -65,26 +54,35 @@ export default {
 .button-demo {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 20px;
   padding: 24px;
-  background: #f0f2f5;
+  background: #f5f6f8;
 }
 
+.btn-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* 通用按钮 */
 .btn {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 10px 22px;
+  height: 36px;
+  padding: 0 20px;
   font-size: 14px;
-  font-weight: 500;
+  border-radius: 4px;
-  border-radius: 6px;
   border: none;
   cursor: pointer;
   outline: none;
   user-select: none;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
   overflow: hidden;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  letter-spacing: 0.5px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .btn:disabled {
@@ -93,47 +91,52 @@ export default {
 }
 
 .btn:focus-visible {
-  box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.15);
+  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
-}
-
-.btn:hover:not(:disabled) {
-  filter: brightness(1.05);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
 
+/* 按压效果 - 阴影收缩 */
 .btn:active:not(:disabled) {
-  filter: brightness(0.95);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* 主按钮 - 蓝色 */
 .btn-primary {
-  background: linear-gradient(180deg, #0072ff, #0053d6);
+  background: #1d4ed8;
   color: #fff;
 }
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
 
+/* 次按钮 - 灰色 */
 .btn-secondary {
-  background: #fff;
+  background: #f3f4f6;
-  border: 1px solid #d9d9d9;
+  color: #374151;
-  color: #0064fa;
+  border: 1px solid #d1d5db;
+}
+.btn-secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+  border-color: #1d4ed8;
+  color: #1d4ed8;
 }
 
+/* 危险按钮 - 红色 */
 .btn-danger {
-  background: linear-gradient(180deg, #ef4444, #b91c1c);
+  background: #dc2626;
   color: #fff;
 }
+.btn-danger:hover:not(:disabled) {
+  background: #b91c1c;
+}
 
+/* 链接按钮 */
 .btn-link {
   background: transparent;
-  color: #0064fa;
+  color: #1d4ed8;
-  padding: 8px 16px;
+  padding: 0 16px;
 }
-
 .btn-link:hover:not(:disabled) {
   text-decoration: underline;
-  background: rgba(0, 100, 250, 0.05);
+  background: rgba(29, 78, 216, 0.08);
-}
-
-.btn-link:active:not(:disabled) {
-  background: rgba(0, 100, 250, 0.1);
 }
 </style>