ssh_sso/ssp-admin-vue3/src/layout/nav/com-setting/com-setting-more.vue

<!-- 全局设置：其它配置  -->
<template>
    <div class="setting-item-box">
        <el-divider content-position="left">其它配置</el-divider>
        <div style="padding-top: 5px; padding-bottom: 20px;">
            <el-form label-position="left">
                <el-form-item label="灰色模式 ">
                    <el-switch v-model="themeStore.greyMode" @change="themeStore.greyModeChange(themeStore.greyMode)" />
                </el-form-item>
                <el-form-item label="色弱模式 ">
                    <el-switch v-model="themeStore.weakMode" @change="themeStore.weakModeChange(themeStore.weakMode)" />
                </el-form-item>
                <el-form-item label="刷新按钮 ">
                    <el-switch v-model="themeStore.isShowRefresh" />
                </el-form-item>
                <el-form-item label="当前时间 ">
                    <el-switch v-model="themeStore.isShowDateTime" />
                </el-form-item>
                <el-form-item label="面包屑栏 ">
                    <el-switch v-model="themeStore.isShowBreadcrumb" />
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup name="com-setting-more">
import {useThemeStore} from "../../../store/theme";
const themeStore = useThemeStore();

</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;}
  // 使其左右靠边
  :deep(.el-form-item__label){flex: 1;}
  :deep(.el-form-item__content){flex: 0 0 auto;}
}

</style>