效果图片

 代码块

<template>
  <div class="main">
    <div class="backImg"></div>
    <div class="login">
      <div class="title">
        <span>Login管理系统</span>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入账号"
          v-model="dataFrom.username"
        ></el-input>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-unlock"
          placeholder="请输入密码"
          show-password
          v-model="dataFrom.password"
        ></el-input>
      </div>
      <div class="list">
        <el-input
          prefix-icon="el-icon-document-checked"
          placeholder="请输入验证码"
          v-model="dataFrom.code"
        ></el-input>
        <div class="getCode">
          <span @click="getCode">{{ dataFrom.code }}</span>
        </div>
      </div>
      <div class="btn">
        <button @click="loginClick">登录</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataFrom: {
        username: "xq",
        password: "xq123",
        code: "",
      },
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    loginClick() {
      if (
        this.dataFrom.username == "xq" &&
        this.dataFrom.password == "xq123" &&
        this.dataFrom.code == this.dataFrom.code
      ) {
        localStorage.setItem("username", this.dataFrom.username);
        localStorage.setItem("password", this.dataFrom.password);
        localStorage.setItem("code", this.dataFrom.code);
        this.$router.push("./home");
      }
    },
    getCode() {
      var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
      var arr = str.split("");
      var oldStr = "";
      for (var i = 0; i < 4; i++) {
        var n = Math.floor(Math.random() * arr.length);
        oldStr += arr[n];
      }
      this.dataFrom.code = oldStr.substring(oldStr.length - 4);
    },
  },
};
</script>
<style scoped>
.backImg {
  background: url("https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png");
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  background: #fff;
  width: 20%;
  padding: 20px 20px 25px 20px;
}
.login .title {
  text-align: center;
  padding-bottom: 5px;
}
.login .title span {
  font-size: 30px;
  color: #000;
}
 
.login .list {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.login .list input {
  border-radius: 3px;
  border: none;
  outline: none;
  color: #999;
  border: 1px solid #bdbdbd;
  font-size: 14px;
  line-height: 35px;
  padding: 0 10px;
  display: block;
  box-sizing: border-box;
  flex: 7;
}
 
.login .list .getCode span {
  font-size: 20px;
  background: #f5f7fa;
  color: #777;
  border-radius: 4px;
  line-height: 38px;
  border: 1px solid #ccc;
  display: inline-block;
  margin-left: 10px;
  width: 80px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}
 
.btn {
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
}
.btn button {
  font-size: 13px;
  color: #fff;
  background: #46b5ff;
  outline: none;
  border: none;
  line-height: 35px;
  padding: 0 20px;
  display: inline-block;
  flex: 1;
  cursor: pointer;
}
</style>

uniapp登录界面

<template>
	<view class="main">
		<view class="backImg"></view>
		<view class="login">
			<view class="loginTitle">
				<text>XuQian后台登录</text>
			</view>
			<view class="list">
				<uni-icons type="person" size="17"></uni-icons>
				<input placeholder="请输入账号" v-model="dataFrom.username"></input>
			</view>
			<view class="list">
				<uni-icons type="locked" size="17"></uni-icons>
				<input placeholder="请输入密码" password v-model="dataFrom.password"></input>
			</view>
			<view class="getCode">
				<view class="codeInput">
					<uni-icons type="notification" size="17"></uni-icons>
					<input placeholder="请输入验证码" v-model="dataFrom.code"></input>
				</view>
				<view class="codeText" @click="getCode">
					<text>{{ dataFrom.code }}</text>
				</view>
			</view>
			<view class="password">
				<checkbox-group>
					<checkbox />
				</checkbox-group>
				<text>记住密码</text>
			</view>
			<view class="loginBtn">
				<text>登入</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataFrom: {
					username: "xq",
					password: "xq123456789",
					code: ''
				}
			}
		},
		mounted() {
			this.getCode()
		},
		methods: {
			getCode() {
				var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
				var arr = str.split("");
				var oldStr = "";
				for (var i = 0; i < 5; i++) {
					var n = Math.floor(Math.random() * arr.length);
					oldStr += arr[n];
				}
				this.dataFrom.code = oldStr.substring(oldStr.length - 5);
			},
		}
	};
</script>
<style scoped>
	uni-checkbox-group {
		font-size: 0;
	}
 
	/deep/.uni-checkbox-input {
		width: 32rpx;
		height: 32rpx;
	}
 
	/deep/.uni-checkbox-input.uni-checkbox-input-checked::before {
		font-size: 15px;
	}
 
	.backImg {
		background: #1E9FFF;
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
 
	.login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 360px;
		background-color: #fff;
		border: 1px solid #fff;
		border-radius: 6rpx;
		padding: 28rpx 40rpx;
		box-sizing: border-box;
		box-shadow: 0 0 8px #eeeeee;
		letter-spacing: 2rpx;
 
	}
 
	.login uni-icons {
		color: #d2d2d2;
	}
 
	.login .loginTitle {
		text-align: center;
		margin-bottom: 20rpx;
		padding: 28rpx 0;
	}
 
	.login .loginTitle text {
		color: #1E9FFF;
		font-size: 50rpx;
		font-weight: bold;
	}
 
	.login .list {
		display: flex;
		align-items: center;
		border: 1px solid #dddddd;
		padding: 0 15rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
 
	.login input {
		border: none;
		outline: none;
		font-size: 28rpx;
		color: rgb(51, 51, 51);
		line-height: 70rpx;
		height: 70rpx;
		display: block;
		box-sizing: border-box;
		flex: 7;
		border: none;
		padding: 0 15rpx;
	}
 
	.login .password {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}
 
	.login .password text {
		font-size: 28rpx;
		color: #989898;
		display: inline-block;
		padding-left: 10rpx;
		line-height: 32rpx;
	}
 
	.login .getCode {
		display: flex;
		justify-content: space-between;
	}
 
	.login .codeInput {
		display: flex;
		align-items: center;
		border: 1px solid #dddddd;
		padding: 0 15rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}
 
	.login .codeText text {
		font-size: 40rpx;
		background: #f5f7fa;
		color: #777;
		border-radius: 8rpx;
		line-height: 70rpx;
		border: 1px solid #e6e6e6;
		display: inline-block;
		width: 95px;
		text-align: center;
		user-select: none;
		cursor: pointer;
	}
 
	.login .loginBtn {
		padding-bottom: 30rpx;
	}
 
	.login .loginBtn text {
		background-color: #1E9FFF;
		line-height: 76rpx;
		color: #fff;
		text-align: center;
		font-size: 25rpx;
		border-radius: 4rpx;
		display: block;
	}
</style>