style中background-image属性决定图片
<style>
.logincontent {
display: flex;
flex-direction: column;
background-image: url("/src/assets/background.png");
background-size: 100% 100%;
background-attachment: fixed;
width: 100%;
height: 100%;
min-width: 900px;
min-height: 1000px;
justify-content: center;
align-items: center;
}
.loginform {
background-color: #fff;
min-width: 600px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
padding: 30px 20px;
}
</style>
实现源码 (注意两个class)
<template>
<a-layout class="logincontent">
<a-form
class="loginform"
:model="user"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-typography-title style="text-align: center"
>用户登录</a-typography-title
>
<a-form-item label="公钥" :wrapper-col="{ span: 15, offset: 4 }">
<a-input v-model:value="user.public_key" placeholder="请输入公钥" />
</a-form-item>
<a-form-item label="私钥" :wrapper-col="{ span: 15, offset: 4 }">
<a-input-password
v-model:value="user.private_key"
placeholder="请输入私钥"
/>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 6 }">
<a-row type="flex" justify="space-between">
<a-button type="primary" @click="login">登录</a-button>
<a-button type="link" @click="goToRegister"
>没有账号?立即注册</a-button
>
</a-row>
</a-form-item>
</a-form>
</a-layout>
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";
const router = useRouter();
//reactive 双向绑定响应框
const user = reactive({
public_key: "",
private_key: "",
});
const goToRegister = () => {
router.push({ path: "/register" });
};
const login = () => {
console.log("登录!");
post("/security/login", user).then((res) => {
tip.success("登陆成功!");
const token = res.data; //获取返回的令牌
// 将令牌存储在本地
setLocalToken(token);
// 跳转至Home路由
router.push({ path: "/home" });
});
};
</script>
<style>
.logincontent {
display: flex;
flex-direction: column;
background-image: url("/src/assets/background.png");
background-size: 100% 100%;
background-attachment: fixed;
width: 100%;
height: 100%;
min-width: 900px;
min-height: 1000px;
justify-content: center;
align-items: center;
}
.loginform {
background-color: #fff;
min-width: 600px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
padding: 30px 20px;
}
</style>
效果图