<template>
|
<div class="select-container">
|
<div class="type-select">
|
<div class="select-label">数据源</div>
|
<el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
|
<el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.value" />
|
</el-select>
|
</div>
|
|
<div class="date-select">
|
<div class="select-label">日期</div>
|
<el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
|
end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setConfig" />
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
typeValue: 1,
|
dateValue: new Date(),
|
testData1: [
|
{
|
name: '省厅数据',
|
value: 1
|
},
|
{
|
name: '市局数据',
|
value: 2
|
},
|
{
|
name: '公安部数据',
|
value: 3
|
}
|
]
|
}
|
},
|
methods: {
|
setConfig() {
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.select-container {
|
position: absolute;
|
top: 40px;
|
left: 20px;
|
display: flex;
|
align-items: center;
|
|
.select-label {
|
font-size: 20px;
|
margin-right: 10px;
|
color: #2375f0;
|
flex-shrink: 0;
|
}
|
|
.type-select {
|
display: flex;
|
align-items: center;
|
margin-right: 20px;
|
width: 240px;
|
}
|
|
.date-select {
|
display: flex;
|
align-items: center;
|
width: 320px;
|
}
|
}
|
::v-deep .el-input__inner {
|
background: rgba(67, 102, 155, 0.4) !important;
|
color: #4481DD;
|
border-color: #4481DD !important;
|
}
|
|
::v-deep .date-select .el-range-input {
|
background-color: transparent !important;
|
color: #4481DD;
|
}
|
::v-deep .date-select .el-date-editor .el-range-separator {
|
color: #4481DD !important;
|
}
|
|
|
</style>
|
