yoe-shop-web/src/views/home/datacomponents/JDHeader.vue

<template>
  <div class="jd-header">
    <!-- 1. 始终吸顶的 44px 纯白背景顶部窄条 (无边框线，字号调大) -->
    <div class="header-top">
      <div class="top-inner flex-between w">
        <!-- 左侧区域：北京定位、部门/企业选择 (严格对齐图2左侧) -->
        <div class="top-left flex">
          <div class="loc-wrap">
            <svg class="loc-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
              ></path>
            </svg>
            <span>武汉</span>
          </div>

          <!-- 登录者公司下拉 (图2高奢重构) -->
          <div class="nav-item has-dropdown company-dropdown">
            <span class="dept-text">您好！{{ userInfo.companyName || '' }}</span>
            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <polyline points="6 9 12 15 18 9" />
            </svg>
            <!-- 👑 尊贵企业公司与用户信息面板 (图2大气重构) -->
            <div class="dropdown-menu company-menu">
              <div class="user-info-card flex">
                <!-- 左侧头像与会员徽章 -->
                <div class="avatar-area flex-column align-center">
                  <div class="avatar-circle">
                    <!-- 使用精致的 Joy 狗头像，若图片加载失败则自动fallback -->
                    <img src="@/assets/images/pcdiy/logo2.png" alt="" class="avatar-img" />
                  </div>
                  <span class="member-gold-badge">企业会员</span>
                </div>
                <!-- 右侧详细信息 -->
                <div class="info-area flex-column">
                  <div class="user-row">
                    账号名称：<span class="user-red-name">{{ userInfo.user?.nickName || '' }}</span>
                  </div>
                  <div class="company-row">归属公司：{{ userInfo.companyName || '' }}</div>
                  <div class="dept-row">所属部门：{{ userInfo.user?.deptName || '' }}</div>
                </div>
              </div>
              <!-- 底部操作区 -->
              <div class="card-divider"></div>
              <div class="action-bar flex-end">
                <span class="action-txt-btn">切换登录</span>
                <span class="action-txt-btn" @click="onlogout">退出</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧区域：工作台、采购合作、优易内购（键礼）、客户服务、手机慧采 (严格对齐图2右侧) -->
        <div class="top-right flex">
          <!-- 工作台 -->
          <div @click="onPath('/enterprise/companyInfo')" class="nav-item">工作台</div>
          <span class="spacer"></span>

          <!-- 采购合作 ∨ (紧凑美观重构) -->
          <div class="nav-item has-dropdown">
            <span>采购合作</span>
            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <polyline points="6 9 12 15 18 9" />
            </svg>
            <!-- 采购合作下拉面板 -->
            <div class="dropdown-menu partner-menu">
              <div class="menu-sub-item">企业入驻</div>
              <div class="menu-sub-item">合作咨询</div>
              <div class="menu-sub-item">服务指南</div>
            </div>
          </div>
          <span class="spacer"></span>

          <!-- 优易内购（键礼） -->
          <div class="nav-item">优易内购（键礼）</div>
          <span class="spacer"></span>

          <!-- 客户服务 ∨ (紧凑美观重构) -->
          <div class="nav-item has-dropdown">
            <span>客户服务</span>
            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <polyline points="6 9 12 15 18 9" />
            </svg>
            <!-- 客户服务下拉面板 -->
            <div class="dropdown-menu service-menu">
              <div class="menu-sub-item">帮助中心</div>
              <div class="menu-sub-item">售后服务</div>
              <div class="menu-sub-item">在线客服</div>
            </div>
          </div>
          <span class="spacer"></span>

          <!-- 手机慧采 ∨ (最右侧，图3大型高端卡片化布局) -->
          <div class="nav-item has-dropdown mobile-dropdown last-item">
            <span>手机慧采</span>
            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <polyline points="6 9 12 15 18 9" />
            </svg>
            <!-- 手机慧采大型大气美观面板 (微信公众号+微信小程序双子星并列布局) -->
            <div class="dropdown-menu mobile-menu-panel">
              <div class="mobile-dual-cards flex">
                <!-- 左侧：微信公众号 -->
                <div class="mobile-card-col flex-column align-center">
                  <div class="card-header-row flex align-center">
                    <span class="wechat-badge-dot green"></span>
                    <span class="card-header-title">微信公众号</span>
                  </div>
                  <div class="qr-box-container">
                    <img :src="wechatLink" alt="" class="qr-box-img" />
                  </div>
                  <span class="qr-explain-text">扫码关注“微信公众号”<br />获取专享特惠与采购指南</span>
                </div>

                <!-- 中间竖直华丽分割线 -->
                <div class="vertical-divider"></div>

                <!-- 右侧：微信小程序 -->
                <div class="mobile-card-col flex-column align-center">
                  <div class="card-header-row flex align-center">
                    <span class="wechat-badge-dot red"></span>
                    <span class="card-header-title">微信小程序</span>
                  </div>
                  <div class="qr-box-container">
                    <img :src="weiboLink" alt="" class="qr-box-img" />
                  </div>
                  <span class="qr-explain-text">微信扫码“小易来了”<br />随时随地掌握采购与物流</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2. 中间搜索与Logo行 (透明背景，总高度锁死为 104px) -->
    <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
      <div class="header-mid w flex">
        <!-- 双 Logo 设计：优易慧采 + 中国银行 (锁定物理尺寸为 127*40 与 144*40) -->
        <div class="logo-box flex">
          <!-- 优易慧采大红Logo (矢量渲染，锁定宽度 127px，高度 40px) -->
          <div class="logo-hucai">{{ dataInfo.mainTitle || '' }}</div>

          <!-- 中国银行真实图片 Logo (物理尺寸三层死锁为 144px * 40px) -->
          <img
            :src="dataInfo.logoUrl"
            alt=""
            class="logo-boc-img"
            width="144"
            height="40"
            style="
              width: 144px !important;
              height: 40px !important;
              min-width: 144px !important;
              max-width: 144px !important;
              min-height: 40px !important;
              max-height: 40px !important;
            "
          />
        </div>

        <!-- 搜索区域 -->
        <div class="search-box-wrap flex-1">
          <div class="search-bar flex">
            <div class="input-group flex-1 flex relative" style="position: relative">
              <!-- 真实的搜索输入框 -->
              <input
                type="text"
                v-model="userSearchValue"
                @focus="isSearchInputFocused = true"
                @blur="handleSearchInputBlur"
                ref="searchInput"
                style="width: 100%; height: 100%; border: none; outline: none; background: transparent"
              />
              <!-- 绝对定位的上下滚动占位词覆盖层 (仅当输入框未聚焦且用户没有输入内容时显示) -->
              <div class="search-scroll-swiper" v-if="!isSearchInputFocused && !userSearchValue" @click="focusSearchInput">
                <transition name="keyword-slide">
                  <div :key="currentKeywordIndex" class="keyword-swiper-item">
                    {{ scrollKeywords[currentKeywordIndex] }}
                  </div>
                </transition>
              </div>
            </div>
            <button class="search-btn" @click="onPath('/search?type=1&input=' + userSearchValue)">搜 索</button>
          </div>
          <!-- 热搜词一比一完美复刻图2 -->
          <div class="hot-links">
            <span @click="onPath('/search?type=1&input=' + item.name)" class="red-link" v-for="(item, index) in dataInfo.hotWords" :key="index">{{
              item.name
            }}</span>
          </div>
        </div>

        <!-- 动作操作区 (AI采购管家 + 我的采购单) -->
        <div class="header-actions flex">
          <!-- AI采购管家 (带亮红 NEW 小胶囊) -->
          <!-- 隐形占位以保持“我的采购单”绝对位置零漂移 -->
          <div class="action-btn ai-manager-btn relative invisible-placeholder">
            <span class="new-badge">NEW</span>
            <span class="btn-text">Ai 采购管家</span>
          </div>

          <!-- 我的采购单 (带购物车和红点数字1) -->
          <div class="action-btn my-cart-btn relative">
            <svg class="cart-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            <span class="btn-text">{{ dataInfo.mainTitle }}</span>
            <span v-if="cartCount > 0" class="cart-count-badge">{{ cartCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位符，防止中间栏吸顶时页面抖动跳跃 (高度统一为 104px) -->
    <div class="header-placeholder" v-show="isFixed"></div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { useUserStore } from '@/store/modules/user';
import { getPlatformConfigList } from '@/api/breg/index';
import { cartStore } from '@/store/modules/cart';
import { currentSearchConfig } from '@/api/home/index-data';

interface Props {
  userInfo?: any;
}
const props = defineProps<Props>();

const dataInfo = ref<any>({});
const wechatLink = ref<any>('');
const weiboLink = ref<any>('');
const cartStoreData = cartStore();
const cartCount = computed(() => cartStoreData.cartCount);

currentSearchConfig({}).then((res) => {
  if (res.code == 200) {
    document.documentElement.style.setProperty('--hover-data1', res.data.themeColor || '#E7000B');
    if (res.data.searchPlaceholder) {
      scrollKeywords.value = res.data.searchPlaceholder.split(',');
    }
    if (res.data.hotWords) {
      res.data.hotWords = JSON.parse(res.data.hotWords);
    }
    dataInfo.value = res.data;
  }
});

getPlatformConfigList({ configKey: 'wechatLink' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      wechatLink.value = res.rows[0].value;
    }
  }
});

