From 770181fb81daea58f48d568ca43fefbbe5041a9a Mon Sep 17 00:00:00 2001 From: XiaoXinPro 14 IAH5R <568170040@qq.com> Date: Tue, 23 May 2023 16:25:53 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LangSelect/index.vue | 20 ++- src/lang/package/en.ts | 73 ++++++++-- src/lang/package/zh-cn.ts | 73 ++++++++-- src/layout/components/Navbar.vue | 162 +++++++++++++---------- src/layout/components/Sidebar/index.vue | 11 +- src/layout/components/TagsView/index.vue | 2 +- src/router/index.ts | 17 ++- src/views/createVideo/index.vue | 46 +++++-- src/views/myAccount/index.vue | 27 ++-- src/views/myCreating/index.vue | 20 +-- 10 files changed, 301 insertions(+), 150 deletions(-) diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue index 4880cd0..aa4652f 100644 --- a/src/components/LangSelect/index.vue +++ b/src/components/LangSelect/index.vue @@ -1,7 +1,7 @@ + + diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 44d40bd..ceaaef8 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -1,22 +1,71 @@ export default { // 路由国际化 route: { - dashboard: 'Dashboard', - document: 'Document' + dashboard: "Dashboard", + document: "Document", }, + // 登录页面国际化 login: { - title: 'Metavatar-PC', - username: 'Username', - password: 'Password', - login: 'Login', - verifyCode: 'Verify Code', + title: "Metavatar-PC", + username: "Username", + password: "Password", + login: "Login", + verifyCode: "Verify Code", }, + // 导航栏国际化 navbar: { - dashboard: 'Dashboard', - logout: 'Logout', - document: 'Document', - gitee: 'Gitee' - } + account: "Account", + logout: "Logout", + }, + + // 创作视频 + createVideo: { + title: "CreateVideo", + typeScript: "Type your Script", + uploadAudio: "Upload Audio", + aiScript: "Ai Script", + typeTitle: "Type a title", + confirm: "Confirm", + aiText: "Please input here", + languages: "Languages", + voices: "Voices", + styles: "Styles", + reload: "Reload", + generateVideo: "Generate Video", + }, + + // 我的视频 + myCreating: { + title: "My Creating", + typeTitle: "Type a title", + name: "Name", + date: "Date", + download: "Download", + delete: "Delete", + more: "More", + }, + + // 个人账户 + account: { + title: "My Account", + reSetPwd: "Reset Password", + getMore: "UPGRADE", + copyCode: "Copy invitation code", + saveCode: "Save QR code", + buyHistory: "OrderHistory", + inviteHistory: "InviteHistory", + orderID: "OrderID", + price: "Price", + date: "Date", + successed: "Successed", + failed: "Failed", + msg1: "Obtain one video production time", + }, + + // 商店 + shop: { + title: "Shop", + }, }; diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 6e7bac7..367573e 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -1,22 +1,71 @@ export default { // 路由国际化 route: { - dashboard: '首页', - document: '项目文档' + dashboard: "首页", + document: "项目文档", }, + // 登录页面国际化 login: { - title: 'Metavatar-PC', - username: '用户名', - password: '密码', - login: '登 录', - verifyCode: '验证码' + title: "Metavatar-PC", + username: "用户名", + password: "密码", + login: "登 录", + verifyCode: "验证码", }, + // 导航栏国际化 navbar: { - dashboard: '首页', - logout: '注销', - document: '项目文档', - gitee: '码云' - } + account: "账户", + logout: "注销", + }, + + // 创作视频 + createVideo: { + title: "创作视频", + typeScript: "输入文案", + uploadAudio: "上传视频", + aiScript: "AI生成文本", + typeTitle: "输入标题", + confirm: "确定", + aiText: "在此输入", + languages: "选择语言", + voices: "选择声音", + styles: "选择风格", + reload: "重新上传", + generateVideo: "生成视频", + }, + + // 我的视频 + myCreating: { + title: "我的视频", + typeTitle: "输入标题", + name: "名称", + date: "时间", + download: "下载", + delete: "删除", + more: "更多", + }, + + // 个人账户 + account: { + title: "个人账户", + reSetPwd: "修改密码", + getMore: "升级套餐", + copyCode: "复制邀请码", + saveCode: "保存二维码", + buyHistory: "购买记录", + inviteHistory: "邀请记录", + orderID: "订单号", + price: "支付金额", + date: "购买日期", + successed: "支付成功", + failed: "支付失败", + msg1: "获得视频制作次数一次", + }, + + // 商店 + shop: { + title: "商店", + }, }; diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index cc0b051..6347b62 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,3 +1,78 @@ + + - - diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 61fa256..4d33235 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -7,19 +7,19 @@
- 创作视频 + {{ $t("createVideo.title") }}
- 我的视频 + {{ $t("myCreating.title") }}
- 商店 + {{ $t("shop.title") }}
- +
@@ -60,30 +63,35 @@
- +
111111111111111111
- +
22222222222222222
- +
- - submit + + + {{ $t("createVideo.confirm") }} +
-

language

+

{{ $t("createVideo.languages") }}

-

voices

+

{{ $t("createVideo.voices") }}

-

style

+

{{ $t("createVideo.styles") }}

- Generate Video + {{ + $t("createVideo.generateVideo") + }}
@@ -139,8 +149,20 @@ function changeFile(e) { imgUrl.value = URL.createObjectURL(e.target.files[0]); } +// $t在script中的使用 +import { getCurrentInstance } from "vue"; +const { + appContext: { + config: { globalProperties }, + }, +} = getCurrentInstance(); + +const string = "createVideo.typeScript"; +const t = globalProperties.$t(string); + // card3的 let language = reactive(""); + let languageOptions = reactive([ { value: "Option1", diff --git a/src/views/myAccount/index.vue b/src/views/myAccount/index.vue index eba9393..202a133 100644 --- a/src/views/myAccount/index.vue +++ b/src/views/myAccount/index.vue @@ -10,14 +10,14 @@
OLO
weqrewerwer@mail.com - 更改密码 + {{ $t("account.reSetPwd") }}
3 Videos Generation Left
Until 2023/12/31
-
购买更多
+
{{ $t("account.getMore") }}
@@ -30,8 +30,8 @@ Generation
- 复制邀请码 - 保存二维码 + {{ $t("account.copyCode") }} + {{ $t("account.saveCode") }}
@@ -40,24 +40,24 @@
- +
-

订单号:123456

+

{{ $t("account.orderID") }}:123456

疯狂星期{{ item }}
-

Price:88$

-

time:2023/5/2

+

{{ $t("account.price") }}:88$

+

{{ $t("account.date") }}:2023/5/2

-
支付成功
+
{{ $t("account.successed") }}
- +
@@ -65,9 +65,9 @@
张{{ item }}

E-mail:65465468765465@gmail.com

-

time:2023/5/2

+

{{ $t("account.date") }}:2023/5/2

-
获得视频制作次数一次
+
{{ $t("account.msg1") }}
@@ -237,7 +237,7 @@ } .state { - width: 10%; + margin-right: 30px; } } } @@ -253,7 +253,6 @@ } .state { - width: 15%; font-size: 14px; line-height: 60px; } diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index e8cdcd7..6538b24 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -3,7 +3,7 @@
- +
@@ -14,8 +14,8 @@
- 名称 - 时间 + {{ $t("myCreating.name") }} + {{ $t("myCreating.date") }}
-
下载
+
{{ $t("myCreating.download") }}
-
删除
+
{{ $t("myCreating.delete") }}
@@ -187,17 +187,17 @@ function mouseenter(item) { position: absolute; top: 45px; right: 10px; - width: 70px; - height: 60px; + // width: 70px; + // height: 60px; overflow: hidden; border-radius: 10px; &-item { - width: 70px; - height: 30px; + // width: 70px; + // height: 30px; text-align: center; background-color: #fff; - + padding: 10px; &-icon { position: relative; display: inline-block; From fdadf1f6a8ccae923d9165e6359ca6c8c676816b Mon Sep 17 00:00:00 2001 From: XiaoXinPro 14 IAH5R <568170040@qq.com> Date: Tue, 23 May 2023 17:01:00 +0800 Subject: [PATCH 2/5] upload --- src/layout/components/Navbar.vue | 1 - src/layout/components/Sidebar/index.vue | 1 + src/views/myCreating/index.vue | 32 ++++++++++++------------- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 6347b62..5080f67 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -62,7 +62,6 @@ {{ $t(routeName as string) }} -
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 4d33235..c973cb8 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -94,6 +94,7 @@ function routerTo(url: RouteLocationRaw) { transition: all 0.3s; border-radius: 5px; margin-bottom: 20px; + margin-right: 20px; .icon { width: 40px; diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index 6538b24..5194c25 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -60,13 +60,14 @@ @@ -197,7 +198,7 @@ function mouseenter(item) { // height: 30px; text-align: center; background-color: #fff; - padding: 10px; + padding: 0 10px; &-icon { position: relative; display: inline-block; @@ -261,18 +262,15 @@ function mouseenter(item) { display: flex; justify-content: space-between; - :deep(.el-button) { + .elBtn { color: #fff; - background-color: #000 !important; - border: none; border-radius: 10px; - + padding: 5px 10px; + cursor: pointer; + background: linear-gradient(225deg, #000, #000); + transition: all 0.3s; &:hover { - background: linear-gradient( - 225deg, - rgb(81 217 202 / 100%), - rgb(114 100 245 / 100%) - ); + background: linear-gradient(225deg, #51d9ca, #7264f5); } } From 497672b42eeeffebf2a14380b50d989f6c4c3a30 Mon Sep 17 00:00:00 2001 From: XiaoXinPro 14 IAH5R <568170040@qq.com> Date: Tue, 23 May 2023 17:36:07 +0800 Subject: [PATCH 3/5] upload --- src/layout/components/Navbar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 5080f67..1d21ce5 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -183,7 +183,7 @@ watch( display: flex; align-items: center; justify-content: flex-end; - height: 50px; + height: 80px; padding: 0 20px; color: #fff; background-color: #fff; From 0cce9c076df4467eb6a01a5a79bf0f341c0ffcec Mon Sep 17 00:00:00 2001 From: YWQ HK IX <568170040@qq.com> Date: Tue, 23 May 2023 21:16:11 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E8=BF=87=E6=B8=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/components.d.ts | 3 - src/views/myStore/index.vue | 209 ++++++++++++++++++++---------------- 2 files changed, 115 insertions(+), 97 deletions(-) diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 433d75f..d67af9e 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -20,13 +20,10 @@ declare module '@vue/runtime-core' { ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] - ElMenu: typeof import("element-plus/es")["ElMenu"] - ElMenuItem: typeof import("element-plus/es")["ElMenuItem"] ElOption: typeof import('element-plus/es')['ElOption'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] - ElSubMenu: typeof import("element-plus/es")["ElSubMenu"] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 7509f3d..9335574 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -2,37 +2,37 @@
-
-
- -
-
- - {{ item.title }} +
+
+
+ +
+
+ + {{ item.title }} +
+
+ {{ item.price }}元/{{ + item.priceTime + }} +
+
+ {{ item.time }}分钟/月 +
+
+ 选择方案 +
-
- {{ item.price }}元/{{ item.priceTime }} -
-
- {{ item.time }}分钟/月 -
-
- 选择方案 -
-
- -
-
- {{ items }} + +
+
+ {{ items }} +
@@ -159,82 +159,103 @@ function clickPayDialog(item) { height: 100%; // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ -} -.item { - width: 350px; - height: 100%; - margin-left: 50px; - background-color: #fffefd; - flex-shrink: 0; /* 防止缩小宽度 */ - border: 1px solid #c0bfbd; - border-radius: 20px; - overflow: hidden; - .line { - height: 20px; - background-color: pink; - } - .info { - padding: 20px; - .content { - height: 300px; + .item { + width: 350px; + height: 100%; + margin-left: 50px; + background-color: #fffefd; + flex-shrink: 0; /* 防止缩小宽度 */ + border: 1px solid #c0bfbd; + border-radius: 20px; + overflow: hidden; + transition: all 0.3s; + cursor: pointer; + .line { + height: 20px; + background-color: pink; + cursor: pointer; + } + .info { padding: 20px; - border-bottom: 1px solid #c0bfbd; - .title { - font-size: 30px; - font-weight: 700; - line-height: 25px; - margin-bottom: 30px; - .el-icon { - line-height: 30px; - width: 40px; - height: 40px; - font-size: 40px; - color: #000; - text-align: center; - vertical-align: sub; - } - } - .money { - margin-bottom: 30px; - font-size: 20px; - color: #7c7c7a; - .price { + cursor: pointer; + .content { + height: 300px; + padding: 20px; + border-bottom: 1px solid #c0bfbd; + cursor: pointer; + .title { font-size: 30px; font-weight: 700; - color: #242625; + line-height: 25px; + margin-bottom: 30px; + cursor: pointer; + .el-icon { + line-height: 30px; + width: 40px; + height: 40px; + font-size: 40px; + color: #000; + text-align: center; + vertical-align: sub; + cursor: pointer; + } } - } - .time { - margin-bottom: 30px; - font-size: 20px; - color: #7c7c7a; - span { + .money { + margin-bottom: 30px; + font-size: 20px; + color: #7c7c7a; + cursor: pointer; + .price { + font-size: 30px; + font-weight: 700; + color: #242625; + cursor: pointer; + } + } + .time { + margin-bottom: 30px; + font-size: 20px; + color: #7c7c7a; + cursor: pointer; + span { + font-weight: 700; + color: #242625; + cursor: pointer; + } + } + .button { + width: 100%; + height: 40px; + border-radius: 10px; + text-align: center; + line-height: 40px; + color: #fff; font-weight: 700; - color: #242625; + background-color: yellow; + cursor: pointer; } } - .button { - width: 100%; - height: 40px; - border-radius: 10px; - text-align: center; - line-height: 40px; - color: #fff; - font-weight: 700; - background-color: yellow; - } - } - .authority { - &-item { - padding: 20px 10px; - span { - color: #7c7c7a; - margin-right: 30px; + .authority { + cursor: pointer; + &-item { + cursor: pointer; + padding: 20px 10px; + span { + cursor: pointer; + color: #7c7c7a; + margin-right: 30px; + } } } } + &:hover { + cursor: pointer; + transform: translateY(-20px); + box-shadow: #00000026 2px 2px 2px 2px; + } } } + .commodityList::-webkit-scrollbar { display: none; /* 隐藏滚动条(Safari、Chrome) */ } From 3df026e63922a28e73a833ab7a598965973d631d Mon Sep 17 00:00:00 2001 From: YWQ HK IX <568170040@qq.com> Date: Tue, 23 May 2023 21:22:47 +0800 Subject: [PATCH 5/5] upload --- src/types/auto-imports.d.ts | 2 -- src/views/myCreating/index.vue | 4 ++-- src/views/myStore/index.vue | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e5c7bdb..9ea2d5d 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,7 +2,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] - const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly asyncComputed: UnwrapRef diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index 5194c25..6dcd18d 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -267,10 +267,10 @@ function mouseenter(item) { border-radius: 10px; padding: 5px 10px; cursor: pointer; - background: linear-gradient(225deg, #000, #000); + background-color: #000; transition: all 0.3s; &:hover { - background: linear-gradient(225deg, #51d9ca, #7264f5); + background-color: #15d1b8; } } diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 9335574..9310d75 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -168,7 +168,7 @@ function clickPayDialog(item) { border: 1px solid #c0bfbd; border-radius: 20px; overflow: hidden; - transition: all 0.3s; + transition: all 0.2s; cursor: pointer; .line { height: 20px;