DataCenter/src/App.vue

<template>
  <div v-if="this.$store.state.isLogin" class="main-container">
    <HeaderVue class="header"></HeaderVue>
    <div class="main-app">
      <div class="aside"><AsideVue></AsideVue></div>
      <div class="section">
        <div class="first-title">
          {{ this.$store.state.firstTitle }}
        </div>
        <div class="main-section"><router-view></router-view></div>
      </div>
    </div>
    <FooterVue></FooterVue>
  </div>
  <router-view v-else></router-view>
</template>

<script>
import HeaderVue from "./components/Header.vue";
import AsideVue from "./components/Aside.vue";
import FooterVue from "./components/Footer.vue";
export default {
  components: {
    HeaderVue,
    AsideVue,
    FooterVue,
  },
  data() {
    return {};
  },
};
</script>
<style>
.main-container {
  height: 100%;
  width: 100%;
  min-height: 800px;
  min-width: 1200px;
}

.aside {
  width: 220px;
}

.footer {
  text-align: center;
}
.main-app {
  width: 100%;
  height: calc(100% - 120px);
  display: flex;
}

.section {
  width: 100%;
  background: #f4f5f6;
  overflow: auto;
}

.first-title {
  height: 52px;
  line-height: 52px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333d43;
  padding-left: 20px;
}

.main-section {
  margin: 24px 0 0 24px;
  height: calc(100% - 76px);
  overflow-y: auto;
}

.line-container-p18 {
  padding: 18px;
  background: #fff;
}
.line-container-p24 {
  padding: 24px;
  background: #fff;
}

.full-container-p24 {
  padding: 24px;
  height: calc(100% - 48px);
  background: #fff;
}

.df {
  display: flex;
}

.ffw {
  flex-flow: wrap;
}

.jcsa {
  justify-content: space-around;
}
.jcsb {
  justify-content: space-between;
}

.aic {
  align-items: center;
}

.dib {
  display: inline-block;
}

.ml8 {
  margin-left: 8px;
}

.jcfe {
  justify-content: flex-end;
}

.mt20 {
  margin-top: 20px;
}
.mb20 {
  margin-bottom: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mt50 {
  margin-top: 50px;
}

.container-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0094fe;
  margin: 15px 0 15px 0;
}
.container-second-title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0094fe;
  margin: 15px 0 15px 0;
}

.line {
  display: flex;
  align-items: center;
  align-content: flex-start;
  margin: 20px;
}

.info-line {
  display: flex;
  align-items: center;
  align-content: flex-start;
  margin-right: 20px;
}

.info-line-title {
  width: 120px;
  height: 100%;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353a42;
  line-height: 100%;
  text-align: right;
  padding-right: 20px;
}

.info-line-text {
  width: 240px !important;
  height: 100%;
  line-height: 100%;
}

.info-line-textarea {
  width: 640px;
  height: 100%;
  line-height: 100%;
}

.pointer {
  cursor: pointer;
}

.el-upload-list__item-thumbnail {
  object-fit: contain !important;
}
.el-input__inner {
  text-align: center;
  color: #777 !important;
}
.el-upload--picture-card {
  border: none;
}

.ml20 {
  margin-left: 20px;
}

.hr {
  border-bottom: 2px solid #3b91fa;
  opacity: 0.2;
}

.m10-0 {
  margin: 10px 0;
}

.m30-0 {
  margin: 30px 0;
}

.fww {
  flex-wrap: wrap;
}

.tar {
  text-align: right;
}

.mr20 {
  margin-right: 20px;
}
</style>