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