<template>
  <div class="app-container">
    <el-row :gutter="16">
      <!-- 左侧省份导航 -->
      <el-col :span="6">
        <el-card shadow="never">
          <template #header>
            <div class="card-header"><span>省份选择</span></div>
          </template>
          <div class="province-list">
            <div
              v-for="p in provinces"
              :key="p.value"
              class="province-item"
              :class="{ active: currentProvince === p.value }"
              @click="selectProvince(p.value)"
            >
              {{ p.label }}
            </div>
          </div>
        </el-card>

        <el-card shadow="never" style="margin-top: 16px">
          <template #header>
            <div class="card-header"><span>监测类别</span></div>
          </template>
          <div class="category-list">
            <div
              v-for="(c, idx) in categories"
              :key="idx"
              class="category-item"
              :class="{ active: currentCategory === idx }"
              @click="selectCategory(idx)"
            >
              {{ c.label }}
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧数据表格 -->
      <el-col :span="18">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>{{ currentProvinceLabel }} - {{ currentCategoryLabel }}</span>
              <el-tag type="danger" size="small">实时监测</el-tag>
            </div>
          </template>
          <el-table v-loading="loading" :data="list" stripe border style="width: 100%">
            <el-table-column prop="year" label="年份" width="80" fixed />
            <el-table-column
              v-for="col in currentColumns"
              :key="col.prop"
              :prop="col.prop"
              :label="col.label"
              :width="col.width || 140"
              show-overflow-tooltip
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Wry">
import { getWryList } from '@/api/slgc/wry/index'

// 省份列表
const provinces = [
  { label: '安徽', value: '安徽省' },
  { label: '福建', value: '福建省' },
  { label: '江苏', value: '江苏省' },
  { label: '上海', value: '上海市' },
  { label: '浙江', value: '浙江省' }
]

