Przeglądaj źródła

"我的视频"页面加载样式

dev_YWQ
HolyKnightIX 2 lat temu
rodzic
commit
70b5475a80
3 zmienionych plików z 93 dodań i 60 usunięć
  1. +5
    -4
      src/lang/package/en.ts
  2. +5
    -4
      src/lang/package/zh-cn.ts
  3. +83
    -52
      src/views/myCreating/index.vue

+ 5
- 4
src/lang/package/en.ts Wyświetl plik

@@ -31,7 +31,7 @@ export default {
// 创作视频
createVideo: {
title: "CreateVideo",
availableMould:"Available Moulds",
availableMould: "Available Moulds",
typeScript: "Type your Script",
uploadAudio: "Upload Audio",
aiScript: "Ai Script",
@@ -42,7 +42,7 @@ export default {
voices: "Voices",
styles: "Styles",
reselect: "reselect",
sureUpload:'Confirm upload',
sureUpload: "Confirm upload",
generateVideo: "Generate Video",
},

@@ -56,8 +56,9 @@ export default {
download: "Download",
delete: "Delete",
more: "More",
noList:"Nothing here. How about making one ?",
goCreate:"Go Create !",
loading: "Loading , just a moment",
noList: "Nothing here. How about making one ?",
goCreate: "Go Create !",
draft: "Draft",
generating: "Generating",
generationFailed: "Failed",


+ 5
- 4
src/lang/package/zh-cn.ts Wyświetl plik

@@ -31,7 +31,7 @@ export default {
// 创作视频
createVideo: {
title: "创作视频",
availableMould:"可用模板",
availableMould: "可用模板",
typeScript: "输入文案",
uploadAudio: "上传音频",
aiScript: "AI生成文本",
@@ -42,7 +42,7 @@ export default {
voices: "选择声音",
styles: "选择风格",
reselect: "重新选择",
sureUpload:'确认上传',
sureUpload: "确认上传",
generateVideo: "生成视频",
},

@@ -56,8 +56,9 @@ export default {
download: "下载",
delete: "删除",
more: "更多",
noList:"暂无没有作品哦,快去尝试制作你的第一个视频吧!",
goCreate:"去创作",
loading: "加载中,请稍等哦",
noList: "暂无没有作品哦,快去尝试制作你的第一个视频吧!",
goCreate: "去创作",
draft: "草稿",
generating: "生成中",
generationFailed: "生成失败",


+ 83
- 52
src/views/myCreating/index.vue Wyświetl plik

@@ -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;


Ładowanie…
Anuluj
Zapisz