SmartCommunity/videoSurveillance/src/views/passengerFlow/index.scss

@import "@assets/css/public-style.scss";
.view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  height: calc(100% - #{rem(10)});
}
.block-item {
  background: #171f32;
  border-radius: rem(4);
  overflow: hidden;
  padding: 0 rem(20) rem(20) rem(20);
  box-sizing: border-box;
}
.topsBlock {
  height:  rem(60);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(224, 225, 227, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  /deep/ .el-input__inner {
    background: transparent;
    color: white;
    padding-right: rem(20);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .right {
    max-width: rem(120);
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .titleNumber {
    color: #0eaeff;
    font-size: rem(30);
  }
  .left {
    display: flex;
    align-items: center;
    img {
      margin: 0 rem(5) 0 rem(20);
      vertical-align: middle;
    }
  }
  /deep/ .el-date-editor .el-range-separator {
    padding-left: 0;
    color: white;
  }
  /deep/ .el-date-editor--daterange.el-input__inner {
    width: rem(240);
  }
  .search-btn {
    margin-left: rem(20);
  }
}
.item-content {
  padding-top: rem(20);
  box-sizing: border-box;
  height: calc(100% -  #{rem(60)});

  .flexPer {
    display: flex;
    height: 100%;
    justify-content: space-between;
  }
  .itme-inlineBlock {
    display: flex;
    width: calc((100% - #{rem(20)}) / 3);
    color: white;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    height: 100%;
  }
}
.ft20 {
  font-size: rem(20);
}
.numberColor {
  // margin-bottom: 5px;
}
.greText {
  font-size: 12px;
}
.grdText {
  opacity: 0.5;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.width50 {
  width: 50%;
}
.grid-1 {
  width: calc((100% - #{rem(20)}) / 3);
  height: calc((100% - #{rem(20)}) / 7 * 2);
}
.grid-2 {
  width: calc((100% - #{rem(20)}) / 3 * 2);
  height: calc((100% - #{rem(20)}) / 7 * 2);
}
.grid-3 {
  width: calc((100% - #{rem(20)}) / 3);
  height: calc((100% - #{rem(20)}) / 7 * 5);
}
.grid-4 {
  width: calc((100% - #{rem(20)}) / 3 * 2);
  height: calc((100% - #{rem(20)}) / 7 * 5);
}