|
- <template>
- <div class="page flex justify-around">
- <!-- 左侧栏 -->
- <div class="left">
- <!-- 顶部 -->
- <!-- 选中AiFace -->
- <div class="left-top" v-show="showUploadBtn == 1">
- <el-row class="justify-between">
- <!-- title框 -->
- <div
- v-show="!submitImgBtn"
- class="flex justify-between"
- style="width: 300px"
- >
- <el-input
- maxlength="15"
- v-model="title"
- :placeholder="$t('createVideo.typeTitle')"
- />
- <el-icon class="icon-edit"><i-ep-edit /></el-icon>
- </div>
- </el-row>
- <!-- 中间展示大图 -->
- <div class="bigImg inmiddle">
- <img :src="imgUrl" alt="" class="inmiddle" />
- </div>
- </div>
- <!-- 选中需要上传的图片前 -->
- <div class="left-top" v-show="showUploadBtn == 2">
- <!-- 中间展示大图 -->
- <div class="noImg">
- <my-loading
- style="margin-top: 150px"
- :isLoading="compressionImgLoad"
- ></my-loading>
- <div v-if="!compressionImgLoad" class="trueImg inmiddle">
- <div class="imgBox">
- <img src="../../assets/img/trueImg.png" alt="" />
- </div>
- <div class="icon">✔</div>
- </div>
- <div v-if="!compressionImgLoad" class="upload inmiddle">
- +
- <input accept="image/*" type="file" @change="lookImg" />
- </div>
- <div v-if="!compressionImgLoad" class="falseImg inmiddle">
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false1.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false2.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false3.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- </div>
- </div>
- </div>
- <!-- loading -->
- <div class="left-top" v-show="showUploadBtn == 3">
- <!-- 中间展示大图 -->
- <div class="noImg">
- <my-loading
- style="margin-top: 150px"
- :isLoading="compressionImgLoad"
- ></my-loading>
- <div v-if="!compressionImgLoad" class="trueImg inmiddle">
- <div class="imgBox">
- <img src="../../assets/img/trueImg.png" alt="" />
- </div>
- <div class="icon">✔</div>
- </div>
- <div v-if="!compressionImgLoad" class="upload inmiddle">
- +
- <input accept="image/*" type="file" @change="lookImg" />
- </div>
- <div v-if="!compressionImgLoad" class="falseImg inmiddle">
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false1.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false2.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- <div>
- <div class="imgBox">
- <img src="../../assets/img/false3.png" alt="" />
- </div>
- <div class="icon">×</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 选中需要上传的图片后 -->
- <div class="left-top" v-show="showUploadBtn == 4">
- <el-row style="display: flex; justify-content: flex-end">
- <!-- 上传按钮 废弃了-->
- <!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> -->
- <div v-if="false" class="btnBox">
- <button class="uploadBtn">
- {{ $t("createVideo.reselect") }}
- <input accept="image/*" type="file" @change="lookImg" />
- </button>
- <button class="uploadBtn" @click="changeFile">
- {{ $t("createVideo.sureUpload") }}
- </button>
- </div>
- </el-row>
- <!-- 中间展示大图 -->
- <div class="bigImg inmiddle">
- <img :src="imgUrl" alt="" class="inmiddle" />
- </div>
- </div>
- <!-- AI生成图片展示区 -->
- <div class="left-top" v-show="showUploadBtn == 5">
- <div class="editAiPicBox">
- <div class="edit">
- <div class="TagBox"></div>
- </div>
- <div class="AIpicBox">
- <div class="picBox">
- <img src="../../assets/img/trueImg.png" alt="" />
- </div>
- </div>
- </div>
- </div>
-
- <!-- 底部 -->
- <div class="left-bottom">
- <!-- tab栏 -->
- <div class="tab flex">
- <div
- class="pointer"
- :class="showFace == 0 ? 'tabAvtive' : ''"
- @click="chooSystemImg"
- >
- {{ $t("createVideo.availableMould") }}
- </div>
- <div
- v-if="AccessToken"
- class="pointer"
- :class="showFace == 1 ? 'tabAvtive' : ''"
- @click="chooseMyImg"
- >
- {{ $t("createVideo.personalWarehouse") }}
- </div>
- <div
- v-if="AccessToken"
- class="pointer aiPicTab"
- :class="showFace == 2 ? 'tabAvtive' : ''"
- @click="chooseAiPic"
- >
- <div class="subscript subscript1">
- <span>AI </span>
- <img src="../../assets/img/star.png" alt="" />
- </div>
- {{ $t("createVideo.Aipicture") }}
- </div>
- </div>
- <!-- 系统相册 -->
- <div
- class="faceList"
- v-if="showFace == 0"
- v-infinite-scroll="loadMoreAiFaceSystem"
- :infinite-scroll-disabled="overLoadSystem"
- >
- <!-- 上传图片组件 -->
- <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn">
- <span class="uploadImg">+ </span>
- </div>
- <my-loading :isLoading="feceItemLoading"></my-loading>
- <!-- face列表 -->
- <div
- :class="faceItemActive == item.id ? 'faceItemActive' : ''"
- class="faceItem pointer"
- @click="setImgUrl(item.material, item.id)"
- v-for="item in AiFaceList"
- :key="item.id"
- >
- <div class="imgBox">
- <img :src="item.material" alt="" />
- </div>
- s
- </div>
- </div>
- <!-- 个人相册 -->
- <div
- class="faceList"
- v-if="showFace == 1"
- v-infinite-scroll="loadMoreAiFaceUser"
- :infinite-scroll-disabled="overLoadUser"
- >
- <!-- 上传图片组件 -->
- <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn">
- <span class="uploadImg">+ </span>
- </div>
- <my-loading :isLoading="feceItemLoading2"></my-loading>
- <!-- face列表 -->
- <div
- :class="faceItemActive == item.id ? 'faceItemActive' : ''"
- class="faceItem pointer"
- @click="setImgUrl(item.material, item.id)"
- v-for="item in userAiFaceList"
- :key="item.id"
- >
- <div class="imgBox">
- <img :src="item.material" alt="" />
- </div>
- <div
- v-if="faceItemActive == item.id"
- @click="deleteFaceImg(item.id)"
- class="deleteIcon"
- >
- ✖︎
- </div>
- </div>
- </div>
- <!-- AI生成图片 -->
- <div
- class="Aipicture"
- v-if="showFace == 2"
- v-infinite-scroll="loadMoreAiFaceUser"
- :infinite-scroll-disabled="overLoadUser"
- >
- <div class="title">
- <el-icon><i-ep-Lock /></el-icon>
- {{ $t("createVideo.comingSoon") }}
- </div>
- </div>
- </div>
- </div>
- <!-- 右侧栏 -->
- <div class="right">
- <div v-if="AccessToken" class="subscript">
- <span>GPT</span>
- <img src="../../assets/img/star.png" alt="" />
- </div>
- <el-tabs type="border-card" class="tabs">
- <!-- ----------------------------- 1 -->
- <el-tab-pane :label="$t('createVideo.typeScript')">
- <div class="card1">
- <div class="text">
- <!-- 文本域 -->
- <el-input
- maxlength="3000"
- id="textInputId"
- v-model="textareaContent"
- :rows="15"
- type="textarea"
- :placeholder="$t('createVideo.aiText')"
- />
- <span
- class="pointer"
- @click="getPreviewAudio"
- style="margin-right: 10px; font-size: 20px"
- >🔊</span
- >
- <span class="pointer" @click="insertIcon">🕗</span>
- </div>
- <p>{{ $t("createVideo.languages") }}</p>
- <!-- 语言 -->
- <el-select
- @change="chooseType"
- v-model="language"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in languageOptions"
- :key="item.value"
- :label="item.name"
- :value="item.id"
- >
- <img
- :src="item.img"
- alt=""
- style="
- width: 20px;
- margin-right: 10px;
- vertical-align: text-top;
- "
- />
- <span style="line-height: 20px">{{ item.name }}</span>
- </el-option>
- </el-select>
- <p>{{ $t("createVideo.voices") }}</p>
- <!-- 声音 -->
- <el-select
- @change="chooseStyle"
- :disabled="language ? false : true"
- v-model="sound"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in soundOptions"
- :key="item.value"
- :label="item.displayName"
- :value="item.id"
- />
- </el-select>
- <p>{{ $t("createVideo.styles") }}</p>
- <!-- 风格 -->
- <el-select
- :disabled="soundStyleOptions ? false : true"
- v-model="soundStyle"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in soundStyleOptions"
- :key="item"
- :label="item"
- :value="item"
- />
- </el-select>
- <!-- 保存视频 -->
- <el-button
- @click="saveOrUpdate(1, 'saveVideo')"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.saveVideo")
- }}</span></el-button
- >
- <!-- 生成视频 -->
- <el-button
- style="margin-left: 0"
- @click="saveOrUpdate(1)"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.generateVideo")
- }}</span></el-button
- >
- </div>
- </el-tab-pane>
- <!-- ------------------------ 2 -->
- <el-tab-pane :label="$t('createVideo.uploadAudio')">
- <div class="card2">
- <!-- 上传音频 -->
- <p>
- <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
- {{ $t("createVideo.uploadAudio") }}
- </p>
- <div class="uploadVideo">
- +
- <input
- accept="audio/*"
- type="file"
- ref="fileInput"
- @click="e.target.value = null"
- @change="handleFileChange"
- />
- </div>
- <!-- 录制MP3上传语音 -->
- <p>
- <el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
- {{ $t("createVideo.recordedAudio") }}
- </p>
- <div class="uploadAudio">
- <div class="btnBox">
- <button
- class="pointer"
- :disabled="!isRecording"
- @click="startRecording"
- >
- {{ $t("createVideo.startRecorded") }}
- </button>
- <button
- class="pointer"
- @click="stopRecording"
- :disabled="isRecording"
- >
- {{ $t("createVideo.stopRecorded") }}
- </button>
- </div>
- </div>
- <div class="AudioBox" v-if="audioUrl">
- <audio controls :src="audioUrl" id="uploadAudio"></audio>
- </div>
- <!-- 保存视频 -->
- <el-button
- @click="saveOrUpdate(2, 'saveVideo')"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.saveVideo")
- }}</span></el-button
- >
- <!-- 生成视频 -->
- <el-button
- style="margin-left: 0"
- @click="saveOrUpdate(2)"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.generateVideo")
- }}</span>
- </el-button>
- </div>
- </el-tab-pane>
- <!-- ----------------------- 3 -->
- <el-tab-pane :label="$t('createVideo.music')">
- <div class="card3">
- <!-- 选择音乐 -->
- <p>
- <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
- {{ $t("createVideo.chooseMusic") }}
- </p>
- <!-- tab栏 -->
- <div class="musicTab">
- <div
- class="musicTabItem"
- :class="musicTabActive == 1 ? 'musicTabItemActive' : ''"
- @click="musicTabActive = 1"
- >
- {{ $t("createVideo.hotMusic") }}
- </div>
- <div
- v-if="AccessToken"
- class="musicTabItem"
- :class="musicTabActive == 2 ? 'musicTabItemActive' : ''"
- @click="musicTabActive = 2"
- >
- {{ $t("createVideo.personalWarehouse") }}
- </div>
- </div>
- <!-- 上传音乐 -->
- <div v-if="musicTabActive == 2" class="uploadVideo">
- +
- <input
- accept="audio/*"
- type="file"
- ref="fileMusicInput"
- @click="e.target.value = null"
- @change="uploadMusic"
- />
- </div>
- <!-- 系统音乐列表展示 -->
- <div v-if="musicTabActive == 1" class="musicList">
- <div
- @click="chooseMusicUrl(item.url, item.id)"
- class="musicItem"
- :class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
- v-for="item in musicListSystem"
- :key="item.id"
- >
- <span class="musicNmae"> 🎵{{ item.name }}</span>
- <span class="musicTime"> {{ handleTime(item.time) }}</span>
- </div>
- </div>
- <!-- 个人音乐列表展示 -->
- <div v-if="musicTabActive == 2" class="musicList">
- <div
- @click="chooseMusicUrl(item.url, item.id)"
- class="musicItem"
- :class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
- v-for="item in musicListPerson"
- :key="item.id"
- >
- <span class="musicNmae"> 🎵{{ item.name }}</span>
- <span class="musicTime"> {{ handleTime(item.time) }}</span>
- </div>
- </div>
- <!-- 系统分页 -->
- <div v-if="musicTabActive == 1" class="pagination">
- <el-pagination
- v-model:current-page="musicListPageNumSystem"
- v-model:page-size="musicListPageSize"
- :small="false"
- :disabled="false"
- :background="true"
- layout="total, prev, pager, next, jumper"
- :total="musicListTotalSystem"
- @current-change="musicListPageNumSystemChange"
- />
- </div>
- <!-- 个人分页 -->
- <div v-if="musicTabActive == 2" class="pagination">
- <el-pagination
- v-model:current-page="musicListPageNumPerson"
- v-model:page-size="musicListPageSize"
- :small="false"
- :disabled="false"
- :background="true"
- layout="total, prev, pager, next, jumper"
- :total="musicListTotalPerson"
- @current-change="musicListPageNumPersonChange"
- />
- </div>
- <div class="AudioBox" v-if="audioMusicUrl">
- <audio controls :src="audioMusicUrl" id="uploadAudio"></audio>
- </div>
- <!-- 保存视频 -->
- <el-button
- @click="saveOrUpdate(3, 'saveVideo')"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.saveVideo")
- }}</span></el-button
- >
- <!-- 生成视频 -->
- <el-button
- style="margin-left: 0"
- @click="saveOrUpdate(3)"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.generateVideo")
- }}</span>
- </el-button>
- </div>
- </el-tab-pane>
- <!-- ----------------------- 4 -->
- <el-tab-pane v-if="AccessToken" :label="$t('createVideo.aiScript')">
- <div class="card4">
- <div class="text">
- <!-- 文本域 -->
- <el-input
- maxlength="3000"
- id="textInputId"
- v-model="textareaContent"
- :rows="15"
- type="textarea"
- :placeholder="$t('createVideo.aiText')"
- />
- <span
- class="pointer"
- @click="getPreviewAudio"
- style="margin-right: 10px; font-size: 20px"
- >🔊</span
- >
- <span class="pointer" @click="insertIcon">🕗</span>
- </div>
- <p>{{ $t("createVideo.languages") }}</p>
- <!-- 语言 -->
- <el-select
- @change="chooseType"
- v-model="language"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in languageOptions"
- :key="item.value"
- :label="item.name"
- :value="item.id"
- >
- <img
- :src="item.img"
- alt=""
- style="
- width: 20px;
- margin-right: 10px;
- vertical-align: text-top;
- "
- />
- <span style="line-height: 20px">{{ item.name }}</span>
- </el-option>
- </el-select>
- <p>{{ $t("createVideo.voices") }}</p>
- <!-- 声音 -->
- <el-select
- @change="chooseStyle"
- :disabled="language ? false : true"
- v-model="sound"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in soundOptions"
- :key="item.value"
- :label="item.displayName"
- :value="item.id"
- />
- </el-select>
- <p>{{ $t("createVideo.styles") }}</p>
- <!-- 风格 -->
- <el-select
- :disabled="soundStyleOptions ? false : true"
- v-model="soundStyle"
- :placeholder="$t('createVideo.select')"
- style="width: 100%"
- >
- <el-option
- v-for="item in soundStyleOptions"
- :key="item"
- :label="item"
- :value="item"
- />
- </el-select>
- <!-- 保存视频 -->
- <el-button
- @click="saveOrUpdate(1, 'saveVideo')"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.saveVideo")
- }}</span></el-button
- >
- <!-- 生成视频 -->
- <el-button
- style="margin-left: 0"
- @click="saveOrUpdate(1)"
- color="#000"
- type="primary"
- >
- <my-loading :isLoading="createLoading"></my-loading>
- <span v-if="!createLoading">{{
- $t("createVideo.generateVideo")
- }}</span></el-button
- >
- </div>
- </el-tab-pane>
- <!-- -------------------------脚标 -->
- </el-tabs>
- </div>
- <!-- 试听的mp3 -->
- <div style="opacity: 0; width: 0">
- <audio autoplay :src="previewAudioUrl" id="audio"></audio>
- </div>
- </div>
- </template>
-
- <script setup>
- import { getCurrentInstance } from "vue";
- import {
- personPhotoList,
- personPhotoUserListList,
- awsImgUpload,
- delImgApi,
- videoUpload,
- saveImgApi,
- uploadProgressApi,
- saveAudioApi,
- voiceTotalApi,
- chooseTypeApi,
- saveOrUpdateApi,
- createVideoApi,
- previewAudioApi,
- findByIdApi,
- musicListSystemApi,
- musicListPersonApi,
- saveMusicApi,
- } from "@/apis/createVideo";
- import { useI18n } from "vue-i18n";
- import Recorder from "js-audio-recorder"; //mp3插件
- import imageCompression from "browser-image-compression"; //压缩图片插件
- import { useRoute, useRouter } from "vue-router";
- const route = useRoute();
- const router = useRouter();
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
-
- //#region 头像区的逻辑
- // 获取AI头像
- const AiFaceList = ref([]); //系统相册列表
- const userAiFaceList = ref([]); //个人相册列表
- const feceItemLoading = ref(false);
- const feceItemLoading2 = ref(false);
-
- function getAiFaceList(pageNum, pageSize, sendType) {
- feceItemLoading.value = true;
- personPhotoList(pageNum, pageSize, sendType)
- .then((res) => {
- AiFaceList.value = res.data.list;
- feceItemLoading.value = false;
- })
- .catch((err) => {
- feceItemLoading.value = false;
- console.log(err, "err");
- });
- }
- function getAiFaceUserList(pageNum, pageSize, sendType) {
- feceItemLoading2.value = true;
- personPhotoUserListList(pageNum, pageSize, sendType)
- .then((res) => {
- userAiFaceList.value = res.data.list;
- feceItemLoading2.value = false;
- })
- .catch((err) => {
- feceItemLoading2.value = false;
- console.log(err, "err");
- });
- }
- const pageNumSystem = ref(1);
- const overLoadSystem = ref(false); //禁用系统相册加载更多
- const pageNumUser = ref(1);
- const overLoadUser = ref(false); //禁用个人相册加载更多
- //系统相册触底加载更多
- function loadMoreAiFaceSystem() {
- pageNumSystem.value += 1;
- personPhotoList(pageNumSystem.value, 10, 1)
- .then((res) => {
- AiFaceList.value.push(...res.data.list);
- if (res.data.list.length == 0) {
- overLoadSystem.value = true;
- pageNumSystem.value = pageNumSystem.value - 1;
- }
- })
- .catch((err) => {
- console.log(err, "err");
- });
- }
- //个人相册触底加载更多
- function loadMoreAiFaceUser() {
- pageNumUser.value += 1;
- personPhotoUserListList(pageNumUser.value, 10, 3)
- .then((res) => {
- if (res.data.list.length == 0) {
- overLoadUser.value = true;
- pageNumUser.value = pageNumUser.value - 1;
- }
- userAiFaceList.value.push(...res.data.list);
- })
- .catch((err) => {
- console.log(err, "err");
- });
- }
- // 选择显示的face列表
- const showFace = ref("0");
- function ChangeShowFaceList(index) {
- showFace.value = index;
- }
- const faceItemActive = ref(); //高亮处理和当前选择图片的ID
- // 点击aifece
- function setImgUrl(url, id) {
- faceItemActive.value = id;
- imgUrl.value = url;
- showUploadBtn.value = 1;
- submitImgBtn.value = false;
- }
- // 删除个人相册照片
- async function deleteFaceImg(id) {
- const msg =
- lanChange.value == "zh-cn"
- ? `确定要删除这张图片吗? `
- : `Are you sure to delete this image ? `;
- 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 () => {
- try {
- const res = await delImgApi(id);
- imgUrl.value = null;
- faceItemActive.value = null;
- userAiFaceList.value = [];
- getAiFaceUserList(1, 10, 3);
- pageNumUser.value = 1;
- overLoadUser.value = false;
- } catch (error) {
- ElMessage.error(errpr);
- }
- });
- }
- //#endregion ------------------------------
-
- //#region 预览图片
- const compressionImgLoad = ref(false);
- async function lookImg(e) {
- if (e.target.files[0]) {
- faceItemActive.value = null;
- imgUrl.value = null;
- imgData.value = null;
- showUploadBtn.value = 3;
- submitImgBtn.value = false;
- compressionImgLoad.value = true;
- // 压缩配置
- const options = {
- maxSizeMB: 2, // 最大压缩大小为 1MB
- useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
- };
- const compressedFile = await imageCompression(e.target.files[0], options);
- imgUrl.value = URL.createObjectURL(compressedFile);
- imgData.value = compressedFile;
- showUploadBtn.value = 4;
- submitImgBtn.value = true;
- compressionImgLoad.value = false;
- await changeFile();
- } else {
- return;
- }
- }
- //#endregion ------------------
-
- // 标题
- const title =
- lanChange.value == "zh-cn" ? ref("未定义标题") : ref("Undefined Title");
-
- //#region 上传图片
- const imgUrl = ref(""); //图片回显路径
- const imgData = ref(""); // 上传图片文件
- const showUploadBtn = ref(1); //上传图片+号的显示隐藏
- const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
- // 点击系统仓库tab
- function chooSystemImg(params) {
- showFace.value = 0;
- showUploadBtn.value = 1;
- }
- // 上传图片
- async function changeFile() {
- compressionImgLoad.value = true;
- showUploadBtn.value = 3;
- imgUrl.value = URL.createObjectURL(imgData.value);
- let formData = new FormData();
- const timestamp = Date.now();
- formData.append("file", imgData.value, timestamp + ".png");
- try {
- // 上传图片
- const res = await awsImgUpload(formData);
- // 保存图片
- const res2 = await saveImgApi({ material: res.data.url });
- // 重新获取列表
- compressionImgLoad.value = false;
- showUploadBtn.value = 4;
- userAiFaceList.value = [];
- getAiFaceUserList(1, 10, 3);
- pageNumUser.value = 1;
- overLoadUser.value = false;
- if (res2.code == 200) {
- ElMessage.success(
- lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully`
- );
- } else {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `上传失败` : `Upload failure`
- );
- }
- faceItemActive.value = res2.data.id;
- imgUrl.value = res2.data.material;
- submitImgBtn.value = false;
- console.log(123654);
- showUploadBtn.value = 1;
- } catch (error) {
- ElMessage.error(error);
- }
- }
- // 点击个人仓库tab
- function chooseMyImg() {
- showFace.value = 1;
- showUploadBtn.value = 2;
- }
- // 点击AI头像区的+号
- function clickAddBtn() {
- faceItemActive.value = null;
- showUploadBtn.value = 2;
- }
- //#endregion ---------------------------
-
- //#region AI生成图片
- function chooseAiPic() {
- showFace.value = 2;
- // showUploadBtn.value = 5;
- }
- //#endregion --------------------------
-
- //#region card1的逻辑
- const textareaContent = ref("");
- function insertIcon() {
- const textarea = document.getElementById("textInputId");
- const icon = "🕗"; // 这里使用了一个星星作为示例图标,你可以替换为你自己的图标
-
- // 获取光标位置
- const startPos = textarea.selectionStart;
- const endPos = textarea.selectionEnd;
-
- console.log(startPos);
- console.log(endPos);
- // 在光标位置插入图标
- textareaContent.value =
- textareaContent.value.substring(0, startPos) +
- icon +
- textareaContent.value.substring(endPos, textareaContent.value.length);
-
- // 设置光标位置为插入图标后的位置
- const newCursorPos = startPos + icon.length;
- textarea.setSelectionRange(newCursorPos, newCursorPos);
- textarea.focus();
- }
- const language = ref(""); //选择的语言
- const sound = ref(""); // 选择的声音
- const soundStyle = ref(""); //选择的风格
- // 语言下拉框内容
- const languageOptions = ref([
- {
- id: "0",
- name: "中文",
- },
- {
- id: "1",
- name: "English",
- },
- ]);
- async function voiceTotal() {
- const res = await voiceTotalApi();
- languageOptions.value = res.data;
- }
- // 声音下拉框内容
- const soundOptions = ref([]);
- async function chooseType() {
- const res = await chooseTypeApi(language.value);
- soundOptions.value = res.data;
- sound.value = null;
- }
- // 风格下拉框内容
- const soundStyleOptions = ref(null);
- async function chooseStyle() {
- const item = soundOptions.value.find((element) => element.id == sound.value);
-
- soundStyle.value = null;
- soundStyleOptions.value = item.style;
- }
-
- // 试听
- const previewAudioUrl = ref(null);
- async function getPreviewAudio() {
- if (!textareaContent.value) {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `您还没有输入文案`
- : `You have not entered the copy yet`
- );
- return;
- }
- if (!sound.value) {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `您还没有选择声音`
- : `You have not selected the sound`
- );
- return;
- }
-
- try {
- const res = await previewAudioApi(
- textareaContent.value,
- sound.value,
- soundStyle.value
- );
- if (!res.data.data) {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `暂时无法试听,请稍后重试`
- : `Unable to listen, please try again later`
- );
- }
- previewAudioUrl.value = res.data.data;
- document.getElementById("audio").play();
- } catch (error) {
- ElMessage.error(error);
- }
- }
- //#endregion
-
- //#region 录制MP3上传语音
- const parameter = {
- sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
- sampleRate: 8000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
- numChannels: 1, // 声道,支持 1 或 2, 默认是1
- };
- const recorder = new Recorder(parameter);
- const isRecording = ref(true);
- const audioUrl = ref(null); // audio控件的url
- const audioData = ref("");
- const videoId = ref(null); //上传mp3的videoId,创建视频会用到
-
- const startRecording = async () => {
- try {
- await recorder.start();
- console.log("Recording started");
- isRecording.value = false;
- } catch (error) {
- console.error(error);
- }
- };
-
- const stopRecording = async () => {
- try {
- const recording = await recorder.stop();
- audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
- audioData.value = recorder.getWAVBlob();
- isRecording.value = true;
- console.log(document.getElementById("uploadAudio").duration);
- } catch (error) {
- console.error(error);
- }
- };
-
- const playRecording = () => {
- if (audioUrl.value) {
- const audio = new Audio(audioUrl.value);
- audio.play();
- }
- };
- // 上传音频
- async function uploadAudio(isSaveVideo) {
- createLoading.value = true;
- let formData = new FormData();
- const timestamp = Date.now();
- formData.append("file", audioData.value, timestamp + ".mp3");
- try {
- const res = await videoUpload(formData);
- videoId.value = res.data.videoId;
- if (res) {
- // ElMessage.success("上传成功!");
- } else {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `上传音频失败!` : `Failed to upload audio!`
- );
- return;
- }
- // 查询进度
- intervalId = setInterval(() => {
- uploadProgress(res.data.videoId, isSaveVideo);
- }, 1000);
- // ElMessage.success("上传成功!");
- } catch (error) {
- ElMessage.error(error);
- }
- }
- //#endregion ------------------------------------
-
- //#region 上传音频功能
- const fileInput = ref(null);
-
- let intervalId = null; // 用于存储 setInterval 的返回值
- const uploadAudioTime = ref(null); // 音频时长
- const handleFileChange = async () => {
- const file = fileInput.value.files[0];
-
- if (file) {
- const videoUrl = URL.createObjectURL(file);
- audioUrl.value = videoUrl;
- audioData.value = file;
- const audio2 = new Audio();
- audio2.src = videoUrl;
- countAudioTime(audio2);
- }
- };
- // 计算音频的时长
- const countAudioTime = async (audio) => {
- while (isNaN(audio.duration) || audio.duration === Infinity) {
- // 延迟一会 不然网页都卡死
- await new Promise((resolve) => setTimeout(resolve, 200));
- // 设置随机播放时间,模拟调进度条
- audio.currentTime = 10000000 * Math.random();
- }
- // console.log("音频的总时长:", Math.floor(audio.duration));
- uploadAudioTime.value = Math.floor(audio.duration);
- };
-
- // 获取视频上传进度
- const afterSaveAudioId = ref(null);
- async function uploadProgress(videoId, isSaveVideo) {
- const res = await uploadProgressApi(videoId);
- if (res.data == "complete") {
- clearInterval(intervalId);
- try {
- const res2 = await saveAudioApi({ videoId: videoId });
- afterSaveAudioId.value = res2.data.id; // 得到id
- } catch (error) {
- ElMessage.error(error);
- }
- // 定义参数
- const saveOrUpdateData = {
- id: id.value, //从草稿或者重新编辑回到创建视频时有id
- title: title.value,
- personPhotoId: faceItemActive.value, //任务照片id,
- voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传
- paperwork: textareaContent.value, //文案
- speakTypeStr: soundStyle.value, //声音风格
- voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传
- voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传
- };
- try {
- const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
- // 这个if判断是不是仅仅保存视频
- if (isSaveVideo == "saveVideo") {
- ElMessage.success(
- lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
- );
- createLoading.value = false;
- router.push("/myCreating");
- return;
- }
- const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频
- if (res4.message == "success") {
- ElMessage.success(
- lanChange.value == "zh-cn"
- ? `视频正在生成中,请耐心等待`
- : `The video is being generated, please wait patiently`
- );
- }
- createLoading.value = false;
- router.push("/myCreating");
- } catch (error) {
- ElMessage.error(error);
- createLoading.value = false;
- }
- }
- }
- //#endregion --------------------------------------
-
- //#region 生成视频
- // tab栏切换
- const tabFrom = ref(1);
- const createLoading = ref(false);
- // 上传音频后,得到videoId
- // 保存数据
- async function saveOrUpdate(index, isSaveVideo) {
- if (createLoading.value == true) {
- return;
- }
- tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮
- const saveOrUpdateData = {
- id: id.value, //从草稿或者重新编辑回到创建视频时有id
- title: title.value,
- personPhotoId: faceItemActive.value, //任务照片id,
- voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板,2:来自用户上传
- paperwork: textareaContent.value, //文案
- speakTypeStr: soundStyle.value, //声音风格
- voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传
- voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传
- musicId: musicItemAction.value, // 选中音乐的id,voiceFrom=3 时必传
- };
- if (index == 1) {
- createLoading.value = true;
- if (!saveOrUpdateData.personPhotoId) {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
- );
- createLoading.value = false;
- return;
- }
- if (!saveOrUpdateData.paperwork) {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy`
- );
- createLoading.value = false;
- return;
- }
- if (!saveOrUpdateData.voiceMouldId) {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound`
- );
- createLoading.value = false;
- return;
- }
- try {
- const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
- if (res2.code == 1002) {
- }
- // 这个if判断是不是仅仅保存视频
- if (isSaveVideo == "saveVideo") {
- ElMessage.success(
- lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
- );
- createLoading.value = false;
- router.push("/myCreating");
- return;
- }
- const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频
- if (res3.message == "success") {
- ElMessage.success(
- lanChange.value == "zh-cn"
- ? `视频正在生成中,请耐心等待`
- : `The video is being generated, please wait patiently`
- );
- }
- createLoading.value = false;
- router.push("/myCreating");
- } catch (error) {
- // ElMessage.error($t(error.message));
- ElMessage.error(error);
- createLoading.value = false;
- }
- }
- if (index == 2) {
- if (!saveOrUpdateData.personPhotoId) {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
- );
- createLoading.value = false;
- return;
- }
- if (!saveOrUpdateData.voiceMaterialId) {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `请选择音频文件`
- : `Please select an audio file`
- );
- createLoading.value = false;
- return;
- }
- try {
- const res1 = await uploadAudio(isSaveVideo); // 上传音频
- } catch (error) {
- ElMessage.error(error);
- createLoading.value = false;
- }
- }
- if (index == 3) {
- try {
- if (!saveOrUpdateData.personPhotoId) {
- ElMessage.error(
- lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
- );
- createLoading.value = false;
- return;
- }
- if (!saveOrUpdateData.musicId) {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `请选择音乐文件`
- : `Please select an music file`
- );
- createLoading.value = false;
- return;
- }
- const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
-
- // 这个if判断是不是仅仅保存视频
- if (isSaveVideo == "saveVideo") {
- ElMessage.success(
- lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
- );
- createLoading.value = false;
- router.push("/myCreating");
- return;
- }
- console.log("ceshi");
- const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频
- if (res2.message == "success") {
- ElMessage.success(
- lanChange.value == "zh-cn"
- ? `视频正在生成中,请耐心等待`
- : `The video is being generated, please wait patiently`
- );
- }
- createLoading.value = false;
- router.push("/myCreating");
- } catch (error) {
- ElMessage.error(error);
- createLoading.value = false;
- }
- }
- }
- //#endregion ----------------------------
-
- //#region 根据作品id查询作品信息并回显
- const id = ref(null); //作品的id
- async function findById(findId) {
- const res = await findByIdApi(findId);
- id.value = res.data.id;
- title.value = res.data.title; //标题回显
- faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id
- tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式
- textareaContent.value = res.data.paperwork; //文案内容
- afterSaveAudioId.value = res.data.voiceMaterialId; //保存音频后得到的id
- imgUrl.value = res.data.personPhotoUrl; //图片回显
- audioUrl.value = res.data.voiceMaterialUrl; // mp3回显
- musicItemAction.value = res.data.musicId; //音乐id回显
- language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null;
- if (language.value) {
- await chooseType(language.value);
- }
- sound.value = res.data.voiceMouldId; //声音id
- chooseStyle();
- soundStyle.value = res.data.speakTypeStr; //选择风格
- }
- //#endregion ----------------------------
-
- //#region 音乐tab
- const musicListSystem = ref(null); //展示音乐列表
- const musicListPerson = ref(null); //展示音乐列表
- const audioMusicUrl = ref(null); //选中音乐Url回显
- const musicItemAction = ref(null); //选中高亮
- const musicListPageNumSystem = ref(1); //系统音乐页数
- const musicListTotalSystem = ref(10); //系统音乐总条数
- const musicListPageNumPerson = ref(1); //个人音乐页数
- const musicListTotalPerson = ref(10); //个人音乐总条数
- const musicListPageSize = ref(8); //
- const musicTabActive = ref(1); //热门歌曲和个人仓库高亮
- const musicData = ref(null); //上传歌曲的数据
- const fileMusicInput = ref(null); // 上传组件的dom
- // 获取系统音乐列表
- async function getmusicListSystem(pageNum, pageSize) {
- try {
- const res = await musicListSystemApi(pageNum, pageSize);
- musicListSystem.value = res.data.list;
- musicListTotalSystem.value = Number(res.data.total);
- } catch (error) {
- console.log(error);
- }
- }
- // 获取个人音乐列表
- async function getmusicListPerson(pageNum, pageSize) {
- try {
- const res = await musicListPersonApi(pageNum, pageSize);
- musicListPerson.value = res.data.list;
- musicListTotalPerson.value = Number(res.data.total);
- } catch (error) {
- console.log(error);
- }
- }
- // 系统页数发生改变
- const musicListPageNumSystemChange = (val) => {
- musicListPageNumSystem.value = val;
- getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value);
- };
- // 个人页数发生改变
- const musicListPageNumPersonChange = (val) => {
- musicListPageNumPerson.value = val;
- getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value);
- };
- // 点击选择音乐
- function chooseMusicUrl(url, id) {
- audioMusicUrl.value = url;
- musicItemAction.value = id;
- }
- // 转化秒为分秒
- function handleTime(time) {
- let m = Math.floor(time / 60).toFixed(0);
- let s = (time % 60).toFixed(0);
- if (s < 10) {
- s = "0" + s;
- }
- return m + ":" + s;
- }
- // 选择文件上传音乐
- async function uploadMusic() {
- const file = fileMusicInput.value.files[0];
- if (file) {
- const videoUrl = URL.createObjectURL(file);
- musicData.value = file;
- let formData = new FormData();
- formData.append("file", musicData.value, file.name + ".mp3");
- try {
- const res = await videoUpload(formData);
- if (res) {
- // ElMessage.success("上传成功!");
- } else {
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `上传音频失败!`
- : `Failed to upload audio!`
- );
- return;
- }
- // 查询进度
- intervalId = setInterval(async () => {
- const res2 = await uploadProgressApi(res.data.videoId);
- if (res2.data == "complete") {
- clearInterval(intervalId);
- try {
- const res3 = await saveMusicApi({ voiceId: res.data.videoId });
- afterSaveAudioId.value = res2.data.id; // 得到id
- } catch (error) {
- ElMessage.error(error);
- }
- }
- }, 1000);
- musicListPageNumPerson.value = 1;
- const res4 = await musicListPersonApi(
- musicListPageNumPerson.value,
- musicListPageSize.value
- );
- musicListPerson.value = res4.data.list;
- musicListTotalPerson.value = Number(res4.data.total);
- ElMessage.success(
- lanChange.value == "zh-cn" ? `上传成功!` : `Upload successfully`
- );
- } catch (error) {
- ElMessage.error(error);
- }
- }
- }
- //#endregion ----------------------------
-
- //#region
-
- //#endregion ----------------------------
-
- //#region
-
- //#endregion ----------------------------
-
- // $t在script中的使用
- const {
- appContext: {
- config: { globalProperties },
- },
- } = getCurrentInstance();
-
- const string = "createVideo.typeScript";
- const t = globalProperties.$t(string);
-
- onMounted(async () => {
- getAiFaceList(1, 10, 1);
- if (AccessToken) {
- getAiFaceUserList(1, 10, 3);
- await getmusicListPerson(
- musicListPageNumPerson.value,
- musicListPageSize.value
- );
- }
- await voiceTotal();
- if (route.query.id) {
- await findById(route.query.id);
- }
- await getmusicListSystem(
- musicListPageNumSystem.value,
- musicListPageSize.value
- );
-
- musicListSystem.value.forEach((item) => {
- if (item.id == musicItemAction.value) {
- audioMusicUrl.value = item.url;
- }
- });
- musicListPerson.value.forEach((item) => {
- if (item.id == musicItemAction.value) {
- audioMusicUrl.value = item.url;
- }
- });
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- height: 1200px;
-
- // height: calc(100vh - 80px);
- // padding: 20px 0 0 40px;
- background-color: #fff;
- border-radius: 25px 0 0;
- }
-
- .left {
- width: 68%;
- height: 90%;
- padding: 20px;
- :deep(.el-input__wrapper) {
- border: none;
- border-bottom: 2px solid #000;
- border-radius: 0;
- box-shadow: none;
- }
-
- .el-icon.icon-edit {
- width: 35px;
- height: 35px;
- font-size: 35px;
- color: #8c939d;
- text-align: center;
- }
-
- &-top {
- position: relative;
- width: 100%;
- // height: 65%;
- // height: 580px;
- height: 65%;
-
- .uploadBtn {
- position: relative;
- padding: 10px 15px;
- margin-left: 10px;
- border-radius: 5px;
- transition: all 0.3s;
- background-color: #000;
- color: #fff;
- &:hover {
- background-color: #15d1b8;
- }
- }
-
- .bigImg {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 80%;
- height: 88%;
- margin-top: 20px;
-
- img {
- max-width: 100%;
- max-height: 100%;
- border-radius: 15px;
- }
- }
-
- .noImg {
- position: relative;
- width: 100%;
- height: 100%;
- border: 1px solid #ccc;
- border-radius: 30px;
- .imgBox {
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- overflow: hidden;
- border: 1px solid #ccc;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-width: 120%;
- }
- }
- .trueImg {
- position: relative;
- top: 60px;
- width: 100px;
- height: 100px;
- border-radius: 50%;
- .icon {
- position: absolute;
- top: 0%;
- right: -5%;
- border: 2px solid #00ff95;
- color: #00ff95;
- }
- }
- .el-upload {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- .upload {
- top: 200px;
- width: 100px;
- height: 100px;
- font-size: 50px;
- line-height: 100px;
- text-align: center;
- background-color: #ccc;
- border-radius: 50%;
- }
-
- .falseImg {
- top: 350px;
- // background-color: #795562;
- display: flex;
- justify-content: space-evenly;
- width: 700px;
- height: 100px;
-
- > div {
- position: relative;
- width: 100px;
- height: 100px;
- background-color: #ccc;
- border-radius: 50%;
- .icon {
- position: absolute;
- top: 0%;
- right: -5%;
- border: 2px solid red;
- color: red;
- }
- }
- }
- }
-
- // 公共类名
- input {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- cursor: pointer;
- }
-
- .icon {
- position: absolute;
- right: 2px;
- width: 30px;
- height: 30px;
- font-size: 20px;
- font-weight: 700;
- line-height: 26px;
- text-align: center;
- border: 2px solid #000;
- border-radius: 50%;
- }
-
- .editAiPicBox {
- position: relative;
- display: flex;
- width: 100%;
- height: 100%;
- border: 1px solid #ccc;
- background-color: #f1f2f6;
- border-radius: 30px;
- overflow: hidden;
- .edit {
- width: 50%;
- height: 100%;
-
- background-color: #fff;
- .TagBox {
- width: 100%;
- height: 100%;
-
- border-radius: 0 0 30px 0;
- background-color: #f1f2f6;
- }
- }
- .AIpicBox {
- position: relative;
- width: 50%;
- height: 100%;
- border-radius: 30px 0 0 0;
- background-color: #fff;
- .picBox {
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 30px 0 0 0;
- background-color: #fff;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
- max-width: 100%;
- max-height: 100%;
- border-radius: 30px;
- }
- }
- }
- }
- }
-
- &-bottom {
- width: 100%;
- height: 32%;
- margin-top: 10px;
- .tab {
- padding: 10px;
- > div {
- margin-right: 20px;
- padding: 10px 15px;
- transition: all 0.3s;
- border-radius: 5px;
- &:hover {
- background-color: #000;
- color: #fff;
- }
- }
- .tabAvtive {
- background-color: #000;
- color: #fff;
- }
- }
- .ai {
- width: 100%;
- }
-
- .faceList {
- padding: 8px;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- width: 100%;
- height: 180px;
- overflow-y: scroll;
- .faceItem {
- position: relative;
- margin-right: 30px;
- margin-bottom: 35px;
- width: 150px;
- height: 150px;
- // padding: 0 25px;
- line-height: 150px;
- text-align: center;
- border-radius: 50%;
- background-color: #fbf8f8;
- // border: 2px solid #fff;
- box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
- // overflow: hidden;
- transition: all 0.3s;
- .imgBox {
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 3;
- width: 150px;
- height: 150px;
- border-radius: 50%;
- background-color: #fbf8f8;
- overflow: hidden;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- }
- }
- .deleteIcon {
- position: absolute;
- top: 0;
- right: 15px;
- z-index: 999;
- width: 25px;
- height: 25px;
- border: 2px solid #6d76ef;
- border-radius: 50%;
- color: #6d76ef;
- font-size: 20px;
- line-height: 23px;
- cursor: pointer;
- }
- .uploadImg {
- line-height: 145px;
- font-size: 50px;
- font-weight: 700;
- text-align: center;
- }
- }
- .faceItemActive {
- position: relative;
- transition: all 0.3s;
- &::before {
- content: "";
- position: absolute;
- // top: -3px;
- // right: -7px;
- // left: -3px;
- // bottom: -7px;
- top: -3px;
- right: -3px;
- left: -3px;
- bottom: -3px;
- z-index: 2;
- border-radius: 50%;
- background: linear-gradient(
- 225deg,
- rgb(81 217 202 / 100%),
- rgb(114 100 245 / 100%)
- );
- }
- }
- }
- .Aipicture {
- width: 100%;
- height: 180px;
- .title {
- font-size: 30px;
- text-align: center;
- line-height: 80px;
- 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;
- .el-icon {
- vertical-align: text-top;
- font-size: 32px;
- }
- }
- }
- .aiPicTab {
- position: relative;
- z-index: 2;
- .subscript {
- position: absolute;
- top: -20px;
- right: -20px;
- width: 40px;
- height: 40px;
- z-index: 1;
- img {
- position: absolute;
- top: 0;
- left: 0px;
- width: 100%;
- height: 100%;
- z-index: 3;
- }
- span {
- position: absolute;
- line-height: 45px;
- z-index: 4;
- padding-left: 0px;
- padding-bottom: 5px;
- font-size: 16px;
- color: #17ceb9;
- font-weight: 900;
- transform: rotate(45deg);
- }
- }
- .subscript1 {
- position: absolute;
- top: -20px;
- right: -20px;
- width: 40px;
- height: 40px;
- z-index: 1;
- img {
- position: absolute;
- top: 0;
- left: 0px;
- width: 100%;
- height: 100%;
- z-index: 3;
- }
- span {
- position: absolute;
- line-height: 45px;
- z-index: 4;
- padding-left: 6px;
- padding-bottom: 5px;
- font-size: 16px;
- color: #17ceb9;
- font-weight: 900;
- transform: rotate(45deg);
- }
- }
- }
- }
- }
-
- .right {
- width: 32%;
- min-height: 100%;
- padding: 30px 30px 20px 30px;
- background-color: #f1f2f6;
- border-radius: 30px 0 0 0;
- position: relative;
- z-index: 2;
-
- .subscript {
- position: absolute;
- top: 30px;
- right: 45px;
- width: 40px;
- height: 40px;
- z-index: 3;
- img {
- position: absolute;
- top: 0;
- left: 0px;
- width: 100%;
- height: 100%;
- z-index: 3;
- }
- span {
- position: absolute;
- line-height: 45px;
- z-index: 4;
- padding-left: 0px;
- padding-bottom: 5px;
- font-size: 16px;
- color: #17ceb9;
- font-weight: 900;
- transform: rotate(45deg);
- }
- }
- :deep(.el-tabs--border-card) {
- font-size: 20px;
- border: none;
- }
-
- .tabs {
- min-height: 100%;
- padding: 20px 20px 0px 20px;
- border-radius: 20px;
- overflow-y: scroll;
- .card1 {
- .text {
- padding: 10px;
- border: 1px solid #c0c4cc;
- .el-button {
- float: right;
- margin-top: 10px;
- }
-
- :deep(.el-textarea__inner) {
- resize: none;
- box-shadow: none;
- }
- }
-
- p {
- margin: 7px 0;
- }
-
- > .el-button {
- width: 100%;
- height: 50px;
- margin-top: 10px;
- }
-
- :deep(.el-input .is-focus) {
- // box-shadow: none !important;
- // box-shadow: 0 0 0 1px #000 !important;
- }
- }
- .card2 {
- padding: 10px;
- .el-icon {
- // color: red;
- vertical-align: text-top;
- }
- > div {
- position: relative;
- margin-top: 10px;
- width: 100%;
- border: #000 1px solid;
- border-radius: 10px;
- overflow: hidden;
- transition: all 0.3s;
- box-shadow: #00000026 2px 2px 2px 2px;
- &:hover {
- transform: translateY(-10px);
- }
- }
- .uploadAudio {
- padding: 20px;
- // margin-top: 30px;
- margin-bottom: 20px;
- height: 70px;
- .btnBox {
- display: flex;
- justify-content: space-between;
- // justify-content: flex-end;
- margin-bottom: 10px;
- }
- audio {
- height: 50px;
- width: 100%;
- }
- button {
- border-radius: 10px;
- height: 30px;
- line-height: 22px;
- padding: 5px 10px;
- background-color: #fff;
- transition: all 0.3s;
- &:hover {
- background-color: #000;
-
- color: #fff;
- }
- }
- }
- .uploadAudioAvtion {
- height: 170px;
- }
- .uploadVideo {
- text-align: center;
- margin-bottom: 20px;
- height: 100px;
- font-size: 50px;
- font-weight: 700;
- line-height: 100px;
- input {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- video {
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- width: 100%;
- height: 100%;
- }
- }
- .AudioBox {
- display: flex;
- justify-content: space-around;
- padding: 20px;
- transition: all 0.3s;
- }
- > .el-button {
- width: 100%;
- height: 50px;
- margin-top: 10px;
- // background-color: #000;
- }
- }
- .card3 {
- width: 100%;
- padding: 10px;
- .el-icon {
- vertical-align: text-top;
- }
- .musicTab {
- display: flex;
- width: 100%;
- height: 50px;
- line-height: 50px;
- text-align: center;
- .musicTabItem {
- background-color: #f5f7fa;
- width: 50%;
- cursor: pointer;
- }
- .musicTabItemActive {
- background-color: #000;
- color: #fff;
- }
- }
- .uploadVideo {
- position: relative;
- margin-top: 10px;
- width: 100%;
- border: #000 1px solid;
- border-radius: 10px;
- overflow: hidden;
- transition: all 0.3s;
- box-shadow: #00000026 2px 2px 2px 2px;
- &:hover {
- transform: translateY(-10px);
- }
- text-align: center;
- margin-bottom: 20px;
- height: 100px;
- font-size: 50px;
- font-weight: 700;
- line-height: 100px;
- input {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- }
- .musicList {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- .musicItem {
- width: 100%;
- height: 30px;
- position: relative;
- margin-top: 10px;
- padding: 0 20px;
- border: #000 1px solid;
- border-radius: 10px;
- overflow: hidden;
- transition: all 0.3s;
- box-shadow: #00000026 2px 2px 2px 2px;
- transition: all 0.3s;
- cursor: pointer;
- .musicNmae {
- display: inline-block;
- width: 280px;
- margin-right: 20px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .musicTime {
- display: inline-block;
- max-width: 300px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- .musicItemAvtive {
- background-color: #000;
- color: #fff;
- }
- }
- .pagination {
- // position: fixed;
- // bottom: 20px;
- // left: 50%;
- // transform: translateX(-50%);
- margin-top: 10px;
- background-color: #ffffff;
- padding: 10px 20px;
- border-radius: 8px;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- background-color: #b8b8b873;
- }
- }
- .AudioBox {
- display: flex;
- justify-content: space-around;
- width: 100%;
- padding: 20px;
- transition: all 0.3s;
- audio {
- width: 100%;
- }
- }
- > .el-button {
- width: 100%;
- height: 50px;
- margin-top: 10px;
- // background-color: #000;
- }
- :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;
- }
- }
- }
- .card4 {
- .text {
- padding: 10px;
- border: 1px solid #000;
- .el-button {
- float: right;
- margin-top: 10px;
- }
-
- :deep(.el-textarea__inner) {
- resize: none;
- box-shadow: none;
- }
- }
-
- p {
- margin: 7px 0;
- }
-
- > .el-button {
- width: 100%;
- height: 50px;
- margin-top: 10px;
- }
-
- :deep(.el-input .is-focus) {
- // box-shadow: none !important;
- // box-shadow: 0 0 0 1px #000 !important;
- }
- }
- :deep(.el-tabs__item.is-active) {
- color: #909393;
- background-color: #000;
- }
-
- :deep(.el-tabs__nav) {
- width: 100%;
- }
-
- :deep(.el-tabs__item) {
- width: 26%;
- }
-
- :deep(.el-tabs__item:hover) {
- color: #909393;
- }
-
- :deep(.el-tabs__content) {
- height: calc(100% - 60px);
- padding: 0;
- }
- }
- }
- </style>
|