fix page style

This commit is contained in:
yuanshan 2025-08-26 14:08:27 +08:00
parent e9418a7e64
commit fd40913fa5
5 changed files with 68 additions and 23 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -9,13 +9,15 @@
<NImage width="100" height="100" :src="FiEELogo" preview-disabled /> <NImage width="100" height="100" :src="FiEELogo" preview-disabled />
</div> </div>
<div class="header-menu"> <div class="header-menu">
<NMenu <NConfigProvider :theme-overrides="themeOverrides">
mode="horizontal" <NMenu
:options="menuOptions" mode="horizontal"
:inverted="isScrolled" :options="menuOptions"
v-model:value="selectedKey" :inverted="isScrolled"
@update:value="handleMenuSelect" v-model:value="selectedKey"
/> @update:value="handleMenuSelect"
/>
</NConfigProvider>
</div> </div>
</div> </div>
</NLayoutHeader> </NLayoutHeader>
@ -24,11 +26,31 @@
<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, NConfigProvider } 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 themeOverrides = {
Menu: {
// itemTextColor: "#ff7bac", //
//
// itemTextColorHorizontal: "#ff7bac", //
itemTextColorHoverHorizontal: "#ff7bac", //
itemTextColorActiveHorizontal: "#ff7bac", //
itemTextColorActiveHoverHorizontal: "#ff7bac", //
itemColorHover: "#ff7bac",
itemColorHoverInverted: "#ff7bac",
},
//
Dropdown: {
optionColorHover: "#fddfea", //
optionColorHoverInverted: "#fddfea", //
},
};
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -122,6 +144,12 @@ const handleToHome = () => {
.header-menu { .header-menu {
display: block; display: block;
flex: 1; flex: 1;
// :deep(
// .n-menu-item-content:not(.n-menu-item-content--disabled):hover
// .n-menu-item-content-header
// ) {
// color: #ff7bac;
// }
:deep(.n-menu) { :deep(.n-menu) {
background: transparent; background: transparent;
@ -145,7 +173,7 @@ const handleToHome = () => {
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background: var(--primary-color); background: #ff7bac;
transition: all 0.3s ease; transition: all 0.3s ease;
transform: translateX(-50%); transform: translateX(-50%);
opacity: 0; opacity: 0;

View File

@ -9,13 +9,15 @@
<NImage width="90" height="90" :src="FiEELogo" preview-disabled /> <NImage width="90" height="90" :src="FiEELogo" preview-disabled />
</div> </div>
<div class="header-menu"> <div class="header-menu">
<NMenu <NConfigProvider :theme-overrides="themeOverrides">
mode="horizontal" <NMenu
:options="menuOptions" mode="horizontal"
:inverted="isScrolled" :options="menuOptions"
v-model:value="selectedKey" :inverted="isScrolled"
@update:value="handleMenuSelect" v-model:value="selectedKey"
/> @update:value="handleMenuSelect"
/>
</NConfigProvider>
</div> </div>
</div> </div>
</NLayoutHeader> </NLayoutHeader>
@ -24,11 +26,30 @@
<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, NConfigProvider } 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 themeOverrides = {
Menu: {
// itemTextColor: "#ff7bac", //
//
// itemTextColorHorizontal: "#ff7bac", //
itemTextColorHoverHorizontal: "#ff7bac", //
itemTextColorActiveHorizontal: "#ff7bac", //
itemTextColorActiveHoverHorizontal: "#ff7bac", //
itemColorHover: "#ff7bac",
itemColorHoverInverted: "#ff7bac",
},
//
Dropdown: {
optionColorHover: "#fddfea", //
optionColorHoverInverted: "#fddfea", //
},
};
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -145,7 +166,7 @@ const handleToHome = () => {
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background: var(--primary-color); background: #ff7bac;
transition: all 0.3s ease; transition: all 0.3s ease;
transform: translateX(-50%); transform: translateX(-50%);
opacity: 0; opacity: 0;

View File

@ -192,8 +192,8 @@ const stats = ref([
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.company-overview { .company-overview {
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
/* padding: 0 20px; */
} }
/* 顶部大图区域 */ /* 顶部大图区域 */

View File

@ -1,4 +0,0 @@
# 功能
* 渐变三色
* n-menu修改背景色
* 背景图唯一