mfx/love-key-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一页初版

Browse Source
This commit is contained in:
没复习
2026-02-26 20:41:42 +08:00
parent 47615475a5
commit 4ee8f035c7
1 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/PageHome.vue
View File

@@ -1,5 +1,8 @@
<template> <template>
<section class="page page-home"> <section class="page page-home">
<!-- 背景图层 -->
<img src="/src/assets/images/bg-top.png" class="bg-main" />
<img src="/src/assets/images/bg-top-points.png" class="bg-points" />
<nav class="nav"> <nav class="nav">
<div class="nav-logo"> <div class="nav-logo">
<image src="/src/assets/images/logo-top.png" class="logo-img"></image> <image src="/src/assets/images/logo-top.png" class="logo-img"></image>
@@ -12,6 +15,7 @@
</nav> </nav>
<div class="bg-points"></div> <div class="bg-points"></div>
<div class="hero"> <div class="hero">
<div class="hero-phones">
<div class="hero-content"> <div class="hero-content">
<h1 class="hero-title"> <h1 class="hero-title">
Not just a tool but<br /> Not just a tool but<br />
@@ -26,13 +30,12 @@
</a> </a>
</div> </div>
</div> </div>
<div class="hero-phones">
<img src="/src/assets/images/bg-top-phone.png" class="phone-main" /> <img src="/src/assets/images/bg-top-phone.png" class="phone-main" />
</div> </div>
<div class="deco deco-coin1">🪙</div> <!-- <div class="deco deco-coin1">🪙</div>
<div class="deco deco-coin2">🏆</div> <div class="deco deco-coin2">🏆</div>
<div class="deco deco-star1">✨</div> <div class="deco deco-star1">✨</div>
<div class="deco deco-star2">⭐</div> <div class="deco deco-star2">⭐</div> -->
</div> </div>
</section> </section>
</template> </template>
@@ -45,7 +48,7 @@
.page-home { .page-home {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: url('/src/assets/images/bg-top.png') center center / cover no-repeat; background: none;
color: #222; color: #222;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -53,15 +56,25 @@
overflow: hidden; overflow: hidden;
} }
.bg-main {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.bg-points { .bg-points {
position: absolute; position: absolute;
top: 50%; bottom: 0;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translateX(-50%);
width: 90%; width: 90%;
height: 90%; height: 90%;
background: url('/src/assets/images/bg-top-points.png') center center / contain no-repeat; object-fit: contain;
z-index: 0; z-index: 1;
pointer-events: none; pointer-events: none;
} }
@@ -171,8 +184,14 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: flex-end; align-items: center;
justify-content: flex-end;
}
.hero-content {
text-align: center;
margin-bottom: clamp(16px, 2vh, 36px);
} }
.phone-main { .phone-main {