vue-element-admin—登录页面添加自定义背景

深碍√TFBOYSˉ_ 2024-03-30 13:35 73阅读 0赞

#### 目录 ####

*  一、效果图
 *  二、操作步骤
 *   *  1、准备图片
     *  2、更改代码

## 一、效果图 ##

初始效果：  
![在这里插入图片描述][aed5373618ab4a76ad96362935c35b43.png]  
更改背景后效果：  
![在这里插入图片描述][16fb1a6f86684ad28d5b6ef27b2458ac.png]

## 二、操作步骤 ##

### 1、准备图片 ###

vue-element-admin-master\src\assets\login_images\login.png

### 2、更改代码 ###

打开下面路径的 index.vue 文件

vue-element-admin-master\src\views\login\index.vue

对 .login-container 代码块内代码做如下图所示修改（代码在图片下面）。  
![在这里插入图片描述][076770f901bf41e78fbf96aab19f7541.png]  
首先将下面代码注释掉

min-height: 100%;
      width: 100%;
      background-color: $bg;
      overflow: hidden;

然后在下面添加以下代码

width: 100%;
      height: 100%;
      background-image: url("../../assets/login_images/login.png");
      background-size: cover;
      background-position: center;
      position: relative;

重新运行即可

[aed5373618ab4a76ad96362935c35b43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4e4bfd4bdb884bcba95a1b6a6ebc5ea9.png
[16fb1a6f86684ad28d5b6ef27b2458ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/502b42e238184eee9407321e0a4d1c85.png
[076770f901bf41e78fbf96aab19f7541.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/96dbcab4859f42ffa3cbad720b433360.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot Security 自定义登录页面

文章目录配置 HttpSecurity 配置登录页自定义报错引入 Security，参考文章： [SpringBoot Security

╰半夏微凉°/ 2024年04月01日 09:06/ 0 赞/ 86 阅读

相关 vue-element-admin—登录页面添加自定义背景

目录一、效果图二、操作步骤 1、准备图片 2、更改代码一、效果图初始效果： ![在这里插入图片描述][aed53

深碍√TFBOYSˉ_/ 2024年03月30日 13:35/ 0 赞/ 74 阅读

相关 UISearchBar背景透明,去掉背景,自定义背景

seachBar=[[UISearchBar alloc] init]; //修改搜索框背景 seachBar.backgroundColor=[UIC

分手后的思念是犯贱/ 2023年10月18日 14:31/ 0 赞/ 178 阅读

相关自定义springSecurity3.0 登录后自定义返回页面

使用springSecurity验证登录密码基于SpringMVC模式，在配置文件中默认返回一个页面，但是我们有时候因需求原因需要自定义返回某个页面而不是配置文件中的默认页面，

怼烎@/ 2023年10月05日 08:42/ 0 赞/ 47 阅读

相关 SpringBootSecurity学习（03）网页版登录添加自定义登录页面

自定义登录页面前面无论是使用默认配置，还是自定义配置类，都是使用的springboot-security自带的登录页面，自带的登录页面在这个版本虽然设计的非常不错，但是

妖狐艹你老母/ 2023年08月17日 16:44/ 0 赞/ 142 阅读

相关 spring security webflux 自定义登录页面

-------------------- spring security webflux 自定义登录页面 \\\\\\\\\\\\\\\\\\\\\\\\

桃扇骨/ 2023年02月15日 12:57/ 0 赞/ 34 阅读

相关 SpringSecurity进行自定义登录页面

1:引入SpringSecurity jar包代码中还用到了插件lombok, 没有引入的话还需要引入 lombok <dependency>

迷南。/ 2023年01月01日 01:38/ 0 赞/ 175 阅读

相关 spring security之自定义登录页面

上次我们讲到，spring security会为我们创建一个默认的登录界面，但是一个全英文，普通化的登录界面很明显不适合所有的应用场景，所有就有必要来自定义登录界面，恰

水深无声/ 2022年05月29日 04:44/ 0 赞/ 449 阅读

相关 CAS自定义登录页面

参考：[http://www.imooc.com/article/3720][http_www.imooc.com_article_3720] 不过参考链接中介绍的并不详细

怼烎@/ 2022年05月14日 01:30/ 0 赞/ 366 阅读

相关 SpringSecurity--自定义登录页面、注销登录配置

自定义页面 Spring Security的登录表单默认使用它自己提供的页面，登录成功后也是默认的页面跳转，也可以自定义登录页面 mylogin.html： <

灰太狼/ 2021年08月24日 15:52/ 0 赞/ 587 阅读