[improvement] Badge: update info style (#2122)

packages/badge/demo/index.vue

@@ -16,7 +16,7 @@
         />
         <van-badge
           :title="$t('title')"
-          info="199"
+          info="99+"
         />
       </van-badge-group>
     </demo-block>

packages/badge/en-US.md

@@ -18,7 +18,7 @@ Use `active-key` prop to set index of chosen 'badge'
   <van-badge title="Title" />
   <van-badge title="Title" info="8" />
   <van-badge title="Title" info="99" />
-  <van-badge title="Title" info="199" />
+  <van-badge title="Title" info="99+" />
 </van-badge-group>
 ```
 

packages/badge/index.less

@@ -13,6 +13,10 @@
   background-color: @background-color;
   border-left: 3px solid transparent;
 
+  &__text {
+    position: relative;
+  }
+
   &:active {
     background-color: @active-color;
   }
@@ -36,11 +40,7 @@
     }
   }
 
-  &__info {
-    top: 7px;
-    left: auto;
-    right: 5px;
-    font-size: 12px;
-    transform: scale(0.9);
+  .van-info {
+    right: 4px;
   }
 }

packages/badge/index.vue

@@ -4,11 +4,13 @@
     :href="url"
     @click="onClick"
   >
-    <van-info
-      :info="info"
-      :class="b('info')"
-    />
-    {{ title }}
+    <div :class="b('text')">
+      {{ title }}
+      <van-info
+        :info="info"
+        :class="b('info')"
+      />
+    </div>
   </a>
 </template>
 

packages/badge/test/__snapshots__/demo.spec.js.snap

@@ -5,26 +5,34 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--top-bottom van-badge-group">
       <a class="van-badge van-badge--select van-hairline">
-        <!---->
-        标签名称
+        <div class="van-badge__text">
+          标签名称
+          <!---->
+        </div>
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">
-          8
+        <div class="van-badge__text">
+          标签名称
+          <div class="van-info van-badge__info">
+            8
+          </div>
         </div>
-        标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">
-          99
+        <div class="van-badge__text">
+          标签名称
+          <div class="van-info van-badge__info">
+            99
+          </div>
         </div>
-        标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">
-          199
+        <div class="van-badge__text">
+          标签名称
+          <div class="van-info van-badge__info">
+            99+
+          </div>
         </div>
-        标签名称
       </a>
     </div>
   </div>

packages/badge/zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(BadgeGroup);
   <van-badge title="标签名称" />
   <van-badge title="标签名称" info="8" />
   <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" info="199" />
+  <van-badge title="标签名称" info="99+" />
 </van-badge-group>
 ```