<script setup>
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'
import { user } from '@/store'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
const router = useRouter()
const timeValue = $ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const studentValue = ref('')
const query = $ref({
  area_id: '',
  school_id: '',
  class_id: '',
  user_id: '',
})
let stuList = $ref([])
let areaList = $ref([])
let schoolList = $ref([])
let classList = $ref([])
function areaInit() {
  request({
    baseURL,
    url: '/area/main/index',
    data: {
      upid: '2615',
    },
  }).then((res) => {
    if (res.code == '1')
      areaList = res.data.page_data
  })
}
function selectArea(val) {
  query.school_id = ''
  query.class_id = ''
  query.user_id = ''
  if (val) {
    request({
      baseURL,
      url: '/school/main/index',
      data: {
        upid4: val,
        limit: 9999,
      },
    }).then((res) => {
      if (res.code == '1') {
        schoolList = res.data.page_data
        initData()
      }
    })
  }
  else {
    schoolList = []
  }
}
function selectSchool(val) {
  query.class_id = ''
  query.user_id = ''
  if (val) {
    request({
      baseURL,
      url: '/class/main/index',
      data: {
        schoolid: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1') {
        classList = res.data.page_data
        initData()
      }
    })
  }
  else {
    classList = []
  }
}
function selectClass(val) {
  query.user_id = ''
  if (val) {
    request({
      baseURL,
      url: 'openapi/chart/user_main.php',
      data: {
        sm_id: query.school_id,
        cm_id: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1') {
        stuList = res.data
        initData()
      }
    })
  }
  else {
    stuList = []
  }
}

if (user.value.user_role_id * 1 >= 3 && user.value.user_role_id * 1 <= 69) {
  areaInit()
}
else if (user.value.user_role_id * 1 === 71) {
  selectArea(user.value.area_info.area_id4)
}
else if (user.value.user_role_id * 1 === 72) {
  selectSchool(user.value.sm_info.sm_id)
}
else if (user.value.user_role_id * 1 <= 75 && user.value.user_role_id * 1 > 72) {
  let classeach = {}
  user.value.cm_info.forEach((item) => {
    classeach = {
      classid: item.cm_id,
      name: item.cm_name,
      school_id: item.sm_id,
    }
    classList.push(classeach)
  })
  query.area_id = user.value.sm_info.area_id3
  query.school_id = user.value.sm_info.sm_id
}
const tableData = [

]
const tableRowClassName = ({ row, rowIndex }) => {
  // console.log(rowIndex%2);
  if (rowIndex % 2 == 0)
    return 'warning-row'

  else
    return 'success-row'
}
const zsdData = {
  xAxis_data: ['知识点1', '知识点2', '知识点3', '知识点4', '知识点5'],
  series_data: [38, 36, 80, 42, 110],
}
const lxtData = {
  xAxis_data: [
    '2022年10月1日',
    '2022年10月2日',
    '2022年10月3日',
    '2022年10月4日',
    '2022年10月5日',
  ],
  series_data: {
    zql: [530, 610, 630, 780, 810],
    cwl: [710, 540, 420, 820, 600],
  },
}

