소스 검색

1

dev_czc
congzc 1 년 전
부모
커밋
6f62765b56
11개의 변경된 파일1064개의 추가작업 그리고 10개의 파일을 삭제
  1. +2
    -1
      .env.development
  2. BIN
      dist.zip
  3. +2
    -1
      src/layout/index.vue
  4. +36
    -0
      src/router/index.ts
  5. +2
    -0
      src/types/auto-imports.d.ts
  6. +1
    -0
      src/types/components.d.ts
  7. +48
    -4
      src/views/myAPI/index.vue
  8. +6
    -4
      src/views/myStore/index.vue
  9. +944
    -0
      src/views/userModel/index.vue
  10. +16
    -0
      src/views/userModel/videoStatus.js
  11. +7
    -0
      src/views/voiceModel/index.vue

+ 2
- 1
.env.development 파일 보기

@@ -7,5 +7,6 @@ VITE_APP_TITLE = 'Metavatar-PC'
VITE_APP_PORT = 3000
## VITE_APP_BASE_API = 'https://photo.metavatar.cc/C'
# VITE_APP_BASE_API = 'https://test.metavatar.cc/C'
VITE_APP_BASE_API = 'https://phototest.metavatar.cc/C'
# VITE_APP_BASE_API = 'https://phototest.metavatar.cc/C'
VITE_APP_BASE_API = 'https://mtest.metavatar.cc/C'


BIN
dist.zip 파일 보기


+ 2
- 1
src/layout/index.vue 파일 보기

@@ -23,7 +23,7 @@
</div>
{{ $t("myCreating.title") }}
</div>
<div class="myRouter-item" @click="showTalkUsDialog = true">
<div class="myRouter-item" @click="router.push('/userModel')">
<div class="icon">
<el-icon><i-ep-user /></el-icon>
</div>
@@ -196,6 +196,7 @@ const updateShowTalkUsDialog = (newValue: any) => {
height: calc(100% - 80px);
padding: 130px 20px 0;
color: #fff;
user-select: none;
// color: #868593;

.bottomBtx {


+ 36
- 0
src/router/index.ts 파일 보기

@@ -55,6 +55,42 @@ export const constantRoutes: RouteRecordRaw[] = [
},
},
],
}, // 定制分身
{
path: "/",
component: Layout,
redirect: "/userModel",
children: [
{
path: "userModel",
component: () => import("@/views/userModel/index.vue"),
name: "userModel",
meta: {
title: "userModel",
icon: "homepage",
affix: true,
name: "userModel.title",
},
},
],
}, // 定制声纹
{
path: "/",
component: Layout,
redirect: "/voiceModel",
children: [
{
path: "voiceModel",
component: () => import("@/views/voiceModel/index.vue"),
name: "voiceModel",
meta: {
title: "voiceModel",
icon: "homepage",
affix: true,
name: "voiceModel.title",
},
},
],
}, {
path: "/",
component: Layout,


+ 2
- 0
src/types/auto-imports.d.ts 파일 보기

@@ -2,6 +2,7 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>


+ 1
- 0
src/types/components.d.ts 파일 보기

@@ -39,6 +39,7 @@ declare module '@vue/runtime-core' {
IEpEdit: typeof import('~icons/ep/edit')['default']
IEpGoods: typeof import('~icons/ep/goods')['default']
IEpLoading: typeof import('~icons/ep/loading')['default']
IEpLock: typeof import('~icons/ep/lock')['default']
IEpMenu: typeof import('~icons/ep/menu')['default']
IEpPhone: typeof import('~icons/ep/phone')['default']
IEpSearch: typeof import('~icons/ep/search')['default']


+ 48
- 4
src/views/myAPI/index.vue 파일 보기

@@ -1,22 +1,66 @@
<template>
<div class="page">
<div class="title">{{ $t("API.comingSoon") }}</div>
<!-- <div class="title">{{ $t("API.comingSoon") }}</div> -->
<!-- 左侧名称 -->
<div class="left">
<div class="scrollBox">
<p>啊实打实大</p>
</div>
</div>
<!-- 右侧介绍 -->
<div class="right">
<div class="scrollBox"></div>
</div>
</div>
</template>

<script setup>
// import { ref } from 'vue'
</script>

<style lang="scss" scoped>
.page {
padding: 30px;
display: flex;
width: 100%;
overflow: hidden;
overflow-y: scroll;
background-color: #fff;
background-color: #f5f5f5;
min-height: calc(100vh - 80px);
text-align: center;
// text-align: center;
.title {
font-size: 50px;
}
}
.left {
height: calc(100vh - 80px);
width: 30%;
padding: 30px 15px 30px 30px;
font-size: 20px;
background-color: #f5f5f5;

.scrollBox {
padding: 20px;
height: calc(100vh - 80px - 60px);
width: 100%;
overflow-y: scroll;
background-color: #fff;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
}
}
.right {
height: calc(100vh - 80px);
width: 80%;
padding: 30px 30px 30px 15px;
background-color: #f5f5f5;
.scrollBox {
padding: 20px;
height: calc(100vh - 80px - 60px);
width: 100%;
overflow-y: scroll;
background-color: #fff;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
}
}
</style>

+ 6
- 4
src/views/myStore/index.vue 파일 보기

@@ -180,11 +180,12 @@
</div>
</div>
</div>
<!-- 对话框 -->
<el-dialog v-if="false" v-model="showPayDialog" width="60%" center>
<!-- 对话框 v-if="false"-->
<el-dialog v-model="showPayDialog" width="60%" center>
<div class="payDialog">
<div class="left">
<div class="title">{{ $t(presentItme.value.title) }}</div>
<!-- <div class="title">{{ $t(presentItme.value.title) }}</div> -->
<div class="title">{{ $t(presentItme.value.typeDesc) }}</div>
<div class="price">
<span>{{ presentItme.value.price }}</span>
元/{{ presentItme.value.priceTime }}
@@ -194,7 +195,7 @@
v-for="item in presentItme.value.authority"
:key="item"
>
{{ item }}
{{ item }}123
</div>
</div>
<div class="right">
@@ -466,6 +467,7 @@ async function getPackageList() {
}
const showPayDialog = ref(false); //套餐信息dialog显示隐藏
const presentItme = reactive({}); //点击的套餐项
// const presentItme = ref({}); //点击的套餐项
function clickPayDialog(item) {
presentItme.value = item;
showPayDialog.value = true;


+ 944
- 0
src/views/userModel/index.vue 파일 보기

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

+ 16
- 0
src/views/userModel/videoStatus.js 파일 보기

@@ -0,0 +1,16 @@
/**
* @description:根据状态返回状态名
* @param {number} status
* @return: statusName
*/
export const getStatus = status => {
if (status == 0) {
return "manuscript"
} else if (status == 1 || status == 2 || status == 4 || status == 6) {
return "generating"
} else if (status == 3) {
return "generationFailed"
} else if (status == 5) {
return "generationSucceed"
}
}

+ 7
- 0
src/views/voiceModel/index.vue 파일 보기

@@ -0,0 +1,7 @@
<template>
<div></div>
</template>
<script setup>
// import { ref } from 'vue'
</script>
<style lang="scss" scoped></style>

불러오는 중...
취소
저장