fix page style
This commit is contained in:
parent
e9418a7e64
commit
fd40913fa5
Binary file not shown.
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 36 KiB |
@ -9,6 +9,7 @@
|
|||||||
<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">
|
||||||
|
<NConfigProvider :theme-overrides="themeOverrides">
|
||||||
<NMenu
|
<NMenu
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
:options="menuOptions"
|
:options="menuOptions"
|
||||||
@ -16,6 +17,7 @@
|
|||||||
v-model:value="selectedKey"
|
v-model:value="selectedKey"
|
||||||
@update:value="handleMenuSelect"
|
@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;
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
<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">
|
||||||
|
<NConfigProvider :theme-overrides="themeOverrides">
|
||||||
<NMenu
|
<NMenu
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
:options="menuOptions"
|
:options="menuOptions"
|
||||||
@ -16,6 +17,7 @@
|
|||||||
v-model:value="selectedKey"
|
v-model:value="selectedKey"
|
||||||
@update:value="handleMenuSelect"
|
@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;
|
||||||
|
@ -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; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部大图区域 */
|
/* 顶部大图区域 */
|
||||||
|
Loading…
Reference in New Issue
Block a user