|
|
@ -3,8 +3,15 @@ |
|
|
|
<h3 class="title">项目配置</h3> |
|
|
|
<el-divider>主题</el-divider> |
|
|
|
<div class="flex justify-center" @click.stop> |
|
|
|
<el-switch v-model="isDark" inline-prompt :active-icon="IconEpMoon" :inactive-icon="IconEpSunny" |
|
|
|
active-color="var(--el-fill-color-dark)" inactive-color="var(--el-color-primary)" @change="toggleDark" /> |
|
|
|
<el-switch |
|
|
|
v-model="isDark" |
|
|
|
inline-prompt |
|
|
|
:active-icon="IconEpMoon" |
|
|
|
:inactive-icon="IconEpSunny" |
|
|
|
active-color="var(--el-fill-color-dark)" |
|
|
|
inactive-color="var(--el-color-primary)" |
|
|
|
@change="toggleDark" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<el-divider>界面设置</el-divider> |
|
|
|
<div class="flex justify-between items-center settingItem"> |
|
|
@ -25,8 +32,13 @@ |
|
|
|
</div> |
|
|
|
<el-divider>主题颜色</el-divider> |
|
|
|
<ul class="flex justify-center themeColor"> |
|
|
|
<li class="colorItem" v-for="(color, index) in themeColors" :key="index" :style="{ background: color }" |
|
|
|
@click="themeColorClick(color)"></li> |
|
|
|
<li |
|
|
|
class="colorItem" |
|
|
|
v-for="(color, index) in themeColors" |
|
|
|
:key="index" |
|
|
|
:style="{ background: color }" |
|
|
|
@click="themeColorClick(color)" |
|
|
|
></li> |
|
|
|
</ul> |
|
|
|
<!-- <el-divider>导航设置</el-divider> |
|
|
|
<ul class="layout"> |
|
|
@ -79,14 +91,7 @@ function changeLayout(layout: string) { |
|
|
|
} |
|
|
|
|
|
|
|
// 主题颜色 |
|
|
|
const themeColors = ref<string[]>([ |
|
|
|
'#409EFF', |
|
|
|
'#304156', |
|
|
|
'#11a983', |
|
|
|
'#13c2c2', |
|
|
|
'#6959CD', |
|
|
|
'#f5222d' |
|
|
|
]); |
|
|
|
const themeColors = ref<string[]>(['#409EFF', '#304156', '#11a983', '#13c2c2', '#6959CD', '#f5222d']); |
|
|
|
|
|
|
|
function themeColorClick(color: string) { |
|
|
|
document.documentElement.style.setProperty('--el-color-primary', color); |
|
|
|