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

    <div class="content-box">
      <div class="content">
        <!-- <transition name="move" mode="out-in"> -->
        <keep-alive :include="caches">
          <router-view v-if="isRenderTab"></router-view>
        </keep-alive>
        <!-- </transition> -->
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "./header.vue";
import LayoutTabs from "./LayoutTabs.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    vHead,
    LayoutTabs,
  },
  computed: {
    ...mapState("cache", ["caches"]),
    ...mapState(["isRenderTab"]),
  },
  created() {},
};
</script>
<style lang="less">
.wrapper {
  min-width: 1366px;
  .content-box {
    position: absolute;
    left: 0px;
    right: 0;
    top: 92px;
    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) {
  .wrapper .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;
    }
  }
  .wrapper .content-box {
    top: 41px;
    //首页
    .stritleEchartsPage {
      height: 100%;
      .exportDialog {
        .el-dialog {
          margin-top: 180px !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>
