feat: 查询

罗广辉

2025-03-28 67419bcd1c475c7c40a8023d1f1f15531de57147

feat: 查询

 src/assets/images/home/searchBox/searchBg1.png

 src/assets/images/home/searchBox/searchBg2.png

 src/assets/images/home/searchBox/searchBg3.png

 src/views/Home/Home.vue

@@ -1,22 +1,21 @@
<template>
    <HomeLeft></HomeLeft>
    <!-- <div>中间搜索</div> -->
    <HomeRight></HomeRight>
  <HomeLeft></HomeLeft>
  <!-- <div>中间搜索</div> -->
  <HomeRight></HomeRight>

  <SearchBox />
</template>

<script setup>
import HomeRight from './components/HomeRight/HomeRight.vue';
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import { getAggregation } from '@/views/Home/aggregation';
import SearchBox from '@/views/Home/SearchBox.vue';

onMounted(() => {
  nextTick(() => {
    getAggregation()
  })
})



    getAggregation();
  });
});
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

 src/views/Home/SearchBox.vue

@@ -1,13 +1,127 @@
<script setup>
import { ArrowDown, Search } from '@element-plus/icons-vue';

const input3 = ref('');
const select = ref('');

const value = ref('Option1');

const options = [
  {
    value: 'Option1',
    label: '机巢',
  },
  {
    value: 'Optio44n1',
    label: '事件',
  },
];
</script>

<template>
   <div>
  <div class="searchBox">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

   </div>
      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<style scoped lang="scss">
.searchBox {
  width: 420px;
  height: 43px;
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;

  .el-select {
    width: 130px;
    height: 100%;

    :deep() {
      .el-select__wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 100%;
        padding-left: 20px;
      }

      .el-select__selected-item {
        font-family: Source Han Sans CN, Source Han Sans CN, serif;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }

  .searchInput {
    width: 243px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg1.png') no-repeat center / 100% 100%;
    display: flex;

    .el-input {
      height: 100%;

      :deep() {
        .el-input__wrapper {
          background: transparent;
          border: none;
          box-shadow: none;
          height: 100%;
        }
        .el-input__inner {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 18px;
        }
      }
    }
  }

  .searchBtn {
    width: 67px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg2.png') no-repeat center / 100% 100%;
    cursor: pointer;
  }

  .region {
    width: 0;
    flex-grow: 1;
    background: url('@/assets/images/home/searchBox/searchBg3.png') no-repeat center / 100% 100%;

    :deep() {
      .el-select__wrapper {
        width: 100px;
        padding-left: 30px;
      }
    }
  }
}
</style>