getPlatformConfigList({ configKey: 'weiboLink' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      weiboLink.value = res.rows[0].value;
    }
  }
});

const onlogout = () => {
  useUserStore()
    .logout()
    .then(() => {
      onPath('/login');
    });
};

const isFixed = ref(false);

const handleScroll = () => {
  // 当滚过 header-top 时，中间栏吸顶
  isFixed.value = window.scrollY > 44;
};

// 👑 多商品占位词上下滚动机制
const scrollKeywords = ref<any>([]);
const currentKeywordIndex = ref(0);
const isSearchInputFocused = ref(false);
const userSearchValue = ref('');
const searchInput = ref(null);

let keywordInterval = null;

const startKeywordRotation = () => {
  keywordInterval = setInterval(() => {
    // 仅当输入框没有被聚焦且用户未输入内容时，才在后台和前台进行上下滚动播放
    if (!isSearchInputFocused.value && !userSearchValue.value) {
      currentKeywordIndex.value = (currentKeywordIndex.value + 1) % scrollKeywords.value.length;
    }
  }, 2500); // 2.5 秒完美滚动频次
};

const focusSearchInput = () => {
  if (searchInput.value) {
    searchInput.value.focus();
  }
};

const handleSearchInputBlur = () => {
  isSearchInputFocused.value = false;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  startKeywordRotation();
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
  if (keywordInterval) {
    clearInterval(keywordInterval);
  }
});
</script>

