blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 18:00:27 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] NoticeBar: update style (#1893)

Browse Source
This commit is contained in:
neverland 2018-10-05 20:29:33 +08:00 committed by GitHub
parent ea129825f1
commit 2f65f60226
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/notice-bar/index.vue
View File

@ -11,7 +11,7 @@
<div :class="b('wrap')" ref="wrap"> <div :class="b('wrap')" ref="wrap">
<div <div
ref="content" ref="content"
:class="[b('content'), animationClass]" :class="[b('content'), animationClass, { 'van-ellipsis': !scrollable }]"
:style="contentStyle" :style="contentStyle"
@animationend="onAnimationEnd" @animationend="onAnimationEnd"
@webkitAnimationEnd="onAnimationEnd" @webkitAnimationEnd="onAnimationEnd"

2
packages/notice-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-notice-bar" style="color:undefined;background:undefined;"> <div class="van-notice-bar" style="color:undefined;background:undefined;">
<!----> <!---->
<div class="van-notice-bar__wrap"> <div class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div> <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
</div> </div>
<!----> <!---->
</div> </div>

28
packages/vant-css/src/notice-bar.css
View File

@ -2,22 +2,23 @@
.van-notice-bar { .van-notice-bar {
display: flex; display: flex;
color: $orange; color: #ed6a0c;
padding: 9px 15px; height: 40px;
font-size: 12px; padding: 0 15px;
line-height: 1.5; font-size: 14px;
line-height: 24px;
position: relative; position: relative;
background-color: #fff7cc; align-items: center;
background-color: #fffbe8;
&--withicon { &--withicon {
position: relative; position: relative;
padding-right: 30px; padding-right: 40px;
} }
&__left-icon { &__left-icon {
height: 18px; height: 18px;
min-width: 20px; min-width: 20px;
padding-top: 1px;
box-sizing: border-box; box-sizing: border-box;
img { img {
@ -27,16 +28,15 @@
} }
&__right-icon { &__right-icon {
top: 10px; top: 12px;
right: 10px; right: 15px;
font-size: 16px;
position: absolute; position: absolute;
font-size: 15px;
line-height: 1;
} }
&__wrap { &__wrap {
flex: 1; flex: 1;
height: 18px; height: 24px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -44,6 +44,10 @@
&__content { &__content {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
&.van-ellipsis {
max-width: 100%;
}
} }
&__play { &__play {