From b04731f4aea7934297fe103d02100756d0a9624e Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Wed, 30 Mar 2022 15:30:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/login/network.png  | Bin 0 -> 824 bytes
 public/login/password.png | Bin 0 -> 459 bytes
 public/login/user.png     | Bin 0 -> 506 bytes
 src/pages/Login.vue       |  46 ++++++++++++++++++++++++++++++++------
 4 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 public/login/network.png
 create mode 100644 public/login/password.png
 create mode 100644 public/login/user.png

diff --git a/public/login/network.png b/public/login/network.png
new file mode 100644
index 0000000000000000000000000000000000000000..71886a36ad9b27d61d76b7059780ea5dfe4f6af8
GIT binary patch
literal 824
zcmV-81IPS{P)<h;3K|Lk000e1NJLTq000*N000*V1^@s6;40Lh00092Nkl<ZNQr&b
zZOGqa6bJCn{onsKjAcnQreU5+p%C(rCQl_A<>7_MQ}e<aWiLb&c|rDqL>^xu4=t3m
zB{89pEE9Iy1H-z_(>%1@44w7;>DsURcIxW?zs~i$&UMcBe9t)}r!U-Y3fT)c;82{8
zjo5}kbSv-~p2C-tnHWrA_+Gq--Ealo#R81say)^HF~mc7Y%(Lm-hMQm%)=!(C|+Kg
z^NQwY+=Rcd2Djs7ypC(Jb}HlFU>}TRzYJ&Q|E`$8-uNE3-~&95bMb57sq-KE#+Tzs
zd>Tkb^ZP^2w`P6a+<6eM;w#*V-|!Ajz?RPV9hif&vi}?_F)jFhfz6nU>+m;@!VH`k
z+@Hza^YC!xri{<T1z|)doA5O5!l^hChha8O!nc9s?RdMfxm&hA!m(xi*05l#`CvgH
zSd-Psv$z_+H@XeDERmM{gEw&7AYr}KOY9MWrj=c?X7}`~lf+gY#jHUxzpQsy%vjgc
zO$6(So_<5TZKX&tK1?C~iRsPZXn5S}rboYLPrp5hosm18Ze5jsF=16xt>wjWSf8k-
zMOVMa<CAcDkVtmN(fBY<j^z7U!w`Q-E_cT74^%6gf-1b1;=VxE896xjm-IZpv5aq-
zr14bYeAi=2$xn%LQ===V#)ES!I}*BIxY<gDdq_{$VLr2`pVvg!$${8^5XxQDI~+^l
zw6ZN&ukGpUyI*>`Yl>CF^n_O`jD#({dSN_04Ts|ZoPr0!?Sk^n=vVZNpIt>XOecIF
zFJOKStDG-Pc$?$dcpm>Ft>9!_k2COGV|Z!W^75{6EyBmRDt%*d9$l5*-O1dv+HQO;
zP6Jz%992PGiDNV^cWb;}pX?8s9??lv?H);B*Ba)B46D<2=cGpJk)6ie#`Ki;GL1?e
z$0Lmc#r3ZIZ%+3s!^QoAt_DjL(+=s+&|*m?t!8H>sghN*@}5Lgm{$!H8}1HeYs8gP
z=Va9VC;vD7t8W*6`zG|)Qh~K<|5m1dO`>{WXTiVNhRM=GpcY;L0000<MNUMnLSTYl
CJEn91

literal 0
HcmV?d00001

diff --git a/public/login/password.png b/public/login/password.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cc686b97e865f197a2a2b0531d94ee558211cbf
GIT binary patch
literal 459
zcmV;+0W|)JP)<h;3K|Lk000e1NJLTq000gE000>X1^@s60h=H40004!Nkl<ZIE{_e
z&x=oC6vy$`+#zNZTT2^K6C1@2DGMS0fJVuJjg_Lr!U`+1kcHSN3$eA81&U@t7OW&2
z5t=6XIbS+;9z8wo%-m1i?!C`F?{m&`&Ux<Gt`iFyO<^N8VG_^q1fOfO6%BMA2e1XJ
ztM&Idi<>PthI4tf&O+;P9jkCH7P|bf52qJ_io*74{Sw-l-iqGfBu+JOWHwV$4d4*Q
z^W#?>&Vu~Gy>wKxCmck?pXsS+4PGV``kppL>mt)G4QeoSJns`YQe_ji&#_SUIMaZa
z@B%k*u>vE&(}-9Pz#P^tQB~<|FFthD;tqW3F)n+3jiUjn+7Wt%?YP^3KX3;JF<Tb<
zW>vOiGM~R;Ly1(>^-=hk_utK6{8QhEjaOAXmPPy08udl&GS$!-Y{su4U~GDn&oMRA
zc{Z0#byT(BG9KgY&{U%Zq1$+n=W*GHwJu~kRt||cs*15K!FNNz803=beq6!UAz&0H
z{yowB(Ea8hFA9bpVmEGOJLX%1rHb<?kI{b+`~@UBRK>QOLTdm3002ovPDHLkV1hde
B&4K^`

literal 0
HcmV?d00001

diff --git a/public/login/user.png b/public/login/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..408ad53d3492e08e0464d3cf3e5bb613421f8136
GIT binary patch
literal 506
zcmV<W0R{evP)<h;3K|Lk000e1NJLTq000*N000*V1^@s6;40Lh0005ONkl<ZNQtf0
zO^8on6vy$;OfpJVN)jc)GzuB9Frrw@(#FDDDG4hZFR_@E8nYWD3(;hw*ou(yGDc*f
zh{949C^A@Bc<HHg>vp^U|Gjtm|LS(`xzBUI&wb8w&beJ15B^a@^RXTa@CncGuIjaE
zHNY3KujKg+?84+!;M4IE%Ww-9@BwqM6MMq%!^fuZn*mOstA(+9xPtp}EiD6dw*aU3
zZoyayIMV|h#}aI70^b|<SgUP?M(_`Zo50uMFTPa3Mb`8;fu{`UssT=#iC<0N4+Flk
z0z4yXV7v)@EbRFT_~o#}P2g{F8Uwf#IbYOC?7%fVDTB1j^Aq@tQEbKCToG-KR&Wl7
zS^?U@2O{5-W@CHFoD~?v?Yi)}xQ-3sr?@}Gdwh@VSd29|icNSOi@(Z)ie0fUCMKPV
zkbG;iyB-|Cnefvt?qq}c1D%%xr>`EW04M#%SuBrMoWirV3_cMyHLJ%J(4yW%^GdDY
zQ4ziy3$ee>PoRY+BMEx4Fl90S8LQ5kA~>%XSd|XGJG+UZ>4b)YF__@1!<pz1JWGoH
w1YZ=+*ABrmPH!rr)Ej<8k#s_-(2n5we|jHTHNij;mH+?%07*qoM6N<$f|xbyA^-pY

literal 0
HcmV?d00001

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 7527bb5..a41715f 100644
--- a/src/pages/Login.vue
+++ b/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>