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

<template>

  <headerBar
    title="初始设备调频设置"
  />


  <div class="page">
  <div class="tabs">
    <div class="tab" @click="handleSelect(1)" :class="{active:activeIndex == 1}">设置</div>
    <div class="tab" @click="handleSelect(2)" :class="{active:activeIndex == 2}">MCU其他配置设置</div>
    <div class="tab" @click="handleSelect(3)" :class="{active:activeIndex == 3}">RS485调试发送</div>
  </div>


  <normal v-if="activeIndex == 1"/>
  <mcu v-if="activeIndex == 2"/>
  <cmd v-if="activeIndex == 3"/>

  </div>

</template>

<script setup lang="ts">
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 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;

  }
}
</style>