tqv-data-operation-screen/src/pages/gvc/style.less

@import url("../../themes/themes.less");

@assetUrl: "../../assets/imgs/home";


.gvc_home {
  background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
  // background: #000;

  :global {
    .rightContent .bottomContent3 {
      width: 100%;
      height: 100%;
    }

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

      .gvc_video {
        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
        align-items: flex-start;
        // background: #000;

        video {
          width: 100%;
          height: unset;
          padding: 0;
        }

        .alls {

          width: 64%;
          height: unset;
          padding: 2% 0 0 0;
          position: relative;
        }

        @media (min-height: 800px) {
          .alls {
            width: 73%;
          }
        }

        @media (min-height: 900px) {
          .alls {
            width: 64%;
          }
        }

        @media (min-height: 1000PX) {
          .alls {
            width: 70%;
          }
        }

      }

      .gvcHome {
        height: 100%;
        justify-content: flex-start;

        .leftContent {
          width: 17%;
          /* padding: 0 1em; */
          height: 70%;
          margin-top: 5%;
          margin-left: 1%;
          padding-right: 7%;

          >ul {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 100%;
            flex-wrap: wrap;

            >li {
              height: 20%;
              width: 100%;
              color: #fff;
              display: block;

              .top_div {
                background: none;
                width: 100%;
                height: 60%;
                display: flex;
                align-items: center;
                justify-content: center;

                >div {
                  width: 51%;
                  position: relative;
                  display: block;

                  .img1 {
                    width: 100%;
                  }

                  >span {
                    font-size: 0.9em;
                    position: absolute;
                    width: 100%;
                    bottom: 15%;
                    left: 63%;
                    transform: skew(4deg, 334deg);
                    font-weight: normal;
                    color: #ededed;

                  }

                  .img2 {
                    width: 37%;
                    position: absolute;
                    left: 32%;
                    top: 24%;
                  }
                }
              }

              .text {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 1em;
                font-weight: normal;
                font-size: 0.9em;
                color: #CDF1FF;
                padding: 0.8em 0.5em 0.2em;
                background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
                border-radius: 0.5em;

                .topMsg_number {
                  color: #69FFDE;
                  font-size: 1.2em;
                  margin-right: 0.2em;
                  margin-top: 0.2em;
                }
              }
            }
          }
        }

        @media (max-height: 900px) {
          .leftContent li {
            height: 15% !important;

            .text {
              width: 107% !important;
              margin-top: 1em !important;

              .topMsg_number {
                font-size: 1em !important;
              }
            }
          }
        }


        .centerCon {
          width: 62%;
          height: 80%;
          padding: 0;
          position: relative;
          margin: 0% 0 0 -1%;

          .rightCar {
            width: 4.5em;
            transform: skew(54deg, 306deg);
            position: absolute;
            left: 53%;
            top: 36%;
            -webkit-animation: antSpinMove 8s linear infinite;;
            animation: antSpinMove 8s linear infinite;;

            >img {
              width: 100%;
            }
          }

        }

        

        @media (min-height: 800px) {
          .centerCon {
            width: 65%;
            height: 78%;
            padding: 0;
            position: relative;
            margin: 0% 0 0 -3%;
            .rightCar {
              -webkit-animation: antSpinMove900 8s linear infinite;;
              animation: antSpinMove900 8s linear infinite;;
                
            }
          }
        }

        @media (min-height: 900px) {
          .centerCon {
            width: 62%;
            height: 80%;
            padding: 0;
            position: relative;
            margin: 0% 0 0 -1%;
            .rightCar {
              -webkit-animation: antSpinMove 8s linear infinite;;
              animation: antSpinMove 8s linear infinite;;
            }
          }
        }

        @media (min-height: 1000PX) {
          .centerCon {
            width: 63%;
            height: 75%;
            padding: 0;
            position: relative;
            margin: 0% 0 0 -3%;
            .rightCar {
              -webkit-animation: antSpinMove1100 8s linear infinite;;
              animation: antSpinMove1100 8s linear infinite;;
                
            }
          }
        }


        .imgMsg {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          color: #fff;

          li {
            position: absolute;
            width: 19em;
            height: 4em;
            opacity: 1;
            background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
            border-radius: 0.5em;
            padding: 0.5em;
            box-sizing: border-box;
            font-size: 0.9em;
            color: #CDF1FF;

            .nums {
              font-size: 1.3em;
              color: #69FFDE;
              display: inline-block !important;
            }

            .topMsg_number_2 {
              display: inline-block !important;
            }

            .sma {
              font-size: 0.7em;
              color: #CDF1FF;
              display: inline-block;
              margin-left: 0.2em;
            }

            .chanL {
              background: unset;
              font-size: 0.9em;
              color: #CDF1FF;
              height: 4em;
              box-sizing: border-box;
              padding: 0 0.5em;
              display: flex;
              justify-content: space-between;

              >div {
                width: 50%;
              }
            }

            .hoverR {
              width: 100%;
              height: 12em;
              position: absolute;
              left: 0;
              top: -7em;
              padding-top: 11em;


              .hoverDiv {
                display: none;
              }
            }

            .hoverR:hover {
              .hoverDiv {
                display: flex;
              }
            }

            .hoverDiv {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 1em;
              background: linear-gradient(0deg, #292929f2 0%, #25252540 100%);
              // linear-gradient(0deg, #ffffff00 20%, #7a7a7a29 100%);
              width: 100%;
              border-radius: 0.5em;
              box-sizing: border-box;
              margin-top: 0.1em;
              font-size: 0.8em;
              padding: 0.2em 0em 0 1em;
              color: #d7d7d7;
              align-items: flex-start;
              height: auto;

              >div>span {
                display: block;
              }
            }
          }

          li:hover {
            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
          }
        }

        .rightContent {
          width: 15%;
          position: absolute;
          right: 0;
          bottom: 15%;
          z-index: 9;
          height: 45%;

          .title_ {
            text-align: left;
            color: #fff;
            width: 90%;
            height: 2em;
            border-radius: 0 8px 0 0;
            opacity: 1;
            background: linear-gradient(45deg, #ffdf5800 0%, #ffdf584d 100%);
            line-height: 2em;
            color: #F1E9E0;
            margin-bottom: 0.6em;
          }

          .eacharView {
            height: auto;
            overflow: hidden;
          }

          .slider_box {
            padding: 0 0.5em;
            box-sizing: border-box;
          }

          .slider_top {
            width: 100%;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #d4d4d4;
            font-weight: normal;

            >p {
              width: 83%;
              display: flex;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              >span {
                display: inline-block;
                width: 99%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .p2 {
              width: 30%;
              display: inline-block;
              text-align: right;
            }
          }

          .ant-progress {
            height: 10px;

            .ant-progress-inner {
              top: -5px;
              background-color: #57575759;

              .ant-progress-bg {
                height: 5px !important;
              }
            }
          }

        }

        @media (min-height: 800px) {
          .rightContent {
            bottom: 15%;
            height: 38%;
          }
        }

        @media (min-height: 900px) {
          .rightContent {
            bottom: 15%;
          }
        }

        @media (min-height: 1000px) {
          .rightContent {
            bottom: 15%;
            height: 32%;
          }
        }
      }
    }
  }
}