修改bug

src/components/base/UploadAuth.vue

-<script setup lang="ts">
-import { getCreateAuth, updateAuth } from '@/api/base'
-/**
- * upload 上传状态  {code: 0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
- * progress 上传进度
- **/
-const emit = defineEmits(['upload', 'progress'])
-const form:any = reactive({
-  timeout: '',
-  partSize: '',
-  parallel: '',
-  retryCount: '',
-  retryDuration: '',
-  region: 'cn-shanghai',
-  userId: '1303984639806000',
-  file: null,
-  authProgress: 0,
-  uploader: null,
-  statusText: ''
-})
-const fileChange = (e:any) => {
-  form.file = e.target.files[0]
-  var userData = '{"Vod":{}}'
-  if (form.uploader) {
-    form.uploader.stopUpload()
-    form.authProgress = 0
-    form.statusText = ""
-  }
-  form.uploader = createUploader()
-  form.uploader.addFile(form.file, null, null, null, userData)
-  form.uploader.startUpload()
-}
-
-const createUploader:any = () => {
-  const w = window as any
-  const uploader = new w.AliyunUpload.Vod({
-    timeout: form.timeout || 60000,
-    partSize: form.partSize || 1048576,
-    parallel: form.parallel || 5,
-    retryCount: form.retryCount || 3,
-    retryDuration: form.retryDuration || 2,
-    region: form.region,
-    userId: form.userId,
-    // 开始上传
-    onUploadstarted: function (uploadInfo:any) {
-      const fileData = JSON.parse(window.localStorage.fileData || '{}')
-      // 判断有没有上传过
-      const isFile = !!fileData.sourceId
-      if (!isFile) {
-        // 没上传过请求凭证上传
-        getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
-          window.localStorage.fileData = JSON.stringify({
-            uploadAuth: data.data.upload_auth,
-            uploadAddress: data.data.upload_address,
-            videoId: data.data.source_id,
-            fileName: uploadInfo.file.name,
-            fileSize: uploadInfo.file.size
-          })
-          uploader.setUploadAuthAndAddress(uploadInfo, data.data.upload_auth, data.data.upload_address, data.data.source_id)
-        })
-      } else {
-        // 上传过判断一下上次上传的文件和本次上传的文件一不一样，一样的话继续上传
-        if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) {
-          uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
-        } else {
-          getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
-            uploader.setUploadAuthAndAddress(uploadInfo, data.data.upload_auth, data.data.upload_address, data.data.source_id)
-          })
-        }
-      }
-      const res = {
-        code: 1,
-        name: uploadInfo.file.name,
-        msg: '开始上传'
-      }
-      emit('upload', res)
-    },
-    // 文件上传成功
-    onUploadSucceed: function (uploadInfo:any) {
-      // console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
-      const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
-      const res = {
-        code: 0,
-        name: uploadInfo.file.name,
-        videoId: fileData.videoId,
-        msg: '上传成功'
-      }
-      emit('upload', res)
-    },
-    // 文件上传失败
-    onUploadFailed: function (uploadInfo:any, code:any, message:any) {
-      console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
-      const res = {
-        code: 2,
-        name: uploadInfo.file.name,
-        msg: '文件上传失败'
-      }
-      emit('upload', res)
-    },
-    // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
-    onUploadProgress: function (uploadInfo:any, totalSize:any, progress:any) {
-      let progressPercent = Math.ceil(progress * 100)
-      form.authProgress = progressPercent
-      emit('progress', form.authProgress)
-    },
-    // 上传凭证超时
-    onUploadTokenExpired: function (uploadInfo:any) {
-      const fileData = JSON.parse(window.localStorage.fileData || '{}')
-      updateAuth({ source_id: fileData.videoId }).then(({ data }) => {
-        let uploadAuth = data.UploadAuth
-        window.localStorage.fileData = JSON.stringify({
-          uploadAuth: data.data.upload_auth,
-          uploadAddress: data.data.upload_address,
-          videoId: data.data.source_id,
-          fileName: uploadInfo.file.name,
-          fileSize: uploadInfo.file.size
-        })
-        uploader.resumeUploadWithAuth(uploadAuth)
-      })
-    },
-    // 全部文件上传结束
-    onUploadEnd: function (uploadInfo: any) {
-      console.log(uploadInfo, '上传完成')
-      // console.log("onUploadEnd: uploaded all the files")
-    }
-  })
-  return uploader
-}
-</script>
-<template>
-<input type="file" id="fileUpload" @change="fileChange($event)">
-</template>
-<style lang="scss" scoped>
-#fileUpload{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.00001;
-}
-</style>
\ No newline at end of file

