App.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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', false)
  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. }
  54. body {
  55. -webkit-user-select: text !important;
  56. }
  57. * {
  58. -webkit-user-select: text !important;
  59. -moz-user-select: text !important;
  60. -ms-user-select: text !important;
  61. user-select: text !important;
  62. }
  63. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  64. height: 39px !important;
  65. }
  66. .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  67. height: 39px !important;
  68. border-bottom: 1px solid #1890ff !important;
  69. }
  70. .layout .header {
  71. background-color: #0b2040 !important;
  72. background: #0b2040 !important;
  73. }
  74. </style>