update

packages/artplayer/src/style/info.less

@@ -0,0 +1,51 @@
+.art-video-player {
+    .art-info {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        z-index: 100;
+        width: 350px;
+        padding: 10px;
+        color: #fff;
+        font-size: 12px;
+        font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background-color: rgba(0, 0, 0, 0.9);
+
+        .art-info-item {
+            display: flex;
+            margin-bottom: 5px;
+            .art-info-title {
+                width: 100px;
+                text-align: right;
+            }
+
+            .art-info-content {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding-left: 5px;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .art-info-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            cursor: pointer;
+        }
+    }
+
+    &.art-info-show {
+        .art-info {
+            display: flex;
+        }
+    }
+}