feat: login style

Signed-off-by: carlos <568187512@qq.com>

src/app/pages/login/login.component.html

@@ -1,60 +1,49 @@
 <div
-  class="w-screen h-screen bg-[url('/assets/images/login/bg.png')] bg-center bg-no-repeat bg-[length:100%_100%] flex items-center"
+  class="w-screen h-screen bg-[url('/assets/images/login/bg.png')] bg-center bg-no-repeat bg-cover flex items-center"
 >
   <div class="flex-auto"></div>
-  <div class="min-w-[1350px] h-[750px] bg-[#FFFFFF] bg-opacity-[60%] rounded-[24px]">
-    <div class="absolute">
-      <div class="relative z-[1] -top-[80px] -left-[35px]">
-        <img src="/assets/images/login/trophy.png" alt="" class="w-[40%] h-40%] min-w-[266px]" />
-      </div>
-    </div>
+  <div class="min-w-[1350px] h-[750px] rounded-[24px]">
     <div class="h-[100%] flex items-center">
+      <div class="w-[60%]"></div>
       <div class="w-[40%] flex justify-center gap-[20px]">
         <div class="flex-auto"></div>
-        <div class="flex flex-col justify-center">
+        <div class="flex flex-col">
+          <div class="flex text-[24px] text-white leading-[28px]">WELCOME TO DUAL PREVENTION</div>
+          <div class="text-white pt-4 pb-8">
+            <span class="text-[18px]">欢迎登录，</span>
+            <span class="text-[28px] font-bold">双重预防信息管理系统！</span>
+          </div>
           <form nz-form [formGroup]="validateForm" class="flex flex-col gap-[20px]">
-            <div class="flex justify-center text-[41px] font-fangzheng text-[#185BCC] leading-[47px]">
-              欢迎登录双预防系统
-            </div>
-            <div class="flex justify-center text-[20px] text-[#101015] leading-[28px]">WELCOME！</div>
             <nz-form-item>
               <nz-form-control nzErrorTip="请输入用户名/账户名!">
-                <div class="flex justify-center">
-                  <nz-input-group [nzPrefix]="prefixTemplateUser" class="!rounded-[10px] w-[389px] h-[45px]">
-                    <input
-                      nz-input
-                      type="text"
-                      placeholder="用户名/账户名"
-                      formControlName="userName"
-                      class="bg-[#FFFFFF] !pl-[10px]"
-                    />
-                  </nz-input-group>
-                  <ng-template #prefixTemplateUser>
-                    <span nz-icon nzType="icons:login-user" class="text-xl text-[#3E3E47] opacity-80"></span>
-                  </ng-template>
+                <div class="flex justify-left">
+                  <input
+                    nz-input
+                    type="text"
+                    placeholder="用户名/账户名"
+                    formControlName="userName"
+                    class="!pl-[22px] !rounded-[28px] w-[363px] h-[57px] bg-[transparent] text-white"
+                  />
                 </div>
               </nz-form-control>
             </nz-form-item>
-            <nz-form-item>
+            <nz-form-item class="-mt-4">
               <nz-form-control nzErrorTip="请输入密码!">
-                <div class="flex justify-center">
+                <div class="flex justify-left">
                   <nz-input-group
-                    [nzPrefix]="prefixTemplateLock"
                     [nzSuffix]="suffixTemplateInfo"
-                    class="!rounded-[10px] w-[389px] h-[45px]"
+                    class="!rounded-[28px] w-[363px] h-[57px] !pr-[22px] bg-[transparent]"
                   >
                     <input
                       nz-input
                       [type]="displayPassword ? 'text' : 'password'"
                       placeholder="密码"
                       formControlName="password"
-                      class="bg-[transparent] !pl-[10px]"
+                      class="bg-[transparent] !pl-[10px] !pr-[10px] text-white"
                       (keyup.enter)="submitForm()"
                     />
                   </nz-input-group>
-                  <ng-template #prefixTemplateLock>
-                    <span nz-icon nzType="icons:login-lock" class="text-xl text-[#3E3E47] opacity-80"></span>
-                  </ng-template>
+
                   <ng-template #suffixTemplateInfo>
                     <span
                       nz-icon
@@ -68,30 +57,29 @@
                 </div>
               </nz-form-control>
             </nz-form-item>
+
+            <div class="flex justify-between -mt-6 mb-2">
+              <div class="pl-4">
+                <label class="" nz-checkbox formControlName="remember" class="custom-checkbox">
+                  <span class="text-white">记住我</span>
+                </label>
+              </div>
+              <div class="flex pr-8 justify-end text-[12px] text-white leading-[17px]">忘记密码？</div>
+            </div>
+
             <button
               nz-button
               nzType="primary"
-              class="h-[55px] flex-center rounded-[10px]"
+              class="h-[51px] w-[363px] flex-center rounded-[25px]"
               [nzLoading]="loading"
               (click)="submitForm()"
             >
-              <span class="text-base">登录</span>
+              <span class="text-base text-white">登录</span>
             </button>
