筛选组件开发

2025-08-17 18:36:43 +08:00
parent 4f6ca73148
commit db48e55b05
17 changed files with 406 additions and 314 deletions
--- a/src/components/Bubble/bubbleItem.module.scss
+++ b/src/components/Bubble/bubbleItem.module.scss
@@ -0,0 +1,94 @@
+.bubbleOption {
+  position: relative;
+  border: 1px solid #e5e5e5;
+  outline: none; // 移除浏览器默认的outline
+  background: #ffffff;
+  color: #333333;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  white-space: nowrap;
+  font-size: 14px;
+  border-radius: 28px;
+  margin: 0;
+  width: 116px;
+  height: 28px;
+
+  // 移除浏览器默认样式
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::after {
+    outline: none;
+    border: none;
+  }
+
+  &:active {
+    outline: none;
+    border: none;
+  }
+
+  // 尺寸变体
+  &.small {
+    font-size: 12px;
+  }
+
+  &.medium {
+    padding: 12px 16px;
+    min-height: 44px;
+    font-size: 14px;
+  }
+
+  &.large {
+    padding: 16px 20px;
+    min-height: 56px;
+    font-size: 16px;
+  }
+
+  &.selected {
+    background: #000000;
+    color: #ffffff;
+  }
+
+  &.disabled {
+    background: #f5f5f5;
+    color: #999999;
+    cursor: not-allowed;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+  }
+
+  // 图标样式
+  .bubbleIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  // 标签样式
+  .bubbleLabel {
+    font-weight: 500;
+  }
+
+  // 描述样式
+  .bubbleDescription {
+    font-size: 12px;
+    opacity: 0.7;
+    font-weight: 400;
+  }
+}