fix: 登录样式

src/pages/login/index.vue

@@ -1,28 +1,66 @@
 <template>
-  <div class="login" >
-    <div class="app-name" >蛟龙云</div>
-    <a-row :gutter="[16, 16]" style="margin-top: 40px;">
-      <a-col span="24" >
-        <a-input v-model:value="state.userAccount" style="height: 40px;" placeholder="请输入账号" ></a-input>
-      </a-col>
-      <a-col span="24">
-        <a-input-password v-model:value="state.password" style="height: 40px;" placeholder="请输入密码" ></a-input-password>
-      </a-col>
-      <a-col span="24">
-        <a-button style="width: 100%;" type="primary" @click="login"> 登陆</a-button>
-      </a-col>
-    </a-row>
-  </div>
+  <a-row
+    style="width: 100vw; height: 100vh, overflow: hidden"
+    justify="center"
+  >
+    <a-col :span="16" style="height: 100vh;" >
+      <img
+        style="width: 100%; height: 100%; object-fit: cover"
+        :src='staticImg.loginBg'
+        alt=""
+      />
+    </a-col>
+    <a-col
+      :span="8"
+      style="display: flex; justify-content: center;align-items: center"
+      >
+      <a-row :gutter="[8, 8]" >
+        <a-col class="app-name" :span="24" style="display: flex;justify-content: center;">
+          蛟龙云联
+        </a-col>
+        <a-col :span="24" >
+          <a-form
+            name="basic"
+            :label-col="{ span: 8 }"
+            :wrapper-col="{ span: 16 }"
+            autocomplete="off"
+          >
+            <a-form-item
+              label="账号"
+              name="userAccount"
+              :rules="[{ required: true, message: '请填写账号' }]"
+            >
+              <a-input style="width: 328px;height: 42px;"  v-model:value="state.userAccount" />
+            </a-form-item>
+
+            <a-form-item
+              label="密码"
+              name="password"
+              :rules="[{ required: true, message: '请输入密码' }]"
+            >
+              <a-input-password  style="width: 328px;height: 42px;"   v-model:value="state.password" />
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :span="24" style="display: flex;justify-content: center;">
+          <a-button style="width: 200px;" type="primary" @click="login">登录</a-button>
+        </a-col>
+      </a-row>
+    </a-col>
+  </a-row>
 </template>
 <script lang='ts' setup >
 import { useRoute } from 'vue-router'
 import { useUserStore } from '@/store/index'
 import { reactive } from 'vue'
+import { useStaticImg } from '@/utils/static'
 
 // const { redirct_url } = useRoute().query
 
 const userStore = useUserStore()
 
+const staticImg = useStaticImg()
+
 const state = reactive({
   userAccount: '',
   password: ''
@@ -34,15 +72,9 @@ const login = () => {
 
 </script>
 <style lang='less' scoped >
-.login {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  .app-name {
-    font: 80px 'Italiana', sans-serif;
-    text-transform: lowercase;
-    text-align: center;
-  }
+.app-name {
+  font: 40px 'Italiana', sans-serif;
+  text-transform: lowercase;
+  text-align: center;
 }
 </style>

src/utils/static.ts

@@ -10,6 +10,7 @@ requireAsset.keys().forEach(key => {
 
 interface UseStaticImgExport {
   productIntroduction: string
+  loginBg: string
 }
 
 export const useStaticImg = (): UseStaticImgExport => inject('useStaticImg')!