chenjingyu
4 years ago
100 changed files with 595 additions and 2627 deletions
@ -1,63 +0,0 @@
|
||||
<div class="contentBox"> |
||||
<header> |
||||
<h1>数字化预案编制和管理平台</h1> |
||||
<div class="showTime">{{time}}</div> |
||||
</header> |
||||
<section class="mainbox"> |
||||
<div class="column"> |
||||
<div class="panel bar"> |
||||
<h2>单位类型</h2> |
||||
<div class="chart" id="unitType"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line"> |
||||
<h2>预案状态</h2> |
||||
<div class="chart" id="planStates"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie"> |
||||
<h2>预案类型</h2> |
||||
<div class="chart" id="planType"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="no"> |
||||
<div class="no-hd"> |
||||
<ul> |
||||
<li>123</li> |
||||
<li>456</li> |
||||
</ul> |
||||
</div> |
||||
<div class="no-bd"> |
||||
<ul> |
||||
<li>预案数量</li> |
||||
<li>单位数量</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="map"> |
||||
<div class="map1"></div> |
||||
<div class="map2"></div> |
||||
<div class="map3" id='map' style='width:98%; height:98%;'></div> |
||||
</div> |
||||
</div> |
||||
<div class="column"> |
||||
<div class="panel bar"> |
||||
<h2>趋势图</h2> |
||||
<div class="chart" id="trend"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel line"> |
||||
<h2>玫瑰图</h2> |
||||
<div class="chart" id="xxx"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
<div class="panel pie"> |
||||
<h2>柱状图</h2> |
||||
<div class="chart" id="yyy"></div> |
||||
<div class="panel-footer"></div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
@ -1,247 +0,0 @@
|
||||
@font-face { |
||||
font-family: electronicFont; |
||||
src: url(../../../assets/font/DS-DIGIT.TTF); |
||||
} |
||||
.contentBox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background: url(../../../assets/images/bg.jpg) no-repeat top center; |
||||
line-height: 1.15; |
||||
header{ |
||||
position: relative; |
||||
height:8%; |
||||
min-height: 64px; |
||||
background: url(../../../assets/images/head_bg.png) no-repeat; |
||||
background-size: 100% 100%; |
||||
h1{ |
||||
font-size: 28px; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 64px; |
||||
|
||||
} |
||||
.showTime{ |
||||
position: absolute; |
||||
right: 20px; |
||||
line-height: 60px; |
||||
color: rgba(255,255,255, $alpha: 0.7); |
||||
font-size: 16px; |
||||
top: 0; |
||||
} |
||||
} |
||||
.mainbox{ |
||||
width: 100%; |
||||
height: 92%; |
||||
// background-color: pink; |
||||
padding: 2px 0 2px 0; |
||||
display: flex; |
||||
.column{ |
||||
flex: 3; |
||||
} |
||||
.column:nth-child(2){ |
||||
flex: 6; |
||||
margin: 0 8px 8px 8px; |
||||
} |
||||
.panel{ |
||||
height: 29.8%; |
||||
position: relative; |
||||
// background-color: red; |
||||
border: 1px solid rgba(25,186,139,0.17); |
||||
background: url(../../../assets/images/line.png) rgba(255,255,255, $alpha: 0.03); |
||||
margin-bottom: 8px; |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
.panel-footer{ |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 14px; |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:14px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
} |
||||
h2{ |
||||
height: 18px; |
||||
color: #fff; |
||||
line-height: 18px; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
} |
||||
.chart{ |
||||
height: 91%; |
||||
// background-color: pink; |
||||
} |
||||
} |
||||
.no{ |
||||
background: rgba(101,132,226,0.1); |
||||
padding: 4px 16px; |
||||
height: 10%; |
||||
min-height: 100px; |
||||
.no-hd{ |
||||
position: relative; |
||||
border: 1px solid rgba(25,186,139,0.17); |
||||
&::before{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
content: ""; |
||||
width:30px; |
||||
height:14px; |
||||
border-left: 2px solid #02a6b5; |
||||
border-top: 2px solid #02a6b5; |
||||
} |
||||
&::after{ |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
content: ""; |
||||
width:30px; |
||||
height:14px; |
||||
border-right: 2px solid #02a6b5; |
||||
border-bottom: 2px solid #02a6b5; |
||||
} |
||||
ul{ |
||||
display: flex; |
||||
li{ |
||||
|
||||
flex: 1; |
||||
line-height: 55px; |
||||
font-size: 48px; |
||||
color: #ffeb7b; |
||||
text-align: center; |
||||
font-family: 'electronicFont'; |
||||
} |
||||
li:nth-child(1){ |
||||
position: relative; |
||||
&::after{ |
||||
position: absolute; |
||||
top: 25%; |
||||
height: 50%; |
||||
right: 0; |
||||
content: ""; |
||||
width:1px; |
||||
background: rgba(255,255,255, $alpha: 0.2); |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.no-bd{ |
||||
ul{ |
||||
display: flex; |
||||
padding: 4px 0; |
||||
li{ |
||||
flex: 1; |
||||
text-align: center; |
||||
color: rgba(255,255,255, $alpha: 0.7); |
||||
font-size: 14px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.map { |
||||
position: relative; |
||||
margin-top: 12px; |
||||
height: 78%; |
||||
.map1 { |
||||
width: 480px; |
||||
height: 480px; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
background: url(../../../assets/images/map.png); |
||||
background-size: 100% 100%; |
||||
opacity: 0.3; |
||||
} |
||||
.map2 { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 600px; |
||||
height: 600px; |
||||
background: url(../../../assets/images/lbx.png); |
||||
|
||||
animation: rotate1 15s linear infinite; |
||||
opacity: 0.6; |
||||
background-size: 100% 100%; |
||||
} |
||||
|
||||
.map3 { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
// width: 7.075rem; |
||||
// height: 7.075rem; |
||||
// background: url(../images/jt.png); |
||||
// animation: rotate2 10s linear infinite; |
||||
// opacity: 0.6; |
||||
background-size: 100% 100%; |
||||
} |
||||
// .chart { |
||||
// position: absolute; |
||||
// top: 0; |
||||
// left: 0; |
||||
// // background-color: pink; |
||||
// width: 100%; |
||||
// height: 10.125rem; |
||||
// } |
||||
@keyframes rotate1 { |
||||
0% { |
||||
transform: translate(-50%, -50%) rotate(0deg); |
||||
}; |
||||
100% { |
||||
transform: translate(-50%, -50%) rotate(360deg); |
||||
} |
||||
} |
||||
// @keyframes rotate2 { |
||||
// form { |
||||
// transform: translate(-50%, -50%) rotate(0deg); |
||||
// } |
||||
// to { |
||||
// transform: translate(-50%, -50%) rotate(-360deg); |
||||
// } |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { Home2Component } from './home2.component'; |
||||
|
||||
describe('Home2Component', () => { |
||||
let component: Home2Component; |
||||
let fixture: ComponentFixture<Home2Component>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ Home2Component ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(Home2Component); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,348 +0,0 @@
|
||||
import { Component, OnInit ,ElementRef} from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http' |
||||
import { HighlightSpanKind } from 'typescript'; |
||||
|
||||
declare var echarts: any; |
||||
declare var westeros: any; |
||||
declare var AMap: any; |
||||
declare var Loca: any; |
||||
@Component({ |
||||
selector: 'app-home2', |
||||
templateUrl: './home2.component.html', |
||||
styleUrls: ['./home2.component.scss'] |
||||
}) |
||||
export class Home2Component implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public element: ElementRef) { } |
||||
|
||||
unitTypeStatistics:any //单位类型统计
|
||||
myUnitTypeChart:any //单位类型统计图表
|
||||
unitTypeOption:any = { |
||||
title: { |
||||
// text: '单位类型统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: [] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //单位类型数据
|
||||
|
||||
planStateStatistics //预案状态统计
|
||||
myPlanStateChart:any //预案状态统计图表
|
||||
planStateOption:any = { |
||||
title: { |
||||
// text: '预案编制情况统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: ['审核通过','已提交','已公开'] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie',//类型为饼图
|
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
planTypeStatistics //各类型预案统计
|
||||
myPlanTypeChart:any //各类型预案图表
|
||||
planTypeOption:any = { |
||||
title: { |
||||
// text: '各类型预案情况统计',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '占比： <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
bottom: 0, |
||||
left: 'center', |
||||
data: ['卡片预案','二维预案','三维预案','其他预案'] |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'pie', |
||||
radius: '65%', |
||||
center: ['50%', '50%'], |
||||
selectedMode: 'single', |
||||
data: [ |
||||
], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
trendStatistics //趋势统计
|
||||
trendChart:any //趋势图表
|
||||
trendOption:any = { |
||||
title: { |
||||
// text: '预案趋势统计'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data: ['新增预案', '修改预案'] |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
toolbox: { |
||||
feature: { |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '新增预案', |
||||
type: 'line', |
||||
stack: '总量', |
||||
data: [] |
||||
}, |
||||
{ |
||||
name: '修改预案', |
||||
type: 'line', |
||||
stack: '总量', |
||||
data: [] |
||||
} |
||||
] |
||||
}; //预案状态数据
|
||||
|
||||
xxxChart:any |
||||
xxxOption:any = { |
||||
title: { |
||||
// text: '南丁格尔玫瑰图',
|
||||
// subtext: '纯属虚构',
|
||||
// left: 'center'
|
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
left: 'center', |
||||
top: 'bottom', |
||||
data: ['1', '2', '3', '4'] |
||||
}, |
||||
toolbox: { |
||||
show: true, |
||||
feature: { |
||||
mark: {show: true}, |
||||
dataView: {show: true, readOnly: false}, |
||||
magicType: { |
||||
show: true, |
||||
type: ['pie', 'funnel'] |
||||
}, |
||||
restore: {show: true}, |
||||
saveAsImage: {show: true} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '面积模式', |
||||
type: 'pie', |
||||
radius: [30, 110], |
||||
// center: ['75%', '50%'],
|
||||
roseType: 'area', |
||||
data: [ |
||||
{value: 10, name: '1'}, |
||||
{value: 5, name: '2'}, |
||||
{value: 15, name: '3'}, |
||||
{value: 25, name: '4'} |
||||
] |
||||
} |
||||
] |
||||
} |
||||
|
||||
yyyChart:any |
||||
yyyOption:any = { |
||||
color: ['#3398DB'], |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
||||
axisTick: { |
||||
alignWithLabel: true |
||||
} |
||||
} |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value' |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '直接访问', |
||||
type: 'bar', |
||||
barWidth: '60%', |
||||
data: [10, 52, 200, 334, 390, 330, 220] |
||||
} |
||||
] |
||||
}; |
||||
|
||||
t:any |
||||
time:any |
||||
theme:any //主题风格
|
||||
ngOnInit(): void { |
||||
// const map = new AMap.Map(this.element.nativeElement.querySelector('#map'), {
|
||||
// mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
|
||||
// // pitch: 0,
|
||||
// features: ['bg', 'road'],//地图显示要素
|
||||
// zoom: 6,
|
||||
// center: [116.408075, 39.950187],
|
||||
// // viewMode: '3D'
|
||||
// });
|
||||
// const layer = new Loca.DistrictLayer({
|
||||
// map: map
|
||||
// });
|
||||
// layer.setMap(map);
|
||||
|
||||
|
||||
|
||||
this.getTime() |
||||
setTimeout(() => { |
||||
|
||||
this.myUnitTypeChart = echarts.init(this.element.nativeElement.querySelector('#unitType'),'westeros'); |
||||
this.myPlanStateChart = echarts.init(this.element.nativeElement.querySelector('#planStates') ,'westeros'); |
||||
this.myPlanTypeChart = echarts.init(this.element.nativeElement.querySelector('#planType'),'westeros'); |
||||
this.trendChart = echarts.init(this.element.nativeElement.querySelector('#trend'),'westeros'); |
||||
this.xxxChart = echarts.init(this.element.nativeElement.querySelector('#xxx'),'westeros'); |
||||
this.xxxChart.setOption(this.xxxOption); |
||||
this.yyyChart = echarts.init(this.element.nativeElement.querySelector('#yyy'),'westeros'); |
||||
this.yyyChart.setOption(this.yyyOption); |
||||
}, 0); |
||||
|
||||
|
||||
this.chartsSetOption(); |
||||
} |
||||
getTime():any{ |
||||
this.t = setInterval(()=>{ |
||||
var dt = new Date(); |
||||
var y = dt.getFullYear(); |
||||
var mt = dt.getMonth() + 1; |
||||
var day = dt.getDate(); |
||||
var h = dt.getHours(); //获取时
|
||||
var m = dt.getMinutes(); //获取分
|
||||
var s = dt.getSeconds(); //获取秒
|
||||
this.time = "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; |
||||
}, 1000); //開始运行
|
||||
} |
||||
chartsSetOption(){ |
||||
this.http.get("/api/StatisticsAnalysis").subscribe((data:any)=>{ |
||||
//单位类型统计
|
||||
this.unitTypeStatistics = data.companyStatistics.buildingTypeStatistics.buildingTypes |
||||
this.unitTypeStatistics.forEach(item => { |
||||
item.name = item.buildingTypeName |
||||
item.value = item.count |
||||
// this.unitTypeOption.legend.data.push(item.buildingTypeName)
|
||||
}); |
||||
this.unitTypeOption.series[0].data = this.unitTypeStatistics |
||||
this.myUnitTypeChart.setOption(this.unitTypeOption,true); |
||||
//预案状态统计
|
||||
this.planStateStatistics = data.planStatistics.planningStatistics |
||||
this.planStateOption.series[0].data.push({name:'审核通过',value:data.planStatistics.planningStatistics.approvedCount}) |
||||
this.planStateOption.series[0].data.push({name:'已提交',value:data.planStatistics.planningStatistics.committedCount}) |
||||
this.planStateOption.series[0].data.push({name:'已公开',value:data.planStatistics.planningStatistics.publicCount}) |
||||
this.myPlanStateChart.setOption(this.planStateOption,true); |
||||
//各类型预案统计
|
||||
this.planTypeStatistics = data.planStatistics.planTypeStatistics |
||||
this.planTypeOption.series[0].data.push({name:'卡片预案',value:data.planStatistics.planTypeStatistics.planCardCount}) |
||||
this.planTypeOption.series[0].data.push({name:'二维预案',value:data.planStatistics.planTypeStatistics.plan2DCount}) |
||||
this.planTypeOption.series[0].data.push({name:'三维预案',value:data.planStatistics.planTypeStatistics.plan3DCount}) |
||||
this.planTypeOption.series[0].data.push({name:'其他预案',value:data.planStatistics.planTypeStatistics.planOtherCount}) |
||||
this.myPlanTypeChart.setOption(this.planTypeOption,true); |
||||
//预案趋势图统计
|
||||
this.trendStatistics = data.planStatistics.trendStatistics |
||||
// this.trendOption.series = []
|
||||
this.trendStatistics.added.forEach(item=>{ |
||||
this.trendOption.series[0].data.push(item.count) |
||||
}) |
||||
this.trendStatistics.modified.forEach(item=>{ |
||||
this.trendOption.series[1].data.push(item.count) |
||||
}) |
||||
this.trendChart.setOption(this.trendOption,true); |
||||
|
||||
}) |
||||
} |
||||
ngOnDestroy(){ |
||||
window.clearInterval(this.t) //清一遍定时器
|
||||
} |
||||
} |
||||
@ -1,280 +0,0 @@
|
||||
<div class="pages-profile"> |
||||
<div fxLayout.gt-sm="row nowrap" fxLayout.lt-md="column nowrap" fxLayoutAlign.gt-sm="space-between start" |
||||
fxLayoutGap="30px" id="xxx"> |
||||
<mat-card fxFlex="30" class="profile-card"> |
||||
<mat-card-content> |
||||
<img mat-card-avatar src=""> |
||||
<mat-card-title class="profile-user">安信科创</mat-card-title> |
||||
<mat-card-subtitle class="profile-job">嘻嘻嘻嘻</mat-card-subtitle> |
||||
<p class="profile-introduction"> |
||||
不要做程序员，要做问题解决者 |
||||
</p> |
||||
<div class="profile-social"> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
||||
</div> |
||||
<button mat-flat-button color="accent">关注</button> |
||||
</mat-card-content> |
||||
<mat-card-actions class="profile-card-footer" fxLayout="row nowrap"> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">260</strong> |
||||
<span>粉丝</span> |
||||
</div> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">180</strong> |
||||
<span>关注</span> |
||||
</div> |
||||
<div fxFlex="32"> |
||||
<strong class="profile-stat-count">2000</strong> |
||||
<span>博客</span> |
||||
</div> |
||||
</mat-card-actions> |
||||
</mat-card> |
||||
|
||||
<mat-card fxFlex="70" class="profile-board"> |
||||
<mat-tab-group> |
||||
<mat-tab label="活动"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
<div class="pt-40 pb-40"> |
||||
<button mat-flat-button class="show-more-btn">更多</button> |
||||
</div> |
||||
</mat-tab> |
||||
<mat-tab label="评论"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
|
||||
|
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-tab> |
||||
<mat-tab label="消息"> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
<img src="" alt=""> |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
<mat-list-item> |
||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
<img matListAvatar src=""> |
||||
<div> |
||||
<div>我是假数据 |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
<span class="secondary-text font-size-12">我是假数据</span> |
||||
</div> |
||||
</div> |
||||
<div matLine class="profile-item-content"> |
||||
我是假数据 |
||||
</div> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-tab> |
||||
</mat-tab-group> |
||||
</mat-card> |
||||
</div> |
||||
</div> |
||||
@ -1,110 +0,0 @@
|
||||
|
||||
#xxx{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
.pages-profile { |
||||
padding: 30px; |
||||
|
||||
.profile-card { |
||||
padding: 9px; |
||||
text-align: center; |
||||
font-family: Roboto, sans-serif; |
||||
width: 500px; |
||||
height: 600px; |
||||
mat-card-content { |
||||
padding: 40px 15px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.mat-card-avatar { |
||||
width: 130px; |
||||
height: 130px; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.profile-user { |
||||
margin: 10px 0; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.profile-job { |
||||
margin-bottom: 20px; |
||||
color: #9e9e9e; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.profile-introduction { |
||||
margin: 0 0 1rem; |
||||
color: #757575; |
||||
} |
||||
|
||||
.profile-social { |
||||
margin: 25px 0; |
||||
|
||||
mat-icon { |
||||
margin: 0 10px; |
||||
color: rgba(66, 66, 66, .4); |
||||
} |
||||
} |
||||
|
||||
mat-card-actions { |
||||
padding: 10px; |
||||
background: #f6f9fd; |
||||
} |
||||
|
||||
.profile-card-footer { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
.profile-stat-count { |
||||
display: block; |
||||
margin-bottom: 3px; |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #616161; |
||||
|
||||
+span { |
||||
color: #9e9e9e; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.profile-board { |
||||
padding: 30px; |
||||
width: 500px; |
||||
mat-list { |
||||
padding-bottom: 20px; |
||||
} |
||||
|
||||
mat-list-item { |
||||
height: auto; |
||||
padding: 25px 0; |
||||
margin-left: -16px; |
||||
border-bottom: 1px solid #dfe0df; |
||||
|
||||
.profile-item-content { |
||||
padding: 20px 0 0 56px; |
||||
line-height: 1.571429; |
||||
color: #757575; |
||||
white-space: normal; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
img { |
||||
width: 100%; |
||||
max-width: 220px; |
||||
max-height: 150px; |
||||
padding: 0 20px 20px 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.show-more-btn { |
||||
width: 100%; |
||||
background-color: #eee; |
||||
color: #3949ab; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { PersonaldataComponent } from './personaldata.component'; |
||||
|
||||
describe('PersonaldataComponent', () => { |
||||
let component: PersonaldataComponent; |
||||
let fixture: ComponentFixture<PersonaldataComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ PersonaldataComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PersonaldataComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-personaldata', |
||||
templateUrl: './personaldata.component.html', |
||||
styleUrls: ['./personaldata.component.scss'] |
||||
}) |
||||
export class PersonaldataComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
<p> |
||||
<span matBadge="4" matBadgeOverlap="false">未读信息</span> |
||||
</p> |
||||
|
||||
<p> |
||||
<button |
||||
mat-raised-button color="primary" |
||||
matBadge="8" |
||||
matBadgePosition="after" |
||||
matBadgeColor="accent"> |
||||
按钮徽章 |
||||
</button> |
||||
</p> |
||||
|
||||
<p> |
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon> |
||||
</p> |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BadgeComponent } from './badge.component'; |
||||
|
||||
describe('BadgeComponent', () => { |
||||
let component: BadgeComponent; |
||||
let fixture: ComponentFixture<BadgeComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BadgeComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BadgeComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,14 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-badge', |
||||
templateUrl: './badge.component.html', |
||||
styleUrls: ['./badge.component.scss'] |
||||
}) |
||||
export class BadgeComponent implements OnInit { |
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,6 +0,0 @@
|
||||
|
||||
<ul cdkDropList (cdkDropListDropped)="drop($event)"> |
||||
<li *ngFor="let item of data" cdkDrag>{{item.name}}</li> |
||||
</ul> |
||||
|
||||
<mat-checkbox checked="checked" ></mat-checkbox> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ButtonComponent } from './button.component'; |
||||
|
||||
describe('ButtonComponent', () => { |
||||
let component: ButtonComponent; |
||||
let fixture: ComponentFixture<ButtonComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ButtonComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ButtonComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,89 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; |
||||
@Component({ |
||||
selector: 'app-button', |
||||
templateUrl: './button.component.html', |
||||
styleUrls: ['./button.component.scss'] |
||||
}) |
||||
export class ButtonComponent implements OnInit { |
||||
|
||||
constructor(public http: HttpClient) { } |
||||
|
||||
|
||||
data =[ |
||||
{ |
||||
id:"1", |
||||
name:"广西总队", |
||||
order:0, |
||||
parentId:null, |
||||
children:[ |
||||
{ |
||||
id:"2", |
||||
name:"南宁支队", |
||||
order:2, |
||||
parentId:1, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤大队", |
||||
order:0, |
||||
parentId:2, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤3中队", |
||||
order:3, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤2中队", |
||||
order:2, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤1中队", |
||||
order:1, |
||||
parentId:6, |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id:"3", |
||||
name:"北海支队", |
||||
order:1, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"4", |
||||
name:"梧州支队", |
||||
order:0, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"5", |
||||
name:"桂林支队", |
||||
order:3, |
||||
parentId:1 |
||||
}, |
||||
] |
||||
} |
||||
] |
||||
|
||||
|
||||
ngOnInit() { |
||||
var str = "xxxx.jjjj" |
||||
// console.log(2222,str.split('.')[1])
|
||||
} |
||||
|
||||
drop(event: CdkDragDrop<string[]>) { |
||||
moveItemInArray(this.data, event.previousIndex, event.currentIndex); |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
<mat-card> |
||||
<mat-card-title>简单的卡片</mat-card-title> |
||||
<mat-card-subtitle>卡片的字幕</mat-card-subtitle> |
||||
<mat-card-content>原来爱情的世界很大,大得可以装下一百种委屈;原来爱情的世界很小,小得三个人就会窒息。</mat-card-content> |
||||
<img mat-card-image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579480490&di=f80c114e78ea7a439c19cc7f1622227f&src=http://pic1.win4000.com/wallpaper/2017-11-17/5a0e94afc140c.jpg"> |
||||
<mat-card-actions> |
||||
<button mat-raised-button color="primary">我是按钮</button> |
||||
</mat-card-actions> |
||||
<mat-card-footer> |
||||
我要被固定在卡片底部 |
||||
</mat-card-footer> |
||||
</mat-card> |
||||
@ -1,10 +0,0 @@
|
||||
|
||||
mat-card{ |
||||
width: 300px; |
||||
height: 600px; |
||||
img{ |
||||
width: 300px; |
||||
height: 300px; |
||||
padding: 16px; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CardComponent } from './card.component'; |
||||
|
||||
describe('CardComponent', () => { |
||||
let component: CardComponent; |
||||
let fixture: ComponentFixture<CardComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CardComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CardComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-card', |
||||
templateUrl: './card.component.html', |
||||
styleUrls: ['./card.component.scss'] |
||||
}) |
||||
export class CardComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CollectionToolsComponent } from './collection-tools.component'; |
||||
|
||||
describe('CollectionToolsComponent', () => { |
||||
let component: CollectionToolsComponent; |
||||
let fixture: ComponentFixture<CollectionToolsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CollectionToolsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CollectionToolsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CollectionToolsComponent } from './collection-tools.component'; |
||||
|
||||
describe('CollectionToolsComponent', () => { |
||||
let component: CollectionToolsComponent; |
||||
let fixture: ComponentFixture<CollectionToolsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CollectionToolsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CollectionToolsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CollectionToolsComponent } from './collection-tools.component'; |
||||
|
||||
describe('CollectionToolsComponent', () => { |
||||
let component: CollectionToolsComponent; |
||||
let fixture: ComponentFixture<CollectionToolsComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CollectionToolsComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CollectionToolsComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,11 +0,0 @@
|
||||
<mat-form-field> |
||||
<input matInput [matDatepicker]="picker" placeholder="选择日期" (dateInput)="addEvent('日期是：',$event)" (dataChange)="addEvent('日期是：',$event)"> |
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> |
||||
<mat-datepicker #picker></mat-datepicker> |
||||
|
||||
</mat-form-field> |
||||
<div class="example-events"> |
||||
<div *ngFor="let e of events">{{e}}</div> |
||||
</div> |
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.example-events { |
||||
width: 400px; |
||||
height: 200px; |
||||
border: 1px solid #555; |
||||
overflow: auto; |
||||
} |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DateselectComponent } from './dateselect.component'; |
||||
|
||||
describe('DateselectComponent', () => { |
||||
let component: DateselectComponent; |
||||
let fixture: ComponentFixture<DateselectComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ DateselectComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(DateselectComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,23 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {MatDatepickerInputEvent} from '@angular/material/datepicker'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-dateselect', |
||||
templateUrl: './dateselect.component.html', |
||||
styleUrls: ['./dateselect.component.scss'], |
||||
}) |
||||
|
||||
export class DateselectComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
events: string[] = []; |
||||
|
||||
addEvent(type: string, event: MatDatepickerInputEvent<Date>) { |
||||
this.events.push(`${type}: ${event.value}`); |
||||
} |
||||
} |
||||
@ -1,6 +0,0 @@
|
||||
<mat-toolbar class="footer" color="primary"> |
||||
<div> |
||||
<span>Copyright 2020. All Rights Reserved By Anxin</span> |
||||
</div> |
||||
</mat-toolbar> |
||||
|
||||
@ -1,15 +0,0 @@
|
||||
|
||||
.footer{ |
||||
position: fixed; |
||||
bottom: 0; |
||||
height: 46px; |
||||
width: 100%; |
||||
z-index: 100; |
||||
span{ |
||||
font-size: 16px; |
||||
color: white; |
||||
position: absolute; |
||||
right: 80px; |
||||
top: 8px; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FooterComponent } from './footer.component'; |
||||
|
||||
describe('FooterComponent', () => { |
||||
let component: FooterComponent; |
||||
let fixture: ComponentFixture<FooterComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FooterComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FooterComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-footer', |
||||
templateUrl: './footer.component.html', |
||||
styleUrls: ['./footer.component.scss'] |
||||
}) |
||||
export class FooterComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,34 +0,0 @@
|
||||
<h1>网格列表</h1> |
||||
<mat-grid-list cols="2" rowHeight="2:1" gutterSize="1px"> |
||||
<mat-grid-tile> |
||||
<mat-grid-tile-header>我是页眉</mat-grid-tile-header> |
||||
<img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853" alt=""> |
||||
<mat-grid-tile-footer>我是页脚</mat-grid-tile-footer> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile><img src="http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830" alt=""></mat-grid-tile> |
||||
<mat-grid-tile><img src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt=""></mat-grid-tile> |
||||
<mat-grid-tile><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578887209526&di=fad671fc33c930b0bce56d44ee89ac1f&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Fo_1cqcn9cruusp5k1paa10ak1s98r.jpg" alt=""></mat-grid-tile> |
||||
</mat-grid-list> |
||||
|
||||
|
||||
<br><br><br> |
||||
<mat-grid-list cols="4"> |
||||
<mat-grid-tile [rowspan]="2"> |
||||
<img src="https://pinimg.ibenchu.net/564x/b8/43/42/b8434218b90dbc45b7c0d8156a4131e6.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/29/da/12/29da12d800c0fa53ec5899e29a3fb50e.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/11/24/5e/11245e128eb31ecb38471a1a3b54474e.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/d1/7e/da/d17edaf30276ac0c1cc24cc8bf1d7c41.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile [colspan]="2"> |
||||
<img src="https://pinimg.ibenchu.net/564x/b4/8f/f5/b48ff5c6f0932cf3d34beaccd7ca7ea5.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/83/61/d3/8361d3cea8c217262d0ba0d9a43e4370.jpg"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
@ -1,12 +0,0 @@
|
||||
mat-grid-tile { |
||||
background: lightblue; |
||||
} |
||||
h1{ |
||||
font-size: 26px; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { GridComponent } from './grid.component'; |
||||
|
||||
describe('GridComponent', () => { |
||||
let component: GridComponent; |
||||
let fixture: ComponentFixture<GridComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ GridComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(GridComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-grid', |
||||
templateUrl: './grid.component.html', |
||||
styleUrls: ['./grid.component.scss'] |
||||
}) |
||||
export class GridComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,63 +0,0 @@
|
||||
<!-- <mat-list> |
||||
<h3 mat-subheader>Folders</h3> |
||||
<mat-list-item *ngFor="let folder of folders; last as last"> |
||||
<mat-icon mat-list-icon>folder</mat-icon> |
||||
<h4 mat-line>{{folder.name}}</h4> |
||||
<p mat-line class="demo-2"> {{folder.updated}} </p> |
||||
<mat-divider [inset]="true" *ngIf="!last"></mat-divider> |
||||
</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<h3 mat-subheader>Notes</h3> |
||||
<mat-list-item *ngFor="let note of notes"> |
||||
<mat-icon mat-list-icon>note</mat-icon> |
||||
<h4 mat-line>{{note.name}}</h4> |
||||
<p mat-line class="demo-2"> {{note.updated}} </p> |
||||
</mat-list-item> |
||||
</mat-list> --> |
||||
<h1>列表分隔线</h1> |
||||
<mat-list> |
||||
<mat-list-item>Item 1</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<mat-list-item>Item 2</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<mat-list-item>Item 3</mat-list-item> |
||||
</mat-list> |
||||
<br><br><br> |
||||
<h1>导航列表</h1> |
||||
<mat-nav-list> |
||||
<mat-list-item *ngFor="let link of links"> |
||||
<a matLine href="/ui/list">{{ link.name }}</a> |
||||
<button mat-icon-button (click)="showInfo(link)"> |
||||
跳转到编辑页面 |
||||
</button> |
||||
</mat-list-item> |
||||
</mat-nav-list> |
||||
<br><br><br> |
||||
<h1>行动列表</h1> |
||||
<mat-action-list> |
||||
<button mat-list-item (click)="save()"> 行动一 </button> |
||||
<button mat-list-item (click)="undo()"> 行动二 </button> |
||||
</mat-action-list> |
||||
<br><br><br> |
||||
<h1>选择列表</h1> |
||||
<mat-selection-list #shoes> |
||||
<mat-list-option *ngFor="let shoe of typesOfShoes"> |
||||
{{shoe}} |
||||
</mat-list-option> |
||||
</mat-selection-list> |
||||
<p> |
||||
已选: {{shoes.selectedOptions.selected.length}}种 |
||||
</p> |
||||
<br><br><br> |
||||
<h1>多行列表且带图标</h1> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<mat-icon matListIcon>folder</mat-icon> |
||||
<h3 matLine> item标题 </h3> |
||||
<p matLine> |
||||
<span> 我是 </span> |
||||
<span class="demo-2"> -- xxx </span> |
||||
</p> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ListComponent } from './list.component'; |
||||
|
||||
describe('ListComponent', () => { |
||||
let component: ListComponent; |
||||
let fixture: ComponentFixture<ListComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ListComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ListComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,28 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
@Component({ |
||||
selector: 'app-list', |
||||
templateUrl: './list.component.html', |
||||
styleUrls: ['./list.component.scss'] |
||||
}) |
||||
export class ListComponent implements OnInit { |
||||
|
||||
constructor(private router:Router,private route:ActivatedRoute) { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
links = [ |
||||
{id:0,name:'小红'}, |
||||
{id:1,name:'小绿'}, |
||||
{id:2,name:'小兰'} |
||||
] |
||||
typesOfShoes: string[] = ['耐克', '阿迪达斯', '彪马', '亚瑟士', '斯凯奇']; |
||||
showInfo(link){ |
||||
this.router.navigate([link.id],{relativeTo:this.route}) |
||||
} |
||||
save () { |
||||
|
||||
} |
||||
|
||||
undo () {} |
||||
} |
||||
@ -1,66 +0,0 @@
|
||||
<button mat-button [matMenuTriggerFor]="menu">菜单</button> |
||||
<mat-menu #menu="matMenu"> |
||||
<button mat-menu-item>我是老大</button> |
||||
<button mat-menu-item>我是老二</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="appMenu"> |
||||
<mat-icon>more_vert</mat-icon> |
||||
</button> |
||||
<!-- <mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item>设置</button> |
||||
<button mat-menu-item>帮助</button> |
||||
</mat-menu> --> |
||||
|
||||
<mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item> |
||||
<mat-icon>dialpad</mat-icon> |
||||
<span>重播</span> |
||||
</button> |
||||
<button mat-menu-item disabled> |
||||
<mat-icon>voicemail</mat-icon> |
||||
<span>检查邮件</span> |
||||
</button> |
||||
<button mat-menu-item> |
||||
<mat-icon>notifications_off</mat-icon> |
||||
<span>禁止弹出框</span> |
||||
</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="rootMenu"> |
||||
动物 |
||||
</button> |
||||
<mat-menu #rootMenu="matMenu"> |
||||
<!-- 延时渲染 --> |
||||
<ng-template matMenuContent> |
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">家养</button> |
||||
<button mat-menu-item>野生</button> |
||||
</ng-template> |
||||
|
||||
</mat-menu> |
||||
|
||||
<mat-menu #subMenu="matMenu"> |
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu2">小狗</button> |
||||
<button mat-menu-item>小猫</button> |
||||
<button mat-menu-item>小乌龟</button> |
||||
</mat-menu> |
||||
<mat-menu #subMenu2="matMenu"> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { MenuComponent } from './menu.component'; |
||||
|
||||
describe('MenuComponent', () => { |
||||
let component: MenuComponent; |
||||
let fixture: ComponentFixture<MenuComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ MenuComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(MenuComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-menu', |
||||
templateUrl: './menu.component.html', |
||||
styleUrls: ['./menu.component.scss'] |
||||
}) |
||||
export class MenuComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
<mat-spinner color="warn"></mat-spinner> |
||||
<br> |
||||
<h1>确定进度条</h1> |
||||
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar> |
||||
<br> |
||||
<h1>不确定进度条</h1> |
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar> |
||||
<br> |
||||
<h1>缓冲进度条</h1> |
||||
<mat-progress-bar mode="buffer"></mat-progress-bar> |
||||
<br> |
||||
<h1>查询进度条</h1> |
||||
<mat-progress-bar mode="query"></mat-progress-bar> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ProgressComponent } from './progress.component'; |
||||
|
||||
describe('ProgressComponent', () => { |
||||
let component: ProgressComponent; |
||||
let fixture: ComponentFixture<ProgressComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ProgressComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ProgressComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-progress', |
||||
templateUrl: './progress.component.html', |
||||
styleUrls: ['./progress.component.scss'] |
||||
}) |
||||
export class ProgressComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1 +0,0 @@
|
||||
<mat-slide-toggle [(checked)]="xxx" (click)="sss()">{{xxx}}</mat-slide-toggle> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { SlideComponent } from './slide.component'; |
||||
|
||||
describe('SlideComponent', () => { |
||||
let component: SlideComponent; |
||||
let fixture: ComponentFixture<SlideComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ SlideComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(SlideComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,22 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-slide', |
||||
templateUrl: './slide.component.html', |
||||
styleUrls: ['./slide.component.scss'] |
||||
}) |
||||
export class SlideComponent implements OnInit { |
||||
|
||||
xxx:boolean=false |
||||
sss(){ |
||||
this.xxx = !this.xxx |
||||
console.log(this.xxx) |
||||
} |
||||
constructor() {
|
||||
|
||||
} |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,10 +0,0 @@
|
||||
<p>底部提示消息</p> |
||||
<mat-form-field> |
||||
<input matInput value="哈哈" placeholder="提示信息1" #message> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput value="嘻嘻" placeholder="提示信息2" #action> |
||||
</mat-form-field> |
||||
|
||||
<button mat-button (click)="openSnackBar(message.value, action.value)">显示出来吧！</button> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { SnackbarComponent } from './snackbar.component'; |
||||
|
||||
describe('SnackbarComponent', () => { |
||||
let component: SnackbarComponent; |
||||
let fixture: ComponentFixture<SnackbarComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ SnackbarComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(SnackbarComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,19 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {MatSnackBar} from '@angular/material/snack-bar'; |
||||
@Component({ |
||||
selector: 'app-snackbar', |
||||
templateUrl: './snackbar.component.html', |
||||
styleUrls: ['./snackbar.component.scss'] |
||||
}) |
||||
export class SnackbarComponent implements OnInit { |
||||
|
||||
constructor(private _snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
openSnackBar(message: string, action: string) { |
||||
this._snackBar.open(message, action, { |
||||
duration: 2000, |
||||
}); |
||||
} |
||||
} |
||||
@ -1,51 +0,0 @@
|
||||
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear"> |
||||
{{!isLinear ? '切换为线性' : '切换为非线性'}} |
||||
</button> |
||||
<!-- 整个流程总标签 --> |
||||
<!-- mat-vertical-stepper是垂直方向 --> |
||||
<!-- labelPosition可以定义标签位置 --> |
||||
<!-- linear控制只有在完成前面步骤才可以进行后续步骤 --> |
||||
<mat-horizontal-stepper [linear]="isLinear" #stepper> |
||||
<!-- 第一步 --> |
||||
<!-- stepControl检查步骤有效性 --> |
||||
<mat-step [stepControl]="firstFormGroup"> |
||||
<form [formGroup]="firstFormGroup"> |
||||
<ng-template matStepLabel>填写姓名</ng-template> |
||||
<mat-form-field> |
||||
<!-- 指定控制器名称 --> |
||||
<!-- 过滤器-必填 --> |
||||
<input matInput placeholder="姓名" formControlName="firstCtrl" required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- 必须添加type="button"防止提交 --> |
||||
<button mat-button matStepperNext type="button">下一步</button> |
||||
</div> |
||||
</form> |
||||
</mat-step> |
||||
<!-- 第二步 --> |
||||
<!-- optional属性表示可选 --> |
||||
<mat-step [stepControl]="secondFormGroup" optional="true"> |
||||
<form [formGroup]="secondFormGroup"> |
||||
<ng-template matStepLabel>家庭住址</ng-template> |
||||
<mat-form-field> |
||||
<input matInput placeholder="住址" formControlName="secondCtrl" required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- 步骤按钮 --> |
||||
<button mat-button matStepperPrevious type="button">上一步</button> |
||||
<button mat-button matStepperNext type="button">下一步</button> |
||||
</div> |
||||
</form> |
||||
</mat-step> |
||||
<!-- 第三步 --> |
||||
<mat-step> |
||||
<ng-template matStepLabel>完成</ng-template> |
||||
你已经完成了 |
||||
<div> |
||||
<button mat-button matStepperPrevious>上一步</button> |
||||
<button mat-button (click)="stepper.reset()">重置</button> |
||||
</div> |
||||
</mat-step> |
||||
</mat-horizontal-stepper> |
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { StepperComponent } from './stepper.component'; |
||||
|
||||
describe('StepperComponent', () => { |
||||
let component: StepperComponent; |
||||
let fixture: ComponentFixture<StepperComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ StepperComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(StepperComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,23 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-stepper', |
||||
templateUrl: './stepper.component.html', |
||||
styleUrls: ['./stepper.component.scss'] |
||||
}) |
||||
export class StepperComponent implements OnInit { |
||||
isLinear = false; |
||||
firstFormGroup: FormGroup; |
||||
secondFormGroup: FormGroup; |
||||
constructor(private _formBuilder: FormBuilder) { } |
||||
|
||||
ngOnInit() { |
||||
this.firstFormGroup = this._formBuilder.group({ |
||||
firstCtrl: ['', Validators.required] |
||||
}); |
||||
this.secondFormGroup = this._formBuilder.group({ |
||||
secondCtrl: ['', Validators.required] |
||||
}); |
||||
} |
||||
|
||||
} |
||||
@ -1,22 +0,0 @@
|
||||
<mat-tab-group focusChange="xxx()"> |
||||
<mat-tab label="选项一"> 我是内容一 </mat-tab> |
||||
<mat-tab label="选项二"> 我是内容二 </mat-tab> |
||||
<mat-tab label="选项三"> 我是内容三 </mat-tab> |
||||
</mat-tab-group> |
||||
|
||||
|
||||
<!-- 对于更复杂的标签标题，请在其中添加带有mat-tab-label指令的模板mat-tab。 --> |
||||
<mat-tab-group> |
||||
<mat-tab> |
||||
<ng-template mat-tab-label> |
||||
一 <strong>二</strong> 三 |
||||
</ng-template> |
||||
<h1>四五六</h1> |
||||
</mat-tab> |
||||
<mat-tab> |
||||
<ng-template mat-tab-label> |
||||
<mat-icon>thumb_down</mat-icon> 失败者 |
||||
</ng-template> |
||||
<h1>rush B!!!</h1> |
||||
</mat-tab> |
||||
</mat-tab-group> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { TabgroupComponent } from './tabgroup.component'; |
||||
|
||||
describe('TabgroupComponent', () => { |
||||
let component: TabgroupComponent; |
||||
let fixture: ComponentFixture<TabgroupComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ TabgroupComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(TabgroupComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,17 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-tabgroup', |
||||
templateUrl: './tabgroup.component.html', |
||||
styleUrls: ['./tabgroup.component.scss'] |
||||
}) |
||||
export class TabgroupComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
xxx(){ |
||||
console.log("xxxx") |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 302 KiB |
Loading…
Reference in new issue