| @@ -1,7 +1,7 @@ | |||||
| <script setup lang="ts"> | <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 appStore = useAppStore(); | ||||
| const { locale } = useI18n(); | const { locale } = useI18n(); | ||||
| @@ -9,16 +9,16 @@ const { locale } = useI18n(); | |||||
| function handleLanguageChange(lang: string) { | function handleLanguageChange(lang: string) { | ||||
| locale.value = lang; | locale.value = lang; | ||||
| appStore.changeLanguage(lang); | appStore.changeLanguage(lang); | ||||
| if (lang == 'en') { | |||||
| ElMessage.success('Switch Language Successful!'); | |||||
| if (lang == "en") { | |||||
| ElMessage.success("Switch Language Successful!"); | |||||
| } else { | } else { | ||||
| ElMessage.success('切换语言成功!'); | |||||
| ElMessage.success("切换语言成功!"); | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| <template> | <template> | ||||
| <el-dropdown trigger="click" @command="handleLanguageChange"> | |||||
| <el-dropdown class="outSide" trigger="click" @command="handleLanguageChange"> | |||||
| <div> | <div> | ||||
| <svg-icon icon-class="language" /> | <svg-icon icon-class="language" /> | ||||
| </div> | </div> | ||||
| @@ -37,3 +37,9 @@ function handleLanguageChange(lang: string) { | |||||
| </template> | </template> | ||||
| </el-dropdown> | </el-dropdown> | ||||
| </template> | </template> | ||||
| <style lang="scss" scoped> | |||||
| .outSide { | |||||
| cursor: pointer; | |||||
| } | |||||
| </style> | |||||
| @@ -1,22 +1,71 @@ | |||||
| export default { | export default { | ||||
| // 路由国际化 | // 路由国际化 | ||||
| route: { | route: { | ||||
| dashboard: 'Dashboard', | |||||
| document: 'Document' | |||||
| dashboard: "Dashboard", | |||||
| document: "Document", | |||||
| }, | }, | ||||
| // 登录页面国际化 | // 登录页面国际化 | ||||
| login: { | 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: { | 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 { | export default { | ||||
| // 路由国际化 | // 路由国际化 | ||||
| route: { | route: { | ||||
| dashboard: '首页', | |||||
| document: '项目文档' | |||||
| dashboard: "首页", | |||||
| document: "项目文档", | |||||
| }, | }, | ||||
| // 登录页面国际化 | // 登录页面国际化 | ||||
| login: { | login: { | ||||
| title: 'Metavatar-PC', | |||||
| username: '用户名', | |||||
| password: '密码', | |||||
| login: '登 录', | |||||
| verifyCode: '验证码' | |||||
| title: "Metavatar-PC", | |||||
| username: "用户名", | |||||
| password: "密码", | |||||
| login: "登 录", | |||||
| verifyCode: "验证码", | |||||
| }, | }, | ||||
| // 导航栏国际化 | // 导航栏国际化 | ||||
| navbar: { | 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"> | <script setup lang="ts"> | ||||
| import { watch, ref } from "vue"; | import { watch, ref } from "vue"; | ||||
| import { storeToRefs } from "pinia"; | import { storeToRefs } from "pinia"; | ||||
| @@ -5,6 +79,7 @@ import { RouteLocationRaw, useRoute, useRouter } from "vue-router"; | |||||
| import { useAppStore } from "@/store/modules/app"; | import { useAppStore } from "@/store/modules/app"; | ||||
| import { useTagsViewStore } from "@/store/modules/tagsView"; | import { useTagsViewStore } from "@/store/modules/tagsView"; | ||||
| import { useUserStore } from "@/store/modules/user"; | import { useUserStore } from "@/store/modules/user"; | ||||
| import LangSelect from "@/components/LangSelect/index.vue"; | |||||
| const appStore = useAppStore(); | const appStore = useAppStore(); | ||||
| const tagsViewStore = useTagsViewStore(); | const tagsViewStore = useTagsViewStore(); | ||||
| @@ -61,75 +136,6 @@ watch( | |||||
| ); | ); | ||||
| </script> | </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> | <style lang="scss" scoped> | ||||
| .navbar { | .navbar { | ||||
| display: flex; | display: flex; | ||||
| @@ -151,9 +157,9 @@ watch( | |||||
| color: #5a5e66; | color: #5a5e66; | ||||
| text-align: center; | text-align: center; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| margin-right: 25px; | |||||
| &:hover { | &:hover { | ||||
| background: rgb(249 250 251 / 100%); | |||||
| background: #f9fafb; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -177,7 +183,7 @@ watch( | |||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: flex-end; | justify-content: flex-end; | ||||
| height: 50px; | |||||
| height: 80px; | |||||
| padding: 0 20px; | padding: 0 20px; | ||||
| color: #fff; | color: #fff; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| @@ -187,9 +193,18 @@ watch( | |||||
| .avatar { | .avatar { | ||||
| width: 30px; | width: 30px; | ||||
| height: 30px; | height: 30px; | ||||
| margin-right: 5px; | |||||
| background-color: red; | |||||
| margin-right: 10px; | |||||
| margin-left: 20px; | |||||
| background-color: #4769da; | |||||
| border-radius: 50%; | border-radius: 50%; | ||||
| cursor: pointer; | |||||
| } | |||||
| .navItem { | |||||
| cursor: pointer; | |||||
| transition: all 0.3s; | |||||
| &:hover { | |||||
| color: #4769da; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -7,19 +7,19 @@ | |||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-edit /></el-icon> | <el-icon><i-ep-edit /></el-icon> | ||||
| </div> | </div> | ||||
| 创作视频 | |||||
| {{ $t("createVideo.title") }} | |||||
| </div> | </div> | ||||
| <div class="myRouter-item" @click="routerTo('/myCreating')"> | <div class="myRouter-item" @click="routerTo('/myCreating')"> | ||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-menu /></el-icon> | <el-icon><i-ep-menu /></el-icon> | ||||
| </div> | </div> | ||||
| 我的视频 | |||||
| {{ $t("myCreating.title") }} | |||||
| </div> | </div> | ||||
| <div class="myRouter-item pricing" @click="routerTo('/myStore')"> | <div class="myRouter-item pricing" @click="routerTo('/myStore')"> | ||||
| <div class="icon"> | <div class="icon"> | ||||
| <el-icon><i-ep-Goods /></el-icon> | <el-icon><i-ep-Goods /></el-icon> | ||||
| </div> | </div> | ||||
| 商店 | |||||
| {{ $t("shop.title") }} | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- <el-scrollbar> | <!-- <el-scrollbar> | ||||
| @@ -91,6 +91,10 @@ function routerTo(url: RouteLocationRaw) { | |||||
| text-align: center; | text-align: center; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| border-bottom: 2px solid #fff; | border-bottom: 2px solid #fff; | ||||
| transition: all 0.3s; | |||||
| border-radius: 5px; | |||||
| margin-bottom: 20px; | |||||
| margin-right: 20px; | |||||
| .icon { | .icon { | ||||
| width: 40px; | width: 40px; | ||||
| @@ -110,7 +114,7 @@ function routerTo(url: RouteLocationRaw) { | |||||
| &:hover { | &:hover { | ||||
| color: #000; | color: #000; | ||||
| background-color: #fff; | |||||
| background-color: #ffffff; | |||||
| .el-icon { | .el-icon { | ||||
| color: #000; | color: #000; | ||||
| @@ -242,7 +242,7 @@ onMounted(() => { | |||||
| </script> | </script> | ||||
| <template> | <template> | ||||
| <div class="tags-container" v-if="false"> | |||||
| <div v-if="false" class="tags-container"> | |||||
| <scroll-pane ref="scrollPaneRef" @scroll="handleScroll"> | <scroll-pane ref="scrollPaneRef" @scroll="handleScroll"> | ||||
| <router-link | <router-link | ||||
| :class="'tags-item ' + (isActive(tag) ? 'active' : '')" | :class="'tags-item ' + (isActive(tag) ? 'active' : '')" | ||||
| @@ -1,4 +1,5 @@ | |||||
| import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; | import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; | ||||
| import { getCurrentInstance } from "vue"; | |||||
| export const Layout = () => import("@/layout/index.vue"); | export const Layout = () => import("@/layout/index.vue"); | ||||
| @@ -35,7 +36,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
| title: "createVideo", | title: "createVideo", | ||||
| icon: "homepage", | icon: "homepage", | ||||
| affix: true, | affix: true, | ||||
| name: "创作视频", | |||||
| name: "createVideo.title", | |||||
| }, | }, | ||||
| }, | }, | ||||
| ], | ], | ||||
| @@ -54,7 +55,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
| title: "myCreating", | title: "myCreating", | ||||
| icon: "homepage", | icon: "homepage", | ||||
| affix: true, | affix: true, | ||||
| name: "我的视频", | |||||
| name: "myCreating.title", | |||||
| }, | }, | ||||
| }, | }, | ||||
| ], | ], | ||||
| @@ -73,7 +74,7 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
| title: "myAccount", | title: "myAccount", | ||||
| icon: "homepage", | icon: "homepage", | ||||
| affix: true, | affix: true, | ||||
| name: "个人账户", | |||||
| name: "account.title", | |||||
| }, | }, | ||||
| }, | }, | ||||
| ], | ], | ||||
| @@ -106,7 +107,12 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
| path: "myStore", | path: "myStore", | ||||
| component: () => import("@/views/myStore/index.vue"), | component: () => import("@/views/myStore/index.vue"), | ||||
| name: "myStore", | 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(), | history: createWebHashHistory(), | ||||
| routes: constantRoutes as RouteRecordRaw[], | 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 {} | export {} | ||||
| declare global { | declare global { | ||||
| const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
| @@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' | |||||
| declare module 'vue' { | declare module 'vue' { | ||||
| interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | 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 ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
| @@ -20,13 +20,10 @@ declare module '@vue/runtime-core' { | |||||
| ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ||||
| ElIcon: typeof import('element-plus/es')['ElIcon'] | ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
| ElInput: typeof import('element-plus/es')['ElInput'] | 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'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
| ElRow: typeof import('element-plus/es')['ElRow'] | ElRow: typeof import('element-plus/es')['ElRow'] | ||||
| ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ||||
| ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
| ElSubMenu: typeof import("element-plus/es")["ElSubMenu"] | |||||
| ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ||||
| ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
| ElTabs: typeof import('element-plus/es')['ElTabs'] | ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
| @@ -8,12 +8,15 @@ | |||||
| <el-row class="justify-between"> | <el-row class="justify-between"> | ||||
| <!-- title框 --> | <!-- title框 --> | ||||
| <div class="flex justify-between" style="width: 300px"> | <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> | <el-icon class="icon-edit"><i-ep-edit /></el-icon> | ||||
| </div> | </div> | ||||
| <!-- 上传按钮 --> | <!-- 上传按钮 --> | ||||
| <button class="uploadBtn"> | <button class="uploadBtn"> | ||||
| 重新上传 | |||||
| {{ $t("createVideo.reload") }} | |||||
| <input type="file" @change="changeFile" /> | <input type="file" @change="changeFile" /> | ||||
| </button> | </button> | ||||
| </el-row> | </el-row> | ||||
| @@ -60,30 +63,35 @@ | |||||
| <div class="right"> | <div class="right"> | ||||
| <el-tabs type="border-card" class="tabs"> | <el-tabs type="border-card" class="tabs"> | ||||
| <!-- ----------------------------- 1 --> | <!-- ----------------------------- 1 --> | ||||
| <el-tab-pane label="Type you Script"> | |||||
| <el-tab-pane :label="$t('createVideo.typeScript')"> | |||||
| <div class="card1">111111111111111111</div> | <div class="card1">111111111111111111</div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| <!-- ------------------------ 2 --> | <!-- ------------------------ 2 --> | ||||
| <el-tab-pane label="upload audio"> | |||||
| <el-tab-pane :label="$t('createVideo.uploadAudio')"> | |||||
| <div class="card2">22222222222222222</div> | <div class="card2">22222222222222222</div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| <!-- ----------------------- 3 --> | <!-- ----------------------- 3 --> | ||||
| <el-tab-pane label="Ai Script"> | |||||
| <el-tab-pane :label="$t('createVideo.aiScript')"> | |||||
| <div class="card3"> | <div class="card3"> | ||||
| <div class="text"> | <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 | <el-input | ||||
| v-model="title" | v-model="title" | ||||
| :rows="15" | :rows="15" | ||||
| type="textarea" | type="textarea" | ||||
| placeholder="Please input" | |||||
| :placeholder="$t('createVideo.aiText')" | |||||
| /> | /> | ||||
| <el-icon :size="20"> | <el-icon :size="20"> | ||||
| <Edit /> | <Edit /> | ||||
| </el-icon> | </el-icon> | ||||
| </div> | </div> | ||||
| <p>language</p> | |||||
| <p>{{ $t("createVideo.languages") }}</p> | |||||
| <el-select | <el-select | ||||
| v-model="language" | v-model="language" | ||||
| placeholder="Select" | placeholder="Select" | ||||
| @@ -96,7 +104,7 @@ | |||||
| :value="item.value" | :value="item.value" | ||||
| /> | /> | ||||
| </el-select> | </el-select> | ||||
| <p>voices</p> | |||||
| <p>{{ $t("createVideo.voices") }}</p> | |||||
| <el-select | <el-select | ||||
| v-model="language" | v-model="language" | ||||
| placeholder="Select" | placeholder="Select" | ||||
| @@ -109,7 +117,7 @@ | |||||
| :value="item.value" | :value="item.value" | ||||
| /> | /> | ||||
| </el-select> | </el-select> | ||||
| <p>style</p> | |||||
| <p>{{ $t("createVideo.styles") }}</p> | |||||
| <el-select | <el-select | ||||
| v-model="language" | v-model="language" | ||||
| placeholder="Select" | placeholder="Select" | ||||
| @@ -122,7 +130,9 @@ | |||||
| :value="item.value" | :value="item.value" | ||||
| /> | /> | ||||
| </el-select> | </el-select> | ||||
| <el-button type="primary">Generate Video</el-button> | |||||
| <el-button type="primary">{{ | |||||
| $t("createVideo.generateVideo") | |||||
| }}</el-button> | |||||
| </div> | </div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| </el-tabs> | </el-tabs> | ||||
| @@ -139,8 +149,20 @@ function changeFile(e) { | |||||
| imgUrl.value = URL.createObjectURL(e.target.files[0]); | 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的 | // card3的 | ||||
| let language = reactive(""); | let language = reactive(""); | ||||
| let languageOptions = reactive([ | let languageOptions = reactive([ | ||||
| { | { | ||||
| value: "Option1", | value: "Option1", | ||||
| @@ -10,9 +10,9 @@ | |||||
| <div class="info"> | <div class="info"> | ||||
| <div class="name">OLO</div> | <div class="name">OLO</div> | ||||
| <span>weqrewerwer@mail.com</span> | <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> | ||||
| </div> | </div> | ||||
| <!-- 剩余次数 --> | <!-- 剩余次数 --> | ||||
| @@ -20,7 +20,7 @@ | |||||
| <div class="number">3 Videos Generation Left</div> | <div class="number">3 Videos Generation Left</div> | ||||
| <div class="time">Until 2023/12/31</div> | <div class="time">Until 2023/12/31</div> | ||||
| <div class="getMore pointer" @click="routerTo('/myStore')"> | <div class="getMore pointer" @click="routerTo('/myStore')"> | ||||
| 购买更多 | |||||
| {{ $t("account.getMore") }} | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 邀请码 --> | <!-- 邀请码 --> | ||||
| @@ -34,8 +34,8 @@ | |||||
| <span class="bigWord">Generation</span> | <span class="bigWord">Generation</span> | ||||
| </div> | </div> | ||||
| <div class="btns"> | <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> | </div> | ||||
| </div> | </div> | ||||
| @@ -44,24 +44,24 @@ | |||||
| <div class="right"> | <div class="right"> | ||||
| <el-tabs type="border-card" class="tabs"> | <el-tabs type="border-card" class="tabs"> | ||||
| <!-- ----------------------------- 1 --> | <!-- ----------------------------- 1 --> | ||||
| <el-tab-pane label="购买记录"> | |||||
| <el-tab-pane :label="$t('account.buyHistory')"> | |||||
| <div class="card scrolly"> | <div class="card scrolly"> | ||||
| <div class="orderItem" v-for="item in 9" :key="item"> | <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="orderItem-content"> | ||||
| <div class="orderCode"><img src="" alt="" /></div> | <div class="orderCode"><img src="" alt="" /></div> | ||||
| <div class="info"> | <div class="info"> | ||||
| <h5>疯狂星期{{ item }}</h5> | <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> | ||||
| <div class="state">支付成功</div> | |||||
| <div class="state">{{ $t("account.successed") }}</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </el-tab-pane> | </el-tab-pane> | ||||
| <!-- ------------------------ 2 --> | <!-- ------------------------ 2 --> | ||||
| <el-tab-pane label="邀请记录"> | |||||
| <el-tab-pane :label="$t('account.inviteHistory')"> | |||||
| <div class="card scrolly card2"> | <div class="card scrolly card2"> | ||||
| <div class="orderItem" v-for="item in 9" :key="item"> | <div class="orderItem" v-for="item in 9" :key="item"> | ||||
| <div class="orderItem-content"> | <div class="orderItem-content"> | ||||
| @@ -69,9 +69,9 @@ | |||||
| <div class="info"> | <div class="info"> | ||||
| <h5>张{{ item }}</h5> | <h5>张{{ item }}</h5> | ||||
| <p>E-mail:65465468765465@gmail.com</p> | <p>E-mail:65465468765465@gmail.com</p> | ||||
| <p>time:2023/5/2</p> | |||||
| <p>{{ $t("account.date") }}:2023/5/2</p> | |||||
| </div> | </div> | ||||
| <div class="state">获得视频制作次数一次</div> | |||||
| <div class="state">{{ $t("account.msg1") }}</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -247,7 +247,7 @@ function routerTo(url) { | |||||
| } | } | ||||
| .state { | .state { | ||||
| width: 10%; | |||||
| margin-right: 30px; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -263,7 +263,6 @@ function routerTo(url) { | |||||
| } | } | ||||
| .state { | .state { | ||||
| width: 15%; | |||||
| font-size: 14px; | font-size: 14px; | ||||
| line-height: 60px; | line-height: 60px; | ||||
| } | } | ||||
| @@ -3,7 +3,7 @@ | |||||
| <!-- 搜索框 --> | <!-- 搜索框 --> | ||||
| <div class="top"> | <div class="top"> | ||||
| <div class="flex justify-between" style="width: 300px"> | <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> | <el-icon class="icon-edit"><i-ep-edit /></el-icon> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -14,8 +14,8 @@ | |||||
| <img class="inmiddle" src="" alt="" /> | <img class="inmiddle" src="" alt="" /> | ||||
| </div> | </div> | ||||
| <div class="workInfo flex"> | <div class="workInfo flex"> | ||||
| <span>名称</span> | |||||
| <span>时间</span> | |||||
| <span>{{ $t("myCreating.name") }}</span> | |||||
| <span>{{ $t("myCreating.date") }}</span> | |||||
| </div> | </div> | ||||
| <!-- 更多遮罩层 --> | <!-- 更多遮罩层 --> | ||||
| <div | <div | ||||
| @@ -30,13 +30,13 @@ | |||||
| <div class="btns-item-icon"> | <div class="btns-item-icon"> | ||||
| <el-icon class="icon-delete"><i-ep-download /></el-icon> | <el-icon class="icon-delete"><i-ep-download /></el-icon> | ||||
| </div> | </div> | ||||
| <div class="text">下载</div> | |||||
| <div class="text">{{ $t("myCreating.download") }}</div> | |||||
| </div> | </div> | ||||
| <div class="btns-item"> | <div class="btns-item"> | ||||
| <div class="btns-item-icon"> | <div class="btns-item-icon"> | ||||
| <el-icon class="icon-delete"><i-ep-delete /></el-icon> | <el-icon class="icon-delete"><i-ep-delete /></el-icon> | ||||
| </div> | </div> | ||||
| <div class="text">删除</div> | |||||
| <div class="text">{{ $t("myCreating.delete") }}</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -60,13 +60,14 @@ | |||||
| </div> | </div> | ||||
| <template #footer> | <template #footer> | ||||
| <span class="dialog-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> | </span> | ||||
| </template> | </template> | ||||
| </el-dialog> | </el-dialog> | ||||
| @@ -187,17 +188,17 @@ function mouseenter(item) { | |||||
| position: absolute; | position: absolute; | ||||
| top: 45px; | top: 45px; | ||||
| right: 10px; | right: 10px; | ||||
| width: 70px; | |||||
| height: 60px; | |||||
| // width: 70px; | |||||
| // height: 60px; | |||||
| overflow: hidden; | overflow: hidden; | ||||
| border-radius: 10px; | border-radius: 10px; | ||||
| &-item { | &-item { | ||||
| width: 70px; | |||||
| height: 30px; | |||||
| // width: 70px; | |||||
| // height: 30px; | |||||
| text-align: center; | text-align: center; | ||||
| background-color: #fff; | background-color: #fff; | ||||
| padding: 0 10px; | |||||
| &-icon { | &-icon { | ||||
| position: relative; | position: relative; | ||||
| display: inline-block; | display: inline-block; | ||||
| @@ -261,18 +262,15 @@ function mouseenter(item) { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| :deep(.el-button) { | |||||
| .elBtn { | |||||
| color: #fff; | color: #fff; | ||||
| background-color: #000 !important; | |||||
| border: none; | |||||
| border-radius: 10px; | border-radius: 10px; | ||||
| padding: 5px 10px; | |||||
| cursor: pointer; | |||||
| background-color: #000; | |||||
| transition: all 0.3s; | |||||
| &:hover { | &: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="page"> | ||||
| <div class="commoditylIst"> | <div class="commoditylIst"> | ||||
| <div class="item" v-for="item in list" :key="item.title"> | <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> | ||||
| <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> | </div> | ||||
| </div> | </div> | ||||
| @@ -159,82 +159,103 @@ function clickPayDialog(item) { | |||||
| height: 100%; | height: 100%; | ||||
| // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | ||||
| // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | // -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; | 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-size: 30px; | ||||
| font-weight: 700; | 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; | 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 { | .commodityList::-webkit-scrollbar { | ||||
| display: none; /* 隐藏滚动条(Safari、Chrome) */ | display: none; /* 隐藏滚动条(Safari、Chrome) */ | ||||
| } | } | ||||