u

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

@@ -1,29 +1,143 @@
 <script setup>
+function createRipple(event) {
+  const button = event.currentTarget
+  const circle = document.createElement('span')
+  const diameter = Math.max(button.clientWidth, button.clientHeight)
+  const radius = diameter / 2
 
+  circle.style.width = circle.style.height = `${diameter}px`
+  circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`
+  circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`
+  circle.classList.add('ripple')
+
+  // 如果已有 ripple，先清除
+  const ripple = button.querySelector('.ripple')
+  if (ripple)
+    ripple.remove()
+
+  button.appendChild(circle)
+}
 </script>
 
 <template>
-  <div class="btn" @click="createRipple($event)">
-    这是个按钮
+  <div class="button-demo">
+    <button class="btn btn-primary" @click="createRipple($event)">
+      <span>主按钮</span>
+    </button>
+    <button class="btn btn-outline" @click="createRipple($event)">
+      <span>次按钮</span>
+    </button>
+    <button class="btn btn-warning" @click="createRipple($event)">
+      <span>警告按钮</span>
+    </button>
+    <button class="btn btn-danger" @click="createRipple($event)">
+      <span>危险按钮</span>
+    </button>
+    <button class="btn btn-primary" disabled>
+      <span>禁用按钮</span>
+    </button>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+.button-demo {
+  display: flex;
+  gap: 12px;
+  padding: 20px;
+}
+
+/* 基础样式 */
 .btn {
   position: relative;
   overflow: hidden;
-  display: inline-block;
-  background: #0064fa;
-  color: #fff;
-  padding: 8px 20px;
-  cursor: pointer;
-  border-radius: 0px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 16px;
   font-size: 14px;
   font-weight: 500;
-  letter-spacing: 0.5px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  border: 1px solid transparent;
+  user-select: none;
 
-  &:hover {
-    background: #4a9dff;
+  span {
+    position: relative;
+    z-index: 1; // 文字在上层
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* 水波纹效果 */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    transform-origin: center; // 保证扩散中心
+    animation: ripple 600ms linear;
+    background-color: rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+    z-index: 0; // 在文字下
+  }
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* ===== 按钮类型 ===== */
+.btn-primary {
+  background-color: #0064fa;
+  color: #fff;
+  border-color: #0064fa;
+
+  &:hover:not(:disabled) {
+    background-color: #0053d6;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #0041ad;
+  }
+}
+
+.btn-outline {
+  background-color: #fff;
+  color: #0064fa;
+  border-color: #0064fa;
+
+  &:hover:not(:disabled) {
+    background-color: #f3f7ff;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #e1ecff;
+  }
+}
+
+.btn-warning {
+  background-color: #f59e0b;
+  border-color: #f59e0b;
+  color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #d97706;
+  }
+}
+
+.btn-danger {
+  background-color: #dc2626;
+  border-color: #dc2626;
+  color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #b91c1c;
   }
 }
 </style>