邃芒慧影、口播(PC) https://neuver.metavatar.cc/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

350 行
9.2 KiB

  1. <template>
  2. <div class="app-wrapper">
  3. <!-- 侧边栏 -->
  4. <div class="Sidebar">
  5. <div class="imgBox">
  6. <img
  7. class="boxCentreImg"
  8. src="../assets//img/left-top-logo.png"
  9. alt=""
  10. />
  11. </div>
  12. <!-- 侧边路由列表 -->
  13. <div class="myRouter">
  14. <div class="myRouter-item" @click="router.push('/createVideo')">
  15. <div class="icon">
  16. <el-icon><i-ep-edit /></el-icon>
  17. </div>
  18. {{ $t("createVideo.title") }}
  19. </div>
  20. <div class="myRouter-item" @click="router.push('/myCreating')">
  21. <div class="icon">
  22. <el-icon><i-ep-menu /></el-icon>
  23. </div>
  24. {{ $t("myCreating.title") }}
  25. </div>
  26. <div class="myRouter-item" @click="router.push('/separation')">
  27. <div class="icon">
  28. <el-icon><i-ep-user /></el-icon>
  29. </div>
  30. {{ $t("userModel.title") }}
  31. </div>
  32. <div class="myRouter-item" @click="router.push('/voiceprint')">
  33. <div class="icon">
  34. <el-icon><i-ep-phone /></el-icon>
  35. </div>
  36. {{ $t("voiceModel.title") }}
  37. </div>
  38. <!-- <div class="bottomBtx"> -->
  39. <div class="myRouter-item" @click="router.push('/myStore')">
  40. <div class="icon">
  41. <el-icon><i-ep-Goods /></el-icon>
  42. </div>
  43. {{ $t("shop.title") }}
  44. </div>
  45. <!-- <div class="myRouter-item" @click="router.push('/myAPI')">
  46. <div class="icon">
  47. <el-icon><i-ep-DocumentAdd /></el-icon>
  48. </div>
  49. {{ $t("API.title") }}
  50. </div> -->
  51. <el-menu
  52. default-active=""
  53. class="el-menu-vertical-demo"
  54. active-text-color="#ffd04b"
  55. background-color="#000"
  56. text-color="#fff"
  57. >
  58. <el-sub-menu index="1">
  59. <template #title>
  60. <el-icon><location /></el-icon>
  61. <span>{{ $t("cooperate.title") }}</span>
  62. </template>
  63. <el-menu-item-group>
  64. <el-menu-item index="1-1">{{ $t("cooperate.api.title") }}</el-menu-item>
  65. <el-menu-item index="1-2" @click="router.push('/privatization')">{{ $t("cooperate.privatization.title") }} </el-menu-item>
  66. </el-menu-item-group>
  67. </el-sub-menu>
  68. <el-sub-menu index="2">
  69. <template #title>
  70. <el-icon><location /></el-icon>
  71. <span>{{ $t("my.title") }}</span>
  72. </template>
  73. <el-menu-item-group>
  74. <el-menu-item index="2-1" @click="router.push('/myRecharge')">{{ $t("recharge.title") }} </el-menu-item>
  75. <el-menu-item index="2-2" @click="router.push('/coindeduc')">{{ $t("coindeduc.title") }} </el-menu-item>
  76. </el-menu-item-group>
  77. </el-sub-menu>
  78. </el-menu>
  79. <!-- </div> -->
  80. </div>
  81. </div>
  82. <!-- 右边显示部分 -->
  83. <div class="rightBox">
  84. <!-- nav栏 -->
  85. <div class="nav">
  86. <div class="navItem">{{ $t("navbar.currencyValue") }}:{{ currentValue }}</div>
  87. <!-- 语言 -->
  88. <el-tooltip
  89. style="cursor: pointer; z-index: 999"
  90. class="box-item"
  91. effect="dark"
  92. :content="$t('navbar.LanguageChange')"
  93. placement="top-start"
  94. >
  95. <lang-select class="navItem" />
  96. </el-tooltip>
  97. <div class="navItem" v-if="currentPhone">{{ currentPhone }}</div>
  98. <!-- 登录 -->
  99. <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
  100. {{ $t("navbar.goLogin") }}
  101. </div>
  102. <!-- 注销 -->
  103. <div
  104. class="navItem"
  105. v-if="AccessToken"
  106. @click="logout"
  107. style="margin-left: 10px"
  108. >
  109. {{ $t("navbar.logout") }}
  110. </div>
  111. </div>
  112. <!-- 主页面 -->
  113. <app-main style="background-color: #000" />
  114. </div>
  115. <!-- 联系我们对话框 -->
  116. <talkUs
  117. :showTalkUsDialog="showTalkUsDialog"
  118. @updateShowTalkUsDialog="updateShowTalkUsDialog"
  119. ></talkUs>
  120. </div>
  121. </template>
  122. <script setup lang="ts">
  123. import { computed, watchEffect } from "vue";
  124. import { useWindowSize } from "@vueuse/core";
  125. import { AppMain, Navbar } from "./components/index";
  126. import talkUs from "@/components/talkUs.vue";
  127. import LangSelect from "@/components/LangSelect/index.vue";
  128. import { useAppStore } from "@/store/modules/app";
  129. // import { useSettingsStore } from "@/store/modules/settings";
  130. import { useRoute, useRouter } from "vue-router";
  131. import { useI18n } from "vue-i18n";
  132. import { userInfoModules } from "@/store/modules/userInfo";
  133. import { getUserPoinsApi } from '@/apis/my.js'
  134. import {
  135. Document,
  136. Menu as IconMenu,
  137. Location,
  138. Setting,
  139. } from '@element-plus/icons-vue'
  140. const userInfoPinia = userInfoModules();
  141. const route = useRoute();
  142. const router = useRouter();
  143. const { params } = route;
  144. const { width } = useWindowSize();
  145. const AccessToken = localStorage.getItem("AccessToken");
  146. // 当前语言状态与国际化组件
  147. const { locale } = useI18n();
  148. const lanChange = ref(locale);
  149. function logout() {
  150. const msg =
  151. (lanChange.value as string) == "zh-cn"
  152. ? "确定退出登录吗?"
  153. : "Are you sure to log out?";
  154. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  155. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  156. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  157. ElMessageBox.confirm(msg, notice, {
  158. confirmButtonText: confirm,
  159. cancelButtonText: cancel,
  160. }).then(() => {
  161. userInfoPinia.loginOut();
  162. router.push(`/login`);
  163. localStorage.removeItem("AccessToken");
  164. });
  165. }
  166. /**
  167. * 响应式布局容器固定宽度
  168. *
  169. * 大屏(>=1200px)
  170. * 中屏(>=992px)
  171. * 小屏(>=768px)
  172. */
  173. const WIDTH = 992;
  174. const appStore = useAppStore();
  175. // const settingsStore = useSettingsStore();
  176. watchEffect(() => {
  177. if (width.value < WIDTH) {
  178. appStore.toggleDevice("mobile");
  179. appStore.closeSideBar(true);
  180. } else {
  181. appStore.toggleDevice("desktop");
  182. if (width.value >= 1200) {
  183. //大屏
  184. appStore.openSideBar(true);
  185. } else {
  186. appStore.closeSideBar(true);
  187. }
  188. }
  189. });
  190. function handleOutsideClick() {
  191. appStore.closeSideBar(false);
  192. }
  193. // 当前币值
  194. const currentValue = ref('')
  195. const currentPhone = localStorage.getItem('phone')
  196. function currentValFn() {
  197. getUserPoinsApi().then(res => {
  198. currentValue.value = res.data
  199. })
  200. }
  201. onMounted(() => {
  202. currentValFn()
  203. });
  204. //#region 联系我们弹窗
  205. const showTalkUsDialog = ref(false);
  206. const updateShowTalkUsDialog = (newValue: any) => {
  207. showTalkUsDialog.value = newValue;
  208. };
  209. //#endregion -----------------------------------
  210. //#region 页面跳转
  211. function toUserModel() {
  212. // router.push("/userModel");
  213. window.location.href = '/priMakeHtml/dingzhifenshen/index.shtml'
  214. showTalkUsDialog.value = true;
  215. }
  216. //#endregion ------------------------------------
  217. </script>
  218. <!-- 新样式 -->
  219. <style lang="scss" scoped>
  220. .app-wrapper {
  221. width: 100%;
  222. display: flex;
  223. overflow: hidden;
  224. }
  225. .Sidebar {
  226. width: 230px;
  227. background-color: #000;
  228. height: 100vh;
  229. color: #fff;
  230. .imgBox {
  231. width: 100%;
  232. height: 80px;
  233. position: relative;
  234. img {
  235. max-width: 80%;
  236. max-height: 80%;
  237. }
  238. }
  239. .myRouter {
  240. position: relative;
  241. height: calc(100% - 80px);
  242. padding: 40px 20px 0;
  243. color: #fff;
  244. user-select: none;
  245. // color: #868593;
  246. overflow: auto;
  247. overflow-x: hidden;
  248. .bottomBtx {
  249. position: absolute;
  250. bottom: 30px;
  251. }
  252. &-item {
  253. display: flex;
  254. width: 100%;
  255. height: 50px;
  256. padding-left: 10px;
  257. font-size: 18px;
  258. line-height: 50px;
  259. text-align: center;
  260. cursor: pointer;
  261. // border-bottom: 2px solid #fff;
  262. transition: all 0.3s;
  263. border-radius: 5px;
  264. margin-bottom: 20px;
  265. margin-right: 20px;
  266. .icon {
  267. width: 40px;
  268. height: 40px;
  269. color: #fff;
  270. border-radius: 50%;
  271. .el-icon {
  272. width: 25px;
  273. height: 25px;
  274. font-size: 25px;
  275. // color: #797a9f;
  276. color: #fff;
  277. text-align: center;
  278. vertical-align: sub;
  279. }
  280. }
  281. &:hover {
  282. // background: rgba(255, 255, 255, 0.2);
  283. color: #000;
  284. background: #fff;
  285. .el-icon {
  286. // color: #d4d0ff;
  287. color: #000;
  288. }
  289. }
  290. }
  291. .pricing {
  292. position: absolute;
  293. bottom: 60px;
  294. width: calc(100% - 40px);
  295. text-align: center;
  296. }
  297. .API {
  298. position: absolute;
  299. bottom: 0px;
  300. width: calc(100% - 40px);
  301. text-align: center;
  302. }
  303. }
  304. }
  305. .rightBox {
  306. width: calc(100% - 230px);
  307. // background-color: #000;
  308. .nav {
  309. display: flex;
  310. justify-content: flex-end;
  311. align-items: center;
  312. margin-right: 20px;
  313. width: 100%;
  314. height: 80px;
  315. background-color: #000;
  316. padding: 30px;
  317. // padding: 30px 30px 0 1500px;
  318. color: #fff;
  319. .navItem {
  320. font-size: 16px;
  321. margin-right: 30px;
  322. }
  323. }
  324. }
  325. .el-menu{
  326. border: none;
  327. :deep .el-sub-menu__title, :deep .el-menu-item{
  328. font-size: 18px;
  329. }
  330. }
  331. </style>