fix: update picker style (#1224)

Tencent · Mar 29, 2023 · f50d47c · f50d47c
1 parent 89da116
commit f50d47c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 42 deletions.
diff --git a/style/mobile/components/picker-item/v2/_index.less b/style/mobile/components/picker-item/v2/_index.less
diff --git a/style/mobile/components/picker-item/v2/_var.less b/style/mobile/components/picker-item/v2/_var.less
diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less
@@ -81,9 +81,37 @@
     position: absolute;
     left: 16px;
     right: 16px;
-    top: 72px;
+    top: 80px;
     pointer-events: none;
     background-color: @picker-indicator-bg-color;
     border-radius: @picker-indicator-border-radius;
   }
 }
+
+.@{item} {
+  // display: flex;
+
+  &__group {
+    // padding: 72px 0;
+    box-sizing: border-box;
+    height: @picker-group-height;
+    overflow: hidden;
+    flex: 1;
+    z-index: 1;
+  }
+
+  &__item {
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: @picker-item-height;
+    line-height: @picker-item-height;
+    color: @picker-item-color;
+
+    &--active {
+      color: @picker-item-active-color;
+      font-weight: 600;
+    }
+  }
+}
diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less
@@ -1,4 +1,5 @@
 @picker: ~"@{prefix}-picker";
+@item: ~"@{picker}-item";
 
 @picker-border-radius: var(--td-picker-border-radius, 12px);
 @picker-toolbar-height: var(--td-picker-toolbar-height, 58px);
@@ -19,3 +20,8 @@
 
 @picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer);
 @picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 6px);
+
+@picker-group-height: var(--td-picker-group-height, 200px);
+@picker-item-height: var(--td-picker-item-height, 40px);
+@picker-item-color: var(--td-picker-item-color, @font-gray-2);
+@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1);