|  |  | @@ -14,67 +14,84 @@ | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 作品列表 --> | 
		
	
		
			
			|  |  |  | <div v-if="videoList.length > 0" class="workList flex"> | 
		
	
		
			
			|  |  |  | <div class="workItem" v-for="item in videoList" :key="item.id"> | 
		
	
		
			
			|  |  |  | <div class="workImg"> | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | v-if="item.coverImg" | 
		
	
		
			
			|  |  |  | class="coverImg inmiddle" | 
		
	
		
			
			|  |  |  | :src="item.coverImg" | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | v-else | 
		
	
		
			
			|  |  |  | class="takePlace inmiddle" | 
		
	
		
			
			|  |  |  | src="@/assets/img/left-top-logo.png" | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div v-if="!isLoading"> | 
		
	
		
			
			|  |  |  | <div v-if="videoList.length > 0" class="workList flex"> | 
		
	
		
			
			|  |  |  | <div class="workItem" v-for="item in videoList" :key="item.id"> | 
		
	
		
			
			|  |  |  | <div class="workImg"> | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | v-if="item.coverImg" | 
		
	
		
			
			|  |  |  | class="coverImg inmiddle" | 
		
	
		
			
			|  |  |  | :src="item.coverImg" | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | <img | 
		
	
		
			
			|  |  |  | v-else | 
		
	
		
			
			|  |  |  | class="takePlace inmiddle" | 
		
	
		
			
			|  |  |  | src="@/assets/img/left-top-logo.png" | 
		
	
		
			
			|  |  |  | alt="" | 
		
	
		
			
			|  |  |  | /> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div :class="'statusName ' + item.statusName"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating." + item.statusName) }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div :class="'statusName ' + item.statusName"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating." + item.statusName) }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div class="workInfo flex"> | 
		
	
		
			
			|  |  |  | <span>{{ item.title }}</span> | 
		
	
		
			
			|  |  |  | <span>{{ item.createDate }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 更多遮罩层 --> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="more" | 
		
	
		
			
			|  |  |  | @mouseleave="mouseleave" | 
		
	
		
			
			|  |  |  | @click="clickVideoItem(item)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-icon class="icon-videoPlay"><i-ep-videoPlay /></el-icon> | 
		
	
		
			
			|  |  |  | <div class="showBtn" @click.stop="mouseenter(item)">...</div> | 
		
	
		
			
			|  |  |  | <div class="btns" v-show="showPopup"> | 
		
	
		
			
			|  |  |  | <div class="btns-item" @click.stop="handleDownload(item.id)"> | 
		
	
		
			
			|  |  |  | <div class="btns-item-icon"> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-delete"><i-ep-download /></el-icon> | 
		
	
		
			
			|  |  |  | <div class="workInfo flex"> | 
		
	
		
			
			|  |  |  | <span>{{ item.title }}</span> | 
		
	
		
			
			|  |  |  | <span>{{ item.createDate }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 更多遮罩层 --> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="more" | 
		
	
		
			
			|  |  |  | @mouseleave="mouseleave" | 
		
	
		
			
			|  |  |  | @click="clickVideoItem(item)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <el-icon class="icon-videoPlay"><i-ep-videoPlay /></el-icon> | 
		
	
		
			
			|  |  |  | <div class="showBtn" @click.stop="mouseenter(item)">...</div> | 
		
	
		
			
			|  |  |  | <div class="btns" v-show="showPopup"> | 
		
	
		
			
			|  |  |  | <div class="btns-item" @click.stop="handleDownload(item.id)"> | 
		
	
		
			
			|  |  |  | <div class="btns-item-icon"> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-delete"><i-ep-download /></el-icon> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="text">{{ $t("myCreating.download") }}</div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="text">{{ $t("myCreating.download") }}</div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="btns-item" | 
		
	
		
			
			|  |  |  | @click.stop="handelDelete(item.id, item.title)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="btns-item-icon"> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-delete"><i-ep-delete /></el-icon> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="btns-item" | 
		
	
		
			
			|  |  |  | @click.stop="handelDelete(item.id, item.title)" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <div class="btns-item-icon"> | 
		
	
		
			
			|  |  |  | <el-icon class="icon-delete"><i-ep-delete /></el-icon> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="text">{{ $t("myCreating.delete") }}</div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="text">{{ $t("myCreating.delete") }}</div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div v-if="videoList.length == 0" class="noList"> | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating.noList") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="goCreate" @click="goCreate"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating.goCreate") }} | 
		
	
		
			
			|  |  |  | <div v-if="videoList.length == 0" class="noList"> | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating.noList") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="goCreate" @click="goCreate"> | 
		
	
		
			
			|  |  |  | {{ $t("myCreating.goCreate") }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div v-if="isLoading" class="loadingIcon"> | 
		
	
		
			
			|  |  |  | <el-icon class="is-loading"> | 
		
	
		
			
			|  |  |  | <svg | 
		
	
		
			
			|  |  |  | viewBox="0 0 1024 1024" | 
		
	
		
			
			|  |  |  | xmlns="http://www.w3.org/2000/svg" | 
		
	
		
			
			|  |  |  | data-v-ea893728="" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <path | 
		
	
		
			
			|  |  |  | fill="currentColor" | 
		
	
		
			
			|  |  |  | d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | 
		
	
		
			
			|  |  |  | ></path> | 
		
	
		
			
			|  |  |  | </svg> | 
		
	
		
			
			|  |  |  | </el-icon> | 
		
	
		
			
			|  |  |  | <span class="loadingText">{{ $t("myCreating.loading") }}</span> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 预览作品 --> | 
		
	
		
			
			|  |  |  | <el-dialog | 
		
	
		
			
			|  |  |  | destroy-on-close | 
		
	
	
		
			
				|  |  | @@ -119,7 +136,7 @@ | 
		
	
		
			
			|  |  |  | </template> | 
		
	
		
			
			|  |  |  | </el-dialog> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <div class="pagination"> | 
		
	
		
			
			|  |  |  | <div v-if="!isLoading" class="pagination"> | 
		
	
		
			
			|  |  |  | <el-pagination | 
		
	
		
			
			|  |  |  | v-model:current-page="pageNum" | 
		
	
		
			
			|  |  |  | v-model:page-size="pageSize" | 
		
	
	
		
			
				|  |  | @@ -153,6 +170,7 @@ const pageSize = ref(10); | 
		
	
		
			
			|  |  |  | const total = ref(0); | 
		
	
		
			
			|  |  |  | // 弹窗显示隐藏 | 
		
	
		
			
			|  |  |  | const showDialog = ref(false); | 
		
	
		
			
			|  |  |  | const isLoading = ref(true); | 
		
	
		
			
			|  |  |  | // 当前作品 | 
		
	
		
			
			|  |  |  | const presentItem = ref(""); | 
		
	
		
			
			|  |  |  | // 作品列表 | 
		
	
	
		
			
				|  |  | @@ -245,6 +263,7 @@ function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { | 
		
	
		
			
			|  |  |  | ? ElMessage.success(total > 0 ? msg1 : msg2) | 
		
	
		
			
			|  |  |  | : ElMessage.success(msg3); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | isLoading.value = false; | 
		
	
		
			
			|  |  |  | }) | 
		
	
		
			
			|  |  |  | .catch((err) => { | 
		
	
		
			
			|  |  |  | console.log(err, "err"); | 
		
	
	
		
			
				|  |  | @@ -271,6 +290,7 @@ function delPhotoVideo(videoID) { | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | onMounted(() => { | 
		
	
		
			
			|  |  |  | isLoading.value = true; | 
		
	
		
			
			|  |  |  | getPhotoVideoList(pageNum.value, pageSize.value, title.value); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | </script> | 
		
	
	
		
			
				|  |  | @@ -284,6 +304,17 @@ onMounted(() => { | 
		
	
		
			
			|  |  |  | .top { | 
		
	
		
			
			|  |  |  | margin-bottom: 35px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .loadingIcon { | 
		
	
		
			
			|  |  |  | height: 100px; | 
		
	
		
			
			|  |  |  | line-height: 100px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | transform: scale(2); | 
		
	
		
			
			|  |  |  | .loadingText { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | top: -2px; | 
		
	
		
			
			|  |  |  | left: 4px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .workList { | 
		
	
		
			
			|  |  |  | flex-wrap: wrap; | 
		
	
		
			
			|  |  |  | justify-content: flex-start; | 
		
	
	
		
			
				|  |  | 
 |