调整导航栏样式，适配不同分辨率下文字被挤压导致省略，解决看不全内容的问题
This commit is contained in:
parent
24be7c61e5
commit
8eedc65345
@ -4,7 +4,7 @@ import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
import size375 from '@/components/customHeader/size375/index.vue'
|
||||
import size768 from '@/components/customHeader/size375/index.vue'
|
||||
import size1440 from '@/components/customHeader/size1920/index.vue'
|
||||
import size1440 from '@/components/customHeader/size1440/index.vue'
|
||||
import size1920 from '@/components/customHeader/size1920/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -17,9 +17,9 @@ const viewComponent = computed(() => {
|
||||
const viewWidth = width.value
|
||||
if (viewWidth <= 450) {
|
||||
return size375
|
||||
} else if (viewWidth <= 768) {
|
||||
} else if (viewWidth <= 835) {
|
||||
return size768
|
||||
} else if (viewWidth <= 1500) {
|
||||
} else if (viewWidth <= 1640) {
|
||||
return size1440
|
||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
||||
return size1920
|
||||
|
||||
230
src/components/customHeader/size1440/index.vue
Normal file
230
src/components/customHeader/size1440/index.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<!-- 通用页头 -->
|
||||
<NLayoutHeader
|
||||
class="custom-header"
|
||||
:class="{ 'header-scrolled': isScrolled }"
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="160" height="50" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NMenu
|
||||
mode="horizontal"
|
||||
:options="menuOptions"
|
||||
:inverted="isScrolled"
|
||||
v-model:value="selectedKey"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</NLayoutHeader>
|
||||
</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'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
const selectedKey = ref(null)
|
||||
|
||||
const isScrolled = ref(false)
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key)
|
||||
if (option && option.href) {
|
||||
router.push(option.href)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push('/myhome')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-header {
|
||||
--header-height: 5rem;
|
||||
--primary-color: #8b59f7;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
height: var(--header-height);
|
||||
|
||||
&.header-scrolled {
|
||||
background: rgba(220, 207, 248, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
max-width: 1700px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
margin-right: 100px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
:deep(.n-menu) {
|
||||
background: transparent;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.n-menu-item) {
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 700;
|
||||
// font-size: 16px;
|
||||
font-size: 0.875rem;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态的样式
|
||||
&.n-menu-item--selected {
|
||||
&::after {
|
||||
width: 40px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单样式
|
||||
:deep(.n-submenu) {
|
||||
.n-submenu-children {
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12px;
|
||||
padding: 8px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
transform-origin: top;
|
||||
animation: dropDown 0.3s ease;
|
||||
|
||||
.n-menu-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.header-menu .n-menu .n-menu-item-content .n-menu-item-content-header {
|
||||
word-break: break-word;
|
||||
white-space: unset !important;
|
||||
}
|
||||
.header-menu .n-menu .n-submenu .n-menu-item-content{
|
||||
padding: 0 8px!important;
|
||||
}
|
||||
</style>
|
||||
@ -60,11 +60,11 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
.search-date-picker {
|
||||
width: 240px;
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
:deep(.n-date-picker) {
|
||||
width: 240px;
|
||||
width: 14rem;
|
||||
.n-input__input {
|
||||
padding: 4px 0;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -77,7 +77,7 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
.search-select {
|
||||
width: 160px;
|
||||
width: 7rem;
|
||||
:deep(.n-base-selection) {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user