update

src/api/video.js

@@ -30,3 +30,11 @@ export function fetchSuggestionList(params) {
     params
   })
 }
+
+export function addFashionShowVideo(data) {
+  return request({
+    url: '/fashionShowVideo/add',
+    method: 'post',
+    data
+  })
+}

src/router/modules/catwalkVideo.js

@@ -12,19 +12,19 @@ const catwalkVideoRouter = {
     {
       path: "catwalkVideoIndex",
       component: () => import("@/views/catwalk-video/index"),
-      name: "走秀视频列表",
+      name: "catwalkVideoIndex",
       meta: { title: "走秀视频列表" }
     },
-    {
-      path: "catwalkVideoTool",
-      component: () => import("@/views/catwalk-video/catwalkVideo"),
-      name: "AI走秀视频剪辑",
-      meta: { title: "AI走秀视频剪辑" }
-    },
+    // {
+    //   path: "catwalkVideoTool",
+    //   component: () => import("@/views/catwalk-video/catwalkVideo"),
+    //   name: "AI走秀视频剪辑",
+    //   meta: { title: "AI走秀视频剪辑" }
+    // },
     {
       path: "brandVideoEditor",
       component: () => import("@/views/catwalk-video/brandVideoEditor"),
-      name: "品牌视频剪辑",
+      name: "brandVideoEditor",
       meta: { title: "品牌视频剪辑" }
     },
   ]

src/router/modules/musicLibraryManager.js

@@ -12,13 +12,13 @@ const musicLibraryManagerRouter = {
     {
       path: "musicCategoryIndex",
       component: () => import("@/views/music-library-manager/index"),
-      name: "音乐类目列表",
+      name: "musicCategoryIndex",
       meta: { title: "音乐类目列表" }
     },
     {
       path: "musicLibrary",
       component: () => import("@/views/music-library-manager/musicLibrary"),
-      name: "音乐库列表",
+      name: "musicLibrary",
       meta: { title: "音乐库列表" }
     }
   ]

src/router/modules/videoCoverManager.js

@@ -6,14 +6,14 @@ const videoCoverManagerRouter = {
   path: "/videoCoverManager",
   component: Layout,
   redirect: "/videoCoverManager/videoCoverIndex",
-  name: "视频封面管理",
-  meta: { title: "视频封面管理", icon: "el-icon-camera-solid" },
+  name: "店铺信息管理",
+  meta: { title: "店铺信息管理", icon: "el-icon-camera-solid" },
   children: [
     {
       path: "videoCoverIndex",
       component: () => import("@/views/video-cover-manager/index"),
-      name: "视频封面列表",
-      meta: { title: "视频封面列表" }
+      name: "videoCoverIndex",
+      meta: { title: "店铺信息列表" }
     }
   ]
 };

src/views/catwalk-video/brandVideoEditor.vue

@@ -1,75 +1,327 @@
 <template>
   <div class="brand-video-editor">
