background color about vue component

component/approve/Login.vue

@@ -8,9 +8,19 @@ export default {
 }
 </script>
 
-<template>
+<template class="login">
   <h4 style="color:orange;">登录页面</h4>
   <label>用户名</label><input type="text" placeholder="请输入用户名"/><br/>
   <label>密码</label><input type="password" placeholder="请输入密码"/><br/>
   <button>登录</button>
 </template>
+<style scoped>
+.login{
+  width:100vw;
+  height:100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: bisque;
+}
+</style>

component/approve/Register.vue

@@ -1,4 +1,4 @@
-<template>
+<template class="register">
 <div>
   <h4 style="color:orange;">注册页面</h4>
   <label>用户名</label><input type="text" placeholder="请输入用户名"/><br/>
@@ -23,6 +23,17 @@ export default {
 }
 </script>
 
+<style scoped>
+.register{
+  width:100vw;
+  height:100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: aqua;
+  backdrop-filter: blur(3px);
+}
+</style>