modified: src/App.vue

modified:   src/components/LoginForm.vue

src/App.vue

@@ -18,7 +18,20 @@ export default {
 <style>
 /* 添加一些简单的样式 */
 #app {
+  text-align: center;
   font-family: Arial, sans-serif;
-  padding: 20px;
+  margin-top: 0px;
+}
+body{
+  margin:0;
+  padding:0;
+  border:0
+}
+#building{
+  background:url("@/assets/bg.png");
+  width:100%;
+  height:100%;
+  position:fixed;
+  background-size:100% 100%;
 }
 </style>

src/components/LoginForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div id='building'>
   <el-container class="auth-container">
     <el-main class="auth-form">
       <el-card class="box-card">
@@ -33,6 +34,7 @@
       </el-card>
     </el-main>
   </el-container>
+</div>
 </template>
 
 <script>
@@ -95,13 +97,13 @@ export default {
 </script>
 
 <style scoped>
-.auth-container {
+/* .auth-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: calc(100vh-100px);
+  height: calc(100vh);
-  background-color: #ffe6f2; /* 淡粉色背景 */
+  background-color: #ffe6f2; 淡粉色背景 */
-}
+
 
 .auth-form {
   display: flex;
@@ -111,12 +113,20 @@ export default {
 }
 
 .box-card {
-  width: 100%;
+  border:1px solid #ff99cc;
-  max-width: 400px;
+  width: 350px;
+  margin:180px auto;
+  padding: 35px 80px 15px 35px;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  box-shadow: 0 0 25px #ff99cc;
+  background-color:rgba(255,255,255,0.4);
+  /* max-width: 400px;
   padding: 20px;
   box-sizing: border-box;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  border: 1px solid #ff99cc; /* 粉色边框 */
+  border: 1px solid #ff99cc; 粉色边框 */
 }
 
 .el-button--primary {