-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add list search-articles and search-applications
- Loading branch information
Showing
12 changed files
with
744 additions
and
147 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| :host ::ng-deep { | ||
| .ant-card { | ||
| background: inherit; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <nz-card> | ||
| <div class="standard flex"> | ||
| <div class="standard-label">所属类目：</div> | ||
| <div class="standard-content hasExpanded flex-1" [class.expanded]="expanded"> | ||
| <nz-tag nzMode="checkable" [(nzChecked)]="typeAll" (nzCheckedChange)="typeChangeAll($event)"> | ||
| <span>全部</span> | ||
| </nz-tag> | ||
| <ng-container *ngFor="let type of typeList"> | ||
| <nz-tag nzMode="checkable" [(nzChecked)]="type.checked" (nzCheckedChange)="typeChange()"> | ||
| <span>{{type.name}}</span> | ||
| </nz-tag> | ||
| </ng-container> | ||
| </div> | ||
| <a *ngIf="!expanded" (click)="expanded = true" class="select-trigger">展开<i nz-icon nzType="down" | ||
| nzTheme="outline"></i></a> | ||
| <a *ngIf="expanded" (click)="expanded = false" class="select-trigger">收起<i nz-icon nzType="up" | ||
| nzTheme="outline"></i></a> | ||
| </div> | ||
| <div class="standard flex"> | ||
| <div class="standard-label">其它选项：</div> | ||
| <div class="standard-content flex-1"> | ||
| <div nz-row [nzGutter]="16"> | ||
| <div nz-col [nzXs]="24" [nzSm]="10" [nzLg]="8"> | ||
| <nz-form-item> | ||
| <nz-form-label nzFor="author">作者</nz-form-label> | ||
| <nz-form-control [nzXs]="24" [nzSm]="16"> | ||
| <nz-select [(ngModel)]="searchInfo.author" [nzPlaceHolder]="'不限'" class="max-width"> | ||
| <nz-option nzValue="1" nzLabel="王昭君"></nz-option> | ||
| </nz-select> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| </div> | ||
| <div nz-col [nzXs]="24" [nzSm]="10" [nzLg]="8"> | ||
| <nz-form-item> | ||
| <nz-form-label nzFor="author">好评度</nz-form-label> | ||
| <nz-form-control [nzXs]="24" [nzSm]="16"> | ||
| <nz-select [(ngModel)]="searchInfo.like" [nzPlaceHolder]="'不限'" class="max-width"> | ||
| <nz-option nzValue="1" nzLabel="优秀"></nz-option> | ||
| <nz-option nzValue="2" nzLabel="普通"></nz-option> | ||
| </nz-select> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </nz-card> | ||
| <div class="mt20"> | ||
| <div nz-row [nzGutter]="18"> | ||
| <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="8" [nzLg]="6" *ngFor="let application of applicationList"> | ||
| <nz-card nzHoverable [nzActions]="[actionDownload, actionEdit, actionShareAlt, actionEllipsis]" class="mb20"> | ||
| <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="application.title" [nzDescription]="descTpl"> | ||
| </nz-card-meta> | ||
| </nz-card> | ||
| <ng-template #descTpl> | ||
| <div nz-row> | ||
| <div nz-col [nzSpan]="12"> | ||
| <p class="user-title">活跃用户</p> | ||
| <div> | ||
| <span class="user-number">{{application.activeUser}}</span> | ||
| <span class="user-unit">万</span> | ||
| </div> | ||
| </div> | ||
| <div nz-col [nzSpan]="12"> | ||
| <p class="user-title">新增用户</p> | ||
| <div> | ||
| <span class="user-number">{{application.newUser | number}}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <ng-template #avatarTemplate> | ||
| <nz-avatar [nzSrc]="application.cover"></nz-avatar> | ||
| </ng-template> | ||
| <ng-template #actionDownload> | ||
| <i nz-tooltip nzTooltipTitle="下载" nz-icon nzType="download"></i> | ||
| </ng-template> | ||
| <ng-template #actionEdit> | ||
| <i nz-tooltip nzTooltipTitle="编辑" nz-icon nzType="edit"></i> | ||
| </ng-template> | ||
| <ng-template #actionShareAlt> | ||
| <i nz-tooltip nzTooltipTitle="分享" nz-icon nzType="share-alt"></i> | ||
| </ng-template> | ||
| <ng-template #actionEllipsis> | ||
| <i nz-dropdown [nzDropdownMenu]="menu" nz-icon nzType="ellipsis"></i> | ||
| <nz-dropdown-menu #menu="nzDropdownMenu"> | ||
| <ul nz-menu> | ||
| <li nz-menu-item>1st menu item</li> | ||
| <li nz-menu-item>2nd menu item</li> | ||
| <li nz-menu-item>3d menu item</li> | ||
| </ul> | ||
| </nz-dropdown-menu> | ||
| </ng-template> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| :host ::ng-deep { | ||
| .ant-tag { | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| margin-right: 24px; | ||
| } | ||
|
|
||
| .ant-form-item { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .standard { | ||
| margin-bottom: 16px; | ||
| padding-bottom: 11px; | ||
| border-bottom: 1px dashed #f0f0f0; | ||
|
|
||
| &:last-child { | ||
| margin-bottom: 0; | ||
| padding-bottom: 0; | ||
| border-bottom: none; | ||
| } | ||
| } | ||
|
|
||
| .standard-label { | ||
| flex: 0 0 auto; | ||
| margin-right: 24px; | ||
| color: rgba(0, 0, 0, .85); | ||
| text-align: right; | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| .standard-content { | ||
| line-height: 32px; | ||
| transition: all .3s; | ||
| overflow: hidden; | ||
|
|
||
| &.hasExpanded { | ||
| max-height: 32px; | ||
|
|
||
| &.expanded { | ||
| max-height: 200px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .ant-select.max-width { | ||
| max-width: 200px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .select-trigger { | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| .user-title { | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .user-number { | ||
| color: rgba(0, 0, 0, .85); | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| } | ||
|
|
||
| .user-unit { | ||
| color: rgba(0, 0, 0, .85); | ||
| margin-left: 2px; | ||
| } | ||
|
|
||
| .ant-card-actions { | ||
| background: #ffffff; | ||
| } | ||
|
|
||
| .ant-avatar { | ||
| width: 24px; | ||
| height: 24px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.