优化曲靖M的H5页面vconsole.js的调试按钮位置

刚刚安装了vconsole.js调试神器，但是在右下角的调试按钮遮拦了页面其他元素，并且绿色的按钮显得不协调。所以想办法对其做一些调整。

修改App.vue

mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      let marginBot = 0
      if (document.documentElement.scrollTop) {
        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop + document.body.scrollTop) - document.documentElement.clientHeight
      } else {
        marginBot = document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight
      }
      if (marginBot <= 0) {
        const vconsoleContainer = document.getElementById('__vconsole')
        vconsoleContainer.style.display = 'block'
        const cnode = vconsoleContainer.childNodes
        for (let index = 0; index < cnode.length; index++) {
          const element = cnode[index]
          if (element.className === 'vc-switch') {
            element.style.bottom = '50px'
            element.style.backgroundColor = 'transparent'
            element.style.boxShadow = 'none'
          }
        }
        document.getElementById('__vconsole').style.display = 'block'
      } else {
        document.getElementById('__vconsole').style.display = 'none'
      }
    }
  }

#__vconsole {
  display: none;
}

上面代码的目的是默认让右下角的绿色调试按钮隐藏，待页面滑到最下面的时候再显示出来。