<style scoped>
/* 整个Header容器背景清透 */
.jd-header {
  background: transparent;
  padding-top: 44px; /* 最新 44px 顶栏高撑开 */
}

/* ==================== 👑 版心控制 (遵守全局媒体查询宽度，确保任何设备视口下双向垂直绝对铅垂线切平对齐) ==================== */
.w {
  margin: 0 auto;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ==================== 👑 44px 吸顶顶部窄条 ==================== */
.header-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #ffffff;
  border-bottom: none;
  font-size: 13.5px;
  color: #666;
  line-height: 44px;
  z-index: 10000;
}

.top-inner {
  height: 100%;
  box-sizing: border-box;
}

/* Flex 布局助手 */
.flex {
  display: flex;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 导航小分割线 */
.spacer {
  width: 1px;
  height: 12px;
  background: #e5e5e5;
  margin: 0 10px;
  display: inline-block;
  align-self: center;
}

/* 定位样式 */
.loc-wrap {
  display: flex;
  align-items: center;
  color: #e1251b;
  cursor: pointer;
  font-weight: bold;
  padding: 0 12px 0 0;
  transition: opacity 0.2s;
}
.loc-wrap:hover {
  opacity: 0.8;
}
.loc-icon {
  color: #e1251b;
  margin-right: 4px;
}

/* 导航项通用样式 */
.nav-item {
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  color: #666;
}
.nav-item:hover {
  color: #e1251b;
  background: #f9f9f9;
}

/* 最右侧项微调，把 padding-right 设为 0 以保证与“我的采购单”右边缘完美垂直对齐 */
.nav-item.last-item {
  padding-right: 0 !important;
}

.red-link {
  color: #e1251b !important;
}
.font-bold {
  font-weight: bold;
}

/* 下拉小箭头 */
.arrow {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  margin-left: 5px;
  color: #a0a0a0;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
  vertical-align: middle !important;
  display: inline-block !important;
}
.has-dropdown:hover .arrow {
  transform: rotate(180deg);
  color: #e1251b;
}

/* ==================== 👑 悬停下拉浮现菜单 (高奢大气商务重构) ==================== */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px); /* 留出 8px 精致桥接悬空格局 */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06); /* 超细呼吸细灰边框 */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.02); /* 高奢多层立体虚化投影 */
  border-radius: 8px; /* 大气圆润 8px 圆角 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001;
  min-width: 140px; /* 大气加宽 */
  padding: 4px 0 !important; /* 紧凑设计：缩减上下边距，消除松垮感 */
  box-sizing: border-box;
}

