Skip to content

Commit 0aa1063

Browse files
mctheswmcthesw
committed
feat(frontend): 首页
1 parent 0b13447 commit 0aa1063

File tree

3 files changed

+187
-62
lines changed

3 files changed

+187
-62
lines changed

‎locales/en_US.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"change_locale": "Change language",
6060
"go_game_manage_hint": "Please click on Save Management on the left",
6161
"go_backup_hint": "Please click on the game name under the Save Management section, and manage your saves in the new page",
62-
"wrong_homepage": "The page does not exist, please reset the homepage"
62+
"wrong_homepage": "The page does not exist, please reset the homepage",
63+
"name": "Game save manager"
6364
},
6465
"manage": {
6566
"create_new_save": "Create new backup",

‎locales/zh_SIMPLIFIED.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
}
4646
},
4747
"home": {
48+
"name": "游戏存档管理器",
4849
"hello_world": "你好 世界",
4950
"simple": "简洁",
5051
"simple_explained": "不添加推广、贴片广告等无用功能，尽量保证界面为功能服务",

‎src/pages/index.vue

Lines changed: 184 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,65 @@
11
<template>
22
<ElContainer class="home-container" direction="vertical">
3-
<h2>{{ $t('home.hello_world') }}</h2>
4-
<div class="describe-container">
5-
<div class="describe">
6-
<h3>{{ $t('home.simple') }}</h3>
7-
<p>{{ $t('home.simple_explained') }}</p>
3+
<div class="hero-section">
4+
<h2 class="welcome-title">{{ $t('home.hello_world') }}</h2>
5+
<div class="intro-box">
6+
<div class="intro-content">
7+
<h3 class="intro-title">{{ $t("home.name") }}</h3>
8+
<p class="intro-text">{{ $t('home.simple_explained') }}</p>
9+
<div class="feature-pills">
10+
<div class="feature-pill">
11+
<el-icon>
12+
<Check />
13+
</el-icon>
14+
<span>{{ $t('home.simple') }}</span>
15+
</div>
16+
<div class="feature-pill">
17+
<el-icon>
18+
<Lock />
19+
</el-icon>
20+
<span>{{ $t('home.safe') }}</span>
21+
</div>
22+
<div class="feature-pill">
23+
<el-icon>
24+
<Star />
25+
</el-icon>
26+
<span>{{ $t('home.free') }}</span>
27+
</div>
28+
</div>
29+
</div>
830
</div>
9-
<div class="describe">
10-
<h3>{{ $t('home.safe') }}</h3>
11-
<p>
12-
{{ $t('home.safe_explained') }} </p>
31+
</div>
32+
33+
<div class="features-grid">
34+
<div class="feature-card" @click="go_add_game()">
35+
<el-icon class="feature-icon">
36+
<Edit />
37+
</el-icon>
38+
<h3>{{ $t('home.import_game') }}</h3>
39+
<el-button type="primary" text>{{ $t('home.jump_to_page') }}</el-button>
1340
</div>
14-
<div class="describe">
15-
<h3>{{ $t('home.free') }}</h3>
16-
<p>
17-
{{ $t('home.free_explained') }} </p>
41+
42+
<div class="feature-card" @click="go_settings()">
43+
<el-icon class="feature-icon">
44+
<Setting />
45+
</el-icon>
46+
<h3>{{ $t('home.change_locale') }}</h3>
47+
<el-button type="primary" text>{{ $t('home.jump_to_page') }}</el-button>
48+
</div>
49+
50+
<div class="feature-card" @click="go_backup()">
51+
<el-icon class="feature-icon">
52+
<Upload />
53+
</el-icon>
54+
<h3>{{ $t('home.start_backup') }}</h3>
55+
<el-button type="primary" text>{{ $t('home.hint') }}</el-button>
1856
</div>
1957
</div>
20-
<ElContainer class="new" direction="horizontal">
21-
<el-result :title="$t('home.import_game')">
22-
<template #icon>
23-
<Edit />
24-
</template>
25-
<template #extra>
26-
<el-button type="primary" @click="go_add_game()">{{ $t('home.jump_to_page') }}</el-button>
27-
</template>
28-
</el-result>
29-
<el-result :title="$t('home.change_locale')">
30-
<template #icon>
31-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
32-
<path
33-
d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1 -11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z" />
34-
</svg>
35-
</template>
36-
<template #extra>
37-
<el-button type="primary" @click="go_settings()">{{ $t('home.jump_to_page') }}</el-button>
38-
</template>
39-
</el-result>
40-
<el-result :title="$t('home.start_backup')">
41-
<template #icon>
42-
<UploadFilled />
43-
</template>
44-
<template #extra>
45-
<el-button type="primary" @click="go_backup()">{{ $t('home.hint') }}</el-button>
46-
</template>
47-
</el-result>
48-
</ElContainer>
4958
</ElContainer>
5059
</template>
5160

5261
<script lang="ts" setup>
53-
import { Edit, UploadFilled } from "@element-plus/icons-vue";
62+
import { Edit, Setting, Upload, VideoPlay, Check, Lock, Star } from "@element-plus/icons-vue";
5463
import { $t } from "../i18n";
5564
const { showInfo } = useNotification();
5665
@@ -67,34 +76,148 @@ function go_backup() {
6776
}
6877
</script>
6978

70-
<style>
71-
.home-container {
72-
height: 95%;
79+
<style scoped>
80+
.hero-section {
81+
padding: 2rem 0;
82+
text-align: center;
83+
background: linear-gradient(135deg, var(--el-bg-color), var(--el-bg-color-overlay));
84+
border-radius: 20px;
85+
margin: 0 2rem;
86+
}
87+
88+
.welcome-title {
89+
font-size: 2.8em;
90+
margin-bottom: 1.5rem;
91+
background: linear-gradient(45deg, var(--el-color-primary), var(--el-color-success));
92+
background-clip: text;
93+
-webkit-background-clip: text;
94+
color: transparent;
95+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96+
}
97+
98+
.intro-box {
99+
max-width: 800px;
100+
margin: 0 auto;
101+
padding: 2rem;
102+
}
103+
104+
.logo-container {
105+
margin-bottom: 1.5rem;
106+
}
107+
108+
.intro-icon {
109+
font-size: 3rem;
110+
color: var(--el-color-primary);
111+
padding: 1rem;
112+
border-radius: 50%;
113+
background: var(--el-bg-color);
114+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
115+
}
116+
117+
.intro-title {
118+
font-size: 1.8rem;
119+
margin-bottom: 1rem;
120+
color: var(--el-text-color-primary);
121+
}
122+
123+
.intro-text {
124+
font-size: 1.1rem;
125+
line-height: 1.6;
126+
color: var(--el-text-color-regular);
127+
margin-bottom: 2rem;
73128
}
74129
75-
.home-container>h2 {
76-
margin-right: auto;
77-
margin-left: auto;
78-
margin-bottom: 2em;
79-
display: block;
80-
font-size: 2em;
130+
.feature-pills {
131+
display: flex;
132+
justify-content: center;
133+
gap: 1rem;
134+
flex-wrap: wrap;
81135
}
82136
83-
.describe-container {
137+
.feature-pill {
84138
display: flex;
85-
justify-content: space-around;
139+
align-items: center;
140+
gap: 0.5rem;
141+
padding: 0.5rem 1rem;
142+
background: var(--el-bg-color);
143+
border-radius: 20px;
144+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
145+
color: var(--el-text-color-primary);
146+
}
147+
148+
.feature-pill .el-icon {
149+
color: var(--el-color-primary);
150+
}
151+
152+
.features-grid {
153+
display: grid;
154+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
155+
gap: 2rem;
156+
padding: 3rem 2rem;
157+
}
158+
159+
.feature-card {
160+
background: var(--el-bg-color);
161+
border-radius: 16px;
162+
padding: 2rem;
163+
text-align: center;
164+
transition: all 0.3s ease;
165+
cursor: pointer;
166+
position: relative;
167+
overflow: hidden;
168+
}
169+
170+
.feature-card::before {
171+
content: '';
172+
position: absolute;
173+
top: 0;
174+
left: 0;
175+
right: 0;
176+
height: 4px;
177+
background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-success));
178+
opacity: 0;
179+
transition: opacity 0.3s ease;
180+
}
181+
182+
.feature-card:hover {
183+
transform: translateY(-5px);
184+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
185+
}
186+
187+
.feature-card:hover::before {
188+
opacity: 1;
86189
}
87190
88-
.describe {
89-
width: 25%;
191+
.feature-icon {
192+
font-size: 2.5rem;
193+
color: var(--el-color-primary);
194+
margin-bottom: 1rem;
90195
}
91196
92-
.new {
93-
margin-top: 100px;
94-
justify-content: space-around;
197+
.feature-card h3 {
198+
font-size: 1.4rem;
199+
margin-bottom: 0.8rem;
200+
color: var(--el-text-color-primary);
95201
}
96202
97-
svg {
98-
fill: var(--el-text-color-primary);
203+
.feature-card p {
204+
color: var(--el-text-color-secondary);
205+
margin-bottom: 1.5rem;
206+
}
207+
208+
@media (max-width: 768px) {
209+
.hero-section {
210+
margin: 0 1rem;
211+
padding: 1.5rem 0;
212+
}
213+
214+
.welcome-title {
215+
font-size: 2.2em;
216+
}
217+
218+
.features-grid {
219+
grid-template-columns: 1fr;
220+
padding: 2rem 1rem;
221+
}
99222
}
100223
</style>

0 commit comments

Comments
 (0)