样式调整

src/modules/resource/video/components/BatchImportVideo.vue

@@ -53,7 +53,7 @@ const handleClose = (val: any) => {
 }
 </script>
 <template>
-  <el-dialog title="批量导入视频" :close-on-click-modal="false" :before-close="handleCancel">
+  <el-dialog title="批量导入视频" :close-on-click-modal="false" :before-close="handleCancel" width="45vw">
     <el-form :model="form" label-suffix="：">
       <el-form-item label="视频分类" prop="classification">
         <el-tree-select

src/modules/resource/video/components/UploadMultipleVideo.vue

@@ -135,14 +135,13 @@ defineExpose({ uploader, fileList: $$(fileList) })
       <input accept=".mp4" type="file" id="fileUpload" multiple @change="fileChange" />
     </div>
     <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
-
-    <div v-for="(item, index) in fileList" :key="index">
-      <div>
-        <span>{{ item.file?.name }}</span>
-        <el-progress style="width: 200px" :percentage="percentage(item.loaded)" />
+    <div v-for="(item, index) in fileList.slice(0, 3)" :key="index">
+      <div class="video-info">
+        <span class="name">{{ item.file?.name }}</span>
+        <el-progress style="width: 200px" :percentage="percentage(item.loaded)" class="view" />
       </div>
     </div>
-    <el-link type="primary" v-if="fileList.length > 3" @click="handleView"
+    <el-link :underline="false" type="primary" v-if="fileList.length > 3" @click="handleView"
       >共{{ fileList.length }}个文件，查看更多</el-link
     >
   </div>
@@ -189,20 +188,15 @@ defineExpose({ uploader, fileList: $$(fileList) })
   }
   .video-info {
     display: flex;
+    margin-top: 10px;
     .name {
       color: #333333;
-      font-size: 16px;
-      line-height: 100%;
-    }
-    .name1 {
-      color: #aa1941;
       font-size: 14px;
       line-height: 1.5;
     }
     .view {
       font-size: 16px;
       line-height: 100%;
-      color: #399ee8;
       margin-left: 20px;
       cursor: pointer;
     }

src/modules/resource/video/components/VideoDetail.vue

@@ -39,14 +39,20 @@ const handleSizeChange = (val: any) => {
 const handleCurrentChange = (val: any) => {
   page.currentPage = val
 }
+function percentage(value: number) {
+  return parseFloat((value ? value * 100 : 0).toFixed(2))
+}
 </script>
 <template>
-  <el-dialog title="更多视频文件" :before-close="handleCancel">
+  <el-dialog title="更多视频文件" :before-close="handleCancel" width="30vw">
     <div
       v-for="(item, index) in props.videoList.slice((page.currentPage - 1) * page.size, page.currentPage * page.size)"
       :key="index"
     >
-      {{ item.file.name }}
+      <div class="video-info">
+        <span class="name">{{ item.file?.name }}</span>
+        <el-progress style="width: 200px" :percentage="percentage(item.loaded)" class="view" />
+      </div>
     </div>
     <el-pagination
       v-model:currentPage="currentPage"
@@ -60,3 +66,23 @@ const handleCurrentChange = (val: any) => {
     </el-pagination>
   </el-dialog>
 </template>
+<style lang="scss" scoped>
+.video-info {
+  display: flex;
+  margin-top: 10px;
+  .name {
+    color: #333333;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+  .view {
+    font-size: 16px;
+    line-height: 100%;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+}
+:deep(.el-pagination) {
+  margin-top: 20px;
+}
+</style>