瀏覽代碼

修改登录页

zhuang 1 年之前
父節點
當前提交
3e12d88068

+ 36 - 12
assets/ic.css

@@ -4,7 +4,31 @@
   background-repeat: no-repeat !important;
   background-size: cover !important;
 }
-
+.loginContainer {
+  background-image: url(/assets/image/bg/left-login.png) !important;
+  background-repeat: no-repeat !important;
+  background-size: 40% 100% !important;
+  width: 64% !important;
+}
+.login-container{
+  background-image: url(/assets/image/bg/right-login.png) !important;
+  float: right !important;
+  width: 60% !important;
+}
+.login-content{
+  background-color: #fff;
+  top: 10% !important;
+  margin-top: 0 !important;
+  height: 80% !important;
+  border-radius: 10px !important;
+  display: flex !important;
+  justify-content: space-evenly !important;
+  align-items: center !important;
+  flex-direction: column !important;
+}
+/*.login-content .ng-star-inserted{*/
+/*  margin-top: 35% !important;*/
+/*}*/
 /* 登录页右上角logo */
 /*.login-top-right-corner {*/
 /*  background-image: url(/assets/image/bg/login-logo-mini.png) !important;*/
@@ -14,20 +38,20 @@
 /*  height: 44px;*/
 /*}*/
 
-.loginContainer{
-  position: absolute !important;
-  right: 0 !important;
-  height: 100% !important;
-  background-color: white !important;
-  transform: translate(0) !important;
-  top: auto !important;
-  left: auto !important;
-  width: auto !important;
-}
+/*.loginContainer{*/
+/*  position: absolute !important;*/
+/*  right: 0 !important;*/
+/*  height: 100% !important;*/
+/*  background-color: white !important;*/
+/*  transform: translate(0) !important;*/
+/*  top: auto !important;*/
+/*  left: auto !important;*/
+/*  width: auto !important;*/
+/*}*/
 .title{
   color: #1c2127 !important;
   font-size: 24px !important;
-
+  font-weight: 500 !important;
 }
 
 /* banner图标完整版 */

二進制
assets/image/bg-login.png


二進制
assets/image/left-login.png


二進制
assets/image/right-login.png


+ 36 - 0
src/app/layout/passport/passport.component.html

@@ -0,0 +1,36 @@
+<div class="container ic-login-container">
+  <div [ngStyle]="styleMessage.bodyStyles">
+    <!-- <header-i18n [showLangText]="false" class="langs" [ngStyle]="styleMessage.headerStyles"></header-i18n> -->
+
+    <div class="wrap loginContainer" [ngStyle]="styleMessage.loginContainer">
+      <div [ngStyle]="styleMessage.loginLeft">
+        <div [ngStyle]="styleMessage.loginLeftContainer">
+          <p [ngStyle]="styleMessage.loginLeftTitleStyles">
+            {{ styleMessage.loginLeftTitleTop }}
+          </p>
+          <p [ngStyle]="styleMessage.loginLeftTitleStyles">
+            {{ styleMessage.loginLeftTitleBottom }}
+          </p>
+        </div>
+      </div>
+
+      <div class="login-container" [ngStyle]="styleMessage.loginRight">
+        <div [ngStyle]="styleMessage.loginRightContainer" class="login-content">
+          <div class="top">
+            <div class="head">
+              <span class="title" style="color: #d4b187">{{ loginTitle }}</span>
+            </div>
+          </div>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="position: fixed; top: 20px; right: 35px; float: left; font-size: 25px">
+    <div class="login-top-right-corner"></div>
+  </div>
+
+  <div class="bottom-text-wrapper">
+    <div style="margin: auto">{{ styleMessage.loginLeftTitleBottom }}</div>
+  </div>
+</div>

+ 94 - 0
src/app/routes/passport/login/login.component.html

