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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <!-- :sources="[bgVideo]" -->
  3. <video-bg :sources="[]">
  4. <div class="as-layout-horizontal" style="width: 100%; height: 100%; opacity: 0.9">
  5. <!-- 此处先划出布局形式(按左右布局划分,左边菜单,右边内容) -->
  6. <!-- 菜单部分 -->
  7. <div class="bg-theme" style="height: 100%">
  8. <!-- 菜单头部部分 -->
  9. <div class="as-gravity-center-start" @click="barkHome" style="height: 70px;cursor: pointer;">
  10. <img rel="icon" src="/logo2.png" style="width: 60px; height: 60px" />
  11. <!-- D-UI框架模板 -->
  12. <div class="as-bold" style="font-size: 18px; color: #ffffff;user-select:none;"
  13. v-show="menuStart.menuIsExpansion">黔通智联</div>
  14. </div>
  15. <!-- 菜单主体部分 height="100%" -->
  16. <div class="as-border-width" style="height: 100%; background-color: #ffffff">
  17. <el-scrollbar max-height="90%">
  18. <el-menu :default-active="menuIndex.menuIndex" mode="vertical" :router="false" @select="select"
  19. :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo">
  20. <sidebar-item :list="list" />
  21. </el-menu>
  22. </el-scrollbar>
  23. </div>
  24. </div>
  25. <div class="as-weight as-layout-vertical">
  26. <!-- 头部选项 -->
  27. <div class="bg-theme" style="padding: 0px 10px 0px 10px; height: 70px">
  28. <Head style="height: 70px"></Head>
  29. </div>
  30. <el-scrollbar>
  31. <div class="as-layout-vertical">
  32. <!-- 头部 height: 8%;-->
  33. <div style="background-color: #ffffff; padding: 10px 0px 10px 0px">
  34. <!-- 选项卡 -->
  35. <tab-container> </tab-container>
  36. <!-- 主体内容页面 -->
  37. <router-view name="key"></router-view>
  38. <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
  39. <!-- <router-view name="key" v-slot="{ Component }">
  40. <keep-alive style="height:100vh">
  41. <component :is="Component" />
  42. </keep-alive>
  43. </router-view> -->
  44. </div>
  45. </div>
  46. </el-scrollbar>
  47. </div>
  48. </div>
  49. </video-bg>
  50. </template>
  51. <script setup lang="ts">
  52. // @ts-ignore 选项菜单
  53. import SidebarItem from '@/layout/components/SidebarItem.vue'
  54. // @ts-ignore 选项头部
  55. import Head from '@/layout/components/Head.vue'
  56. // @ts-ignore Tab选项
  57. import TabContainer from '@/layout/components/TabControl.vue'
  58. import VideoBg from '@/components/VideoBackround/VideoBackground.vue' //视频背景组件
  59. import BgTwo from '@/assets/video/homeBg.mp4' //视频资源
  60. import $store from '@/store/index' // 引入vuex
  61. import $storeTab from '@/store/tabValue' //引入tab vuex
  62. import { list } from '@/data/menuData'
  63. import { ref, reactive, onMounted } from 'vue'
  64. import { useRouter } from 'vue-router'
  65. const bgVideo = BgTwo
  66. const router = useRouter()
  67. //默认菜单为打开状态
  68. let menuStart = ref($store.state.data)
  69. let menuIndex = ref($storeTab.state.editableTabsValue)
  70. //处理刷新页面重置问题
  71. onMounted(() => {
  72. const newTab = sessionStorage.getItem('newTab')
  73. if (newTab) {
  74. let dataTabs = JSON.parse(newTab)
  75. dataTabs.name = '1'
  76. let value = {
  77. type: 1,
  78. data: dataTabs,
  79. }
  80. console.log(dataTabs);
  81. $storeTab.dispatch('addTab', value)
  82. $storeTab.dispatch('updateETV', 1 + '')
  83. $storeTab.dispatch('updateMI', `${dataTabs.title},${dataTabs.path}`)
  84. } else {
  85. router.replace({
  86. name: 'home',
  87. })
  88. }
  89. sessionStorage.removeItem('newTab')
  90. })
  91. //返回首页
  92. const barkHome = (() => {
  93. //更新菜单索引
  94. $storeTab.dispatch('updateETV', 0 + '')
  95. router.replace({
  96. name: 'home'
  97. })
  98. })
  99. //菜单选择监听(添加选项卡成功则添加,有就进行跳转)
  100. //data(菜单名称,菜单路径)
  101. function select(data: unknown) {
  102. //这里只负责tab,不负责跳转
  103. let value = {
  104. type: 2,
  105. data: data,
  106. }
  107. $storeTab.dispatch('addTab', value)
  108. }
  109. </script>
  110. <!-- padding-bottom: 40px; -->
  111. <!-- min-height: 400px; -->
  112. <style lang="scss" scoped>
  113. .el-menu-vertical-demo:not(.el-menu--collapse) {
  114. width: 248px;
  115. border-width: 0px;
  116. }
  117. .bg-theme {
  118. background-color: $test-color;
  119. }
  120. </style>