首页内容部分更改，加保安单位经营情况研判模块页面

zpzgiser

2021-07-17 29cb0b5b6db39f426ea0ea792d08f325cff395fc

 src/views/home/index.scss

@@ -4,334 +4,383 @@
  // width: 1920px;
  // height: 1080px;
  background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
  background-size: cover;
}
.head-title {
  background: url("../../../public/img/bajgxt/title2.png") no-repeat;
  background-size: cover;
  width: 100%;
  text-align: center;
  position: relative;
  span {
    font-family: "Arial Normal", "Arial", sans-serif;
    font-size: 36px;
    color: #ffffff;
    text-align: center;
    line-height: 77px;
  }
  img {
    position: absolute;
    margin-top: 22px;
    margin-left: 29%;
  }
}
.side {
  width: 440px;
  height: 100%;
}
.content {
  margin: 5px 20px 20px 20px;
  // height: calc(100% - 77px);
  // width: 100%;
  height: calc(100% - 102px);
  width: calc(100% - 40px);
  display: flex;
  .left,
  .right {
    @extend .side;
  }
  .middle {
    width: calc(100% - 930px);
    height: 100%;
    margin: 0px 25px;
    position: relative;
  }
}
.leftimg {
  background: url("../../../public/img/bajgxt/left1.png") no-repeat;
  background-size: contain;
  width: 100%;
  height: 260px;
}
.echartClass {
  height: 100%;
  width: 100%;
  height: calc(100% - 90px);
}
.left {
  .left1 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: contain;
    width: 440px;
    height: 533px;
    #left1Echart {
      @extend .echartClass;
    }
  }
  .left2 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: 440px 392px;
    height: 392px;
    width: 440px;
    margin-top: 25px;
    #left2Echart {
      @extend .echartClass;
    }
  }
}
.right {
  .right1 {
    background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
    background-size: 440px 251px;
    width: 440px;
    height: 251px;
    position: relative;
    #right1Echart {
      @extend .echartClass;
    }
  }
  .right2 {
    background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
    background-size: 440px 251px;
    width: 440px;
    height: 251px;
    margin-top: 30px;
    position: relative;
    #right2Echart {
      @extend .echartClass;
    }
  }
  .right3 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: 440px 392px;
    height: 392px;
    width: 440px;
    margin-top: 25px;
    #right3Echart {
      @extend .echartClass;
    }
  }
}
.title-pane {
  display: inline-flex;
  height: 55px;
  img {
    width: 30px;
    height: 30px;
    margin: 15px 10px 0px 10px;
  }
  span {
    line-height: 68px;
    color: #fff;
    font-size: 20px;
  }
}
.title-pane1 {
  display: inline-flex;
  height: 44px;
  img {
    width: 30px;
    height: 30px;
    margin: 10px 10px 0px 10px;
  }
  span {
    line-height: 55px;
    color: #fff;
    font-size: 20px;
  }
}
  background-size: 100% 100%;

