How to set the background of the login page in uniapp

Uniapp is a cross-platform development framework that supports the simultaneous construction of applications for multiple platforms such as iOS, Android, H5, and applets in the same code base. With the widespread application of Uniapp, more and more developers are beginning to use Uniapp to quickly develop applications, and setting the background of the login page is also a common requirement. Here's how to set the login page background in Uniapp.

You can use vue-cli to set the background of the login page in Uniapp. First, you need to create a login folder under the pages folder, and create login.vue under this folder. The code is as follows:

<template>
  <div class="container">
    <!--设置背景图片-->
    <div class="background"></div>
    <div class="content">
      <div class="login-form">
        <h2>Login to your Account</h2>
        <form @submit.prevent="">
          <div class="input-group">
            <label for="email">Email address</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Enter your email"
              required
            />
          </div>
          <div class="input-group">
            <label for="password">Password</label>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Enter your password"
              required
            />
          </div>
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
  </div>
</template>

<style>
.container {
  position: relative;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/login-bg.jpg);
  background-size: cover;
  filter: blur(10px);
  z-index: -1;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 16px;
  color: #fff;
}
.login-form {
  max-width: 400px;
  width: 100%;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  text-align: center;
}
.login-form h2 {
  color: #fff;
  margin-bottom: 24px;
}
.input-group {
  margin-bottom: 16px;
}
.input-group label {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: #fff;
}
input[type="email"],
input[type="password"] {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}
button[type="submit"] {
  display: inline-block;
  background-color: #7f00ff;
  border: none;
  color: #fff;
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

In the above code, we designed a simple login page layout, and at the same time Defines styles such as background images. As a background image, we used the image located at /assets/images/login-bg.jpg. At the same time, we used the filter filter to achieve the blur effect of the background image.

Finally, we need to add the uni.login configuration to the manifest.json file, as shown below:

"uni": {
    "login": {
      // 设置登录页路径
      "path": "pages/login/login",
      // 设置导航栏背景色
      "backgroundColor": "#7f00ff",
      // 设置导航栏字体颜色
      "textColor": "#fff",
      // 设置状态栏颜色
      "statusBarColor": "#7f00ff",
      // 是否为全屏模式
      "fullScreen": false
    }
  },

In the above code, we set the path to the login page and specified The color of the navigation bar and status bar. At the same time, we can set whether it is full screen mode.

Through the above steps, we have successfully set the Uniapp login page background. When the user enters the login page, the background image and corresponding page style we set will be displayed.

To summarize, Uniapp is a very powerful cross-platform development framework that also supports the rapid construction of applications on multiple platforms. How to set the background of the login page is a common requirement in Uniapp development. Through the above steps, we can easily implement this function. If you have more questions related to Uniapp development, you can refer to Uniapp official documentation or communicate in the development community to help you understand the Uniapp framework more deeply.

The above is the detailed content of How to set the background of the login page in uniapp. For more information, please follow other related articles on the PHP Chinese website!