-    <div class="brand-video-editor__top">
-      <div class="video-upload">
-        <div class="head"><span class="title">上传视频：</span></div>
-        <div class="upload-black">
-          <!-- action必选参数, 上传的地址 -->
-          <el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
-            <video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
-            <p class="text-black" v-else-if="videoForm.Video =='' && videoFlag == false">
-              <span class="upload-icon"></span>
-              <span class="text">选择文件或者拖拽上传视频</span>
-              <span class="subtext">MP4 文件 最大50MB</span>
-              <a href="javascript:;" class="file-btns">浏览文件</a>
-            </p>
-            <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
-          </el-upload>
+    <el-form :model="form" :rules="rules" ref="VideoEditorForm">
+      <div class="brand-video-editor__top">
+        <div class="video-upload">
+          <el-form-item prop="videoUrl" label="上传视频文件:" required>
+            <div class="upload-black">
+              <!-- action必选参数, 上传的地址 -->
+              <el-upload class="avatar-uploader el-upload--text" 
+                :action="action" 
+                drag
+                multiple
+                :show-file-list="false" 
+                :headers="{
+                  'Authorization': 'Bearer ' + token
+                }"
+                :limit="15"
+                :disabled="videoFlag"
+                accept="video/*"
+                :on-success="handleVideoSuccess" 
+                :before-upload="beforeUploadVideo" 
+                :on-progress="uploadVideoProcess">
+                <div class="video-black__warp">
+                  <div class="video--black" v-if="videoList.length && !videoFlag">
+                    <ul class="video--black_ul">
+                      <li class="video--black_item" v-for="acc in videoList" :key="acc.uid">
+                        <span class="video--icon"><img src="../../assets/image/file-icon.svg" alt=""></span>
+                        <span class="video--title">{{ acc.fileName || '--' }}</span>
+                        <span class="video--size">{{ acc.size || '--' }}</span>
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          content="删除"
+                          placement="bottom-end">
+                            <i class="close el-icon-circle-close"
+                            @click.stop="imgUploadDel(acc.uid)"></i>
+                        </el-tooltip>
+                      </li>
+                    </ul>
+                  </div>
+                  <p class="text-black" v-else-if="!videoList.length && !videoFlag">
+                    <span class="upload-icon"><img src="../../assets/image/upload-icon.svg" alt=""></span>
+                    <span class="_text_">选择文件或者拖拽上传视频</span>
+                    <span class="subtext">支持MP4文件，最大200MB</span>
+                    <a href="javascript:;" class="file-btns">浏览文件</a>
+                  </p>
+                  <div class="progress-black" v-if="videoFlag">
+                    <div class="progress--text">上传中...</div>
+                    <el-progress color="#ae8877" :stroke-width="10" :percentage="videoUploadPercent" :show-text="false"></el-progress>
+                  </div>
+                  
+                </div>
+              </el-upload>
+            </div>
+          </el-form-item>
         </div>
       </div>
