<div class="select-switch">
<div class="selectBox">
<!-- <div class="selectBox_left">-->
<!-- <img src="@/assets/location.png" alt="">-->
<!-- </div>-->
<div class="selectBox_right">
<el-select
v-model="selectValue"
class="btn_select"
placeholder="Select"
popper-class="selectStyle"
size="small"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</div>
</div>
<style scoped lang="scss">
.selectBox {
//border-top: 5px solid #3498db; /* 上边框颜色 */
//border-bottom: 1px solid #5aa0bf; /* 下边框颜色 */
//border-radius: 50%; /* 控制椭圆形状的圆角半径 */
//background-color: #182741;
background: url("@/assets/home/select.png") no-repeat;
background-position: center;
background-size: 100% 100%;
flex-direction: row;
//height: 45px;
//width: 120px;
height: 4vh;
width: 7vw;
//margin-right: 22px;
.selectBox_left {
flex-grow: 1;
padding: 10px 0px 10px 15px;
img {
height: 100% !important;
}
}
.selectBox_right {
flex-grow: 2;
padding: 10px 10px 10px 0;
}
:deep(.btn_select) {
.el-input__wrapper {
border: none;
box-shadow: none;
//background-color: #182741;
background-color: transparent;
.el-input__inner {
border: none;
color: #fff;
//font-size: 14px;
font-size: 0.78vw;
box-shadow: none;
position: relative;
left: 40%;
//text-align: center;
//padding-left: 20px
}
.el-input__inner.is-active {
border: none;
box-shadow: none;
}
.el-select__caret.el-icon {
color: #4cb3d5
}
}
.el-input .el-input__wrapper.is-focus {
box-shadow: none !important;
}
.el-input.is-focus .el-input__wrapper {
border: none;
box-shadow: none !important;
}
}
}
</style>
<style lang="scss">
//下拉框背景色
.el-popper.is-light.selectStyle {
z-index: 9999;
//width: 120px;
width: 7vw;
background-color: rgba(7, 24, 55, 1) !important;
border: 1px solid #55cbef !important;
//margin: 0 -29px;
}
//下拉框的链接小方块
.selectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
//background: rgba(0, 136, 255, 0.1) !important;
//border: 1px solid #254277 !important;
border: none !important;
background: none !important;
}
.selectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
//background: #254277 !important;
//border: 1px solid #254277 !important;
border: none !important;
background: none !important;
}
//鼠标移动上去的选中色
.selectStyle {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #174290 !important;
}
//下拉框的文本颜色
.el-select-dropdown__item {
color: #ffffff !important;
}
//选中之后的颜色
.el-select-dropdown__item.selected {
//background: #04499b !important;
color: #02adf6 !important;
}
}
</style>