<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 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>
|
|
<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>
|
