vue-element-admin修改登录

页面背景颜色怎么实现？

您可以通过修改vue-element-admin项目中的主题颜色来实现修改登录页面背景颜色。具体做法如下：

1. 在/src/styles/variables.scss中添加以下代码：

$--color-primary: #xxxxxx; // 修改主题色，xxxxxx为颜色代码

$--header-bg: #xxxxxx; // 修改顶部导航栏背景色，xxxxxx为颜色代码

$--sidebar-bg: #xxxxxx; // 修改侧边栏背景色，xxxxxx为颜色代码

$--menu-dark-bg: #xxxxxx; // 修改菜单背景色，xxxxxx为颜色代码

2. 在/src/App.vue中找到以下代码块，修改为：

<el-container>
<el-header style="background-color: var(--header-bg);"></el-header>
<el-container>
<el-aside style="background-color: var(--sidebar-bg);"></el-aside>
<el-main style="background-color: var(--menu-dark-bg);">
<router-view></router-view>
</el-main>
</el-container>
</el-container>

3. 在/src/login.vue中找到以下代码块，修改为：

<template>
<el-row class="login-container" :style="{'background-color': loginBgColor}">
...
</el-row>
</template>

<script>
export default {
name: 'Login',
data() {
return {
loginBgColor: '#xxxxxx' // 修改登录页面背景色，xxxxxx为颜色代码
}
}
}
</script>

以上操作完成后，就可以实现修改登录页面背景颜色啦！