Spaces:
Sleeping
Sleeping
Revamp homepage content and styling
Browse files- Updated the navigation bar to include a link to the project's GitHub page, enhancing accessibility.
- Redesigned the hero section with a new title and description, emphasizing the capabilities of MiroFish.
- Improved text styling and layout for better readability and visual appeal, including adjustments to font sizes and weights.
- Added new CSS classes for enhanced styling of elements, including highlights and animations, to create a more engaging user experience.
- frontend/src/views/Home.vue +97 -33
frontend/src/views/Home.vue
CHANGED
|
@@ -4,10 +4,9 @@
|
|
| 4 |
<nav class="navbar">
|
| 5 |
<div class="nav-brand">MIROFISH</div>
|
| 6 |
<div class="nav-links">
|
| 7 |
-
<a href="
|
| 8 |
-
|
| 9 |
-
<
|
| 10 |
-
<a href="#" class="login-btn">登录</a>
|
| 11 |
</div>
|
| 12 |
</nav>
|
| 13 |
|
|
@@ -16,19 +15,24 @@
|
|
| 16 |
<section class="hero-section">
|
| 17 |
<div class="hero-left">
|
| 18 |
<div class="tag-row">
|
| 19 |
-
<span class="orange-tag">
|
| 20 |
-
<span class="version-text">/
|
| 21 |
</div>
|
| 22 |
|
| 23 |
<h1 class="main-title">
|
| 24 |
-
|
| 25 |
-
|
| 26 |
</h1>
|
| 27 |
|
| 28 |
-
<
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 32 |
<div class="decoration-square"></div>
|
| 33 |
</div>
|
| 34 |
|
|
@@ -336,27 +340,27 @@ const startSimulation = async () => {
|
|
| 336 |
|
| 337 |
.nav-links {
|
| 338 |
display: flex;
|
| 339 |
-
gap: 30px;
|
| 340 |
align-items: center;
|
| 341 |
}
|
| 342 |
|
| 343 |
-
.
|
| 344 |
-
color:
|
| 345 |
text-decoration: none;
|
| 346 |
-
font-family: var(--font-mono);
|
| 347 |
-
font-size: 0.
|
| 348 |
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 349 |
}
|
| 350 |
|
| 351 |
-
.
|
| 352 |
-
|
| 353 |
}
|
| 354 |
|
| 355 |
-
.
|
| 356 |
-
|
| 357 |
-
color: var(--black) !important;
|
| 358 |
-
padding: 6px 16px;
|
| 359 |
-
font-weight: 700 !important;
|
| 360 |
}
|
| 361 |
|
| 362 |
/* 主要内容区 */
|
|
@@ -391,28 +395,88 @@ const startSimulation = async () => {
|
|
| 391 |
.orange-tag {
|
| 392 |
background: var(--orange);
|
| 393 |
color: var(--white);
|
| 394 |
-
padding: 4px
|
| 395 |
font-weight: 700;
|
|
|
|
|
|
|
| 396 |
}
|
| 397 |
|
| 398 |
.version-text {
|
| 399 |
color: #999;
|
|
|
|
|
|
|
| 400 |
}
|
| 401 |
|
| 402 |
.main-title {
|
| 403 |
font-size: 4.5rem;
|
| 404 |
-
line-height: 1.
|
| 405 |
-
font-weight:
|
| 406 |
-
margin: 0 0
|
| 407 |
-
letter-spacing: -
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 408 |
}
|
| 409 |
|
| 410 |
.hero-desc {
|
| 411 |
-
font-size: 1.
|
| 412 |
-
line-height: 1.
|
| 413 |
color: var(--gray-text);
|
| 414 |
-
max-width:
|
| 415 |
-
margin-bottom:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 416 |
}
|
| 417 |
|
| 418 |
.decoration-square {
|
|
|
|
| 4 |
<nav class="navbar">
|
| 5 |
<div class="nav-brand">MIROFISH</div>
|
| 6 |
<div class="nav-links">
|
| 7 |
+
<a href="https://github.com/your-repo/MiroFish" target="_blank" class="github-link">
|
| 8 |
+
访问我们的Github主页 <span class="arrow">↗</span>
|
| 9 |
+
</a>
|
|
|
|
| 10 |
</div>
|
| 11 |
</nav>
|
| 12 |
|
|
|
|
| 15 |
<section class="hero-section">
|
| 16 |
<div class="hero-left">
|
| 17 |
<div class="tag-row">
|
| 18 |
+
<span class="orange-tag">简洁通用的群体智能引擎</span>
|
| 19 |
+
<span class="version-text">/ V1.0-预览版</span>
|
| 20 |
</div>
|
| 21 |
|
| 22 |
<h1 class="main-title">
|
| 23 |
+
上传任意报告<br>
|
| 24 |
+
<span class="gradient-text">即刻推演未来</span>
|
| 25 |
</h1>
|
| 26 |
|
| 27 |
+
<div class="hero-desc">
|
| 28 |
+
<p>
|
| 29 |
+
即使只有一段文字,<span class="highlight-bold">MiroFish</span> 也能基于其中的现实种子,全自动生成与之对应的至多<span class="highlight-orange">百万级Agent</span>构成的平行世界。通过上帝视角注入变量,在复杂的群体交互中寻找动态环境下的<span class="highlight-code">“局部最优解”</span>。
|
| 30 |
+
</p>
|
| 31 |
+
<p class="slogan-text">
|
| 32 |
+
让未来在 Agent 群中预演,让决策在百战后胜出<span class="blinking-cursor">_</span>
|
| 33 |
+
</p>
|
| 34 |
+
</div>
|
| 35 |
+
|
| 36 |
<div class="decoration-square"></div>
|
| 37 |
</div>
|
| 38 |
|
|
|
|
| 340 |
|
| 341 |
.nav-links {
|
| 342 |
display: flex;
|
|
|
|
| 343 |
align-items: center;
|
| 344 |
}
|
| 345 |
|
| 346 |
+
.github-link {
|
| 347 |
+
color: var(--white);
|
| 348 |
text-decoration: none;
|
| 349 |
+
font-family: var(--font-mono);
|
| 350 |
+
font-size: 0.9rem;
|
| 351 |
font-weight: 500;
|
| 352 |
+
display: flex;
|
| 353 |
+
align-items: center;
|
| 354 |
+
gap: 8px;
|
| 355 |
+
transition: opacity 0.2s;
|
| 356 |
}
|
| 357 |
|
| 358 |
+
.github-link:hover {
|
| 359 |
+
opacity: 0.8;
|
| 360 |
}
|
| 361 |
|
| 362 |
+
.arrow {
|
| 363 |
+
font-family: sans-serif;
|
|
|
|
|
|
|
|
|
|
| 364 |
}
|
| 365 |
|
| 366 |
/* 主要内容区 */
|
|
|
|
| 395 |
.orange-tag {
|
| 396 |
background: var(--orange);
|
| 397 |
color: var(--white);
|
| 398 |
+
padding: 4px 10px;
|
| 399 |
font-weight: 700;
|
| 400 |
+
letter-spacing: 1px;
|
| 401 |
+
font-size: 0.75rem;
|
| 402 |
}
|
| 403 |
|
| 404 |
.version-text {
|
| 405 |
color: #999;
|
| 406 |
+
font-weight: 500;
|
| 407 |
+
letter-spacing: 0.5px;
|
| 408 |
}
|
| 409 |
|
| 410 |
.main-title {
|
| 411 |
font-size: 4.5rem;
|
| 412 |
+
line-height: 1.2;
|
| 413 |
+
font-weight: 800;
|
| 414 |
+
margin: 0 0 40px 0;
|
| 415 |
+
letter-spacing: -2px;
|
| 416 |
+
color: var(--black);
|
| 417 |
+
}
|
| 418 |
+
|
| 419 |
+
.gradient-text {
|
| 420 |
+
background: linear-gradient(90deg, #000000 0%, #444444 100%);
|
| 421 |
+
-webkit-background-clip: text;
|
| 422 |
+
-webkit-text-fill-color: transparent;
|
| 423 |
+
display: inline-block;
|
| 424 |
}
|
| 425 |
|
| 426 |
.hero-desc {
|
| 427 |
+
font-size: 1.05rem;
|
| 428 |
+
line-height: 1.8;
|
| 429 |
color: var(--gray-text);
|
| 430 |
+
max-width: 640px;
|
| 431 |
+
margin-bottom: 50px;
|
| 432 |
+
font-weight: 400;
|
| 433 |
+
text-align: justify;
|
| 434 |
+
}
|
| 435 |
+
|
| 436 |
+
.hero-desc p {
|
| 437 |
+
margin-bottom: 1.5rem;
|
| 438 |
+
}
|
| 439 |
+
|
| 440 |
+
.highlight-bold {
|
| 441 |
+
color: var(--black);
|
| 442 |
+
font-weight: 700;
|
| 443 |
+
}
|
| 444 |
+
|
| 445 |
+
.highlight-orange {
|
| 446 |
+
color: var(--orange);
|
| 447 |
+
font-weight: 700;
|
| 448 |
+
font-family: var(--font-mono);
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
.highlight-code {
|
| 452 |
+
background: rgba(0, 0, 0, 0.05);
|
| 453 |
+
padding: 2px 6px;
|
| 454 |
+
border-radius: 2px;
|
| 455 |
+
font-family: var(--font-mono);
|
| 456 |
+
font-size: 0.9em;
|
| 457 |
+
color: var(--black);
|
| 458 |
+
font-weight: 600;
|
| 459 |
+
}
|
| 460 |
+
|
| 461 |
+
.slogan-text {
|
| 462 |
+
font-size: 1.2rem;
|
| 463 |
+
font-weight: 700;
|
| 464 |
+
color: var(--black);
|
| 465 |
+
letter-spacing: 1px;
|
| 466 |
+
border-left: 3px solid var(--orange);
|
| 467 |
+
padding-left: 15px;
|
| 468 |
+
margin-top: 20px;
|
| 469 |
+
}
|
| 470 |
+
|
| 471 |
+
.blinking-cursor {
|
| 472 |
+
color: var(--orange);
|
| 473 |
+
animation: blink 1s step-end infinite;
|
| 474 |
+
font-weight: 700;
|
| 475 |
+
}
|
| 476 |
+
|
| 477 |
+
@keyframes blink {
|
| 478 |
+
0%, 100% { opacity: 1; }
|
| 479 |
+
50% { opacity: 0; }
|
| 480 |
}
|
| 481 |
|
| 482 |
.decoration-square {
|