nebula/components/layouts/pc/main.vue

<template>
  <el-container>
    <el-header>
      <header-view/>
    </el-header>
    <el-main>
      <nuxt :nuxt-child-key="$route.name"/>
    </el-main>
    <el-footer height="5rem">
      <footer-view/>
    </el-footer>
    <div v-if="isPostArticle && isShow" style="position: fixed;bottom: 10vh;right: 3vw;">
      <el-col v-if="isPostArticle" :xs="0" :xl="24">
        <el-popover
          placement="right"
          width="20"
          trigger="hover">
          <el-col>
            <el-image :src="gzh"></el-image>
          </el-col>
          <el-col class="text-center">
            <span>扫码关注公众号</span>
          </el-col>
          <el-button slot="reference" circle><img style="width: 14px;height: 14px;" :src="wx" fit="cover"/>
          </el-button>
        </el-popover>
      </el-col>
      <el-col style="padding-top: 1rem;" :xs="0" :xl="24">
        <el-button circle @click="backTop" icon="el-icon-caret-top"></el-button>
      </el-col>
    </div>
  </el-container>
</template>

<script>
  import {mapState} from 'vuex';
  import HeaderView from "./header";
  import FooterView from "./footer";
  import wx from "~/assets/weixin.png";
  import gzh from "~/assets/rymcugzh.jpg";

  export default {
    name: "PcMain",
    components: {
      HeaderView,
      FooterView
    },
    computed: {
      ...mapState('global', []),
      isPostArticle() {
        if (this.$route.name == 'article-post-article_id') {
          return false;
        }
        return true;
      }
    },
    data() {
      return {
        isShow: false,
        wx: wx,
        gzh: gzh
      }
    },
    methods: {
      backTop() {
        window.scrollTo(0, 0);
      },
      handleScroll() {
        let _ts = this;
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 100) {
          _ts.$set(_ts, 'isShow', true);
        } else {
          _ts.$set(_ts, 'isShow', false);
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll, true);
    }
  }
</script>

<style scoped>
  .el-header {
    padding-bottom: 1rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
    z-index: 80;
  }

  .el-main {
    padding: 20px 0;
    background-attachment: fixed;
    min-height: 87.5vh;
    overflow-x: hidden;
  }

  .el-footer {
    position: relative;
    width: 100%;
    padding-top: 1.2rem;
    background: #fff;
    border-top: 1px solid rgba(0, 40, 100, 0.12);
    z-index: 80;
  }
</style>