// 15个监测类别及其动态列定义
const categories = [
  // 01 主要污染物排放情况 (28 fields)
  {
    label: '主要污染物排放情况',
    columns: [
      { prop: 'f1', label: '废水排放总量', width: 160 },
      { prop: 'f2', label: '工业废水排放总量', width: 160 },
      { prop: 'f3', label: '生活污水排放总量', width: 160 },
      { prop: 'f4', label: '集中式治理设施污水排放量', width: 190 },
      { prop: 'f5', label: '化学需氧量(COD)排放总量', width: 200 },
      { prop: 'f6', label: '工业废水中COD', width: 160 },
      { prop: 'f7', label: '农业污水中COD', width: 160 },
      { prop: 'f8', label: '生活污水中COD', width: 160 },
      { prop: 'f9', label: '集中式治理设施污水中COD', width: 200 },
      { prop: 'f10', label: '氨氮排放总量', width: 160 },
      { prop: 'f11', label: '工业废水中氨氮', width: 160 },
      { prop: 'f12', label: '农业污水中氨氮', width: 160 },
      { prop: 'f13', label: '生活污水中氨氮', width: 160 },
      { prop: 'f14', label: '集中式治理设施污水中氨氮', width: 200 },
      { prop: 'f15', label: '二氧化硫排放总量', width: 170 },
      { prop: 'f16', label: '工业废气中二氧化硫', width: 170 },
      { prop: 'f17', label: '生活废气中二氧化硫', width: 170 },
      { prop: 'f18', label: '集中式治理设施废气中二氧化硫', width: 210 },
      { prop: 'f19', label: '氮氧化物排放总量', width: 170 },
      { prop: 'f20', label: '工业废气中氮氧化物', width: 170 },
      { prop: 'f21', label: '生活废气中氮氧化物', width: 170 },
      { prop: 'f22', label: '机动车尾气中氮氧化物', width: 180 },
      { prop: 'f23', label: '集中式治理设施废气中氮氧化物', width: 210 },
      { prop: 'f24', label: '烟(粉)尘排放总量', width: 170 },
      { prop: 'f25', label: '工业废气中烟尘', width: 160 },
      { prop: 'f26', label: '生活废气中烟尘', width: 160 },
      { prop: 'f27', label: '机动车尾气中烟尘', width: 170 },
      { prop: 'f28', label: '集中式治理设施废气中烟尘', width: 210 }
    ]
  },
  // 02 工业废水排放及处理情况 (29 fields)
  {
    label: '工业废水排放及处理情况',
    columns: [
      { prop: 'f1', label: '工业废水排放总量', width: 160 },
      { prop: 'f2', label: '直接排入环境的工业废水', width: 190 },
      { prop: 'f3', label: '排入污水处理厂的工业废水', width: 190 },
      { prop: 'f4', label: '工业废水处理量', width: 160 },
      { prop: 'f5', label: '治理设施数量', width: 140 },
      { prop: 'f6', label: '治理设施处理能力', width: 170 },
      { prop: 'f7', label: '治理运行费用', width: 150 },
      { prop: 'f8', label: 'COD产生量', width: 140 },
      { prop: 'f9', label: '氨氮产生量', width: 140 },
      { prop: 'f10', label: '石油类产生量', width: 150 },
      { prop: 'f11', label: '挥发酚产生量', width: 150 },
      { prop: 'f12', label: '氰化物产生量', width: 150 },
      { prop: 'f13', label: '汞产生量', width: 130 },
      { prop: 'f14', label: '镉产生量', width: 130 },
      { prop: 'f15', label: '六价铬产生量', width: 150 },
      { prop: 'f16', label: '总铬产生量', width: 140 },
      { prop: 'f17', label: '铅产生量', width: 130 },
      { prop: 'f18', label: '砷产生量', width: 130 },
      { prop: 'f19', label: 'COD排放量', width: 140 },
      { prop: 'f20', label: '氨氮排放量', width: 140 },
      { prop: 'f21', label: '石油类排放量', width: 150 },
      { prop: 'f22', label: '挥发酚排放量', width: 150 },
      { prop: 'f23', label: '氰化物排放量', width: 150 },
      { prop: 'f24', label: '汞排放量', width: 130 },
      { prop: 'f25', label: '镉排放量', width: 130 },
      { prop: 'f26', label: '六价铬排放量', width: 150 },
      { prop: 'f27', label: '铬排放量', width: 130 },
      { prop: 'f28', label: '铅排放量', width: 130 },
      { prop: 'f29', label: '砷排放量', width: 130 }
    ]
  },
  // 03 工业废气排放及处理情况 (16 fields)
  {
    label: '工业废气排放及处理情况',
    columns: [
      { prop: 'f1', label: '工业废气排放总量', width: 170 },
      { prop: 'f2', label: '二氧化硫排放量', width: 160 },
      { prop: 'f3', label: '氮氧化物排放量', width: 160 },
      { prop: 'f4', label: '烟粉尘排放量', width: 150 },
      { prop: 'f5', label: '二氧化硫产生量', width: 160 },
      { prop: 'f6', label: '氮氧化物产生量', width: 160 },
      { prop: 'f7', label: '烟粉尘产生量', width: 150 },
      { prop: 'f8', label: '治理设施数量', width: 140 },
      { prop: 'f9', label: '脱硫设备数', width: 130 },
      { prop: 'f10', label: '脱硝设备数', width: 130 },
      { prop: 'f11', label: '除尘设备数', width: 130 },
      { prop: 'f12', label: '治理设施处理能力', width: 170 },
      { prop: 'f13', label: '治理运行费用', width: 150 },
      { prop: 'f14', label: '脱硫设施运行费用', width: 170 },
      { prop: 'f15', label: '脱硝设施运行费用', width: 170 },
      { prop: 'f16', label: '除尘设施运行费用', width: 170 }
    ]
  },
  // 04 一般工业固体废物产生及处置利用情况 (6 fields)
  {
    label: '一般工业固体废物产生及处置利用情况',
    columns: [
      { prop: 'f1', label: '产生量', width: 120 },
      { prop: 'f2', label: '综合利用量', width: 140 },
      { prop: 'f3', label: '处置量', width: 120 },
      { prop: 'f4', label: '贮存量', width: 120 },
      { prop: 'f5', label: '倾倒丢弃量', width: 140 },
      { prop: 'f6', label: '综合利用率', width: 140 }
    ]
  },
  // 05 工业危险废物产生及处置利用情况 (5 fields)
  {
    label: '工业危险废物产生及处置利用情况',
    columns: [
      { prop: 'f1', label: '产生量', width: 120 },
      { prop: 'f2', label: '综合利用量', width: 140 },
      { prop: 'f3', label: '贮存量', width: 120 },
      { prop: 'f4', label: '排放量', width: 120 },
      { prop: 'f5', label: '处置利用率', width: 140 }
    ]
  },
  // 06 工业污染防治投资情况 (28 fields)
  {
    label: '工业污染防治投资情况',
    columns: [
      { prop: 'f1', label: '重点调查工业企业单位数', width: 180 },
      { prop: 'f2', label: '当年安排治理项目数', width: 170 },
      { prop: 'f3', label: '废水施工项目数', width: 150 },
      { prop: 'f4', label: '废气施工项目数', width: 150 },
      { prop: 'f5', label: '废气脱硫施工项目数', width: 170 },
      { prop: 'f6', label: '废气脱硝施工项目数', width: 170 },
      { prop: 'f7', label: '固体废物施工项目数', width: 170 },
      { prop: 'f8', label: '治理噪声施工项目数', width: 170 },
      { prop: 'f9', label: '其他施工项目数', width: 150 },
      { prop: 'f10', label: '竣工项目数', width: 140 },
      { prop: 'f11', label: '竣工治理废水', width: 140 },
      { prop: 'f12', label: '竣工治理废气', width: 140 },
      { prop: 'f13', label: '竣工脱硫', width: 120 },
      { prop: 'f14', label: '竣工脱硝', width: 120 },
      { prop: 'f15', label: '竣工治理固体废物', width: 170 },
      { prop: 'f16', label: '竣工治理噪声', width: 140 },
      { prop: 'f17', label: '竣工治理其他', width: 140 },
      { prop: 'f18', label: '治理投资总额', width: 150 },
      { prop: 'f19', label: '治理废水投资', width: 150 },
      { prop: 'f20', label: '治理废气投资', width: 150 },
      { prop: 'f21', label: '脱硫治理投资', width: 150 },
      { prop: 'f22', label: '脱硝治理投资', width: 150 },
      { prop: 'f23', label: '治理固体废物投资', width: 170 },
      { prop: 'f24', label: '治理噪声投资', width: 150 },
      { prop: 'f25', label: '治理其他投资', width: 150 },
      { prop: 'f26', label: '新增废水处理能力', width: 170 },
      { prop: 'f27', label: '新增废气处理能力', width: 170 },
      { prop: 'f28', label: '新增固体废物处理能力', width: 190 }
    ]
  },
  // 07 农业污染排放情况 (23 fields)
  {
    label: '农业污染排放情况',
    columns: [
      { prop: 'f1', label: '农业污水中COD排放量', width: 180 },
      { prop: 'f2', label: '水产养殖COD', width: 140 },
      { prop: 'f3', label: '畜禽养殖业COD', width: 150 },
      { prop: 'f4', label: '规模化畜禽养殖场COD', width: 180 },
      { prop: 'f5', label: '畜禽养殖专业户COD', width: 170 },
      { prop: 'f6', label: '农业污水中氨氮排放量', width: 180 },
      { prop: 'f7', label: '种植业氨氮', width: 130 },
      { prop: 'f8', label: '水产养殖氨氮', width: 140 },
      { prop: 'f9', label: '畜禽养殖业氨氮', width: 150 },
      { prop: 'f10', label: '规模化畜禽养殖场氨氮', width: 180 },
      { prop: 'f11', label: '畜禽养殖专业户氨氮', width: 170 },
      { prop: 'f12', label: '农业污水中总氮排放量', width: 180 },
      { prop: 'f13', label: '种植业总氮', width: 130 },
      { prop: 'f14', label: '水产养殖总氮', width: 140 },
      { prop: 'f15', label: '畜禽养殖业总氮', width: 150 },
      { prop: 'f16', label: '规模化畜禽养殖场总氮', width: 180 },
      { prop: 'f17', label: '畜禽养殖专业户总氮', width: 170 },
      { prop: 'f18', label: '农业污水中总磷排放量', width: 180 },
      { prop: 'f19', label: '种植业总磷', width: 130 },
      { prop: 'f20', label: '水产养殖总磷', width: 140 },
      { prop: 'f21', label: '畜禽养殖业总磷', width: 150 },
      { prop: 'f22', label: '规模化畜禽养殖场总磷', width: 180 },
      { prop: 'f23', label: '畜禽养殖专业户总磷', width: 170 }
    ]
  },
  // 08 城镇生活污染排放及处理情况 (13 fields)
  {
    label: '城镇生活污染排放及处理情况',
    columns: [
      { prop: 'f1', label: '城镇人口数', width: 140 },
      { prop: 'f2', label: '城镇煤炭消费总量', width: 170 },
      { prop: 'f3', label: '城市生活用水总量', width: 170 },
      { prop: 'f4', label: '居民家庭用水', width: 150 },
      { prop: 'f5', label: '公共服务用水', width: 150 },
      { prop: 'f6', label: '城镇生活污水排放量', width: 180 },
      { prop: 'f7', label: 'COD产生量', width: 140 },
      { prop: 'f8', label: '氨氮产生量', width: 140 },
      { prop: 'f9', label: 'COD排放量', width: 140 },
      { prop: 'f10', label: '氨氮排放量', width: 140 },
      { prop: 'f11', label: '二氧化硫排放量', width: 160 },
      { prop: 'f12', label: '氮氧化物排放量', width: 160 },
      { prop: 'f13', label: '烟尘排放量', width: 140 }
    ]
  },
  // 09 城镇污水处理情况 (24 fields)
  {
    label: '城镇污水处理情况',
    columns: [
      { prop: 'f1', label: '污水处理厂座数', width: 150 },
      { prop: 'f2', label: '设计处理能力', width: 150 },
      { prop: 'f3', label: '治理运行费用', width: 150 },
      { prop: 'f4', label: '固定资产投资完成额', width: 180 },
      { prop: 'f5', label: '新增固定资产', width: 140 },
      { prop: 'f6', label: '污水处理量', width: 140 },
      { prop: 'f7', label: '污水再生利用量', width: 160 },
      { prop: 'f8', label: '工业生产再生利用量', width: 180 },
      { prop: 'f9', label: '市政用水再生利用量', width: 180 },
      { prop: 'f10', label: '景观用水再生利用量', width: 180 },
      { prop: 'f11', label: '污泥产生量', width: 140 },
      { prop: 'f12', label: '污泥处置量', width: 140 },
      { prop: 'f13', label: '土地利用处置量', width: 160 },
      { prop: 'f14', label: '卫生填埋处置量', width: 160 },
      { prop: 'f15', label: '建筑材料利用处置量', width: 180 },
      { prop: 'f16', label: '焚烧处理处置量', width: 160 },
      { prop: 'f17', label: '污泥排放量', width: 140 },
      { prop: 'f18', label: 'COD去除量', width: 140 },
      { prop: 'f19', label: '氨氮去除量', width: 140 },
      { prop: 'f20', label: '石油类去除量', width: 150 },
      { prop: 'f21', label: '总氨去除量', width: 140 },
      { prop: 'f22', label: '总磷去除量', width: 140 },
      { prop: 'f23', label: '挥发酚去除量', width: 150 },
      { prop: 'f24', label: '氰化物去除量', width: 150 }
    ]
  },
  // 10 生活垃圾处理情况 (19 fields)
  {
    label: '生活垃圾处理情况',
    columns: [
      { prop: 'f1', label: '无害化处理厂数', width: 150 },
      { prop: 'f2', label: '治理运行费用', width: 150 },
      { prop: 'f3', label: '固定资产投资完成额', width: 180 },
      { prop: 'f4', label: '新增固定资产', width: 140 },
      { prop: 'f5', label: '渗滤液COD排放量', width: 170 },
      { prop: 'f6', label: '渗滤液氨氮排放量', width: 170 },
      { prop: 'f7', label: '渗滤液石油类排放量', width: 180 },
      { prop: 'f8', label: '渗滤液总磷排放量', width: 170 },
      { prop: 'f9', label: '渗滤液挥发酚排放量', width: 180 },
      { prop: 'f10', label: '渗滤液氰化物排放量', width: 180 },
      { prop: 'f11', label: '渗滤液汞排放量', width: 170 },
      { prop: 'f12', label: '渗滤液镉排放量', width: 170 },
      { prop: 'f13', label: '渗滤液六价铬排放量', width: 180 },
      { prop: 'f14', label: '渗滤液总铬排放量', width: 170 },
      { prop: 'f15', label: '渗滤液铅排放量', width: 170 },
      { prop: 'f16', label: '渗滤液砷排放量', width: 170 },
      { prop: 'f17', label: '焚烧废气二氧化硫排放量', width: 200 },
      { prop: 'f18', label: '焚烧废气氮氧化物排放量', width: 200 },
      { prop: 'f19', label: '焚烧废气烟尘排放量', width: 190 }
    ]
  },
  // 11 危险(医疗)废物集中处置情况 (26 fields)
  {
    label: '危险(医疗)废物集中处置情况',
    columns: [
      { prop: 'f1', label: '危险废物集中处置厂数', width: 180 },
      { prop: 'f2', label: '医疗废物集中处置厂数', width: 180 },
      { prop: 'f3', label: '治理运行费用', width: 150 },
      { prop: 'f4', label: '固定资产投资完成额', width: 180 },
      { prop: 'f5', label: '新增固定资产', width: 140 },
      { prop: 'f6', label: '治理设施处理能力', width: 170 },
      { prop: 'f7', label: '危险废物处置量', width: 160 },
      { prop: 'f8', label: '工业危险废物处置量', width: 180 },
      { prop: 'f9', label: '医疗废物处置量', width: 160 },
      { prop: 'f10', label: '其他危险废物处置量', width: 180 },
      { prop: 'f11', label: '危险废物综合利用量', width: 180 },
      { prop: 'f12', label: '渗滤液COD排放量', width: 170 },
      { prop: 'f13', label: '渗滤液氨氮排放量', width: 170 },
      { prop: 'f14', label: '渗滤液石油类排放量', width: 180 },
      { prop: 'f15', label: '渗滤液总磷排放量', width: 170 },
      { prop: 'f16', label: '渗滤液挥发酚排放量', width: 180 },
      { prop: 'f17', label: '渗滤液氰化物排放量', width: 180 },
      { prop: 'f18', label: '渗滤液汞排放量', width: 170 },
      { prop: 'f19', label: '渗滤液镉排放量', width: 170 },
      { prop: 'f20', label: '渗滤液六价铬排放量', width: 180 },
      { prop: 'f21', label: '渗滤液总铬排放量', width: 170 },
      { prop: 'f22', label: '渗滤液铅排放量', width: 170 },
      { prop: 'f23', label: '渗滤液砷排放量', width: 170 },
      { prop: 'f24', label: '焚烧废气二氧化硫排放量', width: 200 },
      { prop: 'f25', label: '焚烧废气氮氧化物排放量', width: 200 },
      { prop: 'f26', label: '焚烧废气烟尘排放量', width: 190 }
    ]
  },
  // 12 环境监测情况 (22 fields)
  {
    label: '环境监测情况',
    columns: [
      { prop: 'f1', label: '环境监测用房面积', width: 170 },
      { prop: 'f2', label: '环境监测业务经费', width: 170 },
      { prop: 'f3', label: '仪器设备台套数', width: 160 },
      { prop: 'f4', label: '仪器设备原值总值', width: 170 },
      { prop: 'f5', label: '环境空气监测点位数', width: 170 },
      { prop: 'f6', label: '国控监测点位数', width: 160 },
      { prop: 'f7', label: '酸雨监测点位数', width: 150 },
      { prop: 'f8', label: '沙尘天气监测点位数', width: 170 },
      { prop: 'f9', label: '地表水水质监测断面数', width: 180 },
      { prop: 'f10', label: '国控断面数', width: 140 },
      { prop: 'f11', label: '饮用水水源地监测点位数', width: 190 },
      { prop: 'f12', label: '地表水监测点位数', width: 170 },
      { prop: 'f13', label: '地下水监测点位数', width: 170 },
      { prop: 'f14', label: '近岸海域监测点位数', width: 180 },
      { prop: 'f15', label: '近岸海域环境功能区点位数', width: 200 },
      { prop: 'f16', label: '近岸海域环境质量点位数', width: 200 },
      { prop: 'f17', label: '环境噪声监测点位数', width: 170 },
      { prop: 'f18', label: '区域环境噪声监测点位数', width: 190 },
      { prop: 'f19', label: '道路交通噪声监测点位数', width: 190 },
      { prop: 'f20', label: '功能区环境噪声监测点位数', width: 200 },
      { prop: 'f21', label: '生态监测点位数', width: 150 },
      { prop: 'f22', label: '污染源监督性监测重点企业数', width: 210 }
    ]
  },
  // 13 污染源自动监控情况 (7 fields)
  {
    label: '污染源自动监控情况',
    columns: [
      { prop: 'f1', label: '已实施自动监控的国家重点监控企业数', width: 260 },
      { prop: 'f2', label: '水排放口数', width: 140 },
      { prop: 'f3', label: '气排放口数', width: 140 },
      { prop: 'f4', label: 'COD监控设备与环保部门稳定联网数', width: 260 },
      { prop: 'f5', label: 'NH3-N监控设备稳定联网数', width: 220 },
      { prop: 'f6', label: 'SO2监控设备稳定联网数', width: 210 },
      { prop: 'f7', label: 'NOx监控设备稳定联网数', width: 210 }
    ]
  },
  // 14 环境影响评价 (6 fields)
  {
    label: '环境影响评价',
    columns: [
      { prop: 'f1', label: '审批的项目投资总额', width: 170 },
      { prop: 'f2', label: '审批的建设项目环保投资总额', width: 210 },
      { prop: 'f3', label: '审批的环评文件数量', width: 170 },
      { prop: 'f4', label: '编制报告书的项目数量', width: 180 },
      { prop: 'f5', label: '填报报告表的项目数量', width: 180 },
      { prop: 'f6', label: '编制登记表的项目数量', width: 180 }
    ]
  },
  // 15 突发环境事件 (4 fields)
  {
    label: '突发环境事件',
    columns: [
      { prop: 'f1', label: '突发环境事件次数', width: 170 },
      { prop: 'f2', label: '重大突发环境事件次数', width: 180 },
      { prop: 'f3', label: '较大突发环境事件次数', width: 180 },
      { prop: 'f4', label: '一般突发环境事件次数', width: 180 }
    ]
  }
]