@@ -0,0 +1,94 @@
+<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
+    <nz-alert *ngIf="type === 0 && error && code != '651'" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg">
+    </nz-alert>
+    <nz-alert
+      *ngIf="error && code == '651'"
+      [nzType]="'error'"
+      [nzMessage]="error"
+      [nzCloseText]="'申请license'"
+      (nzOnClose)="getComputerInfo()"
+    ></nz-alert>
+    <nz-form-item>
+      <nz-form-control [nzErrorTip]="'Please enter user name!' | i18n">
+        <nz-input-group nzSize="large" nzPrefixIcon="user">
+          <input nz-input formControlName="userName" placeholder="请输入用户名" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control nzErrorTip="'Please enter password!' | i18n">
+        <nz-input-group nzSize="large" nzPrefixIcon="lock">
+          <input nz-input type="password" formControlName="password" placeholder="请输入密码" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control>
+        <nz-input-group nzSize="large" nzPrefixIcon="phone">
+          <input nz-input type="text" formControlName="phone" placeholder="手机号" [disabled]="true"/>
+        </nz-input-group>
+      </nz-form-control>
+      <button nz-button nzType="primary" type="button" nzSize="large">获取验证码</button>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-control nzErrorTip="'Please enter code!' | i18n">
+        <nz-input-group nzSize="large" nzPrefixIcon="code">
+          <input nz-input type="text" formControlName="code" placeholder="请输入验证码" />
+        </nz-input-group>
+      </nz-form-control>
+    </nz-form-item>
+
+
+  <nz-form-item nz-row nzJustify="end">
+    <nz-col
+      *ngIf="showForgetPasswordButton"
+      [nzSpan]="12"
+      [ngClass]="{ 'text-right': !showRegisterButton }"
+      class="login-forget-button-wrapper"
+    >
+      <ng-container>
+        <label nz-checkbox>{{ '记住密码' | i18n }}</label>
+      </ng-container>
+    </nz-col>
+    <nz-col *ngIf="showRegisterButton" [nzSpan]="12" class="text-right login-register-button-wrapper">
+      <ng-container>
+<!--        <a class="forgot login-register-button" (click)="goToRegister()">{{ registerButtonName | i18n }}</a>-->
+        <a class="forgot login-forget-button" (click)="forgetPassword()">{{ '忘记密码?' | i18n }}</a>
+      </ng-container>
+    </nz-col>
+  </nz-form-item>
+  <nz-form-item>
+    <button class="ic-login-button" nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="http.loading" nzBlock>
+      {{ 'app.login.login' | i18n }}
+    </button>
+  </nz-form-item>
+</form>
+
+<nz-modal
+  [(nzVisible)]="isPwVisible"
+  [nzTitle]="modalTitle"
+  [nzContent]="modalContent"
+  [nzFooter]="modalFooter"
+  (nzOnCancel)="handleCancel()"
+>
+  <ng-template #modalTitle><span>密码已过期,请修改密码!</span></ng-template>
+
+  <ng-template #modalContent>
+    <sf #baseSf [formData]="formData" [schema]="schema" [button]="'none'" [cleanValue]="true"></sf>
+  </ng-template>
+
+  <ng-template #modalFooter>
+    <button nz-button nzType="primary" (click)="destroyTplModal($event)" [nzLoading]="tplModalButtonLoading"> 提交 </button>
+  </ng-template>
+</nz-modal>
+
+<nz-upload nzAction="inControlServer/sys/license/install?_allow_anonymous=true" *ngIf="code == '651'">
+  <button nz-button><i nz-icon nzType="upload"></i><span>证书安装</span></button>
+</nz-upload>
+
+<nz-modal [(nzVisible)]="computerModel" nzTitle="本机信息" (nzOnCancel)="computerModel = false" nzFooter=" ">
+  <nz-alert [nzType]="'error'" [nzMessage]="promptInfo" class="mb-lg"></nz-alert>
+  <label>ip</label><input nz-input [(ngModel)]="computerIp" /> <label>mac</label><input nz-input [(ngModel)]="computerMac" />
+  <label>cpu序列号</label><input nz-input [(ngModel)]="computerSerial" /> <label>主板序列号</label
+  ><input nz-input [(ngModel)]="mainBoardSerial" />
+</nz-modal>