<!-- 全局设置：设置 切页动画  -->
<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.switchMode ? 'primary' : ''"
                    @click="themeStore.switchMode = mode.name"
                >{{ mode.title }}</el-button>
            </el-button-group>
        </div>
    </div>
</template>

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

const themeStore = useThemeStore();

// 所有切换样式 
const state = reactive({
    modeList: [
        {name: 'opacity', title: '渐变'},
        {name: 'right-jump-right', title: '左渐入'},
        {name: 'left-jump-left', title: '右渐入'},
    ]
})


</script>

<style scoped lang="scss">

.setting-item-box{
  .el-button-group>.el-button{
    padding: 12px 14px;
  }
  .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>
