ソースを参照

弹幕组件样式优化

任一存 3 年 前
コミット
c7fed7a6d5
1 ファイル変更4 行追加5 行削除
  1. 4 5
      web/src/components/Danmaku.vue

+ 4 - 5
web/src/components/Danmaku.vue

@@ -199,7 +199,7 @@ export default {
 }
 .danmaku-container {
   max-width: 340px;
-  max-height: 288px;
+  max-height: 300px;
   overflow: hidden;
   // overflow-x: hidden;
   // overflow-y: scroll;
@@ -239,8 +239,7 @@ export default {
   margin: 0;
   color: #fff;
   border-radius: 20px;
-  background: rgba(0, 0, 0, 0.6);
-  border: 1px solid hsla(0, 0%, 100%, 0.53);
+  background: rgba(0, 0, 0, 0.39);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -249,7 +248,7 @@ export default {
 }
 .danmaku-list li.danmaku-list-item:nth-last-child(6) {
   /* visibility: hidden; */
-  animation: fadeout 0.3s linear;
+  animation: fadeout 0.3s linear forwards;
 }
 
 .input-container {
@@ -436,7 +435,7 @@ export default {
     transform: translateY(3px);
   }
   100% {
-    opacity: 0.2;
+    opacity: 0.3;
     transform: translateY(0px);
   }
 }