feat(web): public/logo.png 作为 favicon 与首页/宣传册导航栏图标
Made-with: Cursor
This commit is contained in:
@@ -4,6 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>宇恒一号 - 星际探索版</title>
|
<title>宇恒一号 - 星际探索版</title>
|
||||||
|
<link rel="icon" type="image/png" href="/logo.png" />
|
||||||
|
<link rel="apple-touch-icon" href="/logo.png" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700;900&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700;900&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
|
||||||
|
|||||||
13
web/public/README.md
Normal file
13
web/public/README.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# `public/` 静态资源目录
|
||||||
|
|
||||||
|
[Vite 约定](https://cn.vitejs.dev/guide/assets.html#the-public-directory):此目录下的文件会**原样**复制到构建后的站点根目录(`dist/`),访问路径为 **`/<文件名>`**。
|
||||||
|
|
||||||
|
## 当前文件
|
||||||
|
|
||||||
|
| 文件 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| `logo.png` | **标签页图标**(`index.html` 的 `rel="icon"` / `apple-touch-icon`)+ **首页与宣传册导航**(`Home.vue`、`BrochurePage.vue`) |
|
||||||
|
|
||||||
|
更新品牌时替换本目录下的 `logo.png` 后重新构建即可(可与 `promotion/logo.png` 保持同图或分别维护)。
|
||||||
|
|
||||||
|
**注意**:`public` 里的路径不要用 `src/assets` 那种写法;引用时始终用**根路径**,例如 `/logo.png`。
|
||||||
BIN
web/public/logo.png
Normal file
BIN
web/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 MiB |
@@ -2,7 +2,10 @@
|
|||||||
<div class="brochure-page">
|
<div class="brochure-page">
|
||||||
<div class="brochure-bg"></div>
|
<div class="brochure-bg"></div>
|
||||||
<header class="brochure-header">
|
<header class="brochure-header">
|
||||||
<router-link to="/" class="logo-link">YUHENG ONE</router-link>
|
<router-link to="/" class="logo-link">
|
||||||
|
<img class="logo-link-img" src="/logo.png" alt="" width="36" height="36" decoding="async" />
|
||||||
|
<span class="logo-link-text">YUHENG ONE</span>
|
||||||
|
</router-link>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<router-link :to="{ path: '/', hash: '#videos' }" class="header-link">首页 · 产品视频</router-link>
|
<router-link :to="{ path: '/', hash: '#videos' }" class="header-link">首页 · 产品视频</router-link>
|
||||||
<router-link :to="{ path: '/', hash: '#contact' }" class="header-link">首页 · 联系我们</router-link>
|
<router-link :to="{ path: '/', hash: '#contact' }" class="header-link">首页 · 联系我们</router-link>
|
||||||
@@ -275,13 +278,26 @@ watch(
|
|||||||
border-bottom: 1px solid rgba(0, 212, 255, 0.15);
|
border-bottom: 1px solid rgba(0, 212, 255, 0.15);
|
||||||
}
|
}
|
||||||
.logo-link {
|
.logo-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.logo-link-img {
|
||||||
|
height: 36px;
|
||||||
|
width: auto;
|
||||||
|
max-height: 36px;
|
||||||
|
object-fit: contain;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.logo-link-text {
|
||||||
font-family: 'Exo 2', sans-serif;
|
font-family: 'Exo 2', sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
background: linear-gradient(90deg, #00d4ff, #fff, #ff2d95);
|
background: linear-gradient(90deg, #00d4ff, #fff, #ff2d95);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
text-decoration: none;
|
background-clip: text;
|
||||||
}
|
}
|
||||||
.back-home {
|
.back-home {
|
||||||
color: rgba(255, 255, 255, 0.65);
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
|||||||
@@ -7,7 +7,10 @@
|
|||||||
<div class="planet planet-3"></div>
|
<div class="planet planet-3"></div>
|
||||||
|
|
||||||
<nav class="navbar" :style="navbarStyle">
|
<nav class="navbar" :style="navbarStyle">
|
||||||
<a href="#home" class="logo-space" @click.prevent="scrollToSel('#home')">{{ data.logo_text || 'YUHENG ONE' }}</a>
|
<a href="#home" class="logo-space" @click.prevent="scrollToSel('#home')">
|
||||||
|
<img class="logo-space-img" src="/logo.png" alt="" width="40" height="40" decoding="async" />
|
||||||
|
<span class="logo-space-text">{{ data.logo_text || 'YUHENG ONE' }}</span>
|
||||||
|
</a>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<template v-for="(link, i) in data.nav_links" :key="i">
|
<template v-for="(link, i) in data.nav_links" :key="i">
|
||||||
<router-link v-if="isInternalRoute(link.url)" :to="link.url" class="nav-link-item">{{ link.label }}</router-link>
|
<router-link v-if="isInternalRoute(link.url)" :to="link.url" class="nav-link-item">{{ link.label }}</router-link>
|
||||||
@@ -708,10 +711,18 @@ onUnmounted(() => {
|
|||||||
transition: background 0.25s, box-shadow 0.25s;
|
transition: background 0.25s, box-shadow 0.25s;
|
||||||
}
|
}
|
||||||
.logo-space {
|
.logo-space {
|
||||||
|
display: inline-flex; align-items: center; gap: 12px;
|
||||||
|
text-decoration: none; cursor: pointer;
|
||||||
|
}
|
||||||
|
.logo-space-img {
|
||||||
|
height: 40px; width: auto; max-height: 40px; object-fit: contain;
|
||||||
|
display: block; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.logo-space-text {
|
||||||
font-family: 'Exo 2', sans-serif; font-size: 24px; font-weight: 900;
|
font-family: 'Exo 2', sans-serif; font-size: 24px; font-weight: 900;
|
||||||
background: linear-gradient(90deg, var(--plasma-cyan), var(--star-white), var(--plasma-pink));
|
background: linear-gradient(90deg, var(--plasma-cyan), var(--star-white), var(--plasma-pink));
|
||||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||||
background-clip: text; letter-spacing: 3px; text-decoration: none; cursor: pointer;
|
background-clip: text; letter-spacing: 3px;
|
||||||
}
|
}
|
||||||
.nav-links { display: flex; gap: 28px; flex-wrap: wrap; font-family: 'Exo 2', sans-serif; font-size: 12px; letter-spacing: 2px; }
|
.nav-links { display: flex; gap: 28px; flex-wrap: wrap; font-family: 'Exo 2', sans-serif; font-size: 12px; letter-spacing: 2px; }
|
||||||
.nav-link-item { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
|
.nav-link-item { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
|
||||||
|
|||||||
Reference in New Issue
Block a user