@@ -1,7 +1,7 @@ | |||
<script setup lang="ts"> | |||
import { useI18n } from 'vue-i18n'; | |||
import SvgIcon from '@/components/SvgIcon/index.vue'; | |||
import { useAppStore } from '@/store/modules/app'; | |||
import { useI18n } from "vue-i18n"; | |||
import SvgIcon from "@/components/SvgIcon/index.vue"; | |||
import { useAppStore } from "@/store/modules/app"; | |||
const appStore = useAppStore(); | |||
const { locale } = useI18n(); | |||
@@ -9,16 +9,16 @@ const { locale } = useI18n(); | |||
function handleLanguageChange(lang: string) { | |||
locale.value = lang; | |||
appStore.changeLanguage(lang); | |||
if (lang == 'en') { | |||
ElMessage.success('Switch Language Successful!'); | |||
if (lang == "en") { | |||
ElMessage.success("Switch Language Successful!"); | |||
} else { | |||
ElMessage.success('切换语言成功!'); | |||
ElMessage.success("切换语言成功!"); | |||
} | |||
} | |||
</script> | |||
<template> | |||
<el-dropdown trigger="click" @command="handleLanguageChange"> | |||
<el-dropdown class="outSide" trigger="click" @command="handleLanguageChange"> | |||
<div> | |||
<svg-icon icon-class="language" /> | |||
</div> | |||
@@ -37,3 +37,9 @@ function handleLanguageChange(lang: string) { | |||
</template> | |||
</el-dropdown> | |||
</template> | |||
<style lang="scss" scoped> | |||
.outSide { | |||
cursor: pointer; | |||
} | |||
</style> |
@@ -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", | |||
}, | |||
}; |
@@ -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: "商店", | |||
}, | |||
}; |
@@ -1,3 +1,77 @@ | |||
<template> | |||
<!-- 顶部导航栏 --> | |||
<div class="myNavbar"> | |||
<!-- 左侧面包屑 --> | |||
<div class="flex" v-if="false"> | |||
<hamburger | |||
:is-active="appStore.sidebar.opened" | |||
@toggleClick="toggleSideBar" | |||
/> | |||
<breadcrumb /> | |||
</div> | |||
<!-- 右侧导航设置 --> | |||
<div class="flex" v-if="false"> | |||
<!-- 导航栏设置(窄屏隐藏)--> | |||
<div class="setting-container" v-if="device !== 'mobile'"> | |||
<!--全屏 --> | |||
<div class="setting-item" @click="toggle" v-if="false"> | |||
<svg-icon | |||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" | |||
/> | |||
</div> | |||
<!-- 布局大小 --> | |||
<el-tooltip | |||
content="布局大小" | |||
effect="dark" | |||
placement="bottom" | |||
v-if="false" | |||
> | |||
<size-select class="setting-item" /> | |||
</el-tooltip> | |||
</div> | |||
<!-- 用户头像 --> | |||
<span class="account" @click="routerTo">个人账户</span> | |||
<el-dropdown trigger="click" v-if="false"> | |||
<div class="avatar-container"> | |||
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" /> | |||
<i-ep-caret-bottom class="w-3 h-3" /> | |||
</div> | |||
<template #dropdown> | |||
<el-dropdown-menu> | |||
<router-link to="/"> | |||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item> | |||
</router-link> | |||
<a target="_blank" href="https://github.com/hxrui"> | |||
<el-dropdown-item>Github</el-dropdown-item> | |||
</a> | |||
<a target="_blank" href="https://gitee.com/haoxr"> | |||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item> | |||
</a> | |||
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/"> | |||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item> | |||
</a> | |||
<el-dropdown-item divided @click="logout"> | |||
{{ $t("navbar.logout") }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> | |||
</div> | |||
<!-- 显示的,以上代码作废 --> | |||
<div style="position: absolute; left: 30px; font-size: 26px"> | |||
{{ $t(routeName as string) }} | |||
</div> | |||
<!--语言选择--> | |||
<lang-select class="navItem" style="color: #ffffff" /> | |||
<div class="avatar" @click="routerTo"></div> | |||
<div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div> | |||
<div class="navItem" @click="logout" style="margin-left: 10px"> | |||
{{ $t("navbar.logout") }} | |||
</div> | |||
</div> | |||
</template> | |||
<script setup lang="ts"> | |||
import { watch, ref } from "vue"; | |||
import { storeToRefs } from "pinia"; | |||
@@ -5,6 +79,7 @@ import { RouteLocationRaw, useRoute, useRouter } from "vue-router"; | |||
import { useAppStore } from "@/store/modules/app"; | |||
import { useTagsViewStore } from "@/store/modules/tagsView"; | |||
import { useUserStore } from "@/store/modules/user"; | |||
import LangSelect from "@/components/LangSelect/index.vue"; | |||
const appStore = useAppStore(); | |||
const tagsViewStore = useTagsViewStore(); | |||
@@ -61,75 +136,6 @@ watch( | |||
); | |||
</script> | |||
<template> | |||
<!-- 顶部导航栏 --> | |||
<div class="myNavbar"> | |||
<!-- 左侧面包屑 --> | |||
<div class="flex" v-if="false"> | |||
<hamburger | |||
:is-active="appStore.sidebar.opened" | |||
@toggleClick="toggleSideBar" | |||
/> | |||
<breadcrumb /> | |||
</div> | |||
<!-- 右侧导航设置 --> | |||
<div class="flex" v-if="false"> | |||
<!-- 导航栏设置(窄屏隐藏)--> | |||
<div class="setting-container" v-if="device !== 'mobile'"> | |||
<!--全屏 --> | |||
<div class="setting-item" @click="toggle" v-if="false"> | |||
<svg-icon | |||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" | |||
/> | |||
</div> | |||
<!-- 布局大小 --> | |||
<el-tooltip | |||
content="布局大小" | |||
effect="dark" | |||
placement="bottom" | |||
v-if="false" | |||
> | |||
<size-select class="setting-item" /> | |||
</el-tooltip> | |||
<!--语言选择--> | |||
<lang-select class="setting-item" v-if="false" /> | |||
</div> | |||
<!-- 用户头像 --> | |||
<span @click="routerTo">个人账户</span> | |||
<el-dropdown trigger="click" v-if="false"> | |||
<div class="avatar-container"> | |||
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" /> | |||
<i-ep-caret-bottom class="w-3 h-3" /> | |||
</div> | |||
<template #dropdown> | |||
<el-dropdown-menu> | |||
<router-link to="/"> | |||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item> | |||
</router-link> | |||
<a target="_blank" href="https://github.com/hxrui"> | |||
<el-dropdown-item>Github</el-dropdown-item> | |||
</a> | |||
<a target="_blank" href="https://gitee.com/haoxr"> | |||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item> | |||
</a> | |||
<a target="_blank" href="https://www.cnblogs.com/haoxianrui/"> | |||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item> | |||
</a> | |||
<el-dropdown-item divided @click="logout"> | |||
{{ $t("navbar.logout") }} | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</template> | |||
</el-dropdown> | |||
</div> | |||
<!-- 显示的,以上代码作废 --> | |||
<div style="position: absolute; left: 30px">{{ routeName }}</div> | |||
<div class="avatar"></div> | |||
<div @click="routerTo">个人账户</div> | |||
<div @click="logout" style="margin-left: 10px">退出登录</div> | |||
</div> | |||
</template> | |||
<style lang="scss" scoped> | |||
.navbar { | |||
display: flex; | |||
@@ -151,9 +157,9 @@ watch( | |||
color: #5a5e66; | |||
text-align: center; | |||
cursor: pointer; | |||
margin-right: 25px; | |||
&:hover { | |||
background: rgb(249 250 251 / 100%); | |||
background: #f9fafb; | |||
} | |||
} | |||
} | |||
@@ -177,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; | |||
@@ -187,9 +193,18 @@ watch( | |||
.avatar { | |||
width: 30px; | |||
height: 30px; | |||
margin-right: 5px; | |||
background-color: red; | |||
margin-right: 10px; | |||
margin-left: 20px; | |||
background-color: #4769da; | |||
border-radius: 50%; | |||
cursor: pointer; | |||
} | |||
.navItem { | |||
cursor: pointer; | |||
transition: all 0.3s; | |||
&:hover { | |||
color: #4769da; | |||
} | |||
} | |||
} | |||
</style> |
@@ -7,19 +7,19 @@ | |||
<div class="icon"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
</div> | |||
创作视频 | |||
{{ $t("createVideo.title") }} | |||
</div> | |||
<div class="myRouter-item" @click="routerTo('/myCreating')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-menu /></el-icon> | |||
</div> | |||
我的视频 | |||
{{ $t("myCreating.title") }} | |||
</div> | |||
<div class="myRouter-item pricing" @click="routerTo('/myStore')"> | |||
<div class="icon"> | |||
<el-icon><i-ep-Goods /></el-icon> | |||
</div> | |||
商店 | |||
{{ $t("shop.title") }} | |||
</div> | |||
</div> | |||
<!-- <el-scrollbar> | |||
@@ -91,6 +91,10 @@ function routerTo(url: RouteLocationRaw) { | |||
text-align: center; | |||
cursor: pointer; | |||
border-bottom: 2px solid #fff; | |||
transition: all 0.3s; | |||
border-radius: 5px; | |||
margin-bottom: 20px; | |||
margin-right: 20px; | |||
.icon { | |||
width: 40px; | |||
@@ -110,7 +114,7 @@ function routerTo(url: RouteLocationRaw) { | |||
&:hover { | |||
color: #000; | |||
background-color: #fff; | |||
background-color: #ffffff; | |||
.el-icon { | |||
color: #000; | |||
@@ -242,7 +242,7 @@ onMounted(() => { | |||
</script> | |||
<template> | |||
<div class="tags-container" v-if="false"> | |||
<div v-if="false" class="tags-container"> | |||
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll"> | |||
<router-link | |||
:class="'tags-item ' + (isActive(tag) ? 'active' : '')" | |||
@@ -1,4 +1,5 @@ | |||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; | |||
import { getCurrentInstance } from "vue"; | |||
export const Layout = () => import("@/layout/index.vue"); | |||
@@ -35,7 +36,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
title: "createVideo", | |||
icon: "homepage", | |||
affix: true, | |||
name: "创作视频", | |||
name: "createVideo.title", | |||
}, | |||
}, | |||
], | |||
@@ -54,7 +55,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
title: "myCreating", | |||
icon: "homepage", | |||
affix: true, | |||
name: "我的视频", | |||
name: "myCreating.title", | |||
}, | |||
}, | |||
], | |||
@@ -73,7 +74,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
title: "myAccount", | |||
icon: "homepage", | |||
affix: true, | |||
name: "个人账户", | |||
name: "account.title", | |||
}, | |||
}, | |||
], | |||
@@ -106,7 +107,12 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||
path: "myStore", | |||
component: () => import("@/views/myStore/index.vue"), | |||
name: "myStore", | |||
meta: { title: "myStore", icon: "homepage", affix: true, name: "商店" }, | |||
meta: { | |||
title: "myStore", | |||
icon: "homepage", | |||
affix: true, | |||
name: "shop.title", | |||
}, | |||
}, | |||
], | |||
}, | |||
@@ -194,7 +200,8 @@ const router = createRouter({ | |||
history: createWebHashHistory(), | |||
routes: constantRoutes as RouteRecordRaw[], | |||
// 刷新时,滚动条位置还原 | |||
scrollBehavior: () => ({ left: 0, top: 0 }), | |||
// 2023-5-23 添加平滑滚动 YWQ | |||
scrollBehavior: () => ({ behavior: "smooth", left: 0, top: 0 }), | |||
}); | |||
/** | |||
@@ -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<typeof import('vue')['EffectScope']> | |||
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | |||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
@@ -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'] | |||
@@ -8,12 +8,15 @@ | |||
<el-row class="justify-between"> | |||
<!-- title框 --> | |||
<div class="flex justify-between" style="width: 300px"> | |||
<el-input v-model="title" placeholder="输入标题" /> | |||
<el-input | |||
v-model="title" | |||
:placeholder="$t('createVideo.typeTitle')" | |||
/> | |||
<el-icon class="icon-edit"><i-ep-edit /></el-icon> | |||
</div> | |||
<!-- 上传按钮 --> | |||
<button class="uploadBtn"> | |||
重新上传 | |||
{{ $t("createVideo.reload") }} | |||
<input type="file" @change="changeFile" /> | |||
</button> | |||
</el-row> | |||
@@ -60,30 +63,35 @@ | |||
<div class="right"> | |||
<el-tabs type="border-card" class="tabs"> | |||
<!-- ----------------------------- 1 --> | |||
<el-tab-pane label="Type you Script"> | |||
<el-tab-pane :label="$t('createVideo.typeScript')"> | |||
<div class="card1">111111111111111111</div> | |||
</el-tab-pane> | |||
<!-- ------------------------ 2 --> | |||
<el-tab-pane label="upload audio"> | |||
<el-tab-pane :label="$t('createVideo.uploadAudio')"> | |||
<div class="card2">22222222222222222</div> | |||
</el-tab-pane> | |||
<!-- ----------------------- 3 --> | |||
<el-tab-pane label="Ai Script"> | |||
<el-tab-pane :label="$t('createVideo.aiScript')"> | |||
<div class="card3"> | |||
<div class="text"> | |||
<el-input v-model="title" placeholder="输入标题" /> | |||
<el-button type="primary"> submit </el-button> | |||
<el-input | |||
v-model="title" | |||
:placeholder="$t('createVideo.typeTitle')" | |||
/> | |||
<el-button type="primary"> | |||
{{ $t("createVideo.confirm") }} | |||
</el-button> | |||
<el-input | |||
v-model="title" | |||
:rows="15" | |||
type="textarea" | |||
placeholder="Please input" | |||
:placeholder="$t('createVideo.aiText')" | |||
/> | |||
<el-icon :size="20"> | |||
<Edit /> | |||
</el-icon> | |||
</div> | |||
<p>language</p> | |||
<p>{{ $t("createVideo.languages") }}</p> | |||
<el-select | |||
v-model="language" | |||
placeholder="Select" | |||
@@ -96,7 +104,7 @@ | |||
:value="item.value" | |||
/> | |||
</el-select> | |||
<p>voices</p> | |||
<p>{{ $t("createVideo.voices") }}</p> | |||
<el-select | |||
v-model="language" | |||
placeholder="Select" | |||
@@ -109,7 +117,7 @@ | |||
:value="item.value" | |||
/> | |||
</el-select> | |||
<p>style</p> | |||
<p>{{ $t("createVideo.styles") }}</p> | |||
<el-select | |||
v-model="language" | |||
placeholder="Select" | |||
@@ -122,7 +130,9 @@ | |||
:value="item.value" | |||
/> | |||
</el-select> | |||
<el-button type="primary">Generate Video</el-button> | |||
<el-button type="primary">{{ | |||
$t("createVideo.generateVideo") | |||
}}</el-button> | |||
</div> | |||
</el-tab-pane> | |||
</el-tabs> | |||
@@ -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", | |||
@@ -10,9 +10,9 @@ | |||
<div class="info"> | |||
<div class="name">OLO</div> | |||
<span>weqrewerwer@mail.com</span> | |||
<span class="password pointer" @click="routerTo('/myPassword')" | |||
>更改密码</span | |||
> | |||
<span class="password pointer" @click="routerTo('/myPassword')">{{ | |||
$t("account.reSetPwd") | |||
}}</span> | |||
</div> | |||
</div> | |||
<!-- 剩余次数 --> | |||
@@ -20,7 +20,7 @@ | |||
<div class="number">3 Videos Generation Left</div> | |||
<div class="time">Until 2023/12/31</div> | |||
<div class="getMore pointer" @click="routerTo('/myStore')"> | |||
购买更多 | |||
{{ $t("account.getMore") }} | |||
</div> | |||
</div> | |||
<!-- 邀请码 --> | |||
@@ -34,8 +34,8 @@ | |||
<span class="bigWord">Generation</span> | |||
</div> | |||
<div class="btns"> | |||
<span class="myBtn">复制邀请码</span> | |||
<span class="myBtn">保存二维码</span> | |||
<span class="myBtn">{{ $t("account.copyCode") }}</span> | |||
<span class="myBtn">{{ $t("account.saveCode") }}</span> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -44,24 +44,24 @@ | |||
<div class="right"> | |||
<el-tabs type="border-card" class="tabs"> | |||
<!-- ----------------------------- 1 --> | |||
<el-tab-pane label="购买记录"> | |||
<el-tab-pane :label="$t('account.buyHistory')"> | |||
<div class="card scrolly"> | |||
<div class="orderItem" v-for="item in 9" :key="item"> | |||
<p>订单号:123456</p> | |||
<p>{{ $t("account.orderID") }}:123456</p> | |||
<div class="orderItem-content"> | |||
<div class="orderCode"><img src="" alt="" /></div> | |||
<div class="info"> | |||
<h5>疯狂星期{{ item }}</h5> | |||
<p>Price:88$</p> | |||
<p>time:2023/5/2</p> | |||
<p>{{ $t("account.price") }}:88$</p> | |||
<p>{{ $t("account.date") }}:2023/5/2</p> | |||
</div> | |||
<div class="state">支付成功</div> | |||
<div class="state">{{ $t("account.successed") }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</el-tab-pane> | |||
<!-- ------------------------ 2 --> | |||
<el-tab-pane label="邀请记录"> | |||
<el-tab-pane :label="$t('account.inviteHistory')"> | |||
<div class="card scrolly card2"> | |||
<div class="orderItem" v-for="item in 9" :key="item"> | |||
<div class="orderItem-content"> | |||
@@ -69,9 +69,9 @@ | |||
<div class="info"> | |||
<h5>张{{ item }}</h5> | |||
<p>E-mail:65465468765465@gmail.com</p> | |||
<p>time:2023/5/2</p> | |||
<p>{{ $t("account.date") }}:2023/5/2</p> | |||
</div> | |||
<div class="state">获得视频制作次数一次</div> | |||
<div class="state">{{ $t("account.msg1") }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -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; | |||
} | |||
@@ -3,7 +3,7 @@ | |||
<!-- 搜索框 --> | |||
<div class="top"> | |||
<div class="flex justify-between" style="width: 300px"> | |||
<el-input v-model="title" placeholder="输入标题" /> | |||
<el-input v-model="title" :placeholder="$t('myCreating.typeTitle')" /> | |||
<el-icon class="icon-edit"><i-ep-edit /></el-icon> | |||
</div> | |||
</div> | |||
@@ -14,8 +14,8 @@ | |||
<img class="inmiddle" src="" alt="" /> | |||
</div> | |||
<div class="workInfo flex"> | |||
<span>名称</span> | |||
<span>时间</span> | |||
<span>{{ $t("myCreating.name") }}</span> | |||
<span>{{ $t("myCreating.date") }}</span> | |||
</div> | |||
<!-- 更多遮罩层 --> | |||
<div | |||
@@ -30,13 +30,13 @@ | |||
<div class="btns-item-icon"> | |||
<el-icon class="icon-delete"><i-ep-download /></el-icon> | |||
</div> | |||
<div class="text">下载</div> | |||
<div class="text">{{ $t("myCreating.download") }}</div> | |||
</div> | |||
<div class="btns-item"> | |||
<div class="btns-item-icon"> | |||
<el-icon class="icon-delete"><i-ep-delete /></el-icon> | |||
</div> | |||
<div class="text">删除</div> | |||
<div class="text">{{ $t("myCreating.delete") }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -60,13 +60,14 @@ | |||
</div> | |||
<template #footer> | |||
<span class="dialog-footer"> | |||
<el-button type="primary" @click="showDialog = false" | |||
><el-icon class="icon-delete"><i-ep-download /></el-icon | |||
>下载</el-button | |||
> | |||
<el-button @click="showDialog = false"> | |||
<el-icon class="icon-delete"><i-ep-delete /></el-icon>删除 | |||
</el-button> | |||
<button class="elBtn" type="primary" @click="showDialog = false"> | |||
<el-icon class="icon-delete"><i-ep-download /></el-icon | |||
>{{ $t("myCreating.download") }} | |||
</button> | |||
<button class="elBtn" @click="showDialog = false"> | |||
<el-icon class="icon-delete"><i-ep-delete /></el-icon | |||
>{{ $t("myCreating.delete") }} | |||
</button> | |||
</span> | |||
</template> | |||
</el-dialog> | |||
@@ -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; | |||
} | |||
} | |||
@@ -2,37 +2,37 @@ | |||
<div class="page"> | |||
<div class="commoditylIst"> | |||
<div class="item" v-for="item in list" :key="item.title"> | |||
<div class="line" :style="`background-color:${item.color} ;`"></div> | |||
<div class="info"> | |||
<!-- 商品信息 --> | |||
<div class="content"> | |||
<div class="title"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ item.title }} | |||
<div @click="clickPayDialog(item)"> | |||
<div class="line" :style="`background-color:${item.color} ;`"></div> | |||
<div class="info"> | |||
<!-- 商品信息 --> | |||
<div class="content"> | |||
<div class="title"> | |||
<el-icon><i-ep-edit /></el-icon> | |||
{{ item.title }} | |||
</div> | |||
<div class="money"> | |||
<span class="price">{{ item.price }}元</span>/{{ | |||
item.priceTime | |||
}} | |||
</div> | |||
<div class="time"> | |||
<span>{{ item.time }}</span | |||
>分钟/月 | |||
</div> | |||
<div class="button" :style="`background-color:${item.color} ;`"> | |||
选择方案 | |||
</div> | |||
</div> | |||
<div class="money"> | |||
<span class="price">{{ item.price }}元</span>/{{ item.priceTime }} | |||
</div> | |||
<div class="time"> | |||
<span>{{ item.time }}</span | |||
>分钟/月 | |||
</div> | |||
<div | |||
@click="clickPayDialog(item)" | |||
class="button" | |||
:style="`background-color:${item.color} ;`" | |||
> | |||
选择方案 | |||
</div> | |||
</div> | |||
<!-- 商品权益 --> | |||
<div class="authority"> | |||
<div | |||
class="authority-item" | |||
v-for="items in item.authority" | |||
:key="items" | |||
> | |||
<span>✔</span>{{ items }} | |||
<!-- 商品权益 --> | |||
<div class="authority"> | |||
<div | |||
class="authority-item" | |||
v-for="items in item.authority" | |||
:key="items" | |||
> | |||
<span>✔</span>{{ items }} | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -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) */ | |||
} | |||