增加广播栏
This commit is contained in:
1 parent
85b0e70907
commit
d8786eb28a
21 files changed
+516
-59
No files matched your search
@@ -147,3 +147,64 @@ page {
|
||||
top: 0;
|
||||
width: 370rpx;
|
||||
}
|
||||
|
||||
/* ── 信息广播(首页最上方,文案为空则整条不渲染)─────────────────
|
||||
文案放得下就静态居中;放不下加 .broadcast-scroll 横向滚动,
|
||||
并把同一段文字渲染两遍首尾相接,滚动到 -50% 时正好接上,看不出循环接缝。 */
|
||||
.broadcast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 710rpx;
|
||||
margin: 12rpx auto 0;
|
||||
padding: 14rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff7e6;
|
||||
border: 1rpx solid #ffe3a3;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.broadcast-icon {
|
||||
flex: none;
|
||||
margin-right: 12rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.broadcast-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 静态:居中显示,实在超了也留个省略号兜底 */
|
||||
.broadcast-track {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #e60012; /* 兜底色:真实颜色由 home.broadcast_color 以内联样式覆盖 */
|
||||
}
|
||||
|
||||
/* 滚动:两段文字并排,整体左移 50% 后无缝重来 */
|
||||
.broadcast-scroll {
|
||||
display: inline-flex;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
animation: broadcast-marquee 18s linear infinite;
|
||||
}
|
||||
|
||||
/* 两段文字各带一个等宽右边距,整条宽度 = 2 ×(文字+间距),
|
||||
所以左移 50% 正好是一段,循环无缝 */
|
||||
.broadcast-text {
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
|
||||
@keyframes broadcast-marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user