666ghj commited on
Commit
86e2b37
·
1 Parent(s): c5eaa66

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.

Files changed (1) hide show
  1. 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="#">文档</a>
8
- <a href="#">运行时</a>
9
- <a href="#">价格</a>
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">#1 预测引擎</span>
20
- <span class="version-text">/ V3.0-预览版</span>
21
  </div>
22
 
23
  <h1 class="main-title">
24
- 预测性智能<br>
25
- 基础设施
26
  </h1>
27
 
28
- <p class="hero-desc">
29
- 在任意文档结构上部署预测模型。MiroFish 提供即时分析、风险模拟和未来场景生成,为高风险决策提供支持。
30
- </p>
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
- .nav-links a {
344
- color: #888;
345
  text-decoration: none;
346
- font-family: var(--font-mono); /* 导航链接也使用代码字体,增加科技感 */
347
- font-size: 0.85rem;
348
  font-weight: 500;
 
 
 
 
349
  }
350
 
351
- .nav-links a:hover {
352
- color: var(--white);
353
  }
354
 
355
- .login-btn {
356
- background: var(--white);
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 8px;
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.1;
405
- font-weight: 700;
406
- margin: 0 0 30px 0;
407
- letter-spacing: -1.5px;
 
 
 
 
 
 
 
 
408
  }
409
 
410
  .hero-desc {
411
- font-size: 1.1rem;
412
- line-height: 1.6;
413
  color: var(--gray-text);
414
- max-width: 600px;
415
- margin-bottom: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 {