let loading = $ref(false)
let stuCondition = $ref({})
function initData() {
  loading = true
  const data = {
    ...query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    url: '/openapi/chart/student_condition1.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      stuCondition = res.data.student_data

      // TopChartOneData = echarts.init(document.getElementById("TopChartOne"));
      initTopChartOne(stuCondition.zsdData)
      initTopChartTwo(stuCondition.lxtData)
      loading = false
    }
  })
}
/** 第一个图表 */
let TopChartOneData
function initTopChartOne(transData) {
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#133D4A',
          width: 1, // 这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff',
        },
      },
      data: transData.xAxis_data,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true, // 关闭网格线
        lineStyle: {
          color: '#133B4C',
          width: 0.5,
        },
      },
      axisLabel: {
        textStyle: {
          color: '#68D5EA',
        },
      },
    },
    series: [
      {
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: true, // 是否默认展示圆点
        symbol: 'circle', // 设定为实心点
        symbolSize: 8, // 设定实心点的大小
        data: [38, 36, 80, 42, 110],
        itemStyle: {
          color: '#49d0ed',
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 3,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
      },
      {
        type: 'slider',
        showDetail: false,
        start: 0,
        height: 5,
        // width: 5,
        // right: 0, //右边的距离
        bottom: 0, // 下边的距离
        brushSelect: false,
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        borderColor: 'c2c2c2',
        maxValueSpan: 2,
        zoomLock: true,
      },
    ],
  }
  TopChartOneData.setOption(option)
}
/** 第二个图表 */
let TopChartTwoData
function initTopChartTwo(transData) {
  const option = {
    title: {
      text: '(%)',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      x: 'right',
      icon: 'circle',
      itemWidth: 10, // 设置宽度
      itemHeight: 10, // 设置高度
      itemGap: 10, // 设置间距
      data: [
        {
          name: '正确率',
          textStyle: {
            color: '#68d5ea',
          },
        },
        {
          name: '错误率',
          textStyle: {
            color: '#68d5ea',
          },
        },
      ],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#133D4A',
            width: 1, // 这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
        },
        data: transData.xAxis_data,
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true, // 关闭网格线
          lineStyle: {
            color: '#133B4C',
            width: 0.5,
          },
        },
        axisLabel: {
          textStyle: {
            color: '#68D5EA',
          },
        },
      },
    ],
    series: [
      {
        name: '正确率',
        type: 'line',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        showSymbol: true, // 是否默认展示圆点
        symbol: 'circle', // 设定为实心点
        symbolSize: 8, // 设定实心点的大小
        data: transData.series_data.zql,
        itemStyle: {
          color: '#FE8737',
          borderColor: '#ffffff', // 拐点的边框颜色
          borderWidth: 1.5,
        },
        lineStyle: {
          width: 2,
        },
        label: {
          show: false,
          position: 'top',
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255,135,56,0.3)',
            },
            {
              offset: 1,
              color: 'rgba(255,135,56,0)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
      },
      {
        name: '错误率',
        type: 'line',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        showSymbol: true, // 是否默认展示圆点
        symbol: 'circle', // 设定为实心点
        symbolSize: 8, // 设定实心点的大小
        data: transData.series_data.cwl,
        itemStyle: {
          color: '#b479da',
          borderColor: '#000000', // 拐点的边框颜色
          borderWidth: 1.5,
        },
        lineStyle: {
          width: 2,
        },
        label: {
          show: false,
          position: 'top',
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(180,121,218,0.3)',
            },
            {
              offset: 1,
              color: 'rgba(180,121,218,0)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 3,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
      },
      {
        type: 'slider',
        showDetail: false,
        start: 0,
        height: 5,
        // width: 5,
        // right: 0, //右边的距离
        bottom: 0, // 下边的距离
        brushSelect: false,
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        borderColor: 'c2c2c2',
        maxValueSpan: 2,
        zoomLock: true,
      },
    ],
  }
  TopChartTwoData.setOption(option)
}

function resizeEcharts() {
  TopChartOneData.resize()
  TopChartTwoData.resize()
}

onMounted(() => {
  const TopChart = document.getElementById('TopChartOne')
  TopChart.setAttribute('_echarts_instance_', '')
  TopChartOneData = echarts.init(TopChart)

  const TopChartTwo = document.getElementById('TopChartTwo')
  TopChartTwo.setAttribute('_echarts_instance_', '')
  TopChartTwoData = echarts.init(TopChartTwo)

  initData()
  window.addEventListener('resize', resizeEcharts)
})

