Newer
Older
KaiFengPC / src / App.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <router-view></router-view>
  3.  
  4. <el-popover :width="407" placement="left" v-if="description">
  5. <template #reference>
  6. <div class="menuIcons">
  7. <img src="../src/assets/images/setting/show_menu.png" style="margin-bottom: -3px" />
  8. </div>
  9. </template>
  10. <template #default>
  11. <div class="menu-description flex flex-v">
  12. <div class="description-title flex flex-align-center">文档描述</div>
  13. <div class="description-content" v-html="description"></div>
  14. </div>
  15. </template>
  16. </el-popover>
  17. </template>
  18.  
  19. <script setup>
  20. import { getToken } from '@/utils/auth';
  21. import { listMenu } from '@/api/menu';
  22. import useSettingsStore from '@/store/modules/settings';
  23. import { handleThemeStyle } from '@/utils/theme';
  24. import { useRouter } from 'vue-router';
  25. const router = useRouter();
  26. const description = ref('');
  27. watch(
  28. () => router.currentRoute.value.path,
  29. (newValue, oldValue) => {
  30. if (!!!router.currentRoute.value.meta.title) return;
  31. getMenuList(router.currentRoute.value.meta.title);
  32. },
  33. { immediate: true }
  34. );
  35. function getMenuList(menuName) {
  36. if (getToken()) {
  37. listMenu({ menuName: menuName }).then(res => {
  38. if (res.data.length) {
  39. description.value = res.data[0].description;
  40. } else {
  41. description.value = '';
  42. }
  43. });
  44. }
  45. }
  46. onMounted(() => {
  47. nextTick(() => {
  48. handleThemeStyle(useSettingsStore().theme);
  49. });
  50. });
  51. </script>
  52. <style lang="scss" scoped>
  53. .menuIcons {
  54. position: absolute;
  55. right: 60px;
  56. bottom: 50px;
  57. z-index: 999;
  58. box-shadow: 0px 0px 3px #000000;
  59. border-radius: 50%;
  60. }
  61. :deep(.el-popper) {
  62. padding: 0 !important;
  63. }
  64. .menu-description {
  65. width: 407px;
  66. border-radius: 2px 2px 0px 0px;
  67.  
  68. .description-title {
  69. width: 400px;
  70. height: 50px;
  71. margin: -12px;
  72. background: #1981ff;
  73. border-radius: 2px 2px 0px 0px;
  74. font-size: 18px;
  75. font-family: Source Han Sans CN;
  76. font-weight: 500;
  77. color: #ffffff;
  78. padding-left: 19px;
  79. }
  80. .description-content {
  81. width: 400px;
  82. margin-left: -12px;
  83. margin-right: -12px;
  84. padding: 24px 12px 12px 12px;
  85. font-size: 14px;
  86. font-family: Source Han Sans CN;
  87. font-weight: 500;
  88. color: #666666;
  89. }
  90. }
  91. </style>