[improvement] NoticeBar: update style (#1893)

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

View File

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

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__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>

View File

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