vue-admin-element背景图片
时间: 2023-12-19 17:05:34 浏览: 34
在vue-admin-element中更改背景图片的步骤如下:
1. 首先,准备一张你想要用作背景的图片,并将其放置在项目路径下的 `vue-element-admin-master\src\assets\login_images\login_bg.jpg` 文件夹中。
2. 打开 `vue-element-admin-master\src\views\login\index.vue` 文件,在 `.login-container` 的代码块内进行如下修改:
- 注释掉原有的代码:`min-height: 100%; width: 100%; background-color: $bg; overflow: hidden;`
- 添加以下代码:
```css
width: 100%;
height: 100%;
background-image: url("../../assets/login_images/login_bg.jpg");
background-size: cover;
background-position: center;
position: relative;
```
3. 保存修改后的代码,并在终端中运行命令 `npm run dev`,然后在浏览器中输入 `http://localhost:9527` 预览效果。
注意:上述步骤是基于vue-element-admin的默认配置进行操作的,如果使用的是其他基于vue的模板,步骤可能会稍有不同。
相关问题
vue-admin-template和vue-element-admin
vue-admin-template和vue-element-admin是两个不同的项目。
vue-admin-template是一个基于vue-element-admin的后台管理系统基础模板,可以作为模板进行二次开发。它提供了一个简洁的基础框架,适合用于中小型后台管理项目的开发。你可以从GitHub上获取它的源代码,GitHub地址是https://github.com/PanJiaChen/vue-admin-template 。
而vue-element-admin是一个丰富的组件库,它包含了很多常用的组件和功能,可以作为一个工具箱。你可以从vue-element-admin中复制你需要的功能或组件到vue-admin-template中进行二次开发。这样可以加快开发速度,并且确保功能的完整性和稳定性。
总结起来,vue-admin-template是一个基础的后台管理系统模板,适合二次开发,而vue-element-admin是一个组件库,可以作为工具箱供开发者使用。
vue-element-admin 灰色背景
如果你想要更改 vue-element-admin 的灰色背景,可以按照以下步骤进行操作:
1. 打开 `src/styles/variables.scss` 文件。
2. 在文件中找到 `$--color-bg-grey` 变量,它控制了大部分灰色背景的颜色。
3. 更改变量的值,比如将其改为白色:
```
$--color-bg-grey: #fff;
```
4. 重新编译项目,你应该能够看到新的背景颜色。