fix home icon
This commit is contained in:
yuanshan
parent
cab2491b2b
commit
c6a1188488
15822
package-lock.json
generated
Normal file
15822
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 63 KiB |
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<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 class="header-menu">
|
||||
<NMenu
|
||||
@ -22,61 +22,61 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from '@/assets/image/header/logo.png'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
const selectedKey = ref(null)
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
const selectedKey = ref(null);
|
||||
|
||||
const isScrolled = ref(false)
|
||||
const isScrolled = ref(false);
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option
|
||||
if (option.key === key) return option;
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key)
|
||||
if (found) return found
|
||||
const found = findMenuOptionByKey(option.children, key);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key)
|
||||
const option = findMenuOptionByKey(menuOptions, key);
|
||||
if (option && option.href) {
|
||||
router.push(option.href)
|
||||
router.push(option.href);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100
|
||||
}
|
||||
isScrolled.value = window.scrollY >= 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push('/myhome')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
}
|
||||
router.push("/myhome");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -108,7 +108,7 @@ const handleToHome = () => {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
margin-right: 100px;
|
||||
margin-left: 100px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
@ -139,7 +139,7 @@ const handleToHome = () => {
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@ -185,7 +185,7 @@ const handleToHome = () => {
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -224,7 +224,7 @@ const handleToHome = () => {
|
||||
word-break: break-word;
|
||||
white-space: unset !important;
|
||||
}
|
||||
.header-menu .n-menu .n-submenu .n-menu-item-content{
|
||||
padding: 0 8px!important;
|
||||
.header-menu .n-menu .n-submenu .n-menu-item-content {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<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 class="header-menu">
|
||||
<NMenu
|
||||
@ -22,61 +22,61 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from '@/assets/image/header/logo.png'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
const selectedKey = ref(null)
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
const selectedKey = ref(null);
|
||||
|
||||
const isScrolled = ref(false)
|
||||
const isScrolled = ref(false);
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option
|
||||
if (option.key === key) return option;
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key)
|
||||
if (found) return found
|
||||
const found = findMenuOptionByKey(option.children, key);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key)
|
||||
const option = findMenuOptionByKey(menuOptions, key);
|
||||
if (option && option.href) {
|
||||
router.push(option.href)
|
||||
router.push(option.href);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100
|
||||
}
|
||||
isScrolled.value = window.scrollY >= 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push('/myhome')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
}
|
||||
router.push("/myhome");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -108,7 +108,7 @@ const handleToHome = () => {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
margin-right: 100px;
|
||||
margin-left: 100px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
@ -139,7 +139,7 @@ const handleToHome = () => {
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@ -185,7 +185,7 @@ const handleToHome = () => {
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -7,12 +7,16 @@
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage
|
||||
style="width: 108px; height: 33px; max-width: 100%"
|
||||
style="width: 60px; height: 60px; max-width: 100%"
|
||||
:src="FiEELogo"
|
||||
preview-disabled
|
||||
/>
|
||||
</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">
|
||||
<menu-sharp />
|
||||
</n-icon>
|
||||
@ -38,20 +42,20 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from '@/assets/image/header/logo.png'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui'
|
||||
import { MenuSharp, CloseSharp } from '@vicons/ionicons5'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
|
||||
import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const isScrolled = ref(false)
|
||||
const showMenu = ref(false)
|
||||
const selectedKey = ref(null)
|
||||
const isScrolled = ref(false);
|
||||
const showMenu = ref(false);
|
||||
const selectedKey = ref(null);
|
||||
|
||||
const toggleMenu = () => {
|
||||
showMenu.value = !showMenu.value;
|
||||
@ -82,7 +86,7 @@ const handleMenuSelect = (key) => {
|
||||
};
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
@ -95,15 +99,15 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push('/')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
showMenu.value = false // 在移动端同时关闭菜单
|
||||
}
|
||||
router.push("/");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
showMenu.value = false; // 在移动端同时关闭菜单
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -160,8 +164,7 @@ const handleToHome = () => {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user