邃芒慧影管理端
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

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