fix:修改下拉框样式

ZhangXianQiang

2024-03-08 751c33d47a185b80596e9dc37938a43e56bc3ca8

 src/views/daoAnOffice/right/analysis/index.vue

@@ -15,7 +15,7 @@
      <div class="charts-container">
        <div id="analysisChart" ref="analysisChart"></div>
        <div class="type-select-container" v-show="isShowSelect">
          <el-select v-model="typeValue" class="select-style" @change="setConfig">
          <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.name" />
          </el-select>
        </div>
@@ -48,6 +48,7 @@
  { itemIndex: 2, name: '街道统计', isActive: false },
]);

// 柱状图数据
const testData = ref([
  { name: '奎光塔街道', state1: 1400, state2: 3533, state3: 2316 },
  { name: '蒲阳街道', state1: 1820, state2: 4281, state3: 3064 },
@@ -60,6 +61,7 @@
  { name: '灌口街道', state1: 972, state2: 2124, state3: 1500 },
]);

// 折线数据
const testData1 = ref([
  {
    name: '都江堰市',
@@ -112,6 +114,8 @@
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999, '2023-6': 61, '2023-7': 12}
  },
]);

// 当前选项
let acitveData = ref(testData1.value[0]);


@@ -404,6 +408,7 @@
}


// 颜色
const getColor = (index) => {
  let colorList = ['#00a8d9', '#cfb249', '#2bb06d'];
  return colorList[index % colorList.length];
@@ -475,3 +480,30 @@
  }
}
</style>

<style lang="scss">

.el-popper {
  background-color: rgba(21, 56, 105, 0.8) !important;
  border-color: transparent  !important;
}
.el-popper.is-light .el-popper__arrow::before {
  background-color: rgba(21, 56, 105, 0.8) !important;
  border-color: transparent  !important;
}
.el-scrollbar__view {
  padding: 0 !important;
}
.el-select-dropdown__item {
  color: #5B83BD;
}

.el-select-dropdown__wrap {
  padding: 0 !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #203f64 !important;
}
</style>