feat: website update

hellof2e · Aug 2, 2024 · 100b74d · 100b74d
1 parent 703602f
commit 100b74d
Show file tree

Hide file tree

Showing 3 changed files with 807 additions and 15 deletions.
diff --git a/src/index.less b/src/index.less
@@ -47,24 +47,40 @@ button {
 }
 .home-text {
  display: grid;
- grid-template-rows: 175px 1fr 88px;
+ grid-template-rows: 130px 1fr 88px;
 }
-.home-logo {
+
+.home-logo{
  width: 392px;
  height: 295px;
  position: relative;
  margin: 0 auto;
-
- img{
- position: absolute;
- top: 50%;
- left: 50%;
- width: 192px;
- transform: translate(-50%,-50%);
- // 光晕
- filter: drop-shadow(0 0 2em #0da6e9aa);
+ .image-bg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border-radius: 50%;
+ width: 220px;
+ height: 220px;
+ background-image: var(--vp-home-hero-image-background-image);
+ transform: translate(-50%, -50%);
+ -webkit-mask: url(https://m.hellobike.com/resource/helloyun/13459/tOd8H_logo.png?x-oss-process=image/quality,q_80) no-repeat center 100% / 100%;
+ mask: url(https://m.hellobike.com/resource/helloyun/13459/tOd8H_logo.png?x-oss-process=image/quality,q_80) no-repeat center 100% / 100%;
+ }
+ .logo-bg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 320px;
+ height: 320px;
+ transform: translate(-50%, -50%);
+ background-image: var(--vp-home-hero-image-background-image);
+ filter: var(--vp-home-hero-image-filter);
+ opacity: .45;
+ transition: opacity 1s ease;
  }
 }
+
 .home-title {
  line-height: 56px;
  font-size: 48px;
@@ -201,13 +217,11 @@ button {
  }
  .down-icon {
  margin-left: 20px;
- // height: 24px;
  margin-top: 10px;
  }
  p{
  line-height: 1.3;
  font-size: 1.6rem;
- // font-weight: 500;
  }
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -106,8 +106,11 @@ export default class QuarkDocHome extends QuarkElement {
  </div>
  <div>
  <div class="home-logo">
- <img src={quarkLogo} alt="" />
+ <div class="image-bg"></div>
+ {/* <img src={quarkLogo} alt="" /> */}
+ <div class="logo-bg"></div>
  </div>
+
  <h1 class="home-title">
  { this.#ecosystemLangs.homeTitle }
  </h1>