function handleLinkPrev() {
  router.back()
}
function handleLinkNext() {
  router.push({
    name: 'xsxqbg_two',
    query: {
      ...query,
    },
  })
}
</script>

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    class="xsxqbgOne overflow-hidden"
  >
    <div class="fixedTop bg_top h-5.5vw min-w-1200px w-full flex px-4 pt-2">
      <div class="fixedTop_left flex w-2/5 justify-between">
        <div class="routerLink mr-1 text-sm leading-12">
          <div class="click_routerLink" @click="handleLinkPrev">
            上一页
          </div>
        </div>
        <el-form :inline="true" class="demo-form-inline w-4/5">
          <el-form-item v-if="user.user_role_id * 1 < 71" class="w-1/5">
            <el-select
              v-model="query.area_id"
              class="w-full"
              clearable
              popper-class="el_date_picker_class"
              placeholder="区域"
              @change="selectArea"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 72" class="w-1/5">
            <el-select
              v-model="query.school_id"
              class="w-full"
              popper-class="el_date_picker_class"
              placeholder="学校"
              clearable
              @change="selectSchool"
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/5">
            <el-select
              v-model="query.class_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="班级"
              clearable
              @change="selectClass"
            >
              <el-option
                v-for="s in classList"
                :key="s.classid"
                :value="s.classid"
                :label="s.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/5">
            <el-select
              v-model="query.user_id"
              class="w-full"
              placeholder="学生"
              clearable
              @change="initData"
            >
              <el-option
                v-for="s in stuList"
                :key="s.user_id"
                :value="s.user_id"
                :label="s.user_realname"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <h1 class="text-white text-2vw text-center self-center flex-1">
        学生学情报告1
      </h1>
      <div class="fixedTop_right text_green w-2/5 flex justify-end">
        <el-form :inline="true" class="demo-form-inline w-60">
          <el-form-item>
            <el-date-picker
              v-model="timeValue"
              type="daterange"
              range-separator="-"
              popper-class="el_date_picker_class"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>
        </el-form>
        <div class="routerLink text-sm leading-12">
          <div class="click_routerLink" @click="handleLinkNext">
            下一页
          </div>
        </div>
      </div>
    </div>
    <div class="fixedContent">
      <div class="fixedContent_top">
        <div class="fixedContent_top_left p2v">
          <div class="MY_commonTitle">
            <p>
              作业系统
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <div class="pice_part">
            <el-table
              :data="stuCondition.tableData"
              stripe
              :row-class-name="tableRowClassName"
              style="width: 100%; height: calc(100% - 35px)"
              @header-click="handleHeaderCLick"
            >
              <el-table-column fixed prop="xm" label="姓名" />
              <el-table-column prop="xk" label="学科" />
              <el-table-column prop="jcfl" label="教材分类" />
              <el-table-column
                prop="dtzs"
                label="答题总数（次）"
                width="148"
                :sortable="true"
                :sort-orders="['ascending', 'descending', null]"
              />
              <el-table-column
                prop="zq_num"
                label="正确量（题）"
                width="148"
                sortable
                :sort-orders="['descending', 'ascending', null]"
              />
              <el-table-column prop="ctl" label="错题量（题）" width="148" />
              <el-table-column
                prop="zql"
                label="正确率（%）"
                width="148"
                sortable
                :sort-orders="['descending', 'ascending', null]"
              />
              <el-table-column prop="zsdmc" label="知识点名称" width="148" />
              <el-table-column
                prop="zwqk"
                label="掌握情况（%）"
                width="148"
                sortable
                :sort-orders="['descending', 'ascending', null]"
              />
            </el-table>
          </div>
        </div>
        <div class="fixedContent_top_right p2v relative">
          <div class="MY_commonTitle">
            <p>
              知识点掌握情况
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <div class="relative" style="height: calc(100% - 80px)">
            <div
              id="TopChartOne"
              class="pice_part"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
      <div class="fixedContent_bottom">
        <div class="fixedContent_bottom_left p2v">
          <div class="MY_commonTitle">
            <p>
              练习题正确率
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <div class="relative" style="height: calc(100% - 60px)">
            <div id="TopChartTwo" style="width: 100%; height: 100%" />
          </div>
        </div>

        <div class="fixedContent_bottom_right p2v">
          <div class="MY_commonTitle">
            <p>
              智慧课堂参与情况
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <div class="pice_part">
            <el-table
              :data="stuCondition.tableData_smartClass"
              stripe
              style="width: 100%; height: calc(100% - 30px)"
              :row-class-name="tableRowClassName"
            >
              <el-table-column fixed prop="xm" label="姓名" />
              <el-table-column
                prop="ktyxcs"
                label="课堂预习次数（次）"
                width="148"
              />
              <el-table-column
                prop="yxwccs"
                label="预习完成次数（次）"
                width="148"
              />
              <el-table-column
                prop="yxdcl"
                label="预习达成率（%）"
                width="148"
              />
              <el-table-column
                prop="cylxcs"
                label="参与练习次数（次）"
                width="148"
              />
              <el-table-column
                prop="lxzqcs"
                label="练习正确次数（次）"
                width="148"
              />
              <el-table-column
                prop="solotl"
                label="单选题体量（题）"
                width="148"
              />
              <el-table-column
                prop="multl"
                label="多选题题量（题）"
                width="148"
              />
              <el-table-column
                prop="pdttl"
                label="判断题题量（题）"
                width="148"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="fixedBottom" />
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/el-table.scss";
@use "@/styles/date-picker.scss";
$color_W: #ffffff;
$color_B: #000000;
$color_lightblue: lightblue;
$color_lightgreen: lightgreen;
$alpha_point4: 0.4;

// * {
//   margin: 0;
//   padding: 0;
//   border: 0;
// }

.xsxqbgOne {
  width: 100%;
  // height: 100vh;
  color: $color_W;
  background-color: $color_B;

  .fixedTop {
    // height: 8vh;
    // line-height: 8vh;
    // background-color: rgba($color_lightblue, $alpha_point4);
    // background: url('@/assets/images/banner.png') no-repeat left top;
    // background-size: 100% 100%;
    // box-sizing: border-box;
    // padding: 0 2vh;
  }
  .bg_top {
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/top.png");
    background-size: 100%;
    // background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
    // padding: 2px 6px;
  }
  .routerLink {
    width: 8vw;
    height: 3vw;
    cursor: pointer;
    line-height: 3vw;
    border: 1px solid #00e0db;
    border-radius: 8px;
    color: #00fff4;
    font-family: SourceHanSansCN, SourceHanSansCN-Bold;
    font-weight: 700;
    box-shadow: 0px 1px 39px 0px rgba(0, 255, 244, 0.5) inset;
    .click_routerLink {
      background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
      -webkit-background-clip: text;
      color: transparent;
      font-size: 20px;
      text-align: center;
    }
  }

  .fixedContent {
    box-sizing: border-box;
    padding: 0 2vh;
    height: calc(100% - 125px - 16px);
    // background-color: rgba($color_lightgreen, $alpha_point4);
  }

  .fixedBottom {
    height: 2vh;
    background-color: rgba($color_lightblue, $alpha_point4);
    background: url("@/assets/images/bottomBg.png") no-repeat center bottom;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 2vh;
    margin-top: 2vh;
  }
}

