odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁: 修改下拉框样式

Browse Source
This commit is contained in:
邓洁
2024-01-03 17:20:27 +08:00
parent 89c137c7b4
commit 2298b674f4
2 changed files with 90 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/assets/styles/index.scss
View File

@@ -503,60 +503,14 @@ body,
} }
} }
//el-select 下拉框样式 .el-dropdown-menu__item:not(.is-disabled):focus {
.el-select__popper { background-color: transparent !important;
margin-top: -12px !important;
background: #072247 !important;
border: 1px solid #0F82AF !important;
} }
.el-popper {
max-width: 200px !important;
box-sizing: border-box;
}
.el-popper__arrow::before { .el-popper__arrow::before {
display: none; display: none;
} }
.el-select-dropdown {
width: 200px !important;
}
.el-select-dropdown__item {
> span {
color: #FFFFFF;
}
}
.el-select .el-input .el-select__caret {
font-size: 35px !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #064B66 !important;
width: 198px !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #064B66 !important;
width: 200px !important;
}
.el-select-tags-wrapper {
.el-tag {
padding: 28px 20px !important;
font-size: 35px;
.el-icon {
width: 40px;
height: 40px;
font-size: 40px !important;
}
}
}
.current-site { .current-site {
.el-select-dropdown { .el-select-dropdown {
width: 200px !important; width: 200px !important;
} }

120
src/views/user/index.vue
View File

@@ -99,21 +99,24 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="选择隧道" v-if="form.roleId>3"> <el-form-item label="选择隧道" v-if="form.roleId>3">
<el-select <div class="user-select">
v-model="form.tunnelList" <el-select
multiple v-model="form.tunnelList"
filterable multiple
clearable filterable
placeholder="请选择隧道" clearable
:fit-input-width="true" placeholder="请选择隧道"
> :fit-input-width="true"
<el-option :teleported="false"
v-for="item in tunnelList" >
:key="item.value" <el-option
:label="item.label" v-for="item in tunnelList"
:value="item.value" :key="item.value"
/> :label="item.label"
</el-select> :value="item.value"
/>
</el-select>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -331,7 +334,61 @@ const handleSelect = async (selection, row) => {
} }
} }
</script> </script>
<style lang="scss">
.user-select {
.el-input{
min-height: 75px;
height: auto!important;
}
.el-select__popper {
margin-top: -12px !important;
background: #072247 !important;
border: 1px solid #0F82AF !important;
}
.el-popper {
box-sizing: border-box;
}
.el-popper__arrow::before {
display: none;
}
.el-select-dropdown__item {
font-size: 38px !important;
height: 60px !important;
line-height:60px !important;
> span {
color: #FFFFFF;
}
}
.el-select .el-input .el-select__caret {
font-size: 35px !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #064B66 !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #064B66 !important;
}
.el-select-tags-wrapper {
.el-tag {
padding: 28px 20px !important;
font-size: 35px;
.el-icon {
width: 40px;
height: 40px;
font-size: 40px !important;
}
}
}
}
</style>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-input .el-input__password) { :deep(.el-input .el-input__password) {
font-size: 60px; font-size: 60px;
@@ -357,10 +414,7 @@ const handleSelect = async (selection, row) => {
display: none display: none
} }
:deep(.el-select-dropdown__item:hover) {
background-color: #064B66 !important;
width: 137px !important;
}
:deep(.el-radio-group) { :deep(.el-radio-group) {
margin-top: 10px; margin-top: 10px;
@@ -527,20 +581,20 @@ const handleSelect = async (selection, row) => {
color: #FFFFFF; color: #FFFFFF;
} }
:deep(.el-input__wrapper) { //:deep(.el-input__wrapper) {
width: 300px; // width: 300px;
height: 70px; // height: 70px;
border-radius: 6px; // border-radius: 6px;
border: 1px solid #05FEFF; // border: 1px solid #05FEFF;
background-color: transparent; // background-color: transparent;
font-size: 38px; // font-size: 38px;
//
.el-input__inner { // .el-input__inner {
height: 70px; // height: 70px;
line-height: 70px; // line-height: 70px;
color: #FFFFFF; // color: #FFFFFF;
} // }
} //}
} }
} }