first commit

2026-09-02 16:31:50 +08:00
commit a461727193
911 changed files with 692450 additions and 0 deletions
@@ -0,0 +1,139 @@
+#index {
+  color: #d3d6dd;
+ // background-color: black;
+  width: 100%;
+  height: 100vh;
+  // position: absolute;
+  transform-origin: left top;
+  overflow: hidden;
+
+
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 0.2rem 0.2rem 0 0.2rem;
+    background-image:url("/img/pageBg.png") ;
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .bg{
+      color: red($color: red);
+    }
+    .title {
+      position: relative;
+      width: 6.25rem;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 0.3rem;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .title-bototm {
+        position: absolute;
+        bottom: -0.375rem;
+        left: 50%;
+        transform: translate(-50%);
+      }
+    }
+
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      // background-color: #0f1325;
+      background-color: #1a5cd7;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 430px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        // background-color: #0f1325;
+        background-color: #1a5cd7;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 18px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      // background-color: #0f1325;
+      background-color: #1a5cd7;
+
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        // background-color: #0f1325;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+    .body-box {
+      margin-top: 0.2rem;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 4fr 7fr 4fr;
+      }
+
+      // 底部数据
+      .bototm-box {
+        margin-top: 0.125rem;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+      }
+
+
+    }
+  }
+}