更新大屏

src/assets/css/homeScreen.scss

@@ -0,0 +1,228 @@
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.homeBox{
+    width: 100%;
+    height: 100vh;
+    .home-contant{
+      position: relative;
+      top: 70px;
+      width: 100%;
+      height: calc(100vh - 72px);
+      overflow: hidden;
+      z-index: 2;
+      .home-aside{
+        width: 442px;
+        height: 100%;
+        z-index: 10;
+      }
+      .homeBtn{
+        height: 302px;
+        width: calc(100% - 894px);
+        position: absolute;
+        bottom: 2px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    // 头部
+    .headBox {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      height: 151px;
+      background: url("~@/assets/images/home_head.png") no-repeat center center;
+      background-size: 100% 100%;
+      .top-center {
+        position: absolute;
+        left: 50%;
+        top: 2%;
+        transform: translateX(-50%);
+        font-size: 56px;
+        letter-spacing: 2px;
+        font-family: "YSBTH";
+        white-space: nowrap;
+        background-image: linear-gradient(
+          72deg,
+          #0072ff 0%,
+          #00ffff 18%,
+          #07e9ff 51%,
+          #00ffff 83%,
+          #0072ff 100%
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
+      }
+      .topBtn {
+        display: flex;
+        position: absolute;
+        top: 15%;
+        .topBtn-item {
+          width: 190px;
+          height: 38px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: url("~@/assets/images/home_btns.png") no-repeat center center;
+          background-size: 100% 100%;
+          font-size: 18px;
+          cursor: pointer;
+          span {
+            font-family: "YSBTH";
+            margin-top: -4px;
+            @include textColor(#a1d6ff, #ffffff);
+          }
+        }
+        .yjbtn{
+          width: 155px;
+          height: 38px;
+          line-height: 38px;
+          text-align: center;
+          background: url("~@/assets/images/home_btns.png") no-repeat center center;
+          background-size: 100% 100%;
+          font-size: 16px;
+          font-family: "YSBTH";
+          .btms{
+            @include textColor(#a1d6ff, #ffffff);
+          }
+        }
+        .yjbtnActive{
+          // background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
+          // background-size: 100% 100%;
+        }
+      }
+      .topBtn-left {
+        left: 5px;
+        font-size: 12px;
+        .text {
+          font-family: "YSBTH";
+          color: #0bb7ff;
+        }
+        .tests {
+          color: #0a99ff;
+        }
+      }
+      .topBtn-right {
+        right: 170px;
+        .topBtn-item {
+          background: url("~@/assets/images/home_btns_right.png") no-repeat center
+            center;
+          background-size: 100% 100%;
+        }
+        .active-topBtn {
+          background: url("~@/assets/images/home_btns_right_active.png") no-repeat
+            center center;
+          background-size: 100% 100%;
+          span {
+            @include textColor(#00ffff, #faff00);
+          }
+        }
+      }
+      .rightIcon {
+        position: absolute;
+        right: 20px;
+        top: 20%;
+        font-size: 17px;
+        span {
+          color: #0bb7ff;
+          cursor: pointer;
+        }
+        img {
+          width: 20px;
+        }
+      }
+    }
+    // 左边
+    .asideL{
+      position: absolute;
+      box-sizing: border-box;
+      left: 10px;
+      .asideL-top{
+        width: 100%;
+        height: 141px;
+        background: #052249;
+      }
+      .asideL-Bottom{
+        height: calc(100% - 141px);
+        .commom-aside{
+          height: calc((100%/3) - 6px);
+          margin-top: 7px;
+          background: #052249;
+        }
+      }
+    }
+    // 右边
+    .asideR{
+      position: absolute;
+      right: 10px;
+      .commom-aside-small{
+        height: calc(((100% - 146px) /3) - 6px);
+        background: #052249;
+        margin-top: 9px;
+      }
+      .commom-aside-big{
+        height: calc(((100% - (100% - 146px) /3)/2) - 6px);
+        margin-bottom: 9px;
+        background: #052249;
+      }
+    }
+    
+    .home-center{
+      position: absolute;
+      left: 50%;
+      top: 0px;
+      transform: translateX(-50%);
+      width: calc(100% - 920px);
+      height: 80px;
+    }
+    .home-foot{
+      position: absolute;
+      left: 50%;
+      bottom: 0px;
+      transform: translateX(-50%);
+      width: calc(100% - 920px);
+      height: calc((100% - 141px)/3 - 9px);
+      min-width: 560px;
+      overflow: hidden;
+      background: url("~@/assets/images/right-1.png") no-repeat center center;
+      background-size: 100% 100%;
+      .comom-title{
+        background: url("~@/assets/images/bg18.png") no-repeat center center;
+        background-size: 100% 100%;
+        .title{
+          font-size: 22px;
+          font-family: 'YSBTH';
+          padding-left: 35px;
+        }
+      }
+    }
+  
+    // 公用
+    .comom-title{
+      background: url("~@/assets/images/bg17.png") no-repeat center center;
+      background-size: 100% 100%;
+      width: 100%;
+      height: 35px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      box-sizing: border-box;
+      .title{
+        font-size: 22px;
+        font-family: 'YSBTH';
+        padding-left: 35px;
+      }
+    }
+    .comom-cnt{
+      height: calc(100% - 35px);
+      padding: 4px 10px;
+      box-sizing: border-box;
+      background: url("~@/assets/images/bg_13.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+    
+  }