<!-- 全局设置：tab 卡片样式  -->
<template>
    <div class="setting-item-box">
        <el-divider content-position="left">卡片风格</el-divider>
        <div style="padding-top: 5px; padding-bottom: 20px;">
            <el-button-group size="small">
                <el-button
                    v-for="mode in state.modeList" :key="mode.name"
                    :type="mode.name === themeStore.tabStyle ? 'primary' : ''"
                    @click="themeStore.tabStyle = mode.name"
                >{{ mode.title }}</el-button>
            </el-button-group>
        </div>
    </div>
</template>

<script setup name="com-setting-tab-style">
import {useThemeStore} from "../../../store/theme";
import {reactive} from "vue";

const themeStore = useThemeStore();

// 所有切换样式 
const state = reactive({
    modeList: [
        {name: 'block', title: '方块'},
        {name: 'mellow', title: '圆润'},
        {name: 'mask', title: '遮罩'},
        {name: 'mask-light', title: '浅色调遮罩'},
    ]
})


</script>

<style scoped lang="scss">

.setting-item-box{
  .el-button-group>.el-button{
    padding: 12px 12px;
  }
  .el-button-group>.el-button:first-child{border-radius: 1px 0 0 1px !important;}
  .el-button-group>.el-button:last-child{border-radius: 0 1px 1px 0 !important;}
}

</style>
