修改头部样式，添加轮播图片

tanghaolin

2025-04-14 497efdaa8e972a95ec9fc70384fa8ab6aab0739b

 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>
@@ -51,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>
@@ -133,7 +142,7 @@
};
</script>

<style scoped>
<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
   height: 64px;
   line-height: 64px;
@@ -143,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);