//通用
.arrow {
  position: absolute;
  bottom: 50px;
  left: 100px;
}
.arrow_lxt {
  bottom: 40px;
  left: 30px;
}
.MY_commonTitle {
  text-align: center;
  box-sizing: border-box;
  padding: 2%;

  p {
    font-size: 1.5vw;
    font-family: PingFang SC, PingFang SC-8;
    background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    display: inline-block;
    position: relative;
    padding: 0 8%;
  }

  .bottomLine {
    width: 20%;
    height: 4px;
    background-color: rgba(0, 255, 250, 1);
    border-radius: 3px;
    margin: 2px auto 0 auto;
  }

  .MY_commonLeft {
    width: 2.6vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 13;
  }

  .MY_commonRight {
    width: 2.6vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 13;
  }
}

.p2v {
  box-sizing: border-box;
  padding: 2vh;
}

.pice_part {
  width: 100%;
  height: 80%;
  // height: 350px;
  div {
    margin: 0 auto;
  }
}

:deep(.el-table tr) {
  background-color: rgba(0, 0, 0, 0.1);
}

:deep(.el-table th.el-table__cell) {
  background-color: transparent;
}

:deep(.pice_part) {
  .el-table--fit
    .el-table--striped
    .el-table--scrollable-x
    .el-table--enable-row-hover
    .el-table--enable-row-transition
    el-table
    .el-table--layout-fixed
    .is-scrolling-left {
    background: rgba(102, 255, 255, 0.2);
  }
}

:deep(.el-select .el-input) {
  width: 100%;
  border: 1px solid #00b7b2;
  border-radius: 2px;
  color: #ffffff;
}

:deep(.el-select .el-input__wrapper) {
  background-color: rgba(102, 255, 255, 0.1);
}

:deep(.el-select .el-input__inner) {
  color: #c6d0d6;
}

.fixedTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .fixedTop_left {
    width: 33%;
    display: flex;
  }

  .fixedTop_middle {
    width: 34%;
  }

  .fixedTop_right {
    width: 33%;
    display: flex;
  }

  .preP,
  .nextP {
    width: 33%;
    line-height: 3vw;
    cursor: pointer;
    span {
      padding: 4% 5%;
      background: url("@/assets/images/buttonBG.png") no-repeat center center;
      background-size: 100%;
      font-size: 24px;
      // background-image:linear-gradient(180deg,#c3f8b3, #66ffff 80%);
      // background-clip:text;
      // -webkit-background-clip:text;
      // color: transparent;

      font-family: PingFang SC, PingFang SC-8;
      font-weight: 500;
      text-align: center;
      color: #ecf9e8;
    }
  }

  .nextP {
    text-align: right !important;
  }

  .selectSchool {
    width: 30%;
    margin-right: 5vh;
  }

  .selectStudent {
    width: 30%;
  }

  .mainTitle {
    font-size: 1.6vw;
    font-family: PingFang SC, PingFang SC-6;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 3vw;
    letter-spacing: 4.28px;
  }

  .calar {
    width: 67%;
  }
}

.fixedContent {
  .fixedContent_top {
    width: 100%;
    // height: 42vh;
    height: calc(50% - 12px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2vh;

    .fixedContent_top_left {
      width: 60%;
      height: 100%;
      background: rgba(1, 35, 55, 0.7);
    }

    .fixedContent_top_right {
      width: 38%;
      height: 100%;
      background: rgba(1, 35, 55, 0.7);
    }
  }

  .fixedContent_bottom {
    width: 100%;
    display: flex;
    height: calc(50% - 12px);
    // height: 42vh;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2vh;

    .fixedContent_bottom_left {
      width: 35%;
      background: rgba(1, 35, 55, 0.7);
    }

    .fixedContent_bottom_right {
      width: 63%;
      background: rgba(1, 35, 55, 0.7);
    }
  }
}
</style>

<style lang="scss">
// 自定义类名就是防止全局修改样式造成样式混乱
.el_date_picker_class {
  background: rgb(24, 24, 24) !important;
  .el-picker-panel {
    background: rgba(102, 255, 255, 0.1) !important;
    color: #fff;
  }
  .in-range {
    color: #000;
  }
  .el-scrollbar {
    background: rgba(102, 255, 255, 0.1) !important;
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.hover {
      color: #000;
    }
  }
}
</style>
