background color about vue component

common/Header.vue

@@ -1,11 +1,6 @@
 <template>
-<div>
-  <h4 style="color:orange;">about vue component!!!</h4>
-<!--  <h4>{{number}}</h4>-->
-<!--
-  <p>Louis_Wiki ---- we are a team to provide the service to gift customization</p>
--->
-  <p>contact:19970419890</p>
+<div class="header">
+  <h4 style="color:orange;">header component</h4>
 </div>
 </template>
 <script type="module">
@@ -23,7 +18,12 @@ export default {
   }
 }
 </script>
-
+<style scoped>
+.header{
+  color:orange;
+  font-weight: bolder;
+}
+</style>
 
 
 

component/approve/Login.vue

@@ -20,7 +20,7 @@ export default {
 .login{
   width:80%;
   height:50%;
-  display: flex;
+  /* display: flex; */
   justify-content: center;
   align-items: center;
   background-color: bisque;

component/approve/Register.vue

@@ -26,9 +26,9 @@ export default {
 .register{
   width:80%;
   height:50%;
-  display: flex;
+  /* display: flex; */
   justify-content: center;
-  /* align-items: center; */
+  align-items: center;
   background-color: aqua;
   backdrop-filter: blur(3px);
 }

index.html

@@ -10,6 +10,7 @@
     <!-- <h3>this is node -> Vue test</h3> -->
     <div id='app'  style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
     <template id="my-app">
+		<Header></Header>
 		<!--<div v-html='info'></div> 
 		<Home @op="add">home vue</Home>
 		<h5 style="color:oranged">{{number}}</h5>

index.js

@@ -29,6 +29,7 @@ import About from "./component/About.vue";
 import Login from "./component/approve/Login.vue";
 import Register from "./component/approve/Register.vue";
 import File from "./component/file/File.vue";
+import Header from './common/Header.vue';
 import i18n from "./i18n.js";
 import { useI18n } from 'vue-i18n';
 
@@ -57,7 +58,8 @@ const app=createApp({
     About,
     Login,
     Register,
-    File
+    File,
+    Header
   },
   data(){
     return{