弹幕样式调整

src/components/VideoBox.vue

@@ -32,7 +32,7 @@ const handleAddDanmu=(time)=>{
                 danmuState.list.push({
                     ...item,
                     top:handleGetTopPosition(),
-                    speed:Math.floor(Math.random()*(16-8+1))+8//4~8 之间的随机数
+                    speed:Math.floor(Math.random()*(16-10+1))+10//10~16 之间的随机数
                 })
             }
         }else{
@@ -52,9 +52,9 @@ const handleGetTopPosition=()=>{
     if(length%3===1){
         num=10
     }else if(length%3===2){
-        num=35
+        num=36
     }else{
-        num=55
+        num=62
     }
     return num+'px'
 }
@@ -195,14 +195,14 @@ const handleSendDanmu=async ()=>{
                     :class="[
                         'no-select-text danmu-item',
                         videoState.play?'animat-run':'animat-pause',
-                        item.user_id==$store.state.userInfo.user_id?'border':''
+                        item.user_id==$store.state.userInfo.user_id?'danmu-item-self':''
                     ]"
                     v-for="item in danmuState.list"
                     :key="item.id"
                     :style="{
                         color:item.color,
                         top:item.top,
-                        animationDuration:videoState.isPageFullScreen?item.speed+20+'s':item.speed+'s'
+                        animationDuration:videoState.isPageFullScreen?item.speed+15+'s':item.speed+'s'
                     }"
                 >{{item.content}}</span>
             </div>
@@ -513,20 +513,20 @@ const handleSendDanmu=async ()=>{
         top: 0;
         left: 0;
         right: 0;
-        height: 70px;
         z-index: 99;
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
         .danmu-item{
             color: #fff;
             animation: move 6s linear;
             position: absolute;
             top: 0;
             display: block;
-            left: calc(100% + 1000px);
+            left: 100%;
             position: absolute;
-            font-size: 12px;
-            height: 18px;
+            font-size: 14px;
             white-space: nowrap;
+            background: rgba(48, 48, 48, 0.5);
+            padding: 4px 10px;
+            border-radius: 20px;
         }
         .animat-pause{
             animation-play-state: paused;
@@ -534,16 +534,12 @@ const handleSendDanmu=async ()=>{
         .animat-run{
             animation-play-state: running;
         }
-        .border{
-            border: 1px solid #fff;
-            border-radius: 10px;
-            padding-left: 10px;
-            padding-right: 10px;
-            line-height: 18px;
+        .danmu-item-self{
+            color: #F9AC3A !important;
         }
         @keyframes move {
             0%{
-                left: calc(100% + 1000px);
+                left: 100%;
             }
             100%{
                 left: -1000px;