src/modules/resource/courseware/views/List.vue

@@ -33,7 +33,7 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getCourseList,
-      params: { tab: tabValue, status: '', authorized: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' }
     },
     filters: [
       {
@@ -43,7 +43,8 @@ const listOptions = $computed(() => {
         options: store.getMapValuesByKey('system_status')
       },
       { type: 'select', prop: 'authorized', label: '项目', options: projectList.value, labelKey: 'name', valueKey: 'id' },
-      { prop: 'classification', label: '类别', slots: 'filter-type' }
+      { prop: 'classification', label: '类别', slots: 'filter-type' },
+      { type: 'input', prop: 'name', label: '标题' }
     ],
     columns: [
       { label: '课件标题', prop: 'name' },
@@ -58,6 +59,10 @@ const listOptions = $computed(() => {
     ]
   }
 })
+
+const typeFilter = () => {
+  appList.value.refetch()
+}
 </script>
 
 <template>
@@ -78,7 +83,7 @@ const listOptions = $computed(() => {
     <AppList v-bind="listOptions" ref="appList">
       <template #header-aside></template>
       <template #filter-type="{ params }">
-        <el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
+        <el-tree-select @change="typeFilter" clearable :props="defaultProps" v-model="params.classification" :data="selectTree" />
       </template>
       <template #table-operate="{ row }">
         <el-space>

src/modules/resource/dashboard/components/Hottest.vue

@@ -6,12 +6,32 @@ const listOptions = {
     { label: '关联使用', slots: 'table-relation', align: 'center' },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
-    { label: '所在部门', prop: 'project_id_name', align: 'center' },
+    { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
     { label: '操作', slots: 'table-operate', align: 'center' }
   ],
   data: prop.data
 }
+
+const resourceType = (name: string, isGetPath: boolean) => {
+  let path = {}
+  if (isGetPath) {
+    path = {
+      '视频': '/resource/video/view',
+      '课件': '/resource/courseware/view',
+      '教案': '/resource/lessonplan/view',
+      '其他资料': '/resource/other/view'
+    }
+  } else {
+    path = {
+      '视频': 1,
+      '课件': 2,
+      '教案': 3,
+      '其他资料': 4
+    }
+  }
+  return path[name]
+}
 </script>
 <template>
   <AppList v-bind="listOptions" ref="appList" border stripe>
@@ -22,11 +42,11 @@ const listOptions = {
       <div :class="`table-relation active${row.index}`">{{ row.relation }}<span>次</span></div>
     </template>
     <template #table-type="{ row }">
-      <div :class="`table-type active${row.index}`">{{ row.resource_type }}</div>
+      <div :class="`table-type active${resourceType(row.resource_type, false)}`">{{ row.resource_type }}</div>
     </template>
     <template #table-operate="{ row }">
       <el-space>
-        <router-link :to="`/video/update/${row.id}`">
+        <router-link :to="`${resourceType(row.resource_type, true)}?id=${row.id}`">
           <el-button
             style="color: #399EE8;"
             type="primary"

src/modules/resource/dashboard/components/Newest.vue

@@ -5,13 +5,33 @@ const listOptions = {
     { label: '排名', slots: 'table-ranking', align: 'center' },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
-    { label: '所在部门', prop: 'project_id_name', align: 'center' },
+    { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
     { label: '更新时间', prop: 'updated_time', align: 'center' },
     { label: '操作', slots: 'table-operate', align: 'center' }
   ],
   data: prop.data
 }
+
+const resourceType = (name: string, isGetPath: boolean) => {
+  let path = {}
+  if (isGetPath) {
+    path = {
+      '视频': '/resource/video/view',
+      '课件': '/resource/courseware/view',
+      '教案': '/resource/lessonplan/view',
+      '其他资料': '/resource/other/view'
+    }
+  } else {
+    path = {
+      '视频': 1,
+      '课件': 2,
+      '教案': 3,
+      '其他资料': 4
+    }
+  }
+  return path[name]
+}
 </script>
 <template>
   <AppList v-bind="listOptions" ref="appList" border stripe>
@@ -19,11 +39,11 @@ const listOptions = {
       <div :class="`table-ranking active${row.index}`">{{ row.index <= 3 ? '' : row.index }}</div>
     </template>
     <template #table-type="{ row }">
-      <div :class="`table-type active${row.index}`">{{ row.resource_type }}</div>
+      <div :class="`table-type active${resourceType(row.resource_type, false)}`">{{ row.resource_type }}</div>
     </template>
     <template #table-operate="{ row }">
       <el-space>
-        <router-link :to="`/video/update/${row.id}`">
+        <router-link :to="`${resourceType(row.resource_type, true)}?id=${row.id}`">
           <el-button
             style="color: #399EE8;"
             type="primary"

src/modules/resource/dashboard/components/RecentLearning.vue

@@ -5,13 +5,33 @@ const listOptions = {
     { label: '排名', slots: 'table-ranking', align: 'center' },
     { label: '资源名称', prop: 'name', align: 'center' },
     { label: '资源类型', slots: 'table-type', align: 'center' },
-    { label: '所在部门', prop: 'project_id_name', align: 'center' },
+    { label: '所在部门', prop: 'organ_id_name', align: 'center' },
     { label: '更新人', prop: 'created_operator_name', align: 'center' },
     { label: '更新时间', prop: 'updated_time', align: 'center' },
     { label: '操作', slots: 'table-operate', align: 'center' }
   ],
   data: prop.data
 }
+
+const resourceType = (name: string, isGetPath: boolean) => {
+  let path = {}
+  if (isGetPath) {
+    path = {
+      '视频': '/resource/video/view',
+      '课件': '/resource/courseware/view',
+      '教案': '/resource/lessonplan/view',
+      '其他资料': '/resource/other/view'
+    }
+  } else {
+    path = {
+      '视频': 1,
+      '课件': 2,
+      '教案': 3,
+      '其他资料': 4
+    }
+  }
+  return path[name]
+}
 </script>
 <template>
   <AppList v-bind="listOptions" ref="appList" border stripe>
@@ -19,11 +39,11 @@ const listOptions = {
       <div :class="`table-ranking active${row.index}`">{{ row.index <= 3 ? '' : row.index }}</div>
     </template>
     <template #table-type="{ row }">
-      <div :class="`table-type active${row.index}`">{{ row.resource_type }}</div>
+      <div :class="`table-type active${resourceType(row.resource_type, false)}`">{{ row.resource_type }}</div>
     </template>
     <template #table-operate="{ row }">
       <el-space>
-        <router-link :to="`/video/update/${row.id}`">
+        <router-link :to="`${resourceType(row.resource_type, true)}?id=${row.id}`">
           <el-button
             style="color: #399EE8;"
             type="primary"

src/modules/resource/dashboard/components/Statistics.vue

@@ -24,39 +24,57 @@ const prop = defineProps(['data'])
     box-sizing: border-box;
     margin-right: 20px;
     margin-top: 20px;
-    .icon{
-      width: 40px;
-      height: 40px;
-      background-size: 100% 100%;
-      margin: 0 auto;
-      &:nth-child(1){
+    &:nth-child(1){
+      .icon{
         background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon1.png);
       }
+      }
       &:nth-child(2){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon2.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon2.png);
+        }
       }
       &:nth-child(3){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon3.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon3.png);
+        }
       }
       &:nth-child(4){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon4.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon4.png);
+        }
       }
       &:nth-child(5){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon5.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon5.png);
