[improvement] NoticeBar: update style (#699)

packages/notice-bar/README.md

@@ -57,8 +57,8 @@
 | speed | 滚动速率 (px/s) | `Number` | `50` |
 | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` |
 | left-icon | 左侧图标图片 URL | `String` | - |
-| color | 文本颜色 | `String` | `#f60` |
-| background | 滚动条背景 | `String` | `#fff7cc` |
+| color | 文本颜色 | `String` | `#ed6a0c` |
+| background | 滚动条背景 | `String` | `#fffbe8` |
 | open-type | 微信开放能力 | `String` | `navigate` |
 
 ### Event

packages/notice-bar/index.less

@@ -1,18 +1,19 @@
 .van-notice-bar {
   display: flex;
-  padding: 9px 10px;
-  font-size: 12px;
-  line-height: 1.5;
+  height: 40px;
+  padding: 0 15px;
+  font-size: 14px;
+  line-height: 24px;
+  align-items: center;
 
   &--within-icon {
     position: relative;
-    padding-right: 30px;
+    padding-right: 40px;
   }
 
   &__left-icon {
     height: 18px;
     min-width: 20px;
-    padding-top: 1px;
     box-sizing: border-box;
 
     > image {
@@ -24,20 +25,23 @@
   &__right-icon {
     position: absolute;
     top: 10px;
-    right: 10px;
-    font-size: 15px;
-    line-height: 1;
+    right: 15px;
+    font-size: 16px;
   }
 
   &__content-wrap {
-    position: relative;
     flex: 1;
-    height: 18px;
+    height: 24px;
     overflow: hidden;
+    position: relative;
   }
 
   &__content {
     position: absolute;
     white-space: nowrap;
+
+    &.van-ellipsis {
+      max-width: 100%;
+    }
   }
 }

packages/notice-bar/index.ts

@@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 
-const FONT_COLOR = '#f60';
-const BG_COLOR = '#fff7cc';
+const FONT_COLOR = '#ed6a0c';
+const BG_COLOR = '#fffbe8';
 
 VantComponent({
   props: {

packages/notice-bar/index.wxml

@@ -8,7 +8,7 @@
     <image src="{{ leftIcon }}" />
   </view>
   <view class="van-notice-bar__content-wrap">
-    <view class="van-notice-bar__content" animation="{{ animationData }}">
+    <view class="van-notice-bar__content {{ scrollable ? '' : 'van-ellipsis' }}" animation="{{ animationData }}">
       {{ text }}
     </view>
   </view>