Pārlūkot izejas kodu

修改终端文字滚动

sophieChenyx 6 gadi atpakaļ
vecāks
revīzija
136ac93c4e

+ 3 - 1
src/stage/index/scene/TerminalScene.js

@@ -76,7 +76,9 @@ class TerminalScene extends scene {
 			const { title, beginTime, endTime } = data;
 			return `
 				<div class="front-row" fe-role="Widget">
-					<div class="first-cell">《${title}》</div>
+					<div class="first-cell">
+						<p>《${title}》</p>
+					</div>
 					<div class="second-cell">${timestamp2Str(beginTime)}</div>
 					<div class="third-cell">${timestamp2Str(endTime)}</div>
 				</div>

+ 19 - 2
src/stage/index/style/TerminalScene.less

@@ -1,3 +1,7 @@
+@keyframes moveFonts{
+	0%{transform:translateX(0rem);}
+	100%{transform:translateX(-2rem);}
+}
 #TerminalScene {
 	position: absolute;
 	width: 100%;
@@ -176,6 +180,13 @@
 						.first-cell {
 							border: solid unit(@borderSize, rem) #ffe100;
 							border-right: none;
+							overflow: hidden;
+							p{
+								animation: moveFonts 4s linear infinite normal;
+								overflow: visible;
+								white-space: nowrap;
+								text-overflow: initial;
+							}
 						}
 						.second-cell {
 							border: solid unit(@borderSize, rem) #ffe100;
@@ -199,14 +210,20 @@
 						}
 					}
 					div {
-						display: table-cell;
+						display: inline-block;
 						vertical-align: middle;
 						font-size: .34rem;
+						padding: .05rem;
 						border-top: solid unit(@borderSize, rem) #f0ecfe;
 					}
 					.first-cell {
-						width: 3.09rem;
+						width: 2.09rem;
 						text-align: left;
+						p{
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
 					}
 					.second-cell {
 						width: 2.79rem;