From a31032e0d63956b2e9f0c75c8a85ca662fe42545 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 22 Apr 2020 17:52:45 +0800
Subject: [PATCH] style(Sidebar): update border style

---
 src/sidebar-item/index.less                   | 27 ++++++++++++-------
 src/style/var.less                            |  6 ++---
 src/tree-select/demo/index.vue                |  2 ++
 .../test/__snapshots__/demo.spec.js.snap      |  5 +---
 4 files changed, 23 insertions(+), 17 deletions(-)

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 @@
         <template slot="content">
           <van-image
             v-if="activeIndex3 === 0"
+            :show-loading="false"
             src="https://img.yzcdn.cn/vant/apple-1.jpg"
           />
           <van-image
             v-if="activeIndex3 === 1"
+            :show-loading="false"
             src="https://img.yzcdn.cn/vant/apple-2.jpg"
           />
         </template>
diff --git a/src/tree-select/test/__snapshots__/demo.spec.js.snap b/src/tree-select/test/__snapshots__/demo.spec.js.snap
index 9024ab601..ef3181896 100644
--- a/src/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/src/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -63,10 +63,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a></div>
       <div class="van-tree-select__content">
-        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
-              <!----></i></div>
-        </div>
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img"></div>
         <!---->
       </div>
     </div>