<template>
  <div
    style="display: flex;align-items: center;justify-content: center;border:1px solid red;width: 100%;max-width: 1400px;">

      <img style="width: 180px;height: 60px;padding-right: 20px;" src="https://www.kaiyuancloud.cn/idfile?path=logo_ncmatch.png" alt="">
    <div
      style="min-width:800px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: space-between;">

      <!-- 中间搜索区域 -->
      <div class="search-section" style="position: relative;margin: 0 20px;">
        <div class="search-bar">
          <input v-model="searchKeyword" type="text" class="search-input" placeholder="搜你想搜...">

          <button class="search-btn" @click="handleSearch">搜索</button>
        </div>
   

        <!-- 热搜关键词 -->
        <div class="hot-search">
          <a v-for="keyword in hotSearchKeywords" :key="keyword" href="#" class="hot-keyword">
            {{ keyword }}
          </a>
        </div>
      </div>
      <!-- position: absolute;right: -150px;top: 0px; -->
      <span
          style="height: 44px;line-height: 44px;border-radius: 8px;border:1px solid #275AFF; color: #275AFF;font-size: 18px;font-weight: 500;padding: 0 20px;z-index: 10;display: flex;align-items: center;gap: 10px;">
          <img style="width: 24px;height: 24px;" src="../mainPage/img/robot.svg" alt="">
          NC AI</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data() {
    return {
      hotSearchKeywords: [
        '昆仑芯-P800',
        '天垓-150',
        '4090',
        '云服务器-GPU',
        '人脸识别',
        'SDWAN',
        '互联网专线',
        'DCI',
        'AI专线',
        '对象存储',
        '智慧医疗',
        '智慧客服',
        'A800',
        'A100',
        '910B'
      ],
      hotMenuList: [
        {
          id: "hot",
          name: "热门推荐",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png")
        },
        {
          id: "hlzx",
          name: "互联网专线",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "SDWAN",
          name: "SDWAN",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "DCI",
          name: "DCI",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        },
        {
          id: "AI",
          name: "AI专线",
          icon: require("../../newImg/niu.png"),
          activeIcon: require("../../newImg/niuActive.png"),
        }
      ],
    }
  }
}
</script>

<style scoped lang="scss">
.search-section {
  border: 1px solid red;
  flex: 1;
  min-width: 850px;
  .search-bar {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #3f68d8;
    border-radius: 4px;
    overflow: hidden;

    .search-input {
      flex: 1;
      padding: 12px 15px;
      border: none;
      outline: none;
      font-size: 14px;
    }

    .camera-icon {
      padding: 0 10px;
      color: #666;
      cursor: pointer;
    }

    .search-btn {
      background: #0864dd;
      color: white;
      border: none;
      padding: 12px 20px;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background: #173ad4;
      }
    }
  }

  .hot-search {
    margin-top: 8px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

    .hot-keyword {
      &:nth-child(-n+3) {
        color: #e1251b;
      }

      color: #666;
      text-decoration: none;
      font-size: 12px;

      &:hover {
        color: #e1251b;
      }
    }
  }
}

@media (max-width: 768px) {
  .search-section {
    width: 100%;
  }
}
</style>