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

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

目录

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

一、效果图

初始效果：
在这里插入图片描述
更改背景后效果：
在这里插入图片描述

二、操作步骤

1、准备图片

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

2、更改代码

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

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

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

  1. min-height: 100%;
  2.   width: 100%;
  3.   background-color: $bg;
  4.   overflow: hidden;

然后在下面添加以下代码

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

重新运行即可

发表评论

表情：
评论列表 （有 0 条评论，186人围观）

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

相关阅读