/* 加上桥接热区以保证悬浮进入顺畅无漂移 */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}

/* 👑 1. 尊贵企业公司与用户信息面板样式 (图2高奢大气重塑) */
.company-dropdown .dropdown-menu.company-menu {
  width: 380px !important; /* 拓宽至高大气 380px 宽度，防止公司和部门换行 */
  padding: 16px !important;
  left: 0;
  transform: translateY(8px);
}
.company-dropdown:hover .dropdown-menu.company-menu {
  transform: translateY(2px);
}

.user-info-card {
  width: 100% !important;
  align-items: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* 左侧头像与黑金标签 */
.avatar-area {
  flex-shrink: 0 !important;
  align-items: center !important;
}
.avatar-circle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #fff5f5 !important;
  border: 2px solid #fff1f0 !important; /* 精致红粉边框突显立体感 */
  overflow: hidden !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.member-gold-badge {
  margin-top: 5px !important;
  background: #222222 !important; /* 黑金质感 */
  color: #fad18f !important; /* 尊贵金黄字 */
  font-size: 10px !important;
  font-weight: bold !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  border: 1px solid #333333 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transform: scale(0.9) !important;
}

/* 右侧公司与账号 */
.info-area {
  flex: 1 !important;
  justify-content: center !important;
  text-align: left !important;
}
.user-row {
  font-size: 13.5px !important;
  color: #555555 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.user-red-name {
  color: #e1251b !important; /* 醒目优易红 */
  font-weight: bold !important;
}
.company-row,
.dept-row {
  font-size: 12px !important;
  color: #666666 !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
  word-break: break-all !important;
}

/* 底部操作区细分割线 */
.card-divider {
  height: 1px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  width: 100% !important;
  margin: 8px 0 6px 0 !important; /* 深度紧缩：缩小间距 */
}
.action-bar {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  height: 20px !important; /* 锁死精致高度 */
  line-height: 20px !important;
  margin-bottom: -4px !important; /* 精巧向上拉伸，消除下方残留的过大留白 */
}
.action-txt-btn {
  font-size: 13.5px !important; /* 文字调大：极佳的辨识度 */
  color: #666666 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  font-weight: 500 !important;
}
.action-txt-btn:hover {
  color: #e1251b !important; /* Hover 时大红 */
}

/* 👑 2. 高端紧凑子项：5px 24px padding，消灭太大的间距，充满精细感 */
.menu-sub-item {
  position: relative !important;
  padding: 4px 16px 4px 24px !important; /* 深度紧缩上下字距：精细精神，消灭丑态 */
  line-height: 1.6 !important; /* 强制优雅紧凑行高，杜绝任何外部撑大 */
  color: #333333 !important; /* 经典深沉灰黑 */
  font-size: 13px !important; /* 极其大气清晰 */
  white-space: nowrap !important;
  text-align: left !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 500 !important;
  margin: 1px 0 !important; /* 保持项与项之间的极细呼吸 */
}

/* 左侧若隐若现的大红微圆点 */
.menu-sub-item::before {
  content: '' !important;
  position: absolute !important;
  left: 12px !important; /* 随着padding缩减微调 */
  top: 50% !important;
  transform: translateY(-50%) scale(0.4) !important;
  width: 4.5px !important;
  height: 4.5px !important;
  background: #e1251b !important;
  border-radius: 50% !important;
  opacity: 0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.menu-sub-item:hover,
.menu-sub-item.active {
  background: rgba(225, 37, 27, 0.04) !important; /* 高端淡红高亮背景 */
  color: #e1251b !important; /* 高亮变为优易经典红色 */
  padding-left: 27px !important; /* 悬浮时微向右推 3px，展现物理解耦的弹性滑动 */
}

/* 悬浮时让微圆点优雅滑出并变大 */
.menu-sub-item:hover::before,
.menu-sub-item.active::before {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
  left: 14px !important;
}

/* 👑 3. 手机慧采公众号与小程序并排卡片 (超宽420px，大气白净设计) */
.mobile-dropdown .dropdown-menu.mobile-menu-panel {
  width: 420px !important; /* 物理宽度锁定为霸气的 420px */
  padding: 20px !important; /* 内边距舒张开朗 */
  left: auto;
  right: 0;
  transform: translateY(8px);
}
.mobile-dropdown:hover .dropdown-menu.mobile-menu-panel {
  transform: translateY(2px);
}

/* 👑 双子星公众号与小程序并排大气格局 */
.mobile-dual-cards {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
}
.mobile-card-col {
  width: 47% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.card-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}
.wechat-badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.wechat-badge-dot.green {
  background: #07c160 !important;
  box-shadow: 0 0 6px rgba(7, 193, 96, 0.4) !important;
}
.wechat-badge-dot.red {
  background: #e1251b !important;
  box-shadow: 0 0 6px rgba(225, 37, 27, 0.4) !important;
}
.card-header-title {
  font-size: 13.5px !important;
  font-weight: bold !important;
  color: #333333 !important;
}

/* 精致白净的二维码框架 */
.qr-box-container {
  width: 116px !important; /* 高能放大：由 100px 显著拉大至 116px，视觉气派震撼 */
  height: 116px !important; /* 高度同步放大 */
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  margin: 8px 0 !important; /* 上下间隙微调以保持极佳比例 */
}
.qr-box-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 扫码说明描述文字 */
.qr-explain-text {
  font-size: 11.5px !important;
  color: #777777 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* 中间高雅的竖直实线分割线 */
.vertical-divider {
  width: 1px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  align-self: stretch !important;
  margin: 4px 5px !important;
}

/* ==================== 👑 中间搜索与Logo行 (高保真高度 104px) ==================== */
.header-mid-wrap {
  height: 104px; /* 锁死为 104px */
  background: transparent; /* 搜索栏是没有白色背景的 */
  transition: all 0.2s;
  box-sizing: border-box;
}

/* 当页面向下滚动时吸顶配合 */
.header-mid-wrap.is-fixed {
  position: fixed;
  top: 44px !important; /* 锁紧在 44px 顶栏的正下方 */
  left: 0;
  right: 0;
  height: 64px !important; /* 高度在吸顶时收缩为精致扁平的 64px */
  z-index: 9999 !important;
  background: #ffffff !important; /* 完美复刻图1纯白通栏吸顶背景 */
  border-bottom: 1px solid #ededed !important; /* 精致底边细分割线，完美分割下方内容 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-mid-wrap.is-fixed .header-mid {
  height: 64px !important; /* 主容器高度同步收缩 */
}

/* 吸顶时隐藏热词，释放珍贵的垂直视口空间 */
.header-mid-wrap.is-fixed .hot-links {
  display: none !important;
}

@keyframes slideDown {
  from {
    transform: translateY(-10%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 占位符高度升级为 104px */
.header-placeholder {
  height: 104px;
}

.header-mid {
  height: 104px;
  padding: 0 !important; /* 取消原本 padding，通过 flex 水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* ==================== 👑 双 Logo 排版样式 ==================== */
.logo-box {
  width: 340px; /* 锁死为符合图3的 340px 宽度，确保搜索栏左边缘到优易慧采左侧为 340px */
  height: 40px; /* 锁死为符合图3的 40px 高度 */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 改为 flex-start 以便利用 margin 精准定位间距 */
  margin-right: 0px !important; /* 彻底清除右边距，满足 340px 的物理几何 */
  flex-shrink: 0;
  padding-left: 0 !important; /* 确保首个 Logo 左侧边缘与顶栏完美对齐 */
  user-select: none;
  box-sizing: border-box;
}

/* 1. 优易慧采 Logo (锁定 127*40 物理尺寸) */
.logo-hucai {
  min-width: 127px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 27px;
  font-weight: 900;
  color: var(--hover-data1); /* 优易经典红色 */
  font-family: 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.5px;
  line-height: 40px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 3. 中国银行真实图片 Logo (物理尺寸锁定为 144px * 40px) */
.logo-boc-img {
  width: 144px !important;
  height: 40px !important;
  min-width: 144px !important;
  max-width: 144px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  object-fit: fill !important; /* 采用完全填充（fill）的方式显示，百分之百铺满 144*40 */
  display: block !important;
  flex-shrink: 0 !important;
  margin-left: 30px !important; /* 精准保留与左侧优易慧采的 30px 物理间距！ */
}

/* 搜索输入框 */
.search-box-wrap {
  margin: 0 24px 0 0;
  flex: 1; /* 弹性容器，自适应宽度 */
  min-width: 0; /* 允许收缩 */
  position: relative; /* 赋予热词以 absolute 定位上下文，消除对齐向下拉扯 */
  height: 42px; /* 高度设为 42px，使整个容器物理文档流与搜索框一致 */
  display: flex;
  align-items: center;
}
.search-bar {
  width: 100%; /* 自适应宽度 */
  height: 42px; /* 锁死为符合图1的 42px 高度 */
  border: 2px solid var(--hover-data1);
  border-radius: 8px;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.input-group {
  padding: 0 12px;
  align-items: center;
  height: 100%;
  position: relative !important;
}
.input-group input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 13.5px;
  color: #333;
}
.input-group input::placeholder {
  color: #a5a5a5;
}

/* 👑 高品质多商品上下滚动占位词样式 */
.search-scroll-swiper {
  position: absolute !important;
  left: 12px !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 40px !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important; /* 穿透鼠标事件，使点击直接穿透给底层的 input 输入框以聚焦 */
  overflow: hidden !important;
  background: transparent !important;
}
.keyword-swiper-item {
  font-size: 13.5px !important;
  color: #a5a5a5 !important; /* 经典高保真灰色占位词颜色 */
  white-space: nowrap !important;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  line-height: 1 !important;
  display: flex;
  align-items: center;
}

/* 👑 向上翻页滑动 Transition 动画 */
.keyword-slide-enter-active,
.keyword-slide-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: absolute !important;
}
.keyword-slide-enter-from {
  opacity: 0 !important;
  transform: translateY(20px) !important; /* 从正下方 20px 滑入 */
}
.keyword-slide-leave-to {
  opacity: 0 !important;
  transform: translateY(-20px) !important; /* 向上滑出 20px 彻底淡出 */
}

.search-btn {
  width: 80px;
  height: 100%;
  background: var(--hover-data1);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 1.5px;
}
.search-btn:hover {
  background: var(--hover-data1);
}

/* 完美高保真热搜词 */
.hot-links {
  position: absolute;
  top: 47px !important; /* 完美在 42px 搜索框的下方 5px 处 (42 + 5 = 47px)，保留 5px 间距，死锁定位！ */
  left: 0;
  font-size: 12px !important; /* 字体大小锁定为 12px */
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2所示 */
  color: #00000073 !important; /* 字体颜色锁定为图2所示的 #00000073 */
  padding-left: 12px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden !important; /* 强制单行且超出隐藏 */
  white-space: nowrap !important; /* 强制单行且超出隐藏 */
}
.hot-links span {
  margin-right: 14px;
  cursor: pointer;
  transition: color 0.2s;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2所示 */
  color: #00000073 !important; /* 字体颜色锁定为图2所示的 #00000073 */
  white-space: nowrap !important; /* 强制每个热词不换行 */
  flex-shrink: 0 !important; /* 保证文字不因拉伸而缩水 */
}
.hot-links span:hover {
  color: var(--hover-data1) !important; /* 悬停保持优易经典红色 */
}

/* ==================== 👑 动作功能区 (AI采购管家 + 我的采购单) ==================== */
.header-actions {
  align-items: center;
  gap: 12px;
  padding-right: 0 !important; /* 确保右侧“我的采购单”右边缘完美对齐“手机慧采” */
}

/* 通用按钮样式 */
.action-btn {
  height: 40px; /* 锁死为符合图1的 40px 高度 */
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1.5px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  box-sizing: border-box;
  position: relative; /* 强行赋予定位上下文，锁定右上角标位置 */
  white-space: nowrap; /* 强行禁止文字折行换行 */
  flex-shrink: 0; /* 强行禁止按钮被挤压变窄 */
}

/* 隐形占位，保持原有的物理排版宽度但完全隐形，防采购单按钮漂移 */
.invisible-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 1. AI采购管家 (圆角淡蓝框线) */
.ai-manager-btn {
  border-color: #2f72ff;
  color: #2f72ff;
}
.ai-manager-btn:hover {
  background: #f0f5ff;
}
.ai-manager-btn .btn-text {
  font-size: 13.5px;
  font-weight: bold;
}

/* 亮红色 NEW 胶囊 */
.new-badge {
  position: absolute;
  top: -9px;
  right: -5px;
  background: #ff2b2b;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 6px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(255, 43, 43, 0.3);
  transform: scale(0.95);
  font-family: 'Arial', sans-serif;
}

/* 2. 我的采购单 (带小推车和气泡数1) */
.my-cart-btn {
  border-color: #d9d9d9;
  color: #333;
}
.my-cart-btn:hover {
  border-color: var(--hover-data1);
  color: var(--hover-data1);
}
.my-cart-btn .cart-icon {
  margin-right: 6px;
  flex-shrink: 0;
}
.my-cart-btn .btn-text {
  font-size: 13.5px;
  font-weight: 500;
}

/* 红色购物车计数气泡 */
.cart-count-badge {
  position: absolute;
  top: -10px; /* 随着气泡变大，微调 top 偏移 */
  right: -10px; /* 随着气泡变大，微调 right 偏移 */
  background: var(--hover-data1);
  color: #ffffff;
  font-size: 13px; /* 调大数字 */
  font-weight: normal; /* 彻底去除加粗，不要加粗 */
  width: 20px; /* 圆圈加大到 20px */
  height: 20px; /* 圆圈加大到 20px */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  /* box-shadow: 0 2px 4px rgba(255, 43, 43, 0.3); */
  font-family: 'Arial', sans-serif;
  pointer-events: none; /* 保证悬停在红点上依然完美触发按钮 Hover */
  z-index: 10;
}
</style>