zcloud-gbs-bi-react/src/pages/Container/White/Share/components/LeftPanel/index.less

.white_share_left {
  color: #305683;

  .block1 {
    width: 100%;

    .white_share_left_conten {
      width: 100%;
      background-image: linear-gradient(90deg, rgb(218, 233, 250) 39%, rgb(226, 239, 255) 100%);
      padding: 5px;
      border: 2px solid transparent;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff) 1;
      display: flex;
      align-items: center;
      border-radius: 2px;

      .cake_contant {
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 20px;
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 50%;
          text-align: center;
          margin: 5px 0;

          .title {
            font-size: 14px;
            font-weight: bold;
            color: #2b4977;
          }

          .num {
            font-size: 24px;

          }

          .fcb {
            color: #5daaff;
          }

          .fcc {
            color: #ffa801;
          }

          .fco {
            color: #ff6000;
          }

          .fcr {
            color: #ff2709;
          }
        }
      }
    }
  }

  .block2 {
    margin-top: 10px;

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

      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .item {
          text-align: center;
          border-style: solid;
          border-width: 1px;
          border-color: rgb(255, 255, 255);
          border-radius: 4px;
          background-color: rgba(1, 162, 255, 0);
          width: 49%;

          box-shadow: 0 2px 2px 0 rgba(114, 163, 191, 0.45);
          padding: 10px;

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

          .item_container {
            color: #51719c;
            margin-top: 5px;

            .fcb {
              color: #0097f7;
            }

            .fcg {
              color: #0a9503;
            }

            .fcr {
              color: #ff2100;
            }
          }
        }
      }

      .container {
        width: 100%;
        display: flex;
        margin-top: 10px;

        .left_table {
          width: 50%;
          .table-style(109px, 1fr 1.2fr 1fr);
        }

        .info {
          width: 50%;
          margin-left: 10px;

          .title {
            font-size: 14px;
            border-width: 1px;
            border-color: rgb(255, 255, 255);
            border-style: solid;
            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);
            border-radius: 50px;
            padding: 5px 10px;
            font-weight: bold;
            color: #38688e;
          }

          .comment {
            padding-left: 10px;
            margin-top: 10px;

            p {
              margin: 0;
              line-height: 30px;
              color: #305683;

              span {
                color: #00aeff;
                font-weight: bold;

                .fcr {
                  color: #f90102;
                }
              }
            }
          }
        }
      }
    }
  }

  .block3 {
    margin-top: 10px;

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

      .top {
        width: 100%;

        .item {
          width: 100%;
          border-style: solid;
          border-width: 1px;
          border-color: #aacbed;
          border-radius: 4px;
          background-color: rgb(205, 233, 255);
          padding: 4px;
          margin-bottom: 5px;

          .content {
            width: 100%;
            border-style: solid;
            border-width: 1px;
            border-color: rgb(255, 255, 255);
            border-radius: 4px;
            background-color: rgb(215, 236, 254);
            box-shadow: 0 1px 1px 0 rgba(114, 163, 191, 0.45);
            display: flex;
            align-items: center;

            .title {
              font-size: 18px;
              color: #457fc0;
              font-weight: bold;
              border-style: solid;
              border-width: 2px;
              border-color: #c6e6fe;
              background-image: linear-gradient(90deg, rgb(227, 240, 255) 0%, rgb(201, 231, 249) 100%);
              text-align: center;
              padding: 2px 10px;
              line-height: 20px;
            }

            .info {
              flex: 1;
              display: flex;

              .list {
                text-align: center;
                width: 25%;

                .name {
                  font-size: 12px;
                }

                .num {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }

      .field {
        width: 100%;

        .top {
          width: 100%;
          background-color: rgb(205, 233, 255);
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          border-radius: 4px;
          border: 1px solid #b7d6f5;
          color: #457fc0;
        }
      }

      .main {
        width: 100%;
        .table-style(200px, 1fr 1fr 1fr 1fr 1fr);
      }
    }
  }
}

.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;
        }
      }

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