<template>
    <div class="text-left p-s">
        <div class="segmentedStyle">
            <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="small" />
        </div>
    </div>
    <dsnDataTab v-if="mode === 'DSN数据'">
    </dsnDataTab>

    <newsDataTab v-if="mode === '新闻'">
    </newsDataTab>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import dsnDataTab from './dsnDataTab.vue'
import newsDataTab from './newsDataTab.vue'

const mode = ref('DSN数据')
const sizeOptions = ['DSN数据', '新闻']

</script>

<style scoped lang="scss">
/* 工具栏样式 */
.toolbarStyle {
    background-image: url("@/assets/picture/box3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 表格样式 */
.formStyle {
    display: flex;
    justify-content: space-around;
    padding: 3px;
    margin-top: 1%;
}

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

<style>
.el-input {
    --el-input-text-color: #FFFFFF;
}

/* 修改el选择器的样式 */
.el-select__wrapper {
    background-color: #1d5484;
    box-shadow: none;
}

/* 删除el选择器选中时的边框 */
.is-hovering {
    box-shadow: none !important;
}

/* 修改el输入框的样式 */
.el-input__wrapper {
    background-color: #1d5484;
    box-shadow: none;
}

/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
    background-color: #1d5484;
}

/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
    color: #FFFFFF;
}

/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
    color: #409eff;
}

/* 修改el日期选择器的边框为none */
.el-date-editor {
    --el-input-border-color: none
}

.el-button:focus {
    outline: none;
}
</style>