<template lang="pug">
  div(id="app" :class="classMedia")
    //- 淡入淡出: App.vue 使用页面返回会跳动: transition(name="fade")
    router-view
</template>

<script>
export default {
  computed: {
    // 实现了@media功能, 兼容高分屏方案
    classMedia() {
      const { mob, pad, pc } = this.$store.getters.media;
      const native = this.$store.state.config.native;
      return {
        "media-mob": mob,
        "media-pad": pad,
        "media-pc": pc,
        // 移动设备, 监听运行环境是否移动设备
        "device-native": native,
        "device-web": !native
      };
    }
  }
};
</script>

<style lang="stylus">
// 全局样式 & 样式重置导入 - 细节详见 README.md
@import '~@/styles/loader/common'
@import '~@/styles/loader/browser.reset'

// 通过vuex实现了高分屏兼容@media布局: 控制显示设备, only 当前设备显示, not 当前设备隐藏(_注意理解 `only` 的含义_)
.media-mob
  .only-pad, .only-pc, .not-mob
    display: none

.media-pad
  .only-mob, .only-pc, .not-pad
    display: none

.media-pc
  .only-pad, .only-mob, .not-pc
    display: none

// 移动设备, 监听运行环境是否移动设备
.device-native
  .only-web, .not-native
    display: none

.device-web
  .only-native, .not-web
    display: none
</style>
