<template>
    <el-scrollbar>
        <div class="common-page box">
            <el-space direction="vertical" :size="20" alignment="flex-start" fill>
                <div class="text-title-0-show">开发样式</div>
                <div class="text-title-1-show">样式变量</div>
                <ConstStyle />
                <div class="text-title-1-show">文字样式</div>
                <TextStyle />
                <div class="text-title-1-show">通用样式/组件</div>
                <div style="position: relative; min-height: 700px;">
                    <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
                        <el-tab-pane label="通用" lazy>
                            <common-page />
                        </el-tab-pane>
                        <el-tab-pane label="文本" lazy>
                            <text-page />
                        </el-tab-pane>
                        <el-tab-pane label="图片" lazy>
                            <images-page />
                        </el-tab-pane>
                        <el-tab-pane label="单选框" lazy>
                            <radio-page />
                        </el-tab-pane>
                        <el-tab-pane label="选项卡" lazy>
                            <tabs-page />
                        </el-tab-pane>
                        <el-tab-pane label="人物" lazy>
                            <people-page />
                        </el-tab-pane>
                        <el-tab-pane label="预警面板" lazy>
                            <WarnningPane />
                        </el-tab-pane>
                        <el-tab-pane label="层级关系图" lazy>
                            <GraphChart />
                        </el-tab-pane>
                        <el-tab-pane label="引力关系图" lazy>
                            <GraphTreeChart />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-space>
        </div>
    </el-scrollbar>
</template>

<script setup>
import "@/styles/container.scss"
import "./devStyle.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
import { ElTabs, ElTabPane, ElSpace } from "element-plus";
import RadioPage from './RadioPage/index.vue';
import TabsPage from './TabsPage/index.vue';
import CommonPage from './CommonPage/index.vue';
import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
import GraphChart from './GraphChart/index.vue'
import GraphTreeChart from './GraphTreeChart/index.vue'
</script>

<style lang="scss" scoped>
.box {
    padding-bottom: 20px;
}
</style>