console
import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core';
import { DATA } from '../mock-data';
import { Data } from '../data'
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
arr = DATA;
c1;
constructor(private elementRef: ElementRef) { }
ngOnInit() {
}
add () {
this.arr.push({
title: 'Rack-',
address_a: 'a',
address_b: 'aaa',
num: Math.floor(Math.random()*7+1)
})
}
delete (i) {
this.arr.splice(i,1)
}
}
import { Data } from './data';
export const DATA:Data[] = [
{
title: 'Rack-',
address_a: 'a',
address_b: 'aaa',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'b',
address_b: 'bbb',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'c',
address_b: 'ccc',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'd',
address_b: 'ddd',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'e',
address_b: 'eee',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'f',
address_b: 'fff',
num: Math.floor(Math.random()*7+1)
},
{
title: 'Rack-',
address_a: 'g',
address_b: 'ggg',
num: Math.floor(Math.random()*7+1)
}
]
<div class="container">
<ul>
<li *ngFor="let content of arr;index as i">
<div class="title">{{content.title}}{{i+1}}<i (click)="delete(i)"></i></div>
<div class="circle">
<span class="span">
<span [class.active]="content.num > 0">1</span>
<span [class.active]="content.num-1 > 0">2</span>
<span [class.active]="content.num-2 > 0">3</span>
<span [class.active]="content.num-3 > 0">4</span>
<span [class.active]="content.num-4 > 0">5</span>
<span [class.active]="content.num-5 > 0">6</span>
<span [class.active]="content.num-6 > 0">7</span>
</span>
<span class="te">{{ content.num }}</span>
</div>
<div class="address">
<span>{{ content.address_a }}</span>
<span>{{ content.address_b }}</span>
</div>
</li>
<li class="te" (click)="add()"></li>
</ul>
</div>
.container {
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
ul {
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
li {
border-radius: 3px;
position: relative;
list-style: none;
cursor: pointer;
width: 22%;
margin: 15px;
border: 1px solid #ccc;
top: 0;
box-shadow: 0 0;
transition: top .2s 0s linear;
&:hover {
box-shadow: 0px 0px 2px #ccc;
top: -5px;
}
div {
border-bottom: 1px solid #ccc;
&.title {
position: relative;
text-align: center;
height: 42px;
line-height: 42px;
font-size: 20px;
font-weight: 700;
i {
position: absolute;
left: 240px;
top: 11px;
background: #ff8080;
width: 20px;
height: 20px;
border-radius: 50%;
}
i:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 8px;
border: 1px solid #fff;
margin-left: -4.8px;
}
}
&.circle {
font-size: 14px;
line-height: 14px;
color: #666;
padding: 15px 25px;
.span {
span {
padding: 1px 4px;
font-size: 10px;
border-radius: 50%;
margin-right: 10px;
background-color: #ddd;
&.active {
background-color: deepskyblue;
}
}
}
.te {
margin-left: 20px;
}
}
&.address {
box-sizing: border-box;
padding: 0 10px;
display: flex;
justify-content: space-between;
border-bottom: 0;
height: 36px;
line-height: 36px;
font-size: 12px;
color: #999;
}
}
}
li.te {
height: 129px;
border: 1px solid #ccc;
&:hover {
top: 0;
box-shadow: 0 0;
}
}
li.te:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 50px;
border: 3px solid green;
margin-left: -25px;
}
li.te:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 50px;
border: 3px solid green;
margin-top: -25px;
}
}
}