大屏

liuying

2024-11-11 62ec1f19c3444695e21f1fe97472261ce3082075

 yiqi_screen/src/components/Content.vue

@@ -88,7 +88,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
          </div>
@@ -98,7 +98,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
            <div
@@ -339,7 +339,6 @@
    //   easing: "easeOutExpo", // 运动效果
    //   loop: true, // 设置无限循环
    // });

    // // 第一个动画：横向移动
    // timeline
    //   .add({
@@ -361,7 +360,6 @@
    //     duration: 0, // 不需要动画
    //     delay: 1000, // 隔断时间1秒
    //   });

    // setTimeout(() => {
    //   timeline.pause(); // 暂停动画
    //   document.getElementById('animatedImage').classList.add('hidden');
@@ -403,10 +401,10 @@
    margin-bottom: 0.25rem;

    .title {
      font-family: Source Han Sans CN;
      display: flex;
      vertical-align: middle;
      align-items: center;
      color: #41c7de;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
@@ -414,6 +412,11 @@
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;

      background: linear-gradient(0deg, #a7ffff, #83d0dc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      .imgTitle {
        width: 117px;
        margin-right: 69px;
@@ -421,26 +424,28 @@
    }

    .left-text {
      font-size: 18px;
    color: #fff;
    position: absolute;
    top: 57px;
    left: 38px;
    width: 372px;
    text-align: right;
    line-height: 48px;
    font-weight: 700;
      font-size: 20px;
      color: #fff;
      position: absolute;
      top: 63px;
      left: 37px;
      width: 368px;
      text-align: right;
      line-height: 48px;
      font-weight: 700;
      letter-spacing: -2px;
    }

    .right-text {
      font-size: 18px;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 57px;
    right: 268px;
    line-height: 48px;
    font-weight: 700;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 63px;
      right: 268px;
      line-height: 48px;
      font-weight: 700;
      letter-spacing: -2px;
    }
  }

@@ -558,12 +563,9 @@
    }

    .main-bottom {
      // height: auto;
      height: 320px;
      // border: 1px solid red;
      display: flex;
      // background-color: skyblue;

      justify-content: center;
      .border_left1 {
        width: 284px;
        margin-right: 20px;
@@ -583,7 +585,7 @@
      }

      .border_middle {
      width: 720px;
        width: 720px;
        margin-right: 20px;
        border: 0 !important;
        // background-image: url("~@/assets/images/border_middle.png");
@@ -621,7 +623,8 @@
          font-weight: 700;
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #04279d;
          border-bottom: 2px solid #0739a3;
          
        }
      }

@@ -631,22 +634,22 @@
        .pie-label-left {
          position: absolute;
          bottom: 10px;
          left: 0.1rem;
          color: #d9dbe6;
          font-size: 18px;
          left: 0;
          color: white;
          font-size: 16px;
          font-weight: 300;
          width: 44%;
          width: 54%;
          text-align: center;
        }

        .pie-label-right {
          position: absolute;
          bottom: 10px;
          right: 0.3rem;
          right: 0;
          color: #fff;
          color: #d9dbe6;
          font-size: 18px;
          width: 44%;
          color: white;
          font-size: 16px;
          width: 54%;
          text-align: center;
        }
      }