From 1153bce74e54e08127a7e57224011592ed15a338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Fri, 15 May 2026 10:48:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=BF=E9=87=8C=E5=B7=B4=E5=B7=B4icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 1 +
src/components/back-top.vue | 1 +
src/components/main-header.vue | 134 ++++++++++++++++++++++++++++++---
3 files changed, 127 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index c2b5ca3..3f3bfb9 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
test-ssg
+
diff --git a/src/components/back-top.vue b/src/components/back-top.vue
index adad669..7e35d5e 100644
--- a/src/components/back-top.vue
+++ b/src/components/back-top.vue
@@ -12,6 +12,7 @@
fill="none"
>
+
diff --git a/src/components/main-header.vue b/src/components/main-header.vue
index ca693b6..05e4c29 100644
--- a/src/components/main-header.vue
+++ b/src/components/main-header.vue
@@ -3,9 +3,23 @@
-
+
{{ item.name }}
+ {{ item.name }}
+
+
+ {{ child.name }}
+
+
@@ -16,8 +30,9 @@
@@ -71,11 +108,90 @@
align-items: center;
justify-content: center;
> .nav-item {
- > .nav-item-link {
+ position: relative;
+ > .link {
margin: 0 14px;
color: #fff;
- font-size: 16px;
+ font-size: 15px;
+ text-decoration: none;
+ line-height: 37px;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ &::before {
+ content: "";
+ position: absolute;
+ height: 2px;
+ width: 0;
+ right: 0;
+ left: auto;
+ bottom: 0;
+ transition: width 0.2s ease-in-out;
+ -webkit-transition: width 0.2s ease-in-out;
+ background-color: #fff;
+ }
+ &:hover::before {
+ width: 100%;
+ left: 0;
+ right: auto;
+ }
+ &.router-link-exact-active:before {
+ width: 100%;
+ }
}
+ > .child {
+ position: absolute;
+ bottom: 0;
+ visibility: hidden;
+ width: 250px;
+ height: auto;
+ padding: 10px 0;
+ box-sizing: border-box;
+ border: 1px solid #e1e1e1;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ transform: translateY(calc(100% + 5px));
+ > .child-link {
+ display: inline-block;
+ padding: 10px 15px;
+ color: #000;
+ font-size: 15px;
+ text-decoration: none;
+ text-align: left;
+ &:hover {
+ opacity: 0.5;
+ }
+ }
+ }
+ &:hover > .child {
+ animation: child-show 0.2s linear both;
+ }
+ @keyframes child-show {
+ 0% {
+ visibility: hidden;
+ // opacity: 0;
+ }
+ 100% {
+ // opacity: 1;
+ transform: translateY(100%);
+ visibility: visible;
+ }
+ }
+ }
+ }
+ > .right {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ > span {
+ margin: 0 14px;
+ color: #fff;
+ font-size: 15px;
+ text-decoration: none;
+ line-height: 37px;
+ display: inline-block;
+ position: relative;
}
}
}