.white_share_middle {

  .block1 {
    .block1_content {
      width: 100%;
      background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
      border: 2px solid transparent;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
      border-radius: 2px;

      .block1_content_con {
        display: flex;

        .emergency_left {
          width: 480px;

          .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 5px;
            box-sizing: border-box;

            .item {
              border-width: 1px;
              border-color: rgb(255, 255, 255);
              border-style: solid;
              background-color: rgba(197, 224, 246, 0.8);
              box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);
              padding: 5px 12px;
              text-align: center;
              color: #3d5882;
              border-radius: 4px;

              p {
                padding: 0;
                margin: 0;
              }

              .num {
                font-size: 20px;
                color: #4387d6;
              }
            }
          }

          .emergency_left_main {
            width: 470px;
            margin: 0 5px 5px;
            border-style: solid;
            border-width: 1px;
            border-color: #b5d7f7;
            border-radius: 4px;
            background-color: rgb(205, 233, 255);
            padding: 5px;
            box-sizing: border-box;

            .table-style(149px, 1fr 1fr 1fr 1fr);
          }
        }

        .emergency_right {
          padding: 5px;
          flex: 1;
          margin: 5px;
          border-width: 1px;
          border-color: rgb(255, 255, 255);
          border-style: solid;
          border-radius: 2px;
          background-color: rgba(197, 224, 246, 0.8);
          box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);

          .weather {
            .title {
              color: #ff6600;
              font-size: 14px;
              font-weight: bold;
            }

            .weather_main {
              width: 100%;
              display: flex;
              justify-content: space-between;
              color: #2b4977;
              font-size: 14px;
              font-weight: bold;
              margin-top: 5px;

              .item {
                width: 30%;
                text-align: center;

                .num {
                  color: #2e75c6;
                }
              }
            }

            .weather_bottom {
              .fcb {
                color: #0c90ff;
              }

              .table-style(145px, 1fr 1fr 2fr);
            }
          }
        }
      }

      .block1_content_bottem {
        width: 100%;

        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          align-items: center;

          .title {
            font-size: 15px;
            font-weight: bold;
            color: #3f4554;
            margin-left: 5px;
          }

          .block1_content_bottem_tab {
            display: flex;
            border-style: solid;
            border-width: 1px;
            border-color: rgb(163, 204, 250);
            border-radius: 4px;
            background-color: rgb(214, 236, 255);
            margin-right: 5px;
            align-items: center;

            .item {
              padding: 0 10px;

              &.active {
                background: #6291fa;
                color: #ffffff;
              }

              &:hover {
                background: #6291fa;
                color: #ffffff;
                cursor: pointer;
              }
            }
          }
        }

        .block1_content_con {
          border-width: 1px;
          border-color: rgb(255, 255, 255);
          border-style: solid;
          border-radius: 4px;
          background-color: rgba(234, 246, 255, 0.8);
          margin: 5px;
          padding: 5px;
          .table-style(240px, 2fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr);

          .table {
            width: 100%;
          }
        }
      }
    }
  }

  .block2 {
    margin-top: 10px;

    .block2_content {
      width: 100%;
      background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
      border: 2px solid transparent;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      .table-style(215px, 1fr 1fr);
      padding: 5px;

      .item {
        width: 33%;
        text-align: center;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #3b445c;
        }
      }
    }
  }
}


.table-style(@height, @grid-template-columns) {
  .table {
    border: 1px solid #fff;

    .scroll {
      height: @height;
      overflow-y: hidden;

      .tr {
        &:nth-child(odd) {
          background-color: transparent;
        }
      }
    }

    .tr {
      display: grid;
      grid-template-columns: @grid-template-columns;
      background-color: #C4E2F8;

      &:not(:last-child) {
        border-bottom: 1px solid #fff;
      }

      .td, .th {
        text-align: center;
        font-size: 14px;
        color: #3B445C;
        border-right: 1px solid #fff;
        height: 28px;
        line-height: 28px;

        &:last-child {
          border-right: none;
        }
      }

      .fcb {
        color: #0c90ff;
      }

      .th {
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
    }
  }
}
