xw_admin/src/views/home/search/index.vue
2024-10-17 23:37:07 +08:00

74 lines
1.6 KiB
Vue

<template>
<el-container class="searchBox">
<el-header class="searchHeader">
<div class="searchHeaderBack">
<el-row style="width: 100%" :gutter="24" justify="center">
<el-col :span="10" :lg="8" :sm="10">
<el-input class="searchInput" type="text" size="large">
<template #prepend>
<el-dropdown>
<span class="el-dropdown-link">
维保工单 <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a">维保工单</el-dropdown-item>
<el-dropdown-item command="b">维修工单</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template #append>
<div class="searchBtn">
<span class="name">搜索</span>
<el-icon class="icon"><el-icon-Search/></el-icon>
</div>
</template>
</el-input>
</el-col>
</el-row>
</div>
</el-header>
<el-main>
7889
</el-main>
</el-container>
</template>
<script>
export default {
name: "",
data(){
return{
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped lang="scss">
.searchHeader{
padding: 0;
margin: 0;
height: 68px;
background: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/search_back.png) no-repeat;
background-size: cover;
position: relative;
}
.searchHeaderBack{
height: 100%;width: 100%;
padding: 0;
background: rgba(231,243,255,0.4);
position: absolute;left: 0;top: 0;z-index: 10;
display: flex;align-items: center;justify-content: center;
}
</style>