yudao-web/src/views/screen/compenonts/tabber.vue

<template>
  <section class="flex flex-col flex-items-center gap-24px">
    <section class="tabs-box">
      <section
        :class="['type-item', curTpye == item.value ? 'item-active' : '']"
        v-for="(item, index) in getDictOptions(DICT_TYPE.BIG_VIEW_WEEK)"
        :key="index"
        @click="changeType(item.value)"
      >
        {{ item.label }}
      </section>
    </section>

    <section class="tabs-box">
      <section
        :class="['item', curTab == index ? 'item-active' : '']"
        v-for="(item, index) in tabberList"
        :key="index"
        @click="curTab = index"
        style="padding: 12px 16px"
      >
        {{ item }}
      </section>
    </section>
  </section>
</template>

<script setup lang="ts">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'

const emits = defineEmits(['changeType'])
const tabberList = ref([
  '环境治理专项行动',
  '空气检测平台',
  '环境监测',
  '水质检测平台',
  '土壤检测平台',
  '园区环境综合监管平台'
])
const curTpye = ref(0)

const curTab = ref(0)

const changeType = (value) => {
  curTpye.value = value
  emits('changeType', value)
}

onMounted(() => {
  changeType(getDictOptions(DICT_TYPE.BIG_VIEW_WEEK)[0].value)
})
</script>

<style scoped lang="scss">
.tabs-box {
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  width: fit-content;
  font-size: 12px;
  .item {
    padding: 6px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.2s all;
  }
  .type-item {
    padding: 6px 16px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.2s all;
  }
  .item-active {
    border: 1px solid #56ca00;
    color: #56ca00;
    background: linear-gradient(180deg, rgba(94, 205, 13, 0.17) 0%, rgba(94, 205, 13, 0) 100%);
  }
}
</style>