YPZZBWG/houtai/src/pages/A1Hot/index.module.scss

.Hot {
  :global {
    .hotMainBox {
      height: 100%;
      overflow: auto;
      overflow-y: overlay;

      .hotTit {
        position: relative;
        z-index: 10;
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;

        .inco {
          cursor: pointer;
          margin-left: 10px;
          font-size: 14px;
          color: #7e8293;
        }
      }

      .hotTitSelect {
        font-weight: 700;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .hotTime {
        margin-top: 5px;
        font-size: 14px;
        text-align: center;
      }

      .topBox {
        height: 500px;
        display: flex;

        .topBoxL {
          position: relative;
          z-index: 10;
          width: calc(55% - 10px);

          .topBoxL1 {
            border-radius: 10px;
            background-color: #fff;
            height: 245px;
            margin-bottom: 10px;
            padding: 10px 15px 0;

            #echarts1 {
              width: 100%;
              height: 180px;
            }
          }

          .topBoxL2 {
            display: flex;

            &>div {
              border-radius: 10px;
              background-color: #fff;
              width: calc(50% - 4px);
              height: 245px;
              padding: 10px 15px 0;
            }

            #echarts2 {
              width: 100%;
              height: 180px;
            }

            #echarts3 {
              width: 100%;
              height: 180px;
            }

            .topBoxL2L {
              margin-right: 8px;
            }
          }
        }

        .topBoxR {
          overflow: hidden;
          margin-left: 10px;
          border-radius: 10px;
          width: 45%;
          background-color: #fff;
          padding: 10px 15px 0;
        }
      }

      .downBox {
        margin: 15px 0 0;
        height: 464px;
        display: flex;

        .downBoxL {
          width: calc(70% - 6px);
          height: 100%;

          .downBoxLTop {
            display: flex;
            padding: 0 15px;
            align-items: center;
            height: 56px;
            border-radius: 10px;
            background-color: #fff;
            margin-bottom: 6px;

            .downBoxLTopTit {
              font-size: 12px;
              margin-left: 10px;
            }

            .downBoxLTopInco {
              font-size: 18px;
              margin-right: 10px;
            }
          }

          .downBoxLMain {
            height: calc(100% - 62px);
            .downBoxLMain2 {
              display: flex;
              height: 400px;

              &>div {
                width: calc(33.33% - 4px);
                height: 100%;
                border-radius: 10px;
                background-color: #fff;
                padding: 10px 15px 0;
                position: relative;
              }

              .echarts4Box {
                position: relative;
                width: 100%;
                height: 368px;

                #echarts4 {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                }

                .echarts4BoxTxt {
                  position: absolute;
                  z-index: 10;
                  top: 30%;
                  left: 45%;
                  text-align: center;
                  min-width: 34px;


                  &>p {
                    font-weight: 700;
                    font-size: 18px;
                  }
                }
              }

              .downBoxLMain2L {
                margin: 0 6px;
              }
              .noneInfo {
                width: 100%;
                height: calc(100% - 32px);
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .downBoxLMain2LRowBox {
                margin-top: 30px;

                .downBoxLMain2LRow {
                  margin-bottom: 15px;
                  border-radius: 5px;
                  box-shadow: 0px 0px 2px 0px #ccc;
                  height: 46px;
                  line-height: 46px;
                  padding: 0 20px 0 8px;
                  display: flex;
                  justify-content: space-between;

                  .downBoxLMain2LRow1 {
                    width: calc(100% - 50px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .downBoxLMain2LRow2 {
                    text-align: right;
                    width: 50px;
                  }
                }
              }
            }
          }
        }

        .downBoxR {
          margin-left: 6px;
          width: 30%;
          border-radius: 10px;
          background-color: #fff;
          height: 100%;
          padding: 10px 20px 0 15px;

          .downBoxRBox {
            position: relative;
            width: 100%;
            height: 420px;

            #echarts7 {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }

            .downBoxRBoxTxt {
              position: absolute;
              z-index: 10;
              top: 30%;
              left: 46.5%;
              text-align: center;
              min-width: 34px;


              &>p {
                font-weight: 700;
                font-size: 18px;
              }
            }
          }

        }
      }
    }

  }
}