Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-03-28 11:10:41 +08:00
parent e33c956306
commit f8cb159203
7 changed files with 88 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout/passport/passport.component.html
View File

@ -9,8 +9,8 @@
</nz-header>
<nz-content class="content">
<nz-row>
<nz-col nzSpan="14">
<div>
<nz-col nzSpan="14" style="max-height : calc(100% - 64px);">
<div class="earth-box">
<img class="earth" src="./assets/images/login/earth.png" alt="">
</div>
</nz-col>

11
src/app/layout/passport/passport.component.less
View File

@ -8,18 +8,25 @@
.ant-layout-header {
background: #ffffff;
box-shadow: 0px 5px 5px #d1d1d1;
// box-shadow: 0px 5px 5px #d1d1d1;
}
nz-content {
background : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
background-size: cover
background-size: cover;
overflow : hidden;
}
passport-login {
background: transparent;
}
.earth-box {
background : url('../../../assets/images/login/5-地球元素02.png') 100% 100% no-repeat;
background-size: cover;
overflow : hidden;
}
.earth {
animation : eatthAnimation 60s linear infinite;
-webkit-animation: eatthAnimation 60s linear infinite;

129
src/app/routes/passport/components/login/login.component.html
View File

@ -10,141 +10,88 @@
-->
<div class="body-box">
<div></div>
<div>
</div>
<div>
<div class="box-content d-flex">
<!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
<div class="login-box">
<div class="login-box-content">
<nz-tabset (nzSelectChange)="switch($event)">
<img src="./assets/images/login/运多星logo-01.png" alt="" style="width: 130px;margin: auto;">
<nz-tabset (nzSelectChange)="switch($event)" class="mt-md text-left">
<nz-tab nzTitle="密码登录">
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
<ng-template sf-template="username" let-i let-ui="ui" let-schema="schema">
<nz-input-group [nzSuffix]="inputClearTpl">
<input
type="text"
nz-input
[ngModel]="i.value"
(ngModelChange)="i.setValue($event)"
(keyup.enter)="submit()"
placeholder="请输入手机号"
/>
<input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
(keyup.enter)="submit()" placeholder="手机号码" />
</nz-input-group>
<ng-template #inputClearTpl>
<i
nz-icon
class="ant-input-clear-icon"
nzTheme="fill"
nzType="close-circle"
*ngIf="i.value"
style="font-size: 16px"
(click)="i.setValue(null)"
></i>
<i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
style="font-size: 16px" (click)="i.setValue(null)"></i>
</ng-template>
</ng-template>
<ng-template sf-template="password" let-i let-ui="ui" let-schema="schema">
<nz-input-group [nzSuffix]="inputClearTpl">
<input
[type]="isPasswordType ? 'password' : 'text'"
nz-input
[ngModel]="i.value"
(ngModelChange)="i.setValue($event)"
placeholder="请输入密码"
(keyup.enter)="submit()"
/>
<input [type]="isPasswordType ? 'password' : 'text'" nz-input [ngModel]="i.value"
(ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" />
</nz-input-group>
<ng-template #inputClearTpl>
<i
*ngIf="i.value && isPasswordType"
nz-icon
class="ant-input-clear-icon"
style="font-size: 18px"
nzType="eye"
nzTheme="fill"
(click)="isPasswordType = false"
></i>
<i
*ngIf="i.value && !isPasswordType"
nz-icon
class="ant-input-clear-icon"
style="font-size: 18px"
nzType="eye-invisible"
nzTheme="fill"
(click)="isPasswordType = true"
></i>
<i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
nzType="eye" nzTheme="fill" (click)="isPasswordType = false"></i>
<i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
nzType="eye-invisible" nzTheme="fill" (click)="isPasswordType = true"></i>
</ng-template>
</ng-template>
</sf>
</nz-tab>
<nz-tab nzTitle="验证码登录">
<nz-tab nzTitle="短信登录">
<sf #captchaSF [layout]="'vertical'" [schema]="captchaSchema" [ui]="captchaUI" [button]="'none'">
<ng-template sf-template="phone" let-i let-ui="ui" let-schema="schema">
<nz-input-group [nzSuffix]="inputClearTpl">
<input
type="text"
nz-input
[ngModel]="i.value"
(ngModelChange)="i.setValue($event)"
(keyup.enter)="submit()"
placeholder="请输入手机号"
/>
<input type="text" nz-input [ngModel]="i.value" (ngModelChange)="i.setValue($event)"
(keyup.enter)="submit()" placeholder="手机号码" />
</nz-input-group>
<ng-template #inputClearTpl>
<i
nz-icon
class="ant-input-clear-icon"
nzTheme="fill"
nzType="close-circle"
*ngIf="i.value"
style="font-size: 16px"
(click)="i.setValue(null)"
></i>
<i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
style="font-size: 16px" (click)="i.setValue(null)"></i>
</ng-template>
</ng-template>
<ng-template sf-template="smsCode" let-me let-ui="ui" let-schema="schema">
<nz-input-group nzSearch [nzSuffix]="suffixTemplateInfo">
<input
nz-input
type="text"
[maxLength]="6"
placeholder="验证码"
[attr.id]="me.id"
[disabled]="me.disabled"
[attr.disabled]="me.disabled"
[nzSize]="ui.size"
[ngModel]="me.formProperty.value"
(ngModelChange)="me.setValue($event)"
(keyup.enter)="submit()"
/>
<input nz-input type="text" [maxLength]="6" placeholder="验证码" [attr.id]="me.id"
[disabled]="me.disabled" [attr.disabled]="me.disabled" [nzSize]="ui.size"
[ngModel]="me.formProperty.value" (ngModelChange)="me.setValue($event)"
(keyup.enter)="submit()" />
</nz-input-group>
</ng-template>
</sf>
</nz-tab>
</nz-tabset>
<button
nz-button
type="button"
nzType="primary"
nzSize="large"
(click)="submit()"
[nzLoading]="userSrv?.http?.loading"
nzBlock
class="mt-md"
>
<button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
[nzLoading]="userSrv?.http?.loading" nzBlock class="but">
登录
</button>
<p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
<nz-divider></nz-divider>
<button nz-button type="button" nzSize="large" nzDanger nzBlock class="but">
还没有账号？免费注册
</button><br>
<button nz-button type="button" nzSize="large" nzDanger nzBlock class="but mt-md">
忘记密码？重置
</button>
<!-- <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
<p class="agreement">
登录即代表您同意 <a target="_blank" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
<a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
</p>
</p> -->
</div>
</div>
</div>
</div>
<div class="box-footer">
深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p>
<!-- 深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p> -->
</div>
</div>
@ -153,4 +100,4 @@
<span class="msg-btn" style="color: #26282a; cursor: pointer; font-size: 14px" (click)="getCaptcha()">获取验证码</span>
</ng-container>
<ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
</ng-template>
</ng-template>

54
src/app/routes/passport/components/login/login.component.less
View File

@ -5,14 +5,14 @@
flex-direction : column;
justify-content : space-between;
width : 100%;
max-width : 960px;
max-width : 473px;
height : calc(100vh - 64px);
margin : auto;
-webkit-box-orient : vertical;
.box-content {
width : 100%;
height : 600px;
height : 630px;
border-radius: 0px 16px 16px 0px;
.login-logo {
@ -25,9 +25,10 @@
background-color: #fff;
.login-box-content {
max-width: 434px;
margin : auto;
padding : 88px 0 38px;
max-width : 340px;
margin : auto;
padding : 46px 0 38px;
text-align: center;
}
}
@ -107,7 +108,7 @@
width: 281px;
.ant-tabs-tab-btn {
font-size : 24px;
font-size : 20px;
color : #86909C;
font-weight: 500;
}
@ -119,20 +120,25 @@
}
.ant-tabs-tab {
padding: 8px 0;
padding: 8px 0 20px;
}
.ant-tabs-tab+.ant-tabs-tab {
margin: 0 0 0 74px;
}
.ant-tabs-top>.ant-tabs-nav {
margin: 0 0 38px 0;
margin: 0 0 22px 0;
.ant-tabs-ink-bar {
background: #26282A;
// background: #26282A;
height: 4px;
}
}
// input 框样式修改
nz-input-group {
height : 44px;
height : 48px;
font-size : 14px;
border-radius: 4px;
border-color : #E5E6EB;
@ -152,7 +158,7 @@
}
.ant-form-item {
margin-bottom: 32px;
margin-bottom: 24px;
}
.ant-form-item-with-help {
@ -161,24 +167,36 @@
.ant-form-item-explain,
.ant-form-item-extra {
min-height : 32px;
min-height : 24px;
line-height: 2;
}
.ant-form-item-explain,
.ant-form-item-extra {
font-size: 12px;
}
// 按钮样式修改
.ant-btn {
padding: 0 16px 12px;
}
.but {
font-size : 14px;
line-height: 48px;
height : 48px;
color : #86909C;
}
.ant-btn-primary {
color : #fff;
background : #26282A;
border-color : #26282A;
font-size : 14px;
line-height : 40px;
height : 44px;
color : #fff;
// background : #26282A;
// border-color : #26282A;
border-radius: 4px
}
}
@media (max-width: 990px) {

3
src/app/routes/passport/passport.module.ts
View File

@ -25,7 +25,7 @@ import { ProPageModule } from 'src/app/layout/pro/shared/page';
import { UserLoginComponent } from './components/login/login.component';
import { OrderAgreementComponent } from './components/order-agreement/order-agreement.component';
import { UserRetrievePasswordComponent } from './components/retrieve-password/retrieve-password.component';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { PassportRoutingModule } from './passport-routing.module';
const COMPONENTS = [
@ -54,6 +54,7 @@ const COMPONENTS = [
NzToolTipModule,
NzPopoverModule,
NzProgressModule,
NzDividerModule,
NzAvatarModule,
SEModule,
ResultModule,

BIN
src/assets/images/login/5-地球元素02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

2
src/assets/login/js/script.js
View File

@ -118,7 +118,7 @@
clearInterval(me.createIntervalId);
}
counter++;
}.bind(this), 250);
}.bind(this), 50);
}
else {
// Create particle objects