80 lines
1.8 KiB
80 lines
1.8 KiB
<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>
|
|
|