yoe-shop-web/src/layout/components/search.vue

<template>
  <!-- 搜索组件 -->
  <div :class="meta.info ? 'search-bos1' : ''" class="search-bos" :style="{ 'background': meta.workbench ? '#F4F4F4' : '#ffffff' }">
    <div class="search-content">
      <img @click="onPath('/')" class="logo logo2" v-if="route.path == '/indexMro'" src="@/assets/images/mro.png" alt="" />
      <img @click="onPath('/')" class="logo logo2" v-else-if="route.path == '/indexFuli'" src="@/assets/images/fuli.png" alt="" />
      <template v-else-if="route.path == '/indexData'">
        <img class="logo logo3" src="@/assets/images/head.png" alt="" @click="onPath('/')" />
        <img class="logo logo4" src="@/assets/images/head2.png" alt="" @click="onPath('/')" />
      </template>
      <template v-else>
        <img @click="onPath('/')" class="logo logo1" src="@/assets/images/head.png" alt="" />
        <div style="width: 34px"></div>
      </template>
      <div class="search-box">
        <div class="search-div flex-row-start">
          <div class="search-input flex-row-center">
            <el-input class="el-input" v-model="input" placeholder="搜索商品、品牌、分类..." @change="onPath('/search?type=1&input=' + input)" />
            <div class="bnt flex-row-center" @click="onPath('/search?type=1&input=' + input)">
              <el-icon color="#ffffff" size="20">
                <Search />
              </el-icon>
            </div>
          </div>

          <div class="cat-bos flex-row-center">
            <el-badge :value="cartCount" v-if="cartCount > 0">
              <img src="@/assets/images/layout/layout4.png" alt="" />
            </el-badge>
            <img v-else src="@/assets/images/layout/layout4.png" alt="" />
            <span @click="onPath('/cart')" class="ml-[15px]">我的购物车</span>
          </div>
        </div>
        <div class="search-text">
          <div
            @click="onPath('/search?type=1&input=' + item.navigationName)"
            v-for="(item, index) in toplabel"
            :key="index"
            :class="{ 'hig': index == 0 }"
          >
            {{ item.navigationName }}
          </div>
        </div>
      </div>
      <img class="code" src="@/assets/images/code.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { cartStore } from '@/store/modules/cart';
import { getSearchTitle } from '@/api/home/index';
const cartStoreData = cartStore();
const cartCount = computed(() => cartStoreData.cartCount);
const input = ref<any>('');
const route = useRoute();
const meta = ref<any>({});
const toplabel = ref<any>([]);
meta.value = route.meta;

watch(route, () => {
  meta.value = route.meta;
  initData();
});

onMounted(() => {
  initData();
});

const initData = () => {
  if (route.path == '/search') {
    input.value = route.query.input;
  }
};

getSearchTitle(1).then((res) => {
  if (res.code == 200) {
    toplabel.value = res.data;
  }
});
</script>

<style lang="scss" scoped>
// 搜索栏
.search-bos {
  width: 100%;
  background-color: #ffffff;

  .search-content {
    width: 100%;
    min-width: 1200px;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    // padding: 0 30px;
  }

  &.search-bos1 {
    .search-content {
      min-width: 1200px;
      max-width: 1200px;
      @media (min-width: 1600px) {
        min-width: 1600px;
        max-width: 1600px;
      }
    }
  }

  .logo {
    cursor: pointer;
    border-radius: 4px;
    &.logo1 {
      width: 170px;
      height: 88px;
      margin-top: 10px;
      margin-right: 30px;
    }
    &.logo2 {
      width: 436px;
      height: 80px;
      margin-top: 10px;
      margin-right: 20px;
    }
    &.logo3 {
      width: 170px;
      height: 88px;
      margin-top: 10px;
      margin-right: 30px;
    }
    &.logo4 {
      width: 185px;
      height: 90px;
      margin-top: 20px;
      margin-right: 30px;
    }
  }

  .search-box {
    flex: 1;
    height: 88px;
    padding-top: 40px;

    .search-div {
      .search-input {
        flex: 1;
        height: 38px;
        border-radius: 3px;
        border: 2px solid #fb2c36;
        padding-right: 4px;
        font-size: 14px;

        .el-input {
          height: 30px;
          width: 100%;
          font-size: 16px;

          :deep(.el-input__wrapper) {
            border: none;
            /* 可选：去除聚焦时的高亮 */
            box-shadow: none;
            outline: none;
          }
        }

        .bnt {
          width: 50px;
          height: 30px;
          background: #e7000b;
          border-radius: 3px;
          font-weight: bold;
          cursor: pointer;
        }
      }

      .cat-bos {
        width: 143px;
        height: 38px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        margin-left: 24px;
        font-size: 14px;
        color: #e7000b;
        cursor: pointer;

        img {
          width: 14px;
          height: 14px;
          margin-top: 2px;
        }
      }
    }

    .search-text {
      font-size: 12px;
      display: flex;
      margin-top: 4px;
      cursor: pointer;

      .hig {
        color: #e7000b;
      }

      div {
        margin-left: 10px;
        &:hover {
          color: #e7000b;
        }
      }
    }
  }

  .code {
    height: 90px;
    width: 90px;
    margin-top: 20px;
    margin-left: 70px;
    // border-radius: 4px;
  }
}
</style>