<template>
  <div>
    <div class="text-left p-4">
        <div class="custom-style">
            <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="large" />
        </div>
    </div>
    <!-- 综合数据页面组件 -->
    <allDataTab v-if="mode === '综合数据'">
    </allDataTab>
    <!-- DSN数据页面组件 -->
    <dsnDataTab v-if="mode === 'DSN数据'">
    </dsnDataTab>
    <!-- ITU数据页面组件 -->
    <ituDataTab v-if="mode === 'ITU数据'">
    </ituDataTab>
    <!-- ST数据页面组件 -->
    <stDataTab v-if="mode === 'ST数据'">
    </stDataTab>
  </div>



</template>

<script setup lang="ts">
import { ref } from 'vue'
import allDataTab  from './components/allDataTab.vue'
import ituDataTab  from './components/ituDataTab.vue'
import stDataTab  from './components/stDataTab.vue'   
import dsnDataTab  from './components/dsnData/dsnTab.vue'   

const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']

</script>

<style scoped lang="scss">
.el-button:focus {
    outline: none;
}

/* 文字样式 */
.el-text {
    color: #FFFFFF;
}


</style>
