cw_web/src/views/settings/audioVideo/index.vue

<template>
  <div class="settings-container">
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="Video" name="first">
        <Video/>
      </el-tab-pane>
      <el-tab-pane label="Audio" name="second">
        <Audio/>
      </el-tab-pane>
      <el-tab-pane label="Night Vision Lights" name="third">
        <NightVisionIlluminator/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

import Video from './components/video/index.vue'
import Audio from './components/audio/index.vue'
import NightVisionIlluminator from './components/nightVisionIlluminator/index.vue'

const activeName = ref('first')

</script>


<style scoped lang="scss">
.settings-container{
  display: flex;
  flex-direction: column;
  padding: 20px;
}
</style>