-            <div class="flex justify-end text-[12px] text-[#185BCC] leading-[17px]">忘记密码？</div>
           </form>
         </div>
         <div class="flex-auto"></div>
       </div>
-      <div class="w-[60%] h-[100%] flex">
-        <div class="w-[2%]"></div>
-        <div class="w-[96%]">
-          <div class="h-[20%]"></div>
-          <div
-            class="h-[80%] bg-[url('/assets/images/login/office.png')] bg-bottom bg-no-repeat bg-[length:100%_100%]"
-          ></div>
-        </div>
-        <div class="w-[2%]"></div>
-      </div>
     </div>
   </div>
   <div class="flex-auto"></div>

src/app/pages/login/login.component.less

@@ -0,0 +1,5 @@
+.custom-checkbox {
+  ::ng-deep .ant-checkbox-inner {
+    background-color: rgba(255, 255, 255, 0.34);
+  }
+}

src/app/pages/login/login.component.ts

@@ -31,6 +31,7 @@ export class LoginComponent {
     this.validateForm = this.fb.group({
       userName: [null, [Validators.required]],
       password: [null, [Validators.required]],
+      remember: [false],
     });
     this.initUserInfo();
   }

src/assets/icons/eye-invisible.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录页" transform="translate(-697.000000, -578.000000)" fill="currentcolor">
+            <g id="color-2" transform="translate(697.000000, 578.000000)">
+                <path d="M17.7071068,0.292893219 C18.0675907,0.65337718 18.0953203,1.22060824 17.7902954,1.61289944 L17.7071068,1.70710678 L15.3353025,4.0776827 C16.7621583,5.04638485 18.3170575,6.35382395 20,8 C15.9106622,12 12.5773288,14 10,14 C8.93907773,14 7.75005466,13.661111 6.43293079,12.983333 L3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.93240926,15.3466228 1.90467972,14.7793918 2.20970461,14.3871006 L2.29289322,14.2928932 L4.66469751,11.9223173 C3.23784167,10.9536151 1.6829425,9.64617605 0,8 C4.08933783,4 7.42267117,2 10,2 C11.0606545,2 12.2493451,2.33871794 13.5660719,3.01615383 L16.2928932,0.292893219 C16.6834175,-0.0976310729 17.3165825,-0.0976310729 17.7071068,0.292893219 Z M13.8947387,5.51991376 L11.9325244,7.48295875 C11.9765379,7.64788543 12,7.82120278 12,8 C12,9.1045695 11.1045695,10 10,10 C9.82120278,10 9.64788543,9.97653788 9.48295875,9.93252443 L7.93015289,11.4868852 C8.64224865,11.7986655 9.27834536,11.9672546 9.83348345,11.995675 L10,12 C11.5834916,12 13.8709734,10.7913204 16.7364482,8.29717144 L17.073,8 L17.0456693,7.97498119 C15.9044001,6.95956849 14.8515474,6.14276218 13.8947387,5.51991376 Z M10,4 C8.4165084,4 6.12902656,5.20867963 3.26355178,7.70282856 L2.926,8 L2.95433066,8.02501881 C4.09559994,9.04043151 5.14845257,9.85723782 6.10526125,10.4800862 L8.06747557,8.51704125 C8.02346212,8.35211457 8,8.17879722 8,8 C8,6.8954305 8.8954305,6 10,6 C10.1787972,6 10.3521146,6.02346212 10.5170412,6.06747557 L12.0698471,4.51311482 C11.3577513,4.20133446 10.7216546,4.0327454 10.1665165,4.00432501 L10,4 Z" id="color"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/eye.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="12px" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="题库管理" transform="translate(-687.000000, -256.000000)">
+            <g id="inbox" transform="translate(315.000000, 99.000000)">
+                <g id="编组-7" transform="translate(13.000000, 136.000000)">
+                    <g id="编组-5" transform="translate(357.000000, 13.000000)">
+                        <g id="00-General-/-01-Icons-/-01-Actions-/-01-Add-rounded" transform="translate(0.000000, 2.000000)">
+                            <rect id="BG" x="0" y="0" width="24" height="24"></rect>
+                            <path d="M12,6 C14.5773288,6 17.9106622,8 22,12 C17.9106622,16 14.5773288,18 12,18 C9.42267117,18 6.08933783,16 2,12 C6.08933783,8 9.42267117,6 12,6 Z M12,8 C10.4165084,8 8.12902656,9.20867963 5.26355178,11.7028286 L4.926,12 L4.95433066,12.0250188 C7.86439017,14.6141636 10.1995904,15.9120276 11.8334835,15.995675 L12,16 C13.5834916,16 15.8709734,14.7913204 18.7364482,12.2971714 L19.073,12 L19.0456693,11.9749812 C16.1356098,9.38583643 13.8004096,8.08797245 12.1665165,8.00432501 L12,8 Z M12,10 C13.1045695,10 14,10.8954305 14,12 C14,13.1045695 13.1045695,14 12,14 C10.8954305,14 10,13.1045695 10,12 C10,10.8954305 10.8954305,10 12,10 Z" id="color" fill="currentcolor"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>