From 497efdaa8e972a95ec9fc70384fa8ab6aab0739b Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期一, 14 四月 2025 17:32:33 +0800
Subject: [PATCH] 修改头部样式，添加轮播图片
---
src/components/AppHeader.vue | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 52 insertions(+), 6 deletions(-)
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 74f36e6..dbbe8b9 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,11 +1,11 @@
<template>
- <header class="bg-white shadow-sm flex items-center">
- <div class="flex w-full">
- <div class="flex items-center h-20 mx-auto">
+ <header class="bg-white shadow-sm flex header-div">
+ <div class="flex w-full h-full" style="flex-direction: column;">
+ <div class="flex w-full h-full header-layout-div">
<!-- Logo -->
- <div class="flex items-center cursor-pointer">
+ <div class="flex items-center cursor-pointer h-full">
<router-link to="/">
- <img :src="headerLogo" alt="Logo" class="h-20 w-auto" />
+ <img :src="headerLogo" alt="Logo" class="header-logo w-auto" />
</router-link>
<!-- <span class="text-extra-large font-bold">宸ヤ笟澶ф暟鎹钩鍙�</span> -->
</div>
@@ -18,6 +18,7 @@
<el-menu-item index="/eec-label-search" class="!px-4">璇佷功鏌ヨ</el-menu-item>
<el-menu-item index="/news-detail/99" class="!px-4">鏀跨瓥鏂囦欢</el-menu-item>
<el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">娉甸�夊瀷</el-menu-item>
+ <el-menu-item index="/gb19762-2025" class="!px-4">璁＄畻宸ュ叿</el-menu-item>
</el-menu>
</nav>
@@ -50,6 +51,15 @@
</template>
</div>
</div>
+ </div>
+ <!-- 椤堕儴浜у搧鎼滅储妗� -->
+ <div class="header-tool-div" v-show="false">
+ <div class="search-input-div">
+ <input />
+ <button>鎼滅储</button>
+ </div>
+ <div></div>
+ <div></div>
</div>
</div>
</header>
@@ -132,7 +142,7 @@
};
</script>
-<style scoped>
+<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
height: 64px;
line-height: 64px;
@@ -142,6 +152,42 @@
:deep(.el-menu--horizontal) {
border-bottom: none;
}
+.header-layout-div{
+ padding-left: 231px;
+ height: 87px;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.header-logo{
+ height: 68px;
+}
+.header-tool-div{
+ padding-left: 258px;
+ width: 100%;
+ height: 64px;
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+ border: 1px solid rgba(158, 158, 158, 0.4);
+ box-sizing: border-box;
+ .search-input-div{
+ input {
+ width: 482px;
+ height: 39px;
+ background: #FFFFFF;
+ box-shadow: 0px 2px 3px 0px #FFFFFF, 0px 2px 3px 0px rgba(0,0,0,0.4);
+ border-radius: 6px;
+ }
+ button {
+ width: 68px;
+ height: 42px;
+ background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(255,255,255,0.8));
+ box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
+ border: 1px solid;
+ border-image: linear-gradient(180deg, #C2C2C2, #989898) 1 1;
+ }
+ }
+
+}
.cart-badge :deep(.el-badge__content) {
animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--
Gitblit v1.9.3