From 17de6d01ddc343f58cdd0bada9123abbf84d088d Mon Sep 17 00:00:00 2001
From: daify <221250046@smail.nju.edu.cn>
Date: Wed, 18 Dec 2024 12:40:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0header=E6=8C=89=E9=92=AE?=
=?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Header.vue | 215 +++++++++++++++++++++++++++++++++-----
src/views/HomePage.vue | 3 +-
2 files changed, 188 insertions(+), 30 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 48db6a6..76fd71f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -92,13 +92,13 @@ function callSearch() {
</div>
<div style="display: flex; flex-direction: row">
- <router-link to="/manage" class="manage-btn header-btn">
+ <router-link to="/manage" class="manage-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path>
</svg>
</router-link>
- <router-link to="/home" class="home-btn header-btn">
+ <router-link to="/home" class="home-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-home">
@@ -106,7 +106,7 @@ function callSearch() {
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</router-link>
- <div @click="toggleIcons" class="role-btn header-btn">
+ <div @click="toggleIcons" class="more-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z"></path>
@@ -115,7 +115,7 @@ function callSearch() {
<!-- 鏂板鐨勫浘鏍囧尯鍩� -->
<div class="icon-container" v-if="showIcons" style="display: flex; flex-direction: row">
- <div @click="callPersonalData" class="animated-icon header-btn" :style="{ animationDelay: `${0.1}s` }">
+ <div @click="callPersonalData" class="role-icon" :style="{ animationDelay: `${0.1}s` }">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-user">
@@ -123,13 +123,13 @@ function callSearch() {
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
- <div @click="callSetting" class="animated-icon header-btn" :style="{ animationDelay: `${0.2}s` }">
+ <div @click="callSetting" class="set-icon" :style="{ animationDelay: `${0.2}s` }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384m0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256"></path>
</svg>
</div>
- <div @click="exit" class="animated-icon header-btn" :style="{ animationDelay: `${0.3}s` }">
+ <div @click="exit" class="exit-icon" :style="{ animationDelay: `${0.3}s` }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"></path>
@@ -159,6 +159,9 @@ function callSearch() {
margin-right: 10px;
color: #fff;
text-decoration: none;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
}
.home-btn svg {
@@ -167,12 +170,35 @@ function callSearch() {
margin-right: 10px;
}
+.home-btn:hover {
+ transform: scale(1.1);
+ color: #efeeee;
+ background-color: #404040;
+}
+
+.home-btn:hover::after {
+ content: '鍥炲埌涓婚〉';
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+
.manage-btn {
display: flex;
align-items: center;
margin-right: 10px;
color: #fff;
text-decoration: none;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
}
.manage-btn svg {
@@ -181,6 +207,29 @@ function callSearch() {
margin-right: 10px;
}
+.manage-btn:hover {
+ transform: scale(1.1);
+ color: #efeeee;
+ background-color: #404040;
+}
+
+/*
+娣诲姞鎮仠鏍峰紡
+ */
+.manage-btn:hover::after {
+ content: '澧炲姞姝屾洸';
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+
.search-box {
display: flex;
align-items: center;
@@ -224,44 +273,152 @@ input[type="text"]:focus {
outline: none;
}
-.role-btn {
- display: flex;
- align-items: center;
- margin-right: 10px;
- color: #fff;
- text-decoration: none;
- cursor: pointer;
+.more-btn {
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
}
-.role-btn svg {
- width: 32px;
- height: 32px;
- margin-right: 10px;
+.more-btn svg {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
}
-.animated-icon {
+.more-btn:hover {
+ transform: scale(1.1);
+ color: #efeeee;
+ background-color: #404040;
+}
+
+.more-btn:hover::after {
+ content: '鏇村';
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+
+.role-icon {
margin: 10px 0;
opacity: 0;
transform: translateX(-20px); /* 鍒濆浣嶇疆绋嶅井鍋忓乏 */
animation: slideIn 0.5s forwards;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
}
-.animated-icon svg {
+.role-icon svg {
color: #d5d5d5;
width: 32px;
height: 32px;
margin-right: 10px;
}
+.role-icon svg:hover {
+ transform: scale(1.1);
+ color: #efeeee;
+ background-color: #404040;
+}
+
+.role-icon:hover::after {
+ content: '涓汉涓婚〉';
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+
+.set-icon {
+ margin: 10px 0;
+ opacity: 0;
+ transform: translateX(-20px); /* 鍒濆浣嶇疆绋嶅井鍋忓乏 */
+ animation: slideIn 0.5s forwards;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
+}
+
+.set-icon svg {
+ color: #d5d5d5;
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+}
-.header-btn {
- border-radius: 50%;
- transition: width, color, background-color ease-in-out 0.2s;
+.set-icon svg:hover {
+ transform: scale(1.1);
+ color: #efeeee;
+ background-color: #404040;
}
-.header-btn:hover {
- transform: scale(1.1);
- color: #efeeee;
- background-color: #404040;
+
+.set-icon:hover::after {
+ content: '璁剧疆';
+ color: #000000;
+ position: absolute;
+ top: 100%;
+ left: 38%;
+ transform: translateX(-50%);
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
+}
+
+.exit-icon {
+ margin: 10px 0;
+ opacity: 0;
+ transform: translateX(-20px); /* 鍒濆浣嶇疆绋嶅井鍋忓乏 */
+ animation: slideIn 0.5s forwards;
+ cursor: pointer;
+ border-radius: 50%;
+ transition: width, color, background-color ease-in-out 0.2s;
+}
+
+.exit-icon svg {
+ color: #d5d5d5;
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+}
+
+.exit-icon svg:hover {
+ transform: scale(1.1);
+ color: red;
+ background-color: #404040;
+}
+
+.exit-icon:hover::after {
+ content: '閫€鍑�';
+ color: red;
+ position: absolute;
+ top: 100%;
+ left: 38%;
+ transform: translateX(-50%);
+ background-color: rgba(245, 245, 245, 0.8);
+ padding: 3px 4px;
+ border-radius: 3px;
+ white-space: nowrap;
+ font-size: 14px;
}
@keyframes slideIn {
@@ -271,17 +428,17 @@ input[type="text"]:focus {
}
}
-.role-btn {
+.more-btn {
position: relative; /* 璁╂柊鍥炬爣鐩稿浜庤鑹叉寜閽樉绀� */
cursor: pointer;
}
/* 鎸夐挳鍔ㄧ敾鏁堟灉 */
-.role-btn svg {
+.more-btn svg {
transition: transform 0.3s ease;
}
-.role-btn:hover svg {
+.more-btn:hover svg {
transform: rotate(90deg);
}
</style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 1256bec..ee770a5 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -811,6 +811,7 @@ h1 {
/* HEADER */
.header{
grid-area: global-nav;
+ z-index: 1000;
}
/* TEMP */
@@ -1533,7 +1534,7 @@ footer {
/* 閫€鍑烘悳绱㈠浘鏍� */
.exit-search {
position: absolute;
- top: 10px;
+ top: 90px;
right: 10px;
width: 30px;
height: 30px;
--
GitLab