10 changed files with 531 additions and 268 deletions
@ -1,74 +1,153 @@ |
|||
<ng-container *ngIf="fullPage else layoutTpl"> |
|||
<router-outlet></router-outlet> |
|||
<ng-container *ngIf="fullPage; else layoutTpl"> |
|||
<router-outlet></router-outlet> |
|||
</ng-container> |
|||
|
|||
<ng-template #layoutTpl> |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div></div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu"> |
|||
{{account.name}} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul nz-menu nzSelectable> |
|||
<li nz-menu-item (click)="logout()"> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider nzWidth="220px" nzTheme="dark" class="sider-menu"> |
|||
<div class="logo flex items-center py-4"> |
|||
<img class="block h-[40px] " src="../assets/images/jl-logo.png" /> |
|||
<span class="text-base text-white font-bold"> |
|||
{{appName}}后台 |
|||
</span> |
|||
</div> |
|||
<ul nz-menu nzMode="inline" nzTheme="dark"> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','food']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:carrot" nzTheme="outline"></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','dish']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:food" nzTheme="outline"></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div></div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu" |
|||
> |
|||
{{ account.name }} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul |
|||
nz-menu |
|||
nzSelectable |
|||
> |
|||
<li |
|||
nz-menu-item |
|||
(click)="logout()" |
|||
> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider |
|||
nzWidth="220px" |
|||
nzTheme="dark" |
|||
class="sider-menu" |
|||
> |
|||
<div class="logo flex items-center py-4"> |
|||
<img |
|||
class="block h-[40px]" |
|||
src="../assets/images/jl-logo.png" |
|||
/> |
|||
<span class="text-base text-white font-bold"> {{ appName }}后台 </span> |
|||
</div> |
|||
<ul |
|||
nz-menu |
|||
nzMode="inline" |
|||
nzTheme="dark" |
|||
> |
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
[routerLink]="['/', 'food']" |
|||
nzMatchRouter |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="k-icon:carrot" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
[routerLink]="['/', 'dish']" |
|||
nzMatchRouter |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="k-icon:food" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
|
|||
|
|||
<li nz-submenu nzTitle="食谱管理" nzIcon="book" [nzOpen]="currentUrl.includes('/ingredient/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','item']">食谱库</li> |
|||
<!-- <li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','review']">食谱审核</li> --> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','release']">食谱发布计划</li> |
|||
</ul> |
|||
</li> |
|||
<li nz-menu-item nz-icon="profile" nzMatchRouter [routerLink]="['/','standard']"> |
|||
<span nz-icon nzType="profile" nzTheme="outline"></span> |
|||
<span>人群营养标准管理</span> |
|||
</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','organization']"> |
|||
<span nz-icon nzType="usergroup-add" nzTheme="outline"></span> |
|||
<span>单位管理</span> |
|||
</li> |
|||
<li nz-submenu nzTitle="系统设置" nzIcon="setting" [nzOpen]="currentUrl.includes('/system/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']">用户管理</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</ng-template> |
|||
<li |
|||
nz-submenu |
|||
nzTitle="食谱管理" |
|||
nzIcon="book" |
|||
[nzOpen]="currentUrl.includes('/ingredient/')" |
|||
> |
|||
<ul> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'ingredient', 'item']" |
|||
> |
|||
食谱库 |
|||
</li> |
|||
<!-- <li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','review']">食谱审核</li> --> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'ingredient', 'release']" |
|||
> |
|||
食谱发布计划 |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
nz-icon="profile" |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'standard']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="profile" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>人群营养标准管理</span> |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'organization']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="usergroup-add" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>单位管理</span> |
|||
</li> |
|||
<li |
|||
nz-submenu |
|||
nzTitle="系统设置" |
|||
nzIcon="setting" |
|||
[nzOpen]="currentUrl.includes('/system/')" |
|||
> |
|||
<ul> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'system', 'user']" |
|||
> |
|||
用户管理 |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
<lib-copyright></lib-copyright> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</ng-template> |
|||
|
@ -1,63 +1,95 @@ |
|||
<section class="h-full flex items-center justify-center"> |
|||
<div class="login"> |
|||
<!-- <div> |
|||
<section class="h-full flex items-center justify-center flex-col"> |
|||
<div class="login"> |
|||
<!-- <div> |
|||
<h1 class="text-center my-[25px]"> |
|||
<img class="logo" [src]="'/assets/images/jl-logo.png'" /> |
|||
|
|||
</h1> |
|||
</div> --> |
|||
<div class="card shadow-2xl"> |
|||
<div class="img"></div> |
|||
<div class="form py-5 px-10 flex-1"> |
|||
<div class="text-left "> |
|||
<h2 class="mt-4 text-3xl font-bold">{{appName}}后台</h2> |
|||
<h3 class="mt-10 text-xl">登录</h3> |
|||
<div class="card shadow-2xl"> |
|||
<div class="img"></div> |
|||
<div class="form py-5 px-10 flex-1"> |
|||
<div class="text-left"> |
|||
<h2 class="mt-4 text-3xl font-bold">{{ appName }}后台</h2> |
|||
<h3 class="mt-10 text-xl">登录</h3> |
|||
|
|||
<form nz-form [formGroup]="loginForm" class="mt-10"> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group [nzPrefix]="prefixTemplateUser" nzSize="large"> |
|||
<input nz-input nzSize="large" placeholder="账户" formControlName="uid" /> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplateUser> |
|||
<span nz-icon nzType="user"></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group [nzPrefix]="prefixTemplatePassword" nzSize="large"> |
|||
<input nz-input type="password" placeholder="密码" formControlName="pwd" /> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplatePassword> |
|||
<span nz-icon nzType="lock"></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<button nz-button |
|||
nzType="primary" |
|||
nzBlock |
|||
class="btn" |
|||
nzSize="large" |
|||
(click)="onLogin()" |
|||
[nzLoading]="loading"> |
|||
登录 |
|||
</button> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<form |
|||
nz-form |
|||
[formGroup]="loginForm" |
|||
class="mt-10" |
|||
> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group |
|||
[nzPrefix]="prefixTemplateUser" |
|||
nzSize="large" |
|||
> |
|||
<input |
|||
nz-input |
|||
nzSize="large" |
|||
placeholder="账户" |
|||
formControlName="uid" |
|||
/> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplateUser> |
|||
<span |
|||
nz-icon |
|||
nzType="user" |
|||
></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group |
|||
[nzPrefix]="prefixTemplatePassword" |
|||
nzSize="large" |
|||
> |
|||
<input |
|||
nz-input |
|||
type="password" |
|||
placeholder="密码" |
|||
formControlName="pwd" |
|||
/> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplatePassword> |
|||
<span |
|||
nz-icon |
|||
nzType="lock" |
|||
></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<button |
|||
nz-button |
|||
nzType="primary" |
|||
nzBlock |
|||
class="btn" |
|||
nzSize="large" |
|||
(click)="onLogin()" |
|||
[nzLoading]="loading" |
|||
> |
|||
登录 |
|||
</button> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<lib-copyright class="mt-10"></lib-copyright> |
|||
</section> |
|||
|
|||
<ng-template #formErrorTipsTpl let-control> |
|||
<div class="text-left"> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template |
|||
#formErrorTipsTpl |
|||
let-control |
|||
> |
|||
<div class="text-left"> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</div> |
|||
</ng-template> |
|||
|
@ -0,0 +1,10 @@ |
|||
<div class="flex items-center justify-center pb-2"> |
|||
<a |
|||
href="https://beian.miit.gov.cn/" |
|||
target="_blank" |
|||
class="text-black text-opacity-70" |
|||
> |
|||
蜀ICP备2023038072号 |
|||
</a> |
|||
<span class="text-black text-opacity-70 ml-4"> ©{{ year }} 成都积络科技有限公司</span> |
|||
</div> |
@ -0,0 +1,10 @@ |
|||
import { Component } from "@angular/core"; |
|||
|
|||
@Component({ |
|||
selector: "lib-copyright", |
|||
templateUrl: "./copyright.component.html", |
|||
styleUrls: ["./copyright.component.less"], |
|||
}) |
|||
export class CopyrightComponent { |
|||
year = new Date().getFullYear(); |
|||
} |
@ -1,93 +1,179 @@ |
|||
<ng-container *ngIf="fullPage else layoutTpl"> |
|||
<router-outlet></router-outlet> |
|||
<ng-container *ngIf="fullPage; else layoutTpl"> |
|||
<router-outlet></router-outlet> |
|||
</ng-container> |
|||
|
|||
<ng-template #layoutTpl> |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div class="logo flex items-center h-full"> |
|||
<img class="block h-[40px] mr-1" src="../assets/images/jl-logo.png" /> |
|||
<span class="text-lg text-white font-bold"> |
|||
{{appName}} |
|||
</span> |
|||
</div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu" |
|||
class="text-white hover:text-white focus:text-white"> |
|||
{{account.name}} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul nz-menu nzSelectable> |
|||
<li nz-menu-item (click)="logout()"> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider nzWidth="200px" class="sider-menu" nzTheme="light"> |
|||
|
|||
<ul nz-menu nzMode="inline"> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','dashboard']" nzMatchRouter |
|||
*ngxPermissionsOnly="['18']"> |
|||
<span nz-icon nzType="question-circle" nzTheme="outline"></span> |
|||
<span>使用流程</span> |
|||
</li> |
|||
<li nz-menu-item class="k-icon" (click)="openDataVis()" nzMatchRouter |
|||
*ngxPermissionsOnly="['19','20']"> |
|||
<span nz-icon nzType="fund" nzTheme="outline"></span> |
|||
<span>大屏显示</span> |
|||
</li> |
|||
<!-- <li nz-menu-item [routerLink]="['/','meal-setting']" nzMatchRouter |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div class="logo flex items-center h-full"> |
|||
<img |
|||
class="block h-[40px] mr-1" |
|||
src="../assets/images/jl-logo.png" |
|||
/> |
|||
<span class="text-lg text-white font-bold"> |
|||
{{ appName }} |
|||
</span> |
|||
</div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu" |
|||
class="text-white hover:text-white focus:text-white" |
|||
> |
|||
{{ account.name }} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul |
|||
nz-menu |
|||
nzSelectable |
|||
> |
|||
<li |
|||
nz-menu-item |
|||
(click)="logout()" |
|||
> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider |
|||
nzWidth="200px" |
|||
class="sider-menu" |
|||
nzTheme="light" |
|||
> |
|||
<ul |
|||
nz-menu |
|||
nzMode="inline" |
|||
> |
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
[routerLink]="['/', 'dashboard']" |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['18']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="question-circle" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>使用流程</span> |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
(click)="openDataVis()" |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['19', '20']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="fund" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>大屏显示</span> |
|||
</li> |
|||
<!-- <li nz-menu-item [routerLink]="['/','meal-setting']" nzMatchRouter |
|||
*ngxPermissionsOnly="['21','22']"> |
|||
<span nz-icon nzType="setting" nzTheme="outline"></span> |
|||
<span>配餐设置</span> |
|||
</li> --> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','food']" nzMatchRouter |
|||
*ngxPermissionsOnly="['23','24']"> |
|||
<span nz-icon nzType="k-icon:carrot" nzTheme="outline"></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','dish']" nzMatchRouter |
|||
*ngxPermissionsOnly="['25','26']"> |
|||
<span nz-icon nzType="k-icon:food" nzTheme="outline"></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
|
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
[routerLink]="['/', 'food']" |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['23', '24']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="k-icon:carrot" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
class="k-icon" |
|||
[routerLink]="['/', 'dish']" |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['25', '26']" |
|||
> |
|||
<span |
|||
nz-icon |
|||
nzType="k-icon:food" |
|||
nzTheme="outline" |
|||
></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
|
|||
<li nz-submenu nzTitle="食谱管理" nzIcon="book" [nzOpen]="currentUrl.includes('/ingredient/')" |
|||
*ngxPermissionsOnly="['27','28','29','30','31']"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter *ngxPermissionsOnly="['27','28','29']" |
|||
[routerLink]="['/','ingredient','item']">食谱库</li> |
|||
<li nz-menu-item nzMatchRouter *ngxPermissionsOnly="['30','31']" |
|||
[routerLink]="['/','ingredient','release']">食谱发布计划</li> |
|||
</ul> |
|||
</li> |
|||
<li |
|||
nz-submenu |
|||
nzTitle="食谱管理" |
|||
nzIcon="book" |
|||
[nzOpen]="currentUrl.includes('/ingredient/')" |
|||
*ngxPermissionsOnly="['27', '28', '29', '30', '31']" |
|||
> |
|||
<ul> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['27', '28', '29']" |
|||
[routerLink]="['/', 'ingredient', 'item']" |
|||
> |
|||
食谱库 |
|||
</li> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
*ngxPermissionsOnly="['30', '31']" |
|||
[routerLink]="['/', 'ingredient', 'release']" |
|||
> |
|||
食谱发布计划 |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li nz-submenu nzTitle="基础信息设置" nzIcon="user" [nzOpen]="currentUrl.includes('/system/')" |
|||
*ngxPermissionsOnly="['33','34','35','36','37']"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','org']" |
|||
*ngxPermissionsOnly="['33','34',]">单位信息设置</li> |
|||
</ul> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']" |
|||
*ngxPermissionsOnly="['35','36','37']">用户管理</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</ng-template> |
|||
<li |
|||
nz-submenu |
|||
nzTitle="基础信息设置" |
|||
nzIcon="user" |
|||
[nzOpen]="currentUrl.includes('/system/')" |
|||
*ngxPermissionsOnly="['33', '34', '35', '36', '37']" |
|||
> |
|||
<ul> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'system', 'org']" |
|||
*ngxPermissionsOnly="['33', '34']" |
|||
> |
|||
单位信息设置 |
|||
</li> |
|||
</ul> |
|||
<ul> |
|||
<li |
|||
nz-menu-item |
|||
nzMatchRouter |
|||
[routerLink]="['/', 'system', 'user']" |
|||
*ngxPermissionsOnly="['35', '36', '37']" |
|||
> |
|||
用户管理 |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
<lib-copyright></lib-copyright> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</ng-template> |
|||
|
@ -1,65 +1,99 @@ |
|||
<section class="h-full "> |
|||
<div class="login"> |
|||
<!-- <div> |
|||
<section class="h-full relative"> |
|||
<div class="login"> |
|||
<!-- <div> |
|||
<h1 class="text-center my-[25px]"> |
|||
<img class="logo" [src]="'/assets/images/jl-logo.png'" /> |
|||
|
|||
</h1> |
|||
</div> --> |
|||
<div class="card "> |
|||
<div class="img flex items-center justify-center"> |
|||
<img src="assets/images/jl-logo.png" /> |
|||
</div> |
|||
<div class="form py-5 px-10 flex-1"> |
|||
<div class="form-inner"> |
|||
<h2 class="mt-4 text-3xl font-bold">{{appName}}</h2> |
|||
<h3 class="mt-10 text-xl">登录</h3> |
|||
<div class="card"> |
|||
<div class="img flex items-center justify-center"> |
|||
<img src="assets/images/jl-logo.png" /> |
|||
</div> |
|||
<div class="form py-5 px-10 flex-1"> |
|||
<div class="form-inner"> |
|||
<h2 class="mt-4 text-3xl font-bold">{{ appName }}</h2> |
|||
<h3 class="mt-10 text-xl">登录</h3> |
|||
|
|||
<form nz-form [formGroup]="loginForm" class="mt-10"> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group [nzPrefix]="prefixTemplateUser" nzSize="large"> |
|||
<input nz-input nzSize="large" placeholder="账户" formControlName="uid" /> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplateUser> |
|||
<span nz-icon nzType="user"></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group [nzPrefix]="prefixTemplatePassword" nzSize="large"> |
|||
<input nz-input type="password" placeholder="密码" formControlName="pwd" /> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplatePassword> |
|||
<span nz-icon nzType="lock"></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<button nz-button |
|||
nzType="primary" |
|||
nzBlock |
|||
class="btn" |
|||
nzSize="large" |
|||
(click)="onLogin()" |
|||
[nzLoading]="loading"> |
|||
登录 |
|||
</button> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<form |
|||
nz-form |
|||
[formGroup]="loginForm" |
|||
class="mt-10" |
|||
> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group |
|||
[nzPrefix]="prefixTemplateUser" |
|||
nzSize="large" |
|||
> |
|||
<input |
|||
nz-input |
|||
nzSize="large" |
|||
placeholder="账户" |
|||
formControlName="uid" |
|||
/> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplateUser> |
|||
<span |
|||
nz-icon |
|||
nzType="user" |
|||
></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formErrorTipsTpl"> |
|||
<nz-input-group |
|||
[nzPrefix]="prefixTemplatePassword" |
|||
nzSize="large" |
|||
> |
|||
<input |
|||
nz-input |
|||
type="password" |
|||
placeholder="密码" |
|||
formControlName="pwd" |
|||
/> |
|||
</nz-input-group> |
|||
<ng-template #prefixTemplatePassword> |
|||
<span |
|||
nz-icon |
|||
nzType="lock" |
|||
></span> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<button |
|||
nz-button |
|||
nzType="primary" |
|||
nzBlock |
|||
class="btn" |
|||
nzSize="large" |
|||
(click)="onLogin()" |
|||
[nzLoading]="loading" |
|||
> |
|||
登录 |
|||
</button> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="copyright"> |
|||
<lib-copyright></lib-copyright> |
|||
</div> |
|||
</section> |
|||
|
|||
<ng-template #formErrorTipsTpl let-control> |
|||
<div class="text-left"> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template |
|||
#formErrorTipsTpl |
|||
let-control |
|||
> |
|||
<div class="text-left"> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</div> |
|||
</ng-template> |
|||
|
Loading…
Reference in new issue