<template>
  <div id="app">
    <Navbar />
    <router-view />
    <Footer />
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { debug } from '@/api/getData.js'
export default {
  components: { Navbar, Footer },
  data () {
    return {
      screenWidth: 0
    }
  },

  watch: {
    screenWidth (val) {
      // 页面开始加载时修改font-size
      var html = document.getElementsByTagName('html')[0]
      // var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      // 这里的750是指设计图的大小,自己根据实际情况改变
      html.style.fontSize = val / 100 + 'px'
      console.log('rem:', html.style.fontSize)
      debug().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  },

  mounted: function () {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100%;
  padding-top: 14vh;
}
</style>
