.production {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f8fbff;

  .topPro {
    height: 32px;
    padding: 40px 50px 12px;

    .addSiteBtn {
      float: left;
      height: 32px;
      padding: 0 20px;
    }
  }

  .bottomDiv {
    height: calc(100% - 99px);
    width: calc(100% - 100px);
    margin: 0 50px;

    .addSite {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;

      .addContent {
        width: 210px;
        text-align: center;

        .noSiteBg {
          width: 210px;
          height: 140px;
          background: url(../../../assets/img/null_site.png) no-repeat center;
        }

        p {
          height: 20px;
          line-height: 20px;
          margin-top: 15px;
          margin-bottom: 15px;
          font-size: 14px;
          color: #888;
        }

        .addSiteBtn {
          height: 32px;
          padding: 0 20px;
        }
      }
    }

    .siteList {
      width: 100%;
      height: 100%;

      .site {
        float: left;
        width: calc(50% - 52px);
        margin-right: 20px;
        margin-bottom: 20px;
        height: 268px;
        padding: 16px;
        background: #fff;
        box-shadow: 0 8px 16px 0 rgba(80, 110, 255, .1);
        border-radius: 5px;

        .leftSide {
          float: left;
          width: 108px;
          height: calc(100% - 60px);
          padding: 30px;
          margin-right: 16px;
          background: #eee;

          .sideBg {
            width: 100%;
            height: 100%;
            background: url(../../../assets/img/broadCastbg.svg) no-repeat center;
            background-size: contain;
          }
        }

        .rightSide {
          float: left;
          width: calc(100% - 184px);
          height: 100%;

          .name {
            width: 100%;
            display: block;
            color: #595959;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            line-height: 20px;
          }

          .url {
            width: 100%;
            height: 14px;
            line-height: 14px;
            margin-top: 5px;
            text-align: left;
            font-size: 14px;
            color: #bfbfbf;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
          }

          .locationUrl {
            height: 18px;
            margin-top: 8px;

            span {
              float: left;
              margin-right: 12px;
              height: 18px;
              line-height: 18px;
              color: #888;
              cursor: pointer;
              font-size: 14px;

              i {
                font-size: 18px;
                margin-right: 6px;
              }
            }
          }

          .operation {
            height: 32px;
            margin-top: 40px;

            /deep/.el-button {
              padding: 8px 20px;
            }
          }

          .bigBox {
            height: calc(100% - 147px);
            margin-top: 10px;

            .blockBox {
              float: left;
              width: calc((100% - 45px)/4);
              margin-right: 15px;
              height: 100%;
              background: hsla(0, 0%, 75%, .1);
              text-align: center;
              color: #595959;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;

              em {
                display: block;
                text-align: center;
                height: 14px;
                font-size: 14px;
                line-height: 14px;
                color: #bfbfbf;
                margin-bottom: 15px;
              }

              span {
                display: block;
                width: 100%;
                max-width: 115px;
                text-align: center;
                height: 22px;
                line-height: 22px;
                font-size: 22px;
                color: #595959;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

              }

              span:hover {
                color: #1095fe;
              }
            }
          }

          .blockBox:last-of-type {
            margin-right: 0px
          }
        }
      }

      .site:nth-child(2n) {
        margin-right: 0px;
      }
    }
  }
}

/deep/.el-form {
  float: right;

  .el-form-item {
    float: left;
    margin-bottom: 0;
    margin-right: 12px;

    .el-form-item__content {
      line-height: 32px;

      .el-input__inner {
        height: 32px;
        line-height: 32px;
        border: 1px solid #ddd;
      }

      .el-icon-search {
        margin-left: 5px;
        margin-right: 5px;
      }
    }

  }
}

/deep/.el-dialog {
  width: 490px;

  .el-dialog__header {
    border-bottom: 1px #d3d3d3 solid;
  }

  .el-dialog__body {
    overflow: hidden;
    display: flex;
    justify-content: center;

    .createBox {
      float: left;
      width: 180px;
      height: 240px;
      border: 1px solid #e8e8e8;
      box-shadow: 0 4px 10px 0 rgba(87, 87, 87, .1);
      cursor: pointer;
      position: relative;

      span {
        position: absolute;
        width: 100%;
        text-align: center;
        height: 16px;
        line-height: 16px;
        left: 0;
        bottom: 20px;
        font-size: 16px;
        color: #888;
      }
    }

    .createBlank {
      margin-right: 20px;
      background: url(../../../assets/img/kongbaiye.png) no-repeat center;
    }

    .createTem {
      background: url(../../../assets/img/moban.png) no-repeat center;
    }
  }

}