theme design

component/approve/Login.vue

@@ -17,12 +17,11 @@ export default {
 </div>
 </template>
 <style scoped>
+@import url(../../style/common.css);
 .login{
   width:80%;
-  height:50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: bisque;
 }
 </style>

component/approve/Register.vue

@@ -18,19 +18,18 @@ export default {
     console.log("about vue component setup");
   },
   mounted(el){
+    import "../../style/common.css";
     console.log("about vue under mounted ---");
   }
 }
 </script>
 <style scoped>
+/* @import url(../../style/common.css); */
 .register{
   width:80%;
-  height:50%;
-  /* display: flex; */
+  display: flex;
   justify-content: center;
   align-items: center;
-  background-color: aqua;
-  backdrop-filter: blur(3px);
 }
 </style>
 

style/index.css

@@ -41,7 +41,10 @@ dialog{
     border-radius: 15px;
     position: relative;
     background-color: var(--body-background-color);
-    opacity: 0.9;
+    opacity: 0.95;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 dialog::backdrop{
     /* background-color: #121929; */