<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 选中逻辑
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}


const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

</script>

<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item >
      <img
          src="@/assets/logo.svg"
          alt="飞利信logo"
          class="logo"
      />
    </el-menu-item>
    <el-menu-item index="0">核心技术</el-menu-item>
    <el-menu-item index="1">产品展示</el-menu-item>
    <el-menu-item index="2">解决方案</el-menu-item>
    <el-menu-item index="3">服务交流</el-menu-item>
    <el-menu-item index="4">关于我们</el-menu-item>
    <el-menu-item>返回官网</el-menu-item>
    <el-menu-item>
      <el-input
          v-model="input1"
          :style="{
              '--el-input-border-radius': '35px',
              '--el-input-bg-color': '#FFFFFF57',
              'width':'206px',
              'height':'46px',
              'font-size':'18px',

          }"
          class="el-input"
          size="large"
          placeholder="关键词搜索"
          :suffix-icon="Search"
      />
    </el-menu-item>
    <el-menu-item>
      <div class="person">
        <el-avatar :size="26" :src="circleUrl" />
        <span>未登录</span>
      </div>
    </el-menu-item>

  </el-menu>
</template>

<style scoped lang="less">
.el-menu-demo{
  height: 80px;
  width: 100%;
  background-color:#FFFFFF80;
  max-width: 1920px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  font-size:18px;
  .logo{
    width: 131.63px;
    height: 42.25px;
  }
  .person{
    display: flex;
    align-items: center;
    span{
      margin-left: 16px;
    }
  }
 border-bottom: none !important;
  .el-input{
    :deep(.el-icon svg){
      height:1.1em;
      width:1.1em;
    }
  }

    /* 移除所有默认边框 */
    .el-menu-item {
      border-bottom: none !important;
      --el-menu-hover-bg-color:#FFFFFF80;
      &:hover{
        background-color: #FFFFFF80 !important;
      }
    }
    /* 创建自定义激活指示器 */
    .el-menu-item.is-active {
      position: relative;
      --el-menu-active-color:#333333;
      --el-menu-hover-bg-color:#FFFFFF80;

      /* 使用 transform 精确控制位置和长度 */
      &::before {
        content: '';
        position: absolute;
        bottom: 18px; /* 控制距离：值越小越靠近文字 */
        left: 0;
        width: 100%;
        height: 3px;
        background: #4353FF;
        border-radius: 2px;

        /* 关键：scaleX 控制长度，0.3 表示30% */
        transform: scaleX(0.3);
        transform-origin: center bottom;
        transition: transform 0.3s ease, bottom 0.3s ease;
      }

      &:hover::before {
        transform: scaleX(0.7);
        //background: #4353FF;
      }
    }

}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
  margin-left:160px;
}


</style>