+        }
       }
       &:nth-child(6){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon6.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon6.png);
+        }
       }
       &:nth-child(7){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon7.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon7.png);
+        }
       }
       &:nth-child(8){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon8.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon8.png);
+        }
       }
 
       &:nth-child(9){
-        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon9.png);
+        .icon{
+          background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-icon9.png);
+        }
       }
+    .icon{
+      width: 40px;
+      height: 40px;
+      background-size: 100% 100%;
+      margin: 0 auto;
     }
     .num{
       font-size: 26px;

src/modules/resource/lessonplan/views/List.vue

@@ -32,7 +32,7 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getLessonList,
-      params: { tab: tabValue, status: '', authorized: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' }
     },
     filters: [
       {
@@ -42,7 +42,8 @@ const listOptions = $computed(() => {
         options: store.getMapValuesByKey('system_status')
       },
       { type: 'select', prop: 'authorized', label: '项目', options: projectList.value, labelKey: 'name', valueKey: 'id' },
-      { prop: 'classification', label: '类别', slots: 'filter-type' }
+      { prop: 'classification', label: '类别', slots: 'filter-type' },
+      { type: 'input', prop: 'name', label: '标题' }
     ],
     columns: [
       { label: '教案标题', prop: 'name' },
@@ -57,6 +58,10 @@ const listOptions = $computed(() => {
     ]
   }
 })
+
+const typeFilter = () => {
+  appList.value.refetch()
+}
 </script>
 
 <template>
@@ -77,7 +82,7 @@ const listOptions = $computed(() => {
     <AppList v-bind="listOptions" ref="appList">
       <template #header-aside></template>
       <template #filter-type="{ params }">
-        <el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
+        <el-tree-select @change="typeFilter" clearable :props="defaultProps" v-model="params.classification" :data="selectTree" />
       </template>
       <template #table-operate="{ row }">
         <el-space>

src/modules/resource/other/views/List.vue

@@ -34,7 +34,7 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getOtherList,
-      params: { tab: tabValue, status: '', authorized: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' }
     },
     filters: [
       {
@@ -51,7 +51,8 @@ const listOptions = $computed(() => {
         labelKey: 'name',
         valueKey: 'id'
       },
-      { prop: 'classification', label: '类别', slots: 'filter-type' }
+      { prop: 'classification', label: '类别', slots: 'filter-type' },
+      { type: 'input', prop: 'name', label: '标题' }
     ],
     columns: [
       { label: '课件标题', prop: 'name' },
@@ -66,6 +67,10 @@ const listOptions = $computed(() => {
     ]
   }
 })
+
+const typeFilter = () => {
+  appList.value.refetch()
+}
 </script>
 
 <template>
@@ -86,7 +91,7 @@ const listOptions = $computed(() => {
     <AppList v-bind="listOptions" ref="appList">
       <template #header-aside></template>
       <template #filter-type="{ params }">
-        <el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
+        <el-tree-select @change="typeFilter" clearable :props="defaultProps" v-model="params.classification" :data="selectTree" />
       </template>
       <template #table-operate="{ row }">
         <el-space>

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

@@ -92,7 +92,7 @@ const createUploader:any = () => {
         videoId: fileData.videoId,
         msg: '上传成功'
       }
-      emit('upload', fileData.videoId)
+      emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
     },
     // 文件上传失败
     // code:any, message:any
@@ -138,10 +138,13 @@ const createUploader:any = () => {
   <div class="upload-video">
     <div class="upload-btn">
       本地文件
-      <input type="file" id="fileUpload" @change="fileChange($event)">
+      <input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)">
     </div>
     <div class="demo-progress" v-if="uploadData.code === 1">
-      <el-progress :percentage="uploadData.progress" status="success" />
+      <el-progress style="width:340px" :percentage="uploadData.progress" status="success" />
+      <span>
+        {{ uploadData.progress }}%
+      </span>
     </div>
     <div class="error video-info" v-if="uploadData.code === 2">
       <div class="name">上传失败</div>
@@ -158,6 +161,12 @@ const createUploader:any = () => {
 <style lang="scss">
 .demo-progress {
   width: 350px;
+  display: flex;
+  span{
+    color: #999999;
+    font-size: 14px;
+    transform: translateX(-20px);
+  }
 }
 #fileUpload{
   position: absolute;

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

@@ -47,7 +47,7 @@
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
         <div class="text-box">
-          <div class="name">资源来源</div>
+          <!-- <div class="name">资源来源</div> -->
           <div class="value">{{ props.data.source_name }}</div>
         </div>
       </div>

src/modules/resource/video/views/List.vue

 <script setup lang="ts">
 import { getVideoList } from '../api'
 import CardListItem from '../components/CardListItem.vue'
-import { Expand } from '@element-plus/icons-vue'
+import { Expand, PictureFilled } from '@element-plus/icons-vue'
 import { useGetCategoryList } from '@/composables/useGetCategoryList'
 import { useProjectList } from '@/composables/useGetProjectList'
 import { useMapStore } from '@/stores/map'
@@ -33,7 +33,7 @@ const listOptions = $computed(() => {
   return {
     remote: {
       httpRequest: getVideoList,
-      params: { tab: tabValue, status: '', authorized: '' }
+      params: { tab: tabValue, status: '', authorized: '', name: '' }
     },
     filters: [
       {
@@ -50,7 +50,8 @@ const listOptions = $computed(() => {
         labelKey: 'name',
         valueKey: 'id'
       },
-      { prop: 'classification', label: '类别', slots: 'filter-type' }
+      { prop: 'classification', label: '类别', slots: 'filter-type' },
+      { type: 'input', prop: 'name', label: '标题' }
     ],
     columns: [
       { label: '视频标题', prop: 'name', align: 'center' },
@@ -66,6 +67,10 @@ const listOptions = $computed(() => {
     ]
   }
 })
+
+const typeFilter = () => {
+  appList.value.refetch()
+}
 </script>
 
 <template>
@@ -86,10 +91,13 @@ const listOptions = $computed(() => {
     <AppList v-bind="listOptions" ref="appList">
       <template #header-aside></template>
       <template #table-cover="{ row }">
-        <img :src="row.cover" style="width: 150px; display: block" />
+        <el-icon :size="50" color="#ccc" v-if="row.cover == ''">
+          <PictureFilled></PictureFilled>
+        </el-icon>
+        <img v-else :src="row.cover" style="width: 150px; display: block" />
       </template>
       <template #filter-type="{ params }">
-        <el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
+        <el-tree-select @change="typeFilter" clearable :props="defaultProps" v-model="params.classification" :data="selectTree" />
       </template>
       <template #table-operate="{ row }">
         <el-space>

src/modules/resource/video/views/Update.vue

@@ -126,8 +126,9 @@ const createResources = () => {
 const protocol = ref(false)
 
 // 上传视频成功
-const uploadVideo = (id: string) => {
-  form.data.source_id = id
+const uploadVideo = (data: any) => {
+  form.data.source_id = data.videoId
+  form.data.name = data.name
 }
 </script>
 
@@ -158,7 +159,7 @@ const uploadVideo = (id: string) => {
             <el-icon :size="50" color="#ccc" v-if="form.data.cover == ''">
               <PictureFilled></PictureFilled>
             </el-icon>
-            <img :src="form.data.cover" v-else />
+            <div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div>
           </div>
           <div class="video-cover_right">
             <UploadImg v-model="form.data.cover"></UploadImg>
@@ -198,13 +199,13 @@ const uploadVideo = (id: string) => {
           <div class="block text-center" v-if="swiperCovers.length">
             <el-carousel height="202px" :autoplay="false" arrow="never" trigger="click" ref="swiper">
               <el-carousel-item v-for="(item, index) in swiperCovers" :key="index" class="cover-list">
-                <img
+                <div
                   @click="swiperItemHandle(cItem.url)"
                   :key="cItem.id"
                   v-for="cItem in item"
-                  :src="cItem.url"
+                  :style="`background-image:url(${cItem.url})`"
                   class="cover-list_item"
-                />
+                ></div>
               </el-carousel-item>
             </el-carousel>
           </div>
@@ -253,10 +254,15 @@ const uploadVideo = (id: string) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    img {
-      width: 100%;
-      // height: 100%;
-      display: block;
+    // img {
+    //   width: 100%;
+    //   // height: 100%;
+    //   display: block;
+    // }
+    .cover-img{
+      width: 208px;
+      height: 130px;
+      background-size: cover;
     }
   }
   .video-cover_right {
@@ -309,6 +315,7 @@ const uploadVideo = (id: string) => {
       margin: 0 10px 10px 0;
       border-radius: 4px;
       cursor: pointer;
+      background-size: cover;
     }
   }
 }