mh_fire/src/App.vue

<template>
  <div id="app">
    <header>
      <heads class="headS" :style="{height: $route.fullPath === '/' ? '.625rem' : ''}"></heads>
    </header>
    <div class="viewContent">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <footer class="footS">
      <foot></foot>
    </footer>
  </div>
</template>

<script>
import foot from "@v/foot";
import heads from "@v/head";
export default {
  components: { foot, heads },
  name: "App",
  data() {
    return {};
  },
  mounted() {},
  methods() {},
};
</script>

<style lang='scss'>
#app {
  width: 100%;
  height: 100%;
  background: url("./assets/img/home/home_bg.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  
  // min-width: 23.75rem;
  // min-height: 10rem;
}
</style>
<style scoped  lang='scss'>
#app {
  .headS {
    height: 1.0625rem;
  }
  .viewContent {
    flex: 1;
    padding: 0 0.25rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .footS {
    height: 1.0625rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (min-width:1940px) {
  ::v-deep .el-table .is-leaf{
    line-height:0.25rem !important; 
    font-size: 0.12rem;
  }
  ::v-deep .el-table .cell {
    line-height:0.25rem !important; 
    font-size: 0.12rem;
  }
  ::v-deep .el-input__icon{
    width:auto;
  }
  ::v-deep h4{
    font-size:.12rem !important;
  }
}

</style>