diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less
index 2b3ca76cc..311c4f9c5 100644
--- a/src/sidebar-item/index.less
+++ b/src/sidebar-item/index.less
@@ -1,6 +1,7 @@
@import '../style/var';
.van-sidebar-item {
+ position: relative;
display: block;
box-sizing: border-box;
padding: @sidebar-padding;
@@ -10,19 +11,18 @@
line-height: @sidebar-line-height;
word-wrap: break-word;
background-color: @sidebar-background-color;
- border-left: 3px solid transparent;
cursor: pointer;
user-select: none;
+ &:active {
+ background-color: @sidebar-active-color;
+ }
+
&__text {
position: relative;
display: inline-block;
}
- &:active {
- background-color: @sidebar-active-color;
- }
-
&:not(:last-child)::after {
border-bottom-width: 1px;
}
@@ -30,16 +30,23 @@
&--select {
color: @sidebar-selected-text-color;
font-weight: @sidebar-selected-font-weight;
- border-color: @sidebar-selected-border-color;
-
- &::after {
- border-right-width: 1px;
- }
&,
&:active {
background-color: @sidebar-selected-background-color;
}
+
+ &::before {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 4px;
+ height: 16px;
+ background-color: @sidebar-selected-border-color;
+ border-radius: @border-radius-md;
+ transform: translateY(-50%);
+ content: '';
+ }
}
&--disabled {
diff --git a/src/style/var.less b/src/style/var.less
index 519c4a62b..c5663d999 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -621,7 +621,7 @@
@sidebar-line-height: 20px;
@sidebar-text-color: @text-color;
@sidebar-disabled-text-color: @gray-5;
-@sidebar-padding: 20px @padding-sm 20px @padding-xs;
+@sidebar-padding: 20px @padding-sm;
@sidebar-active-color: @active-color;
@sidebar-background-color: @background-color;
@sidebar-selected-font-weight: @font-weight-bold;
@@ -793,8 +793,8 @@
@tree-select-font-size: @font-size-md;
@tree-select-nav-background-color: @background-color;
@tree-select-content-background-color: @white;
-@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
-@tree-select-item-height: 44px;
+@tree-select-nav-item-padding: 14px @padding-sm;
+@tree-select-item-height: 48px;
@tree-select-item-active-color: @red;
@tree-select-item-disabled-color: @gray-5;
@tree-select-item-selected-size: 16px;
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index 029f86bd5..097946964 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -25,10 +25,12 @@