邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

333 rindas
8.5 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="toUserModel">
  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="showTalkUsDialog = true">
  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">{{ $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>我的</span>
  72. </template>
  73. <el-menu-item-group>
  74. <el-menu-item index="2-1" @click="router.push('/myRecharge')">充值订单</el-menu-item>
  75. <el-menu-item index="2-2" @click="router.push('/coindeduc')">扣币订单</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. <!-- 语言 -->
  87. <el-tooltip
  88. style="cursor: pointer; z-index: 999"
  89. class="box-item"
  90. effect="dark"
  91. :content="$t('navbar.LanguageChange')"
  92. placement="top-start"
  93. >
  94. <lang-select class="navItem" />
  95. </el-tooltip>
  96. <!-- 登录 -->
  97. <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
  98. {{ $t("navbar.goLogin") }}
  99. </div>
  100. <!-- 注销 -->
  101. <div
  102. class="navItem"
  103. v-if="AccessToken"
  104. @click="logout"
  105. style="margin-left: 10px"
  106. >
  107. {{ $t("navbar.logout") }}
  108. </div>
  109. </div>
  110. <!-- 主页面 -->
  111. <app-main style="background-color: #000" />
  112. </div>
  113. <!-- 联系我们对话框 -->
  114. <talkUs
  115. :showTalkUsDialog="showTalkUsDialog"
  116. @updateShowTalkUsDialog="updateShowTalkUsDialog"
  117. ></talkUs>
  118. </div>
  119. </template>
  120. <script setup lang="ts">
  121. import { computed, watchEffect } from "vue";
  122. import { useWindowSize } from "@vueuse/core";
  123. import { AppMain, Navbar } from "./components/index";
  124. import talkUs from "@/components/talkUs.vue";
  125. import LangSelect from "@/components/LangSelect/index.vue";
  126. import { useAppStore } from "@/store/modules/app";
  127. // import { useSettingsStore } from "@/store/modules/settings";
  128. import { useRoute, useRouter } from "vue-router";
  129. import { useI18n } from "vue-i18n";
  130. import { userInfoModules } from "@/store/modules/userInfo";
  131. import {
  132. Document,
  133. Menu as IconMenu,
  134. Location,
  135. Setting,
  136. } from '@element-plus/icons-vue'
  137. const userInfoPinia = userInfoModules();
  138. const route = useRoute();
  139. const router = useRouter();
  140. const { params } = route;
  141. const { width } = useWindowSize();
  142. const AccessToken = localStorage.getItem("AccessToken");
  143. // 当前语言状态与国际化组件
  144. const { locale } = useI18n();
  145. const lanChange = ref(locale);
  146. function logout() {
  147. const msg =
  148. (lanChange.value as string) == "zh-cn"
  149. ? "确定退出登录吗?"
  150. : "Are you sure to log out?";
  151. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  152. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  153. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  154. ElMessageBox.confirm(msg, notice, {
  155. confirmButtonText: confirm,
  156. cancelButtonText: cancel,
  157. }).then(() => {
  158. userInfoPinia.loginOut();
  159. router.push(`/login`);
  160. localStorage.removeItem("AccessToken");
  161. });
  162. }
  163. /**
  164. * 响应式布局容器固定宽度
  165. *
  166. * 大屏(>=1200px)
  167. * 中屏(>=992px)
  168. * 小屏(>=768px)
  169. */
  170. const WIDTH = 992;
  171. const appStore = useAppStore();
  172. // const settingsStore = useSettingsStore();
  173. watchEffect(() => {
  174. if (width.value < WIDTH) {
  175. appStore.toggleDevice("mobile");
  176. appStore.closeSideBar(true);
  177. } else {
  178. appStore.toggleDevice("desktop");
  179. if (width.value >= 1200) {
  180. //大屏
  181. appStore.openSideBar(true);
  182. } else {
  183. appStore.closeSideBar(true);
  184. }
  185. }
  186. });
  187. function handleOutsideClick() {
  188. appStore.closeSideBar(false);
  189. }
  190. onMounted(() => {});
  191. //#region 联系我们弹窗
  192. const showTalkUsDialog = ref(false);
  193. const updateShowTalkUsDialog = (newValue: any) => {
  194. showTalkUsDialog.value = newValue;
  195. };
  196. //#endregion -----------------------------------
  197. //#region 页面跳转
  198. function toUserModel() {
  199. router.push("/userModel");
  200. showTalkUsDialog.value = true;
  201. }
  202. //#endregion ------------------------------------
  203. </script>
  204. <!-- 新样式 -->
  205. <style lang="scss" scoped>
  206. .app-wrapper {
  207. width: 1920px;
  208. display: flex;
  209. }
  210. .Sidebar {
  211. width: 230px;
  212. background-color: #000;
  213. height: 100vh;
  214. color: #fff;
  215. .imgBox {
  216. width: 100%;
  217. height: 80px;
  218. position: relative;
  219. img {
  220. max-width: 80%;
  221. max-height: 80%;
  222. }
  223. }
  224. .myRouter {
  225. position: relative;
  226. height: calc(100% - 80px);
  227. padding: 130px 20px 0;
  228. color: #fff;
  229. user-select: none;
  230. // color: #868593;
  231. .bottomBtx {
  232. position: absolute;
  233. bottom: 30px;
  234. }
  235. &-item {
  236. display: flex;
  237. width: 100%;
  238. height: 50px;
  239. padding-left: 10px;
  240. font-size: 20px;
  241. font-weight: 500;
  242. line-height: 50px;
  243. text-align: center;
  244. cursor: pointer;
  245. // border-bottom: 2px solid #fff;
  246. transition: all 0.3s;
  247. border-radius: 5px;
  248. margin-bottom: 20px;
  249. margin-right: 20px;
  250. .icon {
  251. width: 40px;
  252. height: 40px;
  253. color: #fff;
  254. border-radius: 50%;
  255. .el-icon {
  256. width: 25px;
  257. height: 25px;
  258. font-size: 25px;
  259. // color: #797a9f;
  260. color: #fff;
  261. text-align: center;
  262. vertical-align: sub;
  263. }
  264. }
  265. &:hover {
  266. // background: rgba(255, 255, 255, 0.2);
  267. color: #000;
  268. background: #fff;
  269. .el-icon {
  270. // color: #d4d0ff;
  271. color: #000;
  272. }
  273. }
  274. }
  275. .pricing {
  276. position: absolute;
  277. bottom: 60px;
  278. width: calc(100% - 40px);
  279. text-align: center;
  280. }
  281. .API {
  282. position: absolute;
  283. bottom: 0px;
  284. width: calc(100% - 40px);
  285. text-align: center;
  286. }
  287. }
  288. }
  289. .rightBox {
  290. width: 1690px;
  291. // background-color: #000;
  292. .nav {
  293. display: flex;
  294. justify-content: flex-end;
  295. align-items: center;
  296. margin-right: 20px;
  297. width: 100%;
  298. height: 80px;
  299. background-color: #000;
  300. padding: 30px;
  301. // padding: 30px 30px 0 1500px;
  302. color: #fff;
  303. .navItem {
  304. font-size: 16px;
  305. margin-right: 30px;
  306. }
  307. }
  308. }
  309. .el-menu{
  310. border: none;
  311. :deep .el-sub-menu__title, :deep .el-menu-item{
  312. font-size: 20px;
  313. font-weight: 500;
  314. }
  315. }
  316. </style>