const loading = ref(false)
const list = ref([])
const total = ref(0)
const currentProvince = ref('安徽省')
const currentCategory = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  province: '安徽省',
  category: 1
})

const currentProvinceLabel = computed(() => {
  const found = provinces.find(p => p.value === currentProvince.value)
  return found ? found.label : ''
})

const currentCategoryLabel = computed(() => {
  return categories[currentCategory.value]?.label || ''
})

const currentColumns = computed(() => {
  return categories[currentCategory.value]?.columns || []
})

function selectProvince(province) {
  currentProvince.value = province
  queryParams.province = province
  queryParams.pageNum = 1
  getList()
}

function selectCategory(index) {
  currentCategory.value = index
  queryParams.category = index + 1
  queryParams.pageNum = 1
  getList()
}

function getList() {
  loading.value = true
  getWryList(queryParams).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => {
    list.value = []
    total.value = 0
    loading.value = false
  })
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.card-header {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.province-list {
  display: flex;
  flex-direction: column;
}

.province-item {
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  color: #606266;
  font-size: 14px;
}

.province-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.province-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 600;
}

.category-list {
  display: flex;
  flex-direction: column;
}

.category-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  color: #606266;
  font-size: 13px;
  line-height: 1.6;
}

.category-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.category-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 600;
}
</style>
