最近发现ruoyi-vue登录界面的背景图片在电脑显示正常 手机只显示图片的左边位置  作为一个强迫症的我  研究了半天代码 终于找到了原因

话不多说 上代码

在ruoyi-ui/src/views/login.vue中

<template>
  <div class="login">
     .....
  </div>
</template>

这个login就是背景图片  所以往下翻找到login的属性  加一行代码即可

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login5.jpg");
  background-size: cover;
  background-position: center center;  //要添加的代码
}

好的  一行代码完美解决

Logo

快速构建 Web 应用程序

更多推荐