-    </div>
+      <div class="brand-video-editor__b">
+        <div class="type-black__left">
+          <div class="type-black__ul">
+            <ul>
+              <li>
+                <el-form-item prop="shopConfigId" label="选择剪辑类型:">
+                  <div class="type-black__select">
+                    <el-select v-model="form.shopConfigId" placeholder="请选择剪辑类型">
+                      <el-option
+                        v-for="item in shopConfigs"
+                        :key="item.id"
+                        :label="item.shopName"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </li>
+              <li>
+                <el-form-item prop="musicConfigId" label="选择现有音乐类型:">
+                  <div class="type-black__select">
+                    <el-select v-model="form.musicConfigId" placeholder="请选择音乐类型">
+                      <el-option
+                        v-for="item in musicTypes"
+                        :key="item.id"
+                        :label="item.musicCategoryName"
+                        :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </el-form-item>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="type-black__right">
+          <div class="operate-black">
+            <el-form-item prop="processType" label="选择操作类型:">
+              <el-radio-group v-model="form.processType">
+                <el-radio :label="0">剪辑</el-radio>
+                <el-radio :label="1">拼接</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+          <div class="ratio-black">
+            <el-form-item prop="expandScale" label="设置放大倍数:">
+              <el-slider v-model="form.expandScale" :min="1" :max="2" show-input :step="0.1" input-size="medium"></el-slider>
+            </el-form-item>
+          </div>
+        </div>
+      </div>
+      <div class="video-editor-btns">
+        <el-button type="primary" :disabled="videoFlag" class="video-editor__a" :loading="comfirmLoading" @click="handleConfirm">处理视频</el-button>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
-
+import { api } from "@/api/api";
+import { getToken } from '@/utils/auth'
+import { fetchMusicConfigList } from "@/api/musicLibraryManager";
+import { shopConfigInfoList } from "@/api/videoCoverManager";
+import { addFashionShowVideo } from "@/api/video";
 export default {
   name: "BrandVideoEditor",
   components: {
     
   },
   computed: {
-   
+    token() {
+      return getToken();
+    }
   },
   data() {
     return {
-      uploadUrl: '',
+      action: api.fileUrl,
+      comfirmLoading: false,
+      form: {
+        shopConfigId: '',
+        musicConfigId: '',
+        videoUrl: '',
+        expandScale: 0,
+        processType: 0
+      },
+      uploadingCount: 0,
       videoFlag: false,
       videoUploadPercent: 0,
-      videoForm: {
-        Video: ''
-      }
+      videoList: [],
+      shopConfigs: [],
+      musicTypes: [],
+      rules: {
+        shopConfigId: [
+          { required: true, message: "请选择剪辑类型", trigger: "change" }
+        ],
+        musicConfigId: [
+          { required: true, message: "请选择音乐类型", trigger: "change" }
+        ],
+        videoUrl: [
+          { validator: this.checkVideoUrl, trigger: "change" }
+        ],
+        processType: [
+          { required: true, message: "请选择操作类型", trigger: "change" }
+        ],
+        expandScale: [
+          { required: true, message: "请设置放大倍数", trigger: "change blur" }
+        ]
+      },
+      progressTimer: null
     };
   },
   //页面创建的时候执行
   created() {
-   
+    this.getShopConfigs();
+    this.getMusicCategory();
   },
   methods: {
+    checkVideoUrl(rule, value, callback) {
+      if (this.videoList.length === 0) {
+        callback(new Error('请上传视频文件'));
+      } else {
+        callback();
+      }
+    },
+    getShopConfigs() {
+      const params = {}
+      shopConfigInfoList(params).then(res => {
+        if (res.code == 200) {
+          this.shopConfigs = res.data.rows;
+        }
+      });
+    },
+    getMusicCategory() {
+      const params = {
+        type: 0
+      }
+      fetchMusicConfigList(params).then(res => {
+        if (res.code == 200) {
+          this.musicTypes = res.data.rows;
+        }
+      });
+    },
+    handleConfirm() {
+      this.$refs.VideoEditorForm.validate(valid => {
+        if (valid) {
+          const videoUrls = []
+          this.videoList.forEach(acc => {
+            videoUrls.push(acc.videoUrl)
+          })
+          // this.form.processType： 0 剪辑 1 拼接
+          const list = this.form.processType == 0 ? this.videoList.map(acc => {
+            return {
+              "shopConfigId": this.form.shopConfigId,
+              "musicConfigId": this.form.musicConfigId,
+              "videoUrl": [acc.videoUrl],
+              "expandScale": this.form.expandScale
+            }
+          }) : [{
+            "shopConfigId": this.form.shopConfigId,
+            "musicConfigId": this.form.musicConfigId,
+            "videoUrl": videoUrls,
+            "expandScale": this.form.expandScale
+          }]
+          const params = {
+            list: list,
+            processType: this.form. processType
+          }
+          this.comfirmLoading = true;
+          addFashionShowVideo(params).then(res =>{
+            if(res.code == 200){
+              this.$message.success(res.msg || "操作成功");
+              const visitedViews = this.$store.state.tagsView.visitedViews;
+              const view = visitedViews.filter(acc => acc.name == 'brandVideoEditor')
+              if (view.length) {
+                this.$store.dispatch("tagsView/delView", view[0]);
+              }
+              this.$router.push({
+                name: "catwalkVideoIndex"
+              });
+            }
+          }).finally(()=>{
+            this.comfirmLoading = false;
+          })
+        } else {
+          return false;
+        }
+      });
+    },
     beforeUploadVideo(file) {
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
+      const isLt10M = file.size / 1024 / 1024 < 200;
+      const allowedTypes = [
+        'video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
+      ];
+      if (!allowedTypes.includes(file.type)) {
         this.$message.error('请上传正确的视频格式');
         return false;
       }
       if (!isLt10M) {
-        this.$message.error('上传视频大小不能超过10MB哦!');
+        this.$message.error('上传文件大小不能超过200MB哦!');
         return false;
       }
+      // 启动上传动画（只启动一次）
+      if (this.uploadingCount === 0) {
+        this.videoFlag = true;
+        this.videoUploadPercent = 0;
+        this.progressTimer = setInterval(() => {
+          if (this.videoUploadPercent < 97) {
+            this.videoUploadPercent += 3;
+          } else {
+            clearInterval(this.progressTimer);
+          }
+        }, 500);
+      }
+
+      this.uploadingCount += 1;
+
+      return true;
     },
     uploadVideoProcess(event, file, fileList) {
       this.videoFlag = true;
-      this.videoUploadPercent = file.percentage.toFixed(0);
+      // this.videoUploadPercent = file.percentage;
     },
     handleVideoSuccess(res, file) {
-      this.videoFlag = false;
-      this.videoUploadPercent = 0;
-      if (res.status == 200) {
-        this.videoForm.videoUploadId = res.data.uploadId;
-        this.videoForm.Video = res.data.uploadUrl;
+      if (res.code == 200) {
+        this.videoList.push({
+          fileName: res.data.fileName,
+          size: res.data.size,
+          videoUrl: res.data.url,
+          uid: file.uid
+        })
+        this.form.videoUrl = res.data.url;
+        this.$refs.VideoEditorForm.clearValidate(['videoUrl']);
       } else {
-        this.$message.error('视频上传失败，请重新上传！');
+        this.$message.error('上传失败，请重新上传！');
+      }
+      // 每完成一个，-1
+      this.uploadingCount -= 1;
+
+      // 所有文件上传完成，重置 UI 状态
+      if (this.uploadingCount === 0) {
+        clearInterval(this.progressTimer);
+        this.videoFlag = false;
+        this.videoUploadPercent = 0;
       }
+    },
+    imgUploadDel(uid) {
+      //删除
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.videoList.forEach((acc, index) => {
+          if (acc.uid == uid) {
+            this.videoList.splice(index, 1);
+          }
+        })
+        if (this.videoList.length === 0) {
+          this.form.videoUrl = '';
+        }
+        this.$notify({
+          title: "成功",
+          message: "删除成功",
+          type: "success",
+          duration: 3000
+        });
+      });
     }
   }
 };
