App.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <a-locale-provider :locale="locale">
  3. <div id="app">
  4. <router-view v-if="isRouterAlive"/>
  5. <audio ref="mmPlayer"></audio>
  6. </div>
  7. </a-locale-provider>
  8. </template>
  9. <script>
  10. import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  11. import enquireScreen from '@/utils/device'
  12. import { mapGetters, mapMutations, mapActions } from 'vuex'
  13. export default {
  14. provide(){
  15. return {
  16. reload:this.reload
  17. }
  18. },
  19. data() {
  20. return {
  21. locale: zhCN,
  22. isRouterAlive:true
  23. }
  24. },
  25. created() {
  26. let that = this
  27. enquireScreen((deviceType) => {
  28. // tablet
  29. if (deviceType === 0) {
  30. that.$store.commit('TOGGLE_DEVICE', 'mobile')
  31. that.$store.dispatch('setSidebar', true)
  32. }
  33. // mobile
  34. else if (deviceType === 1) {
  35. that.$store.commit('TOGGLE_DEVICE', 'mobile')
  36. that.$store.dispatch('setSidebar', false)
  37. } else {
  38. that.$store.commit('TOGGLE_DEVICE', 'desktop')
  39. that.$store.dispatch('setSidebar', true)
  40. }
  41. })
  42. this.$nextTick(() => {
  43. this.setAudioele(this.$refs.mmPlayer)
  44. })
  45. },
  46. methods: {
  47. ...mapMutations({
  48. setPlaying: 'SET_PLAYING',
  49. setPlay: 'SET_PLAYLIST',
  50. setCurrentIndex: 'SET_CURRENTINDEX',
  51. setAudioele: 'SET_AUDIOELE',
  52. }),
  53. ...mapGetters(['userInfo']),
  54. reload(){
  55. this.isRouterAlive = false
  56. this.$nextTick(()=>{
  57. this.isRouterAlive = true
  58. })
  59. }
  60. },
  61. }
  62. </script>
  63. <style>
  64. #app {
  65. height: 100%;
  66. min-width: 1280px;
  67. }
  68. body {
  69. -webkit-user-select: text !important;
  70. }
  71. * {
  72. -webkit-user-select: text !important;
  73. -moz-user-select: text !important;
  74. -ms-user-select: text !important;
  75. user-select: text !important;
  76. }
  77. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  78. height: 39px !important;
  79. }
  80. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  81. height: 39px !important;
  82. border-bottom: 1px solid #1890ff !important;
  83. }
  84. .layout .header {
  85. background-color: #0b2040 !important;
  86. background: #0b2040 !important;
  87. }
  88. </style>