登录页修改样式

src/assets/loginmini/style/home.less

@@ -1,14 +1,10 @@
 .login-content{
-  left: 970px;
-  top: 150px;
   width: 737px;
-  height: 654px;
   opacity: 1;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.4);
   box-shadow: 0px 4px 10px  rgba(44, 83, 100, 0.1);
   backdrop-filter: blur(4px);
-  position: absolute;
   padding: 100px 167px;
 }
 .login-title{
@@ -23,7 +19,6 @@
   color: rgba(51, 54, 70, 1);
   text-align: center;
   vertical-align: top;
-
 }
 
 .login-account{

src/views/system/loginmini/Login.vue

@@ -1,73 +1,82 @@
 <template>
-  <div :class="prefixCls">
-    <div class="aui-logo" v-if="!getIsMobile">
-      <div>
-        <h3>
-          <img :src="logoImg" alt="jeecg" />
-        </h3>
-      </div>
-    </div>
-    <div v-else class="aui-phone-logo">
-      <img :src="logoImg" alt="jeecg" />
-    </div>
-    <div class="login-bg">
-      <img :src="loginBg" alt="">
-    </div>
-    <div class="login-content">
-      <div class="login-title">
-        登录 AdWeb V3
-      </div>
-      <div class="login-form-box">
-        <a-form ref="loginRef" :model="formData" >
-          <div class="login-account">
-            <div class="login-inputClear">
-              <div class="login-label">
-                <span>账 号</span>
-              </div>
-              <a-form-item>
-                <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
-              </a-form-item>
-            </div>
-            <div class="login-inputClear">
-              <div class="login-label">
-                <span>密 码</span>
-              </div>
-              <a-form-item>
-                <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
-              </a-form-item>
+  <div style="background-color: rgba(251, 251, 251, 1)">
+    <a-row>
+      <a-col :span="24">
+        <div :class="prefixCls">
+          <div style="margin:50px">
+            <div>
+              <h3>
+                <img :src="logoImg" alt="jeecg" />
+              </h3>
             </div>
-            <div class="login-inputClear">
-              <div class="login-label">
-                <span>验证码</span>
-              </div>
-              <div class="login-code">
-                <a-form-item>
-                  <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px; width: 100%;" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
-                </a-form-item>
-                <div style="margin-left: 50px">
-                  <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
-                  <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <div class="login-bg">
+          <img :src="loginBg" alt="">
+        </div>
+      </a-col>
+      <a-col :span="12">
+        <div class="login-content">
+          <div class="login-title">
+            登录 AdWeb V3
+          </div>
+          <div class="login-form-box">
+            <a-form ref="loginRef" :model="formData" >
+              <div class="login-account">
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>账 号</span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>密 码</span>
+                  </div>
+                  <a-form-item>
+                    <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px;" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
+                  </a-form-item>
+                </div>
+                <div class="login-inputClear">
+                  <div class="login-label">
+                    <span>验证码</span>
+                  </div>
+                  <div class="login-code">
+                    <a-form-item>
+                      <a-input class="auto-fill" style="padding: 0 15px;font-size: 14px; width: 100%;" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
+                    </a-form-item>
+                    <div style="margin-left: 50px">
+                      <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
+                      <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
+                    </div>
+                  </div>
+                </div>
+                <div class="aui-flex" style="padding-top: 30px">
+                  <div class="aui-flex-box">
+                    <div class="aui-choice">
+                      <a-input class="auto-fill" type="checkbox" v-model:value="rememberMe" />
+                      <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="aui-flex" style="padding-top: 30px">
-              <div class="aui-flex-box">
-                <div class="aui-choice">
-                  <a-input class="auto-fill" type="checkbox" v-model:value="rememberMe" />
-                  <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
+              <div class="aui-formButton">
+                <div class="aui-flex">
+                  <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
+                    {{ t('sys.login.loginButton') }}</a-button>
                 </div>
               </div>
-            </div>
+            </a-form>
           </div>
-          <div class="aui-formButton">
-            <div class="aui-flex">
-              <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
-                {{ t('sys.login.loginButton') }}</a-button>
-            </div>
-          </div>
-        </a-form>
-      </div>
-    </div>
+        </div>
+      </a-col>
+    </a-row>
   </div>
 </template>
 <script lang="ts" setup name="login-mini">
@@ -257,11 +266,8 @@ onMounted(() => {
     top: 0.45rem;
   }
   .login-bg{
-    width: 1045px;
-    height: 758px;
-    position: absolute;
+    width: 100%;
     z-index: -1;
-    top: 100px;
   }
 </style>