邃芒慧影、口播(PC) https://neuver.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

234 lines
5.4 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>
  27. </div>
  28. <!-- 右边显示部分 -->
  29. <div class="rightBox">
  30. <!-- nav栏 -->
  31. <div class="nav">
  32. <!-- 语言 -->
  33. <lang-select class="navItem" />
  34. <!-- 登录 -->
  35. <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
  36. {{ $t("navbar.goLogin") }}
  37. </div>
  38. <!-- 注销 -->
  39. <div
  40. class="navItem"
  41. v-if="AccessToken"
  42. @click="logout"
  43. style="margin-left: 10px"
  44. >
  45. {{ $t("navbar.logout") }}
  46. </div>
  47. </div>
  48. <!-- 主页面 -->
  49. <app-main style="background-color: #000" />
  50. </div>
  51. </div>
  52. </template>
  53. <script setup lang="ts">
  54. import { computed, watchEffect } from "vue";
  55. import { useWindowSize } from "@vueuse/core";
  56. import { AppMain, Navbar } from "./components/index";
  57. import LangSelect from "@/components/LangSelect/index.vue";
  58. import { useAppStore } from "@/store/modules/app";
  59. // import { useSettingsStore } from "@/store/modules/settings";
  60. import { useRoute, useRouter } from "vue-router";
  61. import { useI18n } from "vue-i18n";
  62. import { userInfoModules } from "@/store/modules/userInfo";
  63. const userInfoPinia = userInfoModules();
  64. const route = useRoute();
  65. const router = useRouter();
  66. const { params } = route;
  67. const { width } = useWindowSize();
  68. const AccessToken = localStorage.getItem("AccessToken");
  69. // 当前语言状态与国际化组件
  70. const { locale } = useI18n();
  71. const lanChange = ref(locale);
  72. function logout() {
  73. const msg =
  74. (lanChange.value as string) == "zh-cn"
  75. ? "确定退出登录吗?"
  76. : "Are you sure to log out?";
  77. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  78. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  79. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  80. ElMessageBox.confirm(msg, notice, {
  81. confirmButtonText: confirm,
  82. cancelButtonText: cancel,
  83. }).then(() => {
  84. userInfoPinia.loginOut();
  85. router.push(`/login`);
  86. localStorage.removeItem("AccessToken");
  87. });
  88. }
  89. /**
  90. * 响应式布局容器固定宽度
  91. *
  92. * 大屏(>=1200px)
  93. * 中屏(>=992px)
  94. * 小屏(>=768px)
  95. */
  96. const WIDTH = 992;
  97. const appStore = useAppStore();
  98. // const settingsStore = useSettingsStore();
  99. watchEffect(() => {
  100. if (width.value < WIDTH) {
  101. appStore.toggleDevice("mobile");
  102. appStore.closeSideBar(true);
  103. } else {
  104. appStore.toggleDevice("desktop");
  105. if (width.value >= 1200) {
  106. //大屏
  107. appStore.openSideBar(true);
  108. } else {
  109. appStore.closeSideBar(true);
  110. }
  111. }
  112. });
  113. function handleOutsideClick() {
  114. appStore.closeSideBar(false);
  115. }
  116. onMounted(() => {});
  117. </script>
  118. <!-- 新样式 -->
  119. <style lang="scss" scoped>
  120. .app-wrapper {
  121. width: 1920px;
  122. display: flex;
  123. }
  124. .Sidebar {
  125. width: 230px;
  126. background-color: #000;
  127. height: 100vh;
  128. color: #fff;
  129. .imgBox {
  130. width: 100%;
  131. height: 80px;
  132. position: relative;
  133. img {
  134. max-width: 80%;
  135. max-height: 80%;
  136. }
  137. }
  138. .myRouter {
  139. position: relative;
  140. height: calc(100% - 80px);
  141. padding: 200px 20px 0;
  142. color: #fff;
  143. // color: #868593;
  144. &-item {
  145. display: flex;
  146. width: 100%;
  147. height: 50px;
  148. padding-left: 10px;
  149. font-size: 20px;
  150. font-weight: 500;
  151. line-height: 50px;
  152. text-align: center;
  153. cursor: pointer;
  154. // border-bottom: 2px solid #fff;
  155. transition: all 0.3s;
  156. border-radius: 5px;
  157. margin-bottom: 20px;
  158. margin-right: 20px;
  159. .icon {
  160. width: 40px;
  161. height: 40px;
  162. color: #fff;
  163. border-radius: 50%;
  164. .el-icon {
  165. width: 25px;
  166. height: 25px;
  167. font-size: 25px;
  168. // color: #797a9f;
  169. color: #fff;
  170. text-align: center;
  171. vertical-align: sub;
  172. }
  173. }
  174. &:hover {
  175. // background: rgba(255, 255, 255, 0.2);
  176. color: #000;
  177. background: #fff;
  178. .el-icon {
  179. // color: #d4d0ff;
  180. color: #000;
  181. }
  182. }
  183. }
  184. .pricing {
  185. position: absolute;
  186. bottom: 60px;
  187. width: calc(100% - 40px);
  188. text-align: center;
  189. }
  190. .API {
  191. position: absolute;
  192. bottom: 0px;
  193. width: calc(100% - 40px);
  194. text-align: center;
  195. }
  196. }
  197. }
  198. .rightBox {
  199. width: 1690px;
  200. // background-color: #000;
  201. .nav {
  202. display: flex;
  203. justify-content: flex-end;
  204. align-items: center;
  205. margin-right: 20px;
  206. width: 100%;
  207. height: 80px;
  208. background-color: #000;
  209. padding: 30px;
  210. // padding: 30px 30px 0 1500px;
  211. color: #fff;
  212. .navItem {
  213. font-size: 16px;
  214. margin-right: 30px;
  215. }
  216. }
  217. }
  218. </style>