feat: change theme and index style

web/src/assets/css/common.styl

@@ -0,0 +1,9 @@
+.btn-go{
+  background:  var(--btnColor);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px 10px;
+  &:hover{
+    color: #fff;
+  }
+}

web/src/assets/css/font.styl

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "OPlusSans3-Regular";
+  src: url("../fonts/OPlusSans3-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "OPlusSans3-Medium";
+  src: url("../fonts/OPlusSans3-Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+$font-regular = "OPlusSans3-Regular", "PingFangSC-Regular", "Roboto", "sans-serif";
+$font-medium = "OPlusSans3-Medium", "PingFangSC-Medium", "Roboto", "sans-serif";
+
+.font-regular {
+  font-family: $font-regular;
+  font-weight: normal;
+}
+
+.font-medium {
+  font-family: $font-medium;
+  font-weight: 500;
+}

web/src/assets/css/index.styl

@@ -1,7 +1,8 @@
+
 .index-page {
   margin: 0
   overflow hidden
-  color #ffffff
+  color var(--text-color)
   display flex
   justify-content center
   align-items baseline
@@ -47,11 +48,20 @@
         display flex
         padding 20px 0
 
-        color #ffffff
+        color var(--text-color);
+        .iconfont{
+          color var(--text-color);
+          font-size: 28px;
 
+        }
+        .icon-book{
+          margin-right: 6px;
+        }
         .title {
-          font-size 24px
+          color var(--text-color);
+          font-size: 24px;
           padding 10px 10px 0 10px
+          font-weight: 700;
         }
 
         .logo {
@@ -112,6 +122,34 @@
           }
         }
       }
+      .nav-item-box{
+        width: 100%;
+        border-radius: 8px;
+        cursor: pointer;
+        transition:  all 0.2s cubic-bezier(0.645,0.045,0.355,1);
+        aspect-ratio: 1.1028 / 1;
+        background: var( --card-bg)
+       display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-width: 160px
+        // min-height: 190px;
+        i{
+          display: inline-block
+          min-width: 48px;
+          width: 48px;
+          height: 48px;
+          font-size: 38px
+          border-radius: 24px;
+          color: var(--normal-color)
+        }
+
+        &:hover{
+          box-shadow: 0 4px 14px 0 rgba(17, 13, 83, .18);
+          transform: translateY(-8px);}
+        
+       }
     }
   }
 
@@ -121,4 +159,38 @@
     }
   }
 
-}
+}
+
+.cursor-ani {
+   position: relative;
+}
+ 
+.cursor-ani::after {
+   content: '';
+   position: absolute;
+   width: 1px;
+   height: 28px;
+   background: #333;
+   transform: translateX(3px) translateY(3px);
+   animation: cursor-blinks 0.8s infinite forwards;
+}
+ 
+@keyframes cursor-blinks {
+   from {
+     opacity: 0;
+   }
+ 
+   to {
+     opacity: 1;
+   }
+}
+.cursor-ani {
+  display: inline-block;
+  min-height: 34px;
+  font-size: 1.5em;
+}
+
+.msg-text span {
+  transition: color 0.3s ease; /* 平滑的颜色过渡 */
+  font-weight: bold;
+}

web/src/assets/css/theme-dark.styl

@@ -0,0 +1,21 @@
+
+@import 'font.styl'
+:root[data-theme="dark"]{
+  --text-color: rgba(255, 255, 255, 1) !important; // 主要的文本颜色
+  --normal-color: rgba(163, 174, 208, 1); // 普通颜色
+  p, h1, h2, h3, h4, h5, h6, article {
+    color: var(--text-color) !important;
+     font-family: $font-regular;
+
+  }
+  html,
+  body,
+  #app,
+  .wrapper {
+   background-color: rgb(13, 20, 53) !important;
+    font-family: $font-regular;
+  }
+  --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
+  --card-bg: rgba(17, 28, 68, 1);
+
+}

web/src/assets/css/theme-light.styl

@@ -0,0 +1,26 @@
+
+
+@import 'font.styl'
+:root[data-theme="light"] {
+  // rgba(43, 54, 116, 1)
+  --text-color: #5b62ce; // 主要的文本颜色
+  --normal-color: rgba(43, 54, 116, 1); // 普通颜色
+  p, h1, h2, h3, h4, h5, h6, article {
+    color: var(--text-color) !important;
+    font-family: $font-regular;
+  }
+  html,
+  body,
+  #app,
+  .wrapper {
+      background: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
+    //  background:  linear-gradient(180deg, #fff, #fff4fa 40%, #fbd9fd 55%, #e2d5ff 70%);
+    font-family: $font-regular;
+  }
+
+  --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
+  --card-bg:#fff;
+
+}
+
+

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,9 @@
+
 @font-face {
-  font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1731289567907') format('woff2'),
-       url('iconfont.woff?t=1731289567907') format('woff'),
-       url('iconfont.ttf?t=1731289567907') format('truetype');
+  font-family: 'iconfont';  /* Project id 4125778 */
+  src: url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.woff2?t=1732009095144') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.woff?t=1732009095144') format('woff'),
+       url('//at.alicdn.com/t/c/font_4125778_gs96jfl3hlc.ttf?t=1732009095144') format('truetype');
 }
 
 .iconfont {