数据管理中心

龚焕茏

2024-03-20 eaa6e8cc48e53d2d3a5fb3cf4e2a01160f6e75c7

 src/views/screen/components/select-item/index.vue

@@ -1,15 +1,92 @@
<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 {
    
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>