gaoyixia-pc/src/App.vue

<template>
  <div id="app" ref="app">
    <Header v-if="!showHeader" class="Header" />
    <Navbar v-if="!showNavbar" class="Navbar" />
    <Content class="Content" />
    <Footer class="Footer" v-if="routePath == '/index'" />
    <Abandon v-model="abandon.show" />
    <isLogin v-model="is_login.show" />
    <ConfirmPopup />
    <ToTop class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
    <ToContribute class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
    <ToContact class="FixedBtn" :style="{ left: btnLeft + 'px' }" />
  </div>
</template>

<script>
import Header from "@/components/layout/Header.vue";
import Navbar from "@/components/layout/Navbar.vue";
import Content from "@/components/layout/Content.vue";
import Footer from "@/components/layout/Footer.vue";

import Abandon from "@/components/module/abandon.vue"; // 放弃投稿
import IsLogin from "@/components/module/is-login.vue"; // 未登录
import ConfirmPopup from "@/components/module/confirm-popup.vue"; // 确认-通用
import ToTop from "@/components/module/to-top.vue"; // 回到顶部
import ToContribute from "@/components/module/to-contribute.vue"; // 发布投稿
import ToContact from "@/components/module/to-contact.vue";
import { mapState } from "vuex";

export default {
  name: "app",
  components: {
    Header,
    Navbar,
    Content,
    Footer,
    Abandon,
    IsLogin,
    ConfirmPopup,
    ToTop,
    ToContribute,
    ToContact,
  },
  data() {
    return {
      isLogin: true,
      btnLeft: 0,
    };
  },
  computed: {
    ...mapState(["abandon", "is_login", "routePath"]),
    showHeader() {
      return this.$route.meta.empty
        ? this.$route.meta.empty.includes("Header")
        : false;
    },
    showNavbar() {
      return this.$route.meta.empty
        ? this.$route.meta.empty.includes("Navbar")
        : false;
    },
  },
  mounted() {
    let btnRight = 100 + 8;
    this.btnLeft =
        window.innerWidth - btnRight > 1097
          ? window.innerWidth - btnRight
          : 1097;
    window.onresize = () => {
      this.$resizeListenerList.forEach((fn) => fn());
      this.btnLeft =
        window.innerWidth - btnRight > 1097
          ? window.innerWidth - btnRight
          : 1097;
      // body.style.zoom
    };
  },
};
</script>

<style lang="scss">
@import "~@/assets/css/common.scss";
:root {
  --scrollTop: 0px;    // 窗口当前滚动位置
  --windowHeight: 0px; // 窗口最大宽度
}

body {
  @extend %transitionAll;
  margin: 0;
  padding: 0;
  min-width: 1000px;
  background-color: #f5f5f5;
}
.Header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.Navbar {
  position: fixed;
  top: calc(#{$headerHeight} + 10px);
  left: 10px;
  z-index: 100;
}
.Content {
  padding-top: $headerHeight;
}
.Footer {
  float: left;
}
.FixedBtn {
  z-index: 50;
}

@media (max-width: 1200px) {
  .Header {
    // position: absolute;
    // top: var(--scrollTop) !important;
  }
  .FixedBtn {
    position: absolute !important;
    top: calc(var(--scrollTop) + var(--windowHeight) - 80px) !important;
  }
}
</style>