App.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <div id="app" class="flex flex-center flex-col">
  3. <el-main class="single">
  4. <div class="wrapper mt-20" v-if="$route.meta.layout === 'empty'">
  5. <tips />
  6. </div>
  7. <router-view v-slot="{ Component, route }">
  8. <keep-alive :include="keepAlive.list">
  9. <component :is="Component" :key="route.fullPath" />
  10. </keep-alive>
  11. </router-view>
  12. </el-main>
  13. </div>
  14. </template>
  15. <script>
  16. // This starter template is using Vue 3 <script setup> SFCs
  17. // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
  18. import keepAliveStore from '@/store/keepAlive.js'
  19. import top from '@/layout/top.vue'
  20. import router from './router/index.js'
  21. import tips from '@/layout/tips.vue'
  22. export default {
  23. components: { tips, top },
  24. setup() {
  25. const keepAlive = keepAliveStore()
  26. return { keepAlive }
  27. },
  28. data() {
  29. return {
  30. data: '',
  31. type: '33'
  32. }
  33. },
  34. created() {
  35. console.info(
  36. '%c由%c梧桐研究院%c提供技术支持,版本号: v1.0.0',
  37. 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: #707070;',
  38. 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: orange;',
  39. 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: #707070;'
  40. )
  41. },
  42. mounted() {
  43. window.addEventListener('scroll', this.menu)
  44. },
  45. methods: {
  46. router,
  47. menu() {
  48. const scroll =
  49. document.documentElement.scrollTop || document.body.scrollTop
  50. this.$bus.emit('scorll', scroll)
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. #app {
  57. background-color: #f6f7f8;
  58. overflow: hidden;
  59. .single {
  60. height: 100%;
  61. }
  62. }
  63. :deep(.el-main) {
  64. --el-main-padding: 0 !important;
  65. padding: 0 !important;
  66. }
  67. :deep(.el-header) {
  68. padding: 0 !important;
  69. }
  70. </style>