登录页修改

src/layout/components/HeaderWrap.vue

@@ -79,9 +79,10 @@ const hasUnRead=ref(false)//是否有未读
   align-items: center;
   color: #fff;
   .logo-img{
-    width: 180px;
-    height: 100%;
-    margin-right: 30px;
+    width: 140px;
+    display: block;
+    margin-left: 20px;
+    margin-right: 40px;
   }
   :deep(.el-breadcrumb__item){
     .el-breadcrumb__inner{

src/views/Login.vue

@@ -53,7 +53,7 @@ function getMenuList() {
   apiSystemRole.menuData().then(res => {
     if (res.Ret === 200) {
       const arr = res.Data || []
-      if(arr.length===0){
+      if (arr.length === 0) {
         ElMessage.warning('您暂无任何菜单权限请联系管理员')
         return
       }
@@ -94,43 +94,51 @@ onMounted(() => {
 
 <template>
   <div class="flex bg-white login-page">
-    <img class="bg-img" src="@/assets/imgs/login_bg.png" alt="" />
+    <div class="left-img-wrap">
+      <img class="logo-img" src="@/assets/imgs/logo_login.png" alt="" />
+    </div>
+
     <div class="form-wrap">
-      <h3 class="title">运营管理系统</h3>
-      <el-form
-        ref="ruleFormRef"
-        :model="formState"
-        :rules="formRules"
-        class="form-box"
-      >
-        <el-form-item prop="account">
-          <el-input v-model="formState.account" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item prop="pwd">
-          <el-input
-            v-model="formState.pwd"
-            placeholder="请输入密码"
-            type="password"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item class="remember-cont" prop="checked">
-          <el-checkbox v-model="formState.checked" class="remember">
-            记住账号密码
-            <el-tooltip effect="dark" content="有效期60天" placement="top">
-              <el-icon color="#333"><i-ep-QuestionFilled /></el-icon>
-            </el-tooltip>
-          </el-checkbox>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            style="width: 100%; margin-top: 50px"
-            type="primary"
-            @click="submitForm(ruleFormRef)"
-            >登录</el-button
-          >
-        </el-form-item>
-      </el-form>
+      <div class="form-content">
+        <h1 class="login-title">Login</h1>
+        <h3 class="title">运营管理系统</h3>
+        <el-form
+          ref="ruleFormRef"
+          :model="formState"
+          :rules="formRules"
+          class="form-box"
+          label-position="top"
+        >
+          <el-form-item prop="account" label="用户名称">
+            <el-input v-model="formState.account" placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item prop="pwd" label="密码">
+            <el-input
+              v-model="formState.pwd"
+              placeholder="请输入密码"
+              type="password"
+              show-password
+            />
+          </el-form-item>
+          <el-form-item class="remember-cont" prop="checked">
+            <el-checkbox v-model="formState.checked" class="remember">
+              记住密码
+              <el-tooltip effect="dark" content="有效期60天" placement="top">
+                <el-icon color="#333"><i-ep-QuestionFilled /></el-icon>
+              </el-tooltip>
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              style="width: 100%; margin-top: 50px"
+              type="primary"
+              color="#091F6B"
+              @click="submitForm(ruleFormRef)"
+              >登录</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
   </div>
 </template>
@@ -139,19 +147,43 @@ onMounted(() => {
 .login-page {
   height: 100%;
   align-items: center;
-  padding: 30px;
-  .bg-img {
-    max-width: 800px;
+  .left-img-wrap {
+    width: 838px;
+    height: 100%;
+    position: relative;
+    background-image: url("@/assets/imgs/login_bg.png");
+    background-position: bottom right;
+    background-size: cover;
+    background-repeat: no-repeat;
+    .logo-img {
+      position: absolute;
+      top: 193px;
+      left: 88px;
+    }
   }
   .form-wrap {
     flex: 1;
+    padding-bottom: 200px;
+    .form-content{
+      width: 600px;
+      margin: 0 auto;
+      --el-component-size: 60px;
+      --el-color-primary:#091F6B !important;
+    }
+    .login-title{
+      font-size: 40px;
+      margin-bottom: 36px;
+    }
     .title {
-      text-align: center;
+      margin-top: 0;
       font-size: 38px;
     }
     .form-box {
-      margin: 0 auto;
-      width: 400px;
+      margin-top: 78px;
+      width: 100%;
+      :deep(.el-button){
+        height: 60px;
+      }
     }
   }
 }