<template>
    <el-scrollbar>
        <div class="common-page">
            <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>
                <el-tabs tabPosition="left">
                    <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>
                        <radio-page />
                    </el-tab-pane>
                    <el-tab-pane label="选项卡" lazy>
                        <tabs-page />
                    </el-tab-pane>
                </el-tabs>
            </el-space>
        </div>
    </el-scrollbar>
</template>

<script setup>
import "@/styles/container.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';
</script>

<style lang="scss" scoped></style>