|
|
@@ -0,0 +1,944 @@ |
|
|
|
<template> |
|
|
|
<div class="page"> |
|
|
|
<!-- 搜索框 --> |
|
|
|
<div class="top"> |
|
|
|
<div class="search"> |
|
|
|
<el-input |
|
|
|
style="width: 300px" |
|
|
|
v-model="title" |
|
|
|
:placeholder="$t('myCreating.search')" |
|
|
|
@keyup.enter="searchVideoList" |
|
|
|
/> |
|
|
|
<el-icon class="icon-edit" @click="searchVideoList" |
|
|
|
><i-ep-search |
|
|
|
/></el-icon> |
|
|
|
<!-- 重置按钮 --> |
|
|
|
<div v-show="title" class="resetSearch" @click="resetSearch"> |
|
|
|
{{ $t("myCreating.reset") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 更新视频提示 --> |
|
|
|
<div class="hasNewVideoTips" :class="hasNewCreate ? '' : 'hasNew'"> |
|
|
|
{{ $t("myCreating.hasNewVideo") }} |
|
|
|
</div> |
|
|
|
</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="workInfo flex"> |
|
|
|
<span>{{ item.title }}</span> |
|
|
|
<span>{{ dayjs(item.createDate).format("YYYY-MM-DD") }}</span> |
|
|
|
</div> |
|
|
|
<!-- 更多遮罩层 --> |
|
|
|
<div |
|
|
|
class="more" |
|
|
|
@mouseleave="mouseleave" |
|
|
|
@click="clickVideoItem(item)" |
|
|
|
> |
|
|
|
<el-icon |
|
|
|
v-if="[0].includes(item.videoStatus)" |
|
|
|
class="icon-videoPlay" |
|
|
|
><i-ep-edit |
|
|
|
/></el-icon> |
|
|
|
<el-icon |
|
|
|
v-if="[1, 2, 4, 6].includes(item.videoStatus)" |
|
|
|
class="icon-videoPlay" |
|
|
|
><i-ep-loading |
|
|
|
/></el-icon> |
|
|
|
<el-icon |
|
|
|
v-if="[3].includes(item.videoStatus)" |
|
|
|
class="icon-videoPlay" |
|
|
|
><i-ep-closeBold |
|
|
|
/></el-icon> |
|
|
|
<el-icon |
|
|
|
v-if="[5, 7, 8, 9, 10, 11, 12].includes(item.videoStatus)" |
|
|
|
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.videoPlayUrl, item.title)" |
|
|
|
> |
|
|
|
<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="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> |
|
|
|
</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> |
|
|
|
</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 |
|
|
|
class="elDialog" |
|
|
|
v-model="showDialog" |
|
|
|
:title="presentItem.title" |
|
|
|
width="40%" |
|
|
|
center |
|
|
|
> |
|
|
|
<div class="videoBox"> |
|
|
|
<!-- 免费用户1分钟 [5].includes(presentItem.videoStatus)--> |
|
|
|
<div |
|
|
|
v-if="presentItem.videoPlayUrl && presentItem.videoTime > 300" |
|
|
|
class="overtimeTips" |
|
|
|
> |
|
|
|
<img src="../../assets/img/tips.png" alt="" /> |
|
|
|
{{ $t("myCreating.freeUserTip") }} |
|
|
|
</div> |
|
|
|
<video |
|
|
|
v-if="presentItem.videoPlayUrl" |
|
|
|
controls="true" |
|
|
|
class="" |
|
|
|
:src="presentItem.videoPlayUrl" |
|
|
|
></video> |
|
|
|
<div v-else class="insteadVideo"> |
|
|
|
{{ $t("myCreating." + presentItem.statusName + "Text") }} |
|
|
|
|
|
|
|
<p v-if="lanChange == 'zh-cn' && presentItem.videoStatus == 3"> |
|
|
|
错误原因: {{ presentItem.videoMsg }} |
|
|
|
</p> |
|
|
|
<p v-if="lanChange == 'en' && presentItem.videoStatus == 3"> |
|
|
|
Error cause: {{ presentItem.videoMsg }} |
|
|
|
</p> |
|
|
|
<!-- <span v-if="presentItem.videoStatus == 3">{{ |
|
|
|
presentItem.videoMsg |
|
|
|
}}</span> --> |
|
|
|
</div> |
|
|
|
<!-- 有视频路径的页脚 --> |
|
|
|
<div class="footer" v-if="presentItem.videoPlayUrl"> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<!-- dialog下载按钮 upGrades--> |
|
|
|
<button |
|
|
|
class="elBtn" |
|
|
|
type="primary" |
|
|
|
@click.stop=" |
|
|
|
handleDownload(presentItem.videoPlayUrl, presentItem.title) |
|
|
|
" |
|
|
|
> |
|
|
|
<!-- <el-icon class="icon-delete"><i-ep-download /></el-icon> --> |
|
|
|
{{ $t("myCreating.download") }} |
|
|
|
</button> |
|
|
|
<!-- 提升画质 v-if="presentItem.isHy == 0"--> |
|
|
|
<el-tooltip |
|
|
|
style="cursor: pointer" |
|
|
|
v-if="false" |
|
|
|
class="box-item" |
|
|
|
effect="light" |
|
|
|
:content="$t('myCreating.upSharpnessTips')" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
<button |
|
|
|
style="cursor: pointer" |
|
|
|
v-if="presentItem.isHy == 0" |
|
|
|
class="elBtn upSharpness" |
|
|
|
@click.stop="upGrades(presentItem.id)" |
|
|
|
> |
|
|
|
<div v-if="!upGradesLoading" style="cursor: pointer"> |
|
|
|
<img src="../../assets/img/Upgrades.png" alt="" /> |
|
|
|
{{ $t("myCreating.upSharpness") }} |
|
|
|
</div> |
|
|
|
<div v-if="upGradesLoading"> |
|
|
|
<!-- <my-Loading-Icon |
|
|
|
class="previewAudioLoadingBox" |
|
|
|
v-if="!upGradesLoading" |
|
|
|
></my-Loading-Icon> --> |
|
|
|
<el-icon class="is-loading" style="font-size: 16px" |
|
|
|
><i-ep-Loading |
|
|
|
/></el-icon> |
|
|
|
</div> |
|
|
|
</button> |
|
|
|
</el-tooltip> |
|
|
|
<!-- dialog删除按钮 --> |
|
|
|
<button |
|
|
|
class="elBtn" |
|
|
|
@click.stop="handelDelete(presentItem.id, presentItem.title)" |
|
|
|
> |
|
|
|
<!-- <el-icon class="icon-delete"><i-ep-delete /></el-icon> --> |
|
|
|
{{ $t("myCreating.delete") }} |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<!-- 无视频路径的页脚 --> |
|
|
|
<div class="footer" v-if="!presentItem.videoPlayUrl"> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<!-- dialog编辑按钮 --> |
|
|
|
<button |
|
|
|
class="elBtn" |
|
|
|
type="primary" |
|
|
|
@click.stop=" |
|
|
|
router.push({ |
|
|
|
path: '/createVideo', |
|
|
|
query: { id: presentItem.id }, |
|
|
|
}) |
|
|
|
" |
|
|
|
v-if="[0, 3].includes(presentItem.videoStatus)" |
|
|
|
> |
|
|
|
{{ $t("myCreating.edit") }} |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 分页 --> |
|
|
|
<div v-if="!isLoading" class="pagination"> |
|
|
|
<el-pagination |
|
|
|
v-model:current-page="pageNum" |
|
|
|
v-model:page-size="pageSize" |
|
|
|
:page-sizes="[12, 24, 36]" |
|
|
|
:small="false" |
|
|
|
:disabled="false" |
|
|
|
:background="true" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="total" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
//#region 导入 |
|
|
|
import { |
|
|
|
userPhotoVideoListApi, |
|
|
|
delUserPhotoVideoByIDApi, |
|
|
|
videoHyApi, |
|
|
|
checkVideoStatusApi, |
|
|
|
} from "@/apis/myCreating"; |
|
|
|
import { timestampToTime } from "@/utils/tools"; |
|
|
|
import { useI18n } from "vue-i18n"; |
|
|
|
import { getStatus } from "./videoStatus"; |
|
|
|
import { useRouter } from "vue-router"; |
|
|
|
import dayjs from "dayjs"; |
|
|
|
//#endregion ---------------------- |
|
|
|
const router = useRouter(); |
|
|
|
// 当前语言状态与国际化组件 |
|
|
|
const { locale } = useI18n(); |
|
|
|
const lanChange = ref(locale); |
|
|
|
|
|
|
|
//#region 老页面逻辑 |
|
|
|
const title = ref(""); |
|
|
|
const pageNum = ref(1); |
|
|
|
const pageSize = ref(12); |
|
|
|
const total = ref(0); |
|
|
|
// 弹窗显示隐藏 |
|
|
|
const showDialog = ref(false); |
|
|
|
const isLoading = ref(true); |
|
|
|
// 当前作品 |
|
|
|
const presentItem = ref(""); |
|
|
|
// 作品列表 |
|
|
|
const videoList = ref([]); |
|
|
|
|
|
|
|
const handleSizeChange = (val) => { |
|
|
|
pageSize.value = val; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleCurrentChange = (val) => { |
|
|
|
pageNum.value = val; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
}; |
|
|
|
|
|
|
|
// 点击作品 |
|
|
|
function clickVideoItem(item) { |
|
|
|
showDialog.value = true; |
|
|
|
presentItem.value = item; |
|
|
|
} |
|
|
|
|
|
|
|
// 删除框是否显示 |
|
|
|
let showPopup = ref(false); |
|
|
|
function mouseleave() { |
|
|
|
showPopup.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
function mouseenter(item) { |
|
|
|
presentItem.value = item; |
|
|
|
showPopup.value = !showPopup.value; |
|
|
|
} |
|
|
|
// 下载 |
|
|
|
function handleDownload(itemVideoPlayUrl, name) { |
|
|
|
if (itemVideoPlayUrl) { |
|
|
|
console.log(1); |
|
|
|
let a = document.createElement("a"); |
|
|
|
a.download = `${name}.mp4`; |
|
|
|
a.href = itemVideoPlayUrl; |
|
|
|
// 设置下载文件名 |
|
|
|
a.style.display = "none"; |
|
|
|
document.body.appendChild(a); |
|
|
|
a.click(); |
|
|
|
a.remove(); |
|
|
|
ElMessage.success( |
|
|
|
lanChange.value == "zh-cn" ? `下载成功` : `Download Successfully` |
|
|
|
); |
|
|
|
} else { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" ? `无法下载` : `Unable to download` |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function goCreate() { |
|
|
|
router.push("/createVideo"); |
|
|
|
} |
|
|
|
|
|
|
|
function resetSearch(params) { |
|
|
|
title.value = ""; |
|
|
|
searchVideoList(); |
|
|
|
} |
|
|
|
|
|
|
|
// 搜索 |
|
|
|
function searchVideoList() { |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value, true); |
|
|
|
} |
|
|
|
// 删除 |
|
|
|
function handelDelete(id, title) { |
|
|
|
const msg = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `确定要删除这个作品吗? 作品标题:${title}` |
|
|
|
: `Are you sure to delete this video ? Title:${title};`; |
|
|
|
const notice = lanChange.value == "zh-cn" ? "提示" : "Notice"; |
|
|
|
const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm"; |
|
|
|
const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel"; |
|
|
|
ElMessageBox.confirm(msg, notice, { |
|
|
|
confirmButtonText: confirm, |
|
|
|
cancelButtonText: cancel, |
|
|
|
}).then(() => { |
|
|
|
delPhotoVideo(id); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 升级画质 |
|
|
|
const upGradesLoading = ref(false); |
|
|
|
function upGrades(id) { |
|
|
|
if (upGradesLoading.value == true) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `正在升级,请稍后~` |
|
|
|
: `Upgrading, please wait ~` |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
const msg = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `确定要升级该作品吗?` |
|
|
|
: `Are you sure you want to upgrade this work?`; |
|
|
|
const notice = lanChange.value == "zh-cn" ? "提示" : "Notice"; |
|
|
|
const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm"; |
|
|
|
const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel"; |
|
|
|
ElMessageBox.confirm(msg, notice, { |
|
|
|
confirmButtonText: confirm, |
|
|
|
cancelButtonText: cancel, |
|
|
|
}).then(async () => { |
|
|
|
upGradesLoading.value = true; |
|
|
|
try { |
|
|
|
const res = await videoHyApi(id); |
|
|
|
ElMessage.success( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `升级中!请稍等~` |
|
|
|
: `Upgrading! Please wait a moment` |
|
|
|
); |
|
|
|
showDialog.value = false; |
|
|
|
upGradesLoading.value = false; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `升级失败,请稍后重试` |
|
|
|
: `Upgrade failed, please try again later` |
|
|
|
); |
|
|
|
upGradesLoading.value = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:获取我的视频作品 |
|
|
|
* @return: data |
|
|
|
*/ |
|
|
|
function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { |
|
|
|
userPhotoVideoListApi(pageNum, pageSize, title) |
|
|
|
.then((res) => { |
|
|
|
console.log(res, "res"); |
|
|
|
notGenerateList.value = []; |
|
|
|
// 找到数组中未生成的,放入列表,为了刷新 |
|
|
|
res.data.list.forEach((item) => { |
|
|
|
if ([1, 2, 4, 6, 7, 8, 10, 12].includes(item.videoStatus)) { |
|
|
|
notGenerateList.value.push(item.id); |
|
|
|
} |
|
|
|
}); |
|
|
|
res.data.list.forEach((item) => { |
|
|
|
// item.createDate = timestampToTime(item.createDate) || ""; |
|
|
|
// item.updateDate = timestampToTime(item.updateDate) || ""; |
|
|
|
// item.createVideoDate = timestampToTime(item.createVideoDate) || ""; |
|
|
|
item.statusName = getStatus(item.videoStatus); |
|
|
|
}); |
|
|
|
videoList.value = res.data.list; |
|
|
|
total.value = res.data.total * 1; |
|
|
|
if (searchFlag) { |
|
|
|
const total = res.data.total; |
|
|
|
const msg1 = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `查询成功!找到${total}条符合条件的视频` |
|
|
|
: `Found! Match ${total} videos`; |
|
|
|
const msg2 = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `查询成功!没有符合条件的视频` |
|
|
|
: `Found! No match videos`; |
|
|
|
const msg3 = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `查询成功!已加载全部视频` |
|
|
|
: `Found! Present all videos`; |
|
|
|
return title |
|
|
|
? ElMessage.success(total > 0 ? msg1 : msg2) |
|
|
|
: ElMessage.success(msg3); |
|
|
|
} |
|
|
|
isLoading.value = false; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err, "err"); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:删除视频作品 |
|
|
|
* @param: videoID |
|
|
|
* @return: data |
|
|
|
*/ |
|
|
|
function delPhotoVideo(videoID) { |
|
|
|
delUserPhotoVideoByIDApi(videoID) |
|
|
|
.then((res) => { |
|
|
|
console.log(res, "res"); |
|
|
|
const msg = lanChange.value == "zh-cn" ? `删除成功!` : `Success !`; |
|
|
|
ElMessage.success(msg); |
|
|
|
showDialog.value = false; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err, "err"); |
|
|
|
ElMessage.error(err.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
//#endregion ---------------------- |
|
|
|
|
|
|
|
//#region 定时刷新 |
|
|
|
const hasNewCreate = ref(false); //提示框显示隐藏 |
|
|
|
const notGenerateList = ref([]); //页面上未生成的视频的id 普通视频 |
|
|
|
const notGenerateList2 = ref([]); //页面上未生成的视频的id 升级视频 |
|
|
|
const checkVideoStatus = async () => { |
|
|
|
// 如果列表中没有生成中的视频,不发送请求 |
|
|
|
const intervalId = setInterval(async () => { |
|
|
|
// && notGenerateList2.value.length == 0; |
|
|
|
console.log(""); |
|
|
|
if (notGenerateList.value.length == 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
try { |
|
|
|
const res = await checkVideoStatusApi(notGenerateList.value); |
|
|
|
// 如果有新的,则提示且更新列表 |
|
|
|
if (res.code != 2115) { |
|
|
|
hasNewCreate.value = true; |
|
|
|
const changeHasNewCreate = setTimeout(() => { |
|
|
|
hasNewCreate.value = false; |
|
|
|
}, 5000); |
|
|
|
notGenerateList.value = []; |
|
|
|
// notGenerateList2.value = []; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
} |
|
|
|
} catch (error) {} |
|
|
|
}, 3000); |
|
|
|
onUnmounted(() => { |
|
|
|
clearInterval(intervalId); |
|
|
|
}); |
|
|
|
}; |
|
|
|
//#endregion --------------------------- |
|
|
|
|
|
|
|
//#region 页面初始化 |
|
|
|
onMounted(() => { |
|
|
|
isLoading.value = true; |
|
|
|
getPhotoVideoList(pageNum.value, pageSize.value, title.value); |
|
|
|
|
|
|
|
// checkVideoStatus(); |
|
|
|
}); |
|
|
|
//#endregion --------------------------- |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
position: relative; |
|
|
|
height: calc(100vh - 80px); |
|
|
|
padding: 15px 130px; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 25px 0 0; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
.top { |
|
|
|
position: relative; |
|
|
|
margin-bottom: 35px; |
|
|
|
.search { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
.resetSearch { |
|
|
|
margin-left: 10px; |
|
|
|
padding: 0 10px; |
|
|
|
height: 30px; |
|
|
|
width: 100px; |
|
|
|
text-align: center; |
|
|
|
line-height: 30px; |
|
|
|
background-color: #000; |
|
|
|
border: 1px solid #000; |
|
|
|
border-radius: 15px; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s; |
|
|
|
color: #fff; |
|
|
|
&:hover { |
|
|
|
background-color: #fff; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.hasNewVideoTips { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 400px; |
|
|
|
padding: 5px 30px; |
|
|
|
color: #fff; |
|
|
|
background-color: #000; |
|
|
|
text-align: center; |
|
|
|
font-size: 20px; |
|
|
|
transition: all 0.5s; |
|
|
|
opacity: 1; |
|
|
|
border-radius: 15px; |
|
|
|
} |
|
|
|
.hasNew { |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.5s; |
|
|
|
} |
|
|
|
} |
|
|
|
.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; |
|
|
|
width: 100%; |
|
|
|
// height: 200px; |
|
|
|
margin-top: 5px; |
|
|
|
padding-bottom: 50px; |
|
|
|
.workItem { |
|
|
|
position: relative; |
|
|
|
width: 300px; |
|
|
|
// height: 200px; |
|
|
|
margin: 0 20px 20px 0; |
|
|
|
border: 2px solid #c2c2c2; |
|
|
|
border-radius: 15px; |
|
|
|
cursor: pointer; |
|
|
|
overflow: hidden; |
|
|
|
.workImg { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
cursor: pointer; |
|
|
|
padding: 10px; |
|
|
|
overflow: hidden; |
|
|
|
.coverImg { |
|
|
|
max-width: 90%; |
|
|
|
max-height: 170px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.takePlace { |
|
|
|
position: absolute; |
|
|
|
top: 40%; |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.more { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 170px; |
|
|
|
background-color: rgb(0 0 0 / 30%); |
|
|
|
cursor: pointer; |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.2s; |
|
|
|
.icon-videoPlay { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
font-size: 50px; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.showBtn { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
right: 10px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 10px; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
transition: all 0.3s; |
|
|
|
cursor: pointer; |
|
|
|
border-radius: 2px; |
|
|
|
&:hover { |
|
|
|
background-color: #00000056; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
position: absolute; |
|
|
|
top: 45px; |
|
|
|
right: 10px; |
|
|
|
// width: 70px; |
|
|
|
// height: 60px; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 10px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&-item { |
|
|
|
// width: 70px; |
|
|
|
// height: 30px; |
|
|
|
text-align: center; |
|
|
|
background-color: #fff; |
|
|
|
padding: 0 10px; |
|
|
|
transition: all 0.3s; |
|
|
|
cursor: pointer; |
|
|
|
&-icon { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
cursor: pointer; |
|
|
|
.icon-delete { |
|
|
|
position: absolute; |
|
|
|
top: 4px; |
|
|
|
left: 0; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
font-size: 16px; |
|
|
|
color: #000; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
display: inline-block; |
|
|
|
height: 30px; |
|
|
|
padding-left: 5px; |
|
|
|
margin-top: -5px; |
|
|
|
line-height: 20px; |
|
|
|
font-size: 13px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
&:hover { |
|
|
|
color: #ffffff; |
|
|
|
background-color: #0000001a; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.workInfo { |
|
|
|
justify-content: space-between; |
|
|
|
height: 40px; |
|
|
|
padding: 0 10px; |
|
|
|
line-height: 40px; |
|
|
|
border-top: 1px solid #afafaf; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
.statusName { |
|
|
|
position: absolute; |
|
|
|
top: 10%; |
|
|
|
left: -10%; |
|
|
|
width: 120px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
font-size: 14px; |
|
|
|
transform: rotate(-45deg); |
|
|
|
|
|
|
|
&.manuscript { |
|
|
|
/* 草稿 */ |
|
|
|
background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); |
|
|
|
} |
|
|
|
&.generating { |
|
|
|
/* 生成中 */ |
|
|
|
background: linear-gradient(270deg, #4b61dc, #15d1b8); |
|
|
|
} |
|
|
|
&.generationFailed { |
|
|
|
/* 生成失败 */ |
|
|
|
background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); |
|
|
|
} |
|
|
|
&.generationSucceed { |
|
|
|
/* 生成成功 */ |
|
|
|
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); |
|
|
|
} |
|
|
|
&.videoUping { |
|
|
|
/* 升级中 */ |
|
|
|
background: linear-gradient(120deg, #4512c7 0%, #4fd334 100%); |
|
|
|
} |
|
|
|
&.videoUpFailed { |
|
|
|
/* HD */ |
|
|
|
background: linear-gradient(120deg, #ff0019 0%, #ff00c3 100%); |
|
|
|
} |
|
|
|
&.videoUpSucceed { |
|
|
|
/* HD */ |
|
|
|
background: linear-gradient(120deg, #fdeb71 0%, #d37e1a 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
&:hover { |
|
|
|
.more { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.noList { |
|
|
|
.title { |
|
|
|
font-size: 30px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 100px; |
|
|
|
background-image: -webkit-linear-gradient( |
|
|
|
left, |
|
|
|
#4b61dc, |
|
|
|
#15d1b8 25%, |
|
|
|
#4b61dc 50%, |
|
|
|
#15d1b8 75%, |
|
|
|
#4b61dc |
|
|
|
) !important; |
|
|
|
-webkit-text-fill-color: transparent !important; |
|
|
|
-webkit-background-clip: text !important; |
|
|
|
background-clip: text !important; |
|
|
|
-webkit-background-size: 200% 100% !important; |
|
|
|
background-size: 200% 100% !important; |
|
|
|
} |
|
|
|
|
|
|
|
.goCreate { |
|
|
|
width: 200px; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
text-align: center; |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 6px; |
|
|
|
background: linear-gradient(270deg, #4b61dc, #15d1b8); |
|
|
|
margin: 30px auto; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.pagination { |
|
|
|
position: fixed; |
|
|
|
bottom: 20px; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 8px; |
|
|
|
transition: all 0.3s; |
|
|
|
cursor: pointer; |
|
|
|
&:hover { |
|
|
|
background-color: #b8b8b873; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-input__wrapper) { |
|
|
|
border: none; |
|
|
|
border-bottom: 2px solid #000; |
|
|
|
border-radius: 0; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.el-icon.icon-edit { |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
font-size: 30px; |
|
|
|
color: #8c939d; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
color: #292929; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.elDialog { |
|
|
|
.videoBox { |
|
|
|
// display: flex; |
|
|
|
// justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
padding: 20px; |
|
|
|
.overtimeTips { |
|
|
|
// width: 60%; |
|
|
|
// display: inline-block; |
|
|
|
padding: 5px; |
|
|
|
margin-bottom: 10px; |
|
|
|
background-color: #ccc; |
|
|
|
border-radius: 5px; |
|
|
|
line-height: 20px; |
|
|
|
color: #000; |
|
|
|
text-align: center; |
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
vertical-align: middle; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
video { |
|
|
|
width: 100%; |
|
|
|
max-height: 600px; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
.insteadVideo { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 400; |
|
|
|
margin: 20px auto; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
p { |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dialog-footer { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.elBtn { |
|
|
|
color: #fff; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 10px 15px; |
|
|
|
cursor: pointer; |
|
|
|
background-color: #000; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
background-color: #15d1b8; |
|
|
|
} |
|
|
|
} |
|
|
|
.upSharpness { |
|
|
|
img { |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.el-icon) { |
|
|
|
margin-right: 5px; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-dialog) { |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 25px; |
|
|
|
} |
|
|
|
// :deep(.el-dialog__header) { |
|
|
|
// } |
|
|
|
:deep(.el-dialog__title) { |
|
|
|
background-image: -webkit-linear-gradient( |
|
|
|
left, |
|
|
|
#4b61dc, |
|
|
|
#15d1b8 25%, |
|
|
|
#4b61dc 50%, |
|
|
|
#15d1b8 75%, |
|
|
|
#4b61dc |
|
|
|
) !important; |
|
|
|
-webkit-text-fill-color: transparent !important; |
|
|
|
-webkit-background-clip: text !important; |
|
|
|
background-clip: text !important; |
|
|
|
-webkit-background-size: 200% 100% !important; |
|
|
|
background-size: 200% 100% !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-dialog__body) { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.dialog__footer) { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
</style> |