App.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <a-locale-provider :locale="locale">
  3. <div id="app">
  4. <router-view />
  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. data() {
  15. return {
  16. locale: zhCN,
  17. }
  18. },
  19. created() {
  20. let that = this
  21. enquireScreen((deviceType) => {
  22. // tablet
  23. if (deviceType === 0) {
  24. that.$store.commit('TOGGLE_DEVICE', 'mobile')
  25. that.$store.dispatch('setSidebar', true)
  26. }
  27. // mobile
  28. else if (deviceType === 1) {
  29. that.$store.commit('TOGGLE_DEVICE', 'mobile')
  30. that.$store.dispatch('setSidebar', false)
  31. } else {
  32. that.$store.commit('TOGGLE_DEVICE', 'desktop')
  33. that.$store.dispatch('setSidebar', true)
  34. }
  35. })
  36. this.$nextTick(() => {
  37. this.setAudioele(this.$refs.mmPlayer)
  38. })
  39. },
  40. methods: {
  41. ...mapMutations({
  42. setPlaying: 'SET_PLAYING',
  43. setPlay: 'SET_PLAYLIST',
  44. setCurrentIndex: 'SET_CURRENTINDEX',
  45. setAudioele: 'SET_AUDIOELE',
  46. }),
  47. },
  48. }
  49. </script>
  50. <style>
  51. #app {
  52. height: 100%;
  53. min-width: 1280px;
  54. }
  55. body {
  56. -webkit-user-select: text !important;
  57. }
  58. * {
  59. -webkit-user-select: text !important;
  60. -moz-user-select: text !important;
  61. -ms-user-select: text !important;
  62. user-select: text !important;
  63. }
  64. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  65. height: 39px !important;
  66. }
  67. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  68. height: 39px !important;
  69. border-bottom: 1px solid #1890ff !important;
  70. }
  71. .layout .header {
  72. background-color: #0b2040 !important;
  73. background: #0b2040 !important;
  74. }
  75. </style>