From 67419bcd1c475c7c40a8023d1f1f15531de57147 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 28 Mar 2025 13:58:38 +0800
Subject: [PATCH] feat: 查询
---
src/assets/images/home/searchBox/searchBg2.png | 0
src/assets/images/home/searchBox/searchBg3.png | 0
src/assets/images/home/searchBox/searchBg1.png | 0
src/views/Home/Home.vue | 21 +++---
src/views/Home/SearchBox.vue | 122 +++++++++++++++++++++++++++++++++++++++-
5 files changed, 128 insertions(+), 15 deletions(-)
diff --git a/src/assets/images/home/searchBox/searchBg1.png b/src/assets/images/home/searchBox/searchBg1.png
new file mode 100644
index 0000000..9d02ed1
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg1.png
Binary files differ
diff --git a/src/assets/images/home/searchBox/searchBg2.png b/src/assets/images/home/searchBox/searchBg2.png
new file mode 100644
index 0000000..983f8c2
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg2.png
Binary files differ
diff --git a/src/assets/images/home/searchBox/searchBg3.png b/src/assets/images/home/searchBox/searchBg3.png
new file mode 100644
index 0000000..e0402f2
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg3.png
Binary files differ
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 8c17d8f..efd6de6 100644
--- a/src/views/Home/Home.vue
+++ b/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>
diff --git a/src/views/Home/SearchBox.vue b/src/views/Home/SearchBox.vue
index aca7698..a5f371d 100644
--- a/src/views/Home/SearchBox.vue
+++ b/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>
--
Gitblit v1.9.3