登录框样式修改

src/view/login.vue

@@ -17,16 +17,18 @@
             <div class="login-form-container">
               <div
                 class="dialog_class bgcolor tianjia"
-                style="width: 100%; height: 100%; padding: 30px"
+                style="width: 100%; height: 100%; padding: 20px 30px;"
               >
-                <el-form :model="form" label-width="80px" >
-                  <el-form-item label="用户名:" label-width="80px" class="form-item-align-left">
+                <span >煤矿灾害态势推演</span>
+                <el-form :model="form" label-width="60px" >
+                  <el-form-item label="用户名:" >
                     <el-input
+                      
                       v-model="loginform.username"
                       placeholder="请输入用户名"
                     ></el-input>
                   </el-form-item>
-                  <el-form-item label="密码:"  label-width="80px" class="form-item-align-left">
+                  <el-form-item label="密码:"  >
                     <el-input
                       v-model="loginform.password"
                       placeholder="请输入密码"
@@ -34,15 +36,9 @@
                     ></el-input>
                   </el-form-item>
 
-                  <!-- <div class="captcha-wrapper">
-                    <img :src="imageUrl" alt="验证码" class="captcha-img" />
-                    <el-input
-                      v-model="loginform.captcha"
-                      placeholder="请输入验证码"
-                    />
-                  </div> -->
-
-                  <el-button 
+                  <div style="margin-top: 30px;">
+                    <el-button 
+                    size="large"
                   class="loginbtn" 
                   @click="login" 
                   style="width: 100%;"
@@ -50,12 +46,9 @@
                   :disabled="loading"
                     >{{ loading ? '登录中...' : '登录' }}</el-button
                   >
-                  <!-- <el-button
-                    type="primary"
-                    @click="register"
-                    style="width: 100%"
-                    >注册</el-button
-                  > -->
+                  </div>
+                  
+                  
                 </el-form>
               </div>
             </div>
@@ -424,18 +417,24 @@ onUnmounted(() => {})
 .login-form-container {
   position: absolute;
   width: 400px;
-  height: 240px;
-  top: 50%;
+  height: 280px; /* 增加高度以容纳表单元素 */
+  top: 45%;
   left: 50%;
   transform: translate(-50%, -50%); /* 将登录框居中 */
-  // background-color: rgba(255, 255, 255, 0.7); /* 给登录框添加透明背景色 */
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.85); /* 轻微透明背景 */
+  
+  border-radius: 12px; /* 圆角效果 */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
+  backdrop-filter: blur(10px); /* 给背景加个模糊效果 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
-.form-item-align-left {
-  justify-content: flex-start;
+
+
+.el-form-item {
+  margin-bottom: 20px ; /* 增加表单项之间的间距 */
 }
 
 .loginbtn {
@@ -443,12 +442,40 @@ onUnmounted(() => {})
   background-color: rgba(61, 219, 252, 0.20) !important;
   box-sizing: border-box;
   border: none;
+  border-radius: 8px; /* 圆角按钮 */
+  padding: 12px; /* 增加按钮内边距 */
+  font-size: 16px;
+  font-weight: bold; /* 增加字体粗细 */
+  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; /* 平滑过渡 */
 }
 
 .loginbtn:hover {
-  background-color: rgba(61, 219, 252, 0.35); /* 鼠标悬停时改变背景色 */
+  background-color: rgba(61, 219, 252, 0.35); /* 鼠标悬停时背景色变深 */
   transform: scale(1.05); /* 鼠标悬停时轻微放大按钮 */
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加按钮的阴影 */
+}
+
+.loginbtn:disabled {
+  background-color: rgba(61, 219, 252, 0.10) !important; /* 禁用时的按钮背景色 */
+  cursor: not-allowed; /* 禁用时鼠标样式 */
 }
+
+/* 为标题添加样式 */
+.login-form-container span {
+    font-size: 20px;
+    font-weight: bold;
+    color: #2c3e50;
+    display: block;
+    text-align: center;
+    margin-bottom: 20px; /* 上下间距 */
+    padding: 10px;
+    
+    color: white;
+    border-radius: 5px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    font-family: 'Arial', sans-serif;
+  }
+
 </style>
 
 <style>