@font-face {
  font-family: 'DS-DIGII';
  src: url(../../../static/font/DS-DIGI.TTF) format('truetype');
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}

.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url('../../../static/images/u0.png');
  background-size: 100% 100%;
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto;
}

.top_title {
  width: 100%;
  height: 106px;
  background: url('../../../static/images/u2.png') center center no-repeat;
  background-size: 81.25% 100%;
  padding: 0 25px 0 40px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 59px;
  color: #fff;
  font-weight: bold;
  line-height: 100px;
  position: relative;
  font-style: italic;

  .logo {
    width: 140px;
    height: 41px;
    float: left;
    margin-top: 27px;
    cursor:pointer;
  }

  .times_bg {
    width: 184px;
    height: 28px;
    font-size: 18px;
    text-align: center;
    line-height: 28px;
    color: #fff;
    float: right;
    background: url('../../../static/images/u4.png') center center no-repeat;
    background-size: 100% 28px;
    margin-top: 34px
  }

  .backBtn {
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.container {
  clear: both;
  width: 100%;
  padding: 15px 13px 22px 20px;
  box-sizing: border-box;

  .formBox_left {
    width: 24%;
    float: left;

    .formBox {
      .form_title {
        width: 96%;
        height: 60px;
        background: url('../../../static/images/u6.png') center center no-repeat;
        background-size: 100% 100%;
        font-size: 24px;
        color: #B1E2FF;
        line-height: 60px;
        padding-left: 45px;
        box-sizing: border-box;
        margin-bottom: 25px;
      }

      .table_bottom{
        width:100%;
        height:385px;
        background: url('../../../static/images/u12.png') center center no-repeat;
        background-size: 100% 100%;
      }
      .formMain {
        width: 100%;
        box-sizing: border-box;

        .table_title {
          font-size: 18px;
          color: #fff;
        }
        
        .tbaleSlide{
          height:329px;
          overflow: hidden;
          .tableDetail{
            height:329px;
            overflow-y: auto;
            li:first-child,
            li:nth-child(2),
            li:nth-child(3) {
              color: #FF9922;
            }
            li{
                width:100%;
                text-align: center;
                color:#fff;
                line-height: 1;
                overflow: hidden;
                color: #3C9EFF;
                div{
                    // width:24%;
                    float: left;
                    line-height: 47px;
                }
                // div:nth-child(2){
                //     width:28%
                // }
            }
            .number {
              background: url('../../../static/images/bg_02.png') center center no-repeat;
            }
          }
        }

        .table_title_bg {
          width: 100%;
          height: 50px;
          // margin-bottom: 9px;
          // background: url('../../../static/images/u101.png') center center no-repeat;
          // background-size: 100% 100%;
          padding: 0 6px;

          li {
            height: 100%;
            line-height: 50px;
            font-size: 15px;
            color: #B1E2FF;
            font-weight: normal;
            width: 25%;
            text-align: center;
            border: none !important;
            display: inline-block;
          }
        }
        

        table {
          width: 100%;
          border: none !important;
          border-spacing: 0px;

          tbody {
            tr {
              border: none !important;
              padding: 0 !important;
              margin: 0 !important;
              color: #3C9EFF;

              td {
                text-align: center;
                font-size: 14px;
                line-height: 50px;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
              }

            }

            // tr:nth-child(2n-1) {
            //   background: #162576;
            // }

            // tr:nth-child(2n) {
            //   background: #0D155C;
            // }

            .number {
              background: url('../../../static/images/bg_02.png') center center no-repeat;
            }
          }

        }

        .andonHead>li:first-child,
        .andonBody>div:first-child {
          width: 10%;
        }

        .andonHead>li,
        .andonBody>div {
          width: 22.5%;
        }

        .andonBody:first-child,
        .andonBody:nth-child(2),
        .andonBody:nth-child(3) {
          color: #FF9922;

          .number {
            background: url('../../../static/images/bg_01.png') center center no-repeat;
          }
        }

        .progressBox {
          .progressForm {
            li:first-child,
            li:nth-child(2),
            li:nth-child(3) {
              color: #FF9922!important;
              .number {
                color: #FF9922!important;
                background: url('../../../static/images/bg_01.png') center center no-repeat ;
                background-image: url('../../../static/images/bg_01.png')!important ;
              }
            }
            li {
              line-height: 19px;
              border-bottom: 1px solid #476BD3;
              padding: 20px 0;
              clear: both;
              overflow: hidden;

              div {
                float: left;
              }

              .number {
                width: 18px;
                // height:19px;
                font-size: 14px;
                text-align: center;
                line-height: 19px;
                

              }

              .factorName {
                font-size: 14px;
                // color: #fff;
                margin-left: 14px;
                width: 80px;
              }

              .progressBar {
                width: 210px;
                height: 19px;

                .progress {
                  height: 14px;
                  // line-height: 19px;
                  margin-top: 2px;
                }
              }

              .money {
                font-size: 15px;
                margin-left: 8px;
              }
            }

            li:first-child,
            li:nth-child(2),
            li:nth-child(3) {
              color: #FF9922;

              // .number,
              .progressBar {
                background: rgba(255, 153, 34, 0.1);
              }
              .number{
                background: url('../../../static/images/bg_01.png') center center no-repeat;
              }
            }

            li:last-child,
            li:nth-child(4) {
              color: #3C9EFF;

              // .number,
              .progressBar {
                background: rgba(60, 158, 255, 0.1);
              }
              .number{
                color: #3C9EFF;
                background: url('../../../static/images/bg_02.png') center center no-repeat;
              }
            }
          }
        }
      }

      .table_bg {
        height: 347px;
        padding: 20px;
        background: url('../../../static/images/u9.png') center center no-repeat;
        background-size: 100% 100%;
      }
    }

    .compre_analysis {
      margin-bottom: 25px;
    }

  }

  .formBox_middle {
    width: 51%;
    float: left;
    padding: 0 20px;

    .middle_top {
      width: 100%;
      padding: 0 24px;

      ul {
        width: 100%;
        display: inline-block;
        color: #fff;
        font-size: 25px;

        li {
          width: 25%;
          display: inline-block;
          text-align: center;
          font-style: italic;
          font-weight: bold;

          div {
            font-size: 40px;
            font-weight: normal;
            font-family: 'DS-DIGII';
            background: url(../../../static/images/u487.png);
            background-size: 100% 100%;
          }
        }

      }

    }

    .middle_img {
      width: 100%;
      height: 520px;
      position: relative;

      img {
        height: 100%;
        width: 94%;
      }

      .channelBox {
        color: #fff;
        font-size: 28px;
        position: absolute;
        top: 0;
        left: 0;

        .channel1 {
          position: absolute;
          top: 30px;
          // width: 110px;
          white-space: nowrap;
          left: 150px;
        }

        .channel2 {
          position: absolute;
          top: 90px;
          left: 130px;
          white-space: nowrap;

        }

        .channel3 {
          position: absolute;
          top: 160px;
          left: 90px;
          white-space: nowrap;
        }

        .channel4 {
          position: absolute;
          top: 250px;
          left: 60px;
          white-space: nowrap;
        }

        .channel5 {
          position: absolute;
          top: 380px;
          left: 0px;
          white-space: nowrap;
        }


      }

      .channelDataBox {
        position: absolute;
        right: 0px;
        top: 0px;

        .channelData {
          position: absolute;
          width: 180px;

          .detail {
            color: #fff;
            font-size: 12px;
            height: 120px;


            .name {
              color: #51e2fc;
              border-bottom: 1px solid #fff;
            }
          }
        }

        .channelData:first-child {
          top: 40px;
          right: 120px;

          .detail {
            div {
              margin-left: 80px;
            }

            .name {
              width: 101px;
              margin-left: 66px;

              span {
                margin-left: 13px;
              }
            }
            .detailnum1{
              font-size: 5px;
            }
          }

        }

        .channelData:nth-child(2) {
          top: 60px;
          right: 100px;

          .detail {
            div {
              margin-left: 54px;
            }

            .name {
              width: 112px;
              margin-left: 39px;

              span {
                margin-left: 13px;
              }
            }
          }
        }

        .channelData:nth-child(3) {
          top: 80px;
          right: 60px;
        }

        .channelData:nth-child(4) {
          top: 200px;
          right: 20px;
        }

        .channelData:nth-child(5) {
          top: 350px;
          right: -50px;
        }

        .channelData:nth-child(3),
        .channelData:nth-child(4),
        .channelData:nth-child(5) {
          .detail {
            div {
              margin-left: 16px;
            }

            .name {
              width: 110px;
              margin-left: 0;

              span {
                margin-left: 16px;
              }
            }
          }
        }
      }

    }

    .middle_bottom {

      .formBox {
        .form_title {
          width: 96%;
          height: 60px;
          background: url('../../../static/images/u6.png') center center no-repeat;
          background-size: 100% 100%;
          font-size: 24px;
          color: #B1E2FF;
          line-height: 60px;
          padding-left: 45px;
          box-sizing: border-box;
          margin-bottom: 25px;
        }

        .formMain {
          box-sizing: border-box;
          width:100%;
          height:312px;
          background: url('../../../static/images/u11.png') center center no-repeat;
          background-size: 100% 100%;
          .table_title {
            font-size: 18px;
            color: #fff;
          }

          .table_title_bg {
            width: 100%;
            height: 46px;
            // margin-bottom: 9px;
            // background: url('../../../static/images/u101.png') center center no-repeat;
            // background-size: 100% 100%;

            li {
              height: 100%;
              line-height: 46px;
              font-size: 15px;
              color: #fff;
              font-weight: normal;
              text-align: center;
              display: inline-block;
            }

            li:first-child,
            li:nth-child(2),
            li:nth-child(3) {
              width: 13%;
            }

            li:nth-child(4) {
              width: 220px;
            }

            li:nth-child(5) {
              width: 80px;
            }

            li:nth-child(6),
            li:nth-child(7),
            li:nth-child(8) {
              width: e("calc((61% - 230px) / 4)");
            }

          }
          .tbaleSlide{
            width:100%;
            height:260px;
            overflow-y: hidden;
          .tableDetail{
            li{
                width:100%;
                text-align: center;
                color:#fff;
                overflow: hidden;
                div{
                    width:24%;
                    float: left;
                    line-height: 36px;
                    font-size: 14px;
                }
                div:first-child,
                div:nth-child(2),
                div:nth-child(3) {
                  width: 13%;
                }

                div:nth-child(4) {
                  width: 220px;
                }

                div:nth-child(5) {
                  width: 80px;
                }

                div:nth-child(6),
                div:nth-child(7),
                div:nth-child(8) {
                  width: e("calc((61% - 230px) / 4)");
                }
            }
        }
            table {
              width: 100%;
              border: none !important;
              border-spacing: 0px;

              tbody {
                tr {
                  border: none !important;
                  padding: 0 !important;
                  margin: 0 !important;
                  color: #fff;

                  td {
                    text-align: center;
                    font-size: 14px;
                    line-height: 35px;
                    border: none !important;
                    padding: 0 !important;
                    margin: 0 !important;
                  }

                  td:first-child,
                  td:nth-child(2),
                  td:nth-child(3) {
                    width: 13%;
                  }

                  td:nth-child(4) {
                    width: 220px;
                  }

                  td:nth-child(5) {
                    width: 80px;
                  }

                  td:nth-child(6),
                  td:nth-child(7),
                  td:nth-child(8) {
                    width: e("calc((61% - 230px) / 4)");
                  }

                }

                // tr:nth-child(2n-1) {
                //   background: #162576;
                // }

                // tr:nth-child(2n) {
                //   background: #0D155C;
                // }

                .number {
                  background: url('../../../static/images/bg_02.png') center center no-repeat;
                }
              }

            }
          }
        }
        .table_bg {
          height: 347px;
          padding: 20px;
          background: url('../../../static/images/u9.png') center center no-repeat;
          background-size: 100% 100%;
        }
      }

    }
  }

  .formBox_right {
    width: 25%;
    float: right;

    .abnormal{
      margin-bottom:25px;
    }

    .formBox {

      .loss_title{
        padding-left:20px !important;
      }

      .form_title {
        width: 96%;
        height: 60px;
        background: url('../../../static/images/u6.png') center center no-repeat;
        background-size: 100% 100%;
        font-size: 24px;
        color: #B1E2FF;
        line-height: 60px;
        padding-left: 45px;
        box-sizing: border-box;
        margin-bottom: 25px;
      }

      .formMain {
        width: 100%;
        box-sizing: border-box;
      }

      .loss_bg{
        height:418px !important;
      }

      .table_bg {
        height: 347px;
        // padding: 20px;
        background: url('../../../static/images/u9.png') center center no-repeat;
        background-size: 100% 100%;
      }

      .pieBox{
        height:390px;
        
    }
    }
  }
}

// 淡入淡出
.hehe-enter,.hehe-leave-to{
  opacity: 0;
}
.hehe-enter-to,.hehe-leave{
  opacity: 1;
}
.hehe-enter-active,.hehe-leave-active{
  transition: all 3s;
}


::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}