@@ -77,48 +329,113 @@ export default {
 
 <style lang="scss" scoped>
   .brand-video-editor {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
     padding: 40px 65px 65px 30px;
 
+    /deep/ .el-form-item__label {
+      color: #232323;
+      display: block;
+      width: 100%;
+      text-align: left;
+      font-size: 16px;
+      float: none;
+    }
+
     .brand-video-editor__top {
       display: flex;
-      justify-content: space-between;
-      gap: 3.6vw;
 
       .video-upload {
         flex: 1;
-      }
-      .processed-video {
-        flex: 1;
+        max-width: 100%;
       }
 
-      .head {
+      .video-black__warp {
+        width: 100%;
+        max-width: 70%;
         display: flex;
-        justify-content: space-between;
-        font-size: 24px;
-        height: 48px;
-        line-height: 48px;
-        color: #444444;
-        margin-bottom: 20px;
-
-        .download-video {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 2px;
-          border: 1px solid #CBCBCB;
-          height: 48px;
-          font-size: 18px;
-          color: #666666;
-          padding: 0 20px;
-          background: linear-gradient(180deg, #FFFFFF 9%, #FAFAFA 100%);
+        justify-content: center;
+
+        .progress-black {
+          width: 100%;
+          max-width: 400px;
+
+          .progress--text {
+            color: #232323;
+          }
+        }
+
+        .video--black {
+          position: relative;
+
+          .video--black_ul {
+            display: flex;
+            gap: 50px;
+            margin: 0;
+            padding: 0;
+            flex-wrap: wrap;
+          }
+
+          .video--black_item {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 110px;
+            list-style: none;
+          }
+
+          .video--icon {
+            width: 80px;
+
+            img {
+              display: block;
+              max-width: 100%;
+            }
+          }
+          .video--title {
+            font-size: 14px;
+            color: #232323;
+            font-weight: bold;
+            line-height: 1.5;
+            margin-top: 10px;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 100%;
+            text-overflow: ellipsis;
+          }
+          .video--size {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ae8877;
+            line-height: 1.5;
+          }
+          .close {
+            position: absolute;
+            top: -20px;
+            right: -20px;
+            cursor: pointer;
+            z-index: 999999;
+            color: red;
+            background-color: #fff;
+            font-size: 30px;
+            border-radius: 50%;
+            outline: none;
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            font-size: 20px;
+            color: #8c939d;
+            display: block;
+            text-align: center;
+          }
         }
       }
 
       .upload-black {
         width: 100%;
-        height: 420px;
-        border: 2px dashed #BABABA;
-        border-radius: 20px;
 
         .avatar-uploader {
           display: block;
@@ -126,11 +443,20 @@ export default {
           height: 100%;
 
           /deep/ .el-upload {
-            display: flex;
+            border: none;
             width: 100%;
             height: 100%;
-            justify-content: center;
-            align-items: center;
+            .el-upload-dragger {
+              display: flex;
+              width: 100%;
+              height: 100%;
+              justify-content: center;
+              align-items: center;
+              padding: 80px 0;
+              border: 2px dashed #d9d9d9;
+              border-radius: 10px;
+              min-height: 300px;
+            }
           }
         }
         .text-black {
@@ -138,56 +464,102 @@ export default {
           flex-direction: column;
           align-items: center;
           margin: 0;
+          gap: 10px;
 
           .upload-icon {
-            width: 48px;
-            height: 48px;
-            background: pink;
-            margin-bottom: 48px;
+            width: 50px;
+            height: 50px;
+
+            img {
+              display: block;
+              width: 100%;
+            }
           }
-          .text {
-            font-size: 30px;
+          ._text_ {
+            font-size: 20px;
             color: #292D32;
             line-height: 1.5;
           }
           .subtext {
-            font-size: 26px;
+            font-size: 18px;
             color: #A9ACB4;
             line-height: 1.5;
           }
 
           a.file-btns {
             display: flex;
-            font-size: 30px;
+            font-size: 18px;
             justify-content: center;
             align-items: center;
-            height: 68px;
-            border-radius: 10px;
-            border: 2px solid #CBD0DC;
-            padding: 0 50px;
+            height: 40px;
+            border-radius: 4px;
+            border: 1px solid #CBD0DC;
+            padding: 0 30px;
             color: #54575C;
-            margin-top: 30px;
           }
         }
       }
-      .video-result {
-        width: 100%;
-        height: 420px;
-        border: 2px dashed #BABABA;
-        border-radius: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    }
+    .brand-video-editor__b {
+      display: flex;
+      justify-content: space-between;
+      gap: 3.6vw;
+      align-items: stretch;
+      .type-black__left {
+        width: 500px;
+        flex: 0 0 500px;
 
-        .video-result__empty {
-          width: 168px;
-          height: 198px;
+        ul {
+          padding: 0;
+          margin: 0;
+        }
 
-          img {
-            display: block;
-            height: 100%;
+        li {
+          list-style: none;
+
+          /deep/ .el-select {
+            width: 100%;
           }
         }
+        li + li {
+          margin-top: 30px;
+        }
+      }
+      .type-black__right {
+        flex: 1;
+      }
+
+      /deep/ .el-slider__runway,
+      /deep/ .el-slider__bar {
+        height: 10px;
+      }
+      /deep/ .el-slider__runway {
+        border-radius: 20px;
+      }
+      /deep/ .el-slider__bar {
+        border-top-left-radius: 20px;
+        border-bottom-left-radius: 20px;
+      }
+      /deep/ .el-slider__button {
+        width: 20px;
+        height: 20px;
+      }
+      /deep/ .el-slider__input.el-input-number--medium {
+        margin-top: 3px;
+      }
+    }
+    .video-editor-btns {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 50px 0;
+
+      /deep/ .video-editor__a {
+        font-size: 16px;
+        background: #ae8877;
+        color: #fff;
+        padding: 15px 80px;
+        border-radius: 4px;
       }
     }
   }

src/views/catwalk-video/index.vue

@@ -1,5 +1,26 @@
 <template>
   <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-container-lt">
+        <el-form :inline="true" label-position="left" :model="listQuery">
+          <el-form-item>
+            <el-input clearable v-model="listQuery.videoTitle" placeholder="视频标题"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="listQuery.processStatus" clearable filterable placeholder="处理状态">
+              <el-option
+                v-for="item in processStatusOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-button type="primary" @click="getList()">搜索</el-button>
+        </el-form>
+      </div>
+    </div>
     <div class="table-container">
       <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
         stripe border fit highlight-current-row>
@@ -41,6 +62,14 @@
         <el-table-column label="SKU" min-width="100" align="center" prop="sku" />
         <el-table-column label="店铺名称" min-width="100" align="center" prop="storeName" />
         <el-table-column label="创建时间" min-width="100" align="center" prop="createTime" />
+        <el-table-column label="处理状态" min-width="100" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.processStatus == 0">处理中</span>
+            <span v-if="scope.row.processStatus == 1">处理成功</span>
+            <span v-if="scope.row.processStatus == 2">处理失败</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="处理结果" align="center" prop="processResult" />
         <el-table-column label="下载次数" min-width="100" align="center">
           <template slot-scope="scope">
             {{ scope.row.downlaodCount ? scope.row.downlaodCount : '-' }}
@@ -147,6 +176,13 @@ export default {
     // changeTopic
   },
   computed: {
+    processStatusOptions() {
+      return [
+        {value: 0, label: '处理中'},
+        {value: 1, label: '处理成功'},
+        {value: 2, label: '处理失败'}
+      ]
+    },
     ...mapGetters(["device", "roles"]) // 从 vuex 中获取设备类型
   },
   data() {
@@ -161,8 +197,8 @@ export default {
         currentPage: 1,
         pageSize: 10,
         videoTitle: null,
-        type:2
-        // sku: null,
+        type:2,
+        processStatus: null
       },
       currentVideoUrl: null,
       currentVideoTitle: null

src/views/music-library-manager/musicLibrary.vue

@@ -4,7 +4,7 @@
       <div class="filter-container-lt">
         <el-form :inline="true" label-position="left" :model="listQuery">
           <el-form-item>
-            <el-input clearable v-model="listQuery.musicName" placeholder="音乐库名称"
+            <el-input clearable v-model="listQuery.musicName" placeholder="音乐名称"
             ></el-input>
           </el-form-item>
           <el-form-item>

src/views/music-library-manager/musicLibraryUpdater.vue

@@ -36,6 +36,7 @@
                 <!-- action必选参数, 上传的地址 -->
                 <el-upload class="avatar-uploader el-upload--text" 
                   :action="action" 
+                  drag
                   :show-file-list="false" 
                   :headers="{
                     'Authorization': 'Bearer ' + token
@@ -48,8 +49,8 @@
                   <div class="video-black__warp">
                     <div class="music--black" v-if="form.musicUrl && !videoFlag">
                       <span class="music--icon"><img src="../../assets/image/file-icon.svg" alt=""></span>
-                      <span class="music--title">{{ form.fileName }}</span>
-                      <span class="music--size">{{ form.size }}</span>
+                      <span class="music--title">{{ form.fileName || '--' }}</span>
+                      <span class="music--size">{{ form.size || '--' }}</span>
                       <el-tooltip
                         class="item"
                         effect="dark"
@@ -280,6 +281,10 @@ export default {
     height: 100%;
     padding: 20px;
 
+    /deep/ .el-form-item__label {
+      color: #232323;
+    }
+
     .brand-video-editor__top {
       display: flex;
       justify-content: space-between;
@@ -299,6 +304,9 @@ export default {
 
         .progress-black {
           width: 100%;
+          .progress--text {
+            color: #232323;
+          }
         }
 
         .music--black {
@@ -321,7 +329,7 @@ export default {
             color: #232323;
             font-weight: bold;
             line-height: 1.5;
-            margin: 10px 0;
+            margin-top: 10px;
             white-space: nowrap;
             overflow: hidden;
             max-width: 100%;
@@ -364,15 +372,20 @@ export default {
           height: 100%;
 
           /deep/ .el-upload {
-            display: flex;
+            border: none;
             width: 100%;
             height: 100%;
-            justify-content: center;
-            align-items: center;
-            padding: 50px 0;
-            border: 1px dashed #d9d9d9;
-            border-radius: 10px;
-            min-height: 280px;
+            .el-upload-dragger {
+              display: flex;
+              width: 100%;
+              height: 100%;
+              justify-content: center;
+              align-items: center;
+              padding: 50px 0;
+              border: 1px dashed #d9d9d9;
+              border-radius: 10px;
+              min-height: 280px;
+            }
           }
         }
         .text-black {