修改登录页面

src/pages/Login.vue

@@ -1,7 +1,22 @@
 <template>
-  <q-layout view="hHh lpR fFf">
+  <q-layout
+    view="hHh lpR fFf"
+    :style="
+      landspace
+        ? {
+            'background-image': 'url(login_background.png)',
+            'background-size': '100% 100%',
+            'background-repeat': 'no-repeat',
+          }
+        : {}
+    "
+  >
     <q-page-container>
-      <q-page class="row items-center justify-evenly">
+      <q-page
+        class="row items-center"
+        :class="landspace ? '' : 'justify-evenly'"
+        :style="landspace ? { left: '50%' } : {}"
+      >
         <q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }">
           <q-card-section class="text-center text-h6">
             {{ $t("login") }}
@@ -13,6 +28,8 @@
                 <q-item>
                   <q-item-section>
                     <q-input
+                      :autofocus="!data.ip_address"
+                      outlined
                       :loading="data.loading"
                       :disable="data.loading"
                       v-model="data.ip_address"
@@ -38,6 +55,9 @@
                         }
                       "
                     >
+                      <template v-slot:prepend>
+                        <q-icon name="img:login/network.png" />
+                      </template>
                       <template v-if="data.ip_address" v-slot:append>
                         <q-icon
                           name="cancel"
@@ -52,7 +72,8 @@
                 <q-item>
                   <q-item-section>
                     <q-input
-                      autofocus
+                      :autofocus="!data.user_name"
+                      outlined
                       ref="user_name"
                       :loading="data.loading"
                       :disable="data.loading"
@@ -73,6 +94,9 @@
                         }
                       "
                     >
+                      <template v-slot:prepend>
+                        <q-icon name="img:login/user.png" />
+                      </template>
                       <template v-if="data.user_name" v-slot:append>
                         <q-icon
                           name="cancel"
@@ -87,6 +111,7 @@
                 <q-item>
                   <q-item-section>
                     <q-input
+                      outlined
                       ref="password_input"
                       :loading="data.loading"
                       :disable="data.loading"
@@ -108,6 +133,9 @@
                         }
                       "
                     >
+                      <template v-slot:prepend>
+                        <q-icon name="img:login/password.png" />
+                      </template>
                       <template v-if="data.password" v-slot:append>
                         <q-icon
                           :name="
@@ -125,7 +153,7 @@
                     </q-input>
                   </q-item-section>
                 </q-item>
-                <q-item>
+                <q-item class="q-mt-md">
                   <q-item-section>
                     <q-checkbox
                       :label="$t('remember password')"
@@ -143,13 +171,17 @@
               </q-list>
             </q-form>
           </q-card-section>
-          <q-card-actions>
+          <q-card-actions class="q-px-lg">
             <q-btn
               ref="login_button"
-              class="full-width"
+              class="full-width text-h6"
               :loading="data.loading"
               :label="$t('login')"
-              color="primary"
+              style="
+                background: #273de4;
+                box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
+              "
+              text-color="white"
               @click="$refs?.login_form?.submit()"
             />
           </q-card-actions>