CameraMachine/frontend/src/views/Developer/index.vue

<template>
  <headerBar :title="$t('router.developer')" />
  <div class="page">
  <div class="tabs">
    <div class="tab" @click="handleSelect(1)" :class="{active:activeIndex == 1}">{{ $t('developer.tabSetting') }}</div>
    <div class="tab" @click="handleSelect(2)" :class="{active:activeIndex == 2}">{{ $t('developer.tabMCU') }}</div>
    <div class="tab" @click="handleSelect(3)" :class="{active:activeIndex == 3}">{{ $t('developer.tabRS485') }}</div>
  </div>
  <normal v-if="activeIndex == 1"/>
  <mcu v-if="activeIndex == 2"/>
  <cmd v-if="activeIndex == 3"/>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import headerBar from '@/components/header-bar/index.vue'
import normal  from './normal'
import mcu  from './mcu'
import cmd  from './cmd'
import { ref } from 'vue'

const { t } = useI18n()
const activeIndex = ref('1')

const handleSelect = (key) => {
  activeIndex.value = key
}
</script>

<style scoped lang="scss">
.page { min-height: calc(100vh - 30px); }
.tabs { height: 40px; line-height: 40px; position: sticky; top:30px; background: #fff; z-index: 100; }
.tab { height: 38px; line-height: 40px; cursor: pointer; }
</style>