.middle {
  .mapimg {
    background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
  .head-title {
    background: url("../../../public/img/bajgxt/title2.png") no-repeat;
    background-size: 100% 100%;
    height: 543px;
    width: 100%;
    #map {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      margin: 0px 20px;
      top: 20px;
    height: 77px;
    text-align: center;
    position: relative;
    span {
      font-family: "Arial Normal", "Arial", sans-serif;
      font-size: 36px;
      color: #ffffff;
      text-align: center;
      line-height: 77px;
    }
    span:nth-child(2) {
      position: absolute;
      margin-top: 22px;
      margin-left: 26%;
      font-size: 22px;
      cursor: pointer;
      &:hover {
        color: #90cef0;
      }
    }
    img {
      position: absolute;
      margin-top: 22px;
      margin-left: 29%;
    }
  }
  .side {
    width: 27%;
    height: 100%;
  }
  .content {
    margin: 5px 20px 20px 20px;
    // height: calc(100% - 77px);
    // width: 100%;
    height: calc(100% - 102px);
    width: calc(100% - 40px);
    display: flex;
    .left,
    .right {
      @extend .side;
    }
    .middle {
      width: calc(46% - 50px);
      height: 100%;
      margin: 0px 25px;
      position: relative;
    }
  }

  .table {
    margin-top: 25px;
  .leftimg {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 392px;
    background: url("../../../public/img/bajgxt/table.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .table-title {
      background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
    height: 260px;
  }
  .echartClass {
    height: 100%;
    width: 100%;
    height: calc(100% - 70px);
  }
  .left {
    .left1 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      height: 60%;
      width: 100%;
      background-size: 100% 100%;
      position: absolute;
      width: 267px;
      margin-top: -13px;
      height: 50px;
      margin-left: 39%;
      #left1Echart {
        @extend .echartClass;
      }
    }
    .left2 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      #left2Echart {
        @extend .echartClass;
      }
    }
  }
  .right {
    .right1 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      position: relative;
      #right1Echart {
        @extend .echartClass;
      }
    }
    .right2 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      margin-top: 30px;
      position: relative;
      #right2Echart {
        @extend .echartClass;
      }
    }
    .right3 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      #right3Echart {
        @extend .echartClass;
      }
    }
  }
  .title-pane {
    display: inline-flex;
    height: 55px;
    img {
      width: 30px;
      height: 30px;
      margin: 15px 10px 0px 10px;
    }
    span {
      line-height: 68px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 54px;
    }
    .lefttop {
      background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
  }
  .title-pane1 {
    display: inline-flex;
    height: 44px;
    img {
      width: 30px;
      height: 30px;
      margin: 10px 10px 0px 10px;
    }
    span {
      line-height: 55px;
      color: #fff;
      font-size: 20px;
    }
  }

  .middle {
    .mapimg {
      background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
      background-size: 100% 100%;
      width: 44px;
      height: 56px;
      position: absolute;
      margin-left: -6px;
      margin-top: -7px;
      height: 60%;
      width: 100%;
      #map {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        margin: 0px 20px;
        top: 20px;
        position: relative;
      }
    }
    .leftbottom {
      background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;

    .table {
      margin-top: 25px;
      height: calc(40% - 25px);
      width: 100%;
      background: url("../../../public/img/bajgxt/table.png") no-repeat;
      background-size: 100% 100%;
      width: 44px;
      height: 56px;
      position: absolute;
      margin-left: -6px;
      margin-top: 340px;
    }
    .righttop {
      background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
      background-size: 100% 100%;
      width: 44px;
      height: 56px;
      position: absolute;
      margin-left: calc(100% - 39px);
      margin-top: -7px;
    }
    .rightbottom {
      background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
      background-size: 100% 100%;
      width: 44px;
      height: 56px;
      position: absolute;
      margin-left: calc(100% - 39px);
      margin-top: 340px;
      position: relative;
      .table-title {
        background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 267px;
        margin-top: -13px;
        height: 50px;
        margin-left: calc(50% - 135.5px);
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 54px;
      }
      .lefttop {
        background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -6px;
        margin-top: -7px;
      }
      .leftbottom {
        background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -6px;
        margin-top: calc(40% - 88px);
      }
      .righttop {
        background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 39px);
        margin-top: -7px;
      }
      .rightbottom {
        background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 39px);
        margin-top: calc(40% - 88px);
      }
    }
  }
}
.el-table {
  width: calc(100% - 40px);
  height: calc(100% - 70px);
  margin: 0px 20px 15px;
  top: 60px;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #18458f;
}
/deep/ .el-table--enable-row-transition .el-table__body td,
/deep/ .el-table th,
.el-table tr {
  background: #3457b1;
}
/deep/ .el-table .cell {
  color: #fff;
}
/deep/ .el-table td,
.el-table th.is-leaf {
  border-bottom-color: transparent;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #b0caf3;
}
/deep/ .el-input__inner {
  height: 27px;
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  border-color: transparent;
  border-radius: 2px;
}
/deep/ .el-input {
  width: 94px;
}
/deep/ .el-select {
  line-height: 55px;
  position: absolute;
  right: 14px;
}
/deep/ .el-input__icon {
  line-height: 56px;
}
/deep/ .el-select:hover .el-input__inner,
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border: none;
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell,
/deep/ .el-table--border::after,
/deep/ .el-table--group::after,
/deep/ .el-table::before {
  background-color: transparent;
}
.card-text {
  height: 30px;
  padding: 8px 10px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  span:nth-child(2) {
    color: red;
    font-size: 21px;
    margin: 0px 10px;
    font-weight: bold;
  .el-table {
    width: calc(100% - 40px);
    height: calc(100% - 70px);
    margin: 0px 20px 15px;
    top: 60px;
  }
  span:nth-child(4) {
    margin-left: 15px;
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #18458f;
  }
  span:nth-child(5) {
    margin: 0px 10px;
    color: red;
    font-size: 20px;
  /deep/ .el-table--enable-row-transition .el-table__body td,
  /deep/ .el-table th,
  .el-table tr {
    background: #3457b1;
  }
}
.mapBtn,
.mapBtn:nth-child(2),
.mapBtn:nth-child(3) {
  position: absolute;
  z-index: 99;
  color: #fff;
  background: #4162a2;
  margin-top: 38px;
  margin-left: 85%;
  border-radius: 11px;
  height: 43px;
  display: inline-flex;
  width: 107px;
  cursor: pointer;
  img {
    margin: 8px 3px 8px 5px;
    height: 28px;
    width: 30px;
  /deep/ .el-table .cell {
    color: #fff;
  }
  .text {
    width: 100px;
  /deep/ .el-table td,
  .el-table th.is-leaf {
    border-bottom-color: transparent;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #b0caf3;
  }
  /deep/ .el-input__inner {
    height: 27px;
    color: #fff !important;
    font-size: 14px;
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 2px;
  }
  /deep/ .el-input {
    width: 94px;
  }
  /deep/ .el-select {
    line-height: 55px;
    position: absolute;
    right: 14px;
  }
  /deep/ .el-input__icon {
    line-height: 56px;
  }
  /deep/ .el-select:hover .el-input__inner,
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: none;
  }
  /deep/ .el-table,
  /deep/ .el-table__expanded-cell,
  /deep/ .el-table--border::after,
  /deep/ .el-table--group::after,
  /deep/ .el-table::before {
    background-color: transparent;
  }
  .card-text {
    height: 30px;
    padding: 8px 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 3px;
    span:nth-child(1) {
      width: 100%;
      display: block;
      font-size: 10px;
    }
    span:nth-child(2) {
      width: 100%;
      display: block;
      color: red;
      font-size: 17px;
      font-size: 21px;
      margin: 0px 10px;
      font-weight: bold;
    }
    span:nth-child(4) {
      margin-left: 15px;
    }
    span:nth-child(5) {
      margin: 0px 10px;
      color: red;
      font-size: 20px;
    }
  }
  &:hover {
    box-shadow: 0px 0px 10px #568df3;
  .right-content {
    height: calc(100% - 44px);
    width: 100%;
  }
}
.mapBtn:nth-child(2) {
  margin-top: 100px;
}
.mapBtn:nth-child(3) {
  margin-top: 160px;
  .card-list {
    margin: 20px 60px;
    display: flex;
    height: 55px;
    line-height: 55px;
    img:first-child {
      height: 55px;
    }
    img:nth-child(2) {
      position: absolute;
      margin-left: 13px;
      width: 35px;
      height: 35px;
      margin-top: 9px;
    }
    span:nth-child(3) {
      color: red;
      font-size: 30px;
      display: block;
      width: 71px;
      margin: 0px 20px;
    }
    span:nth-child(4) {
      color: #7ff3f4;
      font-size: 18px;
      display: block;
      width: 129px;
    }
  }
  .mapBtn,
  .mapBtn:nth-child(2),
  .mapBtn:nth-child(3) {
    position: absolute;
    z-index: 99;
    color: #fff;
    background: #4162a2;
    margin-top: 38px;
    margin-left: calc(100% - 140px);
    border-radius: 11px;
    height: 43px;
    display: inline-flex;
    width: 107px;
    cursor: pointer;
    img {
      margin: 8px 3px 8px 5px;
      height: 28px;
      width: 30px;
    }
    .text {
      width: 100px;
      text-align: center;
      margin: 3px;
      span:nth-child(1) {
        width: 100%;
        display: block;
        font-size: 10px;
      }
      span:nth-child(2) {
        width: 100%;
        display: block;
        color: red;
        font-size: 17px;
        font-weight: bold;
      }
    }
    &:hover {
      box-shadow: 0px 0px 10px #568df3;
    }
  }
  .mapBtn:nth-child(2) {
    margin-top: 100px;
  }
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: 100%;
  }
}