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-select__popper {
margin-top: -12px !important;
background: #072247 !important;
border: 1px solid #0F82AF !important;
.el-dropdown-menu__item:not(.is-disabled):focus {
background-color: transparent !important;
}
.el-popper {
max-width: 200px !important;
box-sizing: border-box;
}
.el-popper__arrow::before {
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 {
.el-select-dropdown {
width: 200px !important;
}

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

@@ -99,21 +99,24 @@
</el-radio-group>
</el-form-item>
<el-form-item label="选择隧道" v-if="form.roleId>3">
<el-select
v-model="form.tunnelList"
multiple
filterable
clearable
placeholder="请选择隧道"
:fit-input-width="true"
>
<el-option
v-for="item in tunnelList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div class="user-select">
<el-select
v-model="form.tunnelList"
multiple
filterable
clearable
placeholder="请选择隧道"
:fit-input-width="true"
:teleported="false"
>
<el-option
v-for="item in tunnelList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</el-form-item>
</el-form>
<template #footer>
@@ -331,7 +334,61 @@ const handleSelect = async (selection, row) => {
}
}
</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">
:deep(.el-input .el-input__password) {
font-size: 60px;
@@ -357,10 +414,7 @@ const handleSelect = async (selection, row) => {
display: none
}
:deep(.el-select-dropdown__item:hover) {
background-color: #064B66 !important;
width: 137px !important;
}
:deep(.el-radio-group) {
margin-top: 10px;
@@ -527,20 +581,20 @@ const handleSelect = async (selection, row) => {
color: #FFFFFF;
}
:deep(.el-input__wrapper) {
width: 300px;
height: 70px;
border-radius: 6px;
border: 1px solid #05FEFF;
background-color: transparent;
font-size: 38px;
.el-input__inner {
height: 70px;
line-height: 70px;
color: #FFFFFF;
}
}
//:deep(.el-input__wrapper) {
// width: 300px;
// height: 70px;
// border-radius: 6px;
// border: 1px solid #05FEFF;
// background-color: transparent;
// font-size: 38px;
//
// .el-input__inner {
// height: 70px;
// line-height: 70px;
// color: #FFFFFF;
// }
//}
}
}