fix: 播放器标题过长时, 需要换行

src/components/MMCPlayer/index.vue

@@ -10,7 +10,7 @@
         v-interact
       >
         <div class="video">
-          <div class="name" v-clipboard:copy="vUrl.vUrl">{{ title }}</div>
+          <div class="name" v-clipboard:copy="vUrl.vUrl"><span class="txt">{{ title }}</span></div>
           <div class="tr-info-box">
             <div class="tr-info tr-info--1" v-if="networkType">{{ networkType }}</div>
             <div class="tr-info tr-info--2">{{ streamName }}</div>
@@ -478,28 +478,28 @@ export default {
     top: 0;
     left: 0;
     z-index: 99;
+    display: flex;
     .name {
-      position: absolute;
-      top: 0;
-      left: 0;
       // width: 122px;
+      flex-wrap: wrap;
       height: 26px;
-      background: #000000;
-      border-radius: 1px;
-      opacity: 0.6;
-      line-height: 26px;
-      text-align: center;
-      font-size: 16px;
-      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
-      font-weight: bold;
-      color: #ffffff;
+      flex: auto;
+      display: flex;
+
+      .txt {
+        background: #000000;
+        opacity: 0.6;
+        font-size: 16px;
+        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+        font-weight: bold;
+        color: #ffffff;
+        padding: 3px;
+      }
     }
 
     //top right
     .tr-info-box {
-      position: absolute;
-      top: 0;
-      right: 55px;
+      flex-shrink: 0;
       display: flex;
 
       .tr-info {
@@ -527,9 +527,7 @@ export default {
       }
     }
     .close {
-      position: absolute;
-      top: 0;
-      right: 0;
+      flex-shrink: 0;
       width: 46px;
       height: 26px;
       text-align: center;