增加广播栏

This commit is contained in:
tianmo committed 2026-09-30 16:47:27 +08:00
1 parent 85b0e70907
commit d8786eb28a
21 files changed
+516 -59

No files matched your search

+61
View File
@@ -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%);
}
}