liuhuayong/edu_manage_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 修复 搜索弹窗样式错误

Browse Source
This commit is contained in:
疯狂的狮子Li 2026-03-27 16:28:14 +08:00
parent 0076f5f6f7
commit eb6827765c
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/layout/components/TopBar/search.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div class="layout-search-dialog"> <div class="layout-search-dialog">
<el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false"> <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false" width="600px" top="12vh">
<template #footer> <div class="layout-search-dialog__content">
<el-autocomplete <el-autocomplete
ref="layoutMenuAutocompleteRef" ref="layoutMenuAutocompleteRef"
v-model="state.menuQuery" v-model="state.menuQuery"
class="layout-search-dialog__autocomplete"
:fetch-suggestions="menuSearch" :fetch-suggestions="menuSearch"
placeholder="搜索" placeholder="搜索"
:fit-input-width="true" :fit-input-width="true"
@ -20,7 +21,7 @@
</div> </div>
</template> </template>
</el-autocomplete> </el-autocomplete>
</template> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -132,27 +133,29 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-search-dialog { .layout-search-dialog {
position: relative;
:deep(.el-dialog) { :deep(.el-dialog) {
padding: 0; border-radius: 14px;
overflow: visible;
.el-dialog__header, .el-dialog__header,
.el-dialog__body { .el-dialog__footer {
display: none; display: none;
} }
.el-dialog__footer { .el-dialog__body {
width: 100%; padding: 20px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -53vh;
} }
} }
:deep(.el-autocomplete) {
width: 560px; &__content {
position: absolute; width: 100%;
top: 150px; }
left: 50%;
transform: translateX(-50%); &__autocomplete {
width: 100%;
}
:deep(.el-input__wrapper) {
min-height: 44px;
border-radius: 10px;
} }
} }
</style> </style>