Initial commit

src/assets/css/homeScreen.scss

@@ -0,0 +1,177 @@
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(to top, $color1 0%, $color2 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.bigScrenn {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  background: url('~@/assets/images/home_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  color: #fff;
+
+  // 头部
+  .homeHead,.homeHeadsmall {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 400px;
+    background: url('~@/assets/images/home_head.png') no-repeat center center;
+    background-size: 100% 100%;
+
+    .left_Head {
+      position: absolute;
+      left: 1vw;
+      top: 1.5vh;
+      transform: rotate(3deg);
+      font-family: "DigifaceWide";
+    }
+
+    .center_head {
+      position: absolute;
+      top: 2vw;
+      left: 50%;
+      transform: translateX(-56%);
+      font-size: 4vw;
+      font-family: "YSBTH";
+      letter-spacing: 0.104vw;
+      font-weight: 400;
+      white-space: nowrap;
+
+      span {
+        background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      &::before {
+        content: attr(text);
+        position: absolute;
+        z-index: -2;
+      }
+    }
+
+    .right_head {
+      position: absolute;
+      right: 1.875vw;
+      top: 0.848vw;
+      transform: rotate(-3deg);
+
+      .setting {
+        position: absolute;
+        top: -10px;
+        left: -78px;
+        width: 1.8vw;
+        height: 1.8vw;
+      }
+    }
+  }
+  .homeHeadsmall{
+    // background: url('~@/assets/images/home_head_small.png') no-repeat center center;
+    height: 6.771vw;
+    .center_head{
+      position: absolute;
+      top: 0.5vw;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 2.5vw;
+      font-family: "YSBTH";
+      letter-spacing: 0.104vw;
+      font-weight: 400;
+      white-space: nowrap;
+    }
+  }
+
+  // 侧边
+  .asidemodel {
+    position: absolute;
+    top: 4.688vw;
+    width: 22.396vw;
+    height: calc(100vh - 13.75vw);
+    transform: perspective(6.25vw) rotateY(2deg);
+
+    .asideHead {
+      position: relative;
+      height: 2.083vw;
+      line-height: 2.083vw;
+      margin-bottom: 1.042vw;
+      padding-left: 0.729vw;
+      padding-right: 0.729vw;
+      box-sizing: border-box;
+
+      span {
+        font-size: 1.458vw;
+        @include textColor(#499FF2, #ffffff);
+        font-family: "HANYILINGXINTIJIAN";
+      }
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 8.594vw;
+        height: 1.146vw;
+        left: 0.104vw;
+        top: 1.823vw;
+        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
+        background-size: 100%;
+      }
+    }
+
+    .asideHeadR {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 8.594vw;
+        height: 1.146vw;
+        left: 13.333vw;
+        top: 1.823vw;
+        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
+        background-size: 100%;
+        transform: rotate(180deg);
+      }
+    }
+
+    .modelBox {
+      height: calc(100% - 3.125vw);
+    }
+
+    .asideItem {
+      flex: 1 0 0;
+      // margin: 0px 0.052vw;
+      margin: 0 0.052vw 1.5vh;
+      overflow: hidden;
+      // margin-bottom: 0.26vw;
+      background: url('~@/assets/images/bg_04.png') no-repeat left bottom;
+      background-size: 100%;
+    }
+  }
+
+  .asidemodelR {
+    transform: perspective(6.25vw) rotateY(-2deg);
+  }
+
+  // 展开-关闭按钮
+  .showNeun {
+    position: absolute;
+    top: 47%;
+    transform: translateY(-50%);
+    width: 4.313vw;
+    height: 22.802vw;
+    background: url('~@/assets/images/home_left.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .showNeunR {
+    background: url('~@/assets/images/home_right.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+}