frontend/src/components/common/Home.vue

<template>
  <div class="wrapper">
    <v-head></v-head>

    <div class="content-box">
      <div class="content">
        <transition name="move" mode="out-in">
          <!-- <keep-alive> -->
          <router-view></router-view>
          <!-- </keep-alive> -->
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "./Header.vue";

export default {
  data() {
    return {};
  },
  components: {
    vHead,
  },
  created() {},
};
</script>
<style lang="less">
.content-box {
  position: absolute;
  left: 0px;
  right: 0;
  top: 70px;
  bottom: 0;
  //padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: @background-color-base;
  .content {
    width: 100%;
    height: 100%;
    //padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
  }
}
@media (max-width: 900px) {
  .greenStyle .header {
    // background: #000;
    width: 100%;
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    .logo {
      display: none;
    }
    .el-menu-item {
      padding: 0 10px;
    }
    .el-menu-item [class^="el-icon-"] {
      width: 12px;
    }
    .sidebar .el-menu--horizontal .el-menu-item {
      height: 40px;
      line-height: 40px;

      font-size: 12px;
      i {
        font-size: 12px;
      }
    }
    .sidebar .el-menu--horizontal .el-submenu .el-submenu__title {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      i {
        font-size: 12px;
      }
    }
    .header-user-con {
      height: 40px;
      .user-avator {
        margin-left: 4px;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .user-avator {
        //display: none;
      }
    }
    .header-right {
      padding-right: 12px;
    }
  }
  .content-box {
    top: 41px;
    //首页
    .stritleEchartsPage {
      height: 100%;
      .exportDialog {
        .el-dialog {
          margin-top: 140px !important;
          width: 80%;
        }
      }
      .el-card .el-card__body {
        padding: 8px;
        height: calc(100% - 16px);
      }
      .echart-top {
        .box-card {
          h3 {
            font-size: 12px;
            line-height: 20px;
          }
          .bottomM {
            p {
              padding: 1.5%;
              margin: 1.5%;
              zoom: 0.8;
              span {
                font-size: 12px !important;
              }
            }
          }
          .chartClass {
            height: calc(100% - 16px);
            zoom: 0.6;
          }
          .dateBox {
            top: 8px;
            right: 8px;
            .el-input__inner {
              height: 20px;
              line-height: 20px;
            }
            .el-input__icon {
              line-height: 20px;
            }
          }
        }
      }
    }
    //realMonitor实时监控
    .realMonitor {
      .monitor-container {
        .sideBar {
          width: 200px;
          .radioFilter {
            .refresh {
              display: none;
            }
          }
        }
        .picSetBox {
          .swiperBox {
            .title {
              height: 20px;
              line-height: 20px;
              .el-breadcrumb {
                height: 20px;
                line-height: 20px;
                font-size: 12px;
              }
            }
            .thumb-example {
              height: calc(100% - 8px);
              .picTop {
                height: 70%;
              }
              .picBottom {
                height: 30%;
              }
            }
          }
        }
        .picSetBox {
          .parameterArea {
            width: 180px;
            .setTimebtn .buttonGroup .el-button {
              width: 84px;
            }
            .setfocalLength {
              .selectChannel {
                .labelname {
                  font-size: 12px;
                }
              }
              .buttonGroup .el-button {
                width: 84px;
              }
            }
          }
        }
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 174px;
        }
      }
      .infoDialog {
        .el-dialog {
          width: 80% !important;
          margin-top: 120px !important;
        }
      }
      .setTimeDialog {
        .el-dialog {
          width: 80% !important;
          margin-top: 120px !important;
        }
      }
    }
    //realTimeSearch历史图片
    .realTimeSearch {
      height: auto;
      .searchMain {
        .searchBox {
          .el-form-item__label {
            font-size: 12px;
          }
          .el-select {
            width: 100px;
          }
          .el-date-editor.el-input,
          .el-date-editor.el-input__inner {
            width: 188px;
          }
        }
      }
      .pictureBox {
        height: 100%;
        overflow: auto;
        .imgList {
          width: calc((100% - 50px) / 3);
          height: auto;
          margin: 2px;
          .bigpic {
            position: relative;
            img {
              height: 200px;
            }
            .caption {
              position: absolute;
              bottom: 0px;
              background: #169e8ca1;
              width: calc(100% - 8px);
              padding: 4px;
              .infoTop {
                color: #fff;
                font-size: 12px;
              }
              .infoBottom {
                color: #fff;
              }
            }
          }
        }
      }
    }
    //告警处理
    .alarmHandBox {
      height: auto;
    }
    .lineInformation,
    .towerinfobox,
    .camerChannel,
    .photoGraphicDevice,
    .deviceInformation,
    .deviceReport,
    .globalBox {
      height: auto;
      .el-dialog {
        width: 100% !important;
        margin-top: 140px !important;
      }
    }
  }
  .setRoadDialog {
    .el-dialog {
      margin-top: 140px !important;
    }
  }
}
</style>