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-03-09 14:27:40 +08:00
parent e05c3ece86
commit c613c2bee4
5 changed files with 281 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>LoveKeyOW</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <title>LoveKey</title>
<body> </head>
<div id="app"></div>
<script type="module" src="/src/main.js"></script> <body>
</body> <div id="app"></div>
</html> <script type="module" src="/src/main.js"></script>
</body>
</html>

63
src/components/PageAdvantage.vue
View File

@@ -15,8 +15,8 @@
Every moment you open it, you embark on a poetic encounter with the unknown, and meet the unexpected beauty. Every moment you open it, you embark on a poetic encounter with the unknown, and meet the unexpected beauty.
</p> </p>
<div class="hero-buttons"> <div class="hero-buttons">
<a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> -->
<a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="btn-img" /></a> <span class="coming-soon-btn">Coming Soon</span>
</div> </div>
</div> </div>
</div> </div>
@@ -31,7 +31,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-advantage { .page-advantage {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@@ -54,7 +53,9 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
padding: 0 @gap-content; padding: 0 @gap-content;
} }
.text-side { flex: 1; } .text-side {
flex: 1;
}
.section-title { .section-title {
font-size: @font-title; font-size: @font-title;
@@ -64,21 +65,23 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
color: #1a1a1a; color: #1a1a1a;
margin-left: -25%; margin-left: -25%;
} }
.section-card{
.section-card {
position: relative; position: relative;
width: clamp(400px, 32vw, 1600px);; width: clamp(400px, 32vw, 1600px);
;
height: clamp(200px, 16vw, 800px); height: clamp(200px, 16vw, 800px);
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 39px 113px 0px rgba(2,190,172,0.2); box-shadow: 0px 39px 113px 0px rgba(2, 190, 172, 0.2);
border-radius: 2px 100px 2px 2px; border-radius: 2px 100px 2px 2px;
padding: 10% ; padding: 10%;
margin-left: -38%; margin-left: -38%;
font-size: @font-desc; font-size: @font-desc;
line-height: 1.8; line-height: 1.8;
color: #888; color: #888;
.douhao-img{ .douhao-img {
position: absolute; position: absolute;
height: 20%; height: 20%;
left: 40%; left: 40%;
@@ -92,15 +95,33 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
gap: clamp(10px, 3vw, 35px); gap: clamp(10px, 3vw, 35px);
margin-top: 20px; margin-top: 20px;
} }
.btn-img { .btn-img {
height: clamp(36px, 6.6vh, 120px); height: clamp(36px, 6.6vh, 120px);
width: auto; width: auto;
display: block; display: block;
transition: transform 0.3s; transition: transform 0.3s;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
} }
.coming-soon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(36px, 6.6vh, 120px);
padding: 0 clamp(24px, 3vw, 60px);
background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
color: #fff;
font-size: clamp(14px, 1.1vw, 24px);
font-weight: 600;
border-radius: clamp(8px, 1vw, 16px);
cursor: default;
white-space: nowrap;
}
.image-side { .image-side {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -134,12 +155,28 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
animation: float 3.5s ease-in-out infinite; animation: float 3.5s ease-in-out infinite;
} }
.deco-1 { top: 15%; left: 8%; animation-delay: 0.3s; } .deco-1 {
.deco-2 { bottom: 12%; right: 10%; animation-delay: 1.2s; } top: 15%;
left: 8%;
animation-delay: 0.3s;
}
.deco-2 {
bottom: 12%;
right: 10%;
animation-delay: 1.2s;
}
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); } 0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
} }
@media (min-width: 1921px) { @media (min-width: 1921px) {

53
src/components/PageContact.vue
View File

@@ -10,8 +10,8 @@
Personalize your chat keyboard and get tailored, high-EQ responses for every conversation Personalize your chat keyboard and get tailored, high-EQ responses for every conversation
</p> </p>
<div class="download-btns anim-item"> <div class="download-btns anim-item">
<a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="store-btn-img" /></a> <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="store-btn-img" /></a> -->
<a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="store-btn-img" /></a> <span class="coming-soon-btn">Coming Soon</span>
</div> </div>
</div> </div>
<div class="image-side"> <div class="image-side">
@@ -32,7 +32,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-contact { .page-contact {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@@ -56,7 +55,10 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
padding: 0 @gap-content; padding: 0 @gap-content;
} }
.text-side { flex: 5; max-width: clamp(320px, 60vw, 1000px); } .text-side {
flex: 5;
max-width: clamp(320px, 60vw, 1000px);
}
.section-title { .section-title {
font-size: clamp(34px, 3.2vw, 72px); font-size: clamp(34px, 3.2vw, 72px);
@@ -91,6 +93,21 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
} }
} }
.coming-soon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(36px, 6.2vh, 110px);
padding: 0 clamp(24px, 3vw, 60px);
background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
color: #fff;
font-size: clamp(14px, 1.1vw, 24px);
font-weight: 600;
border-radius: clamp(8px, 1vw, 16px);
cursor: default;
white-space: nowrap;
}
.image-side { .image-side {
flex: 4; flex: 4;
display: flex; display: flex;
@@ -159,6 +176,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
p { p {
font-size: @font-small; font-size: @font-small;
color: #ccc; color: #ccc;
@@ -217,26 +235,45 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
gap: 32px; gap: 32px;
padding: 0 24px; padding: 0 24px;
} }
.section-title { text-align: center; }
.section-desc { text-align: center; } .section-title {
text-align: center;
}
.section-desc {
text-align: center;
}
.text-side { .text-side {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.download-btns { .download-btns {
justify-content: center; justify-content: center;
} }
.store-btn-img { .store-btn-img {
height: clamp(34px, 6vh, 56px); height: clamp(34px, 6vh, 56px);
} }
.phone-img { .phone-img {
height: clamp(220px, 38vh, 420px); height: clamp(220px, 38vh, 420px);
width: auto; width: auto;
display: block; display: block;
} }
.bottom-character { right: 16px; bottom: 40px; }
.character-placeholder { width: 70px; height: 82px; } .bottom-character {
right: 16px;
bottom: 40px;
}
.character-placeholder {
width: 70px;
height: 82px;
}
.four-left, .four-left,
.four-right { .four-right {
width: clamp(70px, 20vw, 140px); width: clamp(70px, 20vw, 140px);

105
src/components/PageHome.vue
View File

@@ -11,8 +11,8 @@
giving meaning to every click giving meaning to every click
</h1> </h1>
<div class="hero-buttons anim-item"> <div class="hero-buttons anim-item">
<a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android.png" class="btn-img" /></a> -->
<a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore.png" class="btn-img" /></a> <span class="coming-soon-btn">Coming Soon</span>
</div> </div>
</div> </div>
<img src="/src/assets/images/bg-top-phone.png" class="phone-main anim-item" /> <img src="/src/assets/images/bg-top-phone.png" class="phone-main anim-item" />
@@ -42,7 +42,6 @@ onMounted(() => {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-home { .page-home {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@@ -92,6 +91,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
gap: clamp(6px, 0.5vw, 12px); gap: clamp(6px, 0.5vw, 12px);
.logo-img { .logo-img {
height: clamp(28px, 2.5vh, 52px); height: clamp(28px, 2.5vh, 52px);
} }
@@ -107,13 +107,16 @@ onMounted(() => {
.nav-links { .nav-links {
display: flex; display: flex;
gap: clamp(16px, 2vw, 48px); gap: clamp(16px, 2vw, 48px);
a { a {
font-size: @font-nav; font-size: @font-nav;
color: #000000; color: #000000;
transition: color 0.3s; transition: color 0.3s;
font-weight: 600; font-weight: 600;
&:hover { color: #00BFA5; }
&:hover {
color: #00BFA5;
}
} }
} }
@@ -167,12 +170,28 @@ onMounted(() => {
width: auto; width: auto;
display: block; display: block;
transition: transform 0.3s, filter 0.3s; transition: transform 0.3s, filter 0.3s;
&:hover { &:hover {
transform: translateY(-3px) scale(1.04); transform: translateY(-3px) scale(1.04);
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
} }
} }
.coming-soon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(36px, 6.6vh, 120px);
padding: 0 clamp(24px, 3vw, 60px);
background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
color: #fff;
font-size: clamp(14px, 1.1vw, 24px);
font-weight: 600;
border-radius: clamp(8px, 1vw, 16px);
cursor: default;
white-space: nowrap;
}
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -188,6 +207,7 @@ onMounted(() => {
.btn-primary { .btn-primary {
background: #00BFA5; background: #00BFA5;
color: #fff; color: #fff;
&:hover { &:hover {
background: #00A98E; background: #00A98E;
transform: translateY(-2px); transform: translateY(-2px);
@@ -195,7 +215,9 @@ onMounted(() => {
} }
} }
.btn-icon { font-size: 0.85em; } .btn-icon {
font-size: 0.85em;
}
.hero-phones { .hero-phones {
position: absolute; position: absolute;
@@ -229,6 +251,7 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateX(-120vw); transform: translateX(-120vw);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
@@ -240,6 +263,7 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateX(120vw); transform: translateX(120vw);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
@@ -251,6 +275,7 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateY(120vh); transform: translateY(120vh);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -295,25 +320,69 @@ onMounted(() => {
animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite;
} }
.deco-coin1 { top: 30%; left: 8%; animation-delay: 0s; } .deco-coin1 {
.deco-coin2 { top: 25%; right: 8%; animation-delay: 0.5s; } top: 30%;
.deco-star1 { top: 50%; left: 15%; font-size: clamp(16px, 1.6vw, 38px); animation-delay: 1s; } left: 8%;
.deco-star2 { top: 45%; right: 15%; font-size: clamp(14px, 1.3vw, 32px); animation-delay: 1.5s; } animation-delay: 0s;
}
.deco-coin2 {
top: 25%;
right: 8%;
animation-delay: 0.5s;
}
.deco-star1 {
top: 50%;
left: 15%;
font-size: clamp(16px, 1.6vw, 38px);
animation-delay: 1s;
}
.deco-star2 {
top: 45%;
right: 15%;
font-size: clamp(14px, 1.3vw, 32px);
animation-delay: 1.5s;
}
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); } 0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-phones { gap: 8px; } .hero-phones {
.phone-center { width: 140px; height: 260px; } gap: 8px;
.phone-left, .phone-right { width: 110px; height: 210px; } }
.deco { display: none; }
.phone-center {
width: 140px;
height: 260px;
}
.phone-left,
.phone-right {
width: 110px;
height: 210px;
}
.deco {
display: none;
}
.phone-main { .phone-main {
height: clamp(330px, 58vh, 780px); height: clamp(330px, 58vh, 780px);
width: auto; width: auto;
} }
.hero-content { .hero-content {
text-align: center; text-align: center;
margin-bottom: clamp(16px, 6vh, 60px); margin-bottom: clamp(16px, 6vh, 60px);

114
src/components/PageProduct.vue
View File

@@ -13,22 +13,22 @@
</div> </div>
<div class="desc-wrap"> <div class="desc-wrap">
<p class="section-desc anim-item"> <p class="section-desc anim-item">
Spice up your keyboard with one-of-a-kind skins and customize its look to the fullest—your chat style is one-of-a-kind, and your keyboard should be too. Spice up your keyboard with one-of-a-kind skins and customize its look to the fullest—your chat style is
one-of-a-kind, and your keyboard should be too.
</p> </p>
</div> </div>
<div class="btns-wrap"> <div class="btns-wrap">
<div class="download-btns anim-item"> <div class="download-btns anim-item">
<a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android-two.png" class="btn-img" /></a> <!-- <a :href="ANDROID_DOWNLOAD_URL"><img src="/src/assets/images/android-two.png" class="btn-img" /></a> -->
<a :href="APPLE_DOWNLOAD_URL"><img src="/src/assets/images/appStore-two.png" class="btn-img" /></a> <span class="coming-soon-btn">Coming Soon</span>
</div> </div>
<img src="/src/assets/images/two-3.png" class="deco-3" /> <img src="/src/assets/images/two-3.png" class="deco-3" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<img src="/src/assets/images/two-phone.png" class="two-phone anim-item " /> <img src="/src/assets/images/two-phone.png" class="two-phone anim-item " />
</section> </section>
@@ -39,7 +39,6 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page-product { .page-product {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@@ -50,6 +49,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
padding: 10vh 6vw 12vh 6vw; padding: 10vh 6vw 12vh 6vw;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 12vh 4vw 8vh 4vw; padding: 12vh 4vw 8vh 4vw;
} }
@@ -76,7 +76,10 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
padding: 0 clamp(30px, 3vw, 100px); padding: 0 clamp(30px, 3vw, 100px);
} }
.text-side { flex: 1; max-width: clamp(300px, 38vw, 680px); } .text-side {
flex: 1;
max-width: clamp(300px, 38vw, 680px);
}
.title-wrap { .title-wrap {
position: relative; position: relative;
@@ -102,7 +105,7 @@ import { APPLE_DOWNLOAD_URL, ANDROID_DOWNLOAD_URL } from '@/constants/downloadLi
.deco-2 { .deco-2 {
position: absolute; position: absolute;
bottom: -200%; bottom: -200%;
right: -10%; right: -10%;
width: clamp(50px, 14vw, 400px); width: clamp(50px, 14vw, 400px);
pointer-events: none; pointer-events: none;
@@ -141,7 +144,26 @@ bottom: -200%;
width: auto; width: auto;
display: block; display: block;
transition: transform 0.3s; transition: transform 0.3s;
&:hover { transform: translateY(-2px); }
&:hover {
transform: translateY(-2px);
}
}
.coming-soon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(36px, 6.6vh, 120px);
padding: 0 clamp(24px, 3vw, 60px);
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: clamp(14px, 1.1vw, 24px);
font-weight: 600;
border-radius: clamp(8px, 1vw, 16px);
cursor: default;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.25);
} }
.image-side { .image-side {
@@ -219,6 +241,7 @@ bottom: -200%;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.text-side { .text-side {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@@ -226,14 +249,46 @@ bottom: -200%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.title-wrap { display: block; width: 100%; text-align: center; }
.btns-wrap { display: block; width: 100%; text-align: center; } .title-wrap {
.section-title { text-align: center; font-size: clamp(24px, 6vw, 40px); } display: block;
.section-desc { text-align: center; margin-bottom: clamp(12px, 3vh, 32px); } width: 100%;
.download-btns { justify-content: center; } text-align: center;
.deco-1 { width: clamp(28px, 8vw, 60px); right: -5%; } }
.deco-2 { display: none; }
.deco-3 { display: none; } .btns-wrap {
display: block;
width: 100%;
text-align: center;
}
.section-title {
text-align: center;
font-size: clamp(24px, 6vw, 40px);
}
.section-desc {
text-align: center;
margin-bottom: clamp(12px, 3vh, 32px);
}
.download-btns {
justify-content: center;
}
.deco-1 {
width: clamp(28px, 8vw, 60px);
right: -5%;
}
.deco-2 {
display: none;
}
.deco-3 {
display: none;
}
.two-phone { .two-phone {
display: block; display: block;
height: clamp(160px, 38vh, 320px); height: clamp(160px, 38vh, 320px);
@@ -241,17 +296,18 @@ bottom: -200%;
bottom: 5%; bottom: 5%;
z-index: 1; z-index: 1;
} }
.card { .card {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #02BEAC; background: #02BEAC;
border-radius: clamp(16px, 2vw, 40px); border-radius: clamp(16px, 2vw, 40px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
} }
</style> </style>