zcloud-gbs-bi-react/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less

@import "../../index.less";

.white_branch_office_center_container {
  flex: 1;

  .block1 {
    .container {
      border-radius: 0 0 4px 4px;
      border: 1px solid #fff;
      border-top: none;
      background-color: #E0EDFD;
      padding: 16px 11px;

      > div {
        display: flex;
        gap: 10px;
      }

      .block1_1 {
        width: 50%;
        border-radius: 4px;
        border: 1px solid #fff;
        background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
        box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
      }

      .block1_2 {
        width: 50%;
        border-radius: 4px;
        border: 1px solid #fff;
        background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
        box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
        padding: 10px 11px;

        .weather {
          display: flex;
          gap: 40px;

          .icon {
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 5px;

            .img {
              img {
                width: 40px;
                height: 40px;
              }
            }

            .text {
              color: #2B4977;
              writing-mode: vertical-lr;
              letter-spacing: 5px;
              font-size: 14px;
              font-weight: bold;
            }
          }

          .items {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px 10px;

            .item {
              width: calc((100% / 2) - 10px);
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
              gap: 10px;

              .info {
                .label {
                  font-size: 14px;
                  color: #2B4977;
                  font-weight: bold;
                }

                .value {
                  font-size: 20px;
                  color: #2E75C6;
                  font-weight: bold;
                }
              }
            }
          }
        }

        .alert {
          margin-top: 10px;

          .scroll {
            height: 20px;
            overflow-y: hidden;

            .item {
              .title {
                font-weight: bold;
                font-size: 14px;
              }
            }
          }
        }

        .table-style(50px, repeat(3, 1fr));

        .table {
          margin-top: 5px;
        }
      }

      .block1_3 {
        margin-top: 10px;

        .items {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 9px;

          .item {
            flex: 1;
            border-radius: 4px;
            border: 1px solid #fff;
            background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
            box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
            padding: 10px 20px;
            text-align: center;

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

            .info {
              margin-top: 10px;
              display: flex;
              justify-content: center;

              > div {
                &:first-child {
                  margin-right: 30px;
                  position: relative;
                  &::before {
                    content: "";
                    position: absolute;
                    width: 1px;
                    height: 60%;
                    background-color: rgba(48, 86, 131, 0.3);
                    top: 20%;
                    left: calc(100% + 30px);
                }
                }

                &:last-child {
                  margin-left: 30px;
                }
              }

              .label {
                color: #305683;
                font-size: 14px;
              }

              .value {
                font-size: 18px;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  .block2{
    margin-top: 10px;
    display: flex;
    gap: 10px;

    .block2_1{
      width: 50%;
      border-radius: 4px;
      border: 1px solid #fff;
      background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
      box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
    }

    .block2_2{
      width: 50%;
      border-radius: 4px;
      border: 1px solid #fff;
      background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
      box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
    }
  }

  .block3{
    margin-top: 10px;
    display: flex;
    gap: 10px;

    .block3_1{
      width: 50%;
      border-radius: 4px;
      border: 1px solid #fff;
      background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
      box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
    }

    .block3_2{
      width: 50%;
      border-radius: 4px;
      border: 1px solid #fff;
      background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
      box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);

      .tabs {
        display: flex;

        .tab {
          background-color: #D6ECFF;
          padding: 4px 16px;
          border-radius: 2px;
          color: #3C648D;
          font-size: 14px;
          border: 1px solid #A3CCFA;
          cursor: pointer;

          &.active {
            background-color: #6291fa;
            border: 1px solid #6291fa;
            color: #fff;
          }
        }
      }
    }
  }
}