| @@ -72,4 +72,4 @@ | |||||
| "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git", | "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git", | ||||
| "author": "有来开源组织", | "author": "有来开源组织", | ||||
| "license": "MIT" | "license": "MIT" | ||||
| } | |||||
| } | |||||
| @@ -1,22 +1,39 @@ | |||||
| import request from "@/utils/request.js"; | import request from "@/utils/request.js"; | ||||
| /** | |||||
| * @description 获取人脸列表 | |||||
| * @params pageNum, pageSize | |||||
| * @returns data | |||||
| */ | |||||
| export function personPhotoList(pageNum, pageSize) { | |||||
| return request({ | |||||
| url: `api/personPhoto/list?pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| /** | /** | ||||
| * @description 上传图片 | * @description 上传图片 | ||||
| * @params ticket | |||||
| * @params data | |||||
| * @returns data | * @returns data | ||||
| */ | */ | ||||
| export function awsImgUpload(formData) { | |||||
| export function awsImgUpload(data) { | |||||
| return request({ | return request({ | ||||
| url: `/api/upload/awsImgUpload`, | url: `/api/upload/awsImgUpload`, | ||||
| method: 'post', | method: 'post', | ||||
| data: formData | |||||
| data | |||||
| }) | }) | ||||
| } | } | ||||
| export function awsMp3Upload(formData) { | |||||
| /** | |||||
| * @description 上传视频 | |||||
| * @params data | |||||
| * @returns data | |||||
| */ | |||||
| export function videoUpload(data) { | |||||
| return request({ | return request({ | ||||
| url: `api/video/upload`, | url: `api/video/upload`, | ||||
| method: 'post', | method: 'post', | ||||
| data: formData | |||||
| data | |||||
| }) | }) | ||||
| } | } | ||||
| @@ -1,15 +1,14 @@ | |||||
| import request from "@/utils/request.js"; | import request from "@/utils/request.js"; | ||||
| const baseURL = import.meta.env.VITE_APP_BASE_API | |||||
| /** | /** | ||||
| * @description 获取我的视频作品 | * @description 获取我的视频作品 | ||||
| * @params pageSize,pageNum | |||||
| * @params pageNum, pageSize | |||||
| * @returns data | * @returns data | ||||
| */ | */ | ||||
| export function userPhotoVideoList(pageSize, pageNum, title) { | |||||
| export function userPhotoVideoList(pageNum, pageSize, title) { | |||||
| return request({ | return request({ | ||||
| url: `/api/userPhotoVideo/list?pageSize=${pageSize}&pageNum=${pageNum}&title=${title}`, | |||||
| url: `/api/userPhotoVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&title=${title}`, | |||||
| method: 'get' | method: 'get' | ||||
| }) | }) | ||||
| } | } | ||||
| @@ -31,6 +31,7 @@ export default { | |||||
| // 创作视频 | // 创作视频 | ||||
| createVideo: { | createVideo: { | ||||
| title: "CreateVideo", | title: "CreateVideo", | ||||
| availableMould:"Available Moulds", | |||||
| typeScript: "Type your Script", | typeScript: "Type your Script", | ||||
| uploadAudio: "Upload Audio", | uploadAudio: "Upload Audio", | ||||
| aiScript: "Ai Script", | aiScript: "Ai Script", | ||||
| @@ -55,6 +56,8 @@ export default { | |||||
| download: "Download", | download: "Download", | ||||
| delete: "Delete", | delete: "Delete", | ||||
| more: "More", | more: "More", | ||||
| noList:"Nothing here. How about making one ?", | |||||
| goCreate:"Go Create !", | |||||
| draft: "Draft", | draft: "Draft", | ||||
| generating: "Generating", | generating: "Generating", | ||||
| generationFailed: "Failed", | generationFailed: "Failed", | ||||
| @@ -31,6 +31,7 @@ export default { | |||||
| // 创作视频 | // 创作视频 | ||||
| createVideo: { | createVideo: { | ||||
| title: "创作视频", | title: "创作视频", | ||||
| availableMould:"可用模板", | |||||
| typeScript: "输入文案", | typeScript: "输入文案", | ||||
| uploadAudio: "上传音频", | uploadAudio: "上传音频", | ||||
| aiScript: "AI生成文本", | aiScript: "AI生成文本", | ||||
| @@ -55,6 +56,8 @@ export default { | |||||
| download: "下载", | download: "下载", | ||||
| delete: "删除", | delete: "删除", | ||||
| more: "更多", | more: "更多", | ||||
| noList:"暂无没有作品哦,快去尝试制作你的第一个视频吧!", | |||||
| goCreate:"去创作", | |||||
| draft: "草稿", | draft: "草稿", | ||||
| generating: "生成中", | generating: "生成中", | ||||
| generationFailed: "生成失败", | generationFailed: "生成失败", | ||||
| @@ -98,8 +98,7 @@ onMounted(() => {}); | |||||
| position: relative; | position: relative; | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| &.mobile.openSidebar { | |||||
| e &.mobile.openSidebar { | |||||
| position: fixed; | position: fixed; | ||||
| top: 0; | top: 0; | ||||
| } | } | ||||
| @@ -45,7 +45,7 @@ const defaultSettings: DefaultSettings = { | |||||
| title: "Metavatar-PC", | title: "Metavatar-PC", | ||||
| showSettings: false, | showSettings: false, | ||||
| tagsView: false, | tagsView: false, | ||||
| fixedHeader: true, | |||||
| fixedHeader: false, | |||||
| sidebarLogo: true, | sidebarLogo: true, | ||||
| layout: "left", | layout: "left", | ||||
| /** | /** | ||||
| @@ -2,6 +2,7 @@ | |||||
| export {} | export {} | ||||
| declare global { | declare global { | ||||
| const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
| @@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
| declare module 'vue' { | declare module 'vue' { | ||||
| interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | 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 ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
| @@ -16,9 +16,12 @@ declare module '@vue/runtime-core' { | |||||
| ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ||||
| ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | ||||
| ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | ||||
| ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| ElFormItem: typeof import('element-plus/es')['ElFormItem'] | |||||
| ElIcon: typeof import('element-plus/es')['ElIcon'] | ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
| ElInput: typeof import('element-plus/es')['ElInput'] | ElInput: typeof import('element-plus/es')['ElInput'] | ||||
| ElOption: typeof import('element-plus/es')['ElOption'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
| ElPagination: typeof import('element-plus/es')['ElPagination'] | |||||
| ElRow: typeof import('element-plus/es')['ElRow'] | ElRow: typeof import('element-plus/es')['ElRow'] | ||||
| ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ||||
| ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
| @@ -61,15 +61,12 @@ | |||||
| <!-- 底部 --> | <!-- 底部 --> | ||||
| <div class="left-bottom"> | <div class="left-bottom"> | ||||
| <div class="ai"> | |||||
| <div class="aiAvatar"></div> | |||||
| <div style="margin-left: 20px">Generate By Ai</div> | |||||
| </div> | |||||
| <div class="faceList scrolly"> | |||||
| <div>{{ $t("createVideo.availableMould") }}:</div> | |||||
| <div class="faceList"> | |||||
| <div | <div | ||||
| class="faceItem pointer" | class="faceItem pointer" | ||||
| @click="setImgUrl(item.material)" | @click="setImgUrl(item.material)" | ||||
| v-for="item in AiFace" | |||||
| v-for="item in AiFaceList" | |||||
| :key="item.id" | :key="item.id" | ||||
| > | > | ||||
| <!-- <div class="img"></div> --> | <!-- <div class="img"></div> --> | ||||
| @@ -263,24 +260,23 @@ | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script setup> | <script setup> | ||||
| import { ref } from "vue"; | |||||
| import { getCurrentInstance } from "vue"; | import { getCurrentInstance } from "vue"; | ||||
| import Recorder from "js-audio-recorder"; | import Recorder from "js-audio-recorder"; | ||||
| import axios from "axios"; | |||||
| import { awsImgUpload, awsMp3Upload } from "@/apis/createVideo"; | |||||
| import { ElMessage } from "element-plus"; | |||||
| import { personPhotoList, awsImgUpload, videoUpload } from "@/apis/createVideo"; | |||||
| // 获取AI头像 | // 获取AI头像 | ||||
| const AiFace = ref([]); | |||||
| function getAiFace() { | |||||
| axios({ | |||||
| url: "https://photo.metavatar.cc/C//api/personPhoto/list?pageNum=1&pageSize=1", | |||||
| method: "get", | |||||
| }).then((res) => { | |||||
| AiFace.value = res.data.data.list; | |||||
| console.log(res.data.data.list); | |||||
| }); | |||||
| const AiFaceList = ref([]); | |||||
| function getAiFaceList(pageNum, pageSize) { | |||||
| personPhotoList(pageNum, pageSize) | |||||
| .then((res) => { | |||||
| console.log(res, "res"); | |||||
| AiFaceList.value = res.data.list; | |||||
| }) | |||||
| .catch((err) => { | |||||
| console.log(err, "err"); | |||||
| }); | |||||
| } | } | ||||
| getAiFace(); | |||||
| // 标题 | // 标题 | ||||
| let title = ref(""); | let title = ref(""); | ||||
| @@ -354,7 +350,7 @@ async function uploadAudio(params) { | |||||
| const timestamp = Date.now(); | const timestamp = Date.now(); | ||||
| formData.append("file", audioData.value, timestamp + ".mp3"); | formData.append("file", audioData.value, timestamp + ".mp3"); | ||||
| try { | try { | ||||
| const res = await awsMp3Upload(formData); | |||||
| const res = await videoUpload(formData); | |||||
| ElMessage.success("上传成功!"); | ElMessage.success("上传成功!"); | ||||
| } catch (error) { | } catch (error) { | ||||
| ElMessage.error(error); | ElMessage.error(error); | ||||
| @@ -395,12 +391,15 @@ const { | |||||
| const string = "createVideo.typeScript"; | const string = "createVideo.typeScript"; | ||||
| const t = globalProperties.$t(string); | const t = globalProperties.$t(string); | ||||
| onMounted(() => { | |||||
| getAiFaceList(1, 100); | |||||
| }); | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| // height: calc(100vh - 84px); | |||||
| height: 887px; | |||||
| height: 1200px; | |||||
| padding: 20px 0 0 40px; | padding: 20px 0 0 40px; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| @@ -408,7 +407,7 @@ const t = globalProperties.$t(string); | |||||
| .left { | .left { | ||||
| width: 70%; | width: 70%; | ||||
| height: 100%; | |||||
| height: 80%; | |||||
| :deep(.el-input__wrapper) { | :deep(.el-input__wrapper) { | ||||
| border: none; | border: none; | ||||
| @@ -537,14 +536,6 @@ const t = globalProperties.$t(string); | |||||
| .ai { | .ai { | ||||
| width: 100%; | width: 100%; | ||||
| .aiAvatar { | |||||
| width: 100px; | |||||
| height: 100px; | |||||
| margin-left: 25px; | |||||
| background-color: pink; | |||||
| border-radius: 50%; | |||||
| } | |||||
| } | } | ||||
| .faceList { | .faceList { | ||||
| @@ -552,8 +543,8 @@ const t = globalProperties.$t(string); | |||||
| flex-wrap: wrap; | flex-wrap: wrap; | ||||
| justify-content: flex-start; | justify-content: flex-start; | ||||
| width: 100%; | width: 100%; | ||||
| height: 130px; | |||||
| height: 160px; | |||||
| overflow-y: scroll; | |||||
| .faceItem { | .faceItem { | ||||
| width: 150px; | width: 150px; | ||||
| height: 150px; | height: 150px; | ||||
| @@ -1,6 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div class="login-container"> | <div class="login-container"> | ||||
| <div class="Version">Version 1.0.5 test</div> | |||||
| <div class="Version">Version 1.0.7 test</div> | |||||
| <div class="videoBox"> | <div class="videoBox"> | ||||
| <video | <video | ||||
| src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" | ||||
| @@ -231,6 +231,7 @@ import { | |||||
| import axios from "axios"; | import axios from "axios"; | ||||
| // 状态管理依赖 | // 状态管理依赖 | ||||
| import { useUserStore } from "@/store/modules/user"; | import { useUserStore } from "@/store/modules/user"; | ||||
| // API依赖 | // API依赖 | ||||
| import { | import { | ||||
| LocationQuery, | LocationQuery, | ||||
| @@ -108,7 +108,7 @@ function routerTo(url) { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| height: 887px; | |||||
| height: 1200px; | |||||
| padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
| // height: calc(100vh - 84px); | // height: calc(100vh - 84px); | ||||
| background-color: #fff; | background-color: #fff; | ||||
| @@ -14,7 +14,7 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 作品列表 --> | <!-- 作品列表 --> | ||||
| <div class="workList flex"> | |||||
| <div v-if="videoList.length > 0" class="workList flex"> | |||||
| <div class="workItem" v-for="item in videoList" :key="item.id"> | <div class="workItem" v-for="item in videoList" :key="item.id"> | ||||
| <div class="workImg"> | <div class="workImg"> | ||||
| <img | <img | ||||
| @@ -67,6 +67,14 @@ | |||||
| </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> | |||||
| <!-- 预览作品 --> | <!-- 预览作品 --> | ||||
| <el-dialog | <el-dialog | ||||
| destroy-on-close | destroy-on-close | ||||
| @@ -110,6 +118,21 @@ | |||||
| </span> | </span> | ||||
| </template> | </template> | ||||
| </el-dialog> | </el-dialog> | ||||
| <div class="pagination"> | |||||
| <el-pagination | |||||
| v-model:current-page="pageNum" | |||||
| v-model:page-size="pageSize" | |||||
| :page-sizes="[10, 20, 50, 100, 200]" | |||||
| :small="false" | |||||
| :disabled="false" | |||||
| :background="true" | |||||
| layout="total, sizes, prev, pager, next, jumper" | |||||
| :total="total" | |||||
| @size-change="handleSizeChange" | |||||
| @current-change="handleCurrentChange" | |||||
| /> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script setup> | <script setup> | ||||
| @@ -117,20 +140,34 @@ import { userPhotoVideoList, delUserPhotoVideoByID } from "@/apis/myCreating"; | |||||
| import { timestampToTime } from "@/utils/tools"; | import { timestampToTime } from "@/utils/tools"; | ||||
| import { useI18n } from "vue-i18n"; | import { useI18n } from "vue-i18n"; | ||||
| import { getStatus } from "./videoStatus"; | import { getStatus } from "./videoStatus"; | ||||
| import { useRouter } from "vue-router"; | |||||
| const router = useRouter(); | |||||
| // 当前语言状态与国际化组件 | // 当前语言状态与国际化组件 | ||||
| const { locale } = useI18n(); | const { locale } = useI18n(); | ||||
| const lanChange = ref(locale); | const lanChange = ref(locale); | ||||
| let title = ref(""); | |||||
| let pageSize = ref(100); | |||||
| let pageNum = ref(1); | |||||
| const title = ref(""); | |||||
| const pageNum = ref(1); | |||||
| const pageSize = ref(10); | |||||
| const total = ref(0); | |||||
| // 弹窗显示隐藏 | // 弹窗显示隐藏 | ||||
| let showDialog = ref(false); | |||||
| const showDialog = ref(false); | |||||
| // 当前作品 | // 当前作品 | ||||
| let presentItem = ref(""); | |||||
| const presentItem = ref(""); | |||||
| // 作品列表 | // 作品列表 | ||||
| const videoList = 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) { | function clickVideoItem(item) { | ||||
| showDialog.value = true; | showDialog.value = true; | ||||
| @@ -150,8 +187,12 @@ function mouseenter(item) { | |||||
| function handleDownload() {} | function handleDownload() {} | ||||
| function goCreate() { | |||||
| router.push("/createVideo"); | |||||
| } | |||||
| function searchVideoList() { | function searchVideoList() { | ||||
| getPhotoVideoList(pageSize.value, pageNum.value, title.value, true); | |||||
| getPhotoVideoList(pageNum.value, pageSize.value, title.value, true); | |||||
| } | } | ||||
| function handelDelete(id, title) { | function handelDelete(id, title) { | ||||
| @@ -174,8 +215,8 @@ function handelDelete(id, title) { | |||||
| * @description:获取我的视频作品 | * @description:获取我的视频作品 | ||||
| * @return: data | * @return: data | ||||
| */ | */ | ||||
| function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | |||||
| userPhotoVideoList(pageSize, pageNum, title) | |||||
| function getPhotoVideoList(pageNum, pageSize, title, searchFlag) { | |||||
| userPhotoVideoList(pageNum, pageSize, title) | |||||
| .then((res) => { | .then((res) => { | ||||
| console.log(res, "res"); | console.log(res, "res"); | ||||
| res.data.list.forEach((item) => { | res.data.list.forEach((item) => { | ||||
| @@ -185,6 +226,7 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | |||||
| item.statusName = getStatus(item.videoStatus); | item.statusName = getStatus(item.videoStatus); | ||||
| }); | }); | ||||
| videoList.value = res.data.list; | videoList.value = res.data.list; | ||||
| total.value = res.data.total * 1; | |||||
| if (searchFlag) { | if (searchFlag) { | ||||
| const total = res.data.total; | const total = res.data.total; | ||||
| const msg1 = | const msg1 = | ||||
| @@ -195,7 +237,13 @@ function getPhotoVideoList(pageSize, pageNum, title, searchFlag) { | |||||
| lanChange.value == "zh-cn" | lanChange.value == "zh-cn" | ||||
| ? `查询成功!没有符合条件的视频` | ? `查询成功!没有符合条件的视频` | ||||
| : `Found! No match videos`; | : `Found! No match videos`; | ||||
| ElMessage.success(total > 0 ? msg1 : msg2); | |||||
| const msg3 = | |||||
| lanChange.value == "zh-cn" | |||||
| ? `查询成功!已加载全部视频` | |||||
| : `Found! Present all videos`; | |||||
| return title | |||||
| ? ElMessage.success(total > 0 ? msg1 : msg2) | |||||
| : ElMessage.success(msg3); | |||||
| } | } | ||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| @@ -219,204 +267,257 @@ function delPhotoVideo(videoID) { | |||||
| } | } | ||||
| onMounted(() => { | onMounted(() => { | ||||
| getPhotoVideoList(pageSize.value, pageNum.value, title.value); | |||||
| getPhotoVideoList(pageNum.value, pageSize.value, title.value); | |||||
| }); | }); | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| // height: calc(100vh - 84px); | |||||
| height: 887px; | |||||
| padding: 50px; | |||||
| height: 1200px; | |||||
| padding: 50px 130px; | |||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| } | |||||
| :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; | |||||
| .top { | |||||
| margin-bottom: 35px; | |||||
| } | } | ||||
| } | |||||
| .workList { | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-start; | |||||
| width: 100%; | |||||
| height: 200px; | |||||
| margin-top: 20px; | |||||
| cursor: pointer; | |||||
| .workItem { | |||||
| position: relative; | |||||
| width: 300px; | |||||
| .workList { | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-start; | |||||
| width: 100%; | |||||
| height: 200px; | height: 200px; | ||||
| margin: 0 10px 10px 0; | |||||
| border: 2px solid #c2c2c2; | |||||
| border-radius: 5px; | |||||
| margin-top: 20px; | |||||
| cursor: pointer; | cursor: pointer; | ||||
| overflow: hidden; | |||||
| .workImg { | |||||
| .workItem { | |||||
| position: relative; | position: relative; | ||||
| width: 100%; | |||||
| height: 170px; | |||||
| width: 300px; | |||||
| height: 200px; | |||||
| margin: 0 20px 30px 0; | |||||
| border: 2px solid #c2c2c2; | |||||
| border-radius: 5px; | |||||
| cursor: pointer; | cursor: pointer; | ||||
| padding: 10px; | |||||
| .coverImg { | |||||
| max-width: 90%; | |||||
| max-height: 170px; | |||||
| overflow: hidden; | |||||
| .workImg { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 170px; | |||||
| cursor: pointer; | cursor: pointer; | ||||
| } | |||||
| .takePlace { | |||||
| position: absolute; | |||||
| top: 40%; | |||||
| width: 80%; | |||||
| } | |||||
| } | |||||
| .more { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| display: none; | |||||
| width: 100%; | |||||
| height: 170px; | |||||
| background-color: rgb(0 0 0 / 30%); | |||||
| cursor: pointer; | |||||
| .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; | |||||
| padding: 10px; | |||||
| .coverImg { | |||||
| max-width: 90%; | |||||
| max-height: 170px; | |||||
| cursor: pointer; | |||||
| } | |||||
| .takePlace { | |||||
| position: absolute; | |||||
| top: 40%; | |||||
| width: 80%; | |||||
| } | } | ||||
| } | } | ||||
| .btns { | |||||
| .more { | |||||
| position: absolute; | position: absolute; | ||||
| top: 45px; | |||||
| right: 10px; | |||||
| // width: 70px; | |||||
| // height: 60px; | |||||
| overflow: hidden; | |||||
| border-radius: 10px; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 170px; | |||||
| background-color: rgb(0 0 0 / 30%); | |||||
| cursor: pointer; | 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; | |||||
| } | |||||
| &-item { | |||||
| // width: 70px; | |||||
| // height: 30px; | |||||
| .showBtn { | |||||
| position: absolute; | |||||
| top: 10px; | |||||
| right: 10px; | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| font-size: 20px; | |||||
| line-height: 10px; | |||||
| color: #fff; | |||||
| text-align: center; | text-align: center; | ||||
| background-color: #fff; | |||||
| padding: 0 10px; | |||||
| transition: all 0.3s; | transition: all 0.3s; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| &-icon { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| 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; | cursor: pointer; | ||||
| .icon-delete { | |||||
| position: absolute; | |||||
| top: 4px; | |||||
| left: 0; | |||||
| &-icon { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| width: 20px; | width: 20px; | ||||
| height: 20px; | height: 20px; | ||||
| font-size: 16px; | |||||
| color: #000; | |||||
| text-align: center; | |||||
| cursor: pointer; | 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; | |||||
| cursor: pointer; | |||||
| } | |||||
| &:hover { | |||||
| color: #ffffff; | |||||
| background-color: #0000001a; | |||||
| .text { | |||||
| display: inline-block; | |||||
| height: 30px; | |||||
| padding-left: 5px; | |||||
| margin-top: -5px; | |||||
| line-height: 20px; | |||||
| cursor: pointer; | |||||
| } | |||||
| &:hover { | |||||
| color: #ffffff; | |||||
| background-color: #0000001a; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .workInfo { | |||||
| justify-content: space-between; | |||||
| height: 30px; | |||||
| padding: 0 10px; | |||||
| line-height: 30px; | |||||
| border-top: 1px solid #afafaf; | |||||
| } | |||||
| .statusName { | |||||
| position: absolute; | |||||
| top: 10%; | |||||
| left: -10%; | |||||
| width: 120px; | |||||
| text-align: center; | |||||
| color: #ffffff; | |||||
| font-size: 14px; | |||||
| transform: rotate(-45deg); | |||||
| &.draft { | |||||
| /* 草稿 */ | |||||
| background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | |||||
| .workInfo { | |||||
| justify-content: space-between; | |||||
| height: 30px; | |||||
| padding: 0 10px; | |||||
| line-height: 30px; | |||||
| border-top: 1px solid #afafaf; | |||||
| } | } | ||||
| &.generating { | |||||
| /* 生成中 */ | |||||
| background: linear-gradient(270deg, #4b61dc, #15d1b8); | |||||
| .statusName { | |||||
| position: absolute; | |||||
| top: 10%; | |||||
| left: -10%; | |||||
| width: 120px; | |||||
| text-align: center; | |||||
| color: #ffffff; | |||||
| font-size: 14px; | |||||
| transform: rotate(-45deg); | |||||
| &.draft { | |||||
| /* 草稿 */ | |||||
| 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%); | |||||
| } | |||||
| } | } | ||||
| &.generationFailed { | |||||
| /* 生成失败 */ | |||||
| background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); | |||||
| &:hover { | |||||
| .more { | |||||
| opacity: 1; | |||||
| } | |||||
| } | } | ||||
| &.generationSucceed { | |||||
| /* 生成成功 */ | |||||
| background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); | |||||
| } | |||||
| } | |||||
| .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: 50px; | |||||
| 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; | |||||
| } | |||||
| .workItem:hover .more { | |||||
| display: block; | |||||
| .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; | |||||
| } | } | ||||
| } | } | ||||
| @@ -87,7 +87,7 @@ const submitForm = async (formEl) => { | |||||
| <style scoped> | <style scoped> | ||||
| .page { | .page { | ||||
| height: 887px; | |||||
| height: 1200px; | |||||
| padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| @@ -145,8 +145,7 @@ function clickPayDialog(item) { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| // height: calc(100vh - 84px); | |||||
| height: 887px; | |||||
| height: 1200px; | |||||
| padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| @@ -96,8 +96,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { | |||||
| symbolId: "icon-[dir]-[name]", | symbolId: "icon-[dir]-[name]", | ||||
| }), | }), | ||||
| ], | ], | ||||
| define: { | |||||
| global:{} | |||||
| } | |||||
| // define: { | |||||
| // global: {}, | |||||
| // }, | |||||
| }; | }; | ||||
| }); | }); | ||||
| @@ -1,15 +1,8 @@ | |||||
| Arguments: | Arguments: | ||||
| <<<<<<< HEAD | |||||
| B:\nodejs\node.exe B:\nodejs\node_modules\yarn\bin\yarn.js add mic-recorder-to-mp3 | |||||
| C:\Program Files\nodejs\node.exe C:\Users\Holy-Knight-IX\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js | |||||
| PATH: | PATH: | ||||
| C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;B:\nvm;B:\nodejs;B:\Git\Git\cmd;C:\Users\12574\AppData\Local\Microsoft\WindowsApps;B:\Microsoft VS Code\bin;B:\nvm;B:\nodejs | |||||
| ======= | |||||
| C:\Program Files\nodejs\node.exe C:\Users\Holy-Knight-IX\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add -D --prefer-offline @iconify-json/ph | |||||
| PATH: | |||||
| C:\Users\HOLY-K~1\AppData\Local\Temp\yarn--1685070845077-0.20825812772556618;C:\Users\Holy-Knight-IX\Desktop\Working Space\7.SuiMang\web_pc\node_modules\.bin;C:\Users\Holy-Knight-IX\AppData\Local\Yarn\Data\link\node_modules\.bin;C:\Users\Holy-Knight-IX\AppData\Local\Yarn\bin;C:\Program Files\libexec\lib\node_modules\npm\bin\node-gyp-bin;C:\Program Files\lib\node_modules\npm\bin\node-gyp-bin;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\nodejs-10.24.1;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;E:\微信web开发者工具\dll;C:\Program Files\nodejs\nodejs-10.24.1\;C:\Program Files (x86)\Tencent\微信web开发者工具\dll;C:\Users\Holy-Knight-IX\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\Holy-Knight-IX\AppData\Local\Microsoft\WindowsApps;C:\Users\Holy-Knight-IX\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Holy-Knight-IX\AppData\Roaming\npm;C:\Users\Holy-Knight-IX\AppData\Roaming\nvm;C:\Program Files\nodejs | |||||
| >>>>>>> 1130ab9f8d017215cbc06fc6125aa3933cb4eb82 | |||||
| C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\nodejs-10.24.1;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;E:\微信web开发者工具\dll;C:\Program Files\nodejs\nodejs-10.24.1\;C:\Program Files (x86)\Tencent\微信web开发者工具\dll;C:\Users\Holy-Knight-IX\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\Holy-Knight-IX\AppData\Local\Microsoft\WindowsApps;C:\Users\Holy-Knight-IX\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Holy-Knight-IX\AppData\Roaming\npm;C:\Users\Holy-Knight-IX\AppData\Roaming\nvm;C:\Program Files\nodejs | |||||
| Yarn version: | Yarn version: | ||||
| 1.22.19 | 1.22.19 | ||||
| @@ -21,11 +14,7 @@ Platform: | |||||
| win32 x64 | win32 x64 | ||||
| Trace: | Trace: | ||||
| <<<<<<< HEAD | |||||
| Error: EPERM: operation not permitted, unlink 'B:\0work\0fm\Web-pc\node_modules\@esbuild\win32-x64\esbuild.exe' | |||||
| ======= | |||||
| Error: EPERM: operation not permitted, unlink 'C:\Users\Holy-Knight-IX\Desktop\Working Space\7.SuiMang\web_pc\node_modules\@esbuild\win32-x64\esbuild.exe' | Error: EPERM: operation not permitted, unlink 'C:\Users\Holy-Knight-IX\Desktop\Working Space\7.SuiMang\web_pc\node_modules\@esbuild\win32-x64\esbuild.exe' | ||||
| >>>>>>> 1130ab9f8d017215cbc06fc6125aa3933cb4eb82 | |||||
| npm manifest: | npm manifest: | ||||
| { | { | ||||
| @@ -50,6 +39,7 @@ npm manifest: | |||||
| "axios": "^1.3.4", | "axios": "^1.3.4", | ||||
| "echarts": "^5.2.2", | "echarts": "^5.2.2", | ||||
| "element-plus": "^2.3.1", | "element-plus": "^2.3.1", | ||||
| "js-audio-recorder": "^1.0.7", | |||||
| "nprogress": "^0.2.0", | "nprogress": "^0.2.0", | ||||
| "path-browserify": "^1.0.1", | "path-browserify": "^1.0.1", | ||||
| "path-to-regexp": "^6.2.0", | "path-to-regexp": "^6.2.0", | ||||
| @@ -3831,6 +3821,11 @@ Lockfile: | |||||
| resolved "https://registry.npmmirror.com/jiti/-/jiti-1.18.2.tgz" | resolved "https://registry.npmmirror.com/jiti/-/jiti-1.18.2.tgz" | ||||
| integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg== | integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg== | ||||
| js-audio-recorder@^1.0.7: | |||||
| version "1.0.7" | |||||
| resolved "https://registry.yarnpkg.com/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz#01501cb9eb143d57994b42bd5ae97974fda18908" | |||||
| integrity sha512-JiDODCElVHGrFyjGYwYyNi7zCbKk9va9C77w+zCPMmi4C6ix7zsX2h3ddHugmo4dOTOTCym9++b/wVW9nC0IaA== | |||||
| js-base64@^2.1.9: | js-base64@^2.1.9: | ||||
| version "2.6.4" | version "2.6.4" | ||||
| resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz" | resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz" | ||||