| @@ -58,7 +58,7 @@ export default { | |||||
| reselect: "reselect", | reselect: "reselect", | ||||
| sureUpload: "Confirm upload", | sureUpload: "Confirm upload", | ||||
| generateVideo: "Generate Video", | generateVideo: "Generate Video", | ||||
| saveVideo:'save video', | |||||
| saveVideo:'save manuscript', | |||||
| select:'Please select', | select:'Please select', | ||||
| }, | }, | ||||
| @@ -75,11 +75,11 @@ export default { | |||||
| loading: "Loading , just a moment", | loading: "Loading , just a moment", | ||||
| noList: "Nothing here. How about making one ?", | noList: "Nothing here. How about making one ?", | ||||
| goCreate: "Go Create !", | goCreate: "Go Create !", | ||||
| draft: "Draft", | |||||
| manuscript: "manuscript", | |||||
| generating: "Generating", | generating: "Generating", | ||||
| generationFailed: "Failed", | generationFailed: "Failed", | ||||
| generationSucceed: "Succeed", | generationSucceed: "Succeed", | ||||
| draftText: "Draft", | |||||
| manuscriptText: "manuscript", | |||||
| generatingText: "The video is generating, please wait a moment", | generatingText: "The video is generating, please wait a moment", | ||||
| generationFailedText: "The video generate is failed, Reason:", | generationFailedText: "The video generate is failed, Reason:", | ||||
| edit:'edit' | edit:'edit' | ||||
| @@ -101,7 +101,8 @@ export default { | |||||
| successed: "Successed", | successed: "Successed", | ||||
| failed: "Failed", | failed: "Failed", | ||||
| msg1: "Obtain one video production time", | msg1: "Obtain one video production time", | ||||
| inputCode:'Please enter the invitation code', | |||||
| submit:'submit' | |||||
| }, | }, | ||||
| // 商店 | // 商店 | ||||
| @@ -58,7 +58,7 @@ export default { | |||||
| reselect: "重新选择", | reselect: "重新选择", | ||||
| sureUpload: "确认上传", | sureUpload: "确认上传", | ||||
| generateVideo: "生成视频", | generateVideo: "生成视频", | ||||
| saveVideo:'保存视频', | |||||
| saveVideo:'保存草稿', | |||||
| select:'请选择', | select:'请选择', | ||||
| }, | }, | ||||
| @@ -75,11 +75,11 @@ export default { | |||||
| loading: "加载中,请稍等哦", | loading: "加载中,请稍等哦", | ||||
| noList: "暂无没有作品哦,快去尝试制作你的第一个视频吧!", | noList: "暂无没有作品哦,快去尝试制作你的第一个视频吧!", | ||||
| goCreate: "去创作", | goCreate: "去创作", | ||||
| draft: "草稿", | |||||
| manuscript: "草稿", | |||||
| generating: "生成中", | generating: "生成中", | ||||
| generationFailed: "生成失败", | generationFailed: "生成失败", | ||||
| generationSucceed: "生成成功", | generationSucceed: "生成成功", | ||||
| draftText: "草稿", | |||||
| manuscriptText: "草稿", | |||||
| generatingText: "视频正在生成中,请稍等哦", | generatingText: "视频正在生成中,请稍等哦", | ||||
| generationFailedText: "视频生成失败。原因:", | generationFailedText: "视频生成失败。原因:", | ||||
| edit:'编辑' | edit:'编辑' | ||||
| @@ -101,7 +101,8 @@ export default { | |||||
| successed: "支付成功", | successed: "支付成功", | ||||
| failed: "支付失败", | failed: "支付失败", | ||||
| msg1: "获得视频制作次数一次", | msg1: "获得视频制作次数一次", | ||||
| inputCode:'请输入邀请码', | |||||
| submit:'提交' | |||||
| }, | }, | ||||
| // 商店 | // 商店 | ||||
| @@ -5,7 +5,7 @@ ElMessage | |||||
| // 开发环境需以 "/api" 拼接,其他环境需以 "/C" 拼接 | // 开发环境需以 "/api" 拼接,其他环境需以 "/C" 拼接 | ||||
| const env = process.env.NODE_ENV == 'development' ? "/api" : "/C" | const env = process.env.NODE_ENV == 'development' ? "/api" : "/C" | ||||
| console.log(process.env.NODE_ENV, 'env') | |||||
| // console.log(process.env.NODE_ENV, 'env') | |||||
| /** | /** | ||||
| * @description:发送Axios请求 | * @description:发送Axios请求 | ||||
| @@ -690,7 +690,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
| const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | ||||
| if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
| ElMessage.success( | ElMessage.success( | ||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||||
| ); | ); | ||||
| createLoading.value = false; | createLoading.value = false; | ||||
| return; | return; | ||||
| @@ -737,7 +737,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
| const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | ||||
| if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
| ElMessage.success( | ElMessage.success( | ||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||||
| ); | ); | ||||
| createLoading.value = false; | createLoading.value = false; | ||||
| return; | return; | ||||
| @@ -213,6 +213,7 @@ | |||||
| <div class="text"> | <div class="text"> | ||||
| <!-- 文本域 --> | <!-- 文本域 --> | ||||
| <el-input | <el-input | ||||
| maxlength="300" | |||||
| id="textInputId" | id="textInputId" | ||||
| v-model="textareaContent" | v-model="textareaContent" | ||||
| :rows="15" | :rows="15" | ||||
| @@ -284,23 +285,27 @@ | |||||
| :value="item" | :value="item" | ||||
| /> | /> | ||||
| </el-select> | </el-select> | ||||
| <!-- 生成视频 --> | |||||
| <el-button @click="saveOrUpdate(1)" color="#000" type="primary"> | |||||
| <!-- 保存视频 --> | |||||
| <el-button | |||||
| @click="saveOrUpdate(1, 'saveVideo')" | |||||
| color="#000" | |||||
| type="primary" | |||||
| > | |||||
| <my-loading :isLoading="createLoading"></my-loading> | <my-loading :isLoading="createLoading"></my-loading> | ||||
| <span v-if="!createLoading">{{ | <span v-if="!createLoading">{{ | ||||
| $t("createVideo.generateVideo") | |||||
| $t("createVideo.saveVideo") | |||||
| }}</span></el-button | }}</span></el-button | ||||
| > | > | ||||
| <!-- 保存视频 --> | |||||
| <!-- 生成视频 --> | |||||
| <el-button | <el-button | ||||
| @click="saveOrUpdate(1, 'saveVideo')" | |||||
| style="margin-left: 0" | |||||
| @click="saveOrUpdate(1)" | |||||
| color="#000" | color="#000" | ||||
| type="primary" | type="primary" | ||||
| style="margin-left: 0" | |||||
| > | > | ||||
| <my-loading :isLoading="createLoading"></my-loading> | <my-loading :isLoading="createLoading"></my-loading> | ||||
| <span v-if="!createLoading">{{ | <span v-if="!createLoading">{{ | ||||
| $t("createVideo.saveVideo") | |||||
| $t("createVideo.generateVideo") | |||||
| }}</span></el-button | }}</span></el-button | ||||
| > | > | ||||
| </div> | </div> | ||||
| @@ -322,23 +327,13 @@ | |||||
| @click="e.target.value = null" | @click="e.target.value = null" | ||||
| @change="handleFileChange" | @change="handleFileChange" | ||||
| /> | /> | ||||
| <!-- <video | |||||
| style="position: absolute; top: 0" | |||||
| v-if="videoSrc" | |||||
| :src="videoSrc" | |||||
| ref="videoPlayer" | |||||
| controls | |||||
| ></video> --> | |||||
| </div> | </div> | ||||
| <!-- 录制MP3上传语音 --> | <!-- 录制MP3上传语音 --> | ||||
| <p> | <p> | ||||
| <el-icon class="icon-Mic"><i-ep-Mic /></el-icon> | <el-icon class="icon-Mic"><i-ep-Mic /></el-icon> | ||||
| {{ $t("createVideo.recordedAudio") }} | {{ $t("createVideo.recordedAudio") }} | ||||
| </p> | </p> | ||||
| <div | |||||
| class="uploadAudio" | |||||
| :class="audioUrl ? 'uploadAudioAvtion' : ''" | |||||
| > | |||||
| <div class="uploadAudio"> | |||||
| <div class="btnBox"> | <div class="btnBox"> | ||||
| <button | <button | ||||
| class="pointer" | class="pointer" | ||||
| @@ -355,31 +350,33 @@ | |||||
| {{ $t("createVideo.stopRecorded") }} | {{ $t("createVideo.stopRecorded") }} | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| <!-- <button @click="playRecording">播放录音</button> --> | |||||
| <audio v-if="audioUrl" controls :src="audioUrl"></audio> | |||||
| <!-- <button v-if="audioUrl" @click="uploadAudio" class="pointer"> | |||||
| 上传音频 | |||||
| </button> --> | |||||
| </div> | </div> | ||||
| <!-- 生成视频 --> | |||||
| <el-button @click="saveOrUpdate(2)" color="#000" type="primary"> | |||||
| <my-loading :isLoading="createLoading"></my-loading> | |||||
| <span v-if="!createLoading">{{ | |||||
| $t("createVideo.generateVideo") | |||||
| }}</span> | |||||
| </el-button> | |||||
| <div class="AudioBox" v-if="audioUrl"> | |||||
| <audio controls :src="audioUrl"></audio> | |||||
| </div> | |||||
| <!-- 保存视频 --> | <!-- 保存视频 --> | ||||
| <el-button | <el-button | ||||
| @click="saveOrUpdate(2, 'saveVideo')" | @click="saveOrUpdate(2, 'saveVideo')" | ||||
| color="#000" | color="#000" | ||||
| type="primary" | type="primary" | ||||
| style="margin-left: 0" | |||||
| > | > | ||||
| <my-loading :isLoading="createLoading"></my-loading> | <my-loading :isLoading="createLoading"></my-loading> | ||||
| <span v-if="!createLoading">{{ | <span v-if="!createLoading">{{ | ||||
| $t("createVideo.saveVideo") | $t("createVideo.saveVideo") | ||||
| }}</span></el-button | }}</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> | </div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| <!-- ----------------------- 3 --> | <!-- ----------------------- 3 --> | ||||
| @@ -870,7 +867,7 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
| // 这个if判断是不是仅仅保存视频 | // 这个if判断是不是仅仅保存视频 | ||||
| if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
| ElMessage.success( | ElMessage.success( | ||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||||
| ); | ); | ||||
| createLoading.value = false; | createLoading.value = false; | ||||
| router.push("/myCreating"); | router.push("/myCreating"); | ||||
| @@ -922,7 +919,7 @@ async function saveOrUpdate(index, isSaveVideo) { | |||||
| // 这个if判断是不是仅仅保存视频 | // 这个if判断是不是仅仅保存视频 | ||||
| if (isSaveVideo == "saveVideo") { | if (isSaveVideo == "saveVideo") { | ||||
| ElMessage.success( | ElMessage.success( | ||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` | |||||
| lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript` | |||||
| ); | ); | ||||
| createLoading.value = false; | createLoading.value = false; | ||||
| router.push("/myCreating"); | router.push("/myCreating"); | ||||
| @@ -1004,7 +1001,7 @@ onMounted(async () => { | |||||
| .page { | .page { | ||||
| // height: 1200px; | // height: 1200px; | ||||
| height: calc(100vh - 80px); | height: calc(100vh - 80px); | ||||
| 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; | ||||
| } | } | ||||
| @@ -1012,7 +1009,7 @@ onMounted(async () => { | |||||
| .left { | .left { | ||||
| width: 70%; | width: 70%; | ||||
| height: 80%; | height: 80%; | ||||
| padding: 20px; | |||||
| :deep(.el-input__wrapper) { | :deep(.el-input__wrapper) { | ||||
| border: none; | border: none; | ||||
| border-bottom: 2px solid #000; | border-bottom: 2px solid #000; | ||||
| @@ -1057,6 +1054,7 @@ onMounted(async () => { | |||||
| img { | img { | ||||
| max-width: 100%; | max-width: 100%; | ||||
| max-height: 100%; | max-height: 100%; | ||||
| border-radius: 15px; | |||||
| } | } | ||||
| } | } | ||||
| @@ -1064,7 +1062,8 @@ onMounted(async () => { | |||||
| position: relative; | position: relative; | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| border: 1px solid #000; | |||||
| border: 1px solid #ccc; | |||||
| border-radius: 30px; | |||||
| .imgBox { | .imgBox { | ||||
| position: relative; | position: relative; | ||||
| width: 100%; | width: 100%; | ||||
| @@ -1281,10 +1280,11 @@ onMounted(async () => { | |||||
| } | } | ||||
| .right { | .right { | ||||
| width: 25%; | |||||
| width: 30%; | |||||
| height: 100%; | height: 100%; | ||||
| background-color: green; | |||||
| padding: 30px 30px 20px 30px; | |||||
| background-color: #f1f2f6; | |||||
| border-radius: 30px 0 0 0; | |||||
| :deep(.el-tabs--border-card) { | :deep(.el-tabs--border-card) { | ||||
| font-size: 20px; | font-size: 20px; | ||||
| border: none; | border: none; | ||||
| @@ -1292,6 +1292,8 @@ onMounted(async () => { | |||||
| .tabs { | .tabs { | ||||
| height: 100%; | height: 100%; | ||||
| padding: 20px 20px 0px 20px; | |||||
| border-radius: 20px; | |||||
| .card1 { | .card1 { | ||||
| .text { | .text { | ||||
| padding: 10px; | padding: 10px; | ||||
| @@ -1308,7 +1310,7 @@ onMounted(async () => { | |||||
| } | } | ||||
| p { | p { | ||||
| margin: 10px 0; | |||||
| margin: 7px 0; | |||||
| } | } | ||||
| > .el-button { | > .el-button { | ||||
| @@ -1397,6 +1399,12 @@ onMounted(async () => { | |||||
| height: 100%; | height: 100%; | ||||
| } | } | ||||
| } | } | ||||
| .AudioBox { | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| padding: 20px; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| > .el-button { | > .el-button { | ||||
| width: 100%; | width: 100%; | ||||
| height: 50px; | height: 50px; | ||||
| @@ -19,10 +19,10 @@ | |||||
| </div> | </div> | ||||
| <!-- 剩余次数 --> | <!-- 剩余次数 --> | ||||
| <div class="left-two border"> | <div class="left-two border"> | ||||
| <div v-if="currentLan == 'en'" class="number"> | |||||
| <div v-if="lanChange == 'en'" class="number"> | |||||
| 3 Videos Generation Left | 3 Videos Generation Left | ||||
| </div> | </div> | ||||
| <div v-if="currentLan == 'zh-cn'" class="number"> | |||||
| <div v-if="lanChange == 'zh-cn'" class="number"> | |||||
| 剩余生成视频次数:3条 | 剩余生成视频次数:3条 | ||||
| </div> | </div> | ||||
| <div class="time">{{ $t("account.until") }} 2023/12/31</div> | <div class="time">{{ $t("account.until") }} 2023/12/31</div> | ||||
| @@ -30,7 +30,7 @@ | |||||
| {{ $t("account.getMore") }} | {{ $t("account.getMore") }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 邀请码 --> | |||||
| <!-- 我的邀请码 --> | |||||
| <div class="left-three border flex justify-between"> | <div class="left-three border flex justify-between"> | ||||
| <div class="codeImg"> | <div class="codeImg"> | ||||
| <img | <img | ||||
| @@ -40,18 +40,22 @@ | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <div class="other"> | <div class="other"> | ||||
| <div v-if="currentLan == 'en'"> | |||||
| <div v-if="lanChange == 'en'"> | |||||
| <span>Invite friends to get</span> | <span>Invite friends to get</span> | ||||
| <span class="bigWord">free</span> | <span class="bigWord">free</span> | ||||
| <span>video</span> | <span>video</span> | ||||
| <span class="bigWord">Generation!</span> | <span class="bigWord">Generation!</span> | ||||
| <p class="myInviteCode"> | |||||
| your Invitation code: | |||||
| <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span> | |||||
| </p> | |||||
| </div> | </div> | ||||
| <div v-if="currentLan == 'zh-cn'"> | |||||
| <div v-if="lanChange == 'zh-cn'"> | |||||
| <span>邀请更多好友</span> | <span>邀请更多好友</span> | ||||
| <span class="bigWord">免费</span> | <span class="bigWord">免费</span> | ||||
| <span>生成视频!</span> | <span>生成视频!</span> | ||||
| <p> | |||||
| <p class="myInviteCode"> | |||||
| 邀请码: | 邀请码: | ||||
| <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span> | <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span> | ||||
| </p> | </p> | ||||
| @@ -67,6 +71,15 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 输入邀请码 --> | |||||
| <div class="left-four border"> | |||||
| <el-input | |||||
| class="w-50 m-2" | |||||
| v-model="inputCode" | |||||
| :placeholder="$t('account.inputCode')" | |||||
| /> | |||||
| <span class="submitCodeBtn">{{ $t("account.submit") }}</span> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <!-- 右侧内容 --> | <!-- 右侧内容 --> | ||||
| <div class="right"> | <div class="right"> | ||||
| @@ -115,9 +128,9 @@ import { useRouter } from "vue-router"; | |||||
| import { userInfoPinia } from "@/store/modules/userInfo"; | import { userInfoPinia } from "@/store/modules/userInfo"; | ||||
| const { locale } = useI18n(); | const { locale } = useI18n(); | ||||
| const currentLan = ref(locale); | |||||
| const lanChange = ref(locale); //国际化 | |||||
| const userInfo = userInfoPinia(); | |||||
| const userInfo = userInfoPinia(); //pinia | |||||
| //#region 二维码区域 | //#region 二维码区域 | ||||
| // 点击复制邀请码 | // 点击复制邀请码 | ||||
| function copyInviteCode() { | function copyInviteCode() { | ||||
| @@ -140,7 +153,14 @@ function DownloadCodeImg() { | |||||
| link.click(); | link.click(); | ||||
| } | } | ||||
| //#endregion | //#endregion | ||||
| const inputCode = ref(""); | |||||
| //#region 输入邀请码区 | |||||
| //#endregion --------------------------- | |||||
| //#region | |||||
| //#endregion --------------------------- | |||||
| const router = useRouter(); | const router = useRouter(); | ||||
| function routerTo(url) { | function routerTo(url) { | ||||
| router.push(url); | router.push(url); | ||||
| @@ -149,7 +169,7 @@ function routerTo(url) { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| height: 1200px; | |||||
| height: calc(100vh - 80px); | |||||
| padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
| // height: calc(100vh - 84px); | // height: calc(100vh - 84px); | ||||
| background-color: #fff; | background-color: #fff; | ||||
| @@ -157,7 +177,7 @@ function routerTo(url) { | |||||
| } | } | ||||
| .left { | .left { | ||||
| width: 35%; | |||||
| width: 37%; | |||||
| height: 100%; | height: 100%; | ||||
| margin-right: 2%; | margin-right: 2%; | ||||
| @@ -188,10 +208,16 @@ function routerTo(url) { | |||||
| .password { | .password { | ||||
| display: inline-block; | display: inline-block; | ||||
| // float: right; | |||||
| float: right; | |||||
| padding: 2px 8px; | padding: 2px 8px; | ||||
| border: 1px solid #000; | border: 1px solid #000; | ||||
| border-radius: 5px; | border-radius: 5px; | ||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #000; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -223,6 +249,7 @@ function routerTo(url) { | |||||
| } | } | ||||
| &-three { | &-three { | ||||
| height: 200px; | |||||
| .codeImg { | .codeImg { | ||||
| position: relative; | position: relative; | ||||
| width: 120px; | width: 120px; | ||||
| @@ -249,17 +276,54 @@ function routerTo(url) { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-evenly; | justify-content: space-evenly; | ||||
| width: 100%; | width: 100%; | ||||
| .myBtn { | .myBtn { | ||||
| margin-right: 10px; | margin-right: 10px; | ||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #000; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| .myInviteCode { | |||||
| margin-top: 20px; | |||||
| } | |||||
| } | |||||
| } | |||||
| &-four { | |||||
| .el-input { | |||||
| width: 80%; | |||||
| } | |||||
| :deep(.el-input__wrapper.is-focus) { | |||||
| box-shadow: 0 0 0 1px #000 !important; | |||||
| } | |||||
| // padding: 30px 50px !important; | |||||
| div { | |||||
| margin-top: 5px; | |||||
| height: 40px; | |||||
| } | |||||
| .submitCodeBtn { | |||||
| display: inline-block; | |||||
| width: 15%; | |||||
| padding: 10px 15px; | |||||
| color: #000; | |||||
| border-radius: 10px; | |||||
| text-align: center; | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #fff; | |||||
| background-color: #000; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .right { | .right { | ||||
| width: 61%; | |||||
| width: 58%; | |||||
| height: 800px; | height: 800px; | ||||
| // height: 95%; | // height: 95%; | ||||
| border: 1px solid #000; | border: 1px solid #000; | ||||
| @@ -138,48 +138,48 @@ | |||||
| presentItem.videoMsg | presentItem.videoMsg | ||||
| }}</span> | }}</span> | ||||
| </div> | </div> | ||||
| <!-- 有视频路径的页脚 --> | |||||
| <div class="footer" v-if="presentItem.videoPlayUrl"> | |||||
| <span class="dialog-footer"> | |||||
| <!-- dialog下载按钮 --> | |||||
| <button | |||||
| class="elBtn" | |||||
| type="primary" | |||||
| @click.stop="handleDownload(presentItem.videoPlayUrl)" | |||||
| > | |||||
| <el-icon class="icon-delete"><i-ep-download /></el-icon | |||||
| >{{ $t("myCreating.download") }} | |||||
| </button> | |||||
| <!-- 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> | </div> | ||||
| <!-- 有视频路径的页脚 --> | |||||
| <template #footer v-if="presentItem.videoPlayUrl"> | |||||
| <span class="dialog-footer"> | |||||
| <!-- dialog下载按钮 --> | |||||
| <button | |||||
| class="elBtn" | |||||
| type="primary" | |||||
| @click.stop="handleDownload(presentItem.videoPlayUrl)" | |||||
| > | |||||
| <el-icon class="icon-delete"><i-ep-download /></el-icon | |||||
| >{{ $t("myCreating.download") }} | |||||
| </button> | |||||
| <!-- 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> | |||||
| </template> | |||||
| <!-- 无视频路径的页脚 --> | |||||
| <template #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> | |||||
| </template> | |||||
| </el-dialog> | </el-dialog> | ||||
| <!-- 分页 --> | <!-- 分页 --> | ||||
| <div v-if="!isLoading" class="pagination"> | <div v-if="!isLoading" class="pagination"> | ||||
| @@ -358,7 +358,7 @@ onMounted(() => { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| min-height: calc(100vh - 80px); | min-height: calc(100vh - 80px); | ||||
| padding: 20px 130px; | |||||
| padding: 15px 130px; | |||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| .top { | .top { | ||||
| @@ -380,16 +380,16 @@ onMounted(() => { | |||||
| justify-content: flex-start; | justify-content: flex-start; | ||||
| width: 100%; | width: 100%; | ||||
| // height: 200px; | // height: 200px; | ||||
| margin-top: 20px; | |||||
| margin-top: 5px; | |||||
| padding-bottom: 50px; | padding-bottom: 50px; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| .workItem { | .workItem { | ||||
| position: relative; | position: relative; | ||||
| width: 300px; | width: 300px; | ||||
| height: 200px; | |||||
| margin: 0 20px 30px 0; | |||||
| // height: 200px; | |||||
| margin: 0 20px 20px 0; | |||||
| border: 2px solid #c2c2c2; | border: 2px solid #c2c2c2; | ||||
| border-radius: 5px; | |||||
| border-radius: 15px; | |||||
| cursor: pointer; | cursor: pointer; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| .workImg { | .workImg { | ||||
| @@ -507,10 +507,13 @@ onMounted(() => { | |||||
| .workInfo { | .workInfo { | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| height: 30px; | |||||
| height: 40px; | |||||
| padding: 0 10px; | padding: 0 10px; | ||||
| line-height: 30px; | |||||
| line-height: 40px; | |||||
| border-top: 1px solid #afafaf; | border-top: 1px solid #afafaf; | ||||
| white-space: nowrap; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| } | } | ||||
| .statusName { | .statusName { | ||||
| position: absolute; | position: absolute; | ||||
| @@ -522,7 +525,7 @@ onMounted(() => { | |||||
| font-size: 14px; | font-size: 14px; | ||||
| transform: rotate(-45deg); | transform: rotate(-45deg); | ||||
| &.draft { | |||||
| &.manuscript { | |||||
| /* 草稿 */ | /* 草稿 */ | ||||
| background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | background: linear-gradient(to right, #d7d2cc 0%, #304352 100%); | ||||
| } | } | ||||
| @@ -620,13 +623,12 @@ onMounted(() => { | |||||
| .elDialog { | .elDialog { | ||||
| .videoBox { | .videoBox { | ||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| // display: flex; | |||||
| // justify-content: space-between; | |||||
| width: 100%; | width: 100%; | ||||
| padding: 10px 40px 30px 40px; | |||||
| padding: 20px; | |||||
| video { | video { | ||||
| max-width: 100%; | |||||
| width: 100%; | |||||
| max-height: 600px; | max-height: 600px; | ||||
| margin: auto; | margin: auto; | ||||
| } | } | ||||
| @@ -634,6 +636,7 @@ onMounted(() => { | |||||
| font-size: 20px; | font-size: 20px; | ||||
| font-weight: 600; | font-weight: 600; | ||||
| margin: 20px auto; | margin: 20px auto; | ||||
| text-align: center; | |||||
| } | } | ||||
| } | } | ||||
| @@ -5,7 +5,7 @@ | |||||
| */ | */ | ||||
| export const getStatus = status => { | export const getStatus = status => { | ||||
| if (status == 0) { | if (status == 0) { | ||||
| return "draft" | |||||
| return "manuscript" | |||||
| } else if (status == 1 || status == 2 || status == 4 || status == 6) { | } else if (status == 1 || status == 2 || status == 4 || status == 6) { | ||||
| return "generating" | return "generating" | ||||
| } else if (status == 3) { | } else if (status == 3) { | ||||
| @@ -57,13 +57,22 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="right"> | <div class="right"> | ||||
| <div style="background-color: #07c160" @click="showOrderCode(1)"> | |||||
| <div | |||||
| style="background-color: #07c160; cursor: pointer" | |||||
| @click="showOrderCode(1)" | |||||
| > | |||||
| {{ $t("shop.WeChatPay") }} | {{ $t("shop.WeChatPay") }} | ||||
| </div> | </div> | ||||
| <div style="background-color: #1378fe" @click="showOrderCode(2)"> | |||||
| <div | |||||
| style="background-color: #1378fe; cursor: pointer" | |||||
| @click="showOrderCode(2)" | |||||
| > | |||||
| {{ $t("shop.Alipay") }} | {{ $t("shop.Alipay") }} | ||||
| </div> | </div> | ||||
| <div style="background-color: #0070ba" @click="showOrderCode(3)"> | |||||
| <div | |||||
| style="background-color: #0070ba; cursor: pointer" | |||||
| @click="showOrderCode(3)" | |||||
| > | |||||
| Paypal | Paypal | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -179,8 +188,9 @@ const orderCodeDialogShow = ref(false); | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| min-width: calc(100vw - 210px); | |||||
| height: calc(100vh - 80px); | height: calc(100vh - 80px); | ||||
| padding: 20px 0 0 20px; | |||||
| padding: 20px 20px 0 20px; | |||||
| background-color: #fff; | background-color: #fff; | ||||
| border-radius: 25px 0 0; | border-radius: 25px 0 0; | ||||
| padding: 20px; | padding: 20px; | ||||
| @@ -189,15 +199,20 @@ const orderCodeDialogShow = ref(false); | |||||
| display: flex; | display: flex; | ||||
| justify-content: flex-start; | justify-content: flex-start; | ||||
| // overflow-x: auto; | // overflow-x: auto; | ||||
| padding: 20px 20px 20px 0; | |||||
| width: 100%; | |||||
| height: 75%; | |||||
| padding: 20px 20px 20px 50px; | |||||
| // width: 100%; | |||||
| // height: 75%; | |||||
| overflow: hidden; | |||||
| overflow-x: scroll; | |||||
| // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | ||||
| // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | ||||
| // &::-webkit-scrollbar { | |||||
| // display: none; /* 隐藏滚动条(Safari、Chrome) */ | |||||
| // } | |||||
| .item { | .item { | ||||
| width: 350px; | width: 350px; | ||||
| height: 800px; | |||||
| margin-left: 50px; | |||||
| height: 780px; | |||||
| margin-right: 50px; | |||||
| background-color: #fffefd; | background-color: #fffefd; | ||||
| flex-shrink: 0; /* 防止缩小宽度 */ | flex-shrink: 0; /* 防止缩小宽度 */ | ||||
| border: 1px solid #c0bfbd; | border: 1px solid #c0bfbd; | ||||
| @@ -291,13 +306,12 @@ const orderCodeDialogShow = ref(false); | |||||
| } | } | ||||
| } | } | ||||
| .commodityList::-webkit-scrollbar { | |||||
| display: none; /* 隐藏滚动条(Safari、Chrome) */ | |||||
| } | |||||
| .payDialog { | .payDialog { | ||||
| display: flex; | display: flex; | ||||
| position: relative; | |||||
| min-height: 500px; | |||||
| .left { | .left { | ||||
| width: 350px; | |||||
| width: 35%; | |||||
| border-right: 1px solid #7c7c7a; | border-right: 1px solid #7c7c7a; | ||||
| .title { | .title { | ||||
| color: #242625; | color: #242625; | ||||
| @@ -317,8 +331,12 @@ const orderCodeDialogShow = ref(false); | |||||
| } | } | ||||
| } | } | ||||
| .right { | .right { | ||||
| padding: 100px 300px; | |||||
| div { | |||||
| width: 65%; | |||||
| position: absolute; | |||||
| top: 20%; | |||||
| right: 0%; | |||||
| padding-left: 20%; | |||||
| > div { | |||||
| width: 200px; | width: 200px; | ||||
| height: 40px; | height: 40px; | ||||
| // border: 1px solid #242625; | // border: 1px solid #242625; | ||||