|
- <template>
- <div class="app-wrapper">
- <!-- 侧边栏 -->
- <div class="Sidebar">
- <div class="imgBox">
- <img
- class="boxCentreImg"
- src="../assets//img/left-top-logo.png"
- alt=""
- />
- </div>
- <!-- 侧边路由列表 -->
- <div class="myRouter">
- <div class="myRouter-item" @click="router.push('/createVideo')">
- <div class="icon">
- <el-icon><i-ep-edit /></el-icon>
- </div>
- {{ $t("createVideo.title") }}
- </div>
- <div class="myRouter-item" @click="router.push('/myCreating')">
- <div class="icon">
- <el-icon><i-ep-menu /></el-icon>
- </div>
- {{ $t("myCreating.title") }}
- </div>
- <div class="myRouter-item" @click="router.push('/separation')">
- <div class="icon">
- <el-icon><i-ep-user /></el-icon>
- </div>
- {{ $t("userModel.title") }}
- </div>
- <div class="myRouter-item" @click="router.push('/voiceprint')">
- <div class="icon">
- <el-icon><i-ep-phone /></el-icon>
- </div>
- {{ $t("voiceModel.title") }}
- </div>
-
- <!-- <div class="bottomBtx"> -->
- <div class="myRouter-item" @click="router.push('/myStore')">
- <div class="icon">
- <el-icon><i-ep-Goods /></el-icon>
- </div>
- {{ $t("shop.title") }}
- </div>
- <!-- <div class="myRouter-item" @click="router.push('/myAPI')">
- <div class="icon">
- <el-icon><i-ep-DocumentAdd /></el-icon>
- </div>
- {{ $t("API.title") }}
- </div> -->
- <el-menu
- default-active=""
- class="el-menu-vertical-demo"
- active-text-color="#ffd04b"
- background-color="#000"
- text-color="#fff"
- >
- <el-sub-menu index="1">
- <template #title>
- <el-icon><location /></el-icon>
- <span>{{ $t("cooperate.title") }}</span>
- </template>
- <el-menu-item-group>
- <el-menu-item index="1-1">{{ $t("cooperate.api.title") }}</el-menu-item>
- <el-menu-item index="1-2" @click="router.push('/privatization')">{{ $t("cooperate.privatization.title") }} </el-menu-item>
- </el-menu-item-group>
- </el-sub-menu>
- <el-sub-menu index="2">
- <template #title>
- <el-icon><location /></el-icon>
- <span>{{ $t("my.title") }}</span>
- </template>
- <el-menu-item-group>
- <el-menu-item index="2-1" @click="router.push('/myRecharge')">{{ $t("recharge.title") }} </el-menu-item>
- <el-menu-item index="2-2" @click="router.push('/coindeduc')">{{ $t("coindeduc.title") }} </el-menu-item>
- </el-menu-item-group>
- </el-sub-menu>
- </el-menu>
- <!-- </div> -->
- </div>
- </div>
- <!-- 右边显示部分 -->
- <div class="rightBox">
- <!-- nav栏 -->
- <div class="nav">
- <div class="navItem">{{ $t("navbar.currencyValue") }}:{{ currentValue }}</div>
- <!-- 语言 -->
- <el-tooltip
- style="cursor: pointer; z-index: 999"
- class="box-item"
- effect="dark"
- :content="$t('navbar.LanguageChange')"
- placement="top-start"
- >
- <lang-select class="navItem" />
- </el-tooltip>
- <div class="navItem" v-if="currentPhone">{{ currentPhone }}</div>
- <!-- 登录 -->
- <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
- {{ $t("navbar.goLogin") }}
- </div>
- <!-- 注销 -->
- <div
- class="navItem"
- v-if="AccessToken"
- @click="logout"
- style="margin-left: 10px"
- >
- {{ $t("navbar.logout") }}
- </div>
- </div>
- <!-- 主页面 -->
- <app-main style="background-color: #000" />
- </div>
- <!-- 联系我们对话框 -->
- <talkUs
- :showTalkUsDialog="showTalkUsDialog"
- @updateShowTalkUsDialog="updateShowTalkUsDialog"
- ></talkUs>
- </div>
- </template>
-
- <script setup lang="ts">
- import { computed, watchEffect } from "vue";
- import { useWindowSize } from "@vueuse/core";
- import { AppMain, Navbar } from "./components/index";
- import talkUs from "@/components/talkUs.vue";
- import LangSelect from "@/components/LangSelect/index.vue";
- import { useAppStore } from "@/store/modules/app";
- // import { useSettingsStore } from "@/store/modules/settings";
- import { useRoute, useRouter } from "vue-router";
- import { useI18n } from "vue-i18n";
-
- import { userInfoModules } from "@/store/modules/userInfo";
- import { getUserPoinsApi } from '@/apis/my.js'
-
- import {
- Document,
- Menu as IconMenu,
- Location,
- Setting,
- } from '@element-plus/icons-vue'
-
- const userInfoPinia = userInfoModules();
- const route = useRoute();
- const router = useRouter();
- const { params } = route;
- const { width } = useWindowSize();
- const AccessToken = localStorage.getItem("AccessToken");
- // 当前语言状态与国际化组件
- const { locale } = useI18n();
- const lanChange = ref(locale);
- function logout() {
- const msg =
- (lanChange.value as string) == "zh-cn"
- ? "确定退出登录吗?"
- : "Are you sure to log out?";
- const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
- const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
- const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
- ElMessageBox.confirm(msg, notice, {
- confirmButtonText: confirm,
- cancelButtonText: cancel,
- }).then(() => {
- userInfoPinia.loginOut();
- router.push(`/login`);
- localStorage.removeItem("AccessToken");
- });
- }
- /**
- * 响应式布局容器固定宽度
- *
- * 大屏(>=1200px)
- * 中屏(>=992px)
- * 小屏(>=768px)
- */
- const WIDTH = 992;
-
- const appStore = useAppStore();
- // const settingsStore = useSettingsStore();
-
- watchEffect(() => {
- if (width.value < WIDTH) {
- appStore.toggleDevice("mobile");
- appStore.closeSideBar(true);
- } else {
- appStore.toggleDevice("desktop");
-
- if (width.value >= 1200) {
- //大屏
- appStore.openSideBar(true);
- } else {
- appStore.closeSideBar(true);
- }
- }
- });
-
- function handleOutsideClick() {
- appStore.closeSideBar(false);
- }
-
- // 当前币值
- const currentValue = ref('')
- const currentPhone = localStorage.getItem('phone')
- function currentValFn() {
- getUserPoinsApi().then(res => {
- currentValue.value = res.data
- })
- }
-
- onMounted(() => {
- currentValFn()
- });
- //#region 联系我们弹窗
- const showTalkUsDialog = ref(false);
- const updateShowTalkUsDialog = (newValue: any) => {
- showTalkUsDialog.value = newValue;
- };
- //#endregion -----------------------------------
-
- //#region 页面跳转
- function toUserModel() {
- // router.push("/userModel");
- window.location.href = '/priMakeHtml/dingzhifenshen/index.shtml'
- showTalkUsDialog.value = true;
- }
- //#endregion ------------------------------------
- </script>
-
- <!-- 新样式 -->
- <style lang="scss" scoped>
- .app-wrapper {
- width: 100%;
- display: flex;
- overflow: hidden;
- }
- .Sidebar {
- width: 230px;
- background-color: #000;
- height: 100vh;
- color: #fff;
- .imgBox {
- width: 100%;
- height: 80px;
- position: relative;
- img {
- max-width: 80%;
- max-height: 80%;
- }
- }
- .myRouter {
- position: relative;
- height: calc(100% - 80px);
- padding: 40px 20px 0;
- color: #fff;
- user-select: none;
- // color: #868593;
- overflow: auto;
- overflow-x: hidden;
-
- .bottomBtx {
- position: absolute;
- bottom: 30px;
- }
- &-item {
- display: flex;
- width: 100%;
- height: 50px;
- padding-left: 10px;
- font-size: 18px;
- line-height: 50px;
- 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;
- height: 40px;
- color: #fff;
- border-radius: 50%;
-
- .el-icon {
- width: 25px;
- height: 25px;
- font-size: 25px;
- // color: #797a9f;
- color: #fff;
- text-align: center;
- vertical-align: sub;
- }
- }
- &:hover {
- // background: rgba(255, 255, 255, 0.2);
- color: #000;
- background: #fff;
- .el-icon {
- // color: #d4d0ff;
- color: #000;
- }
- }
- }
-
- .pricing {
- position: absolute;
- bottom: 60px;
- width: calc(100% - 40px);
- text-align: center;
- }
- .API {
- position: absolute;
- bottom: 0px;
- width: calc(100% - 40px);
- text-align: center;
- }
- }
- }
- .rightBox {
- width: calc(100% - 230px);
- // background-color: #000;
- .nav {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin-right: 20px;
- width: 100%;
- height: 80px;
- background-color: #000;
- padding: 30px;
- // padding: 30px 30px 0 1500px;
- color: #fff;
- .navItem {
- font-size: 16px;
- margin-right: 30px;
- }
- }
- }
- .el-menu{
- border: none;
- :deep .el-sub-menu__title, :deep .el-menu-item{
- font-size: 18px;
- }
-
- }
- </style>
|