<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
  import HelloWorld from "@/components/HelloWorld.vue";
  export default {
    components: {
      HelloWorld
    },
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true
      }
    },
    mounted() {
      // 是否直接打开报名页
      (() => {
        location.search.split('&').map(item => {
          if (item.indexOf('goPartakeChallenge') > -1) {
            this.$router.push({name: 'PartakeChallenge'});
            sessionStorage.setItem('goPartakeChallenge', item.split('=')[1]);
          }
        });
      })();
      // 计算rem比例
      (function (win) {
        var doc = win.document;
        var html = doc.documentElement;
        //            基于750px方案的设计稿
        ////////////////////////////////////////////////////
        //            通用的做法是将设计稿中的100px换算为1rem
        //            因此，当我们已知设计稿的宽度baseWidth,还有屏幕的实际宽度clientWidth时，1rem对于屏幕的实际宽度为：
        //            html-font-size =  clientWidth / (baseWidth/100) px
        ///////////////////////////////////////////////////
        var baseWidth = 750,
          grids = baseWidth / 100,
          resizeEvt = "orientationchange" in win ? "orientationchange" : "resize",
          recalc = function () {
            //                        默认尺寸为320px
            var clientWidth = html.clientWidth || 640;
            //                        如果屏幕尺寸大于750，则按750宽度进行计算
            if (clientWidth > 750) {
              clientWidth = 750;
            }

            html.style.fontSize = clientWidth / grids + "px";
            // document.querySelector(".content").style.display = "block";
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener(
          "DOMContentLoaded",
          function () {
            setTimeout(recalc);
          },
          false
        );
      })(window);
    },
    methods: {
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(() => {
          this.isRouterAlive = true;
        })
      }
    }
  };
</script>
<style lang="stylus">
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }

  body {
    line-height: 1;
    font-family: Helvetica
  }

  ol,
  ul {
    list-style: none;
  }

  blockquote,
  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  body,html,#app
    margin 0
    width 100%
    height 100%
</style>