feat: 视频样式优化

src/components/InteractiveVideoEditor/VideoLineEditor/index.vue

@@ -323,10 +323,13 @@ defineExpose({
       width: 100%;
       position: absolute;
       padding: 8px 16px;
-      top: 0;
+      top: 15px;
       left: 0;
-      background-color: rgba($color: #000000, $alpha: 0.6);
-      color: #fff;
+      background-color: rgba($color: #f5f5f5, $alpha: 0.6);
+      border-radius: 8px; /* 圆角半径 */
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+      border: 1px solid #000;
+      color: #000;
       font-size: 14px;
       font-weight: 600;
     }
@@ -341,7 +344,9 @@ defineExpose({
         padding: 2px;
         .option-btn {
           border: 1px solid #000;
-          background-color: rgba($color: #ffffff, $alpha: 0.6);
+          border-radius: 8px; /* 圆角半径 */
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+          background-color: rgba($color: #f5f5f5, $alpha: 0.6);
           color: #000000;
           font-size: 8px;
           width: 100%;

src/components/XGVideoViewer/index.vue

@@ -142,32 +142,38 @@ watch(
     width: 100%;
     position: absolute;
     padding: 8px 16px;
-    top: 20%;
+    top: 10%;
     left: 0;
     transform: translateY(-50%);
-    background-color: rgba($color: #000000, $alpha: 0.6);
-    color: #fff;
-    font-size: 14px;
+    background-color: rgba($color: #f5f5f5, $alpha: 0.6);
+    border-radius: 8px; /* 圆角半径 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    border: 1px solid #000;
+    //color: #fff;
+    font-size: 24px;
+    color: #1f2d3d;
     font-weight: 600;
     z-index: 9999;
   }
   .option-btn-box {
     width: 100%;
     position: absolute;
-    bottom: 60px;
-    left: 0;
+    bottom: 15%;
+    left: 3%;
     display: flex;
     z-index: 9999;
     .option-btn-item {
-      width: 50%;
+      width: 30%;
       padding: 2px;
       .option-btn {
+        border-radius: 8px; /* 圆角半径 */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
         border: 1px solid #000;
-        background-color: rgba($color: #ffffff, $alpha: 0.6);
+        background-color: rgba($color: #f5f5f5, $alpha: 0.6);
         color: #000;
-        font-size: 8px;
+        font-size: 20px;
         width: 100%;
-        height: 28px;
+        height: 30px;
         display: flex;
         align-items: center;
         justify-content: flex-start;