15 changed files with 914 additions and 658 deletions
@ -0,0 +1,15 @@ |
|||||||
|
<div class="box" cdkDrag> |
||||||
|
<div class="title" cdkDragHandle> |
||||||
|
<span> |
||||||
|
{{title}} |
||||||
|
</span> |
||||||
|
<span class="close" (click)="close()"> |
||||||
|
<i nz-icon nzType="close" nzTheme="outline"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<ul> |
||||||
|
<li *ngFor="let item of data">{{item}}</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,54 @@ |
|||||||
|
.box { |
||||||
|
width: 280px; |
||||||
|
font-size: 16px; |
||||||
|
border: 1px solid #558DB1; |
||||||
|
} |
||||||
|
.title { |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
background-image: url(../../../../assets/gismap/listtitle.png); |
||||||
|
background-size: 100% 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 16px; |
||||||
|
padding-right: 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
cursor: default; |
||||||
|
.close{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.content { |
||||||
|
max-height: 250px; |
||||||
|
overflow-y: auto; |
||||||
|
ul{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
li { |
||||||
|
height: 38px; |
||||||
|
line-height: 38px; |
||||||
|
padding-left: 16px; |
||||||
|
padding-right: 10px; |
||||||
|
color: #f7faff; |
||||||
|
font-size: 15px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
li:nth-child(odd) { |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
RGBA(17, 50, 83, 1), |
||||||
|
RGBA(17, 50, 83, 0.8) |
||||||
|
); |
||||||
|
} |
||||||
|
li:nth-child(even) { |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
RGBA(38, 56, 73, 1), |
||||||
|
RGBA(38, 56, 73, 0.8) |
||||||
|
); |
||||||
|
border-top: 1px solid #3e4f60; |
||||||
|
border-bottom: 1px solid #3e4f60; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,20 @@ |
|||||||
|
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: "app-card-list", |
||||||
|
templateUrl: "./card-list.component.html", |
||||||
|
styleUrls: ["./card-list.component.scss"], |
||||||
|
}) |
||||||
|
export class CardListComponent implements OnInit { |
||||||
|
@Input() title; |
||||||
|
@Input() data; |
||||||
|
|
||||||
|
@Output() childEvent = new EventEmitter<any>(); |
||||||
|
constructor() {} |
||||||
|
|
||||||
|
ngOnInit(): void {} |
||||||
|
|
||||||
|
close() { |
||||||
|
this.childEvent.emit("closeCardList"); |
||||||
|
} |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 8.0 KiB |
Loading…
Reference in new issue