scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix home icon

Browse Source
This commit is contained in:
yuanshan 2025-08-22 14:18:13 +08:00
parent cab2491b2b
commit c6a1188488
6 changed files with 15912 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15822
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/assets/image/header/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 63 KiB

62
src/components/customHeader/size1440/index.vue
View File

@ -6,7 +6,7 @@
> >
<div class="header-container"> <div class="header-container">
<div class="logo" @click="handleToHome"> <div class="logo" @click="handleToHome">
<NImage width="160" height="50" :src="FiEELogo" preview-disabled /> <NImage width="80" height="80" :src="FiEELogo" preview-disabled />
</div> </div>
<div class="header-menu"> <div class="header-menu">
<NMenu <NMenu
@ -22,61 +22,61 @@
</template> </template>
<script setup> <script setup>
import FiEELogo from '@/assets/image/header/logo.png' import FiEELogo from "@/assets/image/header/logo.png";
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage } from 'naive-ui' import { NMenu, NLayoutHeader, NImage } from "naive-ui";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useHeaderMenuConfig } from '@/config/headerMenuConfig' import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
const { t } = useI18n() const { t } = useI18n();
const router = useRouter() const router = useRouter();
// 使用统一的菜单配置 // 使用统一的菜单配置
const menuOptions = useHeaderMenuConfig() const menuOptions = useHeaderMenuConfig();
const selectedKey = ref(null) const selectedKey = ref(null);
const isScrolled = ref(false) const isScrolled = ref(false);
// 递归查找菜单项 // 递归查找菜单项
function findMenuOptionByKey(options, key) { function findMenuOptionByKey(options, key) {
for (const option of options) { for (const option of options) {
if (option.key === key) return option if (option.key === key) return option;
if (option.children) { if (option.children) {
const found = findMenuOptionByKey(option.children, key) const found = findMenuOptionByKey(option.children, key);
if (found) return found if (found) return found;
} }
} }
return null return null;
} }
// 菜单点击跳转 // 菜单点击跳转
const handleMenuSelect = (key) => { const handleMenuSelect = (key) => {
const option = findMenuOptionByKey(menuOptions, key) const option = findMenuOptionByKey(menuOptions, key);
if (option && option.href) { if (option && option.href) {
router.push(option.href) router.push(option.href);
}
} }
};
// 监听滚动事件 // 监听滚动事件
const handleScroll = () => { const handleScroll = () => {
//滚动距离大于100px时，处理对应的header样式 //滚动距离大于100px时，处理对应的header样式
isScrolled.value = window.scrollY >= 100 isScrolled.value = window.scrollY >= 100;
} };
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
//点击回到首页 //点击回到首页
const handleToHome = () => { const handleToHome = () => {
router.push('/myhome') router.push("/myhome");
selectedKey.value = null // 重置菜单选中状态 selectedKey.value = null; // 重置菜单选中状态
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -108,7 +108,7 @@ const handleToHome = () => {
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease; transition: transform 0.3s ease;
margin-right: 100px; margin-left: 100px;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
@ -139,7 +139,7 @@ const handleToHome = () => {
text-align: center; text-align: center;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@ -185,7 +185,7 @@ const handleToHome = () => {
overflow: hidden; overflow: hidden;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

62
src/components/customHeader/size1920/index.vue
View File

@ -6,7 +6,7 @@
> >
<div class="header-container"> <div class="header-container">
<div class="logo" @click="handleToHome"> <div class="logo" @click="handleToHome">
<NImage width="160" height="50" :src="FiEELogo" preview-disabled /> <NImage width="80" height="80" :src="FiEELogo" preview-disabled />
</div> </div>
<div class="header-menu"> <div class="header-menu">
<NMenu <NMenu
@ -22,61 +22,61 @@
</template> </template>
<script setup> <script setup>
import FiEELogo from '@/assets/image/header/logo.png' import FiEELogo from "@/assets/image/header/logo.png";
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage } from 'naive-ui' import { NMenu, NLayoutHeader, NImage } from "naive-ui";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useHeaderMenuConfig } from '@/config/headerMenuConfig' import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
const { t } = useI18n() const { t } = useI18n();
const router = useRouter() const router = useRouter();
// 使用统一的菜单配置 // 使用统一的菜单配置
const menuOptions = useHeaderMenuConfig() const menuOptions = useHeaderMenuConfig();
const selectedKey = ref(null) const selectedKey = ref(null);
const isScrolled = ref(false) const isScrolled = ref(false);
// 递归查找菜单项 // 递归查找菜单项
function findMenuOptionByKey(options, key) { function findMenuOptionByKey(options, key) {
for (const option of options) { for (const option of options) {
if (option.key === key) return option if (option.key === key) return option;
if (option.children) { if (option.children) {
const found = findMenuOptionByKey(option.children, key) const found = findMenuOptionByKey(option.children, key);
if (found) return found if (found) return found;
} }
} }
return null return null;
} }
// 菜单点击跳转 // 菜单点击跳转
const handleMenuSelect = (key) => { const handleMenuSelect = (key) => {
const option = findMenuOptionByKey(menuOptions, key) const option = findMenuOptionByKey(menuOptions, key);
if (option && option.href) { if (option && option.href) {
router.push(option.href) router.push(option.href);
}
} }
};
// 监听滚动事件 // 监听滚动事件
const handleScroll = () => { const handleScroll = () => {
//滚动距离大于100px时，处理对应的header样式 //滚动距离大于100px时，处理对应的header样式
isScrolled.value = window.scrollY >= 100 isScrolled.value = window.scrollY >= 100;
} };
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener("scroll", handleScroll);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
//点击回到首页 //点击回到首页
const handleToHome = () => { const handleToHome = () => {
router.push('/myhome') router.push("/myhome");
selectedKey.value = null // 重置菜单选中状态 selectedKey.value = null; // 重置菜单选中状态
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -108,7 +108,7 @@ const handleToHome = () => {
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease; transition: transform 0.3s ease;
margin-right: 100px; margin-left: 100px;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
@ -139,7 +139,7 @@ const handleToHome = () => {
text-align: center; text-align: center;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@ -185,7 +185,7 @@ const handleToHome = () => {
overflow: hidden; overflow: hidden;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

49
src/components/customHeader/size375/index.vue
View File

@ -7,12 +7,16 @@
<div class="header-container"> <div class="header-container">
<div class="logo" @click="handleToHome"> <div class="logo" @click="handleToHome">
<NImage <NImage
style="width: 108px; height: 33px; max-width: 100%" style="width: 60px; height: 60px; max-width: 100%"
:src="FiEELogo" :src="FiEELogo"
preview-disabled preview-disabled
/> />
</div> </div>
<div class="menu-btn" :class="{ 'menu-open': showMenu }" @click="toggleMenu"> <div
class="menu-btn"
:class="{ 'menu-open': showMenu }"
@click="toggleMenu"
>
<n-icon size="28" class="menu-icon menu-icon-menu"> <n-icon size="28" class="menu-icon menu-icon-menu">
<menu-sharp /> <menu-sharp />
</n-icon> </n-icon>
@ -38,20 +42,20 @@
</template> </template>
<script setup> <script setup>
import FiEELogo from '@/assets/image/header/logo.png' import FiEELogo from "@/assets/image/header/logo.png";
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from "vue";
import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui' import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
import { MenuSharp, CloseSharp } from '@vicons/ionicons5' import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useHeaderMenuConfig } from '@/config/headerMenuConfig' import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
const { t } = useI18n() const { t } = useI18n();
const router = useRouter() const router = useRouter();
const isScrolled = ref(false) const isScrolled = ref(false);
const showMenu = ref(false) const showMenu = ref(false);
const selectedKey = ref(null) const selectedKey = ref(null);
const toggleMenu = () => { const toggleMenu = () => {
showMenu.value = !showMenu.value; showMenu.value = !showMenu.value;
@ -82,7 +86,7 @@ const handleMenuSelect = (key) => {
}; };
// 使用统一的菜单配置 // 使用统一的菜单配置
const menuOptions = useHeaderMenuConfig() const menuOptions = useHeaderMenuConfig();
// 监听滚动事件 // 监听滚动事件
const handleScroll = () => { const handleScroll = () => {
@ -95,15 +99,15 @@ onMounted(() => {
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll) window.removeEventListener("scroll", handleScroll);
}) });
//点击回到首页 //点击回到首页
const handleToHome = () => { const handleToHome = () => {
router.push('/') router.push("/");
selectedKey.value = null // 重置菜单选中状态 selectedKey.value = null; // 重置菜单选中状态
showMenu.value = false // 在移动端同时关闭菜单 showMenu.value = false; // 在移动端同时关闭菜单
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -160,8 +164,7 @@ const handleToHome = () => {
top: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);
opacity: 1; opacity: 1;
transition: transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none; pointer-events: none;
} }