geekai/web/src/assets/css/index.styl

.index-page {
  margin: 0
  overflow hidden
  color var(--text-color)
  display flex
  align-items center
  background: var(--theme-bg) !important
  flex-flow column
  height: 100vh

 

  .color-bg {
    position absolute
    top 0
    left 0
    width 100vw
    height 100vh
  }

  .image-bg {
    filter: blur(8px);
    background-size: cover;
    background-position: center;
  }

  .shadow {
    box-shadow rgba(0, 0, 0, 0.3) 0px 0px 3px

    &:hover {
      box-shadow rgba(0, 0, 0, 0.3) 0px 0px 8px
    }
  }

  .menu-box {
    width 100%
    display flex
    height 80px
    align-items center

    .el-menu {
      padding 0 30px
      width 100%
      display flex
      justify-content space-between
      align-items center
      background none
      border none

      .menu-item {
        display flex
        // padding 20px 0
        height 40px
        align-items center

        color var(--text-color);
        .iconfont{
          color var(--text-color);
          font-size: 28px;

        }
        .icon-book{
          margin-right: 6px;
        }
        .title {
          color var(--text-color);
          font-size: 24px;
          padding 10px 10px 0 10px
          font-weight: 700;
        }

        .logo {
          height 60px
          border-radius 50%
          background: #fff
          border: 2px solid #754ff6
        }

        .el-button {
          margin-left 10px

          span {
            margin-left 5px
          }
        }
      }
    }
  }

  .content {
    text-align: center;
    position relative
    display flex
    flex-flow: column;
    align-items: center;

    h1 {
      font-size: 5rem;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }

    .navs {
      display flex
      max-width 900px
      padding 20px

      .el-space--horizontal {
        justify-content center
      }

      .nav-item {
        width 200px
        .el-button {
          width 100%
          padding: 25px 20px;
          font-size: 1.3rem;
          transition: all 0.3s ease;

          .iconfont {
            font-size 24px
            margin-right 10px
            position relative
            top -2px
          }
        }
      }
      .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);}
        
       }
    }
  }

  .footer {
    .el-link__inner {
      color #ffffff
    }
  }

}

.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;
}
.logo-box{
  width: 60px
  height: 60px
  background: #fff
  border-radius: 50%
  img{
    width: 100%;
    object-fit: cover;
    height: 100%;
  }
}