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..1d21ce5 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,3 +1,77 @@ + + - - diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 61fa256..c973cb8 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 10877b4..39c6e46 100644 --- a/src/views/myAccount/index.vue +++ b/src/views/myAccount/index.vue @@ -10,9 +10,9 @@
OLO
weqrewerwer@mail.com - 更改密码 + {{ + $t("account.reSetPwd") + }}
@@ -20,7 +20,7 @@
3 Videos Generation Left
Until 2023/12/31
- 购买更多 + {{ $t("account.getMore") }}
@@ -34,8 +34,8 @@ Generation
- 复制邀请码 - 保存二维码 + {{ $t("account.copyCode") }} + {{ $t("account.saveCode") }}
@@ -44,24 +44,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") }}
- +
@@ -69,9 +69,9 @@
张{{ item }}

E-mail:65465468765465@gmail.com

-

time:2023/5/2

+

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

-
获得视频制作次数一次
+
{{ $t("account.msg1") }}
@@ -247,7 +247,7 @@ function routerTo(url) { } .state { - width: 10%; + margin-right: 30px; } } } @@ -263,7 +263,6 @@ function routerTo(url) { } .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..6dcd18d 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") }}
@@ -60,13 +60,14 @@ @@ -187,17 +188,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: 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-color: #000; + transition: all 0.3s; &:hover { - background: linear-gradient( - 225deg, - rgb(81 217 202 / 100%), - rgb(114 100 245 / 100%) - ); + background-color: #15d1b8; } } diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index 7509f3d..9310d75 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.2s; + 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) */ }