Procházet zdrojové kódy

部分样式改动

dev
congzc před 2 roky
rodič
revize
8221efceb7
9 změnil soubory, kde provedl 229 přidání a 134 odebrání
  1. +5
    -4
      src/lang/package/en.ts
  2. +5
    -4
      src/lang/package/zh-cn.ts
  3. +1
    -1
      src/utils/request.js
  4. +2
    -2
      src/views/createVideo/index copy.vue
  5. +48
    -40
      src/views/createVideo/index.vue
  6. +77
    -13
      src/views/myAccount/index.vue
  7. +57
    -54
      src/views/myCreating/index.vue
  8. +1
    -1
      src/views/myCreating/videoStatus.js
  9. +33
    -15
      src/views/myStore/index.vue

+ 5
- 4
src/lang/package/en.ts Zobrazit soubor

@@ -58,7 +58,7 @@ export default {
reselect: "reselect",
sureUpload: "Confirm upload",
generateVideo: "Generate Video",
saveVideo:'save video',
saveVideo:'save manuscript',
select:'Please select',
},

@@ -75,11 +75,11 @@ export default {
loading: "Loading , just a moment",
noList: "Nothing here. How about making one ?",
goCreate: "Go Create !",
draft: "Draft",
manuscript: "manuscript",
generating: "Generating",
generationFailed: "Failed",
generationSucceed: "Succeed",
draftText: "Draft",
manuscriptText: "manuscript",
generatingText: "The video is generating, please wait a moment",
generationFailedText: "The video generate is failed, Reason:",
edit:'edit'
@@ -101,7 +101,8 @@ export default {
successed: "Successed",
failed: "Failed",
msg1: "Obtain one video production time",

inputCode:'Please enter the invitation code',
submit:'submit'
},

// 商店


+ 5
- 4
src/lang/package/zh-cn.ts Zobrazit soubor

@@ -58,7 +58,7 @@ export default {
reselect: "重新选择",
sureUpload: "确认上传",
generateVideo: "生成视频",
saveVideo:'保存视频',
saveVideo:'保存草稿',
select:'请选择',
},

@@ -75,11 +75,11 @@ export default {
loading: "加载中,请稍等哦",
noList: "暂无没有作品哦,快去尝试制作你的第一个视频吧!",
goCreate: "去创作",
draft: "草稿",
manuscript: "草稿",
generating: "生成中",
generationFailed: "生成失败",
generationSucceed: "生成成功",
draftText: "草稿",
manuscriptText: "草稿",
generatingText: "视频正在生成中,请稍等哦",
generationFailedText: "视频生成失败。原因:",
edit:'编辑'
@@ -101,7 +101,8 @@ export default {
successed: "支付成功",
failed: "支付失败",
msg1: "获得视频制作次数一次",

inputCode:'请输入邀请码',
submit:'提交'
},

// 商店


+ 1
- 1
src/utils/request.js Zobrazit soubor

@@ -5,7 +5,7 @@ ElMessage

// 开发环境需以 "/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请求


+ 2
- 2
src/views/createVideo/index copy.vue Zobrazit soubor

@@ -690,7 +690,7 @@ async function uploadProgress(videoId, isSaveVideo) {
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
);
createLoading.value = false;
return;
@@ -737,7 +737,7 @@ async function saveOrUpdate(index, isSaveVideo) {
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
);
createLoading.value = false;
return;


+ 48
- 40
src/views/createVideo/index.vue Zobrazit soubor

@@ -213,6 +213,7 @@
<div class="text">
<!-- 文本域 -->
<el-input
maxlength="300"
id="textInputId"
v-model="textareaContent"
:rows="15"
@@ -284,23 +285,27 @@
:value="item"
/>
</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>
<span v-if="!createLoading">{{
$t("createVideo.generateVideo")
$t("createVideo.saveVideo")
}}</span></el-button
>
<!-- 保存视频 -->
<!-- 生成视频 -->
<el-button
@click="saveOrUpdate(1, 'saveVideo')"
style="margin-left: 0"
@click="saveOrUpdate(1)"
color="#000"
type="primary"
style="margin-left: 0"
>
<my-loading :isLoading="createLoading"></my-loading>
<span v-if="!createLoading">{{
$t("createVideo.saveVideo")
$t("createVideo.generateVideo")
}}</span></el-button
>
</div>
@@ -322,23 +327,13 @@
@click="e.target.value = null"
@change="handleFileChange"
/>
<!-- <video
style="position: absolute; top: 0"
v-if="videoSrc"
:src="videoSrc"
ref="videoPlayer"
controls
></video> -->
</div>
<!-- 录制MP3上传语音 -->
<p>
<el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
{{ $t("createVideo.recordedAudio") }}
</p>
<div
class="uploadAudio"
:class="audioUrl ? 'uploadAudioAvtion' : ''"
>
<div class="uploadAudio">
<div class="btnBox">
<button
class="pointer"
@@ -355,31 +350,33 @@
{{ $t("createVideo.stopRecorded") }}
</button>
</div>
<!-- <button @click="playRecording">播放录音</button> -->
<audio v-if="audioUrl" controls :src="audioUrl"></audio>
<!-- <button v-if="audioUrl" @click="uploadAudio" class="pointer">
上传音频
</button> -->
</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
@click="saveOrUpdate(2, 'saveVideo')"
color="#000"
type="primary"
style="margin-left: 0"
>
<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 -->
@@ -870,7 +867,7 @@ async function uploadProgress(videoId, isSaveVideo) {
// 这个if判断是不是仅仅保存视频
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
);
createLoading.value = false;
router.push("/myCreating");
@@ -922,7 +919,7 @@ async function saveOrUpdate(index, isSaveVideo) {
// 这个if判断是不是仅仅保存视频
if (isSaveVideo == "saveVideo") {
ElMessage.success(
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft`
lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
);
createLoading.value = false;
router.push("/myCreating");
@@ -1004,7 +1001,7 @@ onMounted(async () => {
.page {
// height: 1200px;
height: calc(100vh - 80px);
padding: 20px 0 0 40px;
// padding: 20px 0 0 40px;
background-color: #fff;
border-radius: 25px 0 0;
}
@@ -1012,7 +1009,7 @@ onMounted(async () => {
.left {
width: 70%;
height: 80%;
padding: 20px;
:deep(.el-input__wrapper) {
border: none;
border-bottom: 2px solid #000;
@@ -1057,6 +1054,7 @@ onMounted(async () => {
img {
max-width: 100%;
max-height: 100%;
border-radius: 15px;
}
}

@@ -1064,7 +1062,8 @@ onMounted(async () => {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #000;
border: 1px solid #ccc;
border-radius: 30px;
.imgBox {
position: relative;
width: 100%;
@@ -1281,10 +1280,11 @@ onMounted(async () => {
}

.right {
width: 25%;
width: 30%;
height: 100%;
background-color: green;

padding: 30px 30px 20px 30px;
background-color: #f1f2f6;
border-radius: 30px 0 0 0;
:deep(.el-tabs--border-card) {
font-size: 20px;
border: none;
@@ -1292,6 +1292,8 @@ onMounted(async () => {

.tabs {
height: 100%;
padding: 20px 20px 0px 20px;
border-radius: 20px;
.card1 {
.text {
padding: 10px;
@@ -1308,7 +1310,7 @@ onMounted(async () => {
}

p {
margin: 10px 0;
margin: 7px 0;
}

> .el-button {
@@ -1397,6 +1399,12 @@ onMounted(async () => {
height: 100%;
}
}
.AudioBox {
display: flex;
justify-content: space-around;
padding: 20px;
transition: all 0.3s;
}
> .el-button {
width: 100%;
height: 50px;


+ 77
- 13
src/views/myAccount/index.vue Zobrazit soubor

@@ -19,10 +19,10 @@
</div>
<!-- 剩余次数 -->
<div class="left-two border">
<div v-if="currentLan == 'en'" class="number">
<div v-if="lanChange == 'en'" class="number">
3 Videos Generation Left
</div>
<div v-if="currentLan == 'zh-cn'" class="number">
<div v-if="lanChange == 'zh-cn'" class="number">
剩余生成视频次数:3条
</div>
<div class="time">{{ $t("account.until") }} 2023/12/31</div>
@@ -30,7 +30,7 @@
{{ $t("account.getMore") }}
</div>
</div>
<!-- 邀请码 -->
<!-- 我的邀请码 -->
<div class="left-three border flex justify-between">
<div class="codeImg">
<img
@@ -40,18 +40,22 @@
/>
</div>
<div class="other">
<div v-if="currentLan == 'en'">
<div v-if="lanChange == 'en'">
<span>Invite friends to get</span>
<span class="bigWord">free</span>
<span>video</span>
<span class="bigWord">Generation!</span>
<p class="myInviteCode">
your Invitation code:
<span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
</p>
</div>

<div v-if="currentLan == 'zh-cn'">
<div v-if="lanChange == 'zh-cn'">
<span>邀请更多好友</span>
<span class="bigWord">免费</span>
<span>生成视频!</span>
<p>
<p class="myInviteCode">
邀请码:
<span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
</p>
@@ -67,6 +71,15 @@
</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 class="right">
@@ -115,9 +128,9 @@ import { useRouter } from "vue-router";
import { userInfoPinia } from "@/store/modules/userInfo";

const { locale } = useI18n();
const currentLan = ref(locale);
const lanChange = ref(locale); //国际化

const userInfo = userInfoPinia();
const userInfo = userInfoPinia(); //pinia
//#region 二维码区域
// 点击复制邀请码
function copyInviteCode() {
@@ -140,7 +153,14 @@ function DownloadCodeImg() {
link.click();
}
//#endregion
const inputCode = ref("");
//#region 输入邀请码区

//#endregion ---------------------------

//#region

//#endregion ---------------------------
const router = useRouter();
function routerTo(url) {
router.push(url);
@@ -149,7 +169,7 @@ function routerTo(url) {

<style lang="scss" scoped>
.page {
height: 1200px;
height: calc(100vh - 80px);
padding: 20px 0 0 20px;
// height: calc(100vh - 84px);
background-color: #fff;
@@ -157,7 +177,7 @@ function routerTo(url) {
}

.left {
width: 35%;
width: 37%;
height: 100%;
margin-right: 2%;

@@ -188,10 +208,16 @@ function routerTo(url) {

.password {
display: inline-block;
// float: right;
float: right;
padding: 2px 8px;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: #000;
}
}
}
}
@@ -223,6 +249,7 @@ function routerTo(url) {
}

&-three {
height: 200px;
.codeImg {
position: relative;
width: 120px;
@@ -249,17 +276,54 @@ function routerTo(url) {
display: flex;
justify-content: space-evenly;
width: 100%;

.myBtn {
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 {
width: 61%;
width: 58%;
height: 800px;
// height: 95%;
border: 1px solid #000;


+ 57
- 54
src/views/myCreating/index.vue Zobrazit soubor

@@ -138,48 +138,48 @@
presentItem.videoMsg
}}</span>
</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>
<!-- 有视频路径的页脚 -->
<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>
<!-- 分页 -->
<div v-if="!isLoading" class="pagination">
@@ -358,7 +358,7 @@ onMounted(() => {
<style lang="scss" scoped>
.page {
min-height: calc(100vh - 80px);
padding: 20px 130px;
padding: 15px 130px;
background-color: #fff;
border-radius: 25px 0 0;
.top {
@@ -380,16 +380,16 @@ onMounted(() => {
justify-content: flex-start;
width: 100%;
// height: 200px;
margin-top: 20px;
margin-top: 5px;
padding-bottom: 50px;
cursor: pointer;
.workItem {
position: relative;
width: 300px;
height: 200px;
margin: 0 20px 30px 0;
// height: 200px;
margin: 0 20px 20px 0;
border: 2px solid #c2c2c2;
border-radius: 5px;
border-radius: 15px;
cursor: pointer;
overflow: hidden;
.workImg {
@@ -507,10 +507,13 @@ onMounted(() => {

.workInfo {
justify-content: space-between;
height: 30px;
height: 40px;
padding: 0 10px;
line-height: 30px;
line-height: 40px;
border-top: 1px solid #afafaf;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.statusName {
position: absolute;
@@ -522,7 +525,7 @@ onMounted(() => {
font-size: 14px;
transform: rotate(-45deg);

&.draft {
&.manuscript {
/* 草稿 */
background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
}
@@ -620,13 +623,12 @@ onMounted(() => {

.elDialog {
.videoBox {
display: flex;
justify-content: space-between;
// display: flex;
// justify-content: space-between;
width: 100%;
padding: 10px 40px 30px 40px;

padding: 20px;
video {
max-width: 100%;
width: 100%;
max-height: 600px;
margin: auto;
}
@@ -634,6 +636,7 @@ onMounted(() => {
font-size: 20px;
font-weight: 600;
margin: 20px auto;
text-align: center;
}
}



+ 1
- 1
src/views/myCreating/videoStatus.js Zobrazit soubor

@@ -5,7 +5,7 @@
*/
export const getStatus = status => {
if (status == 0) {
return "draft"
return "manuscript"
} else if (status == 1 || status == 2 || status == 4 || status == 6) {
return "generating"
} else if (status == 3) {


+ 33
- 15
src/views/myStore/index.vue Zobrazit soubor

@@ -57,13 +57,22 @@
</div>
</div>
<div class="right">
<div style="background-color: #07c160" @click="showOrderCode(1)">
<div
style="background-color: #07c160; cursor: pointer"
@click="showOrderCode(1)"
>
{{ $t("shop.WeChatPay") }}
</div>
<div style="background-color: #1378fe" @click="showOrderCode(2)">
<div
style="background-color: #1378fe; cursor: pointer"
@click="showOrderCode(2)"
>
{{ $t("shop.Alipay") }}
</div>
<div style="background-color: #0070ba" @click="showOrderCode(3)">
<div
style="background-color: #0070ba; cursor: pointer"
@click="showOrderCode(3)"
>
Paypal
</div>
</div>
@@ -179,8 +188,9 @@ const orderCodeDialogShow = ref(false);

<style lang="scss" scoped>
.page {
min-width: calc(100vw - 210px);
height: calc(100vh - 80px);
padding: 20px 0 0 20px;
padding: 20px 20px 0 20px;
background-color: #fff;
border-radius: 25px 0 0;
padding: 20px;
@@ -189,15 +199,20 @@ const orderCodeDialogShow = ref(false);
display: flex;
justify-content: flex-start;
// 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) */
// -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
// &::-webkit-scrollbar {
// display: none; /* 隐藏滚动条(Safari、Chrome) */
// }
.item {
width: 350px;
height: 800px;
margin-left: 50px;
height: 780px;
margin-right: 50px;
background-color: #fffefd;
flex-shrink: 0; /* 防止缩小宽度 */
border: 1px solid #c0bfbd;
@@ -291,13 +306,12 @@ const orderCodeDialogShow = ref(false);
}
}

.commodityList::-webkit-scrollbar {
display: none; /* 隐藏滚动条(Safari、Chrome) */
}
.payDialog {
display: flex;
position: relative;
min-height: 500px;
.left {
width: 350px;
width: 35%;
border-right: 1px solid #7c7c7a;
.title {
color: #242625;
@@ -317,8 +331,12 @@ const orderCodeDialogShow = ref(false);
}
}
.right {
padding: 100px 300px;
div {
width: 65%;
position: absolute;
top: 20%;
right: 0%;
padding-left: 20%;
> div {
width: 200px;
height: 40px;
// border: 1px solid #242625;


Načítá se…
Zrušit
Uložit