Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
author: zhangab <zhanganbing@chinamobile.com> 2018-10-23 11:32:03 +0800
committer: zhangab <zhanganbing@chinamobile.com> 2018-10-23 11:32:05 +0800
commit: de9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree: 0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src
parent: 101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
160 files changed, 31111 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css
new file mode 100644
index 00000000..757a55b6
--- /dev/null
+++ b/usecaseui-portal/src/app/alarm/alarm.component.css
@@ -0,0 +1,138 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.select .query_criteria span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.select .query_criteria nz-dropdown {
+  vertical-align: middle;
+}
+.select .query_criteria nz-dropdown :hover {
+  border-color: #147dc2;
+}
+.select .query_criteria nz-dropdown button {
+  width: 165px;
+  height: 30px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #9fa9ab;
+}
+.select .query_criteria nz-dropdown button span {
+  font-weight: 400;
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+}
+.select .query_criteria nz-dropdown button i {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.select .query_criteria .search {
+  margin-left: 20px;
+  height: 30px;
+  padding: 0 10px;
+}
+.select .query_criteria .search span {
+  color: #fff;
+  font-weight: 400;
+}
+::ng-deep .vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+::ng-deep .vertical-center-modal .ant-modal {
+  top: 0;
+}
+.content {
+  clear: both;
+  padding-top: 20px;
+}
+.content .title {
+  border-radius: 5px 5px 5px 5px;
+  background-color: #fff;
+  height: 106px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 20px;
+  clear: both;
+}
+.content .title ul {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 70%;
+  float: left;
+}
+.content .title ul li {
+  list-style: none;
+  padding-left: 32px;
+  width: 100%;
+  border-left: 1px solid #eceff4;
+}
+.content .title ul li h5 {
+  font: 500 14px "Arial";
+  color: #3d4d65;
+}
+.content .title ul li p {
+  font: 500 24px "Arial";
+  color: #3fa8eb;
+  margin-bottom: 0;
+}
+.content .title ul li:nth-child(1) {
+  border: none;
+}
+.content .title .thumbnail {
+  width: 25%;
+  height: 90px;
+  float: left;
+  margin-top: 8px;
+}
+.content .tablelist {
+  background-color: #fff;
+  padding: 24px 10px 0px;
+  border-radius: 0 0 5px 5px;
+}
+.content .tablelist .action {
+  padding: 10px 0 0 20px;
+}
+.content .tablelist .action .details {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(../../assets/images/icon.png) center -113px;
+}
+.content .tablelist .action .details:hover {
+  background: url(../../assets/images/icon.png) no-repeat center -128px;
+}
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
new file mode 100644
index 00000000..8f95de37
--- /dev/null
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -0,0 +1,113 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">>
+        Details</span> </h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+    <div class="query_criteria">
+        <span>Source Name: </span>
+        <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+            <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+            <ul nz-menu>
+                <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                    <a>{{item.name}}</a>
+                </li>
+            </ul>
+        </nz-dropdown>
+        &nbsp;&nbsp;
+        <span>Priority: </span>
+        <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+            <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+            <ul nz-menu>
+                <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+                    <a>{{item}}</a>
+                </li>
+            </ul>
+        </nz-dropdown>
+        &nbsp;&nbsp;
+        <span>Status: </span>
+        <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+            <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+            <ul nz-menu>
+                <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+                    <a>{{item}}</a>
+                </li>
+            </ul>
+        </nz-dropdown>
+        <br> <br>
+        <span>Report Time: </span>
+        <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+        <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+    </div>
+</div>
+<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()"
+    (nzOnOk)="handleOkMiddle()">
+    <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line>
+</nz-modal>
+<div class="content" [@showHideAnimate]="state">
+    <div class="title">
+        <ul>
+            <li>
+                <h5>All</h5>
+                <p>{{alarmList.all }}</p>
+            </li>
+            <li>
+                <h5>Closed</h5>
+                <p>{{alarmList.closed }}</p>
+            </li>
+            <li>
+                <h5>Action</h5>
+                <p>{{alarmList.Action }}</p>
+            </li>
+        </ul>
+        <div class="thumbnail" (click)="showModalMiddle()">
+            <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+        </div>
+    </div>
+    <div class="tablelist">
+        <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]"
+            nzSize="middle">
+            <thead (nzSortChange)="sort($event)" nzSingleSort>
+                <tr>
+                    <th nzWidth="5%">NO</th>
+                    <th nzWidth="20%">Source Name</th>
+                    <th nzWidth="10%">Priority</th>
+                    <th nzWidth="20%">SpecificProblem</th>
+                    <th nzWidth="20%">Report Time</th>
+                    <th nzWidth="15%">Status</th>
+                    <th nzWidth="10%">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                <tr *ngFor="let item of list; let i = index; ">
+                    <td>{{i+1}}</td>
+                    <td>{{item.name}}</td>
+                    <td>{{item.age}}</td>
+                    <td>{{item.address}}</td>
+                    <td>{{item.address}}</td>
+                    <td>{{item.address}}</td>
+                    <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
+                </tr>
+                <!-- </ng-template> -->
+            </tbody>
+        </nz-table>
+    </div>
+</div>
+<div [@showHideAnimate]="state2">
+    <app-details></app-details>
+</div>
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
new file mode 100644
index 00000000..2d05c703
--- /dev/null
+++ b/usecaseui-portal/src/app/alarm/alarm.component.less
@@ -0,0 +1,132 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.select {
+    .query_criteria {
+        span {
+            display: inline-block;
+            font: 700 14px "Arial";
+            color: #4c5e70;
+        }
+        nz-dropdown {
+            vertical-align: middle;
+            :hover{
+                border-color: #147dc2;
+            }
+            button {
+                width: 165px;
+                height: 30px;
+                background-color: #eceff4;
+                text-align: left;
+                border-color: #9fa9ab;
+                span {
+                    font-weight: 400;
+                    display: inline-block;
+                    width: 120px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-top: 2px;
+                }
+                i {
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                }
+            }
+            //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+        }
+        .search {
+            margin-left: 20px;       
+            height: 30px;
+            padding: 0 10px;
+            span {
+                color: #fff;
+                font-weight: 400;
+            }
+        }
+    }
+   
+}
+// model style
+
+::ng-deep .vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+::ng-deep .vertical-center-modal .ant-modal {
+    top: 0;
+}
+
+.content {
+    clear: both;
+    padding-top: 20px;
+    .title {
+        border-radius: 5px 5px 5px 5px;
+        background-color: #fff;
+        height: 106px;
+        border-bottom: 1px solid #f0f0f0;
+        margin-bottom: 20px;
+        clear: both;
+        ul {
+            display: flex;
+            display: -webkit-flex; 
+            justify-content: space-around;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 70%;
+            float: left;
+            li {
+                list-style: none;
+                padding-left: 32px;
+                width: 100%;
+                border-left: 1px solid #eceff4;
+                h5 {
+                    font: 500 14px "Arial";
+                    color: #3d4d65;
+                }
+                p {
+                    font: 500 24px "Arial";
+                    color: #3fa8eb;
+                    margin-bottom: 0;
+                }
+            }
+            li:nth-child(1){
+                border: none;
+            }
+        }
+        .thumbnail {
+            width: 25%;
+            height: 90px;
+            float: left;
+            margin-top: 8px;
+        }
+    }
+    .tablelist {
+        background-color: #fff;
+        padding: 24px 10px 0px;
+        border-radius: 0 0 5px 5px;
+        .action{
+            padding: 10px 0 0 20px;
+            .details{
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background: url(../../assets/images/icon.png) center -113px;
+                &:hover {
+                    background: url(../../assets/images/icon.png) no-repeat center -128px;
+                }
+            }
+        }
+    }
+}
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
new file mode 100644
index 00000000..c7f5a738
--- /dev/null
+++ b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlarmComponent } from './alarm.component';
+
+describe('AlarmComponent', () => {
+  let component: AlarmComponent;
+  let fixture: ComponentFixture<AlarmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlarmComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlarmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
new file mode 100644
index 00000000..72dd5181
--- /dev/null
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -0,0 +1,380 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import * as addDays from 'date-fns/add_days';
+import { showHideAnimate, slideToRight } from '../animates';
+
+@Component({
+  selector: 'app-alarm',
+  templateUrl: './alarm.component.html',
+  styleUrls: ['./alarm.component.less'],
+  animations: [
+    showHideAnimate, slideToRight
+  ]
+})
+export class AlarmComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState; //路由动画
+  public pageNumber:number=1;
+  public pageSize:number=5;
+  public name:string='';
+  public Priority:string ='';
+  public Status:string ='';
+  public Report:string ='';
+  list: any;
+
+
+  constructor(
+    private myhttp:MyhttpService) { }
+  isVisibleMiddle = false;
+
+  showModalMiddle(): void {
+    this.isVisibleMiddle = true;
+  }
+  handleOkMiddle(): void {
+    console.log('click ok');
+    this.isVisibleMiddle = false;
+  }
+  handleCancelMiddle(): void {
+    this.isVisibleMiddle = false;
+  }
+  ngOnInit() {
+    this.getAlarmFormData();
+  }
+
+  // 筛选框（下拉框）
+  // sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+  sourceNameList=[
+    {key:null,name:'请选择'},
+    {key:1,name:'aaaa'},
+    {key:2,name:'bbbb'},
+    {key:3,name:'cccc'},
+    {key:4,name:'dddddDDDDDDDDDDDDDDD'}
+  ]
+  sourceNameSelected = this.sourceNameList[0].name;
+  priorityList = ['aaaa','bbbb','cccc','ddddd'];
+  prioritySelected = this.priorityList[0];
+  statusList = ['aaaa','bbbb','cccc','ddddd'];
+  statusSelected = this.statusList[0];
+  choseSourceName(item){
+    console.log(item,'item1');
+    this.sourceNameSelected = item;
+  }
+  chosePriority(item){
+    console.log(item);
+    this.prioritySelected = item;
+  }
+  choseStatus(item){
+    console.log(item);
+    this.statusSelected = item;
+  }
+
+  // 日期筛选
+  dateRange =  [ addDays(new Date(), -30), new Date() ];
+
+  onChange(result: Date): void {
+    console.log('onChange: ', result);
+  }
+  // search(){
+  //   this.myhttp.getAlarmFormData().subscribe
+
+  // }
+  sort(e){
+
+  }
+  // 数量统计
+  alarmList = {
+    all:22439,
+    closed:37923,
+    Action: 12342
+  }
+
+  //折线图縮略圖
+  alarmChartData:Object;
+  alarmChartInit:Object = {
+    height:100,
+    width:290,
+    option:{
+      tooltip : {
+        show : false,
+        trigger: 'axis',
+      },
+      legend: {
+        show :false,
+        bottom: '0px',
+        data: ['All', 'Active', 'Closed']
+      },
+      series: [
+        {
+            name: 'All',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_one
+            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65],
+            itemStyle: {
+              color: "#526b75"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        },
+        {
+            name: 'Active',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_two
+            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12],
+            itemStyle: {
+              color: "#fb6e6e"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        },
+        {
+            name: 'Closed',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_two
+            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5],
+            itemStyle: {
+              color: "#3fa8eb"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        }
+      ]
+    }
+  };
+  getAlarmChartData(){
+    let paramsObj = {
+      alarmSourceName:this.sourceNameSelected
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data)=>{
+        this.alarmChartData = {
+          series:[
+            {data:data.CPU},
+            {data:data.CPU},
+            {data:data.Memory}
+          ]
+        }
+      },(err)=>{
+        console.log(err);
+      })
+  }
+  //折线图放大圖 
+  alarmChartDataBig:Object;
+  alarmChartInitBig:Object = {
+    height:240,
+    width:500,
+    option:{
+      tooltip : {
+        show : true,
+        trigger: 'axis',
+      },
+      legend: {
+        show :true,
+        bottom: '0px',
+        data: ['All', 'Active', 'Closed']
+      },
+      series: [
+        {
+            name: 'All',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_one
+            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65],
+            itemStyle: {
+              color: "#526b75"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        },
+        {
+            name: 'Active',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_two
+            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12],
+            itemStyle: {
+              color: "#fb6e6e"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        },
+        {
+            name: 'Closed',
+            type: 'line',
+            smooth: true,//将图变得平缓
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8
+            },
+            //timeframe_two
+            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5],
+            itemStyle: {
+              color: "#3fa8eb"
+            },
+            lineStyle: {
+              width: 1,
+              opacity: 0.5
+            }
+        }
+      ]
+    }
+  };
+  //表格数据
+  dataSet = [
+    {
+      name       : 'John Brown',
+      age        : 32,
+      expand     : false,
+      address    : 'New York No. 1',
+      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
+    },
+    {
+      name       : 'Aim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Xim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'aoe Black',
+      age        : 32,
+      expand     : false,
+      address    : 'Sidney No. 1',
+      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
+    }
+  ];
+
+  //详情页标题显示
+  detailshow = false;
+  // 显示隐藏动画
+  state = "show";
+  state2 = "hide";
+  detailShow() {
+    this.state = 'hide';
+    this.state2 = 'show';
+    this.detailshow = true;
+  }
+  detailHide() {
+    this.state = 'show';
+    this.state2 = 'hide';
+    this.detailshow = false;
+  }
+  getSelects:Object = {
+    countAll:0,
+    countClose:0,
+    countActive:0,
+    eventNameList:[],
+    sourceIdList:[],
+    reportingEntityNameList:[],
+    sourceNameList:[],
+};
+  getAlarmFormData(){
+    this.myhttp.getAlarmFormData(this.pageNumber,this.pageSize,this.name,this.Priority,this.Status,this.Report).subscribe((data)=>{
+      if(data.retCode ==200){
+        this.list = data.list;
+      }
+      console.log(data,'data');
+    })
+  }
+}
diff --git a/usecaseui-portal/src/app/animates.ts b/usecaseui-portal/src/app/animates.ts
new file mode 100644
index 00000000..cde7e568
--- /dev/null
+++ b/usecaseui-portal/src/app/animates.ts
@@ -0,0 +1,42 @@
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+// 路由动画
+export const slideToRight = trigger('routerAnimate', [
+    // 定义void表示空状态下
+    state('void', style({ position:'fixed', zIndex:'-1' })), //不明白为啥要加定位出场动画才生效
+    // * 表示任何状态
+    state('*', style({ })),
+    // 进场动画
+    transition(':enter', [
+        style({transform: 'translateX(-100%)'}),
+        animate('.5s ease-in-out')
+    ]),
+    // 出场动画
+    transition(':leave', [
+        animate('.5s ease-in-out',  style({transform: 'translateX(100%)'}) )
+    ])
+]);
+// 详情页显示隐藏动画
+export const showHideAnimate = trigger('showHideAnimate', [
+    state('show', style({
+      transform: 'scale(1)',
+      display:'block',
+    })),
+    state('hide', style({
+      transform: 'scale(0)',
+      display:'none'
+    })),
+    transition('show => hide', animate('300ms ease-in')),
+    transition('hide => show', animate('300ms ease-out'))
+]);
+// 详情页显示隐藏动画
+export const slideUpDown = trigger('slideUpDown', [
+    state('down', style({
+        height: "*"
+    })),
+    state('up', style({
+        height: "0"
+    })),
+    transition('down => up', animate('300ms ease-in')),
+    transition('up => down', animate('300ms ease-out'))
+]);
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
new file mode 100644
index 00000000..7fe7361c
--- /dev/null
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -0,0 +1,41 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+
+import { HomeComponent }        from './home/home.component';
+import { ServicesComponent }    from './services/services.component';
+import { ServicesListComponent }    from './services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent }       from './alarm/alarm.component';
+import { PerformanceComponent } from './performance/performance.component';
+import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
+
+import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
+
+// import { DetailsComponent } from './details/details.component';
+
+const ServicesChildRoutes: Routes = [
+  { path: 'services-list', component: ServicesListComponent},
+  { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent},
+  { path: '**', redirectTo: 'services-list' }
+]
+
+const routes: Routes = [
+  { path: 'home', component: HomeComponent},
+  // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //暂时不是子路由结构
+  { path: 'services/services-list', component: ServicesListComponent},
+  { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent},
+  { path: 'alarm', component: AlarmComponent},
+  { path: 'performance', component: PerformanceComponent},
+  { path: 'performance/performance-vnf', component: PerformanceVnfComponent},
+  { path: 'performance/performance-vm', component: PerformanceVmComponent},
+  { path: 'network', component: CcvpnNetworkComponent },
+  { path: '**', redirectTo: 'home', pathMatch: 'full'}
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/usecaseui-portal/src/app/app.component.css b/usecaseui-portal/src/app/app.component.css
new file mode 100644
index 00000000..f25d3262
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.css
@@ -0,0 +1,39 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+nz-layout nz-sider ul li {
+  margin: 0;
+  font-size: 16px;
+}
+nz-layout nz-sider ul li span {
+  font-size: 16px;
+}
+nz-layout nz-sider ul li i {
+  width: 16px;
+  height: 16px;
+}
+nz-layout nz-sider ul li .icon-services {
+  background: url(../assets/images/icon.png) no-repeat 0px -16px;
+}
+nz-layout nz-sider ul li ul li {
+  font-size: 12px;
+}
+nz-layout nz-sider ul hr {
+  margin: 0 auto;
+  background-color: #39434f;
+  height: 1px;
+  border: none;
+  width: 80%;
+}
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
new file mode 100644
index 00000000..8e189e73
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.html
@@ -0,0 +1,80 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<nz-layout>
+  <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0">
+    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;">
+      <li nz-menu-item nzSelected> 
+        <a routerLink="home">
+          <span title>
+            <i class="anticon anticon-home"></i>
+            <span> {{"Home" | translate}} </span>
+          </span>
+        </a>
+      </li>
+      <hr>
+      <li nz-submenu>
+        <span title><i class="anticon anticon-home"></i> {{"Services" | translate}} </span>
+        <ul>
+          <li nz-menu-item><a routerLink='services/services-list'> {{"Services List" | translate}}</a></li>
+          <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> Onboard VNF/VM </a></li>
+        </ul>
+      </li>
+      <!-- <hr>
+      <li nz-menu-item>
+        <a routerLink="alarm">
+          <span title>
+            <i class="anticon anticon-mail"></i>
+            <span> {{"Alarm" | translate}} </span>
+          </span>
+        </a>
+      </li>
+      <hr> -->
+      <li nz-submenu>
+        <span title><i class="anticon anticon-setting"></i> {{"Monitor" | translate}} </span>
+        <ul>
+          <li nz-menu-item><a routerLink='alarm'> {{"Alarm" | translate}} </a></li>
+          <li nz-menu-item><a routerLink='performance/performance-vnf'> {{"Performance" | translate}}</a></li>
+        </ul>
+      </li>
+      <hr>
+      <li nz-menu-item>
+        <a routerLink="network">
+          <span title>
+            <i class="anticon anticon-share-alt"></i>
+            <span> {{"Network" | translate}} </span>
+          </span>
+        </a>
+      </li>
+    </ul>
+    <button (click)="changeLanguage('zh')" >{{"zh" | translate}}</button>
+    <button (click)="changeLanguage('en')" >{{"en" | translate}}</button>
+    <select name="Language" id="" [(ngModel)]="selectLanguage" (change)="changeLanguage1()">
+      <option *ngFor="let item of Language"  value="{{item}}">{{item | translate}}</option>
+    </select>
+
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+      <button nz-button nz-dropdown><span>{{selectLanguage | translate}}</span> <i class="anticon anticon-down"></i></button>
+      <ul nz-menu>
+        <li nz-menu-item (click)="changeLanguage2(item)" *ngFor="let item of Language">
+          <a>{{item | translate}}</a>
+        </li>
+      </ul>
+    </nz-dropdown>
+  </nz-sider>
+  <nz-layout style="margin-left: 260px; padding: 20px 32px; height:100vh; position:relative;">
+      <router-outlet></router-outlet>
+  </nz-layout>
+</nz-layout>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
new file mode 100644
index 00000000..a805166e
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.less
@@ -0,0 +1,32 @@
+nz-layout {
+    nz-sider {
+        ul {
+            li {
+                margin: 0;
+                font-size: 16px;
+                span {
+                    font-size: 16px;
+                }
+                i {
+                    width: 16px;
+                    height: 16px;
+                }
+                .icon-services {
+                    background: url(../assets/images/icon.png) no-repeat 0px -16px;
+                }
+                ul {
+                    li{
+                        font-size: 12px;
+                    }
+                }
+            }
+            hr {
+                margin: 0 auto;
+                background-color: #39434f;
+                height: 1px;
+                border: none;
+                width: 80%;
+            }
+        }
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/app.component.spec.ts b/usecaseui-portal/src/app/app.component.spec.ts
new file mode 100644
index 00000000..bcbdf36b
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
new file mode 100644
index 00000000..be13c1a1
--- /dev/null
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.less']
+})
+export class AppComponent {
+  constructor(private translate:TranslateService){
+    translate.addLangs(['en', 'zh']);
+    translate.setDefaultLang('en');
+    // translate.use('en');
+  }
+  changeLanguage(Language): void {
+    switch(Language){
+      case 'en':
+        this.translate.use('en');
+        break;
+      case 'zh':
+        this.translate.use('zh');
+    }
+  }
+  // 多语言
+  Language:String[] = ["zh","en"];
+  selectLanguage = "en";
+  changeLanguage1(){
+    this.translate.use(this.selectLanguage);
+  }
+  changeLanguage2(item){
+    this.translate.use(item);
+  }
+}
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
new file mode 100644
index 00000000..7c24f110
--- /dev/null
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -0,0 +1,98 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+export function HttpLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient, '../assets/i18n/', '.json');
+}
+
+import { AppRoutingModule } from './app-routing.module';
+
+//注册语言包
+import { registerLocaleData } from '@angular/common';
+import en from '@angular/common/locales/en';
+registerLocaleData(en);  
+
+//自定义组件
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { ServicesComponent } from './services/services.component';
+import { ServicesListComponent } from './services/services-list/services-list.component';
+import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
+import { AlarmComponent } from './alarm/alarm.component';
+import { PerformanceComponent } from './performance/performance.component';
+import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component';
+import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component';
+import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component';
+import { CcvpnDetailComponent } from './ccvpn-detail/ccvpn-detail.component';
+import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.component';
+
+import { DetailsComponent } from './components/details/details.component';
+import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
+
+import { BarComponent } from './components/charts/bar/bar.component';
+import { LineComponent } from './components/charts/line/line.component';
+import { PieComponent } from './components/charts/pie/pie.component';
+
+import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common';
+// 自定义服务
+import { MyhttpService } from './myhttp.service';
+import { networkHttpservice } from './networkHttpservice.service';
+
+@NgModule({
+  providers   : [ 
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    { provide: NZ_I18N, useValue: en_US },
+    MyhttpService,
+    networkHttpservice 
+  ],
+  declarations: [
+    AppComponent,
+    HomeComponent,
+
+    ServicesComponent,
+    ServicesListComponent,
+    OnboardVnfVmComponent,
+
+    AlarmComponent,
+    
+    PerformanceComponent,
+    PerformanceVnfComponent,
+    PerformanceVmComponent,
+    DetailsComponent,
+    PieComponent,
+    LineComponent,
+    BarComponent,
+    GraphiclistComponent,
+
+    CcvpnNetworkComponent,
+    CcvpnDetailComponent,
+    CcvpnCreationComponent,
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    BrowserAnimationsModule,
+    NgZorroAntdModule.forRoot(),
+    NgxEchartsModule,
+    AppRoutingModule
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
new file mode 100644
index 00000000..35fdbef5
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -0,0 +1,195 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px;
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 10px;
+}
+.model {
+    background-color: #fff;
+    height: 90%;
+    overflow-y: auto;
+}
+.model .back {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+}
+.model .creation {
+    position: relative;
+    width: 60%;
+    height: 100%;
+    overflow-y: auto;
+    border-radius: 5px;
+    padding: 15px;
+}
+.model .creation h3.title {
+    height: 20px;
+    font: 700 20px/20px "Arial";
+    color: #666;
+}
+.model .creation h3 {
+    height: 20px;
+    font: 700 16px/20px "Arial";
+    margin: 5px 0px;
+    color: #000;
+}
+.model .creation .submit {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+}
+/* SOTN VPN */
+.model .creation .sotnvpn ul li {
+    display: inline-block;
+    height: 35px;
+    width: 49.5%;
+}
+.model .creation .sotnvpn ul li span {
+    display: inline-block;
+    width: 110px;
+    font: 700 14px "Arial";
+    color: #3fa8eb;
+    vertical-align: middle;
+}
+.model .creation .sotnvpn ul li input {
+    width: 165px;
+}
+/* Site List */
+/* addsite model */
+.model .sitemodel {
+    position: absolute;
+    z-index: 10;
+    left: 10px;
+    top: 60px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px #000;
+    width: 60%;
+    max-height: 90%;
+    border-radius: 5px;
+    overflow-y: auto;
+}
+.model .sitemodel h3 {
+    height: 30px;
+    font: 700 16px/30px "Arial";
+    border-bottom: 1px solid #aaa;
+    padding-left: 10px;
+}
+.model .sitemodel h4 {
+    height: 30px;
+    font: 700 16px/30px "Arial";
+    padding-left: 10px;
+    background-color: #ddd;
+}
+.model .sitemodel .inputs {
+    padding: 10px 20px 0;
+}
+.model .sitemodel .inputs ul li {
+    display: inline-block;
+    height: 35px;
+    width: 49.5%;
+}
+.model .sitemodel .inputs ul li span {
+    display: inline-block;
+    width: 110px;
+    font: 700 14px "Arial";
+    color: #3fa8eb;
+    vertical-align: middle;
+}
+.model .sitemodel .inputs input {
+    width: 165px;
+}
+.model .sitemodel .action {
+    float: left;
+    padding: 10px;
+}
+
+.model nz-table tbody td i.anticon:hover {
+    color: #3fa8eb;
+    cursor: pointer;
+}
+
+/* site table */
+.model .site nz-table tbody td i.anticon:hover {
+    color: #3fa8eb;
+    cursor: pointer;
+}
+/* WAN Port */
+
+/* Site Group List */
+.model .sitegroup .sitegroupmodal {
+    position: absolute;
+    z-index: 10;
+    left: 200px;
+    top: 300px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px #000;
+    width: 330px;
+    border-radius: 5px;
+}
+.model .sitegroup .sitegroupmodal h3 {
+    height: 30px;
+    font: 700 16px/30px "Arial";
+    border-bottom: 1px solid #aaa;
+    padding-left: 10px;
+}
+.model .sitegroup .sitegroupmodal .inputs {
+    padding: 10px 20px 0;
+}
+.model .sitegroup .sitegroupmodal span {
+    display: inline-block;
+    width: 100px;
+    margin-bottom: 10px;
+}
+.model .sitegroup .sitegroupmodal .inputs input {
+    width: 165px;
+}
+.model .sitegroup .sitegroupmodal .action {
+    float: right;
+    padding: 10px;
+}
+
+
+/* 图 */
+.model .chart {
+    width: 40%;
+    padding: 10px;
+    height: 100%;
+    border-left: 10px solid #f3f3f3;
+}
+.model .chart #createChart {
+    width: 100%;
+    height: 80%;
+    margin-top: 20px;
+    position: relative;
+}
+.model .chart #createChart .siteNameP {
+    position: fixed;
+    border: 5px;
+    padding: 3px 5px;
+    color: #fff;
+    background: #999;
+    box-shadow: 0px 0px 20px #000;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
new file mode 100644
index 00000000..15486238
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -0,0 +1,313 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+  <!-- 创建数据 -->
+  <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+  <div class="creation fl">
+      <h3 class="title">{{createParams.commonParams.templateType}} Instance Creation</h3>
+      <div class="sotnvpn clearfix">
+        <h3>SOTN VPN Info</h3>
+        <ul>
+          <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
+          <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
+          <li><span>Start Time:</span> 
+            <nz-date-picker [(ngModel)]="sotnInfo.startTime" 
+              (ngModelChange)="startTimeChange($event)"
+              nzPlaceHolder="start time"
+              nzShowTime>
+            </nz-date-picker>
+          </li>
+          <li><span>End Time:</span> 
+            <nz-date-picker [(ngModel)]="sotnInfo.endTime" 
+              (ngModelChange)="endTimeChange($event)"
+              nzPlaceHolder="end time"
+              nzShowTime>
+            </nz-date-picker>
+          </li>
+          <li><span>COS:</span> 
+            <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
+              <nz-option nzValue="premium" nzLabel="premium"></nz-option>
+              <nz-option nzValue="standard" nzLabel="standard"></nz-option>
+            </nz-select>
+          </li>
+          <li><span>Reroute Enabled:</span> <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> </li>
+          <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
+          <li><span>Dual Link:</span>
+             <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.dualLink" nzAllowClear nzPlaceHolder="Choose">
+              <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
+              <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
+              <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
+            </nz-select> 
+          </li>
+          <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
+          <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
+          <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
+          <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
+          <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li>
+          <li><span>Coupling Flag:</span> <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch> </li>
+        </ul>
+      </div>
+    
+      <div class="site">
+        <h3>Site List</h3>
+        <button nz-button (click)="addSite()">Add Site</button>
+        <nz-table #siteTable [nzData]="siteTableData"  
+          [nzShowPagination]="false"
+          nzSize="small">
+          <thead>
+            <tr>
+              <th nzWidth="10%"> NO. </th>
+              <th nzWidth="15%"> Name </th>
+              <th nzWidth="15%"> Description </th>
+              <th nzWidth="15%"> Post Code </th>
+              <th nzWidth="15%"> Address </th>
+              <th nzWidth="15%"> VLAN </th>
+              <th nzWidth="15%"> Action </th>
+            </tr>
+          </thead>
+          <tbody>
+              <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
+              <tr *ngFor="let item of siteTable.data; let i = index; ">
+                  <td>{{i+1}}</td>
+                  <td>{{item.baseData.name}}</td>
+                  <td>{{item.baseData.description}}</td>
+                  <td>{{item.baseData.postcode}}</td>
+                  <td>{{item.baseData.address}}</td>
+                  <td>{{item.baseData.vlan}}</td>
+                  <td>
+                      <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+                      <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+                  </td>
+              </tr>
+              <!-- </ng-template> -->
+          </tbody>
+        </nz-table>
+      </div>
+ 
+      <div class="sitegroup" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+        <h3>Site_Group List</h3>
+        <button nz-button (click)="addSiteGroup()">Add Group</button>
+        <div class="sitegroupmodal" *ngIf="siteGroupModelShow">
+          <h3>Site_Group</h3>
+          <div class="inputs">
+            <span>Group Name:</span> <input nz-input [(ngModel)]="siteGroupModelData.name"> <br>
+            <span>Topology:</span>
+            <nz-select style="width: 165px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear nzPlaceHolder="Choose">
+              <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
+              <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
+            </nz-select>
+            <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading" [nzShowPagination]="false" nzSize="small">
+              <thead>
+                <tr>
+                  <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"  (nzCheckedChange)="groupModal_checkAll($event)"></th>
+                  <th> Site Name</th>
+                  <th> Role</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let item of groupModalTable.data; let i = index;">
+                  <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus($event)"></td>
+                  <td>{{ item.siteName }}</td>
+                  <td>
+                    <nz-select style="width: 80px;" [(ngModel)]="item.role" 
+                      nzAllowClear nzPlaceHolder="Choose" 
+                      [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
+                      <nz-option nzValue="hub" nzLabel="hub"></nz-option>
+                      <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
+                    </nz-select> 
+                  </td>
+                </tr>
+              </tbody>
+            </nz-table>
+          </div>
+          <div class="action">
+            <button nz-button nzType="primary" (click)="addsitegroup_OK()">OK</button> 
+            <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
+          </div>  
+        </div>
+        <nz-table #siteGroupTable [nzData]="siteGroupTableData"  
+          [nzLoading]="loading"
+          [nzShowPagination]="false"
+          nzSize="small">
+          <thead>
+            <tr>
+              <th nzWidth="10%"> NO. </th>
+              <th nzWidth="20%"> Group Name </th>
+              <th nzWidth="20%"> Topology </th>
+              <th nzWidth="20%"> Sites </th>
+              <th nzWidth="15%"> Role </th>
+              <th nzWidth="15%"> Action </th>
+            </tr>
+          </thead>
+          <tbody>
+              <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
+              <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
+                  <td>{{i+1}}</td>
+                  <td>{{item.name}}</td>
+                  <td>{{item.topology}}</td>
+                  <td>{{item.sites}}</td>
+                  <td>{{item.role}}</td>
+                  <td>
+                      <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+                      <span class="action" (click)="deleteGroupSite(i+1)"><i class="anticon anticon-delete"></i></span>
+                  </td>
+              </tr>
+              <!-- </ng-template> -->
+          </tbody>
+        </nz-table>
+      </div>
+
+      <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
+  </div>
+  <!-- site模态框 -->
+  <div class="sitemodel" *ngIf="siteModelShow">
+    <h3>Site_Enterprise Service</h3>
+    <div class="inputs">
+      <ul>
+        <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
+        <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
+        <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span> 
+          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.type" nzAllowClear nzPlaceHolder="Choose">
+              <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
+              <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
+          </nz-select>
+        </li>
+        <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span> 
+          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.role" nzAllowClear nzPlaceHolder="Choose">
+              <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
+              <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
+          </nz-select>
+        </li>
+        <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
+        <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
+        <li><span>Address:</span>
+          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.address" nzAllowClear nzPlaceHolder="Choose">
+            <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option>
+          </nz-select>
+        </li> 
+      </ul>
+    </div>
+    <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+      <h4>CPE</h4>
+      <div class="inputs">
+        <ul>
+          <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
+          <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
+          <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
+          <li><span>Class:</span> 
+            <nz-select style="width: 165px;" [(ngModel)]="siteCpeData.device_class" nzAllowClear nzPlaceHolder="Choose">
+                <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
+                <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
+            </nz-select>
+          </li>
+          <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
+          <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
+          <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
+        </ul>
+      </div>
+      <h4>WAN Port</h4>
+      <div>
+        <nz-table #siteModalTable [nzData]="siteWanData"  
+          [nzLoading]="loading"
+          [nzShowPagination]="false"
+          nzSize="small">
+          <thead>
+            <tr>
+              <th nzWidth="10%"> NO. </th>
+              <th nzWidth="15%"> Name </th>
+              <th nzWidth="15%"> Description </th>
+              <th nzWidth="15%"> PortType </th>
+              <th nzWidth="18%"> PortNumber </th>
+              <th nzWidth="17%"> IPAddress </th>
+              <th nzWidth="10%"> Action </th>
+            </tr>
+          </thead>
+          <tbody>
+              <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+              <tr *ngFor="let item of siteModalTable.data; let i = index; ">
+                  <td>{{i+1}}</td>
+                  <td>{{item.sitewanport_name}}</td>
+                  <td>{{item.sitewanport_description}}</td>
+                  <td>{{item.sitewanport_portType}}</td>
+                  <td>{{item.sitewanport_portNumber}}</td>
+                  <td>{{item.sitewanport_ipAddress}}</td>
+                  <td>
+                      <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
+                  </td>
+              </tr>
+              <!-- </ng-template> -->
+          </tbody>
+        </nz-table>            
+      </div>
+      <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
+        <ul class="wanPortModalList">
+          <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
+          <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
+          <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"></li>
+          <li><span>Port Type:</span> 
+            <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear nzPlaceHolder="Choose">
+                <nz-option nzValue="GE" nzLabel="GE"></nz-option>
+                <nz-option nzValue="FE" nzLabel="FE"></nz-option>
+                <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
+                <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
+                <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
+                <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
+            </nz-select>
+          </li>
+          <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"></li>
+          <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
+          <li><span>Provider IP Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"></li>
+          <li><span>Transport Nerwork:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"></li>
+          <li><span>Input Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"></li>
+          <li><span>Output Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"></li>
+        </ul>
+      </nz-modal>
+    </div>
+
+    <div class="action">
+      <button nz-button nzType="primary" (click)="addsite_OK()">OK</button> 
+      <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
+    </div>  
+  </div>
+  <!-- 图 -->
+  <div class="chart fr">
+      Create Service
+      {{createParams.commonParams.templateType}}
+      <div id="createChart">
+        <svg width="100%" height="100%">
+          <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%" style="stroke:#3fa8eb;stroke-width:2"/>
+          <image xlink:href="./assets/images/cloud-site.png"
+                  x="25%" y="30%"  width="50%"/> 
+          <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
+          <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
+          <g *ngFor="let item of siteImage"
+            (mouseover)="showSite($event,item)"
+            (mousemove)="moveSite($event,item)"
+            (mouseout)="hideSite($event)">
+            <image  
+              xlink:href="./assets/images/site.png" 
+              [attr.x]="item.x" y="65%" width="80px"/> 
+            <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}</text>
+          </g>
+
+        </svg>
+        <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
+      </div>
+  </div>
+
+</div>
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts
new file mode 100644
index 00000000..922bd9ea
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnCreationComponent } from './ccvpn-creation.component';
+
+describe('CcvpnCreationComponent', () => {
+  let component: CcvpnCreationComponent;
+  let fixture: ComponentFixture<CcvpnCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CcvpnCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CcvpnCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
new file mode 100644
index 00000000..ffc354c7
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -0,0 +1,548 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+
+@Component({
+  selector: 'app-ccvpn-creation',
+  templateUrl: './ccvpn-creation.component.html',
+  styleUrls: ['./ccvpn-creation.component.css']
+})
+export class CcvpnCreationComponent implements OnInit {
+
+  constructor(private myhttp:MyhttpService) { }
+
+  ngOnInit() {
+    this.getSiteAddressList();
+    this.getTemParameters();
+  }
+
+  @Input() createParams;
+  @Input() namesTranslate;  //输入项参数名字转换
+  @Output() closeCreate = new EventEmitter();
+
+  templateParameters = {};
+  getTemParameters(){ //获取模板参数
+    let chosedtemplates = Object.values(this.createParams.templates);
+    // console.log(this.createParams);
+    console.log(chosedtemplates);  //模板id数组
+    let types = ["sotnvpn","site","sdwanvpn"];
+    chosedtemplates.forEach((item,index)=>{
+      this.myhttp.getTemplateParameters(types[index],item)
+        .subscribe((data)=>{
+          if(index === 0){
+            this.templateParameters["sotnvpn"] = data;
+            this.sotnNames = data.inputs.map((item)=>{return item.name}); //云的真实名字
+          }else if(index === 1){
+            this.templateParameters["site"] = data;
+            let wanportnames = {};
+            this.siteNames = data.inputs.map((item)=>{return item.name}); //site中所有真实名字,没有分组，放在一起了
+            this.siteNames.forEach((item)=>{
+              if(item.includes("_device_")){
+                this.siteCpeNames.push(item);
+              }else if(item.includes("_sitewanport_")){
+                let firstName = item.split("_")[0];
+                wanportnames[firstName]?wanportnames[firstName].push(item):wanportnames[firstName]=[item];
+              }else {
+                this.siteBaseNames.push(item);
+              }
+            })
+            this.siteWanNames = Object.values(wanportnames);
+            this.siteWanNames.forEach((item)=>{
+              this.siteWanData.push(this.siteWanParams);  //根据wanport组添加表格中
+            })
+            // console.log(this.sotnNames)
+            // console.log(this.siteNames)
+            // console.log(this.siteBaseNames)
+            // console.log(this.siteCpeNames)
+            // console.log(this.siteWanNames)
+            // console.log(this.siteWanData)
+          }else if(index === 2){
+            this.templateParameters["sdwan"] = data;
+            this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn真实名字
+            // console.log(this.siteGroupNames);
+          }
+         
+        },(err)=>{
+
+        })
+    })
+
+  }
+  // SOTN VPN Info 输入参数
+  sotnInfo = {
+    name:null,description:null,
+    startTime:null,endTime:null,
+    COS:"premium",reroute:false,
+    SLS:null,dualLink:false,
+    CIR:null,EIR:null,
+    CBS:null,EBS:null,
+    colorAware:false,couplingFlag:false
+  }
+  sotnNames = [] //真实名字
+
+  startTimeChange(event){
+    console.log(event)
+  }
+  endTimeChange(event){
+    console.log(event)
+  }
+
+
+  // Site List
+  siteTableData = [
+
+  ]
+  siteModeAddress = [];//site地址，筛选框数据,本地配置文件
+  siteNames = [];//site中所有真实名字，未分组，模拟真实请求情况；
+
+  siteBaseData = {  //模态框数据，输入参数，绑定数据
+    name:null,
+    description:null,
+    type:null,
+    role:null,
+    postcode:null,
+    address:null,
+    vlan:null,
+    sotnVpnName:null, //SOTN VPN Info中name
+    controlPoint:null, //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白
+    groupRole:null, //site group的role
+    groupName:null, //site group的name
+    emails:null,//  不显示传空
+    latitude:null,//
+    longitude:null,//
+    clientSignal:null//
+  };
+  siteBaseNames = [] //真实名字
+  // cpe 编辑
+  siteCpeData = {
+    device_name:null,
+    device_version:null,
+    device_esn:null,
+    device_class:null,
+    device_systemIp:null,
+    device_vendor:null,
+    device_type:null
+  };
+  siteCpeNames = [] //真实名字
+  // Wan Port 编辑
+  siteWanData = [];  //wan port 表格绑定数据
+  siteWanParams = {  //每一行数据详细参数，模态框
+    sitewanport_name:null,
+    sitewanport_deviceName:null,
+    sitewanport_description:null,
+    sitewanport_portType:null,
+    sitewanport_portNumber:null,
+    sitewanport_ipAddress:null,
+    sitewanport_providerIpAddress:null,
+    sitewanport_transportNetworkName:null,
+    sitewanport_inputBandwidth:null,
+    sitewanport_outputBandwidth:null
+  };
+  siteWanNames = [] //真实名字
+  wanPortModal = false;  //模态框显示隐藏
+  wanPortEditNum = 0;//编辑哪行
+  editWanPort(num){
+    this.wanPortModal = true;
+    this.wanPortEditNum = num;
+    this.siteWanParams = Object.assign({},this.siteWanData[num-1]);
+  }
+  wanPortModal_Ok(){
+    let inputsData = Object.assign({},this.siteWanParams); //新建对象，断开原引用，因为后面要清空模态框
+    inputsData.sitewanport_deviceName = this.siteCpeData.device_name;
+    this.siteWanData[this.wanPortEditNum-1] = inputsData; 
+    this.siteWanData = [...this.siteWanData]; //表格刷新
+    Object.keys(this.siteWanParams).forEach((item)=>{ //清空模态框
+      this.siteWanParams[item] = null;
+    })
+    this.wanPortModal = false;
+    console.log(this.siteWanData)
+  }
+  wanPortModal_Cancel(){
+    this.wanPortModal = false;
+  }
+
+
+  // 获取site地址，手动文件
+  getSiteAddressList(){
+    this.myhttp.getSiteAddress()
+      .subscribe((data)=>{
+        console.log(data);
+        this.siteModeAddress = data.map((item)=>{ return item.location});
+      },(err)=>{
+        console.log(err);
+      })
+  }
+  siteModelShow = false;
+  addSite(){
+    this.siteModelShow = true;
+    this.isEdit = 0;
+  }
+  // addsite模态框按钮
+  isEdit = 0; //编辑序号，No值，0表示增加
+  addsite_OK(){
+    this.siteBaseData.sotnVpnName = this.sotnInfo.name;
+    // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //新建对象，断开原引用，因为后面要清空模态框
+    let inputs = {};
+    inputs["baseData"] = Object.assign({},this.siteBaseData);
+    inputs["cpeData"] = Object.assign({},this.siteCpeData);
+    inputs["wanportData"] = this.siteWanData.map((item)=>{
+      return Object.assign({},item);
+    })
+    console.log(inputs);
+    if(this.isEdit){
+      // 编辑状态不增加
+      this.siteTableData[this.isEdit-1] = inputs; 
+      this.siteTableData = [...this.siteTableData]; //表格刷新
+      this.siteGroupTableData.forEach((item)=>{  //site修改名字后，更新组中sites值
+        if(item.sites.split(";").filter((d)=>{return d!=""}).includes(this.lastSiteName)){
+          item.sites = item.sites.replace(this.lastSiteName,this.siteBaseData.name);
+        }
+      })
+    }else{
+      // this.siteTableData.push(inputs);//使用 push 或者 splice 修改 nzData 失效 当加上[nzFrontPagination]="false" 时，生效
+      this.siteTableData = [...this.siteTableData,inputs];
+    }
+    
+    Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
+      this.siteBaseData[item] = null;
+    })
+    Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
+      this.siteCpeData[item] = null;
+    })
+    this.siteWanData.forEach((item)=>{
+      Object.keys(item).forEach((item2)=>{
+        item[item2] = null;
+      })
+    })
+    // console.log(this.siteTableData);
+    this.lastSiteName = null;
+    this.drawImage(this.siteTableData);
+    this.siteModelShow = false;
+  }
+  addsite_cancel(){
+    Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
+      this.siteBaseData[item] = null;
+    })
+    Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
+      this.siteCpeData[item] = null;
+    })
+    this.siteWanData.forEach((item)=>{
+      Object.keys(item).forEach((item2)=>{
+        item[item2] = null;
+      })
+    })
+    this.lastSiteName = null;
+    this.siteModelShow = false;
+  }
+  lastSiteName = null; //当site修改之后，若修改了名字，则需要更新group中sites的名字
+  editSite(num){ //编辑修改选中site信息
+    this.siteModelShow = true;
+    this.isEdit=num;
+    this.siteBaseData = Object.assign({},this.siteTableData[num-1].baseData);
+    this.siteCpeData = Object.assign({},this.siteTableData[num-1].cpeData);
+    this.siteWanData = this.siteTableData[num-1].wanportData.map((item)=>{return Object.assign({},item)});
+    this.lastSiteName = this.siteBaseData.name;
+  }
+  deleteSite(num){
+    let deleteSiteName = this.siteTableData[num-1].baseData.name;   //删除的site中name
+    let groupSites = [];
+    this.siteGroupTableData.forEach((item)=>{ groupSites.push(...item.sites.split(";").filter((d)=>{return d!=""})) });
+    if(groupSites.includes(deleteSiteName)){
+      alert("this site has in grouplist；can't delete！")
+      return false;
+    }
+    this.siteTableData = this.siteTableData.filter((d,i) => i !== num-1);
+    // this.siteTableData.splice(num-1,1); //模板中加上[nzFrontPagination]="false" 时，生效
+    this.drawImage(this.siteTableData);
+
+    // let groupIndex = this.siteGroupTableData.findIndex((item)=>{return item.sites.split(";").includes(deleteSiteName)});
+    // console.log(groupIndex)
+    // this.deleteGroupSite(groupIndex + 1); //删除时首行编号为1
+  }
+
+  // site节点图形描绘
+  lines=[];
+  siteImage=[];
+  drawImage(sitelist){
+    let cx = 200;
+    let cy = 200;
+    let r = 180;
+    let startAngle = -210 * (Math.PI/180);
+    let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
+
+    this.lines = sitelist.map((item,index)=>{
+      let x = cx + Math.cos(startAngle - step*index)*r;
+      let y = cy + Math.sin(startAngle - step*index)*r;
+      return {img:"line",site:item.baseData.name,x1:cx,y1:cy,x2:x,y2:y}
+    })
+    this.siteImage = this.lines.map((item)=>{
+      return {img:"site",name:item.site,x:item.x2 - 40,y:item.y2 - 40}
+    })
+  }
+
+  siteName=null;
+  siteNameStyle = {
+    'display':'none',
+    'left':'0',
+    'top':'0'
+  }
+  showSite($event,item){
+    this.siteName = item.name;
+    this.siteNameStyle.display = 'block';
+  }
+  moveSite($event,item){
+    this.siteNameStyle.left = $event.clientX  + "px";
+    this.siteNameStyle.top = $event.clientY - 35 + "px";
+  }
+  hideSite($event){
+    this.siteNameStyle.display = 'none'; 
+  }
+  // siteGroup List
+  siteGroupTableData = [
+
+  ]
+  siteGroupModelData = {
+    name:null,
+    topology:null,
+    sites:null,
+    role:null
+  }
+  siteGroupModelShow = false;
+  siteGroupModalTableData = [];// ==> siteTableData?
+  siteGroupNames=[];  //sdwanvpn真实名字
+
+  // 勾选框
+  allChecked = false;
+  indeterminate = false;
+  groupModal_checkAll(value){
+    this.siteGroupModalTableData.forEach(data => {
+      if (!data.disabled) {
+        data.checked = value;
+      }
+    });
+    this.refreshStatus();
+  }
+  refreshStatus(){
+    const allChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => item.checked === true);
+    const allUnChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => !item.checked);
+    this.allChecked = allChecked;
+    this.indeterminate = (!allChecked) && (!allUnChecked);
+  }
+
+  addSiteGroup(){
+    this.isGroupEdit = 0;
+    this.siteGroupModelShow = true;
+    let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选
+    // console.log(checkedSite);
+    this.siteTableData.forEach((item,index)=>{ 
+      if(checkedSite.includes(item.baseData.name)){ 
+        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
+      }else {
+        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
+      }    
+    })
+  }
+  // addsiteGroup模态框按钮
+  addsitegroup_OK(){  //将模态框中的值赋给表中对应项--->将选中的site中的groupRole、groupName、controlPoint更新--->
+                      //拷贝数据判断是增加或编辑，更新表中数据---> 清除模态框中数据,便于下次添加，关闭模态框
+    console.log(this.siteGroupModalTableData);
+    this.siteGroupModelData.sites="";  //置空组成员名字，写成""方便+=  ,若为null +=时会转成 "null"
+    this.siteGroupModelData.role="";  //
+    let site_controlPoint = this.siteGroupModalTableData.map((item)=>{ if(item.checked&&item.role=="hub"){ return item.siteName}}).filter((item)=>{return item!=undefined});  
+    // console.log(site_controlPoint);
+    this.siteGroupModalTableData.forEach((item,index)=>{  //模态框中site顺序和 表中site顺序一致
+      if(item.checked){
+        this.siteGroupModelData.sites += item.siteName+";";
+        this.siteGroupModelData.role += item.role+";";
+        this.siteTableData[index].baseData.groupRole = item.role; //site group的role
+        this.siteTableData[index].baseData.groupName = this.siteGroupModelData.name; //site group的name
+        if(item.role == "spoke"){
+          this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白
+        }
+      }
+    })
+
+    let inputsData = {};
+    Object.assign(inputsData,this.siteGroupModelData);
+    if(this.isGroupEdit){
+      // 编辑状态不增加
+      this.siteGroupTableData[this.isGroupEdit-1] = inputsData; 
+      this.siteGroupTableData = [...this.siteGroupTableData]; //表格刷新
+    }else{
+      // this.siteTableData.push(inputsData);//使用 push 或者 splice 修改 nzData 失效
+      this.siteGroupTableData = [...this.siteGroupTableData,inputsData];
+    }
+
+    Object.keys(this.siteGroupModelData).forEach((item)=>{   
+      this.siteGroupModelData[item] = null;
+    })
+    this.siteGroupModalTableData = [];
+    this.siteGroupModelShow = false;
+  }
+  addsitegroup_cancel(){
+    this.siteGroupModalTableData = [];
+    this.siteGroupModelShow = false;
+  }
+  isGroupEdit = 0; //编辑序号，No值，0表示增加
+  editGroupSite(num){ //将当前编辑的行数据填入模态框--->获取当前编辑项sites名--->判断更新模态框中site项状态
+    this.siteGroupModelShow = true;
+    this.isGroupEdit=num;
+    this.siteGroupModelData = Object.assign({},this.siteGroupTableData[num-1]);
+    console.log(this.siteGroupModelData)
+    let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //获取组中的site名
+    // console.log(editSites);
+    let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选
+    // console.log(checkedSite);
+    this.siteTableData.forEach((item,index)=>{ 
+      if(editSites.includes(item.baseData.name)){//先将编辑组中的site 中这三个值还原，否则减少某个site时 不会更新不选中的
+        item.baseData.groupRole = null; //site group的role
+        item.baseData.groupName = null; //site group的name
+        item.baseData.controlPoint = null;
+        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:item.baseData.groupRole,checked:true,disabled:false})
+      }else
+      if(checkedSite.includes(item.baseData.name)){ 
+        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
+      }else {
+        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
+      }    
+    })
+      
+  }
+  deleteGroupSite(num){
+    let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //删除的site中name
+    this.siteGroupTableData = this.siteGroupTableData.filter((d,i) => i !== num-1);
+    this.siteTableData.forEach((item,index)=>{
+      if(deleteSiteGroupsites.includes(item.baseData.name)){ 
+        item.baseData.groupRole = null; //site group的role
+        item.baseData.groupName = null; //site group的name
+        item.baseData.controlPoint = null; 
+      }
+    })
+  }
+
+
+
+  // 提交创建数据
+  submit(){   
+    let globalCustomerId = this.createParams.commonParams.customer.id;
+    let globalServiceType = this.createParams.commonParams.serviceType;
+    let sotnInputs = {}; 
+    // 由于请求模板不一样，所以外层需要循环请求回来的真实名字，内层循环本地参数，将当前值赋给真实名字
+    this.sotnNames.forEach((name)=>{
+      for(let key in this.sotnInfo){
+        let nameParts = this.namesTranslate.sotnNameTranslate[key].split("_");
+        if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
+          sotnInputs[name] = this.sotnInfo[key];
+          break;
+        }
+      }
+    })
+    console.log(sotnInputs);
+    let vpnbody = {
+        service:{
+          name:this.sotnInfo.name,
+          description:this.sotnInfo.description,
+          serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID,  //template.invariantUUID, //serviceDefId
+          serviceUuid:this.templateParameters["sotnvpn"].uuid,  //template.uuid, // uuid ?? templateId
+          globalSubscriberId:globalCustomerId,  //customer.id
+          serviceType:globalServiceType,  //serviceType.value
+          parameters:{
+            locationConstraints:[],
+            resources:[],
+            requestInputs:sotnInputs
+          }
+        }
+    }
+    
+    let sitebody = this.siteTableData.map((site)=>{
+      let siteInputs = {};
+      this.siteBaseNames.forEach((basename)=>{
+        for(let key in site.baseData){
+          let namePart = this.namesTranslate.siteNameTranslate.baseNames[key];
+          if(basename.endsWith(namePart)){
+            siteInputs[basename] = site.baseData[key];
+            break;
+          }
+        }
+      })
+      this.siteCpeNames.forEach((cpename)=>{
+        for(let key in site.cpeData){
+          let namePart = this.namesTranslate.siteNameTranslate.cpeNames[key];
+          if(cpename.endsWith(namePart)){
+            siteInputs[cpename] = site.cpeData[key];
+            break;
+          }
+        }
+      })
+      this.siteWanNames.forEach((item,index)=>{
+        item.forEach((wanportname)=>{
+          for(let key in site.wanportData[index]){
+            let namePart = this.namesTranslate.siteNameTranslate.wanportNames[key];
+            if(wanportname.endsWith(namePart)){
+              siteInputs[wanportname] = site.wanportData[index][key];
+              break;
+            }
+          }
+        })
+      })
+
+      return {
+        service:{
+          name:site.baseData.name,
+          description:site.baseData.description,
+          serviceInvariantUuid:this.templateParameters["site"].invariantUUID,
+          serviceUuid:this.templateParameters["site"].uuid,
+          globalSubscriberId:globalCustomerId,
+          serviceType:globalServiceType,
+          parameters:{
+            locationConstraints:[],
+            resources:[],
+            requestInputs:siteInputs
+          }
+        }
+      }
+    });
+    console.log(sitebody);
+
+    let groupbody = this.siteGroupTableData.map((item)=>{
+      let siteGroupInputs = {};
+      this.siteGroupNames.forEach((name)=>{
+        for(let key in item){
+          let nameParts = this.namesTranslate.siteGroupNameTranslate[key].split("_");
+          if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
+            siteGroupInputs[name] = item[key];
+            break;
+          }
+        }
+      })
+      return {
+        service:{
+          name:item.name,
+          description:item.topology,
+          serviceInvariantUuid:this.templateParameters["sdwan"].invariantUUID,
+          serviceUuid:this.templateParameters["sdwan"].uuid,
+          globalSubscriberId:globalCustomerId,
+          serviceType:globalServiceType,
+          parameters:{
+            locationConstraints:[],
+            resources:[],
+            requestInputs:siteGroupInputs
+          }
+        }
+      }
+    })
+    console.log(groupbody);
+
+    let createObj = {
+      vpnbody:vpnbody,
+      sitebody:sitebody,
+      groupbody:groupbody
+    }
+    
+    this.closeCreate.emit(createObj);
+
+  }
+
+  goback(){
+    this.closeCreate.emit(); 
+  }
+}
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
new file mode 100644
index 00000000..710bd104
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -0,0 +1,138 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px;
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 10px;
+}
+.model {
+    background-color: #fff;
+    height: 90%;
+    overflow-y: auto;
+}
+.model .back {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+}
+.model .detaildata {
+    position: relative;
+    width: 60%;
+    height: 100%;
+    overflow-y: auto;
+    border-radius: 5px;
+    padding: 15px;
+}
+.model .detaildata h3.title {
+    height: 20px;
+    font: 700 20px/20px "Arial";
+    color: #666;
+}
+.model .detaildata h3 {
+    height: 20px;
+    font: 700 16px/20px "Arial";
+    margin: 5px 0px;
+    color: #000;
+}
+/* SOTN VPN */
+.model .detaildata .sotnvpn ul li {
+    display: inline-block;
+    height: 35px;
+    width: 49.5%;
+}
+.model .detaildata .sotnvpn ul li span {
+    display: inline-block;
+    width: 110px;
+    font: 700 14px "Arial";
+    color: #3fa8eb;
+    vertical-align: middle;
+}
+/* site Detail */
+.model .detaildata .site .siteDetail {
+    position: fixed;
+    z-index: 10;
+    left: 260px;
+    top: 50px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px #000;
+    width: 50%;
+    max-height: 85%;
+    border-radius: 5px;
+    overflow-y: auto;
+}
+.model .detaildata .site h3 {
+    margin: 0;
+    height: 30px;
+    font: 700 16px/30px "Arial";
+    padding-left: 10px;
+    background-color: #ddd;
+}
+.model .detaildata .site h3 .closeDetail {
+    cursor: pointer;
+    padding: 2px 15px;
+    color: #3fa8eb;
+}
+.model .detaildata .site ul li {
+    padding-left: 5px;
+    display: inline-block;
+    height: 35px;
+    width: 32%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.model .detaildata .site ul li span {
+    display: inline-block;
+    width: 95px;
+    font: 700 14px "Arial";
+    color: #3fa8eb;
+    vertical-align: middle;
+}
+
+/* 图 */
+.model .chart {
+    width: 40%;
+    padding: 10px;
+    height: 100%;
+    border-left: 10px solid #f3f3f3;
+}
+.model .chart #detailChart {
+    position: relative;
+    width: 100%;
+    height: 80%;
+    margin-top: 20px;
+}
+.model .chart #detailChart .cloudcounty {
+    cursor: pointer;
+}
+
+.model .chart #detailChart .couldDetail {
+    position: absolute;
+    left: 50%;
+    top: 10px;
+    width: 80%;
+    transform: translate(-50%,0);
+    height: 160px;
+    background-color: #aaa;
+    border-radius: 5px;
+    box-shadow: 0px 0px 20px #000;
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
new file mode 100644
index 00000000..33d56eb9
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -0,0 +1,336 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+  <!-- 详情数据 -->
+  <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+  <div class="detaildata fl">
+      <h3 class="title">{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail</h3>
+      <div class="sotnvpn clearfix">
+        <h3>SOTN VPN Info</h3>
+        <ul>
+          <li><span>Name:</span> {{sotnVpnInfo.name}}</li>
+          <li><span>Description:</span> {{sotnVpnInfo.description}} </li>
+          <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li>
+          <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li>
+          <li><span>COS:</span> {{sotnVpnInfo.COS}}</li>
+          <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li>
+          <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li>
+          <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li>
+          <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li>
+          <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li>
+          <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li>
+          <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li>
+          <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li>
+          <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li>
+        </ul>
+      </div>
+
+      <div class="site">
+        <h3>Site List</h3>
+        <nz-table #nzTable [nzData]="siteList"
+          [nzShowPagination]="false"
+          nzSize="small">
+          <thead>
+            <tr>
+              <th nzWidth="10%"> NO. </th>
+              <th nzWidth="15%"> Name </th>
+              <th nzWidth="20%"> Description </th>
+              <th nzWidth="15%"> Post Code </th>
+              <th nzWidth="15%"> Address </th>
+              <th nzWidth="15%"> VLAN </th>
+              <th nzWidth="10%"> Action </th>
+            </tr>
+          </thead>
+          <tbody>
+              <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+              <tr *ngFor="let item of nzTable.data; let i = index; ">
+                  <td>{{i+1}}</td>
+                  <td>{{item.baseNames.name}}</td>
+                  <td>{{item.baseNames.description}}</td>
+                  <td>{{item.baseNames.postcode}}</td>
+                  <td>{{item.baseNames.address}}</td>
+                  <td>{{item.baseNames.vlan}}</td>
+                  <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td>
+              </tr>
+              <!-- </ng-template> -->
+          </tbody>
+        </nz-table>
+        <div class="siteDetail" *ngIf="siteDetail">
+          <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3>
+          <ul>
+            <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li>
+            <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li>
+            <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li>
+            <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li>
+            <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li>
+            <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li>
+            <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li>
+            <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li>
+            <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li>
+            <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li>
+            <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li>
+            <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li>
+            <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li>
+            <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li>
+            <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li>
+          </ul>
+          <div *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
+            <h3>CPE</h3>
+            <ul>
+              <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li>
+              <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li>
+              <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li>
+              <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li>
+              <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li>
+              <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li>
+              <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li>
+            </ul>
+            <h3>WAN Port</h3>
+            <nz-table #nzTable [nzData]="siteDetailData.wanportNames"
+              [nzShowPagination]="false"
+              nzSize="small">
+              <thead>
+                <tr>
+                  <th nzWidth="10%"> NO. </th>
+                  <th nzWidth="15%"> Name </th>
+                  <th nzWidth="20%"> Description </th>
+                  <th nzWidth="15%"> PortType </th>
+                  <th nzWidth="15%"> PortNumber </th>
+                  <th nzWidth="15%"> IPAddress </th>
+                  <th nzWidth="10%"> Action </th>
+                </tr>
+              </thead>
+              <tbody>
+                  <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                  <tr *ngFor="let item of nzTable.data; let i = index; ">
+                      <td>{{i+1}}</td>
+                      <td>{{item.sitewanport_name}}</td>
+                      <td>{{item.sitewanport_description}}</td>
+                      <td>{{item.sitewanport_portType}}</td>
+                      <td>{{item.sitewanport_portNumber}}</td>
+                      <td>{{item.sitewanport_ipAddress}}</td>
+                      <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td>
+                  </tr>
+                  <!-- </ng-template> -->
+              </tbody>
+            </nz-table>
+            <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
+              <ng-template #modalTitle>
+                WAN Port Detail
+              </ng-template>
+
+              <ng-template #modalContent>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p>
+                <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p>
+              </ng-template>
+
+              <ng-template #modalFooter>
+                <!-- <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button> -->
+              </ng-template>
+            </nz-modal>
+          </div>
+
+        </div>
+      </div>
+
+      <div class="sitegroup" *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
+        <h3>Site_Group List</h3>
+        <nz-table #nzTable [nzData]="siteGroupList"
+          [nzLoading]="loading"
+          [nzShowPagination]="false"
+          nzSize="small">
+          <thead>
+            <tr>
+              <th nzWidth="10%"> NO. </th>
+              <th nzWidth="20%"> Group Name </th>
+              <th nzWidth="20%"> Topology </th>
+            </tr>
+          </thead>
+          <tbody>
+              <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+              <tr *ngFor="let item of nzTable.data; let i = index; ">
+                  <td>{{i+1}}</td>
+                  <td>{{item.name}}</td>
+                  <td>{{item.topology}}</td>
+              </tr>
+              <!-- </ng-template> -->
+          </tbody>
+        </nz-table>
+      </div>
+  </div>
+  <!-- 图 -->
+  <div class="chart fr">
+
+      <div id="detailChart">
+        <!-- <svg width="100%" height="100%">
+          <line *ngFor="let item of lines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#3fa8eb;stroke-width:2"/>
+          <image xlink:href="./assets/images/cloud-county.png"
+                 class="cloudcounty"
+                 (click)="toggleClick()"
+                 (mouseover)="hoverShowcould()"
+                 (mouseout)="hoverHidecould()"
+                 x="175" y="175" height="50px" width="50px"/>
+          <image *ngFor="let item of siteImage"
+                  xlink:href="./assets/images/cloud-city.png"
+                  [attr.x]="item.x" [attr.y]="item.y" height="50px" width="50px"/>
+        </svg>
+        <div class="couldDetail" *ngIf="hoverShow || clickShow">
+
+        </div> -->
+        <svg width="100%" height="100%" style="position: relative">
+          <!--背景大图-->
+          <image xlink:href="./assets/images/bigcloud.png"
+                 class="backgroundcloud"
+                 width="100%"
+                 style="position: absolute;z-index:-1">
+          </image>
+          <!--tp,site，domain之间的连线-->
+          <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#FFC000; stroke-width:2"></line>
+          <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line>
+          <!--本地domain-->
+          <g class="clouds">
+            <image xlink:href="./assets/images/domain.png"
+                   id="domain1"
+              width="20%"
+                   x="10%" y="10%"
+            ></image>
+            <text dx="12%" dy="16%" style="font-size: 14px; fill:#666;width: 20px;">
+             {{vpns[0].domain}}
+            </text>
+          </g>
+          <g *ngIf="vpns[1]" class="clouds">
+            <image xlink:href="./assets/images/domain.png"
+                   id="domain2"
+              width="20%"
+                   x="40%" y="13%"
+            ></image>
+            <text dx="43%" dy="19%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{vpns[1].domain}}
+            </text>
+          </g>
+          <!--domain1下连接的tp-->
+          <g class="clouds">
+            <image xlink:href="./assets/images/tp.png"
+                   class="tp"
+                   id="tp1"
+                   height="16" width="20"
+                   x="15%" y="25%"
+            ></image>
+            <text dx="18%" dy="27%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{vpns[0].sitetpname}}
+            </text>
+          </g>
+          <g class="clouds">
+            <image xlink:href="./assets/images/tp.png"
+                   class="tp"
+                   id="tp2"
+                   height="16" width="20"
+                   x="30%" y="10%"
+            ></image>
+            <text dx="30%" dy="6%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{vpns[0].othertpname}}
+            </text>
+          </g>
+          <!--domain2下连接的tp-->
+          <g *ngIf="vpns[1]" class="clouds">
+            <image xlink:href="./assets/images/tp.png"
+                   class="tp"
+                   id="tp3"
+                   height="16" width="20"
+                   x="40%" y="10%"
+            ></image>
+            <text dx="40%" dy="9%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{vpns[1].othertpname}}
+            </text>
+          </g>
+          <g *ngIf="vpns[1]" class="clouds">
+            <image xlink:href="./assets/images/tp.png"
+                   class="tp"
+                   id="tp4"
+                   height="16" width="20"
+                   x="43%" y="28%"
+            ></image>
+            <text dx="46%" dy="30%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{vpns[1].sitetpname}}
+            </text>
+          </g>
+          <!--外部云-->
+          <g class="clouds">
+            <image xlink:href="./assets/images/out-domain.png"
+                   id="extent-cloud"
+                   height="70.8" width="120"
+                   x="66%" y="12%"
+            ></image>
+            <text dx="68%" dy="18%" style="font-size: 14px; fill: #666;width: 20px;">
+              SP Partent Network
+            </text>
+          </g>
+          <!--本地的2个site-->
+          <g class="clouds">
+            <image xlink:href="./assets/images/site.png"
+                   id="site1"
+                   height="59" width="100"
+                   x="0%" y="48%"
+            ></image>
+            <text dx="2%" dy="53%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{localSite[0]["service-instance-name"]}}
+            </text>
+          </g>
+          <g *ngIf="!detailSites" class="clouds">
+            <image xlink:href="./assets/images/site.png"
+                   id="site2"
+                   height="59" width="100"
+                   x="25%" y="48%"
+            ></image>
+            <text dx="26%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{localSite[1]["service-instance-name"]}}
+            </text>
+          </g>
+          <!--外部的2个site-->
+          <g *ngIf="!detailSites" class="clouds">
+            <image xlink:href="./assets/images/site.png"
+                   id="site3"
+                   height="59" width="100"
+                   x="50%" y="48%"
+            ></image>
+            <text dx="52%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{outerSite[1]["service-instance-name"]}}
+            </text>
+          </g>
+          <g class="clouds">
+            <image xlink:href="./assets/images/site.png"
+                   id="site4"
+                   height="59" width="100"
+                   x="75%" y="48%"
+            ></image>
+            <text dx="80%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
+              {{outerSite[0]["service-instance-name"]}}
+            </text>
+          </g>
+        </svg>
+      </div>
+  </div>
+
+</div>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
new file mode 100644
index 00000000..dc5d34d9
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnDetailComponent } from './ccvpn-detail.component';
+
+describe('CcvpnDetailComponent', () => {
+  let component: CcvpnDetailComponent;
+  let fixture: ComponentFixture<CcvpnDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CcvpnDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CcvpnDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
new file mode 100644
index 00000000..c9d60ef8
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -0,0 +1,368 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-ccvpn-detail',
+  templateUrl: './ccvpn-detail.component.html',
+  styleUrls: ['./ccvpn-detail.component.css']
+})
+export class CcvpnDetailComponent implements OnInit {
+
+  constructor(private myhttp:MyhttpService) { }
+
+  ngOnInit() {
+    // this.getDetails();
+    this.dataInit();
+    this.drawImages();
+  }
+
+  @Input() detailParams;
+  @Input() namesTranslate;
+  @Output() closeDetail = new EventEmitter();
+
+  sotnVpnInfo:any;
+  siteList=[];
+  siteGroupList=[];
+  dataInit(){
+    // 循环真实参数，对比名字转换配置文件，将真实参数名字改成通用名字
+    this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs;
+    for(let key in this.sotnVpnInfo){
+      for(let key2 in this.namesTranslate.sotnNameTranslate){
+        let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
+        if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+          this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
+          break;
+        }
+      }        
+    }
+
+    this.siteList = this.detailParams.siteSer.map((item)=>{
+      return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
+    })
+    this.siteList.forEach((oneSite,idex)=>{
+      oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
+      for(let key in oneSite){
+        let hasfind = false;
+        if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
+        for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
+          if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
+            oneSite["baseNames"][key2] = oneSite[key];
+            hasfind = true;
+            break;
+          }
+        }
+        if(hasfind){ continue };
+        for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
+          if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
+            oneSite["cpeNames"][key3] = oneSite[key];
+            hasfind = true;
+            break;
+          }
+        }
+        if(hasfind){ continue };
+        let wanportStartName = key.split("_")[0];
+        // 先分组，后面再变换名字
+        let theItem =  oneSite["wanportNames"].find((item,index)=>{
+          if(item){
+            return Object.keys(item)[0].startsWith(wanportStartName)
+          }   
+        })
+        theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
+      }
+      let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
+      oneSite["wanportNames"].forEach((item)=>{
+        for(let key in item){
+          let newName = wanportTs.find((name)=>{
+            return key.endsWith(name);
+          })
+          newName?item[newName]=item[key]:null;
+        }
+      })
+
+    })
+    
+    this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
+      return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
+    })
+    this.siteGroupList.forEach((oneSiteGroup)=>{
+      for(let key in oneSiteGroup){
+        for(let key2 in this.namesTranslate.siteGroupNameTranslate){
+          let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
+          if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+            oneSiteGroup[key2] = oneSiteGroup[key];
+            break;
+          }
+        }
+      }
+    })
+    console.log(this.siteList)
+    this.drawImage(this.siteList);
+  }
+
+  // site详情
+  siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
+  siteDetail = false;
+  showSiteDetail(item){
+    this.siteDetail = true;
+    this.siteDetailData = item;
+  }
+
+  wanPortModal = false;
+  wanPortDetail = {};
+  showWanportDetail(item){
+    this.wanPortModal = true;
+    this.wanPortDetail = item;
+  }
+  handleCancel(){
+    this.wanPortModal = false;
+  }
+
+  // sitegroup详情
+
+  // site节点图形描绘
+  // site分类，根据site查tp pnf --> allotted-resource
+  localSite = [];//本地site
+  outerSite = [];//外部site
+  
+  getSiteAResource(){
+    return new Promise((res,rej)=>{
+      this.detailParams.siteSer.forEach((site)=>{
+        site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
+      })
+    
+      if(this.localSite[0]["service-instance-name"].startsWith("Dc")){
+        this.localSite.reverse();
+      }
+
+      if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+        this.outerSite.reverse();
+      }
+
+      // 本地site获取tp pnf
+      this.localSite.forEach((site)=>{
+        let obj = {
+          customerId: this.detailParams.customer.id,
+          serviceType: this.detailParams.serviceType,
+          serviceId: site["service-instance-id"]
+        }
+        this.myhttp.getAllottedResource(obj)
+          .subscribe((data)=>{
+            // console.log(data);
+            let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
+            // console.log(resource);
+            let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
+            // console.log(tps_pnfs);
+            // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"];
+            site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
+            // // 通过pnfname获取domain（network-resource）;
+            // this.myhttp.getPnfDetail(site.pnfname)
+            //   .subscribe((data2)=>{
+            //     // console.log(data2);
+            //     let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+            //     site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+            //     res("sites-domain");
+            //   })
+            res("sites-domain");
+          })
+      })
+    })   
+  }
+  //通过sotn 查vpn-id --> tp pnf --> allotted-resource
+  relation = {sotn:{
+    name:"sotn1",
+    vpns:[
+      {
+        name:"vpn1",
+        domain:"domain1",
+        site:"site1",
+        tps:[
+          {name:"tp1",lineto:"site1"},
+          {name:"tp2",lineto:"domain1"}
+        ]
+      },
+      {
+        name:"vpn2",
+        domain:"domain2",
+        site:"site2",
+        tps:[
+          {name:"tp3",lineto:"site2"},
+          {name:"tp4",lineto:"domain2"}
+        ]
+      }
+    ]
+  }};
+
+  vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}];
+  getSotnAresource(){
+    return new Promise((res,rej)=>{
+      let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"]
+                            .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
+                            .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
+      this.myhttp.getSotnConnectivity(connectivityId)
+        .subscribe((data)=>{
+          // console.log(data);  //默认一个connectivityId只能查到一个connectivity
+          let vpns = data.connectivity[0]["relationship-list"]["relationship"]
+                      .filter((item)=>{ return item["related-to"]=="vpn-binding"})
+                      .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});         
+          console.log(vpns);
+          this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}});
+          this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{
+            this.myhttp.getVpnBinding(vpn.name)
+              .subscribe((data2)=>{
+                // console.log(data2); //默认一个vpnid只能查到一个vpnbinding
+                let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
+                                .filter((item)=>{ return item["related-to"]=="p-interface"})
+                                .map((item2)=>{return item2["relationship-data"]});
+                let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
+                let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
+                // console.log(pnfname)
+                // console.log(tpnames)
+                vpn.tps = tpnames;
+                // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项，即同domain
+                // console.log(thissite);
+                // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename});
+                // 通过pnfname获取domain（network-resource）;
+                this.myhttp.getPnfDetail(pnfname[0])
+                  .subscribe((data2)=>{
+                    // console.log(data2);
+                    let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+                    vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+                    if(this.localSite[index]){
+                      vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename;
+                      console.log(tpnames)
+                      console.log(vpn.sitetpname)
+                      vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+                    }else{
+                      vpn.sitetpname = this.localSite[0].tpsitename;
+                      vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+                    }
+
+                    this.vpns = this.detailParams.sotnvpnSer.vpns;
+                    res("sotn-domain");
+                    // console.log(vpn);
+                  })
+               
+              })
+          })
+        })
+    })
+  }
+  
+  drawImages(){
+
+    this.getSiteAResource().then((data)=>{
+      console.log(data);
+      return this.getSotnAresource()
+    }).then((data)=>{
+      console.log(data);
+      console.log(this.localSite);
+      this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true;
+      this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3;
+      // 当只有一个vpn的时候
+      if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){
+        let line =  {
+            "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2   当本地云只有一朵的时候，tp2与本地site2相连 
+          }
+        this.detailLines.length = this.detailLines.length-6;
+        this.detailLines.push(line);
+        // 当本地site有两个的时候
+        if(this.localSite.length==2){
+          let line = {
+            "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+          }
+          this.detailLines.push(line);
+        }
+        // 当外部site有两个的时候
+        if(this.outerSite.length==2){
+          let line = {
+            "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
+          }
+          this.detailLines.push(line);
+        }
+      }
+    })
+    // let allnodes = [this.getSiteAResource(),this.getSotnAresource()];
+    // Promise.all(allnodes).then((data)=>{
+    //   console.log(data)
+    //   console.log(this.localSite);
+
+
+    // })
+  }
+
+  detailSites=false;
+  detailLines=[ //详情拓扑图连线的坐标
+    {
+      "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1
+    },
+    {
+      "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1
+    }
+    ,
+    {
+      "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2
+    },
+
+    {
+      "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4
+    },
+
+    {
+      "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2
+    },
+    {
+      "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3
+    },
+    {
+      "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3
+    },
+
+    {
+      "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4
+    },
+    {
+      "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
+    },
+    {
+      "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+    }
+  ];
+  lines=[];
+  siteImage=[];
+  drawImage(sitelist){
+    let cx = 200;
+    let cy = 200;
+    let r = 150;
+    let startAngle = -210 * (Math.PI/180);
+    let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
+
+    this.lines = sitelist.map((item,index)=>{
+      let x = cx + Math.cos(startAngle - step*index)*r;
+      let y = cy + Math.sin(startAngle - step*index)*r;
+      return {img:"line",x1:cx,y1:cy,x2:x,y2:y}
+    })
+    this.siteImage = this.lines.map((item)=>{
+      return {img:"site",x:item.x2 - 25,y:item.y2 - 25}
+    })
+    console.log(this.siteImage,this.lines)
+  }
+  clickShow = false;
+  hoverShow = false;
+  toggleClick(){
+    this.clickShow = !this.clickShow;
+  }
+  hoverShowcould(){
+    this.hoverShow = true;
+  }
+  hoverHidecould(){
+    this.hoverShow = false;
+  }
+
+
+
+  goback(){
+    this.closeDetail.emit();
+  }
+
+}
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
new file mode 100644
index 00000000..2ac88d32
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
@@ -0,0 +1,97 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.outer{
+  width: 20%;
+  float: left;
+}
+.content{
+  width: 100px;
+  margin: 30px 0;
+}
+
+.tips{
+  margin: 20px auto;
+  padding:0 5px;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  border: 1px gainsboro solid;
+  border-radius: 10px;
+}
+.submit,.delete,.add{
+  padding:10px 20px;
+  width: 100px;
+  margin: 0 auto;
+  background: dodgerblue;
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+/*.line-click{*/
+  /*cursor: pointer !important;*/
+/*}*/
+
+
+#tpContainer{
+  width:100%;
+  /*height: 80%;*/
+  float: left;
+}
+.model {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.model .creation {
+  /*margin-top:-4%;*/
+  background-color: #fff;
+  /*float: left;*/
+  width: 20%;
+  position: absolute;
+  right: 1%;
+  border-radius: 5px;
+  box-shadow: 0 0 10px #9e9e9e;
+  padding: 10px;
+  height: 80vh;
+  overflow: auto;
+}
+.model .creation .v_color{
+  height: 17px;
+  float: left;
+  margin-left: -11px;
+  margin-top: 5px;
+  border-left: 4px #3fa8eb solid;
+}
+.w_font4{
+  font-weight: 400;
+}
+.title-span{
+  margin-left: 10%;
+  font-size: 12px;
+}
+.red-span{
+  color: red;
+  margin-right: 3px;
+}
+.choose li nz-select,.choose li input{
+  display: block !important;
+  margin: 5px 10% 15px;
+  width: 80%;
+}
+
+
+
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
new file mode 100644
index 00000000..4fbe4875
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
@@ -0,0 +1,135 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="model">
+  <!--图表-->
+  <div class="tips">
+    请根据以下操作，来配置您的网络
+  </div>
+  <button nz-button nzType="primary" style="margin-top: 2px;display: block" (click)="showForm()">Add Link</button>
+  <div id="tpContainer" style="overflow: hidden;"></div>
+  <!--弹出框-->
+  <div class="creation" id="d3_form" *ngIf="isVisible==true">
+    <span class="v_color"></span>
+    <h3 class="w_font4">Set Attribtes</h3>
+    <ul class="choose">
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Link Name </span>
+        <input nz-input [(ngModel)]="linkName" maxlength="20">
+      </li>
+    </ul>
+    <h4>Left Port</h4>
+    <ul class="choose">
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Network </span>
+        <nz-select [(ngModel)]="networkVal1" nzShowSearch nzAllowClear (ngModelChange)="network1Change($event)">
+          <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"></nz-option>
+        </nz-select>
+      </li>
+      <li>
+       <span class="title-span"> <span class="red-span">*</span>Node </span>
+        <nz-select  [(ngModel)]="selectedNode1" nzShowSearch nzAllowClear (ngModelChange)="node1Change($event)">
+          <nz-option *ngFor="let node of nodeOption1[networkVal1]" [nzValue]="node" [nzLabel]="node"></nz-option>
+        </nz-select>
+      </li>
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Terminal Point </span>
+        <!-- <input  nz-input id="city-one" value=""> -->
+        <nz-select [(ngModel)]="selecteTpName1" nzShowSearch nzAllowClear>
+          <nz-option *ngFor="let tp of tpOption1" [nzValue]="tp" [nzLabel]="tp"></nz-option>
+        </nz-select>
+      </li>
+    </ul>
+    <h4>Right Port</h4>
+    <label nz-checkbox [(ngModel)]="inputshow">Partner Network</label>
+    <ul class="choose">
+      <li>
+        <span class="title-span"><span *ngIf="inputshow" class="red-span">*</span>Host Url</span>
+        <input nz-input [(ngModel)]="cloudUrl" [disabled]='!inputshow' [attr.disabled] ='!inputshow?true:undefined'>
+      </li>
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Network </span>
+        <input  nz-input *ngIf="inputshow" [(ngModel)]="cloudNetwork">
+        <nz-select *ngIf="!inputshow" [(ngModel)]="networkVal2" nzShowSearch nzAllowClear (ngModelChange)="network2Change($event)">
+          <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"> </nz-option>
+        </nz-select>
+      </li>
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Node </span>
+        <input  nz-input *ngIf="inputshow" [(ngModel)]="cloudNode">
+        <nz-select *ngIf="!inputshow" [(ngModel)]="selectedNode2" nzShowSearch nzAllowClear (ngModelChange)="node2Change($event)">
+          <nz-option *ngFor="let node of nodeOption1[networkVal2]" [nzValue]="node" [nzLabel]="node"></nz-option>
+        </nz-select>
+      </li>
+      <li>
+        <span class="title-span"><span class="red-span">*</span>Terminal Point </span>
+        <input  nz-input *ngIf="inputshow" [(ngModel)]="cloudTp">
+        <nz-select *ngIf="!inputshow" [(ngModel)]="selecteTpName2" nzShowSearch nzAllowClear>
+          <nz-option *ngFor="let tp of tpOption2" [nzValue]="tp" [nzLabel]="tp"></nz-option>
+        </nz-select>
+      </li>
+    </ul>
+    <button nz-button nzType="primary" nzSize="small" style="width: 60px;" (click)="submitForm()">OK</button>
+    <button nz-button nzType="default" nzSize="small" style="width: 60px;" (click)="hideForm()">Cancel</button>
+  </div>
+  <div class="creation" id="delbox" *ngIf="delBoxisVisible==true">
+    <span class="v_color"></span>
+    <h3 class="w_font4">Set Attribtes</h3>
+    <ul class="choose">
+      <li>
+        <span class="title-span">Link Name </span>
+        <input nz-input [(ngModel)]="delLinkname" disabled="disabled">
+      </li>
+    </ul>
+    <h4>Left Port</h4>
+    <ul class="choose">
+      <li>
+        <span class="title-span">Network </span>
+        <input nz-input [(ngModel)]="delNetwork1" disabled="disabled">
+      </li>
+      <li>
+        <span class="title-span">Node </span>
+        <input nz-input [(ngModel)]="delNode1" disabled="disabled">
+      </li>
+      <li>
+        <span class="title-span">Terminal Point </span>
+        <input nz-input [(ngModel)]="delTp1" disabled="disabled">
+      </li>
+    </ul>
+    <h4>Right Port</h4>
+    <ul class="choose">
+      <li *ngIf="delcloud">
+        <span class="title-span">Host Url</span>
+        <input nz-input [(ngModel)]="delcloudUrl" disabled="disabled">
+      </li>
+      <li>
+        <span class="title-span">Network </span>
+        <input nz-input [(ngModel)]="delNetwork2" disabled="disabled">
+      </li>
+      <li>
+      <span class="title-span">Node </span>
+      <input nz-input [(ngModel)]="delNode2" disabled="disabled">
+      </li>
+      <li>
+        <span class="title-span">Terminal Point </span>
+        <input nz-input [(ngModel)]="delTp2" disabled="disabled">
+      </li>
+    </ul>
+    <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delLink()" *ngIf="!delcloud">delete Link</button>
+    <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delCloudLink()" *ngIf="delcloud">delete Link</button>
+    <button nz-button nzType="default" nzSize="small" class="del-button" style="width: 60px;" (click)="hideForm()">Cancel</button>
+  </div>
+</div>
+
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts
new file mode 100644
index 00000000..03cc5065
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CcvpnNetworkComponent } from './ccvpn-network.component';
+
+describe('CcvpnNetworkComponent', () => {
+  let component: CcvpnNetworkComponent;
+  let fixture: ComponentFixture<CcvpnNetworkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CcvpnNetworkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CcvpnNetworkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
new file mode 100644
index 00000000..0174aa77
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -0,0 +1,1195 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import * as d3 from 'd3';
+import * as $ from 'jquery';
+import {networkHttpservice} from '../networkHttpservice.service';
+
+@Component({
+  selector: 'app-ccvpn-network',
+  templateUrl: './ccvpn-network.component.html',
+  styleUrls: ['./ccvpn-network.component.css']
+})
+export class CcvpnNetworkComponent implements OnInit {
+
+  constructor(private myhttp: networkHttpservice) {
+  }
+
+  ngOnInit() {
+    var thisNg = this;
+    thisNg.getD3Data();
+
+
+    //本地云TP端口断开连线 ，直接点击线可删除连线
+    $('#tpContainer').on('click', '.line-local', function () {
+      thisNg.isVisible = false;
+      thisNg.delBoxisVisible = true;
+      thisNg.delcloud = false;
+
+      thisNg.delTp1 = $(this).attr('data-tp1');
+      thisNg.delTp2 = $(this).attr('data-tp2');
+      thisNg.delNode1 = $(this).attr('data-node1');
+      thisNg.delNode2 = $(this).attr('data-node2');
+      thisNg.delVersion = $(this).attr('data-version');
+      thisNg.delLinkname = $(this).attr('data-link');
+
+      thisNg.delLinkIndex = $(this);
+      let dataD3 = thisNg.d3Data;
+      for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+        if (dataD3[p]['name'] == thisNg.delTp1) {
+          thisNg.network.push(dataD3[p]['source']['name']);
+        }
+        if (dataD3[p]['name'] == thisNg.delTp2) {
+          thisNg.network.push(dataD3[p]['source']['name']);
+        }
+      }
+      thisNg.delNetwork1 = thisNg.network[0];
+      thisNg.delNetwork2 = thisNg.network[1];
+    });
+
+    //外部云 断开连线 ，直接点击线可删除连线
+    $('#tpContainer').on('click', '.cloudline', function () {
+      thisNg.isVisible = false;
+      thisNg.delBoxisVisible = true;
+      thisNg.delcloud = true;
+
+      thisNg.delTp1 = $(this).attr('data-tp1');
+      thisNg.delTp2 = $(this).attr('data-tp2');
+      thisNg.delNode1 = $(this).attr('data-node1');
+      thisNg.delNode2 = $(this).attr('data-node2');
+      thisNg.delVersion = $(this).attr('data-version');
+      thisNg.delNetwork1 = $(this).attr('data-network');
+      thisNg.delNetwork2 =$(this).attr('data-cloudnetwork');
+      thisNg.delcloudUrl =$(this).attr('data-url');
+      thisNg.delLinkname = $(this).attr('data-link');
+      thisNg.aaiId =$(this).attr('data-aaiid');
+      thisNg.getCloudUrl(thisNg.aaiId,thisNg);
+    });
+  }
+
+  addLinkDisabled = true;
+  isVisible = false;
+  outCloudShow = false;
+  inputshow = false;
+  delBoxisVisible = false;
+
+  d3Data = [];//D3渲染需要的数据
+  logicalLinks = [];//logicalLinks接口返回的已有的连线数据
+  linkName=null;//连线的名字link-name
+  networkOption = [];//表单network下拉选框填充的数据
+  nodeOption1 = {};//node下拉选框填充的数据
+  tpOption1 = [];//node下拉选框填充的数据
+  tpOption2 = [];//node下拉选框填充的数据
+  networkVal1 = null;//network1下拉框默认数据
+  networkVal2 = null;//network2下拉框默认数据
+  selectedNode1 = null;//node1下拉框默认数据
+  selectedNode2 = null;//node2下拉框默认数据
+  selecteTpName1 = null;//TP1下拉框默认数据
+  selecteTpName2 = null;//TP2下拉框默认数据
+  cloudUrl = null;//外部云URL地址
+  cloudNetwork = null;//外部云network名称
+  cloudNode = null;//外部云Node名称
+  cloudTp = null;//外部云Tp名称
+  dataCloud=[];//外部云的信息
+  dataCloudLink=[];
+  aaiId="";
+  charge=-200;
+
+  //删除连线时 右侧框显示的数据
+  delLinkname=null;
+  delNetwork1 = null;
+  delNode1 = null;
+  delTp1 = null;
+  delcloudUrl = null;
+  delNetwork2 = null;
+  delNode2 = null;
+  delTp2 = null;
+  delVersion = null;
+  delLinkIndex = null;
+  network = [];
+  delcloud = false;
+
+  winWidth = $('.content').width();
+  winHeight = $('.content').height();
+
+
+  imgmap = {
+    '1': '../assets/images/cloud-county1.png',
+    '2': '../assets/images/cloud-city1.png',
+    '3': '../assets/images/cloud-out.png',
+  };
+  tpoption = {
+    container: '#tpContainer',
+    data: '',
+    width: 1000,
+    height: this.winHeight
+  };
+
+  showForm(): void {
+    if (this.addLinkDisabled == false) {
+      this.isVisible = true;
+      this.delBoxisVisible = false;
+    }
+  }
+
+  hideForm(): void {
+    this.isVisible = false;
+    this.delBoxisVisible = false;
+    this.linkName=null;
+    this.networkVal1 = null;//初始化network1下拉框默认数据
+    this.networkVal2 = null;//初始化network2下拉框默认数据
+    this.selectedNode1 = null;//初始化node1下拉框默认数据
+    this.selectedNode2 = null;//初始化node2下拉框默认数据
+    this.selecteTpName1 = null;//初始化TP1下拉框默认数据
+    this.selecteTpName2 = null;//初始化TP2下拉框默认数据
+    // this.localUrl=null;//本地云URL地址
+    this.cloudUrl = null;//外部云URL地址
+    this.cloudNetwork = null;//外部云network名称
+    this.cloudNode = null;//外部云Node名称
+    this.cloudTp = null;//外部云Tp名称
+  }
+
+
+  tpName=null;
+  tpNameStyle = {
+    'display':'none',
+    'left':'0',
+    'top':'0'
+  };
+  showtp($event,item){
+    console.log(111111111)
+    this.tpName = item;
+    this.tpNameStyle.display = 'block';
+  }
+  movetp($event,item){
+    this.tpNameStyle.left = $event.clientX  + "px";
+    this.tpNameStyle.top = $event.clientY - 35 + "px";
+  }
+  hidetp($event){
+    this.tpNameStyle.display = 'none';
+  }
+
+  //获取云图数据
+  getD3Data() {
+    this.myhttp.getNetworkD3Data()
+      .subscribe((data) => {
+        if(data.length==0){
+          this.addLinkDisabled = false;
+          return;
+        };
+        for(let ii=0;ii<data.length;ii++){
+          if(data[ii]["aaiId"]!=""){
+            this.dataCloud=data.splice(ii,1)
+          }
+        }
+        for (var i = 0; i < data.length; i++) {
+          let name1 = {}, name2 = {};
+          let nodess = [];
+          name1['name'] = name2['network'] = data[i]['networkId'];
+          name1['type'] = '1';
+          name1['source'] = i;
+          this.d3Data.push(name1);
+          for (let c = 0; c < data[i]["pnfs"].length; c++) {
+            nodess.push(data[i]['pnfs'][c]['pnfName']);
+            this.nodeOption1[name2['network']] = nodess;
+          }
+          this.networkOption.push(name2);
+        }
+        console.log(this.networkOption)
+        for (var i = 0; i < data.length; i++) {
+          let tp_length = data[i]['tps'].length;
+          for (var h = 0; h < tp_length; h++) {
+            let name2 = {};
+            let interface_name = data[i]['tps'][h]['interface-name'];
+            name2['name'] = interface_name;
+            name2['type'] = '2';
+            name2['source'] = i;
+            this.d3Data.push(name2);
+          }
+        }
+        for (let b = 0; b < this.d3Data.length; b++) {
+          this.d3Data[b]['target'] = b;
+        }
+        this.initPosition(this.d3Data);
+        setTimeout(this.render(this.d3Data, this.imgmap,this.dataCloud,this.charge,data),0)
+      }, (err) => {
+        console.log(err);
+      });
+
+  }
+
+  //获取云图初始的连线状态 getlogicalLinksData
+  getLinksData() {
+    this.myhttp.getLogicalLinksData()
+      .subscribe((data) => {
+        console.log(data["status"])
+        if (data["status"]=="FAILED") {
+          return;
+        }
+        for (let i = 0; i < data["logical-link"].length; i++) {
+            if(data["logical-link"][i]["relationship-list"]["relationship"].length>2){
+                this.dataCloudLink=data["logical-link"].splice(i,1);
+            }
+        }
+        console.log(this.dataCloudLink)
+        for (let i = 0; i < data["logical-link"].length; i++) {
+          let textval = [];
+          textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+          textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+          textval[2] = data['logical-link'][i]['resource-version'];//version
+          textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+          textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+          textval[5] = data['logical-link'][i]['operational-status'];
+          textval[6] = data['logical-link'][i]['link-name'];
+          this.logicalLinks.push(textval);
+          this.chose(textval);
+        }
+        if(this.dataCloudLink.length>0){
+          this.getcloudLine(this.dataCloudLink)
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+  //D3云图渲染
+  render(nodes, imgmap,dataCloud,charge,dataD3) {
+    var thiss = this;
+    var _this = this.tpoption,
+      width = null,
+      height = _this.height;
+    if (_this.width > 800) {
+      width = _this.width;
+    } else {
+      width = 800;
+    }
+
+    var str="";
+    for(var i=0;i<10;i++){
+      str+="<div>这是div"+i+"</div>"
+    }
+
+    if(dataD3.length<=4){
+      charge=-850;
+    }else if(dataD3.length>4 && dataD3.length<=6) {
+      charge=-700;
+    }else if(dataD3.length>6 && dataD3.length<=10) {
+      charge=-600;
+    }else {
+      charge=-150;
+    }
+    var svg = d3.select(_this.container).append('svg')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('id', 'content-svg')
+        .style('pointer-events', 'all'),
+      graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
+
+      _g_nodes = graph.selectAll('g.node')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .style('display', function (d) {
+          var display = 'block';
+          switch (d.type) {
+            case '1':
+              display = 'none';
+              break;
+            case '2':
+              display = 'none';
+              break;
+            default:
+              break;
+          }
+          return display;
+        })
+        .style('cursor', 'pointer')
+        .attr('class', 'node'),
+
+      _g_lines = graph.selectAll('line.line')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .style('display', 'none')
+        .attr('class', 'line');
+
+
+    _g_lines.append('line')
+      .style('stroke', '#93c62d'
+      )
+      .style('stroke-width', 2);
+
+    _g_nodes.append('image')
+      .attr('width', function (d) {
+        var width = 40;
+        switch (d.type) {
+          case '1':
+            width = 4.4 * width;
+            break;
+          case '2':
+            width = 0.12 * width;
+            break;
+          default:
+            break;
+        }
+        return width;
+      })
+      .attr('height', function (d) {
+        var height = 20;
+        switch (d.type) {
+          case '1':
+            height = 3.5 * height;
+            break;
+          case '2':
+            height = 0.2 * height;
+            break;
+          default:
+            break;
+        }
+        return height;
+      })
+      .attr('xlink:href', function (d) {
+        return imgmap[d.type];
+      });
+
+    _g_nodes.append('text')
+      .text(function (d) {
+        return d.name;
+      })
+      .style('transform', function (d) {
+        var x = null;
+        var y = null;
+        switch (d.type) {
+          case '1':
+            x = 7;
+            y = -7;
+            break;
+          case '2':
+            x = 1;
+            y = -2;
+            break;
+          default:
+            break;
+        }
+        return 'translate(' + x + '%,' + y + '%)';
+      })
+      .style('font-size', function (d) {
+        var size = 14;
+        switch (d.type) {
+          case '1':
+            size = 14;
+            break;
+          case '2':
+            size = 12;
+            break;
+          default:
+            break;
+        }
+        return size;
+      })
+      .style('fill', function (d) {
+        var color = '#666';
+        switch (d.type) {
+          case '1':
+            color = '#666';
+            break;
+          case '2':
+            color = '#666';
+            break;
+          default:
+            break;
+        }
+        return color;
+      })
+      .style('font-weight', '500');
+
+
+    //线上添加自定义属性
+    _g_lines.each(function (d, i) {
+      var _this = d3.select(this);
+      if (d.name) {
+        _this.attr('data-text', d.name);
+      }
+    });
+    var force = d3.layout.force()
+      .size([1000,this.winHeight])
+      .linkDistance(5)
+      // .theta(0)
+      .charge(charge)
+      .nodes(nodes)
+      .links(nodes)
+      .start();
+    // let distanceMax2=1;
+    // force.distanceMax = function(_) {
+    //   return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2);
+    // };
+    //添加拖拽行为
+    // _g_nodes.call(this.getDragBehavior(force));
+
+
+    force.on('tick', function (d) {
+      nodes.forEach(function(d,i){
+
+        d.x = d.x - 25 < 0     ? 25 : d.x ;
+        d.x = d.x + 25 > width ? width - 25 : d.x ;
+        d.y = d.y - 15 < 0      ? 15 : d.y ;
+        d.y = d.y + 15> height ? height - 15 : d.y ;
+      });
+      if(force.alpha()<=0.1){
+
+
+        _g_nodes.style('display', function (d) {
+
+
+          var display = 'block';
+          switch (d.type) {
+            case '1':
+              display = 'block';
+              break;
+            case '2':
+              display = 'none';
+              break;
+            default:
+              break;
+          }
+          return display;
+        });
+
+      _g_lines.select('line')
+        .attr('x1', function (d) {
+          return d.source.x;
+        })
+        .attr('y1', function (d) {
+          return d.source.y;
+        })
+        .attr('x2', function (d) {
+          return d.target.x;
+        })
+        .attr('y2', function (d) {
+          return d.target.y;
+        });
+
+      _g_nodes.attr('transform', function (d) {
+        // console.log(d)
+        // if(d["type"]==1){
+        //   d["x"]=400;
+        //   d["y"]=400;
+        // }else {
+        //   d["x"]=d["x"];
+        //   d["y"]=d["y"]
+        // }
+        var image = d3.select(this).select('image')[0][0],
+          halfWidth = parseFloat(image.attributes[0]['value']) / 2,
+          halfHeight = parseFloat(image.attributes[1]['value']) / 2;
+
+
+        return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')';
+      });
+
+      _g_nodes.select('text').attr('dy', function (d) {
+        var image = this.previousSibling,
+          height = parseFloat(image.attributes[1]['value']),
+          fontSize = 12;
+        return height + 1.5 * fontSize;
+      });
+
+
+      }
+
+    });
+
+    force.on('end', function () {
+
+      force.stop();
+      if(dataCloud.length>0){
+        thiss.getoutCloud(dataCloud,imgmap);
+      }
+      thiss.getLinksData();
+      thiss.addLinkDisabled = false;
+    });
+
+  };
+
+  //拓扑图拖拽效果
+  getDragBehavior(force) {
+
+    return d3.behavior.drag()
+      .origin(function (d) {
+        return d;
+      })
+      .on('dragstart', dragstart)
+      .on('drag', dragging)
+      .on('dragend', dragend);
+
+    function dragstart(d) {
+      d3.event.sourceEvent.stopPropagation();
+      d3.select(this).classed('dragging', true);
+      force.start();
+    }
+
+    function dragging(d) {
+      d.x = d3.event.x;
+      d.y = d3.event.y;
+    }
+
+    function dragend(d) {
+      d3.select(this).classed('dragging', false);
+    }
+
+  }
+
+  //初始化节点位置
+  initPosition(datas) {
+    let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
+    let points = this.getVertices(origin, Math.min(this.tpoption.width/2, this.tpoption.height/2), datas.length);
+    datas.forEach((item, i) => {
+      item.x = points[i].x;
+      item.y = points[i].y;
+    });
+  }
+
+  //根据多边形获取定位点
+  getVertices(origin, r, n) {
+    if (typeof n !== 'number') return;
+    var ox = origin[0];
+    var oy = origin[1];
+    var angle = 30 * n / n;
+    var i = 0;
+    var points = [];
+    var tempAngle = 0;
+    while (i < n) {
+      tempAngle = (i * angle * Math.PI) / 180;
+      points.push({
+        x: ox - r * Math.sin(tempAngle),
+        y: oy - r * Math.cos(tempAngle),
+      });
+      i++;
+    }
+    return points;
+  }
+
+  //渲染外部云
+  getoutCloud(dataCloud,imgmap) {
+    var _this = this,
+      width;
+    let networkId=dataCloud[0]["networkId"];
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    var svg = d3.select('#content-svg');
+    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+    var out = d3.select('#out');
+    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+    out.append('text').text(networkId)
+      .style('transform', 'translate(0，0)')
+      .style('font-size', '16')
+      .style('font-weight', '400')
+      .attr('dx', '40')
+      .attr('dy', '70')
+      .style('fill', '#666');
+  }
+
+  //外部云连接
+  getcloudLine(dataCloudLink) {
+    let textval = [];
+    textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+    textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+    textval[2] = dataCloudLink[0]['resource-version'];//version
+    textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+    textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+    textval[5] = dataCloudLink[0]['operational-status'];//status
+    textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
+    textval[7] =this.dataCloud[0]["networkId"];
+    console.log(this.dataCloud);
+    let dataD3=this.d3Data;
+    for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+      if (dataD3[p]['name'] ==  textval[0]) {
+        textval[8] =dataD3[p]['source']['name'];//network1
+      }
+    }
+    textval[9] =dataCloudLink[0]["link-name"];
+
+    let lines_json = {};
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == textval[0]) {
+        //获取二级的x,y坐标
+        $('.node').eq(i).show();
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+        lines_json['x2'] = width - 100;
+        lines_json['y2'] = 100;
+      }
+    }
+    var x1 = lines_json['x1'];
+    var y1 = lines_json['y1'];
+    var x2 = lines_json['x2'];
+    var y2 = lines_json['y2'];
+    var color='#14bb58';
+    if(textval[5]=="up"){
+      color='#14bb58';
+    }else {
+      color='red';
+    }
+    var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+    var svg = d3.select('#graph');
+    $(".cloudline").remove();
+    $('#graph').prepend(line);
+    $('.cloudline').attr({
+      x1: x1 + 100,
+      y1: y1 + 10,
+      x2: x2,
+      y2: y2,
+      'data-tp1': textval[0],
+      'data-tp2': textval[1],
+      'data-version': textval[2],
+      'data-node1':textval[3],
+      'data-node2':textval[4],
+      'data-network':textval[8],
+      'data-cloudnetwork':textval[7],
+      'data-url':"",
+      'data-aaiid':textval[6],
+      "data-link":textval[9]
+    });
+    svg.html(svg.html());
+  }
+
+  //查询外部云host url地址
+  getCloudUrl(aaiId,thisNg){
+    this.myhttp.queryCloudUrl(aaiId)
+      .subscribe((data) => {
+        thisNg.delcloudUrl=data["service-url"];
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+
+  //右侧表单下拉选框数据填充 三级联动
+  //Left Port
+  network1Change(value: string): void {
+    this.selectedNode1 = this.nodeOption1[value][0];
+    this.getPInterfaces1();
+  }
+
+  node1Change(): void {
+    this.getPInterfaces1();
+  }
+
+  //获取指定node下的TP数据
+  getPInterfaces1() {
+    let params = {
+      pnfName: this.selectedNode1,
+    };
+    this.myhttp.getPInterfacesData1(params)
+      .subscribe((data) => {
+        this.tpOption1 = [];
+        for (let i = 0; i < data.length; i++) {
+          let tpName = data[i]['interface-name'];
+          this.tpOption1.push(tpName);
+        }
+        this.selecteTpName1 = this.tpOption1[0];
+      }, (err) => {
+        // console.log(err);
+      });
+  }
+
+  //Right Port
+  network2Change(value: string): void {
+    this.selectedNode2 = this.nodeOption1[value][0];
+    this.getPInterfaces2();
+  }
+
+  node2Change(): void {
+    this.getPInterfaces2();
+  }
+
+  //获取指定node下的TP数据
+  getPInterfaces2() {
+    let params = {
+      pnfName: this.selectedNode2,
+    };
+    this.myhttp.getPInterfacesData2(params)
+      .subscribe((data) => {
+        this.tpOption2 = [];
+        for (let i = 0; i < data.length; i++) {
+          let tpName = data[i]['interface-name'];
+          this.tpOption2.push(tpName);
+        }
+        this.selecteTpName2 = this.tpOption2[0];
+      }, (err) => {
+        // console.log(err);
+      });
+  }
+
+  //提交表单，连线
+  submitForm(): void {
+    //当页面ONAP未选中，即本地云端TP连线
+    var _thiss = this;
+    if (this.inputshow == false) {
+      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
+        alert('服务端口不能为空，请选择端口信息');
+        return;
+      } else if (this.networkVal1 == this.networkVal2) {
+        alert('同一云服务下的TP端口不能相连！');
+        return;
+      }
+      let tp_links = [],
+        tp1 = this.selecteTpName1,
+        tp2 = this.selecteTpName2;
+      for (let i = 0; i < $(".line-local").length; i++) {
+        let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+        let data_text2 = $('.line-local').eq(i).attr('data-tp2');
+        tp_links.push(data_text1);
+        tp_links.push(data_text2);
+      }
+      if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
+        alert('此端口号连线已存在！');
+        return;
+      }
+      this.createTpLinks();
+
+    } else {
+      //当页面ONAP选中，即创建外部云，连线
+      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
+        alert('服务端口信息不能为空，请填写完整的端口信息');
+        return;
+      }
+      let tp_links = [],
+        tp1 = this.selecteTpName1;
+      for (let i = 0; i < $(".line-local").length; i++) {
+        let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+        tp_links.push(data_text1);
+      }
+      if (tp_links.indexOf(tp1) != -1) {
+        alert('此端口号连线已存在！');
+        return;
+      }
+      Promise
+        .all([this.createCloudNetwork(), this.createPnfs(), this.createCloudTp(), this.createCloudLinks()])
+        .then(function (results) {
+          console.log(results);
+          if (results.indexOf('FAIL') == -1) {
+            // _thiss.queryOutCloudLink();
+            _thiss.outCloudShow = true;
+            _thiss.outCloud(_thiss.imgmap);
+            setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up",_thiss.linkName), 0);
+            _thiss.hideForm();
+          } else {
+            console.log('失败');
+          }
+        });
+
+    }
+  }
+
+  //创建tp连线 调用接口createLink
+  createTpLinks() {
+    let params = {
+      'link-name': this.linkName,
+      'in-maint': false,
+      'link-type': 'cross-link',
+      'speed-value': '10000',
+      'operational-status': 'up',
+      'relationship-list': {
+        'relationship': [
+          {
+            'related-to': this.selecteTpName1,
+            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1
+          },
+          {
+            'related-to': this.selecteTpName2,
+            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2
+          }
+        ]
+      }
+    };
+    this.myhttp.createLink(params)
+      .subscribe((data) => {
+        if (data["status"] == 'SUCCESS') {
+          this.queryAddLink();
+        }
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //创建tp连接线后马上查询新增的连线
+  queryAddLink() {
+    let linkName=this.linkName,
+      selecteTpName1 = this.selecteTpName1,
+      selecteTpName2 = this.selecteTpName2,
+      selectedNode1 = this.selectedNode1,
+      selectedNode2 = this.selectedNode2;
+    let params = {
+      'link-name': selecteTpName1 + '_' + selecteTpName2,
+    };
+    this.myhttp.querySpecificLinkInfo(params)
+      .subscribe((data) => {
+        let version = data['resource-version'],
+          operational_status = data['operational-status'];
+        let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status,linkName];
+        this.hideForm();
+        this.chose(textval);
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //两个TP之间的连线 坐标获取
+  chose(textval) {
+    var lines_json = {};
+    lines_json['tp1'] = textval[0];
+    lines_json['tp2'] = textval[1];
+    lines_json['version'] = textval[2];
+    lines_json['node1'] = textval[3];
+    lines_json['node2'] = textval[4];
+    lines_json['status'] = textval[5];
+    lines_json['linkname'] = textval[6];
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == textval[0]) {
+        $('.node').eq(i).show();
+        //获取二级的x,y坐标
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+      }
+      if ($('.node').eq(i).find('text').html() == textval[1]) {
+        $('.node').eq(i).show();
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
+      }
+    }
+
+    this.addLine(lines_json);
+  }
+
+  //两个TP之间的连线 连线渲染
+  addLine(lines) {
+    let tp1 = lines.tp1;
+    let tp2 = lines.tp2;
+    let version = lines.version;
+    let node1 = lines.node1;
+    let node2 = lines.node2;
+    let status = lines.status;
+    let linkname = lines.linkname;
+    let x1 = lines.x1;
+    let y1 = lines.y1 + 5;
+    let x2 = lines.x2;
+    let y2 = lines.y2 + 5;
+    let color = '#14bb58';
+    if (status == 'up') {
+      color = '#14bb58';
+    } else {
+      color = 'red';
+    }
+    let line = '<line class=\'line line-local \' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+    let svg = d3.select('#graph');
+    $('#graph').prepend(line);
+    $('.line').first().attr({
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      'data-tp1': tp1,
+      'data-tp2': tp2,
+      'data-version': version,
+      'data-node1': node1,
+      'data-node2': node2,
+      "data-link":linkname
+    });
+    svg.html(svg.html());
+  }
+
+  //创建外部云连线后，马上查询连线
+  queryOutCloudLink() {
+    let networkVal1 = this.networkVal1,
+      selectedNode1 = this.selectedNode1,
+      selecteTpName1 = this.selecteTpName1,
+      cloudUrl = this.cloudUrl,
+      cloudNetWork = this.cloudNetwork,
+      cloudNode = this.cloudNode,
+      cloudTp = this.cloudTp,
+      linkname=this.linkName;
+    let params = {
+      'link-name': linkname,
+    };
+    this.myhttp.querySpecificLinkInfo(params)
+      .subscribe((data) => {
+        let version = data['resource-version'];
+        let status = data['operational-status'];
+        let link_name = data['link-name'];
+        this.outCloudShow = true;
+        this.outCloud(this.imgmap);
+        setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name), 0);
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //新增外部云
+  outCloud(imgmap) {
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    var svg = d3.select('#content-svg');
+    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+    var out = d3.select('#out');
+    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+    out.append('text').text('Partner Network')
+      .style('transform', 'translate(0，0)')
+      .style('font-size', '16')
+      .style('font-weight', 'bold')
+      .attr('dx', '40')
+      .attr('dy', '70')
+      .style('fill', '#fff');
+  }
+
+  //新增 外部云连接
+  cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name) {
+    let lines_json = {};
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == networkVal1) {
+        //获取二级的x,y坐标
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+        lines_json['x2'] = width - 100;
+        lines_json['y2'] = 100;
+      }
+    }
+    var x1 = lines_json['x1'];
+    var y1 = lines_json['y1'];
+    var x2 = lines_json['x2'];
+    var y2 = lines_json['y2'];
+    var color='#14bb58';
+    if(status=="up"){
+      color='#14bb58';
+    }else {
+      color='red';
+    }
+    var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+    var svg = d3.select('#graph');
+    $(".cloudline").remove();
+    $('#graph').prepend(line);
+    $('.cloudline').attr({
+      x1: x1 + 100,
+      y1: y1 + 10,
+      x2: x2,
+      y2: y2,
+      'data-tp1': selecteTpName1,
+      'data-tp2': cloudTp,
+      'data-version': version,
+      'data-node1':selectedNode1,
+      'data-node2':cloudNode,
+      'data-network':networkVal1,
+      'data-cloudnetwork':cloudNetWork,
+      'data-url':cloudUrl,
+      "data-link":link_name
+    });
+    svg.html(svg.html());
+  }
+
+  //创建外部云，连线时调用以下4个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks
+  createCloudNetwork() {
+    let _thiss = this;
+    let params = {
+      'selflink': this.cloudUrl,
+      'network-id': this.cloudNetwork,
+      'provider-id': '',
+      'client-id': '',
+      'te-topo-id': ''
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createNetwrok(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createPnfs() {
+    let _thiss = this;
+    let params= {
+      "pnf-name": this.cloudNode,
+      "pnf-id": "",
+      "in-maint": "",
+      "admin-status": "up",
+      "operational-status": "up",
+      "relationship-list": {
+        "relationship": {
+          "related-to": "network-resource",
+          "relationship-label": "tosca.relationships.network.LinksTo",
+          "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork,
+          "relationship-data": {
+            "relationship-key": "network-resource.network-id",
+            "relationship-value": this.cloudNetwork
+          }
+        }
+      }
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createNetwrok(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createCloudTp() {
+    let _thiss = this;
+    let params= {
+      "interface-name": this.cloudTp,
+      "speed-value": "100000",
+      "in-maint": "true",
+      "network-ref": "",
+      "transparent": "",
+      "operational-status": "up",
+    };
+    let cloudNodeName=this.cloudNode;
+
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createTp(params,cloudNodeName)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          // console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createCloudLinks() {
+    let _thiss = this;
+    let params={
+      "link-name":  this.linkName,
+      "in-maint": "",
+      "link-type": "",
+      "speed-value": "",
+      "relationship-list": {
+        "relationship" : [
+          {
+            "related-to": this.selecteTpName1,
+            "related-link": "/aai/v13/network/pnfs/pnf/"+this.selectedNode1+"/p-interfaces/p-interface/"+this.selecteTpName1
+          },
+          {
+            "related-to": this.cloudTp,
+            "related-link": "/aai/v13/network/pnfs/pnf/"+this.cloudNode+"/p-interfaces/p-interface/"+this.cloudTp
+          }
+        ]
+      }
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createCloudLink(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          // console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  //本地云TP端口 删除连线 调用接口deleteLink
+  delLink(): void {
+    let deltp1 = this.delTp1,
+      deltp2 = this.delTp2,
+      version = this.delVersion,
+      delLinkIndex = this.delLinkIndex;
+    let params = {
+      'logical-link': this.delLinkname,
+      'resource-version': version,
+    };
+    this.myhttp.deleteLink(params)
+      .subscribe((data) => {
+        if (data["status"] == 'SUCCESS') {
+          this.delLine(deltp1, deltp2);
+          console.log(delLinkIndex)
+          delLinkIndex.remove();
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+  delLine(val1, val2) {
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == val1) {
+        $('.node').eq(i).hide();
+      }
+      if ($('.node').eq(i).find('text').html() == val2) {
+        $('.node').eq(i).hide();
+      }
+    }
+    this.delBoxisVisible = false;
+  }
+
+  //外部云 删除连线 调用接口deleteCloudLine
+  delCloudLink() : void {
+    let deltp1 = this.delTp1,
+      deltp2 = this.delTp2,
+      version = this.delVersion;
+    let params = {
+      'logical-link': this.delLinkname,
+      'resource-version': version,
+    };
+    this.myhttp.deleteLink(params)
+      .subscribe((data) => {
+        console.log(data)
+        if (data["status"] == 'SUCCESS') {
+          this.delLine(deltp1, deltp2);
+          $('.cloudline').remove();
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+}
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
new file mode 100644
index 00000000..a7cd0677
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<p>
+  bar works!
+</p>
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/components/charts/bar/bar.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.less
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts
new file mode 100644
index 00000000..d979ffb6
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarComponent } from './bar.component';
+
+describe('BarComponent', () => {
+  let component: BarComponent;
+  let fixture: ComponentFixture<BarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
new file mode 100644
index 00000000..fa9ecbbd
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bar',
+  templateUrl: './bar.component.html',
+  styleUrls: ['./bar.component.less']
+})
+export class BarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html
new file mode 100644
index 00000000..9a43e28c
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.html
@@ -0,0 +1,22 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div echarts 
+[initOpts]="initOpts"
+[options]="lineOption" 
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+  Line Chart
+</div>
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.less b/usecaseui-portal/src/app/components/charts/line/line.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.less
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
new file mode 100644
index 00000000..afe70654
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineComponent } from './line.component';
+
+describe('LineComponent', () => {
+  let component: LineComponent;
+  let fixture: ComponentFixture<LineComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LineComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
new file mode 100644
index 00000000..8bc8ebd8
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -0,0 +1,79 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+  selector: 'app-line',
+  templateUrl: './line.component.html',
+  styleUrls: ['./line.component.less']
+})
+export class LineComponent implements OnInit {
+  // 图形数据
+  @Input() chartData;
+  // 初始化数据
+  @Input() initData;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.initOpts = {
+      renderer: 'canvas',
+      height: this.initData.height,
+      width: this.initData.width
+    };
+    this.lineOption ={
+      tooltip : this.initData.option.tooltip,
+      icon:'circle',
+      legend: this.initData.option.legend,
+      grid: {
+          left: '1%',
+          right: '3%',
+          top: '10%',
+          bottom: '10%',
+          containLabel: true
+      },
+      xAxis: {
+        axisTick: {
+          show: false,
+        },
+        axisLine:{
+          show: false
+        },
+          data: ['01','02','04','06','08','10','12','14','16','18','20','22','24']
+      },
+      yAxis: {
+        axisTick: {
+          show: false,
+        },
+        axisLine:{
+          show: false
+        }
+      },
+      series : this.initData.option.series
+    }
+  }
+
+  ngOnChanges(changes:SimpleChanges){
+
+    // 当有实例的时候再执行，相当于第一次不执行下面方法
+    if(this.chartIntance){
+      this.chartDataChange()
+    }
+  }
+  // 初始化图形高度
+  initOpts:any;
+  // 折线图配置
+  lineOption:any;
+  // 实例对象
+  chartIntance:any;
+  // 数据变化
+  updateOption:any;
+  chartDataChange(){
+    this.updateOption = this.chartData;
+  }
+  chartInit(chart){
+    this.chartIntance = chart;
+  }
+
+
+
+}
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/components/charts/pie/pie.component.html
new file mode 100644
index 00000000..5f1e94ce
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.html
@@ -0,0 +1,24 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div echarts 
+[initOpts]="initOpts"
+[options]="pieOption" 
+[merge]="updateOption"
+(chartInit)="chartInit($event)"
+(chartMouseOver)="pieMouseOver($event)"
+(chartMouseOut)="pieMouseOut($event)">
+  Pie Chart
+</div>
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/components/charts/pie/pie.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.less
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts
new file mode 100644
index 00000000..528da25c
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieComponent } from './pie.component';
+
+describe('PieComponent', () => {
+  let component: PieComponent;
+  let fixture: ComponentFixture<PieComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PieComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PieComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
new file mode 100644
index 00000000..8a5e2100
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+  selector: 'app-pie',
+  templateUrl: './pie.component.html',
+  styleUrls: ['./pie.component.less']
+})
+export class PieComponent implements OnInit {
+  // 图形数据
+  @Input() chartData;
+  // 初始化数据
+  @Input() initData;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.initOpts = {
+      renderer: 'canvas',
+      height: this.initData.height
+    };
+    this.pieOption = {
+      legend: this.initData.option.legend,
+      color:this.initData.option.color,
+      series : [
+          {
+              name: this.initData.option.series[0].name,
+              type: 'pie',
+              radius : this.initData.option.series[0].radius,
+              center: ['50%', '45%'],
+              legendHoverLink: false,
+              hoverOffset: 5,
+              avoidLabelOverlap: false,
+              label: this.initData.option.series[0].label,
+              data:[
+                  {value:1, name:'11'}
+              ],
+              itemStyle: {
+                  emphasis: {
+                      shadowBlur: 5,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+              }
+          }
+      ]
+    }
+  }
+
+  ngOnChanges(changes:SimpleChanges){
+
+    // 当有实例的时候再执行，相当于第一次不执行下面方法
+    if(this.chartIntance){
+      this.chartDataChange()
+    }
+  }
+
+  // 初始化图形高度
+  initOpts:any;
+  // alarm饼图
+  pieOption:any;
+  // 实例对象
+  chartIntance:any;
+  // 数据变化
+  updateOption:any;
+  chartDataChange(){
+    this.updateOption = this.chartData;
+    // 要等到updateOption渲染完再执行
+    this.chartIntance.on('finished',()=>{
+      this.chartIntance.dispatchAction({
+        type:'highlight',
+        seriesIndex: 0,
+        dataIndex:0        
+      })
+      // 由于所有视图变化渲染都会执行，更新完注销此事件
+      this.chartIntance.off('finished')
+    })
+  }
+
+  chartInit(chart){
+    this.chartIntance = chart;
+  }
+  
+  pieMouseOver(e){
+    this.chartIntance.dispatchAction({
+      type:'downplay'
+    })
+    this.chartIntance.dispatchAction({
+      type:'highlight',
+      seriesIndex: 0,
+      dataIndex:e.dataIndex
+    })
+  }
+
+  pieMouseOut(e){
+    this.chartIntance.dispatchAction({
+      type:'highlight',
+      seriesIndex: 0,
+      dataIndex:e.dataIndex
+    })
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/components/details/details.component.css b/usecaseui-portal/src/app/components/details/details.component.css
new file mode 100644
index 00000000..0d450d28
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.css
@@ -0,0 +1,104 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.content .header {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 30px 28px 0;
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #e4e4e4;
+}
+.content .header hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content .header h2 {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 27px;
+}
+.content .header span.tildeimg {
+  position: absolute;
+  left: 50%;
+  top: 71px;
+  width: 60px;
+  height: 10px;
+  transform: translate(-30px, 0);
+  background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+  background-color: #fff;
+}
+.content .header .headerlist {
+  display: flex;
+}
+.content .header .headerlist div {
+  width: 100%;
+}
+.content .header .headerlist div p {
+  font: 400 14px 'Arial';
+  color: #323437;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 18px 0 15px;
+}
+.content .header .headerlist div p span {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+  font: 700 14px 'Arial';
+  color: #3fa8eb;
+}
+.content hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content button {
+  width: 88px;
+  height: 22px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-44px, 0);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #fff;
+  background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+}
+.content button:hover {
+  background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+}
+.content .buttonActive {
+  transform: translate(-44px, -22px);
+  background: url(../../../assets/images/open-close2.png) no-repeat center 0px;
+}
+.content .buttonActive:hover {
+  background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+}
+.content h2.detailtitle {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 15px;
+  padding-top: 25px;
+}
+.content .detailInformatioin {
+  overflow: hidden;
+}
diff --git a/usecaseui-portal/src/app/components/details/details.component.html b/usecaseui-portal/src/app/components/details/details.component.html
new file mode 100644
index 00000000..b5c576c7
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.html
@@ -0,0 +1,68 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="content">
+    <div class="header">
+        <h2>HEADER INFORMATION</h2>
+        <hr> <span class="tildeimg"></span>
+        <div class="headerlist">
+            <div class="leftlist">
+                <p> <span>Version :</span> </p>
+                <p> <span>Domain :</span> </p>
+                <p> <span>Event Name :</span> Fault_IMSSBC_Backup MPU is down </p>
+                <p> <span>Event Id :</span> 15105642034 </p>
+                <p> <span>EventType :</span> </p>
+                <p> <span>NfcNamingCode :</span> </p>
+                <p> <span>NfNamingCode :</span> </p>
+                <p> <span>SourceName :</span> </p>
+                <p> <span>SourceId :</span> </p>
+                <p> <span>ReportingEntityName :</span> </p>
+                <p> <span>ReportingEntityId :</span> </p>
+            </div>
+            <div class="rightlist">
+                <p> <span>Priority :</span> Normal </p>
+                <p> <span>ReportTime :</span> </p>
+                <p> <span>ClearTime :</span> </p>
+                <p> <span>FaultFieldsVersion :</span> </p>
+                <p> <span>Event Servrity :</span> </p>
+                <p> <span>EventSourceType :</span> </p>
+                <p> <span>EventCategory :</span> </p>
+                <p> <span>AlarmCondition :</span> </p>
+                <p> <span>SpecificProblem :</span> </p>
+                <p> <span>Status :</span> </p>
+                <p> <span>AlarmInterfaceA :</span> </p>
+            </div>
+        </div>
+    </div>
+    <hr> 
+    <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+    <h2 class="detailtitle">DETAIL INFORMATION</h2>
+    <div class="detailInformatioin" [@slideUpDown]='state'>
+        <nz-table #detailTable [nzData]="detailData" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+            <thead>
+                <tr>
+                    <th nzWidth="18%">Item Name</th>
+                    <th >Item Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of detailTable.data">
+                    <td>{{data.name}}</td>
+                    <td>{{data.value}}</td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>
diff --git a/usecaseui-portal/src/app/components/details/details.component.less b/usecaseui-portal/src/app/components/details/details.component.less
new file mode 100644
index 00000000..ad81d8a6
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.less
@@ -0,0 +1,96 @@
+
+.content {
+    .header {
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 30px 28px 0;
+        position: relative;
+        margin-bottom: 30px;
+        border: 1px solid #e4e4e4;
+        hr {
+            margin: 0;
+            border: none;
+            height: 1px;
+            background-color: #e4e4e4;
+        }
+        h2 {
+            font: 700 24px/18px 'Times New Roman';
+            color: #3fa8eb;
+            text-align: center;
+            margin-bottom: 27px;
+        }
+        span.tildeimg {
+            position: absolute;
+            left: 50%;
+            top: 71px;
+            width: 60px;
+            height: 10px;
+            transform: translate(-30px,0);
+            background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+            background-color: #fff;
+        }
+        .headerlist {
+            display: flex;
+            div {
+                width: 100%;
+                p {
+                    font: 400 14px 'Arial';
+                    color: #323437;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin: 18px 0 15px;
+                    span {
+                        display: inline-block;
+                        width: 50%;
+                        text-align: right;
+                        font: 700 14px 'Arial';
+                        color: #3fa8eb;
+                    }
+                }
+            }
+        }
+    }
+    hr {
+        margin: 0;
+        border: none;
+        height: 1px;
+        background-color: #e4e4e4;
+    }
+    button {
+        width: 88px;
+        height: 22px;
+        position: absolute;
+        left: 50%;
+        transform: translate(-44px,0);
+        border: none;
+        outline: none;
+        cursor: pointer;
+        background-color: #fff;
+        background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+        &:hover {
+            background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+        }
+    }
+    .buttonActive {
+        transform: translate(-44px,-22px);
+        background: url(../../../assets/images/open-close2.png) no-repeat center -0px;
+        &:hover {
+            background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+        }
+    }
+    h2.detailtitle {
+        font: 700 24px/18px 'Times New Roman';
+        color: #3fa8eb;
+        text-align: center;
+        margin-bottom: 15px;
+        padding-top: 25px; 
+    }
+    .detailInformatioin {
+        // transition: all 0.3s linear;
+        overflow: hidden;
+    }
+    .detailshow {
+
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/details/details.component.spec.ts b/usecaseui-portal/src/app/components/details/details.component.spec.ts
new file mode 100644
index 00000000..1d5cbeb8
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts
new file mode 100644
index 00000000..f9e6474b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { slideUpDown } from '../../animates';
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.less'],
+  animations: [ slideUpDown ]
+})
+export class DetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes){
+    console.log(changes);
+  }
+  // 详情显示
+  moredetailShow = false;
+  @Input() detailId;
+  detailData = [
+    {name:"DNS.AttDnsQuery",value:"0"},
+    {name:"DNS.SuccDnsQuery",value:"0"},
+    {name:"DNS.SuccDnsQuery",value:"0"},
+    {name:"DNS.SuccDnsQuery",value:"0"},
+    {name:"DNS.SuccDnsQuery",value:"0"},
+    {name:"sssssss",value:"1111"},
+  ]
+  state = 'up'
+  slideUpDown(){
+    this.moredetailShow = !this.moredetailShow;
+    this.state = this.state === 'up' ? 'down' : 'up';
+  }
+}
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
new file mode 100644
index 00000000..7268b5dc
--- /dev/null
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
@@ -0,0 +1,93 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.content .title {
+  border-radius: 5px 5px 0 0;
+  background-color: #fff;
+  height: 106px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 0;
+}
+.content .title ul {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+.content .title ul li {
+  list-style: none;
+  padding-left: 32px;
+  width: 100%;
+  border-left: 1px solid #eceff4;
+}
+.content .title ul li h5 {
+  font: 500 14px "Arial";
+  color: #3d4d65;
+}
+.content .title ul li p {
+  font: 500 24px "Arial";
+  color: #3fa8eb;
+  margin-bottom: 0;
+}
+.content .title ul li:nth-child(1) {
+  border: none;
+}
+.content .chart {
+  background-color: #fff;
+  position: relative;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  height: 106px;
+}
+.content .chart .select {
+  padding: 20px 50px;
+  width: 70%;
+  float: left;
+}
+.content .chart .select nz-dropdown {
+  margin-right: 20px;
+}
+.content .chart .select nz-dropdown a {
+  font: 700 12px "Arial";
+  color: #3d4d65;
+}
+.content .chart .select nz-dropdown a:hover {
+  color: #3fa8eb;
+}
+.content .chart .AlarmChart {
+  width: 25%;
+  padding-top: 7px;
+  float: left;
+}
+.content .tablelist {
+  background-color: #fff;
+  padding: 24px 10px 0px;
+  border-radius: 0 0 5px 5px;
+}
+.content .tablelist .action {
+  padding: 10px 0 0 20px;
+}
+.content .tablelist .action .details {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(../../../assets/images/icon.png) center -113px;
+}
+.content .tablelist .action .details:hover {
+  background: url(../../../assets/images/icon.png) no-repeat center -128px;
+}
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
new file mode 100644
index 00000000..19c7d853
--- /dev/null
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
@@ -0,0 +1,79 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="content">
+  <!-- <div class="title">
+    <ul>
+        <li><h5>CPU</h5> <p>{{alarmList.all }}</p></li>
+        <li><h5>Memory</h5> <p>{{alarmList.closed }}</p></li>
+        <li><h5>Disk</h5> <p>{{alarmList.alarm }}</p></li>
+    </ul>
+  </div> -->
+    <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
+        <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line>
+    </nz-modal>
+  <div class="chart">
+    <div class="select">
+        <nz-dropdown [nzTrigger]="'click'">
+            <a nz-dropdown>
+                {{MeasurementSelected}} <i class="anticon anticon-down"></i>
+            </a>
+            <ul nz-menu>
+              <li nz-menu-item (click)="choseMeasurement(item)" *ngFor="let item of MeasurementList">{{item}}</li>
+            </ul>
+        </nz-dropdown>
+        <nz-dropdown [nzTrigger]="'click'">
+            <a nz-dropdown>
+                {{ReportTimeSelected}} <i class="anticon anticon-down"></i>
+            </a>
+            <ul nz-menu>
+              <li nz-menu-item (click)="choseReportTime(item)" *ngFor="let item of ReportTimeList">{{item}}</li>
+            </ul>
+        </nz-dropdown>
+    </div>
+    <div class="AlarmChart" (click)="showModalMiddle()">
+        <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+    </div>
+    <!-- <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> -->
+  </div>
+  <div class="tablelist">
+    <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
+        <thead (nzSortChange)="sort($event)" nzSingleSort>
+            <tr>
+            <th nzWidth="5%">NO</th>
+            <th nzWidth="20%">Source Name</th>
+            <th nzWidth="10%">Priority</th>
+            <th nzWidth="20%">SpecificProblem</th>
+            <th nzWidth="20%">Report Time</th>
+            <th nzWidth="15%">Status</th>
+            <th nzWidth="10%">Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+            <tr *ngFor="let item of nzTable.data; let i = index; ">
+                <td>{{i+1}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.age}}</td>
+                <td>{{item.address}}</td>
+                <td>{{item.address}}</td>
+                <td>{{item.address}}</td>
+                <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td>
+            </tr>
+            <!-- </ng-template> -->
+        </tbody>
+    </nz-table>
+  </div>
+</div>
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
new file mode 100644
index 00000000..30fea328
--- /dev/null
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
@@ -0,0 +1,108 @@
+.content {
+    .title {
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        height: 106px;
+        border-bottom: 1px solid #f0f0f0;
+        margin-bottom: 0;
+        ul {
+            display: flex;
+            display: -webkit-flex; 
+            justify-content: space-around;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            li {
+                list-style: none;
+                padding-left: 32px;
+                width: 100%;
+                border-left: 1px solid #eceff4;
+                h5 {
+                    font: 500 14px "Arial";
+                    color: #3d4d65;
+                }
+                p {
+                    font: 500 24px "Arial";
+                    color: #3fa8eb;
+                    margin-bottom: 0;
+                }
+            }
+            li:nth-child(1){
+                border: none;
+            }
+        }
+    }
+    .chart {
+        background-color: #fff;
+        position: relative;
+        border-radius: 5px;
+        margin-bottom: 20px;
+        height: 106px;
+        .select {
+            padding: 20px 50px;
+            width: 70%;
+            float: left;
+            nz-dropdown {
+                margin-right: 20px;
+                a {
+                    font: 700 12px "Arial";
+                    color: #3d4d65;
+                    &:hover {
+                        color: #3fa8eb;
+                    }
+                }
+            }
+        }
+        .AlarmChart {
+            // height: 0px;
+            // border-bottom: 1px solid #f5f5f5;
+            // transition: all 0.3s linear;
+            width: 25%;
+            padding-top: 7px;
+            float: left;
+        }
+        // .alarmChart-active {
+        //     height: 386px;
+        // }
+        // .open-close {
+        //     width: 50px;
+        //     height: 25px;
+        //     position: absolute;
+        //     left: 50%;
+        //     bottom: 0px;
+        //     transform: translate(-25px,0);
+        //     border: none;
+        //     outline: none;
+        //     cursor: pointer;
+        //     background-color: #fff;
+        //     background: url(../../../assets/images/open-close.png) no-repeat center -27px;
+        //     &:hover {
+        //         background: url(../../../assets/images/open-close.png) no-repeat center -79px;
+        //     }
+        // }
+        // .open-close-active {
+        //     background: url(../../../assets/images/open-close.png) center -1px;
+        //     &:hover {
+        //         background: url(../../../assets/images/open-close.png) no-repeat center -53px;
+        //     }
+        // }
+    }
+    .tablelist {
+        background-color: #fff;
+        padding: 24px 10px 0px;
+        border-radius: 0 0 5px 5px;
+        .action{
+            padding: 10px 0 0 20px;
+            .details{
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background: url(../../../assets/images/icon.png) center -113px;
+                &:hover {
+                    background: url(../../../assets/images/icon.png) no-repeat center -128px;
+                }
+            }
+        }
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts
new file mode 100644
index 00000000..013db38a
--- /dev/null
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphiclistComponent } from './graphiclist.component';
+
+describe('GraphiclistComponent', () => {
+  let component: GraphiclistComponent;
+  let fixture: ComponentFixture<GraphiclistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GraphiclistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphiclistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
new file mode 100644
index 00000000..fc86ee0d
--- /dev/null
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
@@ -0,0 +1,213 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'app-graphiclist',
+  templateUrl: './graphiclist.component.html',
+  styleUrls: ['./graphiclist.component.less']
+})
+export class GraphiclistComponent implements OnInit {
+
+  constructor() { }
+  isVisibleMiddle = false;
+
+  showModalMiddle(): void {
+    this.isVisibleMiddle = true;
+  }
+  handleOkMiddle(): void {
+    console.log('click ok');
+    this.isVisibleMiddle = false;
+  }
+  handleCancelMiddle(): void {
+    this.isVisibleMiddle = false;
+  }
+
+  ngOnInit() {
+  }
+
+  // 筛选框（下拉框）
+  MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD'];
+  MeasurementSelected = "Measurement";
+  ReportTimeList = ['aaaa','bbbb','cccc','ddddd'];
+  ReportTimeSelected = "ReportTime";  
+  choseMeasurement(item){
+    console.log(item);
+    this.MeasurementSelected = item;
+  }
+  choseReportTime(item){
+    console.log(item);
+    this.ReportTimeSelected = item;
+  }
+
+  sort(e){
+
+  }
+  // 数量统计
+  alarmList = {
+    all:22439,
+    closed:37923,
+    alarm: 12342
+  }
+
+   //折线图
+   alarmChartData:Object;
+   alarmChartInit:Object = {
+    height:100,
+    width:290,
+     option:{
+      tooltip : {
+        show : false,
+      },
+      legend: {
+        show :false,
+      },
+       series: [
+         {
+             name: 'Memory',
+             type: 'bar',
+             legendHoverLink: true,
+             barWidth: "25%",
+             //timeframe_one
+             data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45],
+             itemStyle: {
+               color: "#3fa8eb"
+             },
+         }
+       ]
+     }
+   };
+   //折线图
+   alarmChartDataBig:Object;
+   alarmChartInitBig:Object = {
+    height:240,
+    width:500,
+     option:{
+       tooltip : {
+          show : true,
+          trigger: 'axis',
+        },
+       legend: {
+         bottom: 'bottom',
+         data: ['Memory']
+       },
+       series: [
+         {
+             name: 'Memory',
+             type: 'bar',
+             legendHoverLink: true,
+             barWidth: "25%",
+             //timeframe_one
+             data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45],
+             itemStyle: {
+               color: "#3fa8eb"
+             },
+         }
+       ]
+     }
+   };
+
+  //表格数据
+  dataSet = [
+    {
+      name       : 'John Brown',
+      age        : 32,
+      expand     : false,
+      address    : 'New York No. 1',
+      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
+    },
+    {
+      name       : 'Aim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Xim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'aoe Black',
+      age        : 32,
+      expand     : false,
+      address    : 'Sidney No. 1',
+      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
+    }
+  ];
+
+  @Output() detailData = new EventEmitter();
+  detailShow(id){
+    let prems = {
+      id:id,
+      detailShow: true
+    }
+    this.detailData.emit(prems);
+
+  }
+
+}
diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/dataInterface.ts
new file mode 100644
index 00000000..fe42594e
--- /dev/null
+++ b/usecaseui-portal/src/app/dataInterface.ts
@@ -0,0 +1,38 @@
+
+interface homeData {
+    services:{
+        number:number,
+        chartdata:Object[]
+    },
+    performance:{
+        per_Vnf:number,
+        per_VmPm:number
+    },
+    alarm:{
+        chartdata:Object[]
+    },
+    Vm_performance:{
+        names:string[]
+    }
+};
+
+interface homeVmLineData {
+    CPU:number[],
+    Memory:number[]
+}
+
+interface servicesSelectData {
+    customer:string[],
+    serviceType:string[]
+}
+
+interface servicesTableData {
+    total:number,
+    tableList:string[]
+}
+
+interface onboardTableData {
+    total:number,
+    tableList:string[]
+}
+export {homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData}
diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
new file mode 100644
index 00000000..d2e51e40
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.css
@@ -0,0 +1,157 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.content .services {
+  float: left;
+  background-color: #fff;
+  width: 30%;
+  height: 628px;
+  border-radius: 5px;
+  padding: 28px 22px;
+}
+.content .services h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+  margin-bottom: 58px;
+}
+.content .services h3 {
+  font: 400 48px/48px "Arial";
+  color: #3fa8eb;
+  text-align: center;
+}
+.content .services h3 span {
+  font-size: 14px;
+}
+.content .services p {
+  font: 400 14px/14px "Arial";
+  color: #54657e;
+  text-align: center;
+  margin-bottom: 48px;
+}
+.content .services .tip {
+  background-color: #eceff4;
+  color: #3d4d65;
+  font-size: 16px;
+  margin: 0 20px;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 5px;
+}
+.content .rightcontent {
+  float: left;
+  padding-left: 15px;
+  width: 70%;
+}
+.content .rightcontent .rt-content {
+  height: 220px;
+  margin-bottom: 18px;
+}
+.content .rightcontent .rt-content .poerformance {
+  float: left;
+  background-color: #fff;
+  height: 100%;
+  width: 50%;
+  border-radius: 5px;
+  padding: 28px 26px;
+}
+.content .rightcontent .rt-content .poerformance h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+  margin-bottom: 34px;
+}
+.content .rightcontent .rt-content .poerformance div {
+  height: 57px;
+  position: relative;
+  margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div h3 {
+  font: 600 25px/25px "Arial";
+  color: #3d4d65;
+  margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div p {
+  font: 400 12px/12px "Arial";
+  color: #54657e;
+}
+.content .rightcontent .rt-content .poerformance div img {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.content .rightcontent .rt-content .alarm {
+  float: left;
+  background-color: #fff;
+  height: 100%;
+  width: 48%;
+  margin-left: 2%;
+  border-radius: 5px;
+  position: relative;
+  padding: 28px 26px;
+}
+.content .rightcontent .rt-content .alarm h4 {
+  position: absolute;
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+}
+.content .rightcontent .rb-content {
+  height: 390px;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 24px 30px;
+  position: relative;
+}
+.content .rightcontent .rb-content h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+}
+.content .rightcontent .rb-content nz-dropdown {
+  position: absolute;
+  top: 24px;
+  right: 30px;
+}
+.content .rightcontent .rb-content nz-dropdown button {
+  width: 170px;
+  height: 35px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #cad3df;
+}
+.content .rightcontent .rb-content nz-dropdown button span {
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+.content .rightcontent .rb-content nz-dropdown button i {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.content .rightcontent .rb-content #pfVmChartLine {
+  width: 100%;
+  height: 318px;
+}
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
new file mode 100644
index 00000000..b2fa5eb4
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -0,0 +1,63 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr>
+<div class="content">
+  <div class="services">
+    <h4>{{"SERVICES" | translate}}</h4>
+    <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+    <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+    <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+    <p class="tip">View the details</p>
+  </div>
+
+  <div class="rightcontent">
+    <div class="rt-content">
+      <div class="poerformance">
+        <h4>{{"PERFORMANCE" | translate}}</h4>
+        <div class="pfVnf">
+          <h3 class="pfVnfNum">126</h3>
+          <p>Performance VNF</p>
+          <img src="../../assets/images/VNF.png" alt="VNF">
+        </div>
+        <div class="pfVmPm">
+          <h3 class="pfVmPmNum">286</h3>
+          <p>Performance VM/PM</p>
+          <img src="../../assets/images/VM.png" alt="VM/PM">
+        </div>
+      </div>
+      <div class="alarm">
+        <h4>{{"Alarm" | translate}}</h4>
+        <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+      </div>
+    </div>
+
+    <div class="rb-content">
+      <h4>{{"VM Performance" | translate}}</h4>
+      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+        <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+          <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames">
+            <a>{{item}}</a>
+          </li>
+        </ul>
+      </nz-dropdown>
+      <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line>
+    </div>
+  </div>
+
+</div>
+
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
new file mode 100644
index 00000000..89abafa6
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -0,0 +1,145 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.content {
+    .services {
+        float: left;
+        background-color: #fff;
+        width: 30%;
+        height: 628px;
+        border-radius: 5px;
+        padding: 28px 22px;
+        h4 {
+            font: 600 16px/16px "Arial";
+            color: #3d4d65;
+            margin-bottom: 58px;
+        }
+        h3 {
+            font: 400 48px/48px "Arial";
+            color: #3fa8eb;
+            text-align: center;
+            span {
+                font-size: 14px;
+            }
+        }
+        p {
+            font: 400 14px/14px "Arial";
+            color: #54657e;
+            text-align: center;
+            margin-bottom: 48px;
+        }
+        .tip {
+            background-color: #eceff4;
+            color: #3d4d65;
+            font-size: 16px;
+            margin: 0 20px;
+            height: 35px;
+            line-height: 35px;
+            border-radius: 5px;
+        }
+    }
+    .rightcontent {
+        float: left;
+        padding-left: 15px;
+        width: 70%;
+        .rt-content {
+            height: 220px;
+            margin-bottom: 18px;
+            .poerformance {
+                float: left;              
+                background-color: #fff;
+                height: 100%;
+                width: 50%;
+                border-radius: 5px;
+                padding: 28px 26px;
+                h4 {
+                    font: 600 16px/16px "Arial";
+                    color: #3d4d65;
+                    margin-bottom: 34px;  
+                }
+                div {
+                    height: 57px;
+                    position: relative;
+                    margin-bottom: 10px;
+                    h3 {
+                        font: 600 25px/25px "Arial";
+                        color: #3d4d65;
+                        margin-bottom: 10px;
+                    }
+                    p {
+                        font: 400 12px/12px "Arial"; 
+                        color: #54657e
+                    }
+                    img {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                    }
+                }
+            }
+            .alarm {
+                float: left;
+                background-color: #fff;
+                height: 100%;
+                width: 48%;
+                margin-left: 2%;
+                border-radius: 5px;
+                position: relative;
+                padding: 28px 26px;
+                h4 {
+                    position: absolute;
+                    font: 600 16px/16px "Arial";
+                    color: #3d4d65; 
+                }
+            }
+        }
+        .rb-content {
+            height: 390px;
+            background-color: #fff;
+            border-radius: 5px;
+            padding: 24px 30px;
+            position: relative;
+            h4 {
+                font: 600 16px/16px "Arial";
+                color: #3d4d65; 
+            }
+            nz-dropdown {
+                position: absolute;
+                top: 24px;
+                right: 30px;
+                button {
+                    width: 170px;
+                    height: 35px;
+                    background-color: #eceff4;
+                    text-align: left;
+                    border-color: #cad3df;
+                    span {
+                        display: inline-block;
+                        width: 120px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        font-size: 14px;
+                    }
+                    i {
+                        position: absolute;
+                        top: 12px;
+                        right: 12px;
+                    }
+                }
+                //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+            }
+            #pfVmChartLine {
+                width: 100%;
+                height: 318px;
+            }
+        }
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000..490e81bd
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
new file mode 100644
index 00000000..39fab25d
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -0,0 +1,166 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import { slideToRight } from '../animates';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.less'],
+  animations: [ slideToRight ]
+})
+export class HomeComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+
+  constructor(private myhttp: MyhttpService) { }
+
+  ngOnInit() {
+    this.getHomeAllData();
+  }
+  
+  // alarm饼图
+  alarmChartData:Object;
+  alarmChartInit:Object = {
+    height: 164,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#fb6e6e","#526b75"],
+      series:[{
+        name:"告警信息",
+        radius : '55%',
+        label:{
+          normal:{
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c},{d}%',
+          }
+        }
+      }]
+    }
+  };
+
+  // services饼图
+  serviceNumber:number = 0;
+  serviceChartData:Object;
+  serviceChartInit:Object = {
+    height: 300,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#3fa8eb","#1abb9b","#a4ead7"],
+      series:[{
+        name:"服务信息",
+        radius : ['45%','65%'],
+        avoidLabelOverlap: false,
+        label:{
+          normal:{
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c}',
+            textStyle: {
+                fontSize: '20',
+                fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+              show: false
+          }
+        },        
+      }]
+    }
+  };
+
+  // Performance线图
+  performanceChartData:Object;
+  performanceChartInit:Object = {
+    height:320,
+    option:{
+      legend: {
+        bottom: '0px',
+        data: ['CPU','Memory']
+      },
+      series : [
+        {
+            name: 'CPU',
+            type: 'line',
+            data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+        },
+        {
+            name: 'Memory',
+            type: 'line',
+            data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+        }
+      ]
+    }
+  };
+  getPerformanceChartData(){
+    let paramsObj = {
+      vmPerformanceName:this.vmPerformanceNameSelected
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data)=>{
+        this.performanceChartData = {
+          series:[
+            {data:data.CPU},
+            {data:data.Memory}
+          ]
+        }
+      },(err)=>{
+        console.log(err);
+      })
+  }
+
+  // vm筛选框
+  vmPerformanceNames = ['performanceNameOne'];
+  vmPerformanceNameSelected = this.vmPerformanceNames[0];
+  vmPerformanceNameSelect(item){
+    if(this.vmPerformanceNameSelected != item){
+      console.log(item);
+      this.vmPerformanceNameSelected = item;
+      this.getPerformanceChartData()
+    } 
+  }
+
+  // 获取数据
+  getHomeAllData(){
+    this.myhttp.getAllHomeData()
+    .subscribe(
+      (data)=>{
+        console.log(data);
+        this.alarmChartData ={
+          series:[{
+            data:data.alarm.chartdata
+          }]
+        };
+        this.serviceNumber = data.services.number;
+        this.serviceChartData ={
+          series:[{
+            data:data.services.chartdata
+          }]
+        };
+        this.vmPerformanceNames = data.Vm_performance.names;
+        this.vmPerformanceNameSelected = this.vmPerformanceNames[0];
+        this.getPerformanceChartData();
+      },
+      (err)=>{
+        console.log(err);
+      }
+    )
+  }
+
+}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
new file mode 100644
index 00000000..09f13a49
--- /dev/null
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -0,0 +1,266 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData} from './dataInterface';
+
+
+
+@Injectable()
+export class MyhttpService {
+
+  constructor(private http: HttpClient) { }
+  
+  baseUrl = "./assets/json";
+  url={
+    allhome:this.baseUrl + "/homeAllData.json",
+    homeLineData:this.baseUrl + "/homePerformanceChartData.json",
+    serviceSelectList:this.baseUrl + "/servicesList.json",   //customer、serviceType
+    servicesTableData:this.baseUrl + "/servicesTableData.json",
+    onboardTableData:this.baseUrl + "/onboardTableData.json",
+
+    customers:this.baseUrl + "/customers.json?",
+    serviceType:this.baseUrl + "/serviceTypes.json?*_*",
+    servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
+    serviceInstanceList:this.baseUrl + "/instanceTableData4.json?",
+    serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
+    templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?",
+    templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
+    addressData: this.baseUrl + "/siteAddressData.json?",
+    createService:this.baseUrl + "/createService.json?",
+    inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
+    deleteService: this.baseUrl + "/deleteService.json?",
+    progress:this.baseUrl + "/progress.json?",
+
+    allottedResource:this.baseUrl + "/allotted-resources2.json?",
+    pnfDetail:this.baseUrl + "/pnfdetail-domain.json?",
+    connectivity:this.baseUrl + "/sotn-connectivity2.json?",
+    vpnBinding:this.baseUrl + "/vpnbinding.json?",
+    alarmFormData:this.baseUrl + "/alarmFormData.json?"
+  }
+
+  // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
+  // baseUrl = '/api/usecaseui-server/v1';
+  // url={
+  //   allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
+  //   homeLineData:this.baseUrl + "/...........",
+  //   serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
+  //   servicesTableData:this.baseUrl + "/xxxxxxxx.json",
+  //   onboardTableData:this.baseUrl + "/xxxxxxx.json",
+
+
+  //   customers:this.baseUrl + "/uui-lcm/customers",
+  //   serviceType:this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
+  //   servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
+  //   serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
+  //   serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
+  //   templateCategory: "./assets/json/configuration_files/templateCategory.json",
+  //   templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=",
+  //   addressData: this.baseUrl + "/uui-sotn/getOssInvenory",
+  //   createService:this.baseUrl + "/uui-lcm/services",
+  //   inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
+  //   deleteService: this.baseUrl + "/uui-lcm/services/",
+  //   progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+
+  //   allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources",
+  //   pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/",
+  //   connectivity:this.baseUrl + "/uui-sotn/getConnectivityInfo/",
+  //   vpnBinding:this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/"
+  // }
+
+  // home页数据
+  getAllHomeData() {
+    return this.http.get<homeData>(this.url.allhome);
+  }
+  //home页折线图数据
+  getHomePerformanceChartData(paramsObj){
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<homeVmLineData>(this.url.homeLineData,{params});
+  }
+
+  // servicesList数据
+  // getServicesSelectData():Observable<HttpResponse<servicesSelectData>>{
+  //   return this.http.get<servicesSelectData>(this.url.serviceSelectList,{observe:'response'});
+  // }
+  getServicesTableData(paramsObj):Observable<HttpResponse<servicesTableData>>{
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<servicesTableData>(this.url.servicesTableData,{observe:'response',params});
+  }
+
+  // onboard数据
+  getOnboardTableData(paramsObj):Observable<HttpResponse<onboardTableData>>{
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<onboardTableData>(this.url.onboardTableData,{observe:'response',params});
+  }
+
+
+
+
+
+  testObservable(){
+    let myObservable = new Observable((observer)=>{
+      observer.next(1);
+      observer.next((n)=>{
+        console.log(3+n);
+      })
+      setTimeout(()=>{
+        observer.next(66666)
+      },100)
+      observer.next(()=>{
+        setTimeout((n)=>{
+          console.log("9999---" + n);
+        },10)        
+      })
+      // observer.error(2);
+      // observer.complete();
+    });
+
+    myObservable.subscribe((e)=>{
+      if(typeof e == "function"){
+        e(5)
+      }
+      console.log(e);
+    },(err)=>{
+      console.log(err);
+    },()=>{
+      console.log(555);
+    })
+  }
+
+  //---------------------------------------------------------------------------------
+
+  // 获取所有customers
+  getAllCustomers(){
+    return this.http.get<any>(this.url.customers);
+    // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");// 测试用 ：请求数据需要用回调函数包裹
+  }
+
+  // 获取相应的serviceType
+  getServiceTypes(customer){
+    let url = this.url.serviceType.replace("*_*",customer.id);
+    return this.http.get<any>(url);
+  }
+  // 获取服务分类信息，本地配置文件
+  getServicesCategory(){
+    return this.http.get<any>(this.url.servicesCategory);
+  }
+  // list表格数据
+  getInstanceTableData(paramsObj){
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(this.url.serviceInstanceList,{params});
+  }
+
+  // // 服务详情数据 
+  // getInstanceDetails(id){
+  //   let url = this.baseUrl + "/detailsData.json?id=" + id;
+  //   return this.http.get<instanceDetail>(url);
+  // }
+
+  // 获取所有模板类型
+  getAllServiceTemplates(){
+    return this.http.get<any>(this.url.serviceTemplates);
+  }
+
+  // 获取模板分类信息，本地配置文件
+  getTemplateCategory(){
+    return this.http.get<any>(this.url.servicesCategory);
+  }
+  // 获取模板输入项参数
+  getTemplateParameters(type,template){
+    let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL;  //本地模拟
+    // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
+    return this.http.get<any>(url);
+  }
+  // siteAddress 地址
+  getSiteAddress(){
+    return this.http.get<any>(this.url.addressData);
+  }
+
+  // 创建接口
+  createInstance(requestBody){
+    return this.http.get<any>(this.url.createService);  //本地模拟
+    // return this.http.post<any>(this.url.createService,requestBody);
+  }
+
+  // 输入参数名字转换
+  inputNamesTransform(){
+    return this.http.get(this.url.inputNamesTransform);
+  }
+
+  // 删除接口
+  deleteInstance(obj){
+    let httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type':  'application/json',
+        'Accept':'application/json',
+        'Authorization':'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA=='
+      }),
+      body:{
+        'globalSubscriberId': obj.globalSubscriberId,
+        'serviceType': obj.serviceType
+      }
+    };
+    return this.http.get<any>(this.url.deleteService);  //本地模拟
+    // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+  }
+
+  // 查询进度接口
+  getProgress(obj){
+    let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId;
+    return this.http.get<any>(url);
+  }
+
+  // 获取allotted-resource  能获取tp和pnf值
+  getAllottedResource(obj){
+    let params = new HttpParams({fromObject:obj});
+    let url = this.url.allottedResource;
+    return this.http.get<any>(url,{params});
+  }
+  //通过pnf值获取对应的domain （network-resource）
+  getPnfDetail(name){
+    let url = this.url.pnfDetail + name;
+    return this.http.get<any>(url);
+  }
+  //通过sotn 获取connectivity ，查找vpn-id
+  getSotnConnectivity(id){
+    let url = this.url.connectivity + id;
+    return this.http.get<any>(url);
+  }
+  //通过vpn-id 查找tp和pnf
+  getVpnBinding(id){
+    let url = this.url.vpnBinding + id;
+    return this.http.get<any>(url);
+  }
+  // 时间格式化 毫秒转正常值
+  dateformater(vmstime){
+    if(!vmstime){
+        return ''
+    }
+    let mstime = Number((vmstime + '').slice(0,13));  
+    let time = new Date(mstime);
+    let year = time.getFullYear();
+    let month = time.getMonth() + 1;
+    let day = time.getDate();
+    let hours = time.getHours();
+    let minutes = time.getMinutes();
+    let seconds = time.getSeconds();
+    let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+    return formattime;
+  }
+
+  // alarm表格数据
+  // getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){
+  //   return this.http.post<any>(this.url.alarmFormData,{
+  //     pageNumber:pageNumber,
+  //     pageSaze:pageSaze,
+  //     name:name,
+  //     Priority:Priority,
+  //     Status:Status,
+  //     Report:Report 
+  //   });
+  // }
+
+
+  getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){
+    return this.http.get<any>(this.url.alarmFormData+'?pageNumber='+pageNumber+'?pageSaze'+pageSaze+'?name'+name+'?Priority'+Priority+'?Status'+Status+'?Report'+Report);
+  }
+}
diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts
new file mode 100644
index 00000000..5e713d7f
--- /dev/null
+++ b/usecaseui-portal/src/app/networkHttpservice.service.ts
@@ -0,0 +1,99 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+interface tablelist {
+  total:number,
+  list:Object[]
+}
+interface d3list {
+  total:number,
+  list:Object[]
+}
+
+@Injectable()
+export class networkHttpservice {
+
+  constructor(private http:HttpClient) { }
+
+  baseUrl = "./assets/json/";
+  // list表格数据
+  getInstanceTableData(paramsObj){
+    let url = this.baseUrl + "instanceTableData.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<tablelist>(url,{params});
+  }
+  //d3数据
+  getNetworkD3Data(){
+    let url = this.baseUrl + "netWorkD3Data.json";
+    // let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url);
+  }
+  //初始化连线 logical-links
+  getLogicalLinksData(){
+    let url = this.baseUrl + "LogicalLinksData.json";
+    // let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url);
+  }
+  //查询指定的node对应的tp数据
+  getPInterfacesData1(paramsObj){
+    let url = this.baseUrl + "p_interfaces1.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  getPInterfacesData2(paramsObj){
+    let url = this.baseUrl + "p_interfaces2.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //创建连线接口
+  createLink(paramsObj){
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //查询指定的单个连接线 接口
+  querySpecificLinkInfo(paramsObj){
+    let url = this.baseUrl+ "specific_link _nfo.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+
+  //查询 外部云host this.url地址 接口
+  queryCloudUrl(paramsObj){
+    let url = this.baseUrl+ "url.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+
+  //创建外部云newwork接口
+  createNetwrok(paramsObj){
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //创建外部云pnf接口
+  createPnf(paramsObj){
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //创建外部云Tp接口
+  createTp(paramsObj,cloudNodeName){
+    console.log(cloudNodeName)
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //创建外部云link接口
+  createCloudLink(paramsObj){
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+  //删除连线
+  deleteLink(paramsObj){
+    let url = this.baseUrl+ "status.json";
+    let params = new HttpParams({fromObject:paramsObj});
+    return this.http.get<any>(url,{params});
+  }
+}
diff --git a/usecaseui-portal/src/app/networkHttpservice.service1.ts b/usecaseui-portal/src/app/networkHttpservice.service1.ts
new file mode 100644
index 00000000..edb4df7c
--- /dev/null
+++ b/usecaseui-portal/src/app/networkHttpservice.service1.ts
@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+
+@Injectable()
+export class networkHttpservice {
+
+  constructor(private http:HttpClient) { }
+
+  // baseUrl = "./assets/json/";//本地环境
+  // url={
+  //   "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
+  //   "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
+  //   "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
+  //   "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
+  //   "createLink":this.baseUrl + "status.json",
+  //   "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
+  //   "queryCloudUrl":this.baseUrl + "url.json",
+  //   "createNetwrok":this.baseUrl + "status.json",
+  //   "createPnf":this.baseUrl + "status.json",
+  //   "createTp":this.baseUrl + "status.json",
+  //   "createCloudLink":this.baseUrl + "status.json",
+  //   "createCloudUrl":this.baseUrl + "status.json",
+  //   "deleteLink":this.baseUrl + "status.json",
+  // };
+  // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
+  // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
+  baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
+  url={
+    "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
+    "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
+    "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
+    "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
+    "createLink":this.baseUrl + "createLink/",
+    "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
+    "queryCloudUrl":this.baseUrl + "getHostUrl/",
+    "createNetwrok":this.baseUrl + "createTopoNetwork/",
+    "createPnf":this.baseUrl + "createPnf/",
+    "createTp":this.baseUrl + "pnf/",
+    "createCloudLink":this.baseUrl + "createLink/",
+    "createCloudUrl":this.baseUrl + "createHostUrl/",
+    "deleteLink":this.baseUrl + "deleteLink/",
+  };
+  //d3数据
+  getNetworkD3Data(){
+    return this.http.get<any>(this.url["getNetworkD3Data"]);
+  }
+  //初始化连线 logical-links
+  getLogicalLinksData(){
+    return this.http.get<any>(this.url["getLogicalLinksData"]);
+  }
+  //查询指定的node对应的tp数据
+  getPInterfacesData1(paramsObj){
+    return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
+  }
+  getPInterfacesData2(paramsObj){
+    return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
+  }
+  //创建连线接口
+  createLink(paramsObj){
+    return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
+  }
+  //查询指定的单个连接线 接口
+  querySpecificLinkInfo(paramsObj){
+    return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
+  }
+  //查询 外部云host this.url地址 接口
+  queryCloudUrl(aaiId){
+    return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
+  }
+  //创建外部云newwork接口
+  createNetwrok(paramsObj){
+    return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
+  }
+  //创建外部云pnf接口
+  createPnf(paramsObj){
+    return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
+  }
+  //创建外部云Tp接口
+  createTp(paramsObj,cloudNodeName){
+    let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
+    return this.http.put<any>(this.url["createTp"]+str,paramsObj);
+  }
+  //创建外部云link接口
+  createCloudLink(paramsObj){
+    return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
+  }
+  //创建外部云host url接口
+  createCloudUrl(paramsObj){
+    return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
+  }
+  //删除连线
+  deleteLink(paramsObj){
+    let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
+    return this.http.delete<any>((this.url["deleteLink"]+str));
+  }
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
new file mode 100644
index 00000000..079a409c
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
@@ -0,0 +1,75 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.select {
+  margin-bottom: 20px;
+}
+.select span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.select nz-dropdown {
+  vertical-align: middle;
+}
+.select nz-dropdown :hover {
+  border-color: #147dc2;
+}
+.select nz-dropdown button {
+  width: 165px;
+  height: 30px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+  font-weight: 400;
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+}
+.select nz-dropdown button i {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.select .submit {
+  margin-left: 20px;
+  vertical-align: middle;
+  height: 30px;
+  padding: 0 10px;
+}
+.select .submit span {
+  color: #fff;
+  font-weight: 400;
+}
+.content {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 12px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
new file mode 100644
index 00000000..76d2485e
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
@@ -0,0 +1,79 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<!-- <h3 class="title">
+    <span (click)="performanceShow()" style="cursor:pointer;">Performance VM</span> 
+    <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> 
+    <span *ngIf="detailshow">> Details </span> 
+</h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+    <span>Source Name: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+            <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                <a>{{item}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+    &nbsp;&nbsp;
+    <span>ReportingEntityName: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+            <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList">
+                <a>{{item}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+    <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+</div>
+<div class="content" [@showHideAnimate]="state">
+    <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
+        <thead (nzSortChange)="sort($event)" nzSingleSort>
+            <tr>
+            <th nzWidth="5%">NO</th>
+            <th nzWidth="20%">Source Name</th>
+            <th nzWidth="20%">ReportingEntityName</th>
+            <th nzWidth="10%">Type</th>
+            <th nzWidth="15%">CPU</th>
+            <th nzWidth="10%">Memory</th>
+            <th nzWidth="10%">Disk</th>
+            <th nzWidth="10%">Action</th>
+            </tr>
+        </thead>
+        <tbody> -->
+            <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+            <!-- <tr *ngFor="let item of nzTable.data; let i = index; ">
+                <td>{{i+1}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.address}}</td>
+                <td>{{item.age}}</td>
+                <td>{{item.address}}</td>
+                <td>{{item.age}}</td>
+                <td>{{item.age}}</td>
+                <td><a (click)="graphicShow()">Delete</a></td>
+            </tr> -->
+            <!-- </ng-template> -->
+        <!-- </tbody>
+    </nz-table>
+</div>
+<div [@showHideAnimate]="state2">
+    <app-graphiclist  (detailData)="detailShow($event)"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+    <app-details [detailId]="detailId"></app-details>
+</div> -->
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
new file mode 100644
index 00000000..8a9005c5
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
@@ -0,0 +1,61 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.select {
+    margin-bottom: 20px;
+    span {
+        display: inline-block;
+        font: 700 14px "Arial";
+        color: #4c5e70;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        :hover{
+            border-color: #147dc2;
+        }
+        button {
+            width: 165px;
+            height: 30px;
+            background-color: #eceff4;
+            text-align: left;
+            border-color: #9fa9ab;
+            span {
+                font-weight: 400;
+                display: inline-block;
+                width: 120px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-top: 2px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+            }
+        }
+        //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+    }
+    .submit {
+        margin-left: 20px;
+        vertical-align: middle;       
+        height: 30px;
+        padding: 0 10px;
+        span {
+            color: #fff;
+            font-weight: 400;
+        }
+    }
+}
+.content {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 12px;
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
new file mode 100644
index 00000000..fd441da3
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceVmComponent } from './performance-vm.component';
+
+describe('PerformanceVmComponent', () => {
+  let component: PerformanceVmComponent;
+  let fixture: ComponentFixture<PerformanceVmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceVmComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceVmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
new file mode 100644
index 00000000..1fb099c9
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
@@ -0,0 +1,159 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../animates';
+
+@Component({
+  selector: 'app-performance-vm',
+  templateUrl: './performance-vm.component.html',
+  styleUrls: ['./performance-vm.component.less'],
+  animations: [ slideToRight, showHideAnimate ]
+})
+export class PerformanceVmComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  // 筛选框（下拉框）
+  sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+  sourceNameSelected = this.sourceNameList[0];
+  ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
+  ReportingEntityNameSelected = this.ReportingEntityNameList[0];  
+  choseSourceName(item){
+    console.log(item);
+    this.sourceNameSelected = item;
+  }
+  choseReportingEntityName(item){
+    console.log(item);
+    this.ReportingEntityNameSelected = item;
+  }
+
+  //表格数据
+  dataSet = [
+    {
+      name       : 'John Brown',
+      age        : 32,
+      expand     : false,
+      address    : 'New York No. 1',
+      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
+    },
+    {
+      name       : 'Aim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Xim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'cim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'bim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'aoe Black',
+      age        : 32,
+      expand     : false,
+      address    : 'Sidney No. 1',
+      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
+    }
+  ];
+  
+  //详情页标题显示
+  graphicshow = false;
+  detailshow = false;
+  // 显示隐藏动画
+  state = "show";
+  state2 = "hide";
+  state3 = "hide";
+  performanceShow() {
+    this.state = 'show';
+    this.state2 = 'hide';
+    this.state3 = 'hide';
+    this.graphicshow = false;
+    this.detailshow = false;
+  }
+  graphicShow() {
+    this.state = 'hide';
+    this.state2 = 'show';
+    this.state3 = 'hide';
+    this.graphicshow = true;
+    this.detailshow = false;
+  }
+  // 选中id
+  detailId:number;
+  detailShow(prems) {
+    this.state = 'hide';
+    this.state2 = 'hide';
+    this.state3 = 'show';
+    this.graphicshow = true;
+    this.detailshow = true;
+    console.log(prems);
+    this.detailId = prems.id;
+  }
+
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
new file mode 100644
index 00000000..4ed015fe
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
@@ -0,0 +1,126 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.select {
+  margin-bottom: 20px;
+}
+.select span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.select nz-dropdown {
+  vertical-align: middle;
+}
+.select nz-dropdown :hover {
+  border-color: #147dc2;
+}
+.select nz-dropdown button {
+  width: 165px;
+  height: 30px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+  font-weight: 400;
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+}
+.select nz-dropdown button i {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.select .submit {
+  margin-left: 20px;
+  vertical-align: middle;
+  height: 30px;
+  padding: 0 10px;
+}
+.select .submit span {
+  color: #fff;
+  font-weight: 400;
+}
+.content {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 12px;
+}
+.content .vnfs {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.content .vnfs .vnf {
+  width: 18%;
+  height: 200px;
+  margin: 5px;
+  padding: 20px;
+  border-radius: 2px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s linear;
+}
+.content .vnfs .vnf:hover {
+  background-color: #f5f5f5;
+  transform: scale(1.02);
+}
+.content .vnfs .vnf h3 {
+  font-size: 14px;
+  color: #3fa8eb;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0;
+}
+.content .vnfs .vnf .intro {
+  text-align: left;
+  font-size: 12px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.content .vnfs .empty {
+  width: 18%;
+  height: 200px;
+  margin: 5px;
+  border-radius: 2px;
+}
+.content .pages {
+  height: 25px;
+  margin: 20px 10px;
+  position: relative;
+}
+.content .pages nz-pagination {
+  float: right;
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
new file mode 100644
index 00000000..0b398703
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
@@ -0,0 +1,64 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title">
+    <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span> 
+    <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> 
+    <span *ngIf="detailshow">> Details </span> 
+</h3>
+<hr>
+<div class="select" [@showHideAnimate]="state">
+    <span>Source Name: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+            <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                <a>{{item}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+    &nbsp;&nbsp;
+    <span>ReportingEntityName: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+            <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList">
+                <a>{{item}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+    <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+</div>
+<div class="content" [@showHideAnimate]="state">
+    <div class="vnfs">
+        <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()">
+            <img src="../../../assets/images/VNF3.png" alt="VNF3">
+            <h3>Mfvs_MMEManaxxdeafsfdf</h3>
+            <div class="intro">
+                Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag
+            </div>
+        </div>
+        <div class="empty" *ngFor="let empty of emptys"></div>   
+    </div>
+    <div class="pages">
+        <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
+    </div>
+</div>
+<div [@showHideAnimate]="state2">
+    <app-graphiclist  (detailData)="detailShow($event)"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+    <app-details [detailId]="detailId"></app-details>
+</div>
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
new file mode 100644
index 00000000..977ef5c0
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
@@ -0,0 +1,115 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.select {
+    margin-bottom: 20px;
+    span {
+        display: inline-block;
+        font: 700 14px "Arial";
+        color: #4c5e70;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        :hover{
+            border-color: #147dc2;
+        }
+        button {
+            width: 165px;
+            height: 30px;
+            background-color: #eceff4;
+            text-align: left;
+            border-color: #9fa9ab;
+            span {
+                font-weight: 400;
+                display: inline-block;
+                width: 120px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-top: 2px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+            }
+        }
+        //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+    }
+    .submit {
+        margin-left: 20px;
+        vertical-align: middle;       
+        height: 30px;
+        padding: 0 10px;
+        span {
+            color: #fff;
+            font-weight: 400;
+        }
+    }
+}
+
+.content {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 12px;
+    .vnfs {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        .vnf {
+            // width: 180px;
+            width: 18%;
+            height: 200px;
+            margin: 5px;
+            padding: 20px;
+            border-radius: 2px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s linear;
+            &:hover {
+                background-color: #f5f5f5; 
+                transform: scale(1.02);       
+            }
+            h3 {
+                font-size: 14px;
+                color: #3fa8eb;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: 0;
+            }
+            .intro {
+                text-align: left;
+                font-size: 12px;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                word-wrap:break-word;
+                word-break:break-all;
+            }
+        }
+        .empty {
+            // width: 180px;
+            width: 18%;
+            height: 200px;
+            margin: 5px;
+            border-radius: 2px;
+        }
+    }
+    .pages {
+        height: 25px;
+        margin: 20px 10px;
+        position: relative;
+        nz-pagination {
+            float: right;
+        }
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts
new file mode 100644
index 00000000..c535b737
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceVnfComponent } from './performance-vnf.component';
+
+describe('PerformanceVnfComponent', () => {
+  let component: PerformanceVnfComponent;
+  let fixture: ComponentFixture<PerformanceVnfComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceVnfComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceVnfComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
new file mode 100644
index 00000000..d2e8d991
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
@@ -0,0 +1,92 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../animates';
+
+@Component({
+  selector: 'app-performance-vnf',
+  templateUrl: './performance-vnf.component.html',
+  styleUrls: ['./performance-vnf.component.less'],
+  animations: [ slideToRight, showHideAnimate ]
+})
+export class PerformanceVnfComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+  constructor() { }
+
+  ngOnInit() {
+    let _this = this;
+    setTimeout(function(){
+      // 在路由切换时加载图片造成动画卡顿，先完成动画再加载图片
+      _this.vnfsData = [    
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"},
+        {name:"aaa",text:"oahgieango"}
+      ];
+      _this.emptys = new Array(15-_this.vnfsData.length);
+    },300)
+  }
+
+  // 筛选框（下拉框）
+  sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+  sourceNameSelected = this.sourceNameList[0];
+  ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
+  ReportingEntityNameSelected = this.ReportingEntityNameList[0];  
+  choseSourceName(item){
+    console.log(item);
+    this.sourceNameSelected = item;
+  }
+  choseReportingEntityName(item){
+    console.log(item);
+    this.ReportingEntityNameSelected = item;
+  }
+
+  submit(){
+    
+  }
+  // vnfs数据
+  vnfsData = [];
+  emptys = []; //补空盒子用
+  // 分页 
+  current = 1;  //当前页码
+
+  //详情页标题显示
+  graphicshow = false;
+  detailshow = false;
+  // 显示隐藏动画
+  state = "show";
+  state2 = "hide";
+  state3 = "hide";
+  performanceShow() {
+    this.state = 'show';
+    this.state2 = 'hide';
+    this.state3 = 'hide';
+    this.graphicshow = false;
+    this.detailshow = false;
+  }
+  graphicShow() {
+    this.state = 'hide';
+    this.state2 = 'show';
+    this.state3 = 'hide';
+    this.graphicshow = true;
+    this.detailshow = false;
+  }
+  // 选中id
+  detailId:number;
+  detailShow(prems) {
+    this.state = 'hide';
+    this.state2 = 'hide';
+    this.state3 = 'show';
+    this.graphicshow = true;
+    this.detailshow = true;
+    console.log(prems);
+    this.detailId = prems.id;
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.css b/usecaseui-portal/src/app/performance/performance.component.css
new file mode 100644
index 00000000..cf63a829
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.css
@@ -0,0 +1,26 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.html b/usecaseui-portal/src/app/performance/performance.component.html
new file mode 100644
index 00000000..c092e876
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.html
@@ -0,0 +1,17 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> Performance </h3>
+<hr>
diff --git a/usecaseui-portal/src/app/performance/performance.component.less b/usecaseui-portal/src/app/performance/performance.component.less
new file mode 100644
index 00000000..2b1949a5
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.less
@@ -0,0 +1,11 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance.component.spec.ts b/usecaseui-portal/src/app/performance/performance.component.spec.ts
new file mode 100644
index 00000000..1bdc919d
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceComponent } from './performance.component';
+
+describe('PerformanceComponent', () => {
+  let component: PerformanceComponent;
+  let fixture: ComponentFixture<PerformanceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/performance/performance.component.ts b/usecaseui-portal/src/app/performance/performance.component.ts
new file mode 100644
index 00000000..12405e9e
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-performance',
+  templateUrl: './performance.component.html',
+  styleUrls: ['./performance.component.less']
+})
+export class PerformanceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+
+  }
+
+}
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
new file mode 100644
index 00000000..a1cc6455
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
@@ -0,0 +1,59 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.list {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 10px;
+}
+.list nz-table tbody td span.onboarding {
+  font-size: 12px;
+  color: #147dc2;
+}
+.list nz-table tbody td span.onboarded {
+  font-size: 14px;
+  color: #147dc2;
+}
+.list nz-table tbody td span.updating {
+  font-size: 12px;
+  color: blue;
+}
+.list nz-table tbody td span.deleting {
+  font-size: 12px;
+  color: red;
+}
+.list nz-table tbody td span.invalid {
+  font-size: 14px;
+  color: purple;
+}
+.list nz-table tbody td i.anticon {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px;
+}
+.list nz-table tbody td i.anticon:hover {
+  color: #147dc2;
+}
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
new file mode 100644
index 00000000..d5286a3a
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -0,0 +1,61 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> Onboard VNF </h3>
+<hr>
+<div class="list">
+    <nz-table #nzTable [nzData]="tableData" 
+        nzShowSizeChanger
+        [nzFrontPagination]="false" 
+        [nzShowQuickJumper]="true" 
+        [nzPageSizeOptions]="[5,10,15,20]" 
+        [nzTotal]= 'total'
+        [(nzPageSize)]="pageSize" 
+        [(nzPageIndex)]='pageIndex'
+        [nzLoading]="loading"
+        nzSize="middle"
+        (nzPageIndexChange)="searchData()"
+        (nzPageSizeChange)="searchData(true)">
+        <thead (nzSortChange)="sort($event)" nzSingleSort>
+            <tr>
+            <th nzWidth="5%">NO</th>
+            <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+            <th nzWidth="20%">Type</th>
+            <th nzWidth="15%">Version</th>
+            <th nzWidth="20%">Status</th>
+            <th nzWidth="15%">Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+            <tr *ngFor="let item of nzTable.data; let i = index; ">
+                <td>{{i+1}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.type}}</td>
+                <td>{{item.version}}</td>
+                <td>
+                    <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                    <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                </td>
+                <td>
+                    <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
+                    <i class="anticon anticon-delete" (click)="deleteService()"></i>
+                </td>
+            </tr>
+            <!-- </ng-template> -->
+        </tbody>
+    </nz-table>
+</div>
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
new file mode 100644
index 00000000..ab118737
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -0,0 +1,50 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.list {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    nz-table {
+        tbody {
+            td {
+                span.onboarding {
+                    font-size: 12px;
+                    color: #147dc2;
+                }
+                span.onboarded {
+                    font-size: 14px;
+                    color: #147dc2;
+                }
+                span.updating {
+                    font-size: 12px;
+                    color: blue;
+                }
+                span.deleting {
+                    font-size: 12px;
+                    color: red;
+                }
+                span.invalid {
+                    font-size: 14px;
+                    color: purple;
+                }
+                i.anticon {
+                    cursor: pointer;
+                    font-size: 18px;
+                    padding: 2px;
+                    &:hover{
+                        color: #147dc2;
+                    }
+                }
+            }
+        }
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
new file mode 100644
index 00000000..0e49f656
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OnboardVnfVmComponent } from './onboard-vnf-vm.component';
+
+describe('OnboardVnfVmComponent', () => {
+  let component: OnboardVnfVmComponent;
+  let fixture: ComponentFixture<OnboardVnfVmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OnboardVnfVmComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OnboardVnfVmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
new file mode 100644
index 00000000..c42b3ce3
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+import { slideToRight } from '../../animates';
+
+@Component({
+  selector: 'app-onboard-vnf-vm',
+  templateUrl: './onboard-vnf-vm.component.html',
+  styleUrls: ['./onboard-vnf-vm.component.less'],
+  animations: [ slideToRight ]
+})
+export class OnboardVnfVmComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+  constructor(private myhttp: MyhttpService) { }
+
+  ngOnInit() {
+    this.getTableData();
+  }
+
+
+  //表格数据
+  tableData = [];
+  pageIndex = 1;
+  pageSize = 10;
+  total = 100;
+  loading = false;
+  sortName = null;
+  sortValue = null;
+  getTableData(){
+    // 查询参数: 当前页码，每页条数，排序方式
+    let paramsObj = {
+      pageIndex:this.pageIndex,
+      pageSize:this.pageSize,
+      nameSort:this.sortValue
+    }
+    this.myhttp.getOnboardTableData(paramsObj)
+      .subscribe((data)=>{
+        console.log(data);
+        this.total = data.body.total;
+        this.tableData = data.body.tableList;
+      },(err)=>{
+        console.log(err);
+      })
+  }
+  sort(sort: { key: string, value: string }): void {
+    console.log(sort);
+    this.sortName = sort.key;
+    this.sortValue = sort.value;
+    this.getTableData();
+  }
+  searchData(reset:boolean = false){
+    console.log(reset)
+    this.getTableData();
+  }
+  updataService(){
+    console.log("updataService!");
+  }
+  deleteService(){
+    console.log("deleteService!");
+  }
+
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
new file mode 100644
index 00000000..eaf8fddb
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css
@@ -0,0 +1,132 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.action {
+  margin-bottom: 20px;
+}
+.action span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.action nz-dropdown {
+  vertical-align: middle;
+}
+.action nz-dropdown :hover {
+  border-color: #147dc2;
+}
+.action nz-dropdown button {
+  width: 165px;
+  height: 30px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #9fa9ab;
+}
+.action nz-dropdown button span {
+  font-weight: 400;
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 2px;
+}
+.action nz-dropdown button i {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.action .create {
+  float: right;
+  height: 30px;
+  padding: 0 10px;
+}
+.action .create span {
+  color: #fff;
+  font-weight: 400;
+}
+.list {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 10px;
+}
+.list nz-table tbody td span.active {
+  font-size: 14px;
+  color: #147dc2;
+}
+.list nz-table tbody td span.closed {
+  font-size: 14px;
+  color: red;
+}
+.list nz-table tbody td span.onboarding {
+  font-size: 12px;
+  color: #147dc2;
+}
+.list nz-table tbody td span.updating {
+  font-size: 12px;
+  color: blue;
+}
+.list nz-table tbody td span.deleting {
+  font-size: 12px;
+  color: red;
+}
+.list nz-table tbody td span.creating {
+  font-size: 12px;
+  color: green;
+}
+.list nz-table tbody td i.anticon {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px;
+}
+.list nz-table tbody td i.anticon:hover {
+  color: #147dc2;
+}
+.list nz-table tbody tr.childtr td {
+  font-size: 12px;
+  color: #147dc2;
+}
+.detailComponent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #f3f3f3;
+  overflow-y: auto;
+  padding: 20px 32px;
+  z-index: 3;
+}
+.createComponent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #f3f3f3;
+  overflow-y: auto;
+  padding: 20px 32px;
+  z-index: 3;
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
new file mode 100644
index 00000000..e0866524
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -0,0 +1,185 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="action">
+  <span>Customer: </span>
+  <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+    <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button>
+    <ul nz-menu style="max-height: 200px; overflow: auto;">
+      <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
+        <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+      </li>
+    </ul>
+  </nz-dropdown>
+  
+  &nbsp;&nbsp;
+  <span>Service Type: </span>
+  <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+    <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i></button>
+    <ul nz-menu style="max-height: 200px; overflow: auto;">
+      <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
+        <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+      </li>
+    </ul>
+  </nz-dropdown>
+
+  <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+  <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+    <p>Content one</p>
+    <p>Content two</p>
+    <p>Content three</p>
+  </nz-modal>
+  <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+  <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
+    <span style="display:inline-block;width:70px;">Service: </span>
+    <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
+      <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
+      <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
+      <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
+    </nz-select>
+
+    <hr>
+    <span>SOTN VPN: </span>
+    <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
+      <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+    </nz-select>
+
+    <span> SITE: </span>
+    <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
+      <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+    </nz-select>
+    
+    <div *ngIf="templateTypeSelected == 'CCVPN'">
+      <br>
+      <span style="display:inline-block;width:70px;">SD-WAN: </span>
+      <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
+        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+      </nz-select>
+    </div>
+  </nz-modal>
+</div>
+<div class="list">
+    <nz-table *ngIf="1"
+      #nzTable [nzData]="tableData" 
+      nzShowSizeChanger 
+      [nzFrontPagination]="false" 
+      [nzShowQuickJumper]="true" 
+      [nzPageSizeOptions]="[5,10,15,20]" 
+      [nzTotal]= 'total'
+      [(nzPageSize)]="pageSize" 
+      [(nzPageIndex)]='pageIndex'
+      [nzLoading]="loading"
+      [nzSize]="'middle'"
+      [nzScroll]="{ y: '58vh' }"
+      (nzPageIndexChange)="searchData()"
+      (nzPageSizeChange)="searchData(true)">
+      <thead (nzSortChange)="sort($event)" nzSingleSort>
+        <tr>
+          <th nzWidth="5%">NO</th>
+          <th nzWidth="5%"></th>
+          <th nzWidth="20%" nzShowSort nzSortKey="name">Service Instance Id</th>
+          <th nzWidth="20%">Name</th>
+          <th nzWidth="15%">Type</th>
+          <th nzWidth="20%">Status</th>
+          <th nzWidth="15%">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
+          <tr>
+            <td>{{i+1}}</td>
+            <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
+            <td>{{data.serviceId}}</td>
+            <td>{{data.name}}</td>
+            <td>{{data.type}}</td>
+            <td>
+              <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
+                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span>
+              <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+            </td>
+            <td>
+              <i class="anticon anticon-setting" (click)="scaleService()"></i>
+              <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
+              <i class="anticon anticon-delete" (click)="deleteService()"></i>
+            </td>
+          </tr>
+          <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+            <td></td>
+            <td></td>
+            <td>{{item.serviceId}}</td>
+            <td>{{item.name}}</td>
+            <td colspan="3">{{item.type}}</td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </nz-table>
+    <nz-table *ngIf="1"
+        #nzTable2 [nzData]="tableData2" 
+        nzShowSizeChanger
+        [nzFrontPagination]="true" 
+        [nzShowQuickJumper]="true" 
+        [nzPageSizeOptions]="[5,10,15,20]" 
+        [(nzPageSize)]="pageSize" 
+        [(nzPageIndex)]='pageIndex'
+        nzSize="middle"
+        [nzScroll]="{ y: '58vh' }">
+        <thead nzSingleSort>
+          <tr>
+            <th nzWidth="5%">NO.</th>
+            <th nzWidth="20%"> Instance ID </th>
+            <th nzWidth="20%">Instance Name</th>
+            <!-- <th nzWidth="10%">Type</th> -->
+            <th nzWidth="25%">Description</th>
+            <th nzWidth="15%">Status</th>
+            <th nzWidth="10%">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+            <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
+            <tr *ngFor="let item of nzTable2.data; let i = index; ">
+                <td>{{pageSize*(pageIndex-1) + i+1}}</td>
+                <td>{{item.sotnvpnSer['service-instance-id']}}</td>
+                <td>{{item.sotnvpnSer['service-instance-name']}}</td>
+                <!-- <td>{{item.type}}</td> -->
+                <td>{{item.sotnvpnSer.description}}</td>
+                <td>
+                    <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
+                    <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
+                    <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
+                </td>
+                <td>
+                    <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+                      (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+                    <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+                      (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
+                </td>
+            </tr>
+            <!-- </ng-template> -->
+        </tbody>
+    </nz-table>
+</div>
+
+<div class="detailComponent" *ngIf="detailshow">
+  <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail>
+</div>
+<div class="createComponent" *ngIf="createshow">
+  <app-ccvpn-creation 
+    [createParams]="createData" 
+    [namesTranslate]="namesTranslate" 
+    (closeCreate)="closeCreate($event)">
+  </app-ccvpn-creation>
+</div>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
new file mode 100644
index 00000000..7e8ff80e
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -0,0 +1,127 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.action {
+    margin-bottom: 20px;
+    span {
+        display: inline-block;
+        font: 700 14px "Arial";
+        color: #4c5e70;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        :hover{
+            border-color: #147dc2;
+        }
+        button {
+            width: 165px;
+            height: 30px;
+            background-color: #eceff4;
+            text-align: left;
+            border-color: #9fa9ab;
+            span {
+                font-weight: 400;
+                display: inline-block;
+                width: 120px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-top: 2px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+            }
+        }
+        //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+    }
+    .create {
+        float: right;
+        height: 30px;
+        padding: 0 10px;
+        span {
+            color: #fff;
+            font-weight: 400;
+        }
+    }
+}
+.list {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    nz-table {
+        tbody {
+            td {
+                span.active {
+                    font-size: 14px;
+                    color: #147dc2;
+                }
+                span.closed {
+                    font-size: 14px;
+                    color: red;
+                }
+                span.onboarding{
+                    font-size: 12px;
+                    color: #147dc2;
+                }
+                span.updating{
+                    font-size: 12px;
+                    color: blue;
+                }
+                span.deleting {
+                    font-size: 12px;
+                    color: red;
+                }
+                span.creating {
+                    font-size: 12px;
+                    color: green;
+                }
+                i.anticon {
+                    cursor: pointer;
+                    font-size: 18px;
+                    padding: 2px;
+                    &:hover{
+                        color: #147dc2;
+                    }
+                }
+            }
+            tr.childtr {
+                td {
+                    font-size: 12px;
+                    color: #147dc2;
+                }
+            }
+        }
+    }
+}
+
+.detailComponent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #f3f3f3;
+    overflow-y: auto;
+    padding: 20px 32px;
+    z-index: 3;
+}
+.createComponent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #f3f3f3;
+    overflow-y: auto;
+    padding: 20px 32px;
+    z-index: 3;
+}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
new file mode 100644
index 00000000..61440dc3
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesListComponent } from './services-list.component';
+
+describe('ServicesListComponent', () => {
+  let component: ServicesListComponent;
+  let fixture: ComponentFixture<ServicesListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicesListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
new file mode 100644
index 00000000..d893070d
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -0,0 +1,511 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+import { slideToRight } from '../../animates';
+import { NzModalService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-services-list',
+  templateUrl: './services-list.component.html',
+  styleUrls: ['./services-list.component.less'],
+  animations: [ slideToRight ]
+})
+export class ServicesListComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+  constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
+
+  ngOnInit() {
+    this.getallCustomers();
+    this.getTemplateSubTypes();
+    this.inputNamests();
+  }
+  // 筛选框（下拉框）customer servicetype
+  customerList = [];
+  customerSelected = {name:null,id:null};
+  serviceTypeList = [];
+  serviceTypeSelected = {name:null,id:null};
+
+  // 获取所有customer
+  getallCustomers(){
+    this.myhttp.getAllCustomers()
+      .subscribe((data)=>{
+        this.customerList = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}});
+        this.customerSelected = this.customerList[0];
+        this.choseCustomer(this.customerSelected);
+        // console.log(this.customers)
+      })
+  }
+
+  choseCustomer(item){
+    this.customerSelected = item;
+    this.myhttp.getServiceTypes(this.customerSelected)
+      .subscribe((data)=>{
+        this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}});
+        this.serviceTypeSelected = this.serviceTypeList[0];
+        this.choseServiceType(this.serviceTypeSelected);
+        // console.log(this.listServiceTypes);
+      })
+  }
+  choseServiceType(item){
+    this.serviceTypeSelected = item;
+    this.getTableData();
+  }
+
+  // 模态框（对话框） create
+  isVisible = false;
+  showModal(): void {
+    this.isVisible = true;
+  }
+  handleOk(): void {
+    console.log('Button ok clicked!');
+    this.isVisible = false;
+  }
+  handleCancel(): void {
+    console.log('Button cancel clicked!');
+    this.isVisible = false;
+    this.isVisible2 = false;
+  }
+
+  // 创建模态框2（对话框） create -------------------------------
+  isVisible2 = false;
+  showModal2(): void {
+    this.isVisible2 = true;
+    this.templates1 = [];  //多次创建会push累积名字，从新置空
+    this.templates2 = [];
+    this.templates3 = [];
+    this.getAlltemplates();
+  }
+  // 服务
+  templateTypeSelected = "SOTN";
+  choseTemplateType(){
+    // this.filterTemplates();//分类
+  }
+  // 模板
+  templates = []; templates1;templates2;templates3;
+    template1={name:null};
+    template2={name:null};
+    template3={name:null};
+  // 模板分类数据,创建、获取实例分类共用
+  templateSubTypes = {};  //子类，sotnvpn、site、sdwan
+  getTemplateSubTypes(){
+    this.myhttp.getServicesCategory()
+      .subscribe((data)=>{
+        this.templateSubTypes = data;
+      },(err)=>{
+        console.log("getTemplateTypes err")
+      })
+  }
+
+  getAlltemplates(){  //获取所有模板类型
+    this.myhttp.getAllServiceTemplates()
+      .subscribe((data)=>{
+        console.log(data)
+        this.templates = data;
+        this.template1 = data[0];
+        this.template2 = data[1];
+        this.template3 = data[2];
+        // this.filterTemplates();//分类
+      },(err)=>{
+
+      })
+  }
+  // filterTemplates(){ //模板类型分类，本地配置文件
+  //     this.templates1 = [];
+  //     this.templates2 = [];
+  //     this.templates3 = [];
+  //     this.templates.forEach((item)=>{
+  //       this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{
+  //         return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
+  //       })?this.templates1.push(item):null;
+  //       this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{
+  //         return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
+  //       })?this.templates2.push(item):null;
+  //       if(this.templateTypeSelected=="CCVPN"){
+  //         this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{
+  //           return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID 
+  //         })?this.templates3.push(item):null;
+  //       }
+  //     })
+  //     this.template1 = this.templates1[0];
+  //     this.template2 = this.templates2[0];
+  //     if(this.templates3[0]){
+  //       this.template3 = this.templates3[0];
+  //     } 
+  // }
+
+
+  // 确定、取消
+  createshow = false;
+  createData:Object={};
+  handleOk2(): void {
+    console.log('Button ok clicked!');
+    this.isVisible2 = false;
+    let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
+    let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+    
+    this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
+    this.createshow = true;
+  }
+  // handleCancel(): void {
+  //   console.log('Button cancel clicked!');
+  //   this.isVisible2 = false;
+  // }
+
+
+  //表格数据
+  tableData = [];
+  pageIndex = 1;
+  pageSize = 10;
+  total = 100;
+  loading = false;
+  sortName = null;
+  sortValue = null;
+  getTableData(){
+    // 查询参数: customer serviceType 当前页码，每页条数，排序方式
+    let paramsObj = {
+      customer:this.customerSelected,
+      serviceType:this.serviceTypeSelected,
+      pageIndex:this.pageIndex,
+      pageSize:this.pageSize,
+      serviceIdSort:this.sortValue
+    }
+    this.myhttp.getServicesTableData(paramsObj)
+      .subscribe((data)=>{
+        console.log(data);
+        this.total = data.body.total;
+        this.tableData = data.body.tableList;
+      },(err)=>{
+        console.log(err);
+      })
+  }
+  sort(sort: { key: string, value: string }): void {
+    console.log(sort);
+    this.sortName = sort.key;
+    this.sortValue = sort.value;
+    this.getTableData();
+  }
+  searchData(reset:boolean = false){
+    console.log(reset)
+    this.getTableData();
+  }
+
+  scaleService(){
+    console.log("scaleService!");
+  }
+  updataService(){
+    console.log("updataService!");
+  }
+  deleteService(){
+    console.log("deleteService!");
+  }
+
+  //表格数据
+  tableData2 = [];
+  getTableData2(){
+    let params = {
+      customerId:this.customerSelected.id,
+      serviceType:this.serviceTypeSelected
+    }
+    this.myhttp.getInstanceTableData(params)
+      .subscribe((data)=>{
+        this.pageIndex = 1;
+        this.tableData2 = [];
+        console.log(data)
+        // data.results.forEach((item)=>{ 
+        //   item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{ 
+        //     return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ 
+        //       return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+        //     })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ 
+        //       return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+        //     })?item["Type"]="CCVPN":null
+        //   })
+
+        //   if(item["sotnvpnSer"]){
+        //     this.tableData2.push(item);
+        //   }
+        // })
+
+        //---------数据结构有问题，模拟只有一组数据情况---------//
+        data["sotnvpnSer"] = data["service-instance"].find((d)=>{ 
+          return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ 
+            return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+          })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ 
+            return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
+          })?d["Type"]="CCVPN":null
+        })
+        let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs;
+        let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")});
+        data["sotnvpnSer"]["description"] = inputParams[descriptionName];
+        data["sotnvpnSer"]["status"] = "Active";
+        this.tableData2.push(data);
+
+        console.log(this.tableData2)
+      },(err)=>{
+        console.log(err);
+      })
+  }
+
+  // 显示详情
+  detailshow = false;
+  detailData:Object;
+  showDetail(service){
+    service["siteSer"]=[];
+    service["sdwanSer"]=[];
+    service["customer"]=this.customerSelected;
+    service["serviceType"] = this.serviceTypeSelected;
+    // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{
+    //   this.templateSubTypes[service.Type].site.find((d)=>{
+    //     return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
+    //   })?service["siteSer"].push(item):null;
+    //   if(service.Type=="CCVPN"){
+    //     this.templateSubTypes[service.Type].sdwan.find((d)=>{
+    //       return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
+    //     })?service["sdwanSer"].push(item):null;
+    //   }
+    // })
+    service["service-instance"].forEach((item)=>{
+      this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{
+        return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
+      })?service["siteSer"].push(item):null;
+      if(service.sotnvpnSer.Type=="CCVPN"){
+        this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{
+          return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] 
+        })?service["sdwanSer"].push(item):null;
+      }
+    })
+    this.detailshow = true;
+    this.detailData = service;
+    console.log(service);
+  }
+  // 删除 确认模态框
+  deleteInstace(service){
+    // 创建确认框
+    this.modalService.confirm({
+      nzTitle     : 'Are you sure delete this instance?',
+      nzContent   : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`,
+      nzOkText    : 'Yes',
+      nzOkType    : 'danger',
+      nzOnOk      : () => {
+        console.log(service);
+        let allprogress = {};  //所有进度值，以operationId为键
+        let querypros = [];  //所有查询
+        service.sotnvpnSer.rate = 0;
+        service.sotnvpnSer.status = "deleting";
+        // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{
+        //   let id = item["service-instance-id"];
+        //   return new Promise((res,rej)=>{
+        //     this.myhttp.deleteInstance(id)
+        //     .subscribe((data)=>{
+        //       let obj = {serviceId:id,operationId:data.operationId}
+        //       let updata = (prodata)=>{
+        //         allprogress[prodata.operationId] = prodata.progress;
+        //         let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+        //         service.sotnvpnSer["rate"]=average;
+        //       }
+        //       querypros.push(this.queryProgress(obj,updata));
+        //       res();
+        //     })
+        //   })  
+        // })
+        let deletePros = service["service-instance"].map((item)=>{
+          let params = {
+            globalSubscriberId:this.customerSelected.id,
+            serviceType:this.serviceTypeSelected,
+            serviceInstanceId:item["service-instance-id"]
+          }
+          return new Promise((res,rej)=>{
+            this.myhttp.deleteInstance(params)
+            .subscribe((data)=>{
+              let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
+              let updata = (prodata)=>{
+                allprogress[prodata.operationId] = prodata.progress;
+                let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+                service.sotnvpnSer["rate"]=average;
+              }
+              querypros.push(this.queryProgress(obj,updata));
+              res();
+            })
+          })  
+        })
+        console.log(deletePros)
+        Promise.all(deletePros).then(()=>{
+          Promise.all(querypros).then((data)=>{
+            console.log(data);
+            service.sotnvpnSer.rate = 100;
+            service.sotnvpnSer.status = "deleted";
+            setTimeout(()=>{
+              this.getTableData();
+            },1000)
+          })
+        })
+
+      },
+      nzCancelText: 'No',
+      nzOnCancel  : () => console.log('Cancel')
+    });
+  }
+
+
+  closeCreate(obj){
+    if(!obj){
+      this.createshow = false; //关闭创建窗口
+      return false;
+    }
+    this.createshow = false; //关闭创建窗口
+    console.log(obj);
+    let newData; //主表格中新创建的服务数据
+    let stageNum = 0; //不同阶段进度，用于后续服务进度相加；
+    // --------------------------------------------------------------------------
+        // obj.groupbody.map((group)=>{  //所有创建
+        //   return this.createService(group)
+        // })
+        // obj.sitebody.map((group)=>{  //所有创建
+        //   console.log(group)
+        //   return this.createService(group)
+        // })
+    // -----------------------------------------------------------------------------
+    this.createService(obj.vpnbody).then((data)=>{
+      console.log(data)
+      newData = {  //主表格中新创建的服务数据
+        'service-instance-id':data["serviceId"],
+        'service-instance-name':obj.vpnbody.service.name,
+        description:obj.vpnbody.service.description,
+        status:"creating",
+        rate:0,
+      }
+      this.tableData2 = [{sotnvpnSer:newData},...this.tableData2];
+      let updata = (prodata)=>{
+        newData.rate = Math.floor(prodata.progress/3);   
+      }
+      let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+      return this.queryProgress(queryParams,updata);
+    }).then((data)=>{
+      console.log(data);
+      stageNum = newData.rate; //阶段进度值更新；
+      let allprogress = {};  //所有进度值，以operationId为键
+      let querypros = [];  //所有查询
+      let createPros = obj.groupbody.map((group)=>{  //所有创建
+        return this.createService(group).then((data)=>{
+          console.log(data);
+          let updata = (prodata)=>{
+            allprogress[prodata.operationId] = prodata.progress;
+            let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) 
+            newData.rate = Math.floor(average/3) + stageNum;
+          }
+          let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+          querypros.push(this.queryProgress(queryParams,updata))
+        })
+      })
+
+      return new Promise((res)=>{
+        Promise.all(createPros).then(()=>{  //所有创建好之后querypros中查询进度才全都添加完毕
+          Promise.all(querypros).then((data)=>{
+            console.log(data);
+            res("site--begin");
+          })
+        }) 
+      })
+    }).then((data)=>{
+      console.log(data);
+      stageNum = newData.rate; //阶段进度值更新；
+      let allprogress = {};
+      let querypros = [];  //所有查询
+      let createPros = obj.sitebody.map((group)=>{  //所有创建
+        return this.createService(group).then((data)=>{
+          console.log(data);
+          let updata = (prodata)=>{
+            allprogress[prodata.operationId] = prodata.progress;
+            let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) 
+            newData.rate = Math.floor(average/3) + stageNum;
+          }
+          let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+          querypros.push(this.queryProgress(queryParams,updata))
+        })
+      })
+      console.log(createPros);
+      Promise.all(createPros).then(()=>{  //所有创建好之后querypros中查询进度才全都添加完毕
+        Promise.all(querypros).then((data)=>{
+          console.log(data);
+          newData.rate = 100;
+          newData.status = "completed";
+          setTimeout(()=>{
+            this.getTableData();
+          },1000)
+        })
+      }) 
+    })
+
+  }
+
+  createService(params){
+    let mypromise = new Promise((res,rej)=>{
+      this.myhttp.createInstance(params)
+        .subscribe((data)=>{
+          
+          res(data.service);
+        })
+    })
+    return mypromise;
+  }
+ 
+  queryProgress(obj,callback){
+    let mypromise = new Promise((res,rej)=>{
+      // let data = {
+      //   operationStatus:{
+      //     "operationId": "XXXXXX",
+      //     "operation": "create|delete|update|scale",
+      //     "result": "finished|error|processing",
+      //     "reason": "",
+      //     "userId": "",
+      //     "operationContent": "Be creating pop.",
+      //     "progress": 0,
+      //     "operateAt": "",
+      //     "finishedAt": "" 
+      //   }
+      // }
+      let requery = ()=>{
+        this.myhttp.getProgress(obj)
+          .subscribe((data)=>{
+            if(data.operationStatus.progress==undefined){
+              console.log(data);
+              setTimeout(()=>{
+                requery();
+              },5000)
+              return false;
+            }
+            if(data.operationStatus.progress < 100){
+              callback(data.operationStatus);
+              setTimeout(()=>{
+                requery();
+              },5000)
+            }else {
+              res(data.operationStatus);
+            }     
+          })
+        // setTimeout(()=>{
+        //   console.log(data.operationStatus.progress)
+        //   data.operationStatus.progress++;        
+        //   if(data.operationStatus.progress<100){
+        //     callback(data.operationStatus);
+        //     requery()
+        //   }else{
+        //     callback(data.operationStatus);
+        //     res(data.operationStatus)
+        //   }
+        // },100)
+      }
+      requery();
+    })
+    return mypromise;
+  }
+
+
+  // 名字转换参数匹配 --> 传给子组件用
+  namesTranslate:Object;
+  inputNamests(){
+    this.myhttp.inputNamesTransform()
+      .subscribe((data)=>{
+        this.namesTranslate = data;
+      })
+  }
+
+}
diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html
new file mode 100644
index 00000000..c4fddfc0
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.html
@@ -0,0 +1,18 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<p>
+  services works!
+</p>
diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.less
diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts
new file mode 100644
index 00000000..2e76b9f9
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts
new file mode 100644
index 00000000..eec235b4
--- /dev/null
+++ b/usecaseui-portal/src/app/services/services.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-services',
+  templateUrl: './services.component.html',
+  styleUrls: ['./services.component.less']
+})
+export class ServicesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
new file mode 100644
index 00000000..9b191f8e
--- /dev/null
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -0,0 +1,22 @@
+{
+  "Language":"--:",
+    "zh":"Chinese",
+    "en":"English",
+
+  "app-component":"--:",
+    "Home":"Home",
+    "Services":"Services",
+    "Services List":"Services List",
+    "Alarm":"Alarm",
+    "Performance":"Performance",
+    "Monitor":"Monitor",
+    "Network":"Network",
+
+  "home-component":"--:",
+    "Overall trend":"Overall trend",
+    "SERVICES":"SERVICES",
+    "services":"services",
+    "services has been created":"services has been created",
+    "PERFORMANCE":"PERFORMANCE",
+    "VM Performance":"VM Performance"
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/i18n/zh.json b/usecaseui-portal/src/assets/i18n/zh.json
new file mode 100644
index 00000000..c360c822
--- /dev/null
+++ b/usecaseui-portal/src/assets/i18n/zh.json
@@ -0,0 +1,22 @@
+{
+  "Language":"--:",
+    "zh":"中文",
+    "en":"英文",
+    
+  "app-component":"--:",
+    "Home":"首页",
+    "Services":"服务",
+    "Services List":"服务列表",
+    "Alarm":"告警",
+    "Monitor":"监控",
+    "Performance":"性能",
+    "Network":"网云",
+
+  "home-component":"--:",
+    "Overall trend":"总体趋势",
+    "SERVICES":"服务",
+    "services":"条服务",
+    "services has been created":"条已创建的服务",
+    "PERFORMANCE":"性能",
+    "VM Performance":"VM 性能"
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/images/VM.png b/usecaseui-portal/src/assets/images/VM.png
new file mode 100644
index 00000000..72b31a5d
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VM.png
diff --git a/usecaseui-portal/src/assets/images/VNF.png b/usecaseui-portal/src/assets/images/VNF.png
new file mode 100644
index 00000000..21b64db0
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF.png
diff --git a/usecaseui-portal/src/assets/images/VNF1.png b/usecaseui-portal/src/assets/images/VNF1.png
new file mode 100644
index 00000000..0d37bebe
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF1.png
diff --git a/usecaseui-portal/src/assets/images/VNF2.png b/usecaseui-portal/src/assets/images/VNF2.png
new file mode 100644
index 00000000..70a43a7c
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF2.png
diff --git a/usecaseui-portal/src/assets/images/VNF3.png b/usecaseui-portal/src/assets/images/VNF3.png
new file mode 100644
index 00000000..e5904344
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/VNF3.png
diff --git a/usecaseui-portal/src/assets/images/bigcloud.png b/usecaseui-portal/src/assets/images/bigcloud.png
new file mode 100644
index 00000000..23bf7375
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/bigcloud.png
diff --git a/usecaseui-portal/src/assets/images/cloud-city1.png b/usecaseui-portal/src/assets/images/cloud-city1.png
new file mode 100644
index 00000000..051f7749
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-city1.png
diff --git a/usecaseui-portal/src/assets/images/cloud-county1.png b/usecaseui-portal/src/assets/images/cloud-county1.png
new file mode 100644
index 00000000..feb6a4a8
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-county1.png
diff --git a/usecaseui-portal/src/assets/images/cloud-out.png b/usecaseui-portal/src/assets/images/cloud-out.png
new file mode 100644
index 00000000..aeec4fdd
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-out.png
diff --git a/usecaseui-portal/src/assets/images/cloud-site.png b/usecaseui-portal/src/assets/images/cloud-site.png
new file mode 100644
index 00000000..97db0518
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/cloud-site.png
diff --git a/usecaseui-portal/src/assets/images/domain.png b/usecaseui-portal/src/assets/images/domain.png
new file mode 100644
index 00000000..68027b23
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/domain.png
diff --git a/usecaseui-portal/src/assets/images/icon.png b/usecaseui-portal/src/assets/images/icon.png
new file mode 100644
index 00000000..3c6f04e4
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/icon.png
diff --git a/usecaseui-portal/src/assets/images/loading.gif b/usecaseui-portal/src/assets/images/loading.gif
new file mode 100644
index 00000000..57a6df2c
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/loading.gif
diff --git a/usecaseui-portal/src/assets/images/open-close.png b/usecaseui-portal/src/assets/images/open-close.png
new file mode 100644
index 00000000..27e8f305
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/open-close.png
diff --git a/usecaseui-portal/src/assets/images/open-close2.png b/usecaseui-portal/src/assets/images/open-close2.png
new file mode 100644
index 00000000..0dd00861
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/open-close2.png
diff --git a/usecaseui-portal/src/assets/images/out-domain.png b/usecaseui-portal/src/assets/images/out-domain.png
new file mode 100644
index 00000000..6bcdd552
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/out-domain.png
diff --git a/usecaseui-portal/src/assets/images/site.png b/usecaseui-portal/src/assets/images/site.png
new file mode 100644
index 00000000..b63bc2ee
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/site.png
diff --git a/usecaseui-portal/src/assets/images/tildeimg.png b/usecaseui-portal/src/assets/images/tildeimg.png
new file mode 100644
index 00000000..e39a315d
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/tildeimg.png
diff --git a/usecaseui-portal/src/assets/images/tp.png b/usecaseui-portal/src/assets/images/tp.png
new file mode 100644
index 00000000..9daf005b
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/tp.png
diff --git a/usecaseui-portal/src/assets/json/LogicalLinksData.json b/usecaseui-portal/src/assets/json/LogicalLinksData.json
new file mode 100644
index 00000000..99487f9d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/LogicalLinksData.json
@@ -0,0 +1,168 @@
+{
+  "logical-link": [
+    {
+      "link-name": "cross-link-1",
+      "in-maint": false,
+      "link-type": "cross-link",
+      "resource-version": "1536029865021",
+      "operational-status": "up",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-1",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf2000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-78.78.78.78-ltpId-1"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          },
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf1000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-79.79.79.79-ltpId-1"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "link-name": "cross-link-3",
+      "in-maint": false,
+      "link-type": "cross-link",
+      "resource-version": "1536029865021",
+      "operational-status": "up",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-3",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf2000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-78.78.78.78-ltpId-3"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          },
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-3",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf1000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-79.79.79.79-ltpId-3"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "link-name": "cross-link-2",
+      "in-maint": false,
+      "link-type": "cross-link",
+      "resource-version": "1536029865021",
+      "operational-status": "up",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf3000/p-interfaces/p-interface/nodeId-80.80.80.80-ltpId-1",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf3000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-80.80.80.80-ltpId-1"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          },
+          {
+            "related-to": "p-interface",
+            "relationship-label": "tosca.relationships.network.LinksTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf-cloud/p-interfaces/p-interface/cloud-tp",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf-cloud"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "cloud-tp"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          },
+          {
+            "related-to": "ext-aai-network",
+            "relationship-label": "org.onap.relationships.inventory.BelongsTo",
+            "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/gongjie666",
+            "relationship-data": [
+              {
+                "relationship-key": "ext-aai-network.aai-id",
+                "relationship-value": "gongjie666"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/usecaseui-portal/src/assets/json/alarmFormData.json b/usecaseui-portal/src/assets/json/alarmFormData.json
new file mode 100644
index 00000000..fc97ae0c
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/alarmFormData.json
@@ -0,0 +1,371 @@
+{
+    "totalRecolds": 22, 
+    "list": [
+        {
+            "id": 11, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-1001", 
+            "sourceName": "shentao-test-1001", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 12, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-1002", 
+            "sourceName": "shentao-test-1002", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 13, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-1003", 
+            "sourceName": "shentao-test-1003", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 14, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-2001", 
+            "sourceName": "shentao-test-2001", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 15, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-2002", 
+            "sourceName": "shentao-test-2002", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 16, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-2003", 
+            "sourceName": "shentao-test-2003", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1513630880000000", 
+            "lastEpochMicroSec": "1513630880000000", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 17, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-2004", 
+            "sourceName": "vnf_a_1", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 18, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-2005", 
+            "sourceName": "shentao-test-2005", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 19, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-3001", 
+            "sourceName": "shentao-test-3001", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 20, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-3003", 
+            "sourceName": "vnf_a_3", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 21, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailureCleared", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "shentao-test-3004", 
+            "sourceName": "vnf_a_3", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "Multi-Cloud", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "112", 
+            "lastEpochMicroSecCleared": "112", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }, 
+        {
+            "id": 22, 
+            "version": "3", 
+            "eventName": "Fault_MultiCloud_VMFailure", 
+            "domain": "fault", 
+            "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", 
+            "eventType": null, 
+            "nfcNamingCode": null, 
+            "nfNamingCode": null, 
+            "sourceId": "vnf_a_20180205_2", 
+            "sourceName": "vnf_b_3", 
+            "reportingEntityId": null, 
+            "reportingEntityName": "vnf_a_20180205_2", 
+            "priority": "High", 
+            "startEpochMicrosec": "1516784364860", 
+            "lastEpochMicroSec": "1516784364860", 
+            "startEpochMicrosecCleared": "", 
+            "lastEpochMicroSecCleared": "", 
+            "sequence": "0", 
+            "faultFieldsVersion": "2", 
+            "eventServrity": "CRITICAL", 
+            "eventSourceType": "other", 
+            "eventCategory": null, 
+            "alarmCondition": "Guest_Os_Failure", 
+            "specificProblem": "Fault_MultiCloud_VMFailure", 
+            "vfStatus": "Active", 
+            "alarmInterfaceA": "aaaa", 
+            "status": "active"
+        }
+    ], 
+    "countActive": 12, 
+    "reportingEntityNameList": [
+        "vnf_a_20180205_2", 
+        "Multi-Cloud"
+    ], 
+    "sourceNameList": [
+        "shentao-test-2001", 
+        "shentao-test-3001", 
+        "shentao-test-1001", 
+        "shentao-test-2002", 
+        "vnf_a_3", 
+        "shentao-test-1002", 
+        "shentao-test-2003", 
+        "vnf_b_3", 
+        "shentao-test-1003", 
+        "vnf_a_1", 
+        "shentao-test-2005"
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/allotted-resources.json b/usecaseui-portal/src/assets/json/allotted-resources.json
new file mode 100644
index 00000000..0b39894c
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/allotted-resources.json
@@ -0,0 +1,122 @@
+{
+    "allotted-resource": [
+        {
+            "id": "1114feec-1aef-4890-abba-f8f3a906935f",
+            "description": "1114feec-1aef-4890-abba-f8f3a906935f",
+            "selflink": "",
+            "model-invariant-id": "f714feec-1aef-4890-abba-f8f3a906935f",
+            "model-version-id": "709919b7-75fd-4e49-8398-67853323ff55",
+            "resource-version": "1535708424249",
+            "orchestration-status": "",
+            "operational-status": "",
+            "type": "",
+            "role": "spoke",
+            "allotted-resource-name": "sdwan ar",
+            "access-provider-id": "",
+            "access-client-id": "",
+            "access-topology-id": "",
+            "access-node-id": "",
+            "access-ltp-id": "",
+            "cvlan": "",
+            "vpn-name": "SDWANVPNInfra",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "service-instance",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/35e88f8e-473f-4d88-92f8-6739a42baa23",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "Democcy"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "CCVPN"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "35e88f8e-473f-4d88-92f8-6739a42baa23"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "service-instance.service-instance-name",
+                                "property-value": "SDWANVPNInfra1"
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        {
+            "id": "aa14feec-1aef-4890-abba-f8f3a906935f",
+            "description": "aa14feec-1aef-4890-abba-f8f3a906935f",
+            "selflink": "",
+            "model-invariant-id": "97c4a3c6-2943-41af-8717-2f3183f944be",
+            "model-version-id": "44b777ee-9793-465d-8053-d8e86d2e2362",
+            "resource-version": "1536135116833",
+            "orchestration-status": "",
+            "operational-status": "",
+            "type": "",
+            "role": "",
+            "allotted-resource-name": "ston ar",
+            "access-provider-id": "1000",
+            "access-client-id": "3333",
+            "access-topology-id": "100",
+            "access-node-id": "10.10.10.10",
+            "access-ltp-id": "1",
+            "cvlan": "",
+            "vpn-name": "SOTNVPNInfra",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "service-instance",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "Democcy"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "CCVPN"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "service-instance.service-instance-name",
+                                "property-value": "SOTNVPNInfra"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "p-interface",
+                        "relationship-label": "org.onap.relationships.inventory.Uses",
+                        "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "pnf.pnf-name",
+                                "relationship-value": "pnf1000"
+                            },
+                            {
+                                "relationship-key": "p-interface.interface-name",
+                                "relationship-value": "nodeId-79.79.79.79-ltpId-2"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "p-interface.prov-status"
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/allotted-resources2.json b/usecaseui-portal/src/assets/json/allotted-resources2.json
new file mode 100644
index 00000000..29262e5d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/allotted-resources2.json
@@ -0,0 +1 @@
+{"allotted-resource":[{"id":"8beee9a7-abf0-4c98-8073-1d4d03e50033","description":"sdwan-attachment","selflink":"","model-invariant-id":"3d369bb8-5546-41d4-a3e7-a2557295ae40","model-version-id":"78ed8099-90a5-49b4-a400-89f38a7cbe6e","resource-version":"1537857961665","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sdwan ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SDWANVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SDWANVPNInfra"}]}]}},{"id":"28f2b69e-c489-48fa-b974-166104eb15c9","description":"sotn-attachment","selflink":"","model-invariant-id":"d92ce7ca-ca87-4830-972e-83ae9857ded7","model-version-id":"3704879e-b07e-4a15-b8fd-f047f966a261","resource-version":"1537858263268","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sotn ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SOTNVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"p-interface","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/network/pnfs/pnf/11.11.11.11/p-interfaces/p-interface/nodeId-11.11.11.11-ltpId-36","relationship-data":[{"relationship-key":"pnf.pnf-name","relationship-value":"11.11.11.11"},{"relationship-key":"p-interface.interface-name","relationship-value":"nodeId-79.79.79.79-ltpId-2"}],"related-to-property":[{"property-key":"p-interface.prov-status"}]}]}}]}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json b/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
new file mode 100644
index 00000000..9a91307f
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/inputNamesTranslate.json
@@ -0,0 +1,63 @@
+{
+    "sotnNameTranslate":{
+        "name":"sotnconnectivity_name",
+        "description":"sotnconnectivity_description",
+        "startTime":"sotnconnectivity_startTime",
+        "endTime":"sotnconnectivity_endTime",
+        "COS":"sotnconnectivity_COS",
+        "reroute":"sotnconnectivity_reroute",
+        "SLS":"sotnconnectivity_SLS",
+        "dualLink":"sotnconnectivity_dualLink",
+        "CIR":"sotnconnectivity_cir",
+        "EIR":"sotnconnectivity_eir",
+        "CBS":"sotnconnectivity_cbs",
+        "EBS":"sotnconnectivity_ebs",
+        "colorAware":"sotnconnectivity_colorAware",
+        "couplingFlag":"sotnconnectivity_couplingFlag"
+    },
+    "siteNameTranslate":{
+        "baseNames":{
+            "name":"site_name",
+            "description":"site_description",
+            "type":"site_type",
+            "role":"site_role",
+            "postcode":"site_postcode",
+            "address":"site_address",
+            "vlan":"sotncondition_cVLAN",
+            "sotnVpnName":"sotncondition_sotnVpnName", 
+            "controlPoint":"site_controlPoint", 
+            "groupRole":"sdwancondition_role", 
+            "groupName":"sdwancondition_sdwanVpnName",
+            "emails":"site_emails",
+            "latitude":"site_latitude",
+            "longitude":"site_longitude",
+            "clientSignal":"sotncondition_clientSignal"
+        },
+        "cpeNames":{
+            "device_name":"device_name",
+            "device_version":"device_version",
+            "device_esn":"device_esn",
+            "device_class":"device_class",
+            "device_systemIp":"device_systemIp",
+            "device_vendor":"device_vendor",
+            "device_type":"device_type"
+        },
+        "wanportNames":{
+            "sitewanport_name":"sitewanport_name",
+            "sitewanport_deviceName":"sitewanport_deviceName",
+            "sitewanport_description":"sitewanport_description",
+            "sitewanport_portType":"sitewanport_portType",
+            "sitewanport_portNumber":"sitewanport_portNumber",
+            "sitewanport_ipAddress":"sitewanport_ipAddress",
+            "sitewanport_providerIpAddress":"sitewanport_providerIpAddress",
+            "sitewanport_transportNetworkName":"sitewanport_transportNetworkName",
+            "sitewanport_inputBandwidth":"sitewanport_inputBandwidth",
+            "sitewanport_outputBandwidth":"sitewanport_outputBandwidth"
+        }
+    },
+    "siteGroupNameTranslate":{
+        "name":"sdwanconnectivity_name",
+        "topology":"sdwanconnectivity_topology"
+    }
+
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json b/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
new file mode 100644
index 00000000..574a8bb4
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/servicesCategory.json
@@ -0,0 +1,34 @@
+
+{
+    "SOTN":{
+        "sotnvpn":[
+            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"}
+        ],
+        "site":[
+            {"model-invariant-id": "342ff5e8-5592-4455-a537-a81172c9d541","model-version-id": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c"},
+            {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"}
+        ]
+    },
+    "CCVPN":{
+        "sotnvpn":[
+            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "54836196-c411-4690-af98-900c1c3aadd7"},
+            {"model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f","model-version-id": "4ca96a53-2e18-4297-8dc7-5776fdf6871b"},
+            {"model-invariant-id": "35661c6e-4a15-4990-8d8a-d247ddcf0110","model-version-id": "f38e13a7-6ba6-4f06-901d-02206faa2687"},
+            {"model-invariant-id": "bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id": "fdbb8ddd-3325-4840-a156-9ad601b9366c"}
+        ],
+        "site":[
+            {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838"},
+            {"model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70","model-version-id": "4b4b3ef8-6747-4111-b9e0-81cf251c0068"},
+            {"model-invariant-id": "a7029145-4294-4664-b619-00dc959a1ff6","model-version-id": "cb756ffb-8d91-49fb-86f7-12ceb2b13158"},
+            {"model-invariant-id": "313abb16-d454-4a64-a39d-2ed4bb7713a3","model-version-id": "95f9c7aa-8a0e-4568-86f7-ab980a4556a1"},
+            {"model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974"}
+        ],
+        "sdwan":[
+            {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064"},
+            {"model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8","model-version-id": "d0a4af63-570c-40b3-a26f-ef11366f0a03"},
+            {"model-invariant-id": "2cefdc20-a29d-4792-a151-3653a6a20d45","model-version-id": "a306b8d6-3873-46fe-921a-623e279d5548"},
+            {"model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e"}
+        ]
+    }
+}
+
diff --git a/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json b/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
new file mode 100644
index 00000000..dca42795
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/configuration_files/templateCategory.json
@@ -0,0 +1,6 @@
+{
+    "sotnvpntypes":["uuidxxx","uuidxxxx"],
+    "sitetypes":["uuidaaa","uuidaaaa"],
+    "sdwantypes":["uuidbbb","uuidbbbb"]
+}
+
diff --git a/usecaseui-portal/src/assets/json/createService.json b/usecaseui-portal/src/assets/json/createService.json
new file mode 100644
index 00000000..f1d64485
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/createService.json
@@ -0,0 +1,7 @@
+
+{
+    "service":{
+        "serviceId":"044377e5-3dd4-4f84-86a0-02dab3c43bc5",
+        "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8"
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/customers.json b/usecaseui-portal/src/assets/json/customers.json
new file mode 100644
index 00000000..9c66eff4
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/customers.json
@@ -0,0 +1,82 @@
+
+
+[
+    {
+      "global-customer-id": "Democcy",
+      "subscriber-name": "Democcy",
+      "subscriber-type": "INFRA",
+      "resource-version": "1535601196964"
+    },
+    {
+      "global-customer-id": "support",
+      "subscriber-name": "testccccccccsssssssssseeeeeeeeeee",
+      "subscriber-type": "CUST",
+      "resource-version": "1536069070995"
+    },
+    {
+      "global-customer-id": "Demonstration",
+      "subscriber-name": "Demonstration",
+      "subscriber-type": "INFRA",
+      "resource-version": "1535080521665"
+    },
+    {
+      "global-customer-id": "Orange",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1535865156826"
+    },
+    {
+      "global-customer-id": "Orange5",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1529978907607"
+    },
+    {
+      "global-customer-id": "wale",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1536058660948"
+    },
+    {
+      "global-customer-id": "kiwi",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1536042103511"
+    },
+    {
+      "global-customer-id": "Apple",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1535971300786"
+    },
+    {
+      "global-customer-id": "Tiger",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1535977578133"
+    },
+    {
+      "global-customer-id": "Deer",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1535988232470"
+    },
+    {
+      "global-customer-id": "Bear",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1536041229105"
+    },
+    {
+      "global-customer-id": "Panda",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1536038628045"
+    },
+    {
+      "global-customer-id": "Lion",
+      "subscriber-name": "test",
+      "subscriber-type": "CUST",
+      "resource-version": "1535986050695"
+    }
+]
diff --git a/usecaseui-portal/src/assets/json/deleteService.json b/usecaseui-portal/src/assets/json/deleteService.json
new file mode 100644
index 00000000..19a7ab5e
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/deleteService.json
@@ -0,0 +1,4 @@
+
+{
+    "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8"
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/detailsData.json b/usecaseui-portal/src/assets/json/detailsData.json
new file mode 100644
index 00000000..41ee87b8
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/detailsData.json
@@ -0,0 +1,19 @@
+{
+    "sotnVpnInfo":{
+        "name":"xdwgwe","description":"hahahah",
+        "startTime":"2017-07-03","endTime":"2018-07-05",
+        "COS":"premium","reroute":"Yes",
+        "SLS":"sfsadf","dualLink":"Yes",
+        "CIR":"dafdafd","EIR":"sddddddd",
+        "CBS":"dafdaf","EBS":"qqqqqqqwwwwwww",
+        "colorAware":"Yes","couplingFlag":"No"
+    },
+    "siteList":[
+        {"name":"xiaoming","description":"congming","postcode":"xxxx","address":"beijing","sotnVpnName":"buzhid","vlan":"aaa"},
+        {"name":"xiaogang","description":"congming","postcode":"xxxx","address":"guangzhou","sotnVpnName":"buzhid","vlan":"aaa"}
+    ],
+    "siteGroupList":[
+        {"id":"123","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"},
+        {"id":"3333","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"}
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/homeAllData.json b/usecaseui-portal/src/assets/json/homeAllData.json
new file mode 100644
index 00000000..ce4e5d6e
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/homeAllData.json
@@ -0,0 +1,23 @@
+{   
+    "services":{
+      "number":200,
+      "chartdata":[
+        {"value":125, "name":"user1"},
+        {"value":290, "name":"user2"},
+        {"value":220, "name":"user3"}
+      ]
+    },
+    "performance":{
+      "per_Vnf":154,
+      "per_VmPm":325
+    },
+    "alarm":{
+      "chartdata":[
+        {"value":325,"name":"Active"},
+        {"value":200,"name":"Closed"}
+      ]
+    },
+    "Vm_performance":{
+      "names":["aaaaa","bbbbb","ccccc","ddddd","eeeee"]
+    }
+}
diff --git a/usecaseui-portal/src/assets/json/homePerformanceChartData.json b/usecaseui-portal/src/assets/json/homePerformanceChartData.json
new file mode 100644
index 00000000..c3848893
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/homePerformanceChartData.json
@@ -0,0 +1,4 @@
+{   
+  "CPU":[30,43,24,32,34,35,42,62,52,35,34,33,43],
+  "Memory":[24,23,24,12,34,15,22,22,32,15,24,13,23]
+}
diff --git a/usecaseui-portal/src/assets/json/instanceTableData.json b/usecaseui-portal/src/assets/json/instanceTableData.json
new file mode 100644
index 00000000..73f12873
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData.json
@@ -0,0 +1,505 @@
+{
+  "service-instance": [
+    {
+      "service-instance-id": "35e88f8e-473f-4d88-92f8-6739a42baa23",
+      "service-instance-name": "SDWANVPNInfra1",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+      "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+      "resource-version": "1535687551051",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n        \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sdwan-vpn",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e89",
+            "relationship-data": [
+              {
+                "relationship-key": "sdwan-vpn.sdwan-vpn-id",
+                "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e89"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sdwan-vpn.sdwan-vpn-name",
+                "property-value": "vdfvpn"
+              }
+            ]
+          },
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d00",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00"
+              }
+            ]
+          },
+          {
+            "related-to": "allotted-resource",
+            "relationship-label": "org.onap.relationships.inventory.Uses",
+            "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/2214feec-1aef-4890-abba-f8f3a906935f",
+            "relationship-data": [
+              {
+                "relationship-key": "customer.global-customer-id",
+                "relationship-value": "Democcy"
+              },
+              {
+                "relationship-key": "service-subscription.service-type",
+                "relationship-value": "CCVPN"
+              },
+              {
+                "relationship-key": "service-instance.service-instance-id",
+                "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81"
+              },
+              {
+                "relationship-key": "allotted-resource.id",
+                "relationship-value": "2214feec-1aef-4890-abba-f8f3a906935f"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "allotted-resource.description",
+                "property-value": "2214feec-1aef-4890-abba-f8f3a906935f"
+              },
+              {
+                "property-key": "allotted-resource.allotted-resource-name",
+                "property-value": "sdwan ar"
+              }
+            ]
+          },
+          {
+            "related-to": "allotted-resource",
+            "relationship-label": "org.onap.relationships.inventory.Uses",
+            "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/1114feec-1aef-4890-abba-f8f3a906935f",
+            "relationship-data": [
+              {
+                "relationship-key": "customer.global-customer-id",
+                "relationship-value": "Democcy"
+              },
+              {
+                "relationship-key": "service-subscription.service-type",
+                "relationship-value": "CCVPN"
+              },
+              {
+                "relationship-key": "service-instance.service-instance-id",
+                "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80"
+              },
+              {
+                "relationship-key": "allotted-resource.id",
+                "relationship-value": "1114feec-1aef-4890-abba-f8f3a906935f"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "allotted-resource.description",
+                "property-value": "1114feec-1aef-4890-abba-f8f3a906935f"
+              },
+              {
+                "property-key": "allotted-resource.allotted-resource-name",
+                "property-value": "sdwan ar"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "15e88f8e-473f-4d88-92f8-6739a42baa2g",
+      "service-instance-name": "SDWANVPNInfra",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+      "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+      "resource-version": "1535687578298",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n        \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sdwan-vpn",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e86",
+            "relationship-data": [
+              {
+                "relationship-key": "sdwan-vpn.sdwan-vpn-id",
+                "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e86"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sdwan-vpn.sdwan-vpn-name",
+                "property-value": "cmccvpn"
+              }
+            ]
+          },
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d11",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "089b87a5-72fe-4197-a307-6929c3831f80",
+      "service-instance-name": "SiteBeijing",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+      "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+      "resource-version": "1535686434430",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SiteService\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n        \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE1\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d22",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22"
+              }
+            ]
+          },
+          {
+            "related-to": "device",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6700",
+            "relationship-data": [
+              {
+                "relationship-key": "device.device-id",
+                "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6700"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "device.device-name"
+              }
+            ]
+          },
+          {
+            "related-to": "wan-port-config",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/aaa3e552-08c4-4697-aeeb-d8d3e09ce58e",
+            "relationship-data": [
+              {
+                "relationship-key": "wan-port-config.wan-port-config-id",
+                "relationship-value": "aaa3e552-08c4-4697-aeeb-d8d3e09ce58e"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "wan-port-config.wan-port-config-name",
+                "property-value": "mpls"
+              }
+            ]
+          },
+          {
+            "related-to": "site-resource",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/site-resources/site-resource/aa2de9d8-d76b-4134-b5f1-41e79056adbe",
+            "relationship-data": [
+              {
+                "relationship-key": "site-resource.site-resource-id",
+                "relationship-value": "aa2de9d8-d76b-4134-b5f1-41e79056adbe"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "site-resource.site-resource-name",
+                "property-value": "cmcc-spokesite"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "189b87a5-72fe-4197-a307-6929c3831f81",
+      "service-instance-name": "SiteBeijingDC",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+      "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+      "resource-version": "1535686458510",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SiteService\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n        \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE2\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d33",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33"
+              }
+            ]
+          },
+          {
+            "related-to": "site-resource",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/site-resources/site-resource/bb2de9d8-d76b-4134-b5f1-41e79056adbe",
+            "relationship-data": [
+              {
+                "relationship-key": "site-resource.site-resource-id",
+                "relationship-value": "bb2de9d8-d76b-4134-b5f1-41e79056adbe"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "site-resource.site-resource-name",
+                "property-value": "cmcc-hubsite"
+              }
+            ]
+          },
+          {
+            "related-to": "device",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6711",
+            "relationship-data": [
+              {
+                "relationship-key": "device.device-id",
+                "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6711"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "device.device-name",
+                "property-value": "cmcc_hub"
+              }
+            ]
+          },
+          {
+            "related-to": "wan-port-config",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/bba3e552-08c4-4697-aeeb-d8d3e09ce58e",
+            "relationship-data": [
+              {
+                "relationship-key": "wan-port-config.wan-port-config-id",
+                "relationship-value": "bba3e552-08c4-4697-aeeb-d8d3e09ce58e"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "wan-port-config.wan-port-config-name",
+                "property-value": "mpls"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "289b87a5-72fe-4197-a307-6929c3831f82",
+      "service-instance-name": "SiteLondonDC",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+      "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+      "resource-version": "1535686481928",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SiteService\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n        \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE3\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d44",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "389b87a5-72fe-4197-a307-6929c3831f83",
+      "service-instance-name": "SiteLondon",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+      "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+      "resource-version": "1535686521672",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SiteService\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n        \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE4\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d55",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "service-instance-id": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+      "service-instance-name": "SOTNVPNInfra",
+      "service-type": "E2E Service",
+      "service-role": "E2E Service",
+      "model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f",
+      "model-version-id": "54836196-c411-4690-af98-900c1c3aadd7",
+      "resource-version": "1535685742159",
+      "input-parameters": "{\n    \"service\":{\n        \"name\":\"SOTNVPNInfra\",\n        \"description\":\"SOTNVPNInfra\",\n        \"serviceInvariantUuid\":\"21886a96-0664-47a3-beae-766952f2059f\",\n        \"serviceUuid\":\"54836196-c411-4690-af98-900c1c3aadd7\",\n        \"globalSubscriberId\":\"Demonstration\",\n        \"serviceType\":\"CCVPN\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SOTNConnectivity 0\",\n                    \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n                    \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n                    \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sotnconnectivity0_eir\":\"1000\",\n                \"sotnconnectivity0_cir\":\"1000\",\n                \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n                \"sotnconnectivity0_ebs\":\"1000\",\n                \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n                \"sotnconnectivity0_dualLink\":\"true\",\n                \"sotnconnectivity0_reroute\":\"false\",\n                \"sotnconnectivity0_cbs\":\"1000\",\n                \"sotnconnectivity0_name\":\"SOTN L2\",\n                \"sotnconnectivity0_SLS\":\"\",\n                \"sotnconnectivity0_description\":\"\",\n                \"sotnconnectivity0_couplingFlag\":\"\",\n                \"sotnconnectivity0_colorAware\":\"\",\n                \"sotnconnectivity0_COS\":\"standard\"\n            }\n        }\n    }\n}",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "sp-partner",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d99",
+            "relationship-data": [
+              {
+                "relationship-key": "sp-partner.sp-partner-id",
+                "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "sp-partner.sp-partner-id",
+                "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99"
+              }
+            ]
+          },
+          {
+            "related-to": "connectivity",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+            "relationship-data": [
+              {
+                "relationship-key": "connectivity.connectivity-id",
+                "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "connectivity.etht-svc-name",
+                "property-value": "SOTNVPNInfra"
+              }
+            ]
+          },
+          {
+            "related-to": "allotted-resource",
+            "relationship-label": "org.onap.relationships.inventory.Uses",
+            "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/bb14feec-1aef-4890-abba-f8f3a906935f",
+            "relationship-data": [
+              {
+                "relationship-key": "customer.global-customer-id",
+                "relationship-value": "Democcy"
+              },
+              {
+                "relationship-key": "service-subscription.service-type",
+                "relationship-value": "CCVPN"
+              },
+              {
+                "relationship-key": "service-instance.service-instance-id",
+                "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81"
+              },
+              {
+                "relationship-key": "allotted-resource.id",
+                "relationship-value": "bb14feec-1aef-4890-abba-f8f3a906935f"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "allotted-resource.description",
+                "property-value": "bb14feec-1aef-4890-abba-f8f3a906935f"
+              },
+              {
+                "property-key": "allotted-resource.allotted-resource-name",
+                "property-value": "ston ar"
+              }
+            ]
+          },
+          {
+            "related-to": "allotted-resource",
+            "relationship-label": "org.onap.relationships.inventory.Uses",
+            "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/aa14feec-1aef-4890-abba-f8f3a906935f",
+            "relationship-data": [
+              {
+                "relationship-key": "customer.global-customer-id",
+                "relationship-value": "Democcy"
+              },
+              {
+                "relationship-key": "service-subscription.service-type",
+                "relationship-value": "CCVPN"
+              },
+              {
+                "relationship-key": "service-instance.service-instance-id",
+                "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80"
+              },
+              {
+                "relationship-key": "allotted-resource.id",
+                "relationship-value": "aa14feec-1aef-4890-abba-f8f3a906935f"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "allotted-resource.description",
+                "property-value": "aa14feec-1aef-4890-abba-f8f3a906935f"
+              },
+              {
+                "property-key": "allotted-resource.allotted-resource-name",
+                "property-value": "ston ar"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData2.json b/usecaseui-portal/src/assets/json/instanceTableData2.json
new file mode 100644
index 00000000..d29f5f59
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData2.json
@@ -0,0 +1,388 @@
+{
+    "results": [
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"sotn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "uuidxxx",
+                  "service-instance-name": "dddd1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"sotn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"sotn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "uuidaaaa",
+                  "service-instance-name": "dddd6",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"ccvpn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"ccvpn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },      
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"ccvpn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },      
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"ccvpn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      },
+      {
+        "service-subscription": {
+          "service-type": "{service-type}",
+          "temp-ub-sub-account-id": "some sub account",
+          "service-type-id":"ccvpn",
+          "service-instances": {
+              "service-instance": [
+                {
+                  "service-instance-id": "some id 1",
+                  "service-instance-name": "some name 1",
+                  "environment-context": "some context 1",
+                  "workload-context": "some workload 1",
+                  "input-parameters": "request parameters 1",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 2",
+                  "service-instance-name": "some name 2",
+                  "environment-context": "some context 2",
+                  "workload-context": "some workload 2",
+                  "input-parameters": "request parameters 2",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                },
+                {
+                  "service-instance-id": "some id 3",
+                  "service-instance-name": "some name 3",
+                  "environment-context": "some context 3",
+                  "workload-context": "some workload 3",
+                  "input-parameters": "request parameters 3",
+                  "relationship-list": {
+                      "relationship" : [
+                      ]
+                  }
+                }
+              ]
+          },
+          "relationship-list": {
+              "relationship" : [
+              ]
+          }
+        }
+      }
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData3.json b/usecaseui-portal/src/assets/json/instanceTableData3.json
new file mode 100644
index 00000000..98777289
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData3.json
@@ -0,0 +1,2 @@
+
+{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n    \"service\":{\n        \"name\":\"SOTNVPNInfra\",\n        \"description\":\"SOTNVPNInfra\",\n        \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n        \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SOTNConnectivity 0\",\n                    \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n                    \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n                    \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sotnconnectivity0_eir\":\"1000\",\n                \"sotnconnectivity0_cir\":\"1000\",\n                \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n                \"sotnconnectivity0_ebs\":\"1000\",\n                \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n                \"sotnconnectivity0_dualLink\":\"true\",\n                \"sotnconnectivity0_reroute\":\"false\",\n                \"sotnconnectivity0_cbs\":\"1000\",\n                \"sotnconnectivity0_name\":\"SOTN L2\",\n                \"sotnconnectivity0_SLS\":\"\",\n                \"sotnconnectivity0_description\":\"\",\n                \"sotnconnectivity0_couplingFlag\":\"\",\n                \"sotnconnectivity0_colorAware\":\"\",\n                \"sotnconnectivity0_COS\":\"standard\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537769721422","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537769801383","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779181775","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteFangshanQu\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra-2\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779392307","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcXichengQuBeijing\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537770265132","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n                \"sitevf_site_address\":\"beijing beiqing road\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_CPE\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"CMCC_CPE\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/instanceTableData4.json b/usecaseui-portal/src/assets/json/instanceTableData4.json
new file mode 100644
index 00000000..ad8767e0
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/instanceTableData4.json
@@ -0,0 +1 @@
+{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n    \"service\":{\n        \"name\":\"SOTNVPNInfra\",\n        \"description\":\"SOTNVPNInfra\",\n        \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n        \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SOTNConnectivity 0\",\n                    \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n                    \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n                    \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sotnconnectivity0_eir\":\"1000\",\n                \"sotnconnectivity0_cir\":\"1000\",\n                \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n                \"sotnconnectivity0_ebs\":\"1000\",\n                \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n                \"sotnconnectivity0_dualLink\":\"true\",\n                \"sotnconnectivity0_reroute\":\"false\",\n                \"sotnconnectivity0_cbs\":\"1000\",\n                \"sotnconnectivity0_name\":\"SOTN L2\",\n                \"sotnconnectivity0_SLS\":\"\",\n                \"sotnconnectivity0_description\":\"\",\n                \"sotnconnectivity0_couplingFlag\":\"\",\n                \"sotnconnectivity0_colorAware\":\"\",\n                \"sotnconnectivity0_COS\":\"standard\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/666085a7-132e-4a32-b9de-e58ecea3476a","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"666085a7-132e-4a32-b9de-e58ecea3476a"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/562adc96-7fbe-435e-bd6d-ff4b8a0a7920","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"562adc96-7fbe-435e-bd6d-ff4b8a0a7920"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866016457","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"University College London,Gower Street,London\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcLondon\",\n                \"sitevf_site_postcode\":\"N200095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537864894560","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"SDWANVPNInfra\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/c797bba9-eb90-4825-b1c2-adbd1a31101f","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"2d55a540-f6d3-4108-9bb4-290574b87a6c"},{"relationship-key":"allotted-resource.id","relationship-value":"c797bba9-eb90-4825-b1c2-adbd1a31101f"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/9a7329e6-8961-4008-9dbe-adeacfcd20da","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205"},{"relationship-key":"allotted-resource.id","relationship-value":"9a7329e6-8961-4008-9dbe-adeacfcd20da"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867265890","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteFangshanQu\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"CMCC International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteFangshanQu\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n    \"service\":{\n        \"name\":\"SDWANVPNInfra-2\",\n        \"description\":\"SDWANVPNInfra\",\n        \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n        \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SDWANConnectivity 0\",\n                    \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n                    \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n                    \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF 0\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"sdwanconnectivity0_name\":\"CMCCVPN\",\n                \"sdwanconnectivity0_topology\":\"hub-spoke\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537867379064","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n    \"service\":{\n        \"name\":\"DcXichengQuBeijing\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n                \"sitevf_site_address\":\"Chuangxin Building,Tianningsi,Xicheng,Beijing\",\n                \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n                \"sitevf_site_description\":\"CMCC_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"DcXichengQuBeijing\",\n                \"sitevf_site_postcode\":\"100095\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537866122803","input-parameters":"{\n    \"service\":{\n        \"name\":\"siteLondon\",\n        \"description\":\"SiteService\",\n        \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n        \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n        \"globalSubscriberId\":\"demo\",\n        \"serviceType\":\"ccvpn\",\n        \"parameters\":{\n            \"locationConstraints\":[\n\n            ],\n            \"resources\":[\n                {\n                    \"resourceName\":\"SiteVF\",\n                    \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n                    \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n                    \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"mpls\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"deviceVF\",\n                    \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n                    \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n                    \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sdwanvpnattachmentVF\",\n                    \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n                    \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n                    \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"internet\",\n                    \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n                    \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n                    \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"sotnvpnattachmentvF\",\n                    \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n                    \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n                    \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                },\n                {\n                    \"resourceName\":\"SPPartnerVF\",\n                    \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n                    \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n                    \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n                    \"parameters\":{\n                        \"locationConstraints\":[\n\n                        ],\n                        \"resources\":[\n\n                        ],\n                        \"requestInputs\":{\n\n                        }\n                    }\n                }\n            ],\n            \"requestInputs\":{\n                \"devicevf_device_class\":\"PNF\",\n                \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n                \"devicevf_device_name\":\"50.47\",\n                \"devicevf_device_systemIp\":\"192.168.1.47\",\n                \"devicevf_device_type\":\"AR161EW\",\n                \"devicevf_device_vendor\":\"huawei\",\n                \"devicevf_device_version\":\"1.0\",\n                \"internet_sitewanport_description\":\"internet\",\n                \"internet_sitewanport_deviceName\":\"50.47\",\n                \"internet_sitewanport_inputBandwidth\":\"100\",\n                \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n                \"internet_sitewanport_name\":\"internet\",\n                \"internet_sitewanport_outputBandwidth\":\"100\",\n                \"internet_sitewanport_portNumber\":\"0/0/2\",\n                \"internet_sitewanport_portType\":\"GE\",\n                \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n                \"internet_sitewanport_transportNetworkName\":\"internet\",\n                \"mpls_sitewanport_description\":\"mpls\",\n                \"mpls_sitewanport_deviceName\":\"50.47\",\n                \"mpls_sitewanport_inputBandwidth\":\"100\",\n                \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n                \"mpls_sitewanport_name\":\"mpls\",\n                \"mpls_sitewanport_outputBandwidth\":\"100\",\n                \"mpls_sitewanport_portNumber\":\"0/0/1\",\n                \"mpls_sitewanport_portType\":\"GE\",\n                \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n                \"mpls_sitewanport_transportNetworkName\":\"internet\",\n                \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n                \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n                \"sitevf_site_address\":\"VDF International Data Center,Hongkong\",\n                \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n                \"sitevf_site_description\":\"VDF_vGW\",\n                \"sitevf_site_emails\":\"\",\n                \"sitevf_site_latitude\":\"\",\n                \"sitevf_site_longitude\":\"\",\n                \"sitevf_site_name\":\"siteLondon\",\n                \"sitevf_site_postcode\":\"999077\",\n                \"sitevf_site_role\":\"sd-wan-edge\",\n                \"sitevf_site_type\":\"single-gateway\",\n                \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n                \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n            }\n        }\n    }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data.json b/usecaseui-portal/src/assets/json/netWorkD3Data.json
new file mode 100644
index 00000000..0dbfd939
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/netWorkD3Data.json
@@ -0,0 +1,94 @@
+[
+    {
+        "networkId": "1000",
+        "pnfs": [
+            {
+                "pnfName": "pnf1000"
+            }
+        ],
+        "tps": [
+            {
+                "interface-name": "nodeId-78.78.78.78-ltpId-5"
+            },
+            {
+                "interface-name": "nodeId-78.78.78.78-ltpId-4"
+            },
+            {
+                "interface-name": "nodeId-78.78.78.78-ltpId-1"
+            },
+            {
+                "interface-name": "nodeId-78.78.78.78-ltpId-3"
+            },
+            {
+                "interface-name": "nodeId-78.78.78.78-ltpId-2"
+            }
+        ],
+      "aaiId":""
+    },
+    {
+        "networkId": "2000",
+        "pnfs": [
+            {
+                "pnfName": "pnf2000"
+            }
+        ],
+        "tps": [
+            {
+                "interface-name": "nodeId-79.79.79.79-ltpId-5"
+            },
+            {
+                "interface-name": "nodeId-79.79.79.79-ltpId-4"
+            },
+            {
+                "interface-name": "nodeId-79.79.79.79-ltpId-1"
+            },
+            {
+                "interface-name": "nodeId-79.79.79.79-ltpId-3"
+            },
+            {
+                "interface-name": "nodeId-79.79.79.79-ltpId-2"
+            }
+        ],
+      "aaiId":""
+    },
+  {
+    "networkId": "3000",
+    "pnfs": [
+      {
+        "pnfName": "pnf3000"
+      }
+    ],
+    "tps": [
+      {
+        "interface-name": "nodeId-80.80.80.80-ltpId-5"
+      },
+      {
+        "interface-name": "nodeId-80.80.80.80-ltpId-4"
+      },
+      {
+        "interface-name": "nodeId-80.80.80.80-ltpId-1"
+      },
+      {
+        "interface-name": "nodeId-80.80.80.80-ltpId-3"
+      },
+      {
+        "interface-name": "nodeId-80.80.80.80-ltpId-2"
+      }
+    ],
+    "aaiId":""
+  },
+  {
+    "networkId": "cloud-network",
+    "pnfs": [
+      {
+        "pnfName": "pnf-cloud"
+      }
+    ],
+    "tps": [
+      {
+        "interface-name": "cloud-tp"
+      }
+    ],
+    "aaiId":"gongjie666"
+  }
+]
diff --git a/usecaseui-portal/src/assets/json/netWorkD3Data2.json b/usecaseui-portal/src/assets/json/netWorkD3Data2.json
new file mode 100644
index 00000000..1ab07822
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/netWorkD3Data2.json
@@ -0,0 +1,246 @@
+[
+    {
+      "network-resource": {
+        "network-id": "成都市",
+        "pnfs": {
+          "pnf": [
+            {
+              "pnf-name": "双流区"
+            },
+            {
+              "pnf-name": "武侯区"
+            },
+            {
+              "pnf-name": "金牛区"
+            }
+          ]
+        },
+        "tp": [
+          {
+            "p-interface": {
+              "interface-name": "东升街",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "浆洗街",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "抚琴街",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        "relationship-list": {
+          "relationship": [
+            {
+              "related-to": "vpn-binding",
+              "related-link": "url of vpn-binding",
+              "relationship-data": {
+                "relationship-key": "vpn-binding.vpn-id",
+                "relationship-value": "some id"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "network-resource": {
+        "network-id": "重庆市",
+        "pnfs": {
+          "pnf": [
+            {
+              "pnf-name": "沙坪坝区"
+            },
+            {
+              "pnf-name": "南岸区"
+            },
+            {
+              "pnf-name": "江北区"
+            }
+          ]
+        },
+        "tp": [
+          {
+            "p-interface": {
+              "interface-name": "万州",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "南川",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "武隆",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "江津",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "合川",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "p-interface": {
+              "interface-name": "巫山",
+              "network-ref": "some ref",
+              "transparent": "some value",
+              "speed-value": "some speed",
+              "relationship-list": {
+                "relationship": [
+                  {
+                    "related-to": "logical-link",
+                    "related-link": "url of logical-link",
+                    "relationship-data": {
+                      "relationship-key": "logical-link.link-name",
+                      "relationship-value": "some name"
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        "relationship-list": {
+          "relationship": [
+            {
+              "related-to": "vpn-binding",
+              "related-link": "url of vpn-binding",
+              "relationship-data": {
+                "relationship-key": "vpn-binding.vpn-id",
+                "relationship-value": "some id"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ]
diff --git a/usecaseui-portal/src/assets/json/onboardTableData.json b/usecaseui-portal/src/assets/json/onboardTableData.json
new file mode 100644
index 00000000..56e5b323
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/onboardTableData.json
@@ -0,0 +1,103 @@
+{   
+    "total":245,
+    "tableList":[
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Onboarding",
+        "progress": 35
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Onboarding",
+        "progress": 86
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Onboarded",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Onboarded",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      },
+      {
+        "name":"Demo_vims_zte",
+        "type":"NS",
+        "version":"1.0",
+        "status":"Invalid",
+        "progress": 100
+      }
+    ]
+}
diff --git a/usecaseui-portal/src/assets/json/p_interfaces1.json b/usecaseui-portal/src/assets/json/p_interfaces1.json
new file mode 100644
index 00000000..399c21b9
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/p_interfaces1.json
@@ -0,0 +1,17 @@
+[
+  {
+    "interface-name": "nodeId-78.78.78.78-ltpId-5"
+  },
+  {
+    "interface-name": "nodeId-78.78.78.78-ltpId-4"
+  },
+  {
+    "interface-name": "nodeId-78.78.78.78-ltpId-3"
+  },
+  {
+    "interface-name": "nodeId-78.78.78.78-ltpId-2"
+  },
+  {
+    "interface-name": "nodeId-78.78.78.78-ltpId-1"
+  }
+]
diff --git a/usecaseui-portal/src/assets/json/p_interfaces2.json b/usecaseui-portal/src/assets/json/p_interfaces2.json
new file mode 100644
index 00000000..4baf8b85
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/p_interfaces2.json
@@ -0,0 +1,17 @@
+[
+  {
+    "interface-name": "nodeId-79.79.79.79-ltpId-5"
+  },
+  {
+    "interface-name": "nodeId-79.79.79.79-ltpId-4"
+  },
+  {
+    "interface-name": "nodeId-79.79.79.79-ltpId-3"
+  },
+  {
+    "interface-name": "nodeId-79.79.79.79-ltpId-2"
+  },
+  {
+    "interface-name": "nodeId-79.79.79.79-ltpId-1"
+  }
+]
diff --git a/usecaseui-portal/src/assets/json/pnfdetail-domain.json b/usecaseui-portal/src/assets/json/pnfdetail-domain.json
new file mode 100644
index 00000000..c337bd97
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/pnfdetail-domain.json
@@ -0,0 +1,29 @@
+{
+  "pnf-name": "pnf1000",
+  "pnf-id": "79.79.79.79",
+  "in-maint": true,
+  "resource-version": "1536028638695",
+  "admin-status": "up",
+  "operational-status": "up",
+  "relationship-list": {
+    "relationship": [
+      {
+        "related-to": "network-resource",
+        "relationship-label": "tosca.relationships.network.LinksTo",
+        "related-link": "/aai/v13/network/network-resources/network-resource/1000",
+        "relationship-data": [
+          {
+            "relationship-key": "network-resource.network-id",
+            "relationship-value": "1000"
+          }
+        ],
+        "related-to-property": [
+          {
+            "property-key": "network-resource.network-id",
+            "property-value": "1000"
+          }
+        ]
+      }
+    ]
+  }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/progress.json b/usecaseui-portal/src/assets/json/progress.json
new file mode 100644
index 00000000..1a36c1e2
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/progress.json
@@ -0,0 +1,13 @@
+{
+    "operationStatus":{
+        "operationId": "XXXXXX",
+        "operation": "create|delete|update|scale",
+        "result": "finished|error|processing",
+        "reason": "",
+        "userId": "",
+        "operationContent": "Be creating pop.",
+        "progress": 0,
+        "operateAt": "",
+        "finishedAt": "" 
+    }
+}
diff --git a/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json
new file mode 100644
index 00000000..cabf0e12
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sdwanvpnServiceTemplateParameters.json
@@ -0,0 +1,57 @@
+{
+    "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+    "uuid": "462f84e5-f0e5-44c5-ab95-38fb4bf77064",
+    "name": "SDWANVPNInfraService",
+    "type": "Service",
+    "version": "null",
+    "description": "SDWAN VPN Infra",
+    "category": "E2E Service",
+    "subcategory": "null",
+    "customizationUuid": "null",
+    "inputs": [
+        {
+            "name": "sdwanconnectivity0_topology",
+            "type": "string",
+            "description": "full mesh, hub-spoke",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sdwanconnectivity0_name",
+            "type": "string",
+            "description": "the name of this VPM object",
+            "isRequired": "true",
+            "defaultValue": "null"
+        }
+    ],
+    "nestedTemplates": [
+        {
+            "invariantUUID": "f99a9a23-c88e-44ff-a4dc-22b88675d278",
+            "uuid": "7baa7742-3a13-4288-8330-868015adc340",
+            "name": "SDWANConnectivity",
+            "type": "VL",
+            "version": "1.0",
+            "description": "Represents SDWAN Connectivity.",
+            "category": "Generic",
+            "subcategory": "Infrastructure",
+            "customizationUuid": "94ec574b-2306-4cbd-8214-09662b040f73",
+            "inputs": [
+                {
+                    "name": "sdwanconnectivity0_topology",
+                    "type": "string",
+                    "description": "full mesh, hub-spoke",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sdwanconnectivity0_name",
+                    "type": "string",
+                    "description": "the name of this VPM object",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                }
+            ],
+            "nestedTemplates": []
+        }
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates.json b/usecaseui-portal/src/assets/json/serviceTemplates.json
new file mode 100644
index 00000000..8de26a7d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTemplates.json
@@ -0,0 +1,19 @@
+
+[
+    {"name":"template1","uuid":"uuidxxx","invariantUUID":"dddd1","version":"1.20"},
+    {"name":"template2","uuid":"uuidxxx","invariantUUID":"dddd2","version":"1.20"},
+    {"name":"template3","uuid":"uuidxxxx","invariantUUID":"dddd3","version":"1.20"},
+    {"name":"template4","uuid":"uuidaaa","invariantUUID":"dddd4","version":"1.20"},
+    {"name":"template5","uuid":"uuidaaa","invariantUUID":"dddd5","version":"1.20"},
+    {"name":"template6","uuid":"uuidaaaa","invariantUUID":"dddd6","version":"1.20"},
+    {"name":"template7","uuid":"uuidbbb","invariantUUID":"dddd7","version":"1.20"},
+    {"name":"template8","uuid":"uuidbbb","invariantUUID":"dddd8","version":"1.20"},
+    {"name":"template9","uuid":"uuidbbbb","invariantUUID":"dddd9","version":"1.20"},
+    {"name":"template10","uuid":"uuidaaaa","invariantUUID":"dddd10","version":"1.20"},
+    {"name":"template11","uuid":"uuidxxx","invariantUUID":"dddd11","version":"1.20"},
+    {"name":"template12","uuid":"uuidccc","invariantUUID":"dddd12","version":"1.20"},
+    {"name":"template13","uuid":"uuidccc","invariantUUID":"dddd13","version":"1.20"},
+    {"name":"template14","uuid":"uuidccc","invariantUUID":"dddd14","version":"1.20"},
+    {"name":"template15","uuid":"uuidxxx","invariantUUID":"dddd15","version":"1.20"},
+    {"name":"template16","uuid":"uuidbbbb","invariantUUID":"dddd16","version":"1.20"}
+]
diff --git a/usecaseui-portal/src/assets/json/serviceTemplates2.json b/usecaseui-portal/src/assets/json/serviceTemplates2.json
new file mode 100644
index 00000000..93202786
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTemplates2.json
@@ -0,0 +1,43 @@
+
+[
+    {
+        "uuid": "d0a4af63-570c-40b3-a26f-ef11366f0a03",
+        "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8",
+        "name": "SDWANVPNInfraService",
+        "version": "2.0",
+        "toscaModelURL": "/sdc/v1/catalog/services/d0a4af63-570c-40b3-a26f-ef11366f0a03/toscaModel",
+        "category": "E2E Service"
+    },
+    {
+        "uuid": "4ca96a53-2e18-4297-8dc7-5776fdf6871b",
+        "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f",
+        "name": "SOTNVPNInfraService",
+        "version": "2.0",
+        "toscaModelURL": "/sdc/v1/catalog/services/4ca96a53-2e18-4297-8dc7-5776fdf6871b/toscaModel",
+        "category": "E2E Service"
+    },
+    {
+        "uuid": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c",
+        "invariantUUID": "342ff5e8-5592-4455-a537-a81172c9d541",
+        "name": "sowsiteservice",
+        "version": "3.0",
+        "toscaModelURL": "/sdc/v1/catalog/services/ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c/toscaModel",
+        "category": "E2E Service"
+    },
+    {
+        "uuid": "cb756ffb-8d91-49fb-86f7-12ceb2b13158",
+        "invariantUUID": "a7029145-4294-4664-b619-00dc959a1ff6",
+        "name": "SiteServiceV3",
+        "version": "1.0",
+        "toscaModelURL": "/sdc/v1/catalog/services/cb756ffb-8d91-49fb-86f7-12ceb2b13158/toscaModel",
+        "category": "E2E Service"
+    },
+    {
+        "uuid": "4b4b3ef8-6747-4111-b9e0-81cf251c0068",
+        "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+        "name": "SiteService",
+        "version": "2.0",
+        "toscaModelURL": "/sdc/v1/catalog/services/4b4b3ef8-6747-4111-b9e0-81cf251c0068/toscaModel",
+        "category": "E2E Service"
+    }
+]
diff --git a/usecaseui-portal/src/assets/json/serviceTypes.json b/usecaseui-portal/src/assets/json/serviceTypes.json
new file mode 100644
index 00000000..cb1c20a5
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/serviceTypes.json
@@ -0,0 +1,18 @@
+
+[
+    {
+        "service-type": "CCVPN",
+        "temp-ub-sub-account-id": "sotnaccount",
+        "resource-version": "1535601345780"
+    },
+    {
+        "service-type": "SOTN",
+        "temp-ub-sub-account-id": "sotnaccount",
+        "resource-version": "1535601330040"
+    },
+    {
+        "service-type": "CCVPN1",
+        "temp-ub-sub-account-id": "sotnaccount",
+        "resource-version": "1536111036667"
+    }
+]
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/servicesList.json b/usecaseui-portal/src/assets/json/servicesList.json
new file mode 100644
index 00000000..61ddb7a5
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/servicesList.json
@@ -0,0 +1,4 @@
+{   
+    "customer":["aaaaa","bbbbb","ccccc","ddddd"],
+    "serviceType":["aaaaa","bbbbbb","cccc","ddddddd"]
+}
diff --git a/usecaseui-portal/src/assets/json/servicesTableData.json b/usecaseui-portal/src/assets/json/servicesTableData.json
new file mode 100644
index 00000000..07d4cbe2
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/servicesTableData.json
@@ -0,0 +1,127 @@
+{   
+    "total":365,
+    "tableList":[
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Active",
+        "progress": 100, 
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Closed",
+        "progress": 100,
+        "expand" : false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Onboarding",
+        "progress": 50,
+        "expand" : false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Deleting",
+        "progress": 25,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Updating",
+        "progress": 45,
+        "expand": false,
+        "children":[
+          
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Creating",
+        "progress": 60,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Creating",
+        "progress": 60,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Creating",
+        "progress": 60,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Creating",
+        "progress": 60,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      },
+      {
+        "serviceId":"foeigiaaegaf",
+        "name":"demo-test5",
+        "type":"voLTE type",
+        "status":"Creating",
+        "progress": 60,
+        "expand": false,
+        "children":[
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"},
+          {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}
+        ]
+      }
+    ]
+}
diff --git a/usecaseui-portal/src/assets/json/siteAddressData.json b/usecaseui-portal/src/assets/json/siteAddressData.json
new file mode 100644
index 00000000..4b080f50
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/siteAddressData.json
@@ -0,0 +1,39 @@
+[
+    {
+        "location" : "Chuangxin Building,Tianningsi,Xicheng,Beijing",
+        "access-provider-id": "3333",
+        "access-client-id": "4444",
+        "access-topology-id": "11",
+        "access-node-id": "10.10.10.10",
+        "access-ltp-id": "1",
+        "host" : ""
+    },
+    {
+        "location" : "CMCC International Data Center,Hongkong",
+        "access-provider-id": "3333",
+        "access-client-id": "4444",
+        "access-topology-id": "11",
+        "access-node-id": "10.10.10.10",
+        "access-ltp-id": "2",
+        "host" : ""
+    },
+    {
+        "location" : "VDF International Data Center,Hongkong",
+        "access-provider-id": "pid000",
+        "access-client-id": "cid000",
+        "access-topology-id": "tid000",
+        "access-node-id": "11.11.11.11",
+        "access-ltp-id": "2",
+        "host" : "http://10.10.10.10"
+    },
+    {
+        "location" : "University College London,Gower Street,London",
+        "access-provider-id": "5555",
+        "access-client-id": "6666",
+        "access-topology-id": "22",
+        "access-node-id": "11.11.11.11",
+        "access-ltp-id": "2",
+        "host" : "http://10.10.10.10"
+    }
+]
+
diff --git a/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json
new file mode 100644
index 00000000..53368e32
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/siteServiceTemplateParameters.json
@@ -0,0 +1,308 @@
+{
+    "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70",
+    "uuid": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838",
+    "name": "SiteService",
+    "type": "Service",
+    "version": "null",
+    "description": "Site Service",
+    "category": "E2E Service",
+    "subcategory": "null",
+    "customizationUuid": "null",
+    "inputs": [
+        {
+            "name": "internet_sitewanport_deviceName",
+            "type": "string",
+            "description": "The device name in the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_description",
+            "type": "string",
+            "description": "The description of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_type",
+            "type": "string",
+            "description": "The gateway option is used for SDWAN connectivity",
+            "isRequired": "true",
+            "defaultValue": "Single Gateway"
+        },
+        {
+            "name": "sitevf_site_longitude",
+            "type": "string",
+            "description": "The longitude of the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_outputBandwidth",
+            "type": "string",
+            "description": "The output bandwidth of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_esn",
+            "type": "string",
+            "description": "Device serial number",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_role",
+            "type": "string",
+            "description": "This is used for SDWAN only",
+            "isRequired": "true",
+            "defaultValue": "dsvpn-hub"
+        },
+        {
+            "name": "internet_sitewanport_providerIpAddress",
+            "type": "string",
+            "description": "The provider IP address of the provider CE",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnvpnattachmentvf_sotncondition_cVLAN",
+            "type": "string",
+            "description": "The cvlan for the site used for ethernet type connectivity.",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_address",
+            "type": "string",
+            "description": "the address of this site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_portType",
+            "type": "string",
+            "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_transportNetworkName",
+            "type": "string",
+            "description": "The transport network of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_inputBandwidth",
+            "type": "string",
+            "description": "The input bandwidth of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_portNumber",
+            "type": "string",
+            "description": "the port number of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_description",
+            "type": "string",
+            "description": "The description of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_transportNetworkName",
+            "type": "string",
+            "description": "The transport network of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_latitude",
+            "type": "string",
+            "description": "The latitude of the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_controlPoint",
+            "type": "string",
+            "description": "The control point of the site,only for sd-wan-edge",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_outputBandwidth",
+            "type": "string",
+            "description": "The output bandwidth of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_name",
+            "type": "string",
+            "description": "the name of this site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_description",
+            "type": "string",
+            "description": "The description of the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnvpnattachmentvf_sotncondition_clientSignal",
+            "type": "string",
+            "description": "The client signal for the site used for client type connectivity.",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_portType",
+            "type": "string",
+            "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_name",
+            "type": "string",
+            "description": "The name of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_deviceName",
+            "type": "string",
+            "description": "The device name in the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_providerIpAddress",
+            "type": "string",
+            "description": "The provider IP address of the provider CE",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_inputBandwidth",
+            "type": "string",
+            "description": "The input bandwidth of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_emails",
+            "type": "string",
+            "description": "the emails of this site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_class",
+            "type": "string",
+            "description": "The class should be VNF/PNF",
+            "isRequired": "true",
+            "defaultValue": "PNF"
+        },
+        {
+            "name": "sdwanvpnattachmentvf_sdwancondition_role",
+            "type": "string",
+            "description": "the role of the site.hub/spoke.",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_ipAddress",
+            "type": "string",
+            "description": "The public IP of the WAN Port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_name",
+            "type": "string",
+            "description": "the name of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sdwanvpnattachmentvf_sdwancondition_sdwanVpnName",
+            "type": "string",
+            "description": "The device Id of the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_portNumber",
+            "type": "string",
+            "description": "the port number of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnvpnattachmentvf_sotncondition_sotnVpnName",
+            "type": "string",
+            "description": "References the SOTN VPN Infra service",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_type",
+            "type": "string",
+            "description": "The type of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sitevf_site_postcode",
+            "type": "string",
+            "description": "The postcode of the site",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_version",
+            "type": "string",
+            "description": "The version of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_vendor",
+            "type": "string",
+            "description": "The vendor of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "mpls_sitewanport_name",
+            "type": "string",
+            "description": "The name of the WAN port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "devicevf_device_systemIp",
+            "type": "string",
+            "description": "The system ip of the device",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "internet_sitewanport_ipAddress",
+            "type": "string",
+            "description": "The public IP of the WAN Port",
+            "isRequired": "true",
+            "defaultValue": "null"
+        }
+    ],
+    "nestedTemplates": []
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity.json b/usecaseui-portal/src/assets/json/sotn-connectivity.json
new file mode 100644
index 00000000..6ac0a453
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotn-connectivity.json
@@ -0,0 +1,94 @@
+{
+    "connectivity": [
+        {
+            "connectivity-id": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+            "bandwidth-profile-name": "vpn1",
+            "vpn-type": "ethernet",
+            "color-aware": "c1",
+            "coupling-flag": "c2",
+            "etht-svc-name": "SOTNVPNInfra",
+            "access-provider-id": "10",
+            "access-client-id": "10",
+            "access-topology-id": "10",
+            "access-node-id": "10.10.10.10",
+            "access-ltp-id": "14",
+            "connectivity-selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/10/service-data/networks/network/3efe6dff-acfc-4d13-a3fd-1177d3c08e88/network-data/",
+            "operational-status": "Created",
+            "model-customization-id": "b44071c8-04fd-4d6b-b6af-772cbfaa1129",
+            "model-invariant-id": "1b9c677d-fddf-4b70-938b-925a7fa57d43",
+            "model-version-id": "218df3c3-50dd-4c26-9e36-4771387bb771",
+            "resource-version": "1535684533349",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "vpn-binding",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf1000-vpn1",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "vpn-binding.vpn-id",
+                                "relationship-value": "pnf1000-vpn1"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "vpn-binding.vpn-name",
+                                "property-value": "pnf1000-vpn1"
+                            },
+                            {
+                                "property-key": "vpn-binding.vpn-type",
+                                "property-value": "ethernet"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "service-instance",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "customer.global-customer-id",
+                                "relationship-value": "Democcy"
+                            },
+                            {
+                                "relationship-key": "service-subscription.service-type",
+                                "relationship-value": "CCVPN"
+                            },
+                            {
+                                "relationship-key": "service-instance.service-instance-id",
+                                "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "service-instance.service-instance-name",
+                                "property-value": "SOTNVPNInfra"
+                            }
+                        ]
+                    },
+                    {
+                        "related-to": "vpn-binding",
+                        "relationship-label": "org.onap.relationships.inventory.PartOf",
+                        "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf2000-vpn1",
+                        "relationship-data": [
+                            {
+                                "relationship-key": "vpn-binding.vpn-id",
+                                "relationship-value": "pnf2000-vpn1"
+                            }
+                        ],
+                        "related-to-property": [
+                            {
+                                "property-key": "vpn-binding.vpn-name",
+                                "property-value": "pnf2000-vpn1"
+                            },
+                            {
+                                "property-key": "vpn-binding.vpn-type",
+                                "property-value": "ethernet"
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotn-connectivity2.json b/usecaseui-portal/src/assets/json/sotn-connectivity2.json
new file mode 100644
index 00000000..7bd55bf0
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotn-connectivity2.json
@@ -0,0 +1 @@
+{"connectivity":[{"connectivity-id":"4424ea5a-3603-4040-baa9-4046ed533fe5","bandwidth-profile-name":"vpn1","vpn-type":"ethernet","color-aware":"true","coupling-flag":"true","etht-svc-name":"vpn1","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","connectivity-selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0/service-data/networks/network/4424ea5a-3603-4040-baa9-4046ed533fe5/network-data/","operational-status":"Active","model-customization-id":"2bafc8aa-c60c-4a17-a658-db4cbca07fac","model-invariant-id":"5d0ada6b-de04-4624-9410-3baab839cd6f","model-version-id":"15e21930-3248-4148-b071-a2a9be1f9889","resource-version":"1537623789475","relationship-list":{"relationship":[{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/11.11.11.11-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"11.11.11.11-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"11.11.11.11-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]},{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/12.12.12.12-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"12.12.12.12-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"12.12.12.12-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]}]}}]}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json b/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json
new file mode 100644
index 00000000..21abcda1
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/sotnvpnServiceTemplateParameters.json
@@ -0,0 +1,225 @@
+{
+    "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f",
+    "uuid": "54836196-c411-4690-af98-900c1c3aadd7",
+    "name": "SOTNVPNInfraService",
+    "type": "Service",
+    "version": "null",
+    "description": "SOTN VPN Infra Service",
+    "category": "E2E Service",
+    "subcategory": "null",
+    "customizationUuid": "null",
+    "inputs": [
+        {
+            "name": "sotnconnectivity0_eir",
+            "type": "string",
+            "description": "The eir for SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_cir",
+            "type": "string",
+            "description": "The cir for SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_endTime",
+            "type": "string",
+            "description": "End Time",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_ebs",
+            "type": "string",
+            "description": "The ebs for SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_startTime",
+            "type": "string",
+            "description": "Start Time",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_dualLink",
+            "type": "boolean",
+            "description": "is Active/standby enabled",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_reroute",
+            "type": "boolean",
+            "description": "Whether to support automatic rerouting",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_cbs",
+            "type": "string",
+            "description": "The cbs for SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_name",
+            "type": "string",
+            "description": "the name of the SOTN connectivity",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_SLS",
+            "type": "string",
+            "description": "Business Service Level",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_description",
+            "type": "string",
+            "description": "The description of the SOTN connectivity",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_couplingFlag",
+            "type": "boolean",
+            "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_colorAware",
+            "type": "boolean",
+            "description": "The colorAware of the SOTN connectivity. Only for Ethernet type",
+            "isRequired": "true",
+            "defaultValue": "null"
+        },
+        {
+            "name": "sotnconnectivity0_COS",
+            "type": "string",
+            "description": "Business Class of Service of VPN",
+            "isRequired": "true",
+            "defaultValue": "standard"
+        }
+    ],
+    "nestedTemplates": [
+        {
+            "invariantUUID": "1b9c677d-fddf-4b70-938b-925a7fa57d43",
+            "uuid": "218df3c3-50dd-4c26-9e36-4771387bb771",
+            "name": "SOTNConnectivity",
+            "type": "VL",
+            "version": "1.0",
+            "description": "Represents a sotn Connectivity",
+            "category": "Generic",
+            "subcategory": "Infrastructure",
+            "customizationUuid": "b44071c8-04fd-4d6b-b6af-772cbfaa1129",
+            "inputs": [
+                {
+                    "name": "sotnconnectivity0_eir",
+                    "type": "string",
+                    "description": "The eir for SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_cir",
+                    "type": "string",
+                    "description": "The cir for SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_endTime",
+                    "type": "string",
+                    "description": "End Time",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_ebs",
+                    "type": "string",
+                    "description": "The ebs for SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_startTime",
+                    "type": "string",
+                    "description": "Start Time",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_dualLink",
+                    "type": "boolean",
+                    "description": "is Active/standby enabled",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_reroute",
+                    "type": "boolean",
+                    "description": "Whether to support automatic rerouting",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_cbs",
+                    "type": "string",
+                    "description": "The cbs for SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_name",
+                    "type": "string",
+                    "description": "the name of the SOTN connectivity",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_SLS",
+                    "type": "string",
+                    "description": "Business Service Level",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_description",
+                    "type": "string",
+                    "description": "The description of the SOTN connectivity",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_couplingFlag",
+                    "type": "boolean",
+                    "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_colorAware",
+                    "type": "boolean",
+                    "description": "The colorAware of the SOTN connectivity. Only for Ethernet type",
+                    "isRequired": "true",
+                    "defaultValue": "null"
+                },
+                {
+                    "name": "sotnconnectivity0_COS",
+                    "type": "string",
+                    "description": "Business Class of Service of VPN",
+                    "isRequired": "true",
+                    "defaultValue": "standard"
+                }
+            ],
+            "nestedTemplates": []
+        }
+    ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/assets/json/specific_link _nfo.json b/usecaseui-portal/src/assets/json/specific_link _nfo.json
new file mode 100644
index 00000000..e9911409
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/specific_link _nfo.json
@@ -0,0 +1,52 @@
+{
+  "link-name": "nodeId-79.79.79.79-ltpId-4_nodeId-78.78.78.78-ltpId-4",
+  "in-maint": false,
+  "link-type": "some type",
+  "speed-value": "some speed",
+  "resource-version": "1536212883031",
+  "operational-status": "up",
+  "relationship-list": {
+    "relationship": [
+      {
+        "related-to": "p-interface",
+        "relationship-label": "tosca.relationships.network.LinksTo",
+        "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-4",
+        "relationship-data": [
+          {
+            "relationship-key": "pnf.pnf-name",
+            "relationship-value": "pnf1000"
+          },
+          {
+            "relationship-key": "p-interface.interface-name",
+            "relationship-value": "nodeId-79.79.79.79-ltpId-4"
+          }
+        ],
+        "related-to-property": [
+          {
+            "property-key": "p-interface.prov-status"
+          }
+        ]
+      },
+      {
+        "related-to": "p-interface",
+        "relationship-label": "tosca.relationships.network.LinksTo",
+        "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-4",
+        "relationship-data": [
+          {
+            "relationship-key": "pnf.pnf-name",
+            "relationship-value": "pnf2000"
+          },
+          {
+            "relationship-key": "p-interface.interface-name",
+            "relationship-value": "nodeId-78.78.78.78-ltpId-4"
+          }
+        ],
+        "related-to-property": [
+          {
+            "property-key": "p-interface.prov-status"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/usecaseui-portal/src/assets/json/status.json b/usecaseui-portal/src/assets/json/status.json
new file mode 100644
index 00000000..eeff6f35
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/status.json
@@ -0,0 +1,3 @@
+{
+  "status":"SUCCESS"
+}
diff --git a/usecaseui-portal/src/assets/json/status2.json b/usecaseui-portal/src/assets/json/status2.json
new file mode 100644
index 00000000..05e0a4fc
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/status2.json
@@ -0,0 +1 @@
+"fail"
diff --git a/usecaseui-portal/src/assets/json/url.json b/usecaseui-portal/src/assets/json/url.json
new file mode 100644
index 00000000..e84b42d8
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/url.json
@@ -0,0 +1,8 @@
+{
+  "esr-system-info-id": "gongjie666",
+  "service-url": "http://10.10.10.10:8080/",
+  "user-name": "demo",
+  "password": "demo123456!",
+  "system-type": "ONAP",
+  "resource-version": "1536221798873"
+}
diff --git a/usecaseui-portal/src/assets/json/vpnbinding.json b/usecaseui-portal/src/assets/json/vpnbinding.json
new file mode 100644
index 00000000..04ff2a6d
--- /dev/null
+++ b/usecaseui-portal/src/assets/json/vpnbinding.json
@@ -0,0 +1,82 @@
+{
+  "vpn-binding": [
+    {
+      "vpn-id": "pnf1000-vpn1",
+      "vpn-name": "pnf1000-vpn1",
+      "vpn-type": "ethernet",
+      "access-provider-id": "5555",
+      "access-client-id": "6666",
+      "access-topology-id": "100",
+      "src-access-node-id": "10.10.10.10",
+      "src-access-ltp-id": "14",
+      "dst-access-node-id": "10.10.10.10",
+      "dst-access-ltp-id": "2",
+      "operational-status": "Created",
+      "model-customization-id": "",
+      "model-invariant-id": "",
+      "model-version-id": "",
+      "resource-version": "1536135677693",
+      "relationship-list": {
+        "relationship": [
+          {
+            "related-to": "connectivity",
+            "relationship-label": "org.onap.relationships.inventory.PartOf",
+            "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84",
+            "relationship-data": [
+              {
+                "relationship-key": "connectivity.connectivity-id",
+                "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "connectivity.etht-svc-name",
+                "property-value": "SOTNVPNInfra"
+              }
+            ]
+          },
+          {
+            "related-to": "p-interface",
+            "relationship-label": "org.onap.relationships.inventory.BindsTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf1000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-79.79.79.79-ltpId-2"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          },
+          {
+            "related-to": "p-interface",
+            "relationship-label": "org.onap.relationships.inventory.BindsTo",
+            "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1",
+            "relationship-data": [
+              {
+                "relationship-key": "pnf.pnf-name",
+                "relationship-value": "pnf1000"
+              },
+              {
+                "relationship-key": "p-interface.interface-name",
+                "relationship-value": "nodeId-79.79.79.79-ltpId-1"
+              }
+            ],
+            "related-to-property": [
+              {
+                "property-key": "p-interface.prov-status"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/environments/environment.prod.ts b/usecaseui-portal/src/environments/environment.prod.ts
new file mode 100644
index 00000000..3612073b
--- /dev/null
+++ b/usecaseui-portal/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/usecaseui-portal/src/environments/environment.ts b/usecaseui-portal/src/environments/environment.ts
new file mode 100644
index 00000000..b7f639ae
--- /dev/null
+++ b/usecaseui-portal/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};
diff --git a/usecaseui-portal/src/favicon.ico b/usecaseui-portal/src/favicon.ico
new file mode 100644
index 00000000..8081c7ce
--- /dev/null
+++ b/usecaseui-portal/src/favicon.ico
diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html
new file mode 100644
index 00000000..f8281491
--- /dev/null
+++ b/usecaseui-portal/src/index.html
@@ -0,0 +1,29 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Uui2</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/usecaseui-portal/src/main.ts b/usecaseui-portal/src/main.ts
new file mode 100644
index 00000000..91ec6da5
--- /dev/null
+++ b/usecaseui-portal/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));
diff --git a/usecaseui-portal/src/my-theme.css b/usecaseui-portal/src/my-theme.css
new file mode 100644
index 00000000..ac66bcc9
--- /dev/null
+++ b/usecaseui-portal/src/my-theme.css
@@ -0,0 +1,18190 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+/* stylelint-disable at-rule-no-unknown */
+@font-face {
+  font-family: "Monospaced Number";
+  src: local("Tahoma");
+  unicode-range: U+30-39;
+}
+@font-face {
+  font-family: "Chinese Quote";
+  src: local("PingFang SC"), local("SimSun");
+  unicode-range: U+2018, U+2019, U+201c, U+201d;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+article,
+aside,
+dialog,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+  display: block;
+}
+body {
+  margin: 0;
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+}
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: .5em;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+address {
+  margin-bottom: 1em;
+  font-style: normal;
+  line-height: inherit;
+}
+input[type="text"],
+input[type="password"],
+input[type="number"],
+textarea {
+  -webkit-appearance: none;
+}
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+dt {
+  font-weight: 500;
+}
+dd {
+  margin-bottom: .5em;
+  margin-left: 0;
+}
+blockquote {
+  margin: 0 0 1em;
+}
+dfn {
+  font-style: italic;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+a {
+  color: #1890ff;
+  background-color: transparent;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color .3s;
+  -webkit-text-decoration-skip: objects;
+}
+a:focus {
+  text-decoration: underline;
+  text-decoration-skip: ink;
+}
+a:hover {
+  color: #40a9ff;
+}
+a:active {
+  color: #096dd9;
+}
+a:active,
+a:hover {
+  outline: 0;
+  text-decoration: none;
+}
+a[disabled] {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: Consolas, Menlo, Courier, monospace;
+  font-size: 1em;
+}
+pre {
+  margin-top: 0;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+figure {
+  margin: 0 0 1em;
+}
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+table {
+  border-collapse: collapse;
+}
+caption {
+  padding-top: .75em;
+  padding-bottom: .3em;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: left;
+  caption-side: bottom;
+}
+th {
+  text-align: inherit;
+}
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5em;
+  font-size: 1.5em;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+progress {
+  vertical-align: baseline;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+output {
+  display: inline-block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+mark {
+  padding: .2em;
+  background-color: #feffe6;
+}
+::selection {
+  background: #1890ff;
+  color: #fff;
+}
+.clearfix {
+  zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+@font-face {
+  font-family: 'anticon';
+  src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot');
+  /* IE9*/
+  src: url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf') format('truetype'), /* iOS 4.1- */ url('https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont') format('svg');
+}
+.anticon {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.anticon:before {
+  display: block;
+  font-family: "anticon" !important;
+}
+.anticon-step-forward:before {
+  content: "\e600";
+}
+.anticon-step-backward:before {
+  content: "\e601";
+}
+.anticon-forward:before {
+  content: "\e602";
+}
+.anticon-backward:before {
+  content: "\e603";
+}
+.anticon-caret-right:before {
+  content: "\e604";
+}
+.anticon-caret-left:before {
+  content: "\e605";
+}
+.anticon-caret-down:before {
+  content: "\e606";
+}
+.anticon-caret-up:before {
+  content: "\e607";
+}
+.anticon-right-circle:before {
+  content: "\e608";
+}
+.anticon-circle-right:before {
+  content: "\e608";
+}
+.anticon-caret-circle-right:before {
+  content: "\e608";
+}
+.anticon-left-circle:before {
+  content: "\e609";
+}
+.anticon-circle-left:before {
+  content: "\e609";
+}
+.anticon-caret-circle-left:before {
+  content: "\e609";
+}
+.anticon-up-circle:before {
+  content: "\e60a";
+}
+.anticon-circle-up:before {
+  content: "\e60a";
+}
+.anticon-caret-circle-up:before {
+  content: "\e60a";
+}
+.anticon-down-circle:before {
+  content: "\e60b";
+}
+.anticon-circle-down:before {
+  content: "\e60b";
+}
+.anticon-caret-circle-down:before {
+  content: "\e60b";
+}
+.anticon-right-circle-o:before {
+  content: "\e60c";
+}
+.anticon-circle-o-right:before {
+  content: "\e60c";
+}
+.anticon-caret-circle-o-right:before {
+  content: "\e60c";
+}
+.anticon-left-circle-o:before {
+  content: "\e60d";
+}
+.anticon-circle-o-left:before {
+  content: "\e60d";
+}
+.anticon-caret-circle-o-left:before {
+  content: "\e60d";
+}
+.anticon-up-circle-o:before {
+  content: "\e60e";
+}
+.anticon-circle-o-up:before {
+  content: "\e60e";
+}
+.anticon-caret-circle-o-up:before {
+  content: "\e60e";
+}
+.anticon-down-circle-o:before {
+  content: "\e60f";
+}
+.anticon-circle-o-down:before {
+  content: "\e60f";
+}
+.anticon-caret-circle-o-down:before {
+  content: "\e60f";
+}
+.anticon-verticle-left:before {
+  content: "\e610";
+}
+.anticon-verticle-right:before {
+  content: "\e611";
+}
+.anticon-rollback:before {
+  content: "\e612";
+}
+.anticon-retweet:before {
+  content: "\e613";
+}
+.anticon-shrink:before {
+  content: "\e614";
+}
+.anticon-arrows-alt:before {
+  content: "\e615";
+}
+.anticon-arrow-salt:before {
+  content: "\e615";
+}
+.anticon-reload:before {
+  content: "\e616";
+}
+.anticon-double-right:before {
+  content: "\e617";
+}
+.anticon-double-left:before {
+  content: "\e618";
+}
+.anticon-arrow-down:before {
+  content: "\e619";
+}
+.anticon-arrow-up:before {
+  content: "\e61a";
+}
+.anticon-arrow-right:before {
+  content: "\e61b";
+}
+.anticon-arrow-left:before {
+  content: "\e61c";
+}
+.anticon-down:before {
+  content: "\e61d";
+}
+.anticon-up:before {
+  content: "\e61e";
+}
+.anticon-right:before {
+  content: "\e61f";
+}
+.anticon-left:before {
+  content: "\e620";
+}
+.anticon-minus-square-o:before {
+  content: "\e621";
+}
+.anticon-minus-circle:before {
+  content: "\e622";
+}
+.anticon-minus-circle-o:before {
+  content: "\e623";
+}
+.anticon-minus:before {
+  content: "\e624";
+}
+.anticon-plus-circle-o:before {
+  content: "\e625";
+}
+.anticon-plus-circle:before {
+  content: "\e626";
+}
+.anticon-plus:before {
+  content: "\e627";
+}
+.anticon-info-circle:before {
+  content: "\e628";
+}
+.anticon-info-circle-o:before {
+  content: "\e629";
+}
+.anticon-info:before {
+  content: "\e62a";
+}
+.anticon-exclamation:before {
+  content: "\e62b";
+}
+.anticon-exclamation-circle:before {
+  content: "\e62c";
+}
+.anticon-exclamation-circle-o:before {
+  content: "\e62d";
+}
+.anticon-close-circle:before {
+  content: "\e62e";
+}
+.anticon-cross-circle:before {
+  content: "\e62e";
+}
+.anticon-close-circle-o:before {
+  content: "\e62f";
+}
+.anticon-cross-circle-o:before {
+  content: "\e62f";
+}
+.anticon-check-circle:before {
+  content: "\e630";
+}
+.anticon-check-circle-o:before {
+  content: "\e631";
+}
+.anticon-check:before {
+  content: "\e632";
+}
+.anticon-close:before {
+  content: "\e633";
+}
+.anticon-cross:before {
+  content: "\e633";
+}
+.anticon-customer-service:before {
+  content: "\e634";
+}
+.anticon-customerservice:before {
+  content: "\e634";
+}
+.anticon-credit-card:before {
+  content: "\e635";
+}
+.anticon-code-o:before {
+  content: "\e636";
+}
+.anticon-book:before {
+  content: "\e637";
+}
+.anticon-bars:before {
+  content: "\e639";
+}
+.anticon-question:before {
+  content: "\e63a";
+}
+.anticon-question-circle:before {
+  content: "\e63b";
+}
+.anticon-question-circle-o:before {
+  content: "\e63c";
+}
+.anticon-pause:before {
+  content: "\e63d";
+}
+.anticon-pause-circle:before {
+  content: "\e63e";
+}
+.anticon-pause-circle-o:before {
+  content: "\e63f";
+}
+.anticon-clock-circle:before {
+  content: "\e640";
+}
+.anticon-clock-circle-o:before {
+  content: "\e641";
+}
+.anticon-swap:before {
+  content: "\e642";
+}
+.anticon-swap-left:before {
+  content: "\e643";
+}
+.anticon-swap-right:before {
+  content: "\e644";
+}
+.anticon-plus-square-o:before {
+  content: "\e645";
+}
+.anticon-frown:before {
+  content: "\e646";
+}
+.anticon-frown-circle:before {
+  content: "\e646";
+}
+.anticon-ellipsis:before {
+  content: "\e647";
+}
+.anticon-copy:before {
+  content: "\e648";
+}
+.anticon-menu-fold:before {
+  content: "\e9ac";
+}
+.anticon-mail:before {
+  content: "\e659";
+}
+.anticon-logout:before {
+  content: "\e65a";
+}
+.anticon-link:before {
+  content: "\e65b";
+}
+.anticon-area-chart:before {
+  content: "\e65c";
+}
+.anticon-line-chart:before {
+  content: "\e65d";
+}
+.anticon-home:before {
+  content: "\e65e";
+}
+.anticon-laptop:before {
+  content: "\e65f";
+}
+.anticon-star:before {
+  content: "\e660";
+}
+.anticon-star-o:before {
+  content: "\e661";
+}
+.anticon-folder:before {
+  content: "\e662";
+}
+.anticon-filter:before {
+  content: "\e663";
+}
+.anticon-file:before {
+  content: "\e664";
+}
+.anticon-exception:before {
+  content: "\e665";
+}
+.anticon-meh:before {
+  content: "\e666";
+}
+.anticon-meh-circle:before {
+  content: "\e666";
+}
+.anticon-meh-o:before {
+  content: "\e667";
+}
+.anticon-shopping-cart:before {
+  content: "\e668";
+}
+.anticon-save:before {
+  content: "\e669";
+}
+.anticon-user:before {
+  content: "\e66a";
+}
+.anticon-video-camera:before {
+  content: "\e66b";
+}
+.anticon-to-top:before {
+  content: "\e66c";
+}
+.anticon-team:before {
+  content: "\e66d";
+}
+.anticon-tablet:before {
+  content: "\e66e";
+}
+.anticon-solution:before {
+  content: "\e66f";
+}
+.anticon-search:before {
+  content: "\e670";
+}
+.anticon-share-alt:before {
+  content: "\e671";
+}
+.anticon-setting:before {
+  content: "\e672";
+}
+.anticon-poweroff:before {
+  content: "\e6d5";
+}
+.anticon-picture:before {
+  content: "\e674";
+}
+.anticon-phone:before {
+  content: "\e675";
+}
+.anticon-paper-clip:before {
+  content: "\e676";
+}
+.anticon-notification:before {
+  content: "\e677";
+}
+.anticon-mobile:before {
+  content: "\e678";
+}
+.anticon-menu-unfold:before {
+  content: "\e9ad";
+}
+.anticon-inbox:before {
+  content: "\e67a";
+}
+.anticon-lock:before {
+  content: "\e67b";
+}
+.anticon-qrcode:before {
+  content: "\e67c";
+}
+.anticon-play-circle:before {
+  content: "\e6d0";
+}
+.anticon-play-circle-o:before {
+  content: "\e6d1";
+}
+.anticon-tag:before {
+  content: "\e6d2";
+}
+.anticon-tag-o:before {
+  content: "\e6d3";
+}
+.anticon-tags:before {
+  content: "\e67d";
+}
+.anticon-tags-o:before {
+  content: "\e67e";
+}
+.anticon-cloud-o:before {
+  content: "\e67f";
+}
+.anticon-cloud:before {
+  content: "\e680";
+}
+.anticon-cloud-upload:before {
+  content: "\e681";
+}
+.anticon-cloud-download:before {
+  content: "\e682";
+}
+.anticon-cloud-download-o:before {
+  content: "\e683";
+}
+.anticon-cloud-upload-o:before {
+  content: "\e684";
+}
+.anticon-environment:before {
+  content: "\e685";
+}
+.anticon-environment-o:before {
+  content: "\e686";
+}
+.anticon-eye:before {
+  content: "\e687";
+}
+.anticon-eye-o:before {
+  content: "\e688";
+}
+.anticon-camera:before {
+  content: "\e689";
+}
+.anticon-camera-o:before {
+  content: "\e68a";
+}
+.anticon-windows:before {
+  content: "\e68b";
+}
+.anticon-apple:before {
+  content: "\e68c";
+}
+.anticon-apple-o:before {
+  content: "\e6d4";
+}
+.anticon-android:before {
+  content: "\e938";
+}
+.anticon-android-o:before {
+  content: "\e68d";
+}
+.anticon-aliwangwang:before {
+  content: "\e68e";
+}
+.anticon-aliwangwang-o:before {
+  content: "\e68f";
+}
+.anticon-export:before {
+  content: "\e691";
+}
+.anticon-edit:before {
+  content: "\e692";
+}
+.anticon-circle-down-o:before {
+  content: "\e693";
+}
+.anticon-circle-down-:before {
+  content: "\e694";
+}
+.anticon-appstore-o:before {
+  content: "\e695";
+}
+.anticon-appstore:before {
+  content: "\e696";
+}
+.anticon-scan:before {
+  content: "\e697";
+}
+.anticon-file-text:before {
+  content: "\e698";
+}
+.anticon-folder-open:before {
+  content: "\e699";
+}
+.anticon-hdd:before {
+  content: "\e69a";
+}
+.anticon-ie:before {
+  content: "\e69b";
+}
+.anticon-file-jpg:before {
+  content: "\e69c";
+}
+.anticon-like:before {
+  content: "\e64c";
+}
+.anticon-like-o:before {
+  content: "\e69d";
+}
+.anticon-dislike:before {
+  content: "\e64b";
+}
+.anticon-dislike-o:before {
+  content: "\e69e";
+}
+.anticon-delete:before {
+  content: "\e69f";
+}
+.anticon-enter:before {
+  content: "\e6a0";
+}
+.anticon-pushpin-o:before {
+  content: "\e6a1";
+}
+.anticon-pushpin:before {
+  content: "\e6a2";
+}
+.anticon-heart:before {
+  content: "\e6a3";
+}
+.anticon-heart-o:before {
+  content: "\e6a4";
+}
+.anticon-pay-circle:before {
+  content: "\e6a5";
+}
+.anticon-pay-circle-o:before {
+  content: "\e6a6";
+}
+.anticon-smile:before {
+  content: "\e6a7";
+}
+.anticon-smile-circle:before {
+  content: "\e6a7";
+}
+.anticon-smile-o:before {
+  content: "\e6a8";
+}
+.anticon-frown-o:before {
+  content: "\e6a9";
+}
+.anticon-calculator:before {
+  content: "\e6aa";
+}
+.anticon-message:before {
+  content: "\e6ab";
+}
+.anticon-chrome:before {
+  content: "\e6ac";
+}
+.anticon-github:before {
+  content: "\e6ad";
+}
+.anticon-file-unknown:before {
+  content: "\e6af";
+}
+.anticon-file-excel:before {
+  content: "\e6b0";
+}
+.anticon-file-ppt:before {
+  content: "\e6b1";
+}
+.anticon-file-word:before {
+  content: "\e6b2";
+}
+.anticon-file-pdf:before {
+  content: "\e6b3";
+}
+.anticon-desktop:before {
+  content: "\e6b4";
+}
+.anticon-upload:before {
+  content: "\e6b6";
+}
+.anticon-download:before {
+  content: "\e6b7";
+}
+.anticon-pie-chart:before {
+  content: "\e6b8";
+}
+.anticon-unlock:before {
+  content: "\e6ba";
+}
+.anticon-calendar:before {
+  content: "\e6bb";
+}
+.anticon-windows-o:before {
+  content: "\e6bc";
+}
+.anticon-dot-chart:before {
+  content: "\e6bd";
+}
+.anticon-bar-chart:before {
+  content: "\e6be";
+}
+.anticon-code:before {
+  content: "\e6bf";
+}
+.anticon-api:before {
+  content: "\e951";
+}
+.anticon-plus-square:before {
+  content: "\e6c0";
+}
+.anticon-minus-square:before {
+  content: "\e6c1";
+}
+.anticon-close-square:before {
+  content: "\e6c2";
+}
+.anticon-close-square-o:before {
+  content: "\e6c3";
+}
+.anticon-check-square:before {
+  content: "\e6c4";
+}
+.anticon-check-square-o:before {
+  content: "\e6c5";
+}
+.anticon-fast-backward:before {
+  content: "\e6c6";
+}
+.anticon-fast-forward:before {
+  content: "\e6c7";
+}
+.anticon-up-square:before {
+  content: "\e6c8";
+}
+.anticon-down-square:before {
+  content: "\e6c9";
+}
+.anticon-left-square:before {
+  content: "\e6ca";
+}
+.anticon-right-square:before {
+  content: "\e6cb";
+}
+.anticon-right-square-o:before {
+  content: "\e6cc";
+}
+.anticon-left-square-o:before {
+  content: "\e6cd";
+}
+.anticon-down-square-o:before {
+  content: "\e6ce";
+}
+.anticon-up-square-o:before {
+  content: "\e6cf";
+}
+.anticon-loading:before {
+  content: "\e64d";
+}
+.anticon-loading-3-quarters:before {
+  content: "\e6ae";
+}
+.anticon-bulb:before {
+  content: "\e649";
+}
+.anticon-select:before {
+  content: "\e64a";
+}
+.anticon-addfile:before,
+.anticon-file-add:before {
+  content: "\e910";
+}
+.anticon-addfolder:before,
+.anticon-folder-add:before {
+  content: "\e914";
+}
+.anticon-switcher:before {
+  content: "\e913";
+}
+.anticon-rocket:before {
+  content: "\e90f";
+}
+.anticon-dingding:before {
+  content: "\e923";
+}
+.anticon-dingding-o:before {
+  content: "\e925";
+}
+.anticon-bell:before {
+  content: "\e64e";
+}
+.anticon-disconnect:before {
+  content: "\e64f";
+}
+.anticon-database:before {
+  content: "\e650";
+}
+.anticon-compass:before {
+  content: "\e6db";
+}
+.anticon-barcode:before {
+  content: "\e652";
+}
+.anticon-hourglass:before {
+  content: "\e653";
+}
+.anticon-key:before {
+  content: "\e654";
+}
+.anticon-flag:before {
+  content: "\e655";
+}
+.anticon-layout:before {
+  content: "\e656";
+}
+.anticon-login:before {
+  content: "\e657";
+}
+.anticon-printer:before {
+  content: "\e673";
+}
+.anticon-sound:before {
+  content: "\e6e9";
+}
+.anticon-usb:before {
+  content: "\e6d7";
+}
+.anticon-skin:before {
+  content: "\e6d8";
+}
+.anticon-tool:before {
+  content: "\e6d9";
+}
+.anticon-sync:before {
+  content: "\e6da";
+}
+.anticon-wifi:before {
+  content: "\e6d6";
+}
+.anticon-car:before {
+  content: "\e6dc";
+}
+.anticon-copyright:before {
+  content: "\e6de";
+}
+.anticon-schedule:before {
+  content: "\e6df";
+}
+.anticon-user-add:before {
+  content: "\e6ed";
+}
+.anticon-user-delete:before {
+  content: "\e6e0";
+}
+.anticon-usergroup-add:before {
+  content: "\e6dd";
+}
+.anticon-usergroup-delete:before {
+  content: "\e6e1";
+}
+.anticon-man:before {
+  content: "\e6e2";
+}
+.anticon-woman:before {
+  content: "\e6ec";
+}
+.anticon-shop:before {
+  content: "\e6e3";
+}
+.anticon-gift:before {
+  content: "\e6e4";
+}
+.anticon-idcard:before {
+  content: "\e6e5";
+}
+.anticon-medicine-box:before {
+  content: "\e6e6";
+}
+.anticon-red-envelope:before {
+  content: "\e6e7";
+}
+.anticon-coffee:before {
+  content: "\e6e8";
+}
+.anticon-trademark:before {
+  content: "\e651";
+}
+.anticon-safety:before {
+  content: "\e6ea";
+}
+.anticon-wallet:before {
+  content: "\e6eb";
+}
+.anticon-bank:before {
+  content: "\e6ee";
+}
+.anticon-trophy:before {
+  content: "\e6ef";
+}
+.anticon-contacts:before {
+  content: "\e6f0";
+}
+.anticon-global:before {
+  content: "\e6f1";
+}
+.anticon-shake:before {
+  content: "\e94f";
+}
+.anticon-fork:before {
+  content: "\e6f2";
+}
+.anticon-dashboard:before {
+  content: "\e99a";
+}
+.anticon-profile:before {
+  content: "\e999";
+}
+.anticon-table:before {
+  content: "\e998";
+}
+.anticon-warning:before {
+  content: "\e997";
+}
+.anticon-form:before {
+  content: "\e996";
+}
+.anticon-spin:before {
+  display: inline-block;
+  animation: loadingCircle 1s infinite linear;
+}
+.anticon-weibo-square:before {
+  content: "\e6f5";
+}
+.anticon-weibo-circle:before {
+  content: "\e6f4";
+}
+.anticon-taobao-circle:before {
+  content: "\e6f3";
+}
+.anticon-html5:before {
+  content: "\e9c7";
+}
+.anticon-weibo:before {
+  content: "\e9c6";
+}
+.anticon-twitter:before {
+  content: "\e9c5";
+}
+.anticon-wechat:before {
+  content: "\e9c4";
+}
+.anticon-youtube:before {
+  content: "\e9c3";
+}
+.anticon-alipay-circle:before {
+  content: "\e9c2";
+}
+.anticon-taobao:before {
+  content: "\e9c1";
+}
+.anticon-skype:before {
+  content: "\e9c0";
+}
+.anticon-qq:before {
+  content: "\e9bf";
+}
+.anticon-medium-workmark:before {
+  content: "\e9be";
+}
+.anticon-gitlab:before {
+  content: "\e9bd";
+}
+.anticon-medium:before {
+  content: "\e9bc";
+}
+.anticon-linkedin:before {
+  content: "\e9bb";
+}
+.anticon-google-plus:before {
+  content: "\e9ba";
+}
+.anticon-dropbox:before {
+  content: "\e9b9";
+}
+.anticon-facebook:before {
+  content: "\e9b8";
+}
+.anticon-codepen:before {
+  content: "\e9b7";
+}
+.anticon-amazon:before {
+  content: "\e9b6";
+}
+.anticon-google:before {
+  content: "\e9b5";
+}
+.anticon-codepen-circle:before {
+  content: "\e9b4";
+}
+.anticon-alipay:before {
+  content: "\e9b3";
+}
+.anticon-ant-design:before {
+  content: "\e9b2";
+}
+.anticon-aliyun:before {
+  content: "\e9f4";
+}
+.anticon-zhihu:before {
+  content: "\e703";
+}
+.anticon-file-markdown:before {
+  content: "\e704";
+}
+.anticon-slack:before {
+  content: "\e705";
+}
+.anticon-slack-square:before {
+  content: "\e706";
+}
+.anticon-behance:before {
+  content: "\e707";
+}
+.anticon-behance-square:before {
+  content: "\e708";
+}
+.anticon-dribbble:before {
+  content: "\e709";
+}
+.anticon-dribbble-square:before {
+  content: "\e70a";
+}
+.anticon-instagram:before {
+  content: "\e70b";
+}
+.anticon-yuque:before {
+  content: "\e70c";
+}
+.fade-enter,
+.fade-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.fade-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.fade-enter.fade-enter-active,
+.fade-appear.fade-appear-active {
+  animation-name: antFadeIn;
+  animation-play-state: running;
+}
+.fade-leave.fade-leave-active {
+  animation-name: antFadeOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.fade-enter,
+.fade-appear {
+  opacity: 0;
+  animation-timing-function: linear;
+}
+.fade-leave {
+  animation-timing-function: linear;
+}
+@keyframes antFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes antFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.move-up-enter,
+.move-up-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-up-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-up-enter.move-up-enter-active,
+.move-up-appear.move-up-appear-active {
+  animation-name: antMoveUpIn;
+  animation-play-state: running;
+}
+.move-up-leave.move-up-leave-active {
+  animation-name: antMoveUpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.move-up-enter,
+.move-up-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-up-leave {
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-down-enter,
+.move-down-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-down-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-down-enter.move-down-enter-active,
+.move-down-appear.move-down-appear-active {
+  animation-name: antMoveDownIn;
+  animation-play-state: running;
+}
+.move-down-leave.move-down-leave-active {
+  animation-name: antMoveDownOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.move-down-enter,
+.move-down-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-down-leave {
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-left-enter,
+.move-left-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-left-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-left-enter.move-left-enter-active,
+.move-left-appear.move-left-appear-active {
+  animation-name: antMoveLeftIn;
+  animation-play-state: running;
+}
+.move-left-leave.move-left-leave-active {
+  animation-name: antMoveLeftOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.move-left-enter,
+.move-left-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-left-leave {
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-right-enter,
+.move-right-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-right-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-right-enter.move-right-enter-active,
+.move-right-appear.move-right-appear-active {
+  animation-name: antMoveRightIn;
+  animation-play-state: running;
+}
+.move-right-leave.move-right-leave-active {
+  animation-name: antMoveRightOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.move-right-enter,
+.move-right-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-right-leave {
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+@keyframes antMoveDownIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+@keyframes antMoveDownOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+@keyframes antMoveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+@keyframes antMoveLeftOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+@keyframes antMoveRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+@keyframes antMoveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+@keyframes antMoveUpIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+@keyframes antMoveUpOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+@keyframes loadingCircle {
+  0% {
+    transform-origin: 50% 50%;
+    transform: rotate(0deg);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg);
+  }
+}
+.slide-up-enter,
+.slide-up-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-up-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-up-enter.slide-up-enter-active,
+.slide-up-appear.slide-up-appear-active {
+  animation-name: antSlideUpIn;
+  animation-play-state: running;
+}
+.slide-up-leave.slide-up-leave-active {
+  animation-name: antSlideUpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.slide-up-enter,
+.slide-up-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-up-leave {
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-down-enter,
+.slide-down-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-down-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-down-enter.slide-down-enter-active,
+.slide-down-appear.slide-down-appear-active {
+  animation-name: antSlideDownIn;
+  animation-play-state: running;
+}
+.slide-down-leave.slide-down-leave-active {
+  animation-name: antSlideDownOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.slide-down-enter,
+.slide-down-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-down-leave {
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-left-enter,
+.slide-left-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-left-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-left-enter.slide-left-enter-active,
+.slide-left-appear.slide-left-appear-active {
+  animation-name: antSlideLeftIn;
+  animation-play-state: running;
+}
+.slide-left-leave.slide-left-leave-active {
+  animation-name: antSlideLeftOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.slide-left-enter,
+.slide-left-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-left-leave {
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-right-enter,
+.slide-right-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-right-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.slide-right-enter.slide-right-enter-active,
+.slide-right-appear.slide-right-appear-active {
+  animation-name: antSlideRightIn;
+  animation-play-state: running;
+}
+.slide-right-leave.slide-right-leave-active {
+  animation-name: antSlideRightOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.slide-right-enter,
+.slide-right-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-right-leave {
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes antSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+@keyframes antSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0.8);
+  }
+}
+@keyframes antSlideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+}
+@keyframes antSlideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0.8);
+  }
+}
+@keyframes antSlideLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+}
+@keyframes antSlideLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0.8);
+  }
+}
+@keyframes antSlideRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+}
+@keyframes antSlideRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0.8);
+  }
+}
+.swing-enter,
+.swing-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.swing-enter.swing-enter-active,
+.swing-appear.swing-appear-active {
+  animation-name: antSwingIn;
+  animation-play-state: running;
+}
+@keyframes antSwingIn {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(10px);
+  }
+  60% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+}
+.zoom-enter,
+.zoom-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+  animation-name: antZoomIn;
+  animation-play-state: running;
+}
+.zoom-leave.zoom-leave-active {
+  animation-name: antZoomOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-enter,
+.zoom-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-enter,
+.zoom-big-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-enter.zoom-big-enter-active,
+.zoom-big-appear.zoom-big-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.zoom-big-leave.zoom-big-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-big-enter,
+.zoom-big-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-fast-leave {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-fast-enter.zoom-big-fast-enter-active,
+.zoom-big-fast-appear.zoom-big-fast-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.zoom-big-fast-leave.zoom-big-fast-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-fast-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-up-enter,
+.zoom-up-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-up-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-up-enter.zoom-up-enter-active,
+.zoom-up-appear.zoom-up-appear-active {
+  animation-name: antZoomUpIn;
+  animation-play-state: running;
+}
+.zoom-up-leave.zoom-up-leave-active {
+  animation-name: antZoomUpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-up-enter,
+.zoom-up-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-up-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-down-enter,
+.zoom-down-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-down-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-down-enter.zoom-down-enter-active,
+.zoom-down-appear.zoom-down-appear-active {
+  animation-name: antZoomDownIn;
+  animation-play-state: running;
+}
+.zoom-down-leave.zoom-down-leave-active {
+  animation-name: antZoomDownOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-down-enter,
+.zoom-down-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-down-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-left-enter,
+.zoom-left-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-left-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-left-enter.zoom-left-enter-active,
+.zoom-left-appear.zoom-left-appear-active {
+  animation-name: antZoomLeftIn;
+  animation-play-state: running;
+}
+.zoom-left-leave.zoom-left-leave-active {
+  animation-name: antZoomLeftOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-left-enter,
+.zoom-left-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-left-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-right-enter,
+.zoom-right-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-right-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-right-enter.zoom-right-enter-active,
+.zoom-right-appear.zoom-right-appear-active {
+  animation-name: antZoomRightIn;
+  animation-play-state: running;
+}
+.zoom-right-leave.zoom-right-leave-active {
+  animation-name: antZoomRightOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-right-enter,
+.zoom-right-appear {
+  transform: scale(0);
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-right-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+@keyframes antZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes antZoomOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+@keyframes antZoomBigIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes antZoomBigOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+@keyframes antZoomUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0.8);
+  }
+  100% {
+    transform-origin: 50% 0%;
+    transform: scale(1);
+  }
+}
+@keyframes antZoomUpOut {
+  0% {
+    transform-origin: 50% 0%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0.8);
+  }
+}
+@keyframes antZoomLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0.8);
+  }
+  100% {
+    transform-origin: 0% 50%;
+    transform: scale(1);
+  }
+}
+@keyframes antZoomLeftOut {
+  0% {
+    transform-origin: 0% 50%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0.8);
+  }
+}
+@keyframes antZoomRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0.8);
+  }
+  100% {
+    transform-origin: 100% 50%;
+    transform: scale(1);
+  }
+}
+@keyframes antZoomRightOut {
+  0% {
+    transform-origin: 100% 50%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0.8);
+  }
+}
+@keyframes antZoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0.8);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1);
+  }
+}
+@keyframes antZoomDownOut {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0.8);
+  }
+}
+.ant-motion-collapse {
+  overflow: hidden;
+}
+.ant-motion-collapse-active {
+  transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+}
+nz-affix {
+  display: block;
+}
+.ant-affix {
+  position: fixed;
+  z-index: 10;
+}
+.ant-alert {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  padding: 8px 15px 8px 37px;
+  border-radius: 4px;
+}
+.ant-alert.ant-alert-no-icon {
+  padding: 8px 15px;
+}
+.ant-alert-icon {
+  top: 12.5px;
+  left: 16px;
+  position: absolute;
+}
+.ant-alert-description {
+  font-size: 14px;
+  line-height: 22px;
+  display: none;
+}
+.ant-alert-success {
+  border: 1px solid #b7eb8f;
+  background-color: #f6ffed;
+}
+.ant-alert-success .ant-alert-icon {
+  color: #52c41a;
+}
+.ant-alert-info {
+  border: 1px solid #91d5ff;
+  background-color: #e6f7ff;
+}
+.ant-alert-info .ant-alert-icon {
+  color: #1890ff;
+}
+.ant-alert-warning {
+  border: 1px solid #ffe58f;
+  background-color: #fffbe6;
+}
+.ant-alert-warning .ant-alert-icon {
+  color: #faad14;
+}
+.ant-alert-error {
+  border: 1px solid #ffa39e;
+  background-color: #fff1f0;
+}
+.ant-alert-error .ant-alert-icon {
+  color: #f5222d;
+}
+.ant-alert-close-icon {
+  font-size: 12px;
+  position: absolute;
+  right: 16px;
+  top: 8px;
+  line-height: 22px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.ant-alert-close-icon .anticon-cross {
+  color: rgba(0, 0, 0, 0.45);
+  transition: color .3s;
+}
+.ant-alert-close-icon .anticon-cross:hover {
+  color: #404040;
+}
+.ant-alert-close-text {
+  position: absolute;
+  right: 16px;
+}
+.ant-alert-with-description {
+  padding: 15px 15px 15px 64px;
+  position: relative;
+  border-radius: 4px;
+  color: #54657e;
+  line-height: 1.5;
+}
+.ant-alert-with-description.ant-alert-no-icon {
+  padding: 15px;
+}
+.ant-alert-with-description .ant-alert-icon {
+  position: absolute;
+  top: 16px;
+  left: 24px;
+  font-size: 24px;
+}
+.ant-alert-with-description .ant-alert-close-icon {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.ant-alert-with-description .ant-alert-message {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.85);
+  display: block;
+  margin-bottom: 4px;
+}
+.ant-alert-with-description .ant-alert-description {
+  display: block;
+}
+.ant-alert.ant-alert-close {
+  height: 0 !important;
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transform-origin: 50% 0;
+}
+.ant-alert-slide-up-leave {
+  animation: antAlertSlideUpOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  animation-fill-mode: both;
+}
+.ant-alert-banner {
+  border-radius: 0;
+  border: 0;
+  margin-bottom: 0;
+}
+@keyframes antAlertSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+@keyframes antAlertSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+.ant-anchor {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  padding-left: 2px;
+}
+.ant-anchor-wrapper {
+  background-color: #fff;
+  overflow: auto;
+  padding-left: 4px;
+  margin-left: -4px;
+}
+.ant-anchor-ink {
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.ant-anchor-ink:before {
+  content: ' ';
+  position: relative;
+  width: 2px;
+  height: 100%;
+  display: block;
+  background-color: #e8e8e8;
+  margin: 0 auto;
+}
+.ant-anchor-ink-ball {
+  display: none;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  border: 2px solid #1890ff;
+  background-color: #fff;
+  left: 50%;
+  transition: top 0.3s ease-in-out;
+  transform: translateX(-50%);
+}
+.ant-anchor-ink-ball.visible {
+  display: inline-block;
+}
+.ant-anchor.fixed .ant-anchor-ink .ant-anchor-ink-ball {
+  display: none;
+}
+.ant-anchor-link {
+  padding: 8px 0 8px 16px;
+  line-height: 1;
+}
+.ant-anchor-link-title {
+  display: block;
+  position: relative;
+  transition: all .3s;
+  color: #54657e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 8px;
+}
+.ant-anchor-link-title:only-child {
+  margin-bottom: 0;
+}
+.ant-anchor-link-active > .ant-anchor-link-title {
+  color: #1890ff;
+}
+.ant-anchor-link .ant-anchor-link {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.ant-select-auto-complete {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection {
+  border: 0;
+  box-shadow: none;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection__rendered {
+  margin-left: 0;
+  margin-right: 0;
+  height: 100%;
+  line-height: 32px;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection__placeholder {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+.ant-select-auto-complete.ant-select .ant-select-selection--single {
+  height: auto;
+}
+.ant-select-auto-complete.ant-select .ant-select-search--inline {
+  position: static;
+  float: left;
+}
+.ant-select-auto-complete.ant-select-allow-clear .ant-select-selection:hover .ant-select-selection__rendered {
+  margin-right: 0 !important;
+}
+.ant-select-auto-complete.ant-select .ant-input {
+  background: transparent;
+  border-width: 1px;
+  line-height: 1.5;
+  height: 32px;
+}
+.ant-select-auto-complete.ant-select .ant-input:focus,
+.ant-select-auto-complete.ant-select .ant-input:hover {
+  border-color: #40a9ff;
+}
+.ant-select-auto-complete.ant-select-lg .ant-select-selection__rendered {
+  line-height: 40px;
+}
+.ant-select-auto-complete.ant-select-lg .ant-input {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  height: 40px;
+}
+.ant-select-auto-complete.ant-select-sm .ant-select-selection__rendered {
+  line-height: 24px;
+}
+.ant-select-auto-complete.ant-select-sm .ant-input {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  height: 24px;
+}
+.ant-avatar {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  text-align: center;
+  background: #ccc;
+  color: #fff;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 16px;
+}
+.ant-avatar-image {
+  background: transparent;
+}
+.ant-avatar > * {
+  line-height: 32px;
+}
+.ant-avatar.ant-avatar-icon {
+  font-size: 18px;
+}
+.ant-avatar-lg {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 20px;
+}
+.ant-avatar-lg > * {
+  line-height: 40px;
+}
+.ant-avatar-lg.ant-avatar-icon {
+  font-size: 24px;
+}
+.ant-avatar-sm {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 12px;
+}
+.ant-avatar-sm > * {
+  line-height: 24px;
+}
+.ant-avatar-sm.ant-avatar-icon {
+  font-size: 14px;
+}
+.ant-avatar-square {
+  border-radius: 4px;
+}
+.ant-avatar > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.ant-back-top {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 10;
+  position: fixed;
+  right: 100px;
+  bottom: 50px;
+  height: 40px;
+  width: 40px;
+  cursor: pointer;
+}
+.ant-back-top-content {
+  height: 40px;
+  width: 40px;
+  border-radius: 20px;
+  background-color: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  overflow: hidden;
+}
+.ant-back-top-content:hover {
+  background-color: #54657e;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-back-top-icon {
+  margin: 12px auto;
+  width: 14px;
+  height: 16px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 100%/100% no-repeat;
+}
+@media screen and (max-width: 768px) {
+  .ant-back-top {
+    right: 60px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .ant-back-top {
+    right: 20px;
+  }
+}
+.ant-badge {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+}
+.ant-badge-count {
+  position: absolute;
+  transform: translateX(-50%);
+  top: -10px;
+  height: 20px;
+  border-radius: 10px;
+  min-width: 20px;
+  background: #f5222d;
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: normal;
+  white-space: nowrap;
+  transform-origin: -10% center;
+  box-shadow: 0 0 0 1px #fff;
+}
+.ant-badge-count a,
+.ant-badge-count a:hover {
+  color: #fff;
+}
+.ant-badge-multiple-words {
+  padding: 0 8px;
+}
+.ant-badge-dot {
+  position: absolute;
+  transform: translateX(-50%);
+  transform-origin: 0 center;
+  top: -3px;
+  height: 6px;
+  width: 6px;
+  border-radius: 100%;
+  background: #f5222d;
+  z-index: 10;
+  box-shadow: 0 0 0 1px #fff;
+}
+.ant-badge-status {
+  line-height: inherit;
+  vertical-align: baseline;
+}
+.ant-badge-status-dot {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+.ant-badge-status-success {
+  background-color: #52c41a;
+}
+.ant-badge-status-processing {
+  background-color: #1890ff;
+  position: relative;
+}
+.ant-badge-status-processing:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid #1890ff;
+  content: '';
+  animation: antStatusProcessing 1.2s infinite ease-in-out;
+}
+.ant-badge-status-default {
+  background-color: #d9d9d9;
+}
+.ant-badge-status-error {
+  background-color: #f5222d;
+}
+.ant-badge-status-warning {
+  background-color: #faad14;
+}
+.ant-badge-status-text {
+  color: #54657e;
+  font-size: 14px;
+  margin-left: 8px;
+}
+.ant-badge-zoom-appear,
+.ant-badge-zoom-enter {
+  animation: antZoomBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  animation-fill-mode: both;
+}
+.ant-badge-zoom-leave {
+  animation: antZoomBadgeOut 0.3s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  animation-fill-mode: both;
+}
+.ant-badge-not-a-wrapper .ant-scroll-number {
+  top: auto;
+  display: block;
+  position: relative;
+  transform: none !important;
+}
+@keyframes antStatusProcessing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+.ant-scroll-number {
+  overflow: hidden;
+}
+.ant-scroll-number-only {
+  display: inline-block;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  height: 20px;
+}
+.ant-scroll-number-only > p {
+  height: 20px;
+  margin: 0;
+}
+@keyframes antZoomBadgeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+  100% {
+    transform: scale(1) translateX(-50%);
+  }
+}
+@keyframes antZoomBadgeOut {
+  0% {
+    transform: scale(1) translateX(-50%);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+}
+.ant-breadcrumb {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+.ant-breadcrumb .anticon {
+  font-size: 12px;
+}
+.ant-breadcrumb a {
+  color: rgba(0, 0, 0, 0.45);
+  transition: color .3s;
+}
+.ant-breadcrumb a:hover {
+  color: #40a9ff;
+}
+.ant-breadcrumb > span:last-child {
+  color: #54657e;
+}
+.ant-breadcrumb > span:last-child .ant-breadcrumb-separator {
+  display: none;
+}
+.ant-breadcrumb-separator {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-breadcrumb-link > .anticon + span {
+  margin-left: 4px;
+}
+.ant-btn {
+  line-height: 1.5;
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 0 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 32px;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  color: #54657e;
+  background-color: #fff;
+  border-color: #d9d9d9;
+}
+.ant-btn > .anticon {
+  line-height: 1;
+}
+.ant-btn,
+.ant-btn:active,
+.ant-btn:focus {
+  outline: 0;
+}
+.ant-btn:not([disabled]):hover {
+  text-decoration: none;
+}
+.ant-btn:not([disabled]):active {
+  outline: 0;
+  transition: none;
+}
+.ant-btn.disabled,
+.ant-btn[disabled] {
+  cursor: not-allowed;
+}
+.ant-btn.disabled > *,
+.ant-btn[disabled] > * {
+  pointer-events: none;
+}
+.ant-btn-lg {
+  padding: 0 15px;
+  font-size: 16px;
+  border-radius: 4px;
+  height: 40px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 24px;
+}
+.ant-btn > a:only-child {
+  color: currentColor;
+}
+.ant-btn > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn:hover,
+.ant-btn:focus {
+  color: #40a9ff;
+  background-color: #fff;
+  border-color: #40a9ff;
+}
+.ant-btn:hover > a:only-child,
+.ant-btn:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn:hover > a:only-child:after,
+.ant-btn:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn:active,
+.ant-btn.active {
+  color: #096dd9;
+  background-color: #fff;
+  border-color: #096dd9;
+}
+.ant-btn:active > a:only-child,
+.ant-btn.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn:active > a:only-child:after,
+.ant-btn.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn.disabled,
+.ant-btn[disabled],
+.ant-btn.disabled:hover,
+.ant-btn[disabled]:hover,
+.ant-btn.disabled:focus,
+.ant-btn[disabled]:focus,
+.ant-btn.disabled:active,
+.ant-btn[disabled]:active,
+.ant-btn.disabled.active,
+.ant-btn[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn.disabled > a:only-child,
+.ant-btn[disabled] > a:only-child,
+.ant-btn.disabled:hover > a:only-child,
+.ant-btn[disabled]:hover > a:only-child,
+.ant-btn.disabled:focus > a:only-child,
+.ant-btn[disabled]:focus > a:only-child,
+.ant-btn.disabled:active > a:only-child,
+.ant-btn[disabled]:active > a:only-child,
+.ant-btn.disabled.active > a:only-child,
+.ant-btn[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn.disabled > a:only-child:after,
+.ant-btn[disabled] > a:only-child:after,
+.ant-btn.disabled:hover > a:only-child:after,
+.ant-btn[disabled]:hover > a:only-child:after,
+.ant-btn.disabled:focus > a:only-child:after,
+.ant-btn[disabled]:focus > a:only-child:after,
+.ant-btn.disabled:active > a:only-child:after,
+.ant-btn[disabled]:active > a:only-child:after,
+.ant-btn.disabled.active > a:only-child:after,
+.ant-btn[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn:hover,
+.ant-btn:focus,
+.ant-btn:active,
+.ant-btn.active {
+  background: #fff;
+}
+.ant-btn > i,
+.ant-btn > span {
+  pointer-events: none;
+}
+.ant-btn-primary {
+  color: #fff;
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+.ant-btn-primary > a:only-child {
+  color: currentColor;
+}
+.ant-btn-primary > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+  color: #fff;
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+}
+.ant-btn-primary:hover > a:only-child,
+.ant-btn-primary:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-primary:hover > a:only-child:after,
+.ant-btn-primary:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-primary:active,
+.ant-btn-primary.active {
+  color: #fff;
+  background-color: #096dd9;
+  border-color: #096dd9;
+}
+.ant-btn-primary:active > a:only-child,
+.ant-btn-primary.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-primary:active > a:only-child:after,
+.ant-btn-primary.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-primary.disabled,
+.ant-btn-primary[disabled],
+.ant-btn-primary.disabled:hover,
+.ant-btn-primary[disabled]:hover,
+.ant-btn-primary.disabled:focus,
+.ant-btn-primary[disabled]:focus,
+.ant-btn-primary.disabled:active,
+.ant-btn-primary[disabled]:active,
+.ant-btn-primary.disabled.active,
+.ant-btn-primary[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-primary.disabled > a:only-child,
+.ant-btn-primary[disabled] > a:only-child,
+.ant-btn-primary.disabled:hover > a:only-child,
+.ant-btn-primary[disabled]:hover > a:only-child,
+.ant-btn-primary.disabled:focus > a:only-child,
+.ant-btn-primary[disabled]:focus > a:only-child,
+.ant-btn-primary.disabled:active > a:only-child,
+.ant-btn-primary[disabled]:active > a:only-child,
+.ant-btn-primary.disabled.active > a:only-child,
+.ant-btn-primary[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-primary.disabled > a:only-child:after,
+.ant-btn-primary[disabled] > a:only-child:after,
+.ant-btn-primary.disabled:hover > a:only-child:after,
+.ant-btn-primary[disabled]:hover > a:only-child:after,
+.ant-btn-primary.disabled:focus > a:only-child:after,
+.ant-btn-primary[disabled]:focus > a:only-child:after,
+.ant-btn-primary.disabled:active > a:only-child:after,
+.ant-btn-primary[disabled]:active > a:only-child:after,
+.ant-btn-primary.disabled.active > a:only-child:after,
+.ant-btn-primary[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) {
+  border-right-color: #40a9ff;
+  border-left-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled {
+  border-color: #d9d9d9;
+}
+.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
+  border-right-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] {
+  border-right-color: #d9d9d9;
+}
+.ant-btn-group .ant-btn-primary:last-child:not(:first-child),
+.ant-btn-group .ant-btn-primary + .ant-btn-primary {
+  border-left-color: #40a9ff;
+}
+.ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled],
+.ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled] {
+  border-left-color: #d9d9d9;
+}
+.ant-btn-ghost {
+  color: #54657e;
+  background-color: transparent;
+  border-color: #d9d9d9;
+}
+.ant-btn-ghost > a:only-child {
+  color: currentColor;
+}
+.ant-btn-ghost > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-ghost:hover,
+.ant-btn-ghost:focus {
+  color: #40a9ff;
+  background-color: transparent;
+  border-color: #40a9ff;
+}
+.ant-btn-ghost:hover > a:only-child,
+.ant-btn-ghost:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-ghost:hover > a:only-child:after,
+.ant-btn-ghost:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-ghost:active,
+.ant-btn-ghost.active {
+  color: #096dd9;
+  background-color: transparent;
+  border-color: #096dd9;
+}
+.ant-btn-ghost:active > a:only-child,
+.ant-btn-ghost.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-ghost:active > a:only-child:after,
+.ant-btn-ghost.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-ghost.disabled,
+.ant-btn-ghost[disabled],
+.ant-btn-ghost.disabled:hover,
+.ant-btn-ghost[disabled]:hover,
+.ant-btn-ghost.disabled:focus,
+.ant-btn-ghost[disabled]:focus,
+.ant-btn-ghost.disabled:active,
+.ant-btn-ghost[disabled]:active,
+.ant-btn-ghost.disabled.active,
+.ant-btn-ghost[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-ghost.disabled > a:only-child,
+.ant-btn-ghost[disabled] > a:only-child,
+.ant-btn-ghost.disabled:hover > a:only-child,
+.ant-btn-ghost[disabled]:hover > a:only-child,
+.ant-btn-ghost.disabled:focus > a:only-child,
+.ant-btn-ghost[disabled]:focus > a:only-child,
+.ant-btn-ghost.disabled:active > a:only-child,
+.ant-btn-ghost[disabled]:active > a:only-child,
+.ant-btn-ghost.disabled.active > a:only-child,
+.ant-btn-ghost[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-ghost.disabled > a:only-child:after,
+.ant-btn-ghost[disabled] > a:only-child:after,
+.ant-btn-ghost.disabled:hover > a:only-child:after,
+.ant-btn-ghost[disabled]:hover > a:only-child:after,
+.ant-btn-ghost.disabled:focus > a:only-child:after,
+.ant-btn-ghost[disabled]:focus > a:only-child:after,
+.ant-btn-ghost.disabled:active > a:only-child:after,
+.ant-btn-ghost[disabled]:active > a:only-child:after,
+.ant-btn-ghost.disabled.active > a:only-child:after,
+.ant-btn-ghost[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-dashed {
+  color: #54657e;
+  background-color: #fff;
+  border-color: #d9d9d9;
+  border-style: dashed;
+}
+.ant-btn-dashed > a:only-child {
+  color: currentColor;
+}
+.ant-btn-dashed > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-dashed:hover,
+.ant-btn-dashed:focus {
+  color: #40a9ff;
+  background-color: #fff;
+  border-color: #40a9ff;
+}
+.ant-btn-dashed:hover > a:only-child,
+.ant-btn-dashed:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-dashed:hover > a:only-child:after,
+.ant-btn-dashed:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-dashed:active,
+.ant-btn-dashed.active {
+  color: #096dd9;
+  background-color: #fff;
+  border-color: #096dd9;
+}
+.ant-btn-dashed:active > a:only-child,
+.ant-btn-dashed.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-dashed:active > a:only-child:after,
+.ant-btn-dashed.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-dashed.disabled,
+.ant-btn-dashed[disabled],
+.ant-btn-dashed.disabled:hover,
+.ant-btn-dashed[disabled]:hover,
+.ant-btn-dashed.disabled:focus,
+.ant-btn-dashed[disabled]:focus,
+.ant-btn-dashed.disabled:active,
+.ant-btn-dashed[disabled]:active,
+.ant-btn-dashed.disabled.active,
+.ant-btn-dashed[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-dashed.disabled > a:only-child,
+.ant-btn-dashed[disabled] > a:only-child,
+.ant-btn-dashed.disabled:hover > a:only-child,
+.ant-btn-dashed[disabled]:hover > a:only-child,
+.ant-btn-dashed.disabled:focus > a:only-child,
+.ant-btn-dashed[disabled]:focus > a:only-child,
+.ant-btn-dashed.disabled:active > a:only-child,
+.ant-btn-dashed[disabled]:active > a:only-child,
+.ant-btn-dashed.disabled.active > a:only-child,
+.ant-btn-dashed[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-dashed.disabled > a:only-child:after,
+.ant-btn-dashed[disabled] > a:only-child:after,
+.ant-btn-dashed.disabled:hover > a:only-child:after,
+.ant-btn-dashed[disabled]:hover > a:only-child:after,
+.ant-btn-dashed.disabled:focus > a:only-child:after,
+.ant-btn-dashed[disabled]:focus > a:only-child:after,
+.ant-btn-dashed.disabled:active > a:only-child:after,
+.ant-btn-dashed[disabled]:active > a:only-child:after,
+.ant-btn-dashed.disabled.active > a:only-child:after,
+.ant-btn-dashed[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-danger {
+  color: #f5222d;
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-danger > a:only-child {
+  color: currentColor;
+}
+.ant-btn-danger > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-danger:hover {
+  color: #fff;
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+.ant-btn-danger:hover > a:only-child {
+  color: currentColor;
+}
+.ant-btn-danger:hover > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-danger:focus {
+  color: #ff4d4f;
+  background-color: #fff;
+  border-color: #ff4d4f;
+}
+.ant-btn-danger:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-danger:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-danger:active,
+.ant-btn-danger.active {
+  color: #fff;
+  background-color: #cf1322;
+  border-color: #cf1322;
+}
+.ant-btn-danger:active > a:only-child,
+.ant-btn-danger.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-danger:active > a:only-child:after,
+.ant-btn-danger.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-danger.disabled,
+.ant-btn-danger[disabled],
+.ant-btn-danger.disabled:hover,
+.ant-btn-danger[disabled]:hover,
+.ant-btn-danger.disabled:focus,
+.ant-btn-danger[disabled]:focus,
+.ant-btn-danger.disabled:active,
+.ant-btn-danger[disabled]:active,
+.ant-btn-danger.disabled.active,
+.ant-btn-danger[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-danger.disabled > a:only-child,
+.ant-btn-danger[disabled] > a:only-child,
+.ant-btn-danger.disabled:hover > a:only-child,
+.ant-btn-danger[disabled]:hover > a:only-child,
+.ant-btn-danger.disabled:focus > a:only-child,
+.ant-btn-danger[disabled]:focus > a:only-child,
+.ant-btn-danger.disabled:active > a:only-child,
+.ant-btn-danger[disabled]:active > a:only-child,
+.ant-btn-danger.disabled.active > a:only-child,
+.ant-btn-danger[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-danger.disabled > a:only-child:after,
+.ant-btn-danger[disabled] > a:only-child:after,
+.ant-btn-danger.disabled:hover > a:only-child:after,
+.ant-btn-danger[disabled]:hover > a:only-child:after,
+.ant-btn-danger.disabled:focus > a:only-child:after,
+.ant-btn-danger[disabled]:focus > a:only-child:after,
+.ant-btn-danger.disabled:active > a:only-child:after,
+.ant-btn-danger[disabled]:active > a:only-child:after,
+.ant-btn-danger.disabled.active > a:only-child:after,
+.ant-btn-danger[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-circle,
+.ant-btn-circle-outline {
+  width: 32px;
+  padding: 0;
+  font-size: 16px;
+  border-radius: 50%;
+  height: 32px;
+}
+.ant-btn-circle.ant-btn-lg,
+.ant-btn-circle-outline.ant-btn-lg {
+  width: 40px;
+  padding: 0;
+  font-size: 18px;
+  border-radius: 50%;
+  height: 40px;
+}
+.ant-btn-circle.ant-btn-sm,
+.ant-btn-circle-outline.ant-btn-sm {
+  width: 24px;
+  padding: 0;
+  font-size: 14px;
+  border-radius: 50%;
+  height: 24px;
+}
+.ant-btn:before {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  background: #fff;
+  opacity: 0.35;
+  content: '';
+  border-radius: inherit;
+  z-index: 1;
+  transition: opacity .2s;
+  pointer-events: none;
+  display: none;
+}
+.ant-btn .anticon {
+  transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-btn.ant-btn-loading:before {
+  display: block;
+}
+.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
+  padding-left: 29px;
+  pointer-events: none;
+  position: relative;
+}
+.ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
+  margin-left: -14px;
+}
+.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
+  padding-left: 24px;
+}
+.ant-btn-sm.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) .anticon {
+  margin-left: -17px;
+}
+.ant-btn-group {
+  position: relative;
+  display: inline-block;
+}
+.ant-btn-group > .ant-btn {
+  position: relative;
+  line-height: 30px;
+}
+.ant-btn-group > .ant-btn:hover,
+.ant-btn-group > .ant-btn:focus,
+.ant-btn-group > .ant-btn:active,
+.ant-btn-group > .ant-btn.active {
+  z-index: 2;
+}
+.ant-btn-group > .ant-btn:disabled {
+  z-index: 0;
+}
+.ant-btn-group-lg > .ant-btn {
+  padding: 0 15px;
+  font-size: 16px;
+  border-radius: 4px;
+  height: 40px;
+  line-height: 38px;
+}
+.ant-btn-group-sm > .ant-btn {
+  padding: 0 7px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 24px;
+  line-height: 22px;
+}
+.ant-btn-group-sm > .ant-btn > .anticon {
+  font-size: 14px;
+}
+.ant-btn-group .ant-btn + .ant-btn,
+.ant-btn + .ant-btn-group,
+.ant-btn-group span + .ant-btn,
+.ant-btn-group .ant-btn + span,
+.ant-btn-group + .ant-btn,
+.ant-btn-group + .ant-btn-group {
+  margin-left: -1px;
+}
+.ant-btn-group .ant-btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.ant-btn-group > .ant-btn:first-child,
+.ant-btn-group > span:first-child > .ant-btn {
+  margin-left: 0;
+}
+.ant-btn-group > .ant-btn:first-child:not(:last-child),
+.ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.ant-btn-group > .ant-btn:last-child:not(:first-child),
+.ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.ant-btn-group > .ant-btn-group {
+  float: left;
+}
+.ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn {
+  border-radius: 0;
+}
+.ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  padding-right: 8px;
+}
+.ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  padding-left: 8px;
+}
+.ant-btn:not(.ant-btn-circle):not(.ant-btn-circle-outline).ant-btn-icon-only {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ant-btn:focus > span,
+.ant-btn:active > span {
+  position: relative;
+}
+.ant-btn > .anticon + span,
+.ant-btn > span + .anticon {
+  margin-left: 8px;
+}
+.ant-btn-clicked:after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  border-radius: inherit;
+  border: 0 solid #1890ff;
+  opacity: 0.4;
+  animation: buttonEffect .4s;
+  display: block;
+}
+.ant-btn-danger.ant-btn-clicked:after {
+  border-color: #f5222d;
+}
+.ant-btn-background-ghost {
+  background: transparent !important;
+  border-color: #fff;
+  color: #fff;
+}
+.ant-btn-background-ghost.ant-btn-primary {
+  color: #1890ff;
+  background-color: transparent;
+  border-color: #1890ff;
+}
+.ant-btn-background-ghost.ant-btn-primary > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover,
+.ant-btn-background-ghost.ant-btn-primary:focus {
+  color: #40a9ff;
+  background-color: transparent;
+  border-color: #40a9ff;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary:active,
+.ant-btn-background-ghost.ant-btn-primary.active {
+  color: #096dd9;
+  background-color: transparent;
+  border-color: #096dd9;
+}
+.ant-btn-background-ghost.ant-btn-primary:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled,
+.ant-btn-background-ghost.ant-btn-primary[disabled],
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger {
+  color: #f5222d;
+  background-color: transparent;
+  border-color: #f5222d;
+}
+.ant-btn-background-ghost.ant-btn-danger > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover,
+.ant-btn-background-ghost.ant-btn-danger:focus {
+  color: #ff4d4f;
+  background-color: transparent;
+  border-color: #ff4d4f;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger:active,
+.ant-btn-background-ghost.ant-btn-danger.active {
+  color: #cf1322;
+  background-color: transparent;
+  border-color: #cf1322;
+}
+.ant-btn-background-ghost.ant-btn-danger:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled,
+.ant-btn-background-ghost.ant-btn-danger[disabled],
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child:after,
+.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-btn-two-chinese-chars:first-letter {
+  letter-spacing: .34em;
+}
+.ant-btn-two-chinese-chars > * {
+  letter-spacing: .34em;
+  margin-right: -0.34em;
+}
+@keyframes buttonEffect {
+  to {
+    opacity: 0;
+    top: -6px;
+    left: -6px;
+    bottom: -6px;
+    right: -6px;
+    border-width: 6px;
+  }
+}
+a.ant-btn {
+  line-height: 30px;
+}
+a.ant-btn-lg {
+  line-height: 38px;
+}
+a.ant-btn-sm {
+  line-height: 22px;
+}
+.ant-fullcalendar {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  border-top: 1px solid #d9d9d9;
+}
+.ant-fullcalendar-month-select {
+  margin-left: 5px;
+}
+.ant-fullcalendar-header {
+  padding: 11px 16px 11px 0;
+  text-align: right;
+}
+.ant-fullcalendar-header .ant-select-dropdown {
+  text-align: left;
+}
+.ant-fullcalendar-header .ant-radio-group {
+  margin-left: 8px;
+  text-align: left;
+}
+.ant-fullcalendar-header label.ant-radio-button {
+  height: 22px;
+  line-height: 20px;
+  padding: 0 10px;
+}
+.ant-fullcalendar-date-panel {
+  position: relative;
+  outline: none;
+}
+.ant-fullcalendar-calendar-body {
+  padding: 8px 12px;
+}
+.ant-fullcalendar table {
+  border-collapse: collapse;
+  max-width: 100%;
+  background-color: transparent;
+  width: 100%;
+  height: 256px;
+}
+.ant-fullcalendar table,
+.ant-fullcalendar th,
+.ant-fullcalendar td {
+  border: 0;
+}
+.ant-fullcalendar td {
+  position: relative;
+}
+.ant-fullcalendar-calendar-table {
+  border-spacing: 0;
+  margin-bottom: 0;
+}
+.ant-fullcalendar-column-header {
+  line-height: 18px;
+  padding: 0;
+  width: 33px;
+  text-align: center;
+}
+.ant-fullcalendar-column-header .ant-fullcalendar-column-header-inner {
+  display: block;
+  font-weight: normal;
+}
+.ant-fullcalendar-week-number-header .ant-fullcalendar-column-header-inner {
+  display: none;
+}
+.ant-fullcalendar-month,
+.ant-fullcalendar-date {
+  text-align: center;
+  transition: all .3s;
+}
+.ant-fullcalendar-value {
+  display: block;
+  margin: 0 auto;
+  color: #54657e;
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  line-height: 24px;
+  transition: all .3s;
+}
+.ant-fullcalendar-value:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-fullcalendar-value:active {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-fullcalendar-month-panel-cell .ant-fullcalendar-value {
+  width: 48px;
+}
+.ant-fullcalendar-today .ant-fullcalendar-value,
+.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value {
+  box-shadow: 0 0 0 1px #1890ff inset;
+}
+.ant-fullcalendar-selected-day .ant-fullcalendar-value,
+.ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-fullcalendar-disabled-cell-first-of-row .ant-fullcalendar-value {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.ant-fullcalendar-disabled-cell-last-of-row .ant-fullcalendar-value {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.ant-fullcalendar-last-month-cell .ant-fullcalendar-value,
+.ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-fullcalendar-month-panel-table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: separate;
+}
+.ant-fullcalendar-content {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: -9px;
+}
+.ant-fullcalendar-fullscreen {
+  border-top: 0;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-table {
+  table-layout: fixed;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-header .ant-radio-group {
+  margin-left: 16px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-header label.ant-radio-button {
+  height: 32px;
+  line-height: 30px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date {
+  text-align: left;
+  margin: 0 4px;
+  display: block;
+  color: #54657e;
+  height: 116px;
+  padding: 4px 8px;
+  border-top: 2px solid #e8e8e8;
+  transition: background .3s;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month:active,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-date:active {
+  background: #bae7ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-column-header {
+  text-align: right;
+  padding-right: 12px;
+  padding-bottom: 5px;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-value {
+  text-align: right;
+  background: transparent;
+  width: auto;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {
+  color: #54657e;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date {
+  border-top-color: #1890ff;
+  background: transparent;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value {
+  box-shadow: none;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date {
+  background: #e6f7ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value {
+  color: #1890ff;
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date,
+.ant-fullcalendar-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-fullcalendar-fullscreen .ant-fullcalendar-content {
+  height: 90px;
+  overflow-y: auto;
+  position: static;
+  width: auto;
+  left: auto;
+  bottom: auto;
+}
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-date,
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-date:hover {
+  cursor: not-allowed;
+}
+.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date,
+.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date:hover {
+  background: transparent;
+}
+.ant-fullcalendar-disabled-cell .ant-fullcalendar-value {
+  color: rgba(0, 0, 0, 0.25);
+  border-radius: 0;
+  width: auto;
+  cursor: not-allowed;
+}
+.ant-card {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: #fff;
+  border-radius: 2px;
+  position: relative;
+  transition: all .3s;
+}
+.ant-card-hoverable {
+  cursor: pointer;
+}
+.ant-card-hoverable:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  border-color: rgba(0, 0, 0, 0.09);
+}
+.ant-card-bordered {
+  border: 1px solid #e8e8e8;
+}
+.ant-card-head {
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 0 24px;
+  border-radius: 2px 2px 0 0;
+  zoom: 1;
+  margin-bottom: -1px;
+  min-height: 48px;
+}
+.ant-card-head:before,
+.ant-card-head:after {
+  content: " ";
+  display: table;
+}
+.ant-card-head:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-head:before,
+.ant-card-head:after {
+  content: " ";
+  display: table;
+}
+.ant-card-head:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-head-wrapper {
+  display: flex;
+}
+.ant-card-head-title {
+  font-size: 16px;
+  padding: 16px 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  display: inline-block;
+  flex: 1;
+}
+.ant-card-head .ant-tabs {
+  margin-bottom: -17px;
+  clear: both;
+}
+.ant-card-head .ant-tabs-bar {
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-card-extra {
+  float: right;
+  padding: 17.5px 0;
+  text-align: right;
+  margin-left: auto;
+}
+.ant-card-body {
+  padding: 24px;
+  zoom: 1;
+}
+.ant-card-body:before,
+.ant-card-body:after {
+  content: " ";
+  display: table;
+}
+.ant-card-body:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-body:before,
+.ant-card-body:after {
+  content: " ";
+  display: table;
+}
+.ant-card-body:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-contain-grid .ant-card-body {
+  margin: -1px 0 0 -1px;
+  padding: 0;
+}
+.ant-card-grid {
+  border-radius: 0;
+  border: 0;
+  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
+  width: 33.33%;
+  float: left;
+  padding: 24px;
+  transition: all .3s;
+}
+.ant-card-grid:hover {
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-card-contain-tabs .ant-card-head-title {
+  padding-bottom: 0;
+  min-height: 32px;
+}
+.ant-card-contain-tabs .ant-card-extra {
+  padding-bottom: 0;
+}
+.ant-card-cover > * {
+  width: 100%;
+  display: block;
+}
+.ant-card-actions {
+  border-top: 1px solid #e8e8e8;
+  background: #fafafa;
+  zoom: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ant-card-actions:before,
+.ant-card-actions:after {
+  content: " ";
+  display: table;
+}
+.ant-card-actions:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-actions:before,
+.ant-card-actions:after {
+  content: " ";
+  display: table;
+}
+.ant-card-actions:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-actions > li {
+  float: left;
+  text-align: center;
+  margin: 12px 0;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-actions > li > span {
+  display: inline-block;
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 22px;
+  min-width: 32px;
+  position: relative;
+}
+.ant-card-actions > li > span:hover {
+  color: #1890ff;
+  transition: color .3s;
+}
+.ant-card-actions > li > span > .anticon {
+  font-size: 16px;
+}
+.ant-card-actions > li > span a {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-actions > li > span a:hover {
+  color: #1890ff;
+}
+.ant-card-actions > li:not(:last-child) {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-card-wider-padding .ant-card-head {
+  padding: 0 32px;
+}
+.ant-card-wider-padding .ant-card-body {
+  padding: 24px 32px;
+}
+.ant-card-padding-transition .ant-card-head,
+.ant-card-padding-transition .ant-card-body {
+  transition: padding .3s;
+}
+.ant-card-padding-transition .ant-card-extra {
+  transition: right .3s;
+}
+.ant-card-type-inner .ant-card-head {
+  padding: 0 24px;
+  background: #fafafa;
+}
+.ant-card-type-inner .ant-card-head-title {
+  padding: 12px 0;
+  font-size: 14px;
+}
+.ant-card-type-inner .ant-card-body {
+  padding: 16px 24px;
+}
+.ant-card-type-inner .ant-card-extra {
+  padding: 13.5px 0;
+}
+.ant-card-meta {
+  margin: -4px 0;
+  zoom: 1;
+}
+.ant-card-meta:before,
+.ant-card-meta:after {
+  content: " ";
+  display: table;
+}
+.ant-card-meta:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-meta:before,
+.ant-card-meta:after {
+  content: " ";
+  display: table;
+}
+.ant-card-meta:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-card-meta-avatar {
+  padding-right: 16px;
+  float: left;
+}
+.ant-card-meta-detail {
+  overflow: hidden;
+}
+.ant-card-meta-detail > div:not(:last-child) {
+  margin-bottom: 8px;
+}
+.ant-card-meta-title {
+  font-size: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+.ant-card-meta-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-card-loading .ant-card-body {
+  user-select: none;
+  padding: 0;
+}
+.ant-card-loading-content {
+  padding: 24px;
+}
+.ant-card-loading-content p {
+  margin: 0;
+}
+.ant-card-loading-block {
+  display: inline-block;
+  margin: 5px 2% 0 0;
+  height: 14px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2));
+  animation: card-loading 1.4s ease infinite;
+  background-size: 600% 600%;
+}
+@keyframes card-loading {
+  0%,
+  100% {
+    background-position: 0 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+.ant-carousel {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-carousel .slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+.ant-carousel .slick-list {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.ant-carousel .slick-list:focus {
+  outline: none;
+}
+.ant-carousel .slick-list.dragging {
+  cursor: pointer;
+}
+.ant-carousel .slick-slider .slick-track,
+.ant-carousel .slick-slider .slick-list {
+  transform: translate3d(0, 0, 0);
+}
+.ant-carousel .slick-track {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: block;
+}
+.ant-carousel .slick-track:before,
+.ant-carousel .slick-track:after {
+  content: "";
+  display: table;
+}
+.ant-carousel .slick-track:after {
+  clear: both;
+}
+.slick-loading .ant-carousel .slick-track {
+  visibility: hidden;
+}
+.ant-carousel .slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none;
+}
+[dir="rtl"] .ant-carousel .slick-slide {
+  float: right;
+}
+.ant-carousel .slick-slide img {
+  display: block;
+}
+.ant-carousel .slick-slide.slick-loading img {
+  display: none;
+}
+.ant-carousel .slick-slide.dragging img {
+  pointer-events: none;
+}
+.ant-carousel .slick-initialized .slick-slide {
+  display: block;
+}
+.ant-carousel .slick-loading .slick-slide {
+  visibility: hidden;
+}
+.ant-carousel .slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
+}
+.ant-carousel .slick-arrow.slick-hidden {
+  display: none;
+}
+.ant-carousel .slick-prev,
+.ant-carousel .slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0;
+  font-size: 0;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  margin-top: -10px;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+.ant-carousel .slick-prev:hover,
+.ant-carousel .slick-next:hover,
+.ant-carousel .slick-prev:focus,
+.ant-carousel .slick-next:focus {
+  outline: none;
+  background: transparent;
+  color: transparent;
+}
+.ant-carousel .slick-prev:hover:before,
+.ant-carousel .slick-next:hover:before,
+.ant-carousel .slick-prev:focus:before,
+.ant-carousel .slick-next:focus:before {
+  opacity: 1;
+}
+.ant-carousel .slick-prev.slick-disabled:before,
+.ant-carousel .slick-next.slick-disabled:before {
+  opacity: 0.25;
+}
+.ant-carousel .slick-prev {
+  left: -25px;
+}
+.ant-carousel .slick-prev:before {
+  content: "←";
+}
+.ant-carousel .slick-next {
+  right: -25px;
+}
+.ant-carousel .slick-next:before {
+  content: "→";
+}
+.ant-carousel .slick-dots {
+  position: absolute;
+  bottom: 12px;
+  list-style: none;
+  display: block;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 3px;
+}
+.ant-carousel .slick-dots li {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  text-align: center;
+  margin: 0 2px;
+  padding: 0;
+}
+.ant-carousel .slick-dots li button {
+  border: 0;
+  cursor: pointer;
+  background: #fff;
+  opacity: 0.3;
+  display: block;
+  width: 16px;
+  height: 3px;
+  border-radius: 1px;
+  outline: none;
+  font-size: 0;
+  color: transparent;
+  transition: all .5s;
+  padding: 0;
+}
+.ant-carousel .slick-dots li button:hover,
+.ant-carousel .slick-dots li button:focus {
+  opacity: 0.75;
+}
+.ant-carousel .slick-dots li.slick-active button {
+  background: #fff;
+  opacity: 1;
+  width: 24px;
+}
+.ant-carousel .slick-dots li.slick-active button:hover,
+.ant-carousel .slick-dots li.slick-active button:focus {
+  opacity: 1;
+}
+.ant-carousel-vertical .slick-dots {
+  width: 3px;
+  bottom: auto;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: auto;
+}
+.ant-carousel-vertical .slick-dots li {
+  margin: 0 2px;
+  vertical-align: baseline;
+}
+.ant-carousel-vertical .slick-dots li button {
+  width: 3px;
+  height: 16px;
+}
+.ant-carousel-vertical .slick-dots li.slick-active button {
+  width: 3px;
+  height: 24px;
+}
+.ant-cascader {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-cascader-input.ant-input {
+  background-color: transparent !important;
+  cursor: pointer;
+  width: 100%;
+  display: block;
+}
+.ant-cascader-picker {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 4px;
+  outline: 0;
+}
+.ant-cascader-picker-with-value .ant-cascader-picker-label {
+  color: transparent;
+}
+.ant-cascader-picker-disabled {
+  cursor: not-allowed;
+  background: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-picker-disabled .ant-cascader-input {
+  cursor: not-allowed;
+}
+.ant-cascader-picker:focus .ant-cascader-input {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-cascader-picker-label {
+  position: absolute;
+  left: 0;
+  height: 20px;
+  line-height: 20px;
+  top: 50%;
+  margin-top: -10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+  padding: 0 12px;
+}
+.ant-cascader-picker-clear {
+  opacity: 0;
+  position: absolute;
+  right: 12px;
+  z-index: 2;
+  background: #fff;
+  top: 50%;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease, opacity 0.15s ease;
+}
+.ant-cascader-picker-clear:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-cascader-picker:hover .ant-cascader-picker-clear {
+  opacity: 1;
+}
+.ant-cascader-picker-arrow {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  right: 12px;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-picker-arrow:before {
+  transition: transform .2s;
+}
+.ant-cascader-picker-arrow.ant-cascader-picker-arrow-expand:before {
+  transform: rotate(180deg);
+}
+.ant-cascader-picker-small .ant-cascader-picker-clear,
+.ant-cascader-picker-small .ant-cascader-picker-arrow {
+  right: 8px;
+}
+.ant-cascader-menus {
+  font-size: 14px;
+  background: #fff;
+  position: absolute;
+  z-index: 1050;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  white-space: nowrap;
+}
+.ant-cascader-menus ul,
+.ant-cascader-menus ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ant-cascader-menus-empty,
+.ant-cascader-menus-hidden {
+  display: none;
+}
+.ant-cascader-menus.slide-up-enter.slide-up-enter-active.ant-cascader-menus-placement-bottomLeft,
+.ant-cascader-menus.slide-up-appear.slide-up-appear-active.ant-cascader-menus-placement-bottomLeft {
+  animation-name: antSlideUpIn;
+}
+.ant-cascader-menus.slide-up-enter.slide-up-enter-active.ant-cascader-menus-placement-topLeft,
+.ant-cascader-menus.slide-up-appear.slide-up-appear-active.ant-cascader-menus-placement-topLeft {
+  animation-name: antSlideDownIn;
+}
+.ant-cascader-menus.slide-up-leave.slide-up-leave-active.ant-cascader-menus-placement-bottomLeft {
+  animation-name: antSlideUpOut;
+}
+.ant-cascader-menus.slide-up-leave.slide-up-leave-active.ant-cascader-menus-placement-topLeft {
+  animation-name: antSlideDownOut;
+}
+.ant-cascader-menu {
+  display: inline-block;
+  vertical-align: top;
+  min-width: 111px;
+  height: 180px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-right: 1px solid #e8e8e8;
+  overflow: auto;
+}
+.ant-cascader-menu:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.ant-cascader-menu:last-child {
+  border-right-color: transparent;
+  margin-right: -1px;
+  border-radius: 0 4px 4px 0;
+}
+.ant-cascader-menu:only-child {
+  border-radius: 4px;
+}
+.ant-cascader-menu-item {
+  padding: 5px 12px;
+  line-height: 22px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+.ant-cascader-menu-item:hover {
+  background: #e6f7ff;
+}
+.ant-cascader-menu-item-disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-cascader-menu-item-disabled:hover {
+  background: transparent;
+}
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
+.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
+  background: #f5f5f5;
+  font-weight: 600;
+}
+.ant-cascader-menu-item-expand {
+  position: relative;
+  padding-right: 24px;
+}
+.ant-cascader-menu-item-expand:after {
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e61f";
+  display: inline-block;
+  font-size: 12px;
+  font-size: 8px \9;
+  transform: scale(0.66666667) rotate(0deg);
+  color: rgba(0, 0, 0, 0.45);
+  position: absolute;
+  right: 12px;
+}
+:root .ant-cascader-menu-item-expand:after {
+  font-size: 12px;
+}
+.ant-cascader-menu-item-loading:after {
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e64d";
+  animation: loadingCircle 1s infinite linear;
+}
+.ant-cascader-menu-item .ant-cascader-menu-item-keyword {
+  color: #f5222d;
+}
+@keyframes antCheckboxEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+.ant-checkbox {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  line-height: 1;
+  position: relative;
+  vertical-align: middle;
+  top: -0.09em;
+}
+.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.ant-checkbox:hover .ant-checkbox-inner,
+.ant-checkbox-input:focus + .ant-checkbox-inner {
+  border-color: #1890ff;
+}
+.ant-checkbox-checked:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  border: 1px solid #1890ff;
+  content: '';
+  animation: antCheckboxEffect 0.36s ease-in-out;
+  animation-fill-mode: both;
+  visibility: hidden;
+}
+.ant-checkbox:hover:after,
+.ant-checkbox-wrapper:hover .ant-checkbox:after {
+  visibility: visible;
+}
+.ant-checkbox-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background-color: #fff;
+  transition: all .3s;
+}
+.ant-checkbox-inner:after {
+  transform: rotate(45deg) scale(0);
+  position: absolute;
+  left: 4.57142857px;
+  top: 1.14285714px;
+  display: table;
+  width: 5.71428571px;
+  height: 9.14285714px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+}
+.ant-checkbox-input {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+.ant-checkbox-indeterminate .ant-checkbox-inner:after {
+  content: ' ';
+  transform: scale(1);
+  position: absolute;
+  left: 2.42857143px;
+  top: 5.92857143px;
+  width: 9.14285714px;
+  height: 1.14285714px;
+}
+.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner:after {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-checkbox-checked .ant-checkbox-inner:after {
+  transform: rotate(45deg) scale(1);
+  position: absolute;
+  display: table;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+.ant-checkbox-checked .ant-checkbox-inner,
+.ant-checkbox-indeterminate .ant-checkbox-inner {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+.ant-checkbox-disabled {
+  cursor: not-allowed;
+}
+.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
+  animation-name: none;
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-checkbox-disabled .ant-checkbox-input {
+  cursor: not-allowed;
+}
+.ant-checkbox-disabled .ant-checkbox-inner {
+  border-color: #d9d9d9 !important;
+  background-color: #f5f5f5;
+}
+.ant-checkbox-disabled .ant-checkbox-inner:after {
+  animation-name: none;
+  border-color: #f5f5f5;
+}
+.ant-checkbox-disabled + span {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-checkbox-wrapper {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: unset;
+  cursor: pointer;
+  display: inline-block;
+}
+.ant-checkbox-wrapper + .ant-checkbox-wrapper {
+  margin-left: 8px;
+}
+.ant-checkbox-wrapper + span,
+.ant-checkbox + span {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ant-checkbox-group {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+}
+.ant-checkbox-group-item {
+  display: inline-block;
+  margin-right: 8px;
+}
+.ant-checkbox-group-item:last-child {
+  margin-right: 0;
+}
+.ant-checkbox-group-item + .ant-checkbox-group-item {
+  margin-left: 0;
+}
+.ant-collapse {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  border-bottom: 0;
+}
+.ant-collapse > .ant-collapse-item {
+  border-bottom: 1px solid #d9d9d9;
+}
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+  border-radius: 0 0 4px 4px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  line-height: 22px;
+  padding: 12px 0 12px 40px;
+  color: rgba(0, 0, 0, 0.85);
+  cursor: pointer;
+  position: relative;
+  transition: all .3s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: rotate(0);
+  font-size: 12px;
+  position: absolute;
+  display: inline-block;
+  line-height: 46px;
+  vertical-align: top;
+  transition: transform 0.24s;
+  top: 0;
+  left: 16px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow:before {
+  display: block;
+  font-family: "anticon" !important;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow:before {
+  content: "\E61F";
+}
+.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+  padding-left: 12px;
+}
+.ant-collapse-anim-active {
+  transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.ant-collapse-content {
+  overflow: hidden;
+  color: #54657e;
+  padding: 0 16px;
+  background-color: #fff;
+  border-top: 1px solid #d9d9d9;
+}
+.ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.ant-collapse-content-inactive {
+  display: none;
+}
+.ant-collapse-item:last-child > .ant-collapse-content {
+  border-radius: 0 0 4px 4px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header[aria-expanded="true"] .arrow {
+  transform: rotate(90deg);
+}
+.ant-collapse-borderless {
+  background-color: #fff;
+  border: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item {
+  border-bottom: 1px solid #d9d9d9;
+}
+.ant-collapse-borderless > .ant-collapse-item:last-child,
+.ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header {
+  border-radius: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
+  background-color: transparent;
+  border-top: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 4px;
+}
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.cdk-overlay-container {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 1000;
+}
+.cdk-overlay-backdrop {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 1000;
+}
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  z-index: 1000;
+}
+.ant-table-td-right-sticky + .ant-table-td-right-sticky {
+  box-shadow: none;
+}
+.ant-table-th-right-sticky + .ant-table-th-right-sticky {
+  box-shadow: none;
+}
+.ant-table-th-left-sticky,
+.ant-table-th-right-sticky,
+.ant-table-td-right-sticky,
+.ant-table-td-left-sticky {
+  position: sticky;
+  z-index: 1;
+}
+.ant-table-td-left-sticky,
+.ant-table-td-right-sticky {
+  background: #fff;
+}
+.ant-table-scroll-position-middle .ant-table-th-left-sticky,
+.ant-table-scroll-position-middle .ant-table-td-left-sticky {
+  box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-middle .ant-table-th-right-sticky,
+.ant-table-scroll-position-middle .ant-table-td-right-sticky {
+  box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-left .ant-table-th-right-sticky,
+.ant-table-scroll-position-left .ant-table-td-right-sticky {
+  box-shadow: -6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-scroll-position-right .ant-table-th-left-sticky,
+.ant-table-scroll-position-right .ant-table-td-left-sticky {
+  box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.05);
+}
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-left-sticky,
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-left-sticky {
+  border-left: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-th-right-sticky,
+.ant-table-bordered.ant-table-scroll-position-middle .ant-table-td-right-sticky {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-left .ant-table-th-right-sticky,
+.ant-table-bordered.ant-table-scroll-position-left .ant-table-td-right-sticky {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-scroll-position-right .ant-table-th-left-sticky,
+.ant-table-bordered.ant-table-scroll-position-right .ant-table-td-left-sticky {
+  border-left: 1px solid #e8e8e8;
+}
+.ant-calendar-picker-container {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  z-index: 1050;
+}
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topRight,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomRight,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topLeft,
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomLeft,
+.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.ant-calendar-picker {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  outline: none;
+  transition: opacity 0.3s;
+}
+.ant-calendar-picker-input {
+  outline: none;
+  display: block;
+}
+.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
+  border-color: #1890ff;
+}
+.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-calendar-picker-clear,
+.ant-calendar-picker-icon {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  right: 12px;
+  top: 50%;
+  margin-top: -7px;
+  line-height: 14px;
+  font-size: 12px;
+  transition: all .3s;
+  user-select: none;
+}
+.ant-calendar-picker-clear {
+  opacity: 0;
+  z-index: 1;
+  color: rgba(0, 0, 0, 0.25);
+  background: #fff;
+  pointer-events: none;
+  cursor: pointer;
+}
+.ant-calendar-picker-clear:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar-picker:hover .ant-calendar-picker-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
+.ant-calendar-picker-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-picker-icon:after {
+  content: "\e6bb";
+  font-family: "anticon";
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  line-height: 1;
+}
+.ant-calendar-picker-small .ant-calendar-picker-clear,
+.ant-calendar-picker-small .ant-calendar-picker-icon {
+  right: 8px;
+}
+.ant-calendar {
+  position: relative;
+  outline: none;
+  width: 280px;
+  border: 1px solid #fff;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-clip: padding-box;
+  line-height: 1.5;
+}
+.ant-calendar-input-wrap {
+  height: 34px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-input {
+  border: 0;
+  width: 100%;
+  cursor: auto;
+  outline: 0;
+  height: 22px;
+  color: #54657e;
+  background: #fff;
+}
+.ant-calendar-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-calendar-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-week-number {
+  width: 286px;
+}
+.ant-calendar-week-number-cell {
+  text-align: center;
+}
+.ant-calendar-header {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  user-select: none;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-header a:hover {
+  color: #40a9ff;
+}
+.ant-calendar-header .ant-calendar-century-select,
+.ant-calendar-header .ant-calendar-decade-select,
+.ant-calendar-header .ant-calendar-year-select,
+.ant-calendar-header .ant-calendar-month-select {
+  padding: 0 2px;
+  font-weight: 500;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
+}
+.ant-calendar-header .ant-calendar-century-select-arrow,
+.ant-calendar-header .ant-calendar-decade-select-arrow,
+.ant-calendar-header .ant-calendar-year-select-arrow,
+.ant-calendar-header .ant-calendar-month-select-arrow {
+  display: none;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn,
+.ant-calendar-header .ant-calendar-next-century-btn,
+.ant-calendar-header .ant-calendar-prev-decade-btn,
+.ant-calendar-header .ant-calendar-next-decade-btn,
+.ant-calendar-header .ant-calendar-prev-month-btn,
+.ant-calendar-header .ant-calendar-next-month-btn,
+.ant-calendar-header .ant-calendar-prev-year-btn,
+.ant-calendar-header .ant-calendar-next-year-btn {
+  position: absolute;
+  top: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+  padding: 0 5px;
+  font-size: 16px;
+  display: inline-block;
+  line-height: 40px;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn,
+.ant-calendar-header .ant-calendar-prev-decade-btn,
+.ant-calendar-header .ant-calendar-prev-year-btn {
+  left: 7px;
+}
+.ant-calendar-header .ant-calendar-prev-century-btn:after,
+.ant-calendar-header .ant-calendar-prev-decade-btn:after,
+.ant-calendar-header .ant-calendar-prev-year-btn:after {
+  content: '«';
+}
+.ant-calendar-header .ant-calendar-next-century-btn,
+.ant-calendar-header .ant-calendar-next-decade-btn,
+.ant-calendar-header .ant-calendar-next-year-btn {
+  right: 7px;
+}
+.ant-calendar-header .ant-calendar-next-century-btn:after,
+.ant-calendar-header .ant-calendar-next-decade-btn:after,
+.ant-calendar-header .ant-calendar-next-year-btn:after {
+  content: '»';
+}
+.ant-calendar-header .ant-calendar-prev-month-btn {
+  left: 29px;
+}
+.ant-calendar-header .ant-calendar-prev-month-btn:after {
+  content: '‹';
+}
+.ant-calendar-header .ant-calendar-next-month-btn {
+  right: 29px;
+}
+.ant-calendar-header .ant-calendar-next-month-btn:after {
+  content: '›';
+}
+.ant-calendar-body {
+  padding: 8px 12px;
+}
+.ant-calendar table {
+  border-collapse: collapse;
+  max-width: 100%;
+  background-color: transparent;
+  width: 100%;
+}
+.ant-calendar table,
+.ant-calendar th,
+.ant-calendar td {
+  border: 0;
+  text-align: center;
+}
+.ant-calendar-calendar-table {
+  border-spacing: 0;
+  margin-bottom: 0;
+}
+.ant-calendar-column-header {
+  line-height: 18px;
+  width: 33px;
+  padding: 6px 0;
+  text-align: center;
+}
+.ant-calendar-column-header .ant-calendar-column-header-inner {
+  display: block;
+  font-weight: normal;
+}
+.ant-calendar-week-number-header .ant-calendar-column-header-inner {
+  display: none;
+}
+.ant-calendar-cell {
+  padding: 3px 0;
+  height: 30px;
+}
+.ant-calendar-date {
+  display: block;
+  margin: 0 auto;
+  color: #54657e;
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid transparent;
+  padding: 0;
+  background: transparent;
+  text-align: center;
+  transition: background 0.3s ease;
+}
+.ant-calendar-date-panel {
+  position: relative;
+}
+.ant-calendar-date:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-calendar-date:active {
+  color: #fff;
+  background: #40a9ff;
+}
+.ant-calendar-today .ant-calendar-date {
+  border-color: #1890ff;
+  font-weight: bold;
+  color: #1890ff;
+}
+.ant-calendar-last-month-cell .ant-calendar-date,
+.ant-calendar-next-month-btn-day .ant-calendar-date {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-selected-day .ant-calendar-date {
+  background: #1890ff;
+  color: #fff;
+  border: 1px solid transparent;
+}
+.ant-calendar-selected-day .ant-calendar-date:hover {
+  background: #1890ff;
+}
+.ant-calendar-disabled-cell .ant-calendar-date {
+  cursor: not-allowed;
+  color: #bcbcbc;
+  background: #f5f5f5;
+  border-radius: 0;
+  width: auto;
+  border: 1px solid transparent;
+}
+.ant-calendar-disabled-cell .ant-calendar-date:hover {
+  background: #f5f5f5;
+}
+.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date {
+  position: relative;
+  margin-right: 5px;
+  padding-left: 5px;
+}
+.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before {
+  content: " ";
+  position: absolute;
+  top: -1px;
+  left: 5px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #bcbcbc;
+  border-radius: 2px;
+}
+.ant-calendar-disabled-cell-first-of-row .ant-calendar-date {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.ant-calendar-disabled-cell-last-of-row .ant-calendar-date {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.ant-calendar-footer {
+  border-top: 1px solid #e8e8e8;
+  line-height: 38px;
+  padding: 0 12px;
+}
+.ant-calendar-footer:empty {
+  border-top: 0;
+}
+.ant-calendar-footer-btn {
+  text-align: center;
+  display: block;
+}
+.ant-calendar-footer-extra + .ant-calendar-footer-btn {
+  border-top: 1px solid #e8e8e8;
+  margin: 0 -12px;
+  padding: 0 12px;
+}
+.ant-calendar .ant-calendar-today-btn,
+.ant-calendar .ant-calendar-clear-btn {
+  display: inline-block;
+  text-align: center;
+  margin: 0 0 0 8px;
+}
+.ant-calendar .ant-calendar-today-btn-disabled,
+.ant-calendar .ant-calendar-clear-btn-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-today-btn:only-child,
+.ant-calendar .ant-calendar-clear-btn:only-child {
+  margin: 0;
+}
+.ant-calendar .ant-calendar-clear-btn {
+  display: none;
+  position: absolute;
+  right: 5px;
+  text-indent: -76px;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  top: 7px;
+  margin: 0;
+}
+.ant-calendar .ant-calendar-clear-btn:after {
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e62e";
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  line-height: 1;
+  width: 20px;
+  text-indent: 43px;
+  transition: color 0.3s ease;
+}
+.ant-calendar .ant-calendar-clear-btn:hover:after {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar .ant-calendar-ok-btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 0 15px;
+  height: 32px;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  color: #fff;
+  background-color: #1890ff;
+  border-color: #1890ff;
+  padding: 0 7px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 24px;
+  line-height: 22px;
+}
+.ant-calendar .ant-calendar-ok-btn > .anticon {
+  line-height: 1;
+}
+.ant-calendar .ant-calendar-ok-btn,
+.ant-calendar .ant-calendar-ok-btn:active,
+.ant-calendar .ant-calendar-ok-btn:focus {
+  outline: 0;
+}
+.ant-calendar .ant-calendar-ok-btn:not([disabled]):hover {
+  text-decoration: none;
+}
+.ant-calendar .ant-calendar-ok-btn:not([disabled]):active {
+  outline: 0;
+  transition: none;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled,
+.ant-calendar .ant-calendar-ok-btn[disabled] {
+  cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > *,
+.ant-calendar .ant-calendar-ok-btn[disabled] > * {
+  pointer-events: none;
+}
+.ant-calendar .ant-calendar-ok-btn-lg {
+  padding: 0 15px;
+  font-size: 16px;
+  border-radius: 4px;
+  height: 40px;
+}
+.ant-calendar .ant-calendar-ok-btn-sm {
+  padding: 0 7px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 24px;
+}
+.ant-calendar .ant-calendar-ok-btn > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn:hover,
+.ant-calendar .ant-calendar-ok-btn:focus {
+  color: #fff;
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+}
+.ant-calendar .ant-calendar-ok-btn:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn:focus > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn:focus > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn:active,
+.ant-calendar .ant-calendar-ok-btn.active {
+  color: #fff;
+  background-color: #096dd9;
+  border-color: #096dd9;
+}
+.ant-calendar .ant-calendar-ok-btn:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.active > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled,
+.ant-calendar .ant-calendar-ok-btn[disabled],
+.ant-calendar .ant-calendar-ok-btn.disabled:hover,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus,
+.ant-calendar .ant-calendar-ok-btn.disabled:active,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active,
+.ant-calendar .ant-calendar-ok-btn.disabled.active,
+.ant-calendar .ant-calendar-ok-btn[disabled].active {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child,
+.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child:after,
+.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child {
+  color: currentColor;
+}
+.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+}
+.ant-calendar-range-picker-input {
+  background-color: transparent;
+  border: 0;
+  height: 99%;
+  outline: 0;
+  width: 44%;
+  text-align: center;
+}
+.ant-calendar-range-picker-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-calendar-range-picker-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-range-picker-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-range-picker-input[disabled] {
+  cursor: not-allowed;
+}
+.ant-calendar-range-picker-separator {
+  color: rgba(0, 0, 0, 0.45);
+  width: 10px;
+  display: inline-block;
+  height: 100%;
+  vertical-align: top;
+}
+.ant-calendar-range {
+  width: 552px;
+  overflow: hidden;
+}
+.ant-calendar-range .ant-calendar-date-panel::after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.ant-calendar-range-part {
+  width: 50%;
+  position: relative;
+}
+.ant-calendar-range-left {
+  float: left;
+}
+.ant-calendar-range-left .ant-calendar-time-picker-inner {
+  border-right: 1.5px solid #e8e8e8;
+}
+.ant-calendar-range-right {
+  float: right;
+}
+.ant-calendar-range-right .ant-calendar-time-picker-inner {
+  border-left: 1.5px solid #e8e8e8;
+}
+.ant-calendar-range-middle {
+  position: absolute;
+  left: 50%;
+  width: 20px;
+  margin-left: -132px;
+  text-align: center;
+  height: 34px;
+  line-height: 34px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar-range-right .ant-calendar-date-input-wrap {
+  margin-left: -118px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-range-middle {
+  margin-left: -12px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-range-right .ant-calendar-date-input-wrap {
+  margin-left: 0;
+}
+.ant-calendar-range .ant-calendar-input-wrap {
+  position: relative;
+  height: 34px;
+}
+.ant-calendar-range .ant-calendar-input,
+.ant-calendar-range .ant-calendar-time-picker-input {
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+  height: 24px;
+  border: 0;
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+.ant-calendar-range .ant-calendar-input::-moz-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-calendar-range .ant-calendar-input:-ms-input-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-range .ant-calendar-input::-webkit-input-placeholder,
+.ant-calendar-range .ant-calendar-time-picker-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-calendar-range .ant-calendar-input:hover,
+.ant-calendar-range .ant-calendar-time-picker-input:hover {
+  border-color: #40a9ff;
+}
+.ant-calendar-range .ant-calendar-input:focus,
+.ant-calendar-range .ant-calendar-time-picker-input:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-calendar-range .ant-calendar-input-disabled,
+.ant-calendar-range .ant-calendar-time-picker-input-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-range .ant-calendar-input-disabled:hover,
+.ant-calendar-range .ant-calendar-time-picker-input-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-calendar-range .ant-calendar-input,
+textarea.ant-calendar-range .ant-calendar-time-picker-input {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-calendar-range .ant-calendar-input-lg,
+.ant-calendar-range .ant-calendar-time-picker-input-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-calendar-range .ant-calendar-input-sm,
+.ant-calendar-range .ant-calendar-time-picker-input-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-calendar-range .ant-calendar-input:focus,
+.ant-calendar-range .ant-calendar-time-picker-input:focus {
+  box-shadow: none;
+}
+.ant-calendar-range .ant-calendar-time-picker-icon {
+  display: none;
+}
+.ant-calendar-range.ant-calendar-week-number {
+  width: 574px;
+}
+.ant-calendar-range.ant-calendar-week-number .ant-calendar-range-part {
+  width: 286px;
+}
+.ant-calendar-range .ant-calendar-year-panel,
+.ant-calendar-range .ant-calendar-month-panel,
+.ant-calendar-range .ant-calendar-decade-panel {
+  top: 34px;
+}
+.ant-calendar-range .ant-calendar-month-panel .ant-calendar-year-panel {
+  top: 0;
+}
+.ant-calendar-range .ant-calendar-decade-panel-table,
+.ant-calendar-range .ant-calendar-year-panel-table,
+.ant-calendar-range .ant-calendar-month-panel-table {
+  height: 208px;
+}
+.ant-calendar-range .ant-calendar-in-range-cell {
+  border-radius: 0;
+  position: relative;
+}
+.ant-calendar-range .ant-calendar-in-range-cell > div {
+  position: relative;
+  z-index: 1;
+}
+.ant-calendar-range .ant-calendar-in-range-cell:before {
+  content: '';
+  display: block;
+  background: #e6f7ff;
+  border-radius: 0;
+  border: 0;
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+}
+div.ant-calendar-range-quick-selector {
+  text-align: left;
+}
+div.ant-calendar-range-quick-selector > a {
+  margin-right: 8px;
+}
+.ant-calendar-range .ant-calendar-header,
+.ant-calendar-range .ant-calendar-month-panel-header,
+.ant-calendar-range .ant-calendar-year-panel-header {
+  border-bottom: 0;
+}
+.ant-calendar-range .ant-calendar-body,
+.ant-calendar-range .ant-calendar-month-panel-body,
+.ant-calendar-range .ant-calendar-year-panel-body {
+  border-top: 1px solid #e8e8e8;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker {
+  height: 207px;
+  width: 100%;
+  top: 68px;
+  z-index: 2;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-panel {
+  height: 267px;
+  margin-top: -34px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner {
+  padding-top: 40px;
+  height: 100%;
+  background: none;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-combobox {
+  display: inline-block;
+  height: 100%;
+  background-color: #fff;
+  border-top: 1px solid #e8e8e8;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-select {
+  height: 100%;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-select ul {
+  max-height: 100%;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
+  margin-right: 8px;
+}
+.ant-calendar-range.ant-calendar-time .ant-calendar-today-btn {
+  margin: 8px 12px;
+  height: 22px;
+  line-height: 22px;
+}
+.ant-calendar-range-with-ranges.ant-calendar-time .ant-calendar-time-picker {
+  height: 247px;
+}
+.ant-calendar-range-with-ranges.ant-calendar-time .ant-calendar-time-picker-panel {
+  height: 281px;
+}
+.ant-calendar-range.ant-calendar-show-time-picker .ant-calendar-body {
+  border-top-color: transparent;
+}
+.ant-calendar-time-picker {
+  position: absolute;
+  width: 100%;
+  top: 40px;
+  background-color: #fff;
+}
+.ant-calendar-time-picker-panel {
+  z-index: 1050;
+  position: absolute;
+  width: 100%;
+}
+.ant-calendar-time-picker-inner {
+  display: inline-block;
+  position: relative;
+  outline: none;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #fff;
+  background-clip: padding-box;
+  line-height: 1.5;
+  overflow: hidden;
+  width: 100%;
+}
+.ant-calendar-time-picker-combobox {
+  width: 100%;
+}
+.ant-calendar-time-picker-column-1,
+.ant-calendar-time-picker-column-1 .ant-calendar-time-picker-select {
+  width: 100%;
+}
+.ant-calendar-time-picker-column-2 .ant-calendar-time-picker-select {
+  width: 50%;
+}
+.ant-calendar-time-picker-column-3 .ant-calendar-time-picker-select {
+  width: 33.33%;
+}
+.ant-calendar-time-picker-column-4 .ant-calendar-time-picker-select {
+  width: 25%;
+}
+.ant-calendar-time-picker-input-wrap {
+  display: none;
+}
+.ant-calendar-time-picker-select {
+  float: left;
+  font-size: 14px;
+  border-right: 1px solid #e8e8e8;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  height: 226px;
+}
+.ant-calendar-time-picker-select:hover {
+  overflow-y: auto;
+}
+.ant-calendar-time-picker-select:first-child {
+  border-left: 0;
+  margin-left: 0;
+}
+.ant-calendar-time-picker-select:last-child {
+  border-right: 0;
+}
+.ant-calendar-time-picker-select ul {
+  list-style: none;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-height: 206px;
+}
+.ant-calendar-time-picker-select li {
+  text-align: center;
+  list-style: none;
+  box-sizing: content-box;
+  margin: 0;
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.3s ease;
+}
+.ant-calendar-time-picker-select li:last-child:after {
+  content: '';
+  height: 202px;
+  display: block;
+}
+.ant-calendar-time-picker-select li:hover {
+  background: #e6f7ff;
+}
+li.ant-calendar-time-picker-select-option-selected {
+  background: #f5f5f5;
+  font-weight: bold;
+}
+li.ant-calendar-time-picker-select-option-disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+li.ant-calendar-time-picker-select-option-disabled:hover {
+  background: transparent;
+  cursor: not-allowed;
+}
+.ant-calendar-time .ant-calendar-day-select {
+  padding: 0 2px;
+  font-weight: 500;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 34px;
+}
+.ant-calendar-time .ant-calendar-footer {
+  position: relative;
+  height: auto;
+}
+.ant-calendar-time .ant-calendar-footer-btn {
+  text-align: right;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-today-btn {
+  float: left;
+  margin: 0;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
+  display: inline-block;
+  margin-right: 8px;
+}
+.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-month-panel {
+  position: absolute;
+  top: 1px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  border-radius: 4px;
+  background: #fff;
+  outline: none;
+}
+.ant-calendar-month-panel > div {
+  height: 100%;
+}
+.ant-calendar-month-panel-hidden {
+  display: none;
+}
+.ant-calendar-month-panel-header {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  user-select: none;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-month-panel-header a:hover {
+  color: #40a9ff;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
+  padding: 0 2px;
+  font-weight: 500;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select-arrow,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select-arrow {
+  display: none;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn {
+  position: absolute;
+  top: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+  padding: 0 5px;
+  font-size: 16px;
+  display: inline-block;
+  line-height: 40px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn {
+  left: 7px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn:after {
+  content: '«';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn {
+  right: 7px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn:after,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn:after {
+  content: '»';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn {
+  left: 29px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn:after {
+  content: '‹';
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn {
+  right: 29px;
+}
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn:after {
+  content: '›';
+}
+.ant-calendar-month-panel-body {
+  height: calc(100% - 40px);
+}
+.ant-calendar-month-panel-table {
+  table-layout: fixed;
+  width: 100%;
+  height: 100%;
+  border-collapse: separate;
+}
+.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-month-panel-cell {
+  text-align: center;
+}
+.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
+.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover {
+  cursor: not-allowed;
+  color: #bcbcbc;
+  background: #f5f5f5;
+}
+.ant-calendar-month-panel-month {
+  display: inline-block;
+  margin: 0 auto;
+  color: #54657e;
+  background: transparent;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  border-radius: 2px;
+  transition: background 0.3s ease;
+}
+.ant-calendar-month-panel-month:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-calendar-year-panel {
+  position: absolute;
+  top: 1px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  border-radius: 4px;
+  background: #fff;
+  outline: none;
+}
+.ant-calendar-year-panel > div {
+  height: 100%;
+}
+.ant-calendar-year-panel-hidden {
+  display: none;
+}
+.ant-calendar-year-panel-header {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  user-select: none;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-year-panel-header a:hover {
+  color: #40a9ff;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
+  padding: 0 2px;
+  font-weight: 500;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select-arrow,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select-arrow {
+  display: none;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn {
+  position: absolute;
+  top: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+  padding: 0 5px;
+  font-size: 16px;
+  display: inline-block;
+  line-height: 40px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn {
+  left: 7px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn:after {
+  content: '«';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn {
+  right: 7px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn:after,
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn:after {
+  content: '»';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn {
+  left: 29px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn:after {
+  content: '‹';
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn {
+  right: 29px;
+}
+.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn:after {
+  content: '›';
+}
+.ant-calendar-year-panel-body {
+  height: calc(100% - 40px);
+}
+.ant-calendar-year-panel-table {
+  table-layout: fixed;
+  width: 100%;
+  height: 100%;
+  border-collapse: separate;
+}
+.ant-calendar-year-panel-cell {
+  text-align: center;
+}
+.ant-calendar-year-panel-year {
+  display: inline-block;
+  margin: 0 auto;
+  color: #54657e;
+  background: transparent;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  border-radius: 2px;
+  transition: background 0.3s ease;
+}
+.ant-calendar-year-panel-year:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,
+.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
+  user-select: none;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-decade-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  background: #fff;
+  border-radius: 4px;
+  outline: none;
+}
+.ant-calendar-decade-panel-hidden {
+  display: none;
+}
+.ant-calendar-decade-panel-header {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  user-select: none;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-calendar-decade-panel-header a:hover {
+  color: #40a9ff;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select {
+  padding: 0 2px;
+  font-weight: 500;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select-arrow,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select-arrow {
+  display: none;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn {
+  position: absolute;
+  top: 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+  padding: 0 5px;
+  font-size: 16px;
+  display: inline-block;
+  line-height: 40px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn {
+  left: 7px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn:after {
+  content: '«';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn {
+  right: 7px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn:after,
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn:after {
+  content: '»';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn {
+  left: 29px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn:after {
+  content: '‹';
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn {
+  right: 29px;
+}
+.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn:after {
+  content: '›';
+}
+.ant-calendar-decade-panel-body {
+  height: calc(100% - 40px);
+}
+.ant-calendar-decade-panel-table {
+  table-layout: fixed;
+  width: 100%;
+  height: 100%;
+  border-collapse: separate;
+}
+.ant-calendar-decade-panel-cell {
+  text-align: center;
+  white-space: nowrap;
+}
+.ant-calendar-decade-panel-decade {
+  display: inline-block;
+  margin: 0 auto;
+  color: #54657e;
+  background: transparent;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 6px;
+  border-radius: 2px;
+  transition: background 0.3s ease;
+}
+.ant-calendar-decade-panel-decade:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
+.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade,
+.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade {
+  user-select: none;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-calendar-month .ant-calendar-month-header-wrap {
+  position: relative;
+  height: 288px;
+}
+.ant-calendar-month .ant-calendar-month-panel,
+.ant-calendar-month .ant-calendar-year-panel {
+  top: 0;
+  height: 100%;
+}
+.ant-calendar-week-number-cell {
+  opacity: 0.5;
+}
+.ant-calendar-week-number .ant-calendar-body tr {
+  transition: all .3s;
+  cursor: pointer;
+}
+.ant-calendar-week-number .ant-calendar-body tr:hover {
+  background: #e6f7ff;
+}
+.ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week {
+  background: #bae7ff;
+  font-weight: bold;
+}
+.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day .ant-calendar-date,
+.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day:hover .ant-calendar-date {
+  background: transparent;
+  color: #54657e;
+}
+.ant-divider {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: #e8e8e8;
+}
+.ant-divider,
+.ant-divider-vertical {
+  margin: 0 8px;
+  display: inline-block;
+  height: 0.9em;
+  width: 1px;
+  vertical-align: middle;
+  position: relative;
+  top: -0.06em;
+}
+.ant-divider-horizontal {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 24px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text {
+  display: table;
+  white-space: nowrap;
+  text-align: center;
+  background: transparent;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
+  margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text:before,
+.ant-divider-horizontal.ant-divider-with-text:after {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 50%;
+  border-top: 1px solid #e8e8e8;
+  transform: translateY(50%);
+}
+.ant-divider-inner-text {
+  display: inline-block;
+  padding: 0 24px;
+}
+.ant-divider-horizontal.ant-divider-with-text-left {
+  display: table;
+  white-space: nowrap;
+  text-align: center;
+  background: transparent;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-left:before {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 5%;
+  border-top: 1px solid #e8e8e8;
+  transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-left:after {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 95%;
+  border-top: 1px solid #e8e8e8;
+  transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-left-inner-text {
+  display: inline-block;
+  padding: 0 10px;
+}
+.ant-divider-horizontal.ant-divider-with-text-right {
+  display: table;
+  white-space: nowrap;
+  text-align: center;
+  background: transparent;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  margin: 16px 0;
+}
+.ant-divider-horizontal.ant-divider-with-text-right:before {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 95%;
+  border-top: 1px solid #e8e8e8;
+  transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-right:after {
+  content: '';
+  display: table-cell;
+  position: relative;
+  top: 50%;
+  width: 5%;
+  border-top: 1px solid #e8e8e8;
+  transform: translateY(50%);
+}
+.ant-divider-horizontal.ant-divider-with-text-right-inner-text {
+  display: inline-block;
+  padding: 0 10px;
+}
+.ant-divider-dashed {
+  background: none;
+  border-top: 1px dashed #e8e8e8;
+}
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed {
+  border-top: 0;
+}
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:before,
+.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:after {
+  border-style: dashed none none;
+}
+.ant-dropdown {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: 1050;
+  display: block;
+}
+.ant-dropdown-wrap {
+  position: relative;
+}
+.ant-dropdown-wrap .ant-btn > .anticon-down {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-wrap .ant-btn > .anticon-down {
+  font-size: 12px;
+}
+.ant-dropdown-wrap .anticon-down:before {
+  transition: transform .2s;
+}
+.ant-dropdown-wrap-open .anticon-down:before {
+  transform: rotate(180deg);
+}
+.ant-dropdown-hidden,
+.ant-dropdown-menu-hidden {
+  display: none;
+}
+.ant-dropdown-menu {
+  outline: none;
+  position: relative;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-clip: padding-box;
+}
+.ant-dropdown-menu-item-group-title {
+  color: rgba(0, 0, 0, 0.45);
+  padding: 5px 12px;
+  transition: all .3s;
+}
+.ant-dropdown-menu-submenu-popup {
+  position: absolute;
+  z-index: 1050;
+}
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+  padding: 5px 12px;
+  margin: 0;
+  clear: both;
+  font-size: 14px;
+  font-weight: normal;
+  color: #54657e;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all .3s;
+  line-height: 22px;
+}
+.ant-dropdown-menu-item > a,
+.ant-dropdown-menu-submenu-title > a {
+  color: #54657e;
+  display: block;
+  padding: 5px 12px;
+  margin: -5px -12px;
+  transition: all .3s;
+}
+.ant-dropdown-menu-item > a:focus,
+.ant-dropdown-menu-submenu-title > a:focus {
+  text-decoration: none;
+}
+.ant-dropdown-menu-item-selected,
+.ant-dropdown-menu-submenu-title-selected,
+.ant-dropdown-menu-item-selected > a,
+.ant-dropdown-menu-submenu-title-selected > a {
+  color: #1890ff;
+  background-color: #e6f7ff;
+}
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover {
+  background-color: #e6f7ff;
+}
+.ant-dropdown-menu-item-disabled,
+.ant-dropdown-menu-submenu-title-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-dropdown-menu-item-disabled:hover,
+.ant-dropdown-menu-submenu-title-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+  cursor: not-allowed;
+}
+.ant-dropdown-menu-item:first-child,
+.ant-dropdown-menu-submenu-title:first-child,
+.ant-dropdown-menu-item:first-child > a,
+.ant-dropdown-menu-submenu-title:first-child > a {
+  border-radius: 4px 4px 0 0;
+}
+.ant-dropdown-menu-item:last-child,
+.ant-dropdown-menu-submenu-title:last-child,
+.ant-dropdown-menu-item:last-child > a,
+.ant-dropdown-menu-submenu-title:last-child > a {
+  border-radius: 0 0 4px 4px;
+}
+.ant-dropdown-menu-item:only-child,
+.ant-dropdown-menu-submenu-title:only-child,
+.ant-dropdown-menu-item:only-child > a,
+.ant-dropdown-menu-submenu-title:only-child > a {
+  border-radius: 4px;
+}
+.ant-dropdown-menu-item-divider,
+.ant-dropdown-menu-submenu-title-divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: #e8e8e8;
+  line-height: 0;
+}
+.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow,
+.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow {
+  position: absolute;
+  right: 8px;
+}
+.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+  font-family: "anticon" !important;
+  font-style: normal;
+  content: "\e61f";
+  color: rgba(0, 0, 0, 0.45);
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+:root .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+  font-size: 12px;
+}
+.ant-dropdown-menu-submenu-title {
+  padding-right: 26px;
+}
+.ant-dropdown-menu-submenu-title:first-child,
+.ant-dropdown-menu-submenu-title:last-child {
+  border-radius: 0;
+}
+.ant-dropdown-menu-submenu-vertical {
+  position: relative;
+}
+.ant-dropdown-menu-submenu-vertical > .ant-dropdown-menu {
+  top: 0;
+  left: 100%;
+  position: absolute;
+  min-width: 100%;
+  margin-left: 4px;
+  transform-origin: 0 0;
+}
+.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,
+.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-dropdown-menu-submenu:first-child .ant-dropdown-menu-submenu-title {
+  border-radius: 4px 4px 0 0;
+}
+.ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+  border-radius: 0 0 4px 4px;
+}
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomRight,
+.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topRight,
+.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomLeft,
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomCenter,
+.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topLeft,
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topCenter,
+.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.ant-dropdown-trigger .anticon-down,
+.ant-dropdown-link .anticon-down {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-trigger .anticon-down,
+:root .ant-dropdown-link .anticon-down {
+  font-size: 12px;
+}
+.ant-dropdown-button {
+  white-space: nowrap;
+}
+.ant-dropdown-button.ant-btn-group > .ant-btn:last-child:not(:first-child) {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ant-dropdown-button .anticon-down {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-dropdown-button .anticon-down {
+  font-size: 12px;
+}
+.ant-dropdown-menu-dark,
+.ant-dropdown-menu-dark .ant-dropdown-menu {
+  background: #2a3542;
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a {
+  color: rgba(255, 255, 255, 0.65);
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a .ant-dropdown-menu-submenu-arrow:after {
+  color: rgba(255, 255, 255, 0.65);
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item > a:hover {
+  color: #fff;
+  background: transparent;
+}
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,
+.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a {
+  background: #1890ff;
+  color: #fff;
+}
+.ant-form {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-form legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 16px;
+  line-height: inherit;
+  color: rgba(0, 0, 0, 0.45);
+  border: 0;
+  border-bottom: 1px solid #d9d9d9;
+}
+.ant-form label {
+  font-size: 14px;
+}
+.ant-form input[type="search"] {
+  box-sizing: border-box;
+}
+.ant-form input[type="radio"],
+.ant-form input[type="checkbox"] {
+  line-height: normal;
+}
+.ant-form input[type="file"] {
+  display: block;
+}
+.ant-form input[type="range"] {
+  display: block;
+  width: 100%;
+}
+.ant-form select[multiple],
+.ant-form select[size] {
+  height: auto;
+}
+.ant-form input[type="file"]:focus,
+.ant-form input[type="radio"]:focus,
+.ant-form input[type="checkbox"]:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.ant-form output {
+  display: block;
+  padding-top: 15px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+}
+.ant-form-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  content: "*";
+  font-family: SimSun;
+  line-height: 1;
+  font-size: 14px;
+  color: #f5222d;
+}
+.ant-form-hide-required-mark .ant-form-item-required:before {
+  display: none;
+}
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled {
+  cursor: not-allowed;
+}
+.ant-radio-inline.disabled,
+.ant-radio-vertical.disabled,
+.ant-checkbox-inline.disabled,
+.ant-checkbox-vertical.disabled {
+  cursor: not-allowed;
+}
+.ant-radio.disabled label,
+.ant-checkbox.disabled label {
+  cursor: not-allowed;
+}
+.ant-form-item {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 24px;
+  vertical-align: top;
+  transition: margin 0.15s steps(1);
+}
+.ant-form-item label {
+  position: relative;
+}
+.ant-form-item label > .anticon {
+  vertical-align: top;
+  font-size: 14px;
+}
+.ant-form-item-control > .ant-form-item:last-child,
+.ant-form-item [class^="ant-col-"] > .ant-form-item:only-child {
+  margin-bottom: -24px;
+}
+.ant-form-item-control {
+  line-height: 39.9999px;
+  position: relative;
+  zoom: 1;
+}
+.ant-form-item-control:before,
+.ant-form-item-control:after {
+  content: " ";
+  display: table;
+}
+.ant-form-item-control:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-form-item-control:before,
+.ant-form-item-control:after {
+  content: " ";
+  display: table;
+}
+.ant-form-item-control:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-form-item-children {
+  position: relative;
+}
+.ant-form-item-with-help {
+  margin-bottom: 5px;
+  transition: none;
+}
+.ant-form-item-label {
+  text-align: right;
+  vertical-align: middle;
+  line-height: 39.9999px;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ant-form-item-label label {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-form-item-label label:after {
+  content: ":";
+  margin: 0 8px 0 2px;
+  position: relative;
+  top: -0.5px;
+}
+.ant-form-item .ant-switch {
+  margin: 2px 0 4px;
+}
+.ant-form-item-no-colon .ant-form-item-label label:after {
+  content: " ";
+}
+.ant-form-explain,
+.ant-form-extra {
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5;
+  transition: color 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+  margin-top: -2px;
+}
+.ant-form-extra {
+  padding-top: 4px;
+}
+.ant-form-text {
+  display: inline-block;
+  padding-right: 8px;
+}
+.ant-form-split {
+  display: block;
+  text-align: center;
+}
+form .has-feedback .ant-input {
+  padding-right: 24px;
+}
+form .has-feedback > .ant-select .ant-select-arrow,
+form .has-feedback > .ant-select .ant-select-selection__clear,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-arrow,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection__clear {
+  right: 28px;
+}
+form .has-feedback > .ant-select .ant-select-selection-selected-value,
+form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection-selected-value {
+  padding-right: 42px;
+}
+form .has-feedback .ant-cascader-picker-arrow {
+  margin-right: 17px;
+}
+form .has-feedback .ant-cascader-picker-clear {
+  right: 28px;
+}
+form .has-feedback .ant-input-search:not(.ant-input-search-enter-button) .ant-input-suffix {
+  right: 28px;
+}
+form .has-feedback .ant-calendar-picker-icon,
+form .has-feedback .ant-time-picker-icon,
+form .has-feedback .ant-calendar-picker-clear,
+form .has-feedback .ant-time-picker-clear {
+  right: 28px;
+}
+form textarea.ant-input {
+  height: auto;
+}
+form .ant-upload {
+  background: transparent;
+}
+form input[type="radio"],
+form input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+form .ant-radio-inline,
+form .ant-checkbox-inline {
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+  margin-left: 8px;
+}
+form .ant-radio-inline:first-child,
+form .ant-checkbox-inline:first-child {
+  margin-left: 0;
+}
+form .ant-checkbox-vertical,
+form .ant-radio-vertical {
+  display: block;
+}
+form .ant-checkbox-vertical + .ant-checkbox-vertical,
+form .ant-radio-vertical + .ant-radio-vertical {
+  margin-left: 0;
+}
+form .ant-input-number + .ant-form-text {
+  margin-left: 8px;
+}
+form .ant-select,
+form .ant-cascader-picker {
+  width: 100%;
+}
+form .ant-input-group .ant-select,
+form .ant-input-group .ant-cascader-picker {
+  width: auto;
+}
+form .ant-input-group-wrapper {
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+.ant-input-group-wrap .ant-select-selection {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.ant-input-group-wrap .ant-select-selection:hover {
+  border-color: #d9d9d9;
+}
+.ant-input-group-wrap .ant-select-selection--single {
+  margin-left: -1px;
+  height: 40px;
+  background-color: #eee;
+}
+.ant-input-group-wrap .ant-select-selection--single .ant-select-selection__rendered {
+  padding-left: 8px;
+  padding-right: 25px;
+  line-height: 30px;
+}
+.ant-input-group-wrap .ant-select-open .ant-select-selection {
+  border-color: #d9d9d9;
+  box-shadow: none;
+}
+.ant-form-vertical .ant-form-item-label,
+.ant-col-24.ant-form-item-label,
+.ant-col-xl-24.ant-form-item-label {
+  padding: 0 0 8px;
+  margin: 0;
+  display: block;
+  text-align: left;
+  line-height: 1.5;
+}
+.ant-form-vertical .ant-form-item-label label:after,
+.ant-col-24.ant-form-item-label label:after,
+.ant-col-xl-24.ant-form-item-label label:after {
+  display: none;
+}
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 8px;
+}
+.ant-form-vertical .ant-form-item-control {
+  line-height: 1.5;
+}
+.ant-form-vertical .ant-form-explain,
+.ant-form-vertical .ant-form-extra {
+  margin-top: 2px;
+  margin-bottom: -4px;
+}
+@media (max-width: 575px) {
+  .ant-form-item-label,
+  .ant-form-item-control-wrapper {
+    display: block;
+    width: 100%;
+  }
+  .ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-form-item-label label:after {
+    display: none;
+  }
+  .ant-col-xs-24.ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-col-xs-24.ant-form-item-label label:after {
+    display: none;
+  }
+}
+@media (max-width: 767px) {
+  .ant-col-sm-24.ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-col-sm-24.ant-form-item-label label:after {
+    display: none;
+  }
+}
+@media (max-width: 991px) {
+  .ant-col-md-24.ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-col-md-24.ant-form-item-label label:after {
+    display: none;
+  }
+}
+@media (max-width: 1199px) {
+  .ant-col-lg-24.ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-col-lg-24.ant-form-item-label label:after {
+    display: none;
+  }
+}
+@media (max-width: 1599px) {
+  .ant-col-xl-24.ant-form-item-label {
+    padding: 0 0 8px;
+    margin: 0;
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+  }
+  .ant-col-xl-24.ant-form-item-label label:after {
+    display: none;
+  }
+}
+.ant-form-inline .ant-form-item {
+  display: inline-block;
+  margin-right: 16px;
+  margin-bottom: 0;
+}
+.ant-form-inline .ant-form-item-with-help {
+  margin-bottom: 24px;
+}
+.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper,
+.ant-form-inline .ant-form-item > .ant-form-item-label {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ant-form-inline .ant-form-text {
+  display: inline-block;
+}
+.ant-form-inline .has-feedback {
+  display: inline-block;
+}
+.ant-form-inline .ant-form-explain {
+  position: absolute;
+}
+.has-success.has-feedback .ant-form-item-children:after,
+.has-warning.has-feedback .ant-form-item-children:after,
+.has-error.has-feedback .ant-form-item-children:after,
+.is-validating.has-feedback .ant-form-item-children:after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  visibility: visible;
+  pointer-events: none;
+  width: 32px;
+  height: 20px;
+  line-height: 20px;
+  margin-top: -10px;
+  text-align: center;
+  font-size: 14px;
+  animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "";
+  z-index: 1;
+}
+.has-success.has-feedback .ant-form-item-children:after {
+  animation-name: diffZoomIn1 !important;
+  content: '\e630';
+  color: #52c41a;
+}
+.has-warning .ant-form-explain,
+.has-warning .ant-form-split {
+  color: #faad14;
+}
+.has-warning .ant-input,
+.has-warning .ant-input:hover {
+  border-color: #faad14;
+}
+.has-warning .ant-input:focus {
+  border-color: #ffc53d;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input:not([disabled]):hover {
+  border-color: #faad14;
+}
+.has-warning .ant-calendar-picker-open .ant-calendar-picker-input {
+  border-color: #ffc53d;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input-prefix {
+  color: #faad14;
+}
+.has-warning .ant-input-group-addon {
+  color: #faad14;
+  border-color: #faad14;
+  background-color: #fff;
+}
+.has-warning .has-feedback {
+  color: #faad14;
+}
+.has-warning.has-feedback .ant-form-item-children:after {
+  content: '\e62c';
+  color: #faad14;
+  animation-name: diffZoomIn3 !important;
+}
+.has-warning .ant-select-selection {
+  border-color: #faad14;
+}
+.has-warning .ant-select-open .ant-select-selection,
+.has-warning .ant-select-focused .ant-select-selection {
+  border-color: #ffc53d;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-calendar-picker-icon:after,
+.has-warning .ant-time-picker-icon:after,
+.has-warning .ant-picker-icon:after,
+.has-warning .ant-select-arrow,
+.has-warning .ant-cascader-picker-arrow {
+  color: #faad14;
+}
+.has-warning .ant-input-number,
+.has-warning .ant-time-picker-input {
+  border-color: #faad14;
+}
+.has-warning .ant-input-number-focused,
+.has-warning .ant-time-picker-input-focused,
+.has-warning .ant-input-number:focus,
+.has-warning .ant-time-picker-input:focus {
+  border-color: #ffc53d;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-warning .ant-input-number:not([disabled]):hover,
+.has-warning .ant-time-picker-input:not([disabled]):hover {
+  border-color: #faad14;
+}
+.has-warning .ant-cascader-picker:focus .ant-cascader-input {
+  border-color: #ffc53d;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+}
+.has-error .ant-form-explain,
+.has-error .ant-form-split {
+  color: #f5222d;
+}
+.has-error .ant-input,
+.has-error .ant-input:hover {
+  border-color: #f5222d;
+}
+.has-error .ant-input:focus {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input:not([disabled]):hover {
+  border-color: #f5222d;
+}
+.has-error .ant-calendar-picker-open .ant-calendar-picker-input {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input-prefix {
+  color: #f5222d;
+}
+.has-error .ant-input-group-addon {
+  color: #f5222d;
+  border-color: #f5222d;
+  background-color: #fff;
+}
+.has-error .has-feedback {
+  color: #f5222d;
+}
+.has-error.has-feedback .ant-form-item-children:after {
+  content: '\e62e';
+  color: #f5222d;
+  animation-name: diffZoomIn2 !important;
+}
+.has-error .ant-select-selection {
+  border-color: #f5222d;
+}
+.has-error .ant-select-open .ant-select-selection,
+.has-error .ant-select-focused .ant-select-selection {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-select.ant-select-auto-complete .ant-input:focus {
+  border-color: #f5222d;
+}
+.has-error .ant-input-group-addon .ant-select-selection {
+  border-color: transparent;
+  box-shadow: none;
+}
+.has-error .ant-calendar-picker-icon:after,
+.has-error .ant-time-picker-icon:after,
+.has-error .ant-picker-icon:after,
+.has-error .ant-select-arrow,
+.has-error .ant-cascader-picker-arrow {
+  color: #f5222d;
+}
+.has-error .ant-input-number,
+.has-error .ant-time-picker-input {
+  border-color: #f5222d;
+}
+.has-error .ant-input-number-focused,
+.has-error .ant-time-picker-input-focused,
+.has-error .ant-input-number:focus,
+.has-error .ant-time-picker-input:focus {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-input-number:not([disabled]):hover,
+.has-error .ant-time-picker-input:not([disabled]):hover {
+  border-color: #f5222d;
+}
+.has-error .ant-mention-wrapper .ant-mention-editor,
+.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover {
+  border-color: #f5222d;
+}
+.has-error .ant-mention-wrapper.ant-mention-active:not([disabled]) .ant-mention-editor,
+.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):focus {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.has-error .ant-cascader-picker:focus .ant-cascader-input {
+  border-color: #ff4d4f;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
+}
+.is-validating.has-feedback .ant-form-item-children:after {
+  display: inline-block;
+  animation: loadingCircle 1s infinite linear;
+  content: "\e64d";
+  color: #1890ff;
+}
+.ant-advanced-search-form .ant-form-item {
+  margin-bottom: 24px;
+}
+.show-help-enter,
+.show-help-appear {
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.show-help-leave {
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.show-help-enter.show-help-enter-active,
+.show-help-appear.show-help-appear-active {
+  animation-name: antShowHelpIn;
+  animation-play-state: running;
+}
+.show-help-leave.show-help-leave-active {
+  animation-name: antShowHelpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.show-help-enter,
+.show-help-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.show-help-leave {
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+@keyframes antShowHelpIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes antShowHelpOut {
+  to {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+}
+@keyframes diffZoomIn1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes diffZoomIn2 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes diffZoomIn3 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.ant-row {
+  position: relative;
+  margin-left: 0;
+  margin-right: 0;
+  height: auto;
+  zoom: 1;
+  display: block;
+  box-sizing: border-box;
+}
+.ant-row:before,
+.ant-row:after {
+  content: " ";
+  display: table;
+}
+.ant-row:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-row:before,
+.ant-row:after {
+  content: " ";
+  display: table;
+}
+.ant-row:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-row-flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+.ant-row-flex:before,
+.ant-row-flex:after {
+  display: flex;
+}
+.ant-row-flex-start {
+  justify-content: flex-start;
+}
+.ant-row-flex-center {
+  justify-content: center;
+}
+.ant-row-flex-end {
+  justify-content: flex-end;
+}
+.ant-row-flex-space-between {
+  justify-content: space-between;
+}
+.ant-row-flex-space-around {
+  justify-content: space-around;
+}
+.ant-row-flex-top {
+  align-items: flex-start;
+}
+.ant-row-flex-middle {
+  align-items: center;
+}
+.ant-row-flex-bottom {
+  align-items: flex-end;
+}
+.ant-col {
+  position: relative;
+  display: block;
+}
+.ant-col-1, .ant-col-xs-1, .ant-col-sm-1, .ant-col-md-1, .ant-col-lg-1, .ant-col-2, .ant-col-xs-2, .ant-col-sm-2, .ant-col-md-2, .ant-col-lg-2, .ant-col-3, .ant-col-xs-3, .ant-col-sm-3, .ant-col-md-3, .ant-col-lg-3, .ant-col-4, .ant-col-xs-4, .ant-col-sm-4, .ant-col-md-4, .ant-col-lg-4, .ant-col-5, .ant-col-xs-5, .ant-col-sm-5, .ant-col-md-5, .ant-col-lg-5, .ant-col-6, .ant-col-xs-6, .ant-col-sm-6, .ant-col-md-6, .ant-col-lg-6, .ant-col-7, .ant-col-xs-7, .ant-col-sm-7, .ant-col-md-7, .ant-col-lg-7, .ant-col-8, .ant-col-xs-8, .ant-col-sm-8, .ant-col-md-8, .ant-col-lg-8, .ant-col-9, .ant-col-xs-9, .ant-col-sm-9, .ant-col-md-9, .ant-col-lg-9, .ant-col-10, .ant-col-xs-10, .ant-col-sm-10, .ant-col-md-10, .ant-col-lg-10, .ant-col-11, .ant-col-xs-11, .ant-col-sm-11, .ant-col-md-11, .ant-col-lg-11, .ant-col-12, .ant-col-xs-12, .ant-col-sm-12, .ant-col-md-12, .ant-col-lg-12, .ant-col-13, .ant-col-xs-13, .ant-col-sm-13, .ant-col-md-13, .ant-col-lg-13, .ant-col-14, .ant-col-xs-14, .ant-col-sm-14, .ant-col-md-14, .ant-col-lg-14, .ant-col-15, .ant-col-xs-15, .ant-col-sm-15, .ant-col-md-15, .ant-col-lg-15, .ant-col-16, .ant-col-xs-16, .ant-col-sm-16, .ant-col-md-16, .ant-col-lg-16, .ant-col-17, .ant-col-xs-17, .ant-col-sm-17, .ant-col-md-17, .ant-col-lg-17, .ant-col-18, .ant-col-xs-18, .ant-col-sm-18, .ant-col-md-18, .ant-col-lg-18, .ant-col-19, .ant-col-xs-19, .ant-col-sm-19, .ant-col-md-19, .ant-col-lg-19, .ant-col-20, .ant-col-xs-20, .ant-col-sm-20, .ant-col-md-20, .ant-col-lg-20, .ant-col-21, .ant-col-xs-21, .ant-col-sm-21, .ant-col-md-21, .ant-col-lg-21, .ant-col-22, .ant-col-xs-22, .ant-col-sm-22, .ant-col-md-22, .ant-col-lg-22, .ant-col-23, .ant-col-xs-23, .ant-col-sm-23, .ant-col-md-23, .ant-col-lg-23, .ant-col-24, .ant-col-xs-24, .ant-col-sm-24, .ant-col-md-24, .ant-col-lg-24 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 0;
+  padding-right: 0;
+}
+.ant-col-1, .ant-col-2, .ant-col-3, .ant-col-4, .ant-col-5, .ant-col-6, .ant-col-7, .ant-col-8, .ant-col-9, .ant-col-10, .ant-col-11, .ant-col-12, .ant-col-13, .ant-col-14, .ant-col-15, .ant-col-16, .ant-col-17, .ant-col-18, .ant-col-19, .ant-col-20, .ant-col-21, .ant-col-22, .ant-col-23, .ant-col-24 {
+  float: left;
+  flex: 0 0 auto;
+}
+.ant-col-24 {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.ant-col-push-24 {
+  left: 100%;
+}
+.ant-col-pull-24 {
+  right: 100%;
+}
+.ant-col-offset-24 {
+  margin-left: 100%;
+}
+.ant-col-order-24 {
+  order: 24;
+}
+.ant-col-23 {
+  display: block;
+  box-sizing: border-box;
+  width: 95.83333333%;
+}
+.ant-col-push-23 {
+  left: 95.83333333%;
+}
+.ant-col-pull-23 {
+  right: 95.83333333%;
+}
+.ant-col-offset-23 {
+  margin-left: 95.83333333%;
+}
+.ant-col-order-23 {
+  order: 23;
+}
+.ant-col-22 {
+  display: block;
+  box-sizing: border-box;
+  width: 91.66666667%;
+}
+.ant-col-push-22 {
+  left: 91.66666667%;
+}
+.ant-col-pull-22 {
+  right: 91.66666667%;
+}
+.ant-col-offset-22 {
+  margin-left: 91.66666667%;
+}
+.ant-col-order-22 {
+  order: 22;
+}
+.ant-col-21 {
+  display: block;
+  box-sizing: border-box;
+  width: 87.5%;
+}
+.ant-col-push-21 {
+  left: 87.5%;
+}
+.ant-col-pull-21 {
+  right: 87.5%;
+}
+.ant-col-offset-21 {
+  margin-left: 87.5%;
+}
+.ant-col-order-21 {
+  order: 21;
+}
+.ant-col-20 {
+  display: block;
+  box-sizing: border-box;
+  width: 83.33333333%;
+}
+.ant-col-push-20 {
+  left: 83.33333333%;
+}
+.ant-col-pull-20 {
+  right: 83.33333333%;
+}
+.ant-col-offset-20 {
+  margin-left: 83.33333333%;
+}
+.ant-col-order-20 {
+  order: 20;
+}
+.ant-col-19 {
+  display: block;
+  box-sizing: border-box;
+  width: 79.16666667%;
+}
+.ant-col-push-19 {
+  left: 79.16666667%;
+}
+.ant-col-pull-19 {
+  right: 79.16666667%;
+}
+.ant-col-offset-19 {
+  margin-left: 79.16666667%;
+}
+.ant-col-order-19 {
+  order: 19;
+}
+.ant-col-18 {
+  display: block;
+  box-sizing: border-box;
+  width: 75%;
+}
+.ant-col-push-18 {
+  left: 75%;
+}
+.ant-col-pull-18 {
+  right: 75%;
+}
+.ant-col-offset-18 {
+  margin-left: 75%;
+}
+.ant-col-order-18 {
+  order: 18;
+}
+.ant-col-17 {
+  display: block;
+  box-sizing: border-box;
+  width: 70.83333333%;
+}
+.ant-col-push-17 {
+  left: 70.83333333%;
+}
+.ant-col-pull-17 {
+  right: 70.83333333%;
+}
+.ant-col-offset-17 {
+  margin-left: 70.83333333%;
+}
+.ant-col-order-17 {
+  order: 17;
+}
+.ant-col-16 {
+  display: block;
+  box-sizing: border-box;
+  width: 66.66666667%;
+}
+.ant-col-push-16 {
+  left: 66.66666667%;
+}
+.ant-col-pull-16 {
+  right: 66.66666667%;
+}
+.ant-col-offset-16 {
+  margin-left: 66.66666667%;
+}
+.ant-col-order-16 {
+  order: 16;
+}
+.ant-col-15 {
+  display: block;
+  box-sizing: border-box;
+  width: 62.5%;
+}
+.ant-col-push-15 {
+  left: 62.5%;
+}
+.ant-col-pull-15 {
+  right: 62.5%;
+}
+.ant-col-offset-15 {
+  margin-left: 62.5%;
+}
+.ant-col-order-15 {
+  order: 15;
+}
+.ant-col-14 {
+  display: block;
+  box-sizing: border-box;
+  width: 58.33333333%;
+}
+.ant-col-push-14 {
+  left: 58.33333333%;
+}
+.ant-col-pull-14 {
+  right: 58.33333333%;
+}
+.ant-col-offset-14 {
+  margin-left: 58.33333333%;
+}
+.ant-col-order-14 {
+  order: 14;
+}
+.ant-col-13 {
+  display: block;
+  box-sizing: border-box;
+  width: 54.16666667%;
+}
+.ant-col-push-13 {
+  left: 54.16666667%;
+}
+.ant-col-pull-13 {
+  right: 54.16666667%;
+}
+.ant-col-offset-13 {
+  margin-left: 54.16666667%;
+}
+.ant-col-order-13 {
+  order: 13;
+}
+.ant-col-12 {
+  display: block;
+  box-sizing: border-box;
+  width: 50%;
+}
+.ant-col-push-12 {
+  left: 50%;
+}
+.ant-col-pull-12 {
+  right: 50%;
+}
+.ant-col-offset-12 {
+  margin-left: 50%;
+}
+.ant-col-order-12 {
+  order: 12;
+}
+.ant-col-11 {
+  display: block;
+  box-sizing: border-box;
+  width: 45.83333333%;
+}
+.ant-col-push-11 {
+  left: 45.83333333%;
+}
+.ant-col-pull-11 {
+  right: 45.83333333%;
+}
+.ant-col-offset-11 {
+  margin-left: 45.83333333%;
+}
+.ant-col-order-11 {
+  order: 11;
+}
+.ant-col-10 {
+  display: block;
+  box-sizing: border-box;
+  width: 41.66666667%;
+}
+.ant-col-push-10 {
+  left: 41.66666667%;
+}
+.ant-col-pull-10 {
+  right: 41.66666667%;
+}
+.ant-col-offset-10 {
+  margin-left: 41.66666667%;
+}
+.ant-col-order-10 {
+  order: 10;
+}
+.ant-col-9 {
+  display: block;
+  box-sizing: border-box;
+  width: 37.5%;
+}
+.ant-col-push-9 {
+  left: 37.5%;
+}
+.ant-col-pull-9 {
+  right: 37.5%;
+}
+.ant-col-offset-9 {
+  margin-left: 37.5%;
+}
+.ant-col-order-9 {
+  order: 9;
+}
+.ant-col-8 {
+  display: block;
+  box-sizing: border-box;
+  width: 33.33333333%;
+}
+.ant-col-push-8 {
+  left: 33.33333333%;
+}
+.ant-col-pull-8 {
+  right: 33.33333333%;
+}
+.ant-col-offset-8 {
+  margin-left: 33.33333333%;
+}
+.ant-col-order-8 {
+  order: 8;
+}
+.ant-col-7 {
+  display: block;
+  box-sizing: border-box;
+  width: 29.16666667%;
+}
+.ant-col-push-7 {
+  left: 29.16666667%;
+}
+.ant-col-pull-7 {
+  right: 29.16666667%;
+}
+.ant-col-offset-7 {
+  margin-left: 29.16666667%;
+}
+.ant-col-order-7 {
+  order: 7;
+}
+.ant-col-6 {
+  display: block;
+  box-sizing: border-box;
+  width: 25%;
+}
+.ant-col-push-6 {
+  left: 25%;
+}
+.ant-col-pull-6 {
+  right: 25%;
+}
+.ant-col-offset-6 {
+  margin-left: 25%;
+}
+.ant-col-order-6 {
+  order: 6;
+}
+.ant-col-5 {
+  display: block;
+  box-sizing: border-box;
+  width: 20.83333333%;
+}
+.ant-col-push-5 {
+  left: 20.83333333%;
+}
+.ant-col-pull-5 {
+  right: 20.83333333%;
+}
+.ant-col-offset-5 {
+  margin-left: 20.83333333%;
+}
+.ant-col-order-5 {
+  order: 5;
+}
+.ant-col-4 {
+  display: block;
+  box-sizing: border-box;
+  width: 16.66666667%;
+}
+.ant-col-push-4 {
+  left: 16.66666667%;
+}
+.ant-col-pull-4 {
+  right: 16.66666667%;
+}
+.ant-col-offset-4 {
+  margin-left: 16.66666667%;
+}
+.ant-col-order-4 {
+  order: 4;
+}
+.ant-col-3 {
+  display: block;
+  box-sizing: border-box;
+  width: 12.5%;
+}
+.ant-col-push-3 {
+  left: 12.5%;
+}
+.ant-col-pull-3 {
+  right: 12.5%;
+}
+.ant-col-offset-3 {
+  margin-left: 12.5%;
+}
+.ant-col-order-3 {
+  order: 3;
+}
+.ant-col-2 {
+  display: block;
+  box-sizing: border-box;
+  width: 8.33333333%;
+}
+.ant-col-push-2 {
+  left: 8.33333333%;
+}
+.ant-col-pull-2 {
+  right: 8.33333333%;
+}
+.ant-col-offset-2 {
+  margin-left: 8.33333333%;
+}
+.ant-col-order-2 {
+  order: 2;
+}
+.ant-col-1 {
+  display: block;
+  box-sizing: border-box;
+  width: 4.16666667%;
+}
+.ant-col-push-1 {
+  left: 4.16666667%;
+}
+.ant-col-pull-1 {
+  right: 4.16666667%;
+}
+.ant-col-offset-1 {
+  margin-left: 4.16666667%;
+}
+.ant-col-order-1 {
+  order: 1;
+}
+.ant-col-0 {
+  display: none;
+}
+.ant-col-push-0 {
+  left: auto;
+}
+.ant-col-pull-0 {
+  right: auto;
+}
+.ant-col-push-0 {
+  left: auto;
+}
+.ant-col-pull-0 {
+  right: auto;
+}
+.ant-col-offset-0 {
+  margin-left: 0;
+}
+.ant-col-order-0 {
+  order: 0;
+}
+.ant-col-xs-1, .ant-col-xs-2, .ant-col-xs-3, .ant-col-xs-4, .ant-col-xs-5, .ant-col-xs-6, .ant-col-xs-7, .ant-col-xs-8, .ant-col-xs-9, .ant-col-xs-10, .ant-col-xs-11, .ant-col-xs-12, .ant-col-xs-13, .ant-col-xs-14, .ant-col-xs-15, .ant-col-xs-16, .ant-col-xs-17, .ant-col-xs-18, .ant-col-xs-19, .ant-col-xs-20, .ant-col-xs-21, .ant-col-xs-22, .ant-col-xs-23, .ant-col-xs-24 {
+  float: left;
+  flex: 0 0 auto;
+}
+.ant-col-xs-24 {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.ant-col-xs-push-24 {
+  left: 100%;
+}
+.ant-col-xs-pull-24 {
+  right: 100%;
+}
+.ant-col-xs-offset-24 {
+  margin-left: 100%;
+}
+.ant-col-xs-order-24 {
+  order: 24;
+}
+.ant-col-xs-23 {
+  display: block;
+  box-sizing: border-box;
+  width: 95.83333333%;
+}
+.ant-col-xs-push-23 {
+  left: 95.83333333%;
+}
+.ant-col-xs-pull-23 {
+  right: 95.83333333%;
+}
+.ant-col-xs-offset-23 {
+  margin-left: 95.83333333%;
+}
+.ant-col-xs-order-23 {
+  order: 23;
+}
+.ant-col-xs-22 {
+  display: block;
+  box-sizing: border-box;
+  width: 91.66666667%;
+}
+.ant-col-xs-push-22 {
+  left: 91.66666667%;
+}
+.ant-col-xs-pull-22 {
+  right: 91.66666667%;
+}
+.ant-col-xs-offset-22 {
+  margin-left: 91.66666667%;
+}
+.ant-col-xs-order-22 {
+  order: 22;
+}
+.ant-col-xs-21 {
+  display: block;
+  box-sizing: border-box;
+  width: 87.5%;
+}
+.ant-col-xs-push-21 {
+  left: 87.5%;
+}
+.ant-col-xs-pull-21 {
+  right: 87.5%;
+}
+.ant-col-xs-offset-21 {
+  margin-left: 87.5%;
+}
+.ant-col-xs-order-21 {
+  order: 21;
+}
+.ant-col-xs-20 {
+  display: block;
+  box-sizing: border-box;
+  width: 83.33333333%;
+}
+.ant-col-xs-push-20 {
+  left: 83.33333333%;
+}
+.ant-col-xs-pull-20 {
+  right: 83.33333333%;
+}
+.ant-col-xs-offset-20 {
+  margin-left: 83.33333333%;
+}
+.ant-col-xs-order-20 {
+  order: 20;
+}
+.ant-col-xs-19 {
+  display: block;
+  box-sizing: border-box;
+  width: 79.16666667%;
+}
+.ant-col-xs-push-19 {
+  left: 79.16666667%;
+}
+.ant-col-xs-pull-19 {
+  right: 79.16666667%;
+}
+.ant-col-xs-offset-19 {
+  margin-left: 79.16666667%;
+}
+.ant-col-xs-order-19 {
+  order: 19;
+}
+.ant-col-xs-18 {
+  display: block;
+  box-sizing: border-box;
+  width: 75%;
+}
+.ant-col-xs-push-18 {
+  left: 75%;
+}
+.ant-col-xs-pull-18 {
+  right: 75%;
+}
+.ant-col-xs-offset-18 {
+  margin-left: 75%;
+}
+.ant-col-xs-order-18 {
+  order: 18;
+}
+.ant-col-xs-17 {
+  display: block;
+  box-sizing: border-box;
+  width: 70.83333333%;
+}
+.ant-col-xs-push-17 {
+  left: 70.83333333%;
+}
+.ant-col-xs-pull-17 {
+  right: 70.83333333%;
+}
+.ant-col-xs-offset-17 {
+  margin-left: 70.83333333%;
+}
+.ant-col-xs-order-17 {
+  order: 17;
+}
+.ant-col-xs-16 {
+  display: block;
+  box-sizing: border-box;
+  width: 66.66666667%;
+}
+.ant-col-xs-push-16 {
+  left: 66.66666667%;
+}
+.ant-col-xs-pull-16 {
+  right: 66.66666667%;
+}
+.ant-col-xs-offset-16 {
+  margin-left: 66.66666667%;
+}
+.ant-col-xs-order-16 {
+  order: 16;
+}
+.ant-col-xs-15 {
+  display: block;
+  box-sizing: border-box;
+  width: 62.5%;
+}
+.ant-col-xs-push-15 {
+  left: 62.5%;
+}
+.ant-col-xs-pull-15 {
+  right: 62.5%;
+}
+.ant-col-xs-offset-15 {
+  margin-left: 62.5%;
+}
+.ant-col-xs-order-15 {
+  order: 15;
+}
+.ant-col-xs-14 {
+  display: block;
+  box-sizing: border-box;
+  width: 58.33333333%;
+}
+.ant-col-xs-push-14 {
+  left: 58.33333333%;
+}
+.ant-col-xs-pull-14 {
+  right: 58.33333333%;
+}
+.ant-col-xs-offset-14 {
+  margin-left: 58.33333333%;
+}
+.ant-col-xs-order-14 {
+  order: 14;
+}
+.ant-col-xs-13 {
+  display: block;
+  box-sizing: border-box;
+  width: 54.16666667%;
+}
+.ant-col-xs-push-13 {
+  left: 54.16666667%;
+}
+.ant-col-xs-pull-13 {
+  right: 54.16666667%;
+}
+.ant-col-xs-offset-13 {
+  margin-left: 54.16666667%;
+}
+.ant-col-xs-order-13 {
+  order: 13;
+}
+.ant-col-xs-12 {
+  display: block;
+  box-sizing: border-box;
+  width: 50%;
+}
+.ant-col-xs-push-12 {
+  left: 50%;
+}
+.ant-col-xs-pull-12 {
+  right: 50%;
+}
+.ant-col-xs-offset-12 {
+  margin-left: 50%;
+}
+.ant-col-xs-order-12 {
+  order: 12;
+}
+.ant-col-xs-11 {
+  display: block;
+  box-sizing: border-box;
+  width: 45.83333333%;
+}
+.ant-col-xs-push-11 {
+  left: 45.83333333%;
+}
+.ant-col-xs-pull-11 {
+  right: 45.83333333%;
+}
+.ant-col-xs-offset-11 {
+  margin-left: 45.83333333%;
+}
+.ant-col-xs-order-11 {
+  order: 11;
+}
+.ant-col-xs-10 {
+  display: block;
+  box-sizing: border-box;
+  width: 41.66666667%;
+}
+.ant-col-xs-push-10 {
+  left: 41.66666667%;
+}
+.ant-col-xs-pull-10 {
+  right: 41.66666667%;
+}
+.ant-col-xs-offset-10 {
+  margin-left: 41.66666667%;
+}
+.ant-col-xs-order-10 {
+  order: 10;
+}
+.ant-col-xs-9 {
+  display: block;
+  box-sizing: border-box;
+  width: 37.5%;
+}
+.ant-col-xs-push-9 {
+  left: 37.5%;
+}
+.ant-col-xs-pull-9 {
+  right: 37.5%;
+}
+.ant-col-xs-offset-9 {
+  margin-left: 37.5%;
+}
+.ant-col-xs-order-9 {
+  order: 9;
+}
+.ant-col-xs-8 {
+  display: block;
+  box-sizing: border-box;
+  width: 33.33333333%;
+}
+.ant-col-xs-push-8 {
+  left: 33.33333333%;
+}
+.ant-col-xs-pull-8 {
+  right: 33.33333333%;
+}
+.ant-col-xs-offset-8 {
+  margin-left: 33.33333333%;
+}
+.ant-col-xs-order-8 {
+  order: 8;
+}
+.ant-col-xs-7 {
+  display: block;
+  box-sizing: border-box;
+  width: 29.16666667%;
+}
+.ant-col-xs-push-7 {
+  left: 29.16666667%;
+}
+.ant-col-xs-pull-7 {
+  right: 29.16666667%;
+}
+.ant-col-xs-offset-7 {
+  margin-left: 29.16666667%;
+}
+.ant-col-xs-order-7 {
+  order: 7;
+}
+.ant-col-xs-6 {
+  display: block;
+  box-sizing: border-box;
+  width: 25%;
+}
+.ant-col-xs-push-6 {
+  left: 25%;
+}
+.ant-col-xs-pull-6 {
+  right: 25%;
+}
+.ant-col-xs-offset-6 {
+  margin-left: 25%;
+}
+.ant-col-xs-order-6 {
+  order: 6;
+}
+.ant-col-xs-5 {
+  display: block;
+  box-sizing: border-box;
+  width: 20.83333333%;
+}
+.ant-col-xs-push-5 {
+  left: 20.83333333%;
+}
+.ant-col-xs-pull-5 {
+  right: 20.83333333%;
+}
+.ant-col-xs-offset-5 {
+  margin-left: 20.83333333%;
+}
+.ant-col-xs-order-5 {
+  order: 5;
+}
+.ant-col-xs-4 {
+  display: block;
+  box-sizing: border-box;
+  width: 16.66666667%;
+}
+.ant-col-xs-push-4 {
+  left: 16.66666667%;
+}
+.ant-col-xs-pull-4 {
+  right: 16.66666667%;
+}
+.ant-col-xs-offset-4 {
+  margin-left: 16.66666667%;
+}
+.ant-col-xs-order-4 {
+  order: 4;
+}
+.ant-col-xs-3 {
+  display: block;
+  box-sizing: border-box;
+  width: 12.5%;
+}
+.ant-col-xs-push-3 {
+  left: 12.5%;
+}
+.ant-col-xs-pull-3 {
+  right: 12.5%;
+}
+.ant-col-xs-offset-3 {
+  margin-left: 12.5%;
+}
+.ant-col-xs-order-3 {
+  order: 3;
+}
+.ant-col-xs-2 {
+  display: block;
+  box-sizing: border-box;
+  width: 8.33333333%;
+}
+.ant-col-xs-push-2 {
+  left: 8.33333333%;
+}
+.ant-col-xs-pull-2 {
+  right: 8.33333333%;
+}
+.ant-col-xs-offset-2 {
+  margin-left: 8.33333333%;
+}
+.ant-col-xs-order-2 {
+  order: 2;
+}
+.ant-col-xs-1 {
+  display: block;
+  box-sizing: border-box;
+  width: 4.16666667%;
+}
+.ant-col-xs-push-1 {
+  left: 4.16666667%;
+}
+.ant-col-xs-pull-1 {
+  right: 4.16666667%;
+}
+.ant-col-xs-offset-1 {
+  margin-left: 4.16666667%;
+}
+.ant-col-xs-order-1 {
+  order: 1;
+}
+.ant-col-xs-0 {
+  display: none;
+}
+.ant-col-push-0 {
+  left: auto;
+}
+.ant-col-pull-0 {
+  right: auto;
+}
+.ant-col-xs-push-0 {
+  left: auto;
+}
+.ant-col-xs-pull-0 {
+  right: auto;
+}
+.ant-col-xs-offset-0 {
+  margin-left: 0;
+}
+.ant-col-xs-order-0 {
+  order: 0;
+}
+@media (min-width: 576px) {
+  .ant-col-sm-1, .ant-col-sm-2, .ant-col-sm-3, .ant-col-sm-4, .ant-col-sm-5, .ant-col-sm-6, .ant-col-sm-7, .ant-col-sm-8, .ant-col-sm-9, .ant-col-sm-10, .ant-col-sm-11, .ant-col-sm-12, .ant-col-sm-13, .ant-col-sm-14, .ant-col-sm-15, .ant-col-sm-16, .ant-col-sm-17, .ant-col-sm-18, .ant-col-sm-19, .ant-col-sm-20, .ant-col-sm-21, .ant-col-sm-22, .ant-col-sm-23, .ant-col-sm-24 {
+    float: left;
+    flex: 0 0 auto;
+  }
+  .ant-col-sm-24 {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .ant-col-sm-push-24 {
+    left: 100%;
+  }
+  .ant-col-sm-pull-24 {
+    right: 100%;
+  }
+  .ant-col-sm-offset-24 {
+    margin-left: 100%;
+  }
+  .ant-col-sm-order-24 {
+    order: 24;
+  }
+  .ant-col-sm-23 {
+    display: block;
+    box-sizing: border-box;
+    width: 95.83333333%;
+  }
+  .ant-col-sm-push-23 {
+    left: 95.83333333%;
+  }
+  .ant-col-sm-pull-23 {
+    right: 95.83333333%;
+  }
+  .ant-col-sm-offset-23 {
+    margin-left: 95.83333333%;
+  }
+  .ant-col-sm-order-23 {
+    order: 23;
+  }
+  .ant-col-sm-22 {
+    display: block;
+    box-sizing: border-box;
+    width: 91.66666667%;
+  }
+  .ant-col-sm-push-22 {
+    left: 91.66666667%;
+  }
+  .ant-col-sm-pull-22 {
+    right: 91.66666667%;
+  }
+  .ant-col-sm-offset-22 {
+    margin-left: 91.66666667%;
+  }
+  .ant-col-sm-order-22 {
+    order: 22;
+  }
+  .ant-col-sm-21 {
+    display: block;
+    box-sizing: border-box;
+    width: 87.5%;
+  }
+  .ant-col-sm-push-21 {
+    left: 87.5%;
+  }
+  .ant-col-sm-pull-21 {
+    right: 87.5%;
+  }
+  .ant-col-sm-offset-21 {
+    margin-left: 87.5%;
+  }
+  .ant-col-sm-order-21 {
+    order: 21;
+  }
+  .ant-col-sm-20 {
+    display: block;
+    box-sizing: border-box;
+    width: 83.33333333%;
+  }
+  .ant-col-sm-push-20 {
+    left: 83.33333333%;
+  }
+  .ant-col-sm-pull-20 {
+    right: 83.33333333%;
+  }
+  .ant-col-sm-offset-20 {
+    margin-left: 83.33333333%;
+  }
+  .ant-col-sm-order-20 {
+    order: 20;
+  }
+  .ant-col-sm-19 {
+    display: block;
+    box-sizing: border-box;
+    width: 79.16666667%;
+  }
+  .ant-col-sm-push-19 {
+    left: 79.16666667%;
+  }
+  .ant-col-sm-pull-19 {
+    right: 79.16666667%;
+  }
+  .ant-col-sm-offset-19 {
+    margin-left: 79.16666667%;
+  }
+  .ant-col-sm-order-19 {
+    order: 19;
+  }
+  .ant-col-sm-18 {
+    display: block;
+    box-sizing: border-box;
+    width: 75%;
+  }
+  .ant-col-sm-push-18 {
+    left: 75%;
+  }
+  .ant-col-sm-pull-18 {
+    right: 75%;
+  }
+  .ant-col-sm-offset-18 {
+    margin-left: 75%;
+  }
+  .ant-col-sm-order-18 {
+    order: 18;
+  }
+  .ant-col-sm-17 {
+    display: block;
+    box-sizing: border-box;
+    width: 70.83333333%;
+  }
+  .ant-col-sm-push-17 {
+    left: 70.83333333%;
+  }
+  .ant-col-sm-pull-17 {
+    right: 70.83333333%;
+  }
+  .ant-col-sm-offset-17 {
+    margin-left: 70.83333333%;
+  }
+  .ant-col-sm-order-17 {
+    order: 17;
+  }
+  .ant-col-sm-16 {
+    display: block;
+    box-sizing: border-box;
+    width: 66.66666667%;
+  }
+  .ant-col-sm-push-16 {
+    left: 66.66666667%;
+  }
+  .ant-col-sm-pull-16 {
+    right: 66.66666667%;
+  }
+  .ant-col-sm-offset-16 {
+    margin-left: 66.66666667%;
+  }
+  .ant-col-sm-order-16 {
+    order: 16;
+  }
+  .ant-col-sm-15 {
+    display: block;
+    box-sizing: border-box;
+    width: 62.5%;
+  }
+  .ant-col-sm-push-15 {
+    left: 62.5%;
+  }
+  .ant-col-sm-pull-15 {
+    right: 62.5%;
+  }
+  .ant-col-sm-offset-15 {
+    margin-left: 62.5%;
+  }
+  .ant-col-sm-order-15 {
+    order: 15;
+  }
+  .ant-col-sm-14 {
+    display: block;
+    box-sizing: border-box;
+    width: 58.33333333%;
+  }
+  .ant-col-sm-push-14 {
+    left: 58.33333333%;
+  }
+  .ant-col-sm-pull-14 {
+    right: 58.33333333%;
+  }
+  .ant-col-sm-offset-14 {
+    margin-left: 58.33333333%;
+  }
+  .ant-col-sm-order-14 {
+    order: 14;
+  }
+  .ant-col-sm-13 {
+    display: block;
+    box-sizing: border-box;
+    width: 54.16666667%;
+  }
+  .ant-col-sm-push-13 {
+    left: 54.16666667%;
+  }
+  .ant-col-sm-pull-13 {
+    right: 54.16666667%;
+  }
+  .ant-col-sm-offset-13 {
+    margin-left: 54.16666667%;
+  }
+  .ant-col-sm-order-13 {
+    order: 13;
+  }
+  .ant-col-sm-12 {
+    display: block;
+    box-sizing: border-box;
+    width: 50%;
+  }
+  .ant-col-sm-push-12 {
+    left: 50%;
+  }
+  .ant-col-sm-pull-12 {
+    right: 50%;
+  }
+  .ant-col-sm-offset-12 {
+    margin-left: 50%;
+  }
+  .ant-col-sm-order-12 {
+    order: 12;
+  }
+  .ant-col-sm-11 {
+    display: block;
+    box-sizing: border-box;
+    width: 45.83333333%;
+  }
+  .ant-col-sm-push-11 {
+    left: 45.83333333%;
+  }
+  .ant-col-sm-pull-11 {
+    right: 45.83333333%;
+  }
+  .ant-col-sm-offset-11 {
+    margin-left: 45.83333333%;
+  }
+  .ant-col-sm-order-11 {
+    order: 11;
+  }
+  .ant-col-sm-10 {
+    display: block;
+    box-sizing: border-box;
+    width: 41.66666667%;
+  }
+  .ant-col-sm-push-10 {
+    left: 41.66666667%;
+  }
+  .ant-col-sm-pull-10 {
+    right: 41.66666667%;
+  }
+  .ant-col-sm-offset-10 {
+    margin-left: 41.66666667%;
+  }
+  .ant-col-sm-order-10 {
+    order: 10;
+  }
+  .ant-col-sm-9 {
+    display: block;
+    box-sizing: border-box;
+    width: 37.5%;
+  }
+  .ant-col-sm-push-9 {
+    left: 37.5%;
+  }
+  .ant-col-sm-pull-9 {
+    right: 37.5%;
+  }
+  .ant-col-sm-offset-9 {
+    margin-left: 37.5%;
+  }
+  .ant-col-sm-order-9 {
+    order: 9;
+  }
+  .ant-col-sm-8 {
+    display: block;
+    box-sizing: border-box;
+    width: 33.33333333%;
+  }
+  .ant-col-sm-push-8 {
+    left: 33.33333333%;
+  }
+  .ant-col-sm-pull-8 {
+    right: 33.33333333%;
+  }
+  .ant-col-sm-offset-8 {
+    margin-left: 33.33333333%;
+  }
+  .ant-col-sm-order-8 {
+    order: 8;
+  }
+  .ant-col-sm-7 {
+    display: block;
+    box-sizing: border-box;
+    width: 29.16666667%;
+  }
+  .ant-col-sm-push-7 {
+    left: 29.16666667%;
+  }
+  .ant-col-sm-pull-7 {
+    right: 29.16666667%;
+  }
+  .ant-col-sm-offset-7 {
+    margin-left: 29.16666667%;
+  }
+  .ant-col-sm-order-7 {
+    order: 7;
+  }
+  .ant-col-sm-6 {
+    display: block;
+    box-sizing: border-box;
+    width: 25%;
+  }
+  .ant-col-sm-push-6 {
+    left: 25%;
+  }
+  .ant-col-sm-pull-6 {
+    right: 25%;
+  }
+  .ant-col-sm-offset-6 {
+    margin-left: 25%;
+  }
+  .ant-col-sm-order-6 {
+    order: 6;
+  }
+  .ant-col-sm-5 {
+    display: block;
+    box-sizing: border-box;
+    width: 20.83333333%;
+  }
+  .ant-col-sm-push-5 {
+    left: 20.83333333%;
+  }
+  .ant-col-sm-pull-5 {
+    right: 20.83333333%;
+  }
+  .ant-col-sm-offset-5 {
+    margin-left: 20.83333333%;
+  }
+  .ant-col-sm-order-5 {
+    order: 5;
+  }
+  .ant-col-sm-4 {
+    display: block;
+    box-sizing: border-box;
+    width: 16.66666667%;
+  }
+  .ant-col-sm-push-4 {
+    left: 16.66666667%;
+  }
+  .ant-col-sm-pull-4 {
+    right: 16.66666667%;
+  }
+  .ant-col-sm-offset-4 {
+    margin-left: 16.66666667%;
+  }
+  .ant-col-sm-order-4 {
+    order: 4;
+  }
+  .ant-col-sm-3 {
+    display: block;
+    box-sizing: border-box;
+    width: 12.5%;
+  }
+  .ant-col-sm-push-3 {
+    left: 12.5%;
+  }
+  .ant-col-sm-pull-3 {
+    right: 12.5%;
+  }
+  .ant-col-sm-offset-3 {
+    margin-left: 12.5%;
+  }
+  .ant-col-sm-order-3 {
+    order: 3;
+  }
+  .ant-col-sm-2 {
+    display: block;
+    box-sizing: border-box;
+    width: 8.33333333%;
+  }
+  .ant-col-sm-push-2 {
+    left: 8.33333333%;
+  }
+  .ant-col-sm-pull-2 {
+    right: 8.33333333%;
+  }
+  .ant-col-sm-offset-2 {
+    margin-left: 8.33333333%;
+  }
+  .ant-col-sm-order-2 {
+    order: 2;
+  }
+  .ant-col-sm-1 {
+    display: block;
+    box-sizing: border-box;
+    width: 4.16666667%;
+  }
+  .ant-col-sm-push-1 {
+    left: 4.16666667%;
+  }
+  .ant-col-sm-pull-1 {
+    right: 4.16666667%;
+  }
+  .ant-col-sm-offset-1 {
+    margin-left: 4.16666667%;
+  }
+  .ant-col-sm-order-1 {
+    order: 1;
+  }
+  .ant-col-sm-0 {
+    display: none;
+  }
+  .ant-col-push-0 {
+    left: auto;
+  }
+  .ant-col-pull-0 {
+    right: auto;
+  }
+  .ant-col-sm-push-0 {
+    left: auto;
+  }
+  .ant-col-sm-pull-0 {
+    right: auto;
+  }
+  .ant-col-sm-offset-0 {
+    margin-left: 0;
+  }
+  .ant-col-sm-order-0 {
+    order: 0;
+  }
+}
+@media (min-width: 768px) {
+  .ant-col-md-1, .ant-col-md-2, .ant-col-md-3, .ant-col-md-4, .ant-col-md-5, .ant-col-md-6, .ant-col-md-7, .ant-col-md-8, .ant-col-md-9, .ant-col-md-10, .ant-col-md-11, .ant-col-md-12, .ant-col-md-13, .ant-col-md-14, .ant-col-md-15, .ant-col-md-16, .ant-col-md-17, .ant-col-md-18, .ant-col-md-19, .ant-col-md-20, .ant-col-md-21, .ant-col-md-22, .ant-col-md-23, .ant-col-md-24 {
+    float: left;
+    flex: 0 0 auto;
+  }
+  .ant-col-md-24 {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .ant-col-md-push-24 {
+    left: 100%;
+  }
+  .ant-col-md-pull-24 {
+    right: 100%;
+  }
+  .ant-col-md-offset-24 {
+    margin-left: 100%;
+  }
+  .ant-col-md-order-24 {
+    order: 24;
+  }
+  .ant-col-md-23 {
+    display: block;
+    box-sizing: border-box;
+    width: 95.83333333%;
+  }
+  .ant-col-md-push-23 {
+    left: 95.83333333%;
+  }
+  .ant-col-md-pull-23 {
+    right: 95.83333333%;
+  }
+  .ant-col-md-offset-23 {
+    margin-left: 95.83333333%;
+  }
+  .ant-col-md-order-23 {
+    order: 23;
+  }
+  .ant-col-md-22 {
+    display: block;
+    box-sizing: border-box;
+    width: 91.66666667%;
+  }
+  .ant-col-md-push-22 {
+    left: 91.66666667%;
+  }
+  .ant-col-md-pull-22 {
+    right: 91.66666667%;
+  }
+  .ant-col-md-offset-22 {
+    margin-left: 91.66666667%;
+  }
+  .ant-col-md-order-22 {
+    order: 22;
+  }
+  .ant-col-md-21 {
+    display: block;
+    box-sizing: border-box;
+    width: 87.5%;
+  }
+  .ant-col-md-push-21 {
+    left: 87.5%;
+  }
+  .ant-col-md-pull-21 {
+    right: 87.5%;
+  }
+  .ant-col-md-offset-21 {
+    margin-left: 87.5%;
+  }
+  .ant-col-md-order-21 {
+    order: 21;
+  }
+  .ant-col-md-20 {
+    display: block;
+    box-sizing: border-box;
+    width: 83.33333333%;
+  }
+  .ant-col-md-push-20 {
+    left: 83.33333333%;
+  }
+  .ant-col-md-pull-20 {
+    right: 83.33333333%;
+  }
+  .ant-col-md-offset-20 {
+    margin-left: 83.33333333%;
+  }
+  .ant-col-md-order-20 {
+    order: 20;
+  }
+  .ant-col-md-19 {
+    display: block;
+    box-sizing: border-box;
+    width: 79.16666667%;
+  }
+  .ant-col-md-push-19 {
+    left: 79.16666667%;
+  }
+  .ant-col-md-pull-19 {
+    right: 79.16666667%;
+  }
+  .ant-col-md-offset-19 {
+    margin-left: 79.16666667%;
+  }
+  .ant-col-md-order-19 {
+    order: 19;
+  }
+  .ant-col-md-18 {
+    display: block;
+    box-sizing: border-box;
+    width: 75%;
+  }
+  .ant-col-md-push-18 {
+    left: 75%;
+  }
+  .ant-col-md-pull-18 {
+    right: 75%;
+  }
+  .ant-col-md-offset-18 {
+    margin-left: 75%;
+  }
+  .ant-col-md-order-18 {
+    order: 18;
+  }
+  .ant-col-md-17 {
+    display: block;
+    box-sizing: border-box;
+    width: 70.83333333%;
+  }
+  .ant-col-md-push-17 {
+    left: 70.83333333%;
+  }
+  .ant-col-md-pull-17 {
+    right: 70.83333333%;
+  }
+  .ant-col-md-offset-17 {
+    margin-left: 70.83333333%;
+  }
+  .ant-col-md-order-17 {
+    order: 17;
+  }
+  .ant-col-md-16 {
+    display: block;
+    box-sizing: border-box;
+    width: 66.66666667%;
+  }
+  .ant-col-md-push-16 {
+    left: 66.66666667%;
+  }
+  .ant-col-md-pull-16 {
+    right: 66.66666667%;
+  }
+  .ant-col-md-offset-16 {
+    margin-left: 66.66666667%;
+  }
+  .ant-col-md-order-16 {
+    order: 16;
+  }
+  .ant-col-md-15 {
+    display: block;
+    box-sizing: border-box;
+    width: 62.5%;
+  }
+  .ant-col-md-push-15 {
+    left: 62.5%;
+  }
+  .ant-col-md-pull-15 {
+    right: 62.5%;
+  }
+  .ant-col-md-offset-15 {
+    margin-left: 62.5%;
+  }
+  .ant-col-md-order-15 {
+    order: 15;
+  }
+  .ant-col-md-14 {
+    display: block;
+    box-sizing: border-box;
+    width: 58.33333333%;
+  }
+  .ant-col-md-push-14 {
+    left: 58.33333333%;
+  }
+  .ant-col-md-pull-14 {
+    right: 58.33333333%;
+  }
+  .ant-col-md-offset-14 {
+    margin-left: 58.33333333%;
+  }
+  .ant-col-md-order-14 {
+    order: 14;
+  }
+  .ant-col-md-13 {
+    display: block;
+    box-sizing: border-box;
+    width: 54.16666667%;
+  }
+  .ant-col-md-push-13 {
+    left: 54.16666667%;
+  }
+  .ant-col-md-pull-13 {
+    right: 54.16666667%;
+  }
+  .ant-col-md-offset-13 {
+    margin-left: 54.16666667%;
+  }
+  .ant-col-md-order-13 {
+    order: 13;
+  }
+  .ant-col-md-12 {
+    display: block;
+    box-sizing: border-box;
+    width: 50%;
+  }
+  .ant-col-md-push-12 {
+    left: 50%;
+  }
+  .ant-col-md-pull-12 {
+    right: 50%;
+  }
+  .ant-col-md-offset-12 {
+    margin-left: 50%;
+  }
+  .ant-col-md-order-12 {
+    order: 12;
+  }
+  .ant-col-md-11 {
+    display: block;
+    box-sizing: border-box;
+    width: 45.83333333%;
+  }
+  .ant-col-md-push-11 {
+    left: 45.83333333%;
+  }
+  .ant-col-md-pull-11 {
+    right: 45.83333333%;
+  }
+  .ant-col-md-offset-11 {
+    margin-left: 45.83333333%;
+  }
+  .ant-col-md-order-11 {
+    order: 11;
+  }
+  .ant-col-md-10 {
+    display: block;
+    box-sizing: border-box;
+    width: 41.66666667%;
+  }
+  .ant-col-md-push-10 {
+    left: 41.66666667%;
+  }
+  .ant-col-md-pull-10 {
+    right: 41.66666667%;
+  }
+  .ant-col-md-offset-10 {
+    margin-left: 41.66666667%;
+  }
+  .ant-col-md-order-10 {
+    order: 10;
+  }
+  .ant-col-md-9 {
+    display: block;
+    box-sizing: border-box;
+    width: 37.5%;
+  }
+  .ant-col-md-push-9 {
+    left: 37.5%;
+  }
+  .ant-col-md-pull-9 {
+    right: 37.5%;
+  }
+  .ant-col-md-offset-9 {
+    margin-left: 37.5%;
+  }
+  .ant-col-md-order-9 {
+    order: 9;
+  }
+  .ant-col-md-8 {
+    display: block;
+    box-sizing: border-box;
+    width: 33.33333333%;
+  }
+  .ant-col-md-push-8 {
+    left: 33.33333333%;
+  }
+  .ant-col-md-pull-8 {
+    right: 33.33333333%;
+  }
+  .ant-col-md-offset-8 {
+    margin-left: 33.33333333%;
+  }
+  .ant-col-md-order-8 {
+    order: 8;
+  }
+  .ant-col-md-7 {
+    display: block;
+    box-sizing: border-box;
+    width: 29.16666667%;
+  }
+  .ant-col-md-push-7 {
+    left: 29.16666667%;
+  }
+  .ant-col-md-pull-7 {
+    right: 29.16666667%;
+  }
+  .ant-col-md-offset-7 {
+    margin-left: 29.16666667%;
+  }
+  .ant-col-md-order-7 {
+    order: 7;
+  }
+  .ant-col-md-6 {
+    display: block;
+    box-sizing: border-box;
+    width: 25%;
+  }
+  .ant-col-md-push-6 {
+    left: 25%;
+  }
+  .ant-col-md-pull-6 {
+    right: 25%;
+  }
+  .ant-col-md-offset-6 {
+    margin-left: 25%;
+  }
+  .ant-col-md-order-6 {
+    order: 6;
+  }
+  .ant-col-md-5 {
+    display: block;
+    box-sizing: border-box;
+    width: 20.83333333%;
+  }
+  .ant-col-md-push-5 {
+    left: 20.83333333%;
+  }
+  .ant-col-md-pull-5 {
+    right: 20.83333333%;
+  }
+  .ant-col-md-offset-5 {
+    margin-left: 20.83333333%;
+  }
+  .ant-col-md-order-5 {
+    order: 5;
+  }
+  .ant-col-md-4 {
+    display: block;
+    box-sizing: border-box;
+    width: 16.66666667%;
+  }
+  .ant-col-md-push-4 {
+    left: 16.66666667%;
+  }
+  .ant-col-md-pull-4 {
+    right: 16.66666667%;
+  }
+  .ant-col-md-offset-4 {
+    margin-left: 16.66666667%;
+  }
+  .ant-col-md-order-4 {
+    order: 4;
+  }
+  .ant-col-md-3 {
+    display: block;
+    box-sizing: border-box;
+    width: 12.5%;
+  }
+  .ant-col-md-push-3 {
+    left: 12.5%;
+  }
+  .ant-col-md-pull-3 {
+    right: 12.5%;
+  }
+  .ant-col-md-offset-3 {
+    margin-left: 12.5%;
+  }
+  .ant-col-md-order-3 {
+    order: 3;
+  }
+  .ant-col-md-2 {
+    display: block;
+    box-sizing: border-box;
+    width: 8.33333333%;
+  }
+  .ant-col-md-push-2 {
+    left: 8.33333333%;
+  }
+  .ant-col-md-pull-2 {
+    right: 8.33333333%;
+  }
+  .ant-col-md-offset-2 {
+    margin-left: 8.33333333%;
+  }
+  .ant-col-md-order-2 {
+    order: 2;
+  }
+  .ant-col-md-1 {
+    display: block;
+    box-sizing: border-box;
+    width: 4.16666667%;
+  }
+  .ant-col-md-push-1 {
+    left: 4.16666667%;
+  }
+  .ant-col-md-pull-1 {
+    right: 4.16666667%;
+  }
+  .ant-col-md-offset-1 {
+    margin-left: 4.16666667%;
+  }
+  .ant-col-md-order-1 {
+    order: 1;
+  }
+  .ant-col-md-0 {
+    display: none;
+  }
+  .ant-col-push-0 {
+    left: auto;
+  }
+  .ant-col-pull-0 {
+    right: auto;
+  }
+  .ant-col-md-push-0 {
+    left: auto;
+  }
+  .ant-col-md-pull-0 {
+    right: auto;
+  }
+  .ant-col-md-offset-0 {
+    margin-left: 0;
+  }
+  .ant-col-md-order-0 {
+    order: 0;
+  }
+}
+@media (min-width: 992px) {
+  .ant-col-lg-1, .ant-col-lg-2, .ant-col-lg-3, .ant-col-lg-4, .ant-col-lg-5, .ant-col-lg-6, .ant-col-lg-7, .ant-col-lg-8, .ant-col-lg-9, .ant-col-lg-10, .ant-col-lg-11, .ant-col-lg-12, .ant-col-lg-13, .ant-col-lg-14, .ant-col-lg-15, .ant-col-lg-16, .ant-col-lg-17, .ant-col-lg-18, .ant-col-lg-19, .ant-col-lg-20, .ant-col-lg-21, .ant-col-lg-22, .ant-col-lg-23, .ant-col-lg-24 {
+    float: left;
+    flex: 0 0 auto;
+  }
+  .ant-col-lg-24 {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .ant-col-lg-push-24 {
+    left: 100%;
+  }
+  .ant-col-lg-pull-24 {
+    right: 100%;
+  }
+  .ant-col-lg-offset-24 {
+    margin-left: 100%;
+  }
+  .ant-col-lg-order-24 {
+    order: 24;
+  }
+  .ant-col-lg-23 {
+    display: block;
+    box-sizing: border-box;
+    width: 95.83333333%;
+  }
+  .ant-col-lg-push-23 {
+    left: 95.83333333%;
+  }
+  .ant-col-lg-pull-23 {
+    right: 95.83333333%;
+  }
+  .ant-col-lg-offset-23 {
+    margin-left: 95.83333333%;
+  }
+  .ant-col-lg-order-23 {
+    order: 23;
+  }
+  .ant-col-lg-22 {
+    display: block;
+    box-sizing: border-box;
+    width: 91.66666667%;
+  }
+  .ant-col-lg-push-22 {
+    left: 91.66666667%;
+  }
+  .ant-col-lg-pull-22 {
+    right: 91.66666667%;
+  }
+  .ant-col-lg-offset-22 {
+    margin-left: 91.66666667%;
+  }
+  .ant-col-lg-order-22 {
+    order: 22;
+  }
+  .ant-col-lg-21 {
+    display: block;
+    box-sizing: border-box;
+    width: 87.5%;
+  }
+  .ant-col-lg-push-21 {
+    left: 87.5%;
+  }
+  .ant-col-lg-pull-21 {
+    right: 87.5%;
+  }
+  .ant-col-lg-offset-21 {
+    margin-left: 87.5%;
+  }
+  .ant-col-lg-order-21 {
+    order: 21;
+  }
+  .ant-col-lg-20 {
+    display: block;
+    box-sizing: border-box;
+    width: 83.33333333%;
+  }
+  .ant-col-lg-push-20 {
+    left: 83.33333333%;
+  }
+  .ant-col-lg-pull-20 {
+    right: 83.33333333%;
+  }
+  .ant-col-lg-offset-20 {
+    margin-left: 83.33333333%;
+  }
+  .ant-col-lg-order-20 {
+    order: 20;
+  }
+  .ant-col-lg-19 {
+    display: block;
+    box-sizing: border-box;
+    width: 79.16666667%;
+  }
+  .ant-col-lg-push-19 {
+    left: 79.16666667%;
+  }
+  .ant-col-lg-pull-19 {
+    right: 79.16666667%;
+  }
+  .ant-col-lg-offset-19 {
+    margin-left: 79.16666667%;
+  }
+  .ant-col-lg-order-19 {
+    order: 19;
+  }
+  .ant-col-lg-18 {
+    display: block;
+    box-sizing: border-box;
+    width: 75%;
+  }
+  .ant-col-lg-push-18 {
+    left: 75%;
+  }
+  .ant-col-lg-pull-18 {
+    right: 75%;
+  }
+  .ant-col-lg-offset-18 {
+    margin-left: 75%;
+  }
+  .ant-col-lg-order-18 {
+    order: 18;
+  }
+  .ant-col-lg-17 {
+    display: block;
+    box-sizing: border-box;
+    width: 70.83333333%;
+  }
+  .ant-col-lg-push-17 {
+    left: 70.83333333%;
+  }
+  .ant-col-lg-pull-17 {
+    right: 70.83333333%;
+  }
+  .ant-col-lg-offset-17 {
+    margin-left: 70.83333333%;
+  }
+  .ant-col-lg-order-17 {
+    order: 17;
+  }
+  .ant-col-lg-16 {
+    display: block;
+    box-sizing: border-box;
+    width: 66.66666667%;
+  }
+  .ant-col-lg-push-16 {
+    left: 66.66666667%;
+  }
+  .ant-col-lg-pull-16 {
+    right: 66.66666667%;
+  }
+  .ant-col-lg-offset-16 {
+    margin-left: 66.66666667%;
+  }
+  .ant-col-lg-order-16 {
+    order: 16;
+  }
+  .ant-col-lg-15 {
+    display: block;
+    box-sizing: border-box;
+    width: 62.5%;
+  }
+  .ant-col-lg-push-15 {
+    left: 62.5%;
+  }
+  .ant-col-lg-pull-15 {
+    right: 62.5%;
+  }
+  .ant-col-lg-offset-15 {
+    margin-left: 62.5%;
+  }
+  .ant-col-lg-order-15 {
+    order: 15;
+  }
+  .ant-col-lg-14 {
+    display: block;
+    box-sizing: border-box;
+    width: 58.33333333%;
+  }
+  .ant-col-lg-push-14 {
+    left: 58.33333333%;
+  }
+  .ant-col-lg-pull-14 {
+    right: 58.33333333%;
+  }
+  .ant-col-lg-offset-14 {
+    margin-left: 58.33333333%;
+  }
+  .ant-col-lg-order-14 {
+    order: 14;
+  }
+  .ant-col-lg-13 {
+    display: block;
+    box-sizing: border-box;
+    width: 54.16666667%;
+  }
+  .ant-col-lg-push-13 {
+    left: 54.16666667%;
+  }
+  .ant-col-lg-pull-13 {
+    right: 54.16666667%;
+  }
+  .ant-col-lg-offset-13 {
+    margin-left: 54.16666667%;
+  }
+  .ant-col-lg-order-13 {
+    order: 13;
+  }
+  .ant-col-lg-12 {
+    display: block;
+    box-sizing: border-box;
+    width: 50%;
+  }
+  .ant-col-lg-push-12 {
+    left: 50%;
+  }
+  .ant-col-lg-pull-12 {
+    right: 50%;
+  }
+  .ant-col-lg-offset-12 {
+    margin-left: 50%;
+  }
+  .ant-col-lg-order-12 {
+    order: 12;
+  }
+  .ant-col-lg-11 {
+    display: block;
+    box-sizing: border-box;
+    width: 45.83333333%;
+  }
+  .ant-col-lg-push-11 {
+    left: 45.83333333%;
+  }
+  .ant-col-lg-pull-11 {
+    right: 45.83333333%;
+  }
+  .ant-col-lg-offset-11 {
+    margin-left: 45.83333333%;
+  }
+  .ant-col-lg-order-11 {
+    order: 11;
+  }
+  .ant-col-lg-10 {
+    display: block;
+    box-sizing: border-box;
+    width: 41.66666667%;
+  }
+  .ant-col-lg-push-10 {
+    left: 41.66666667%;
+  }
+  .ant-col-lg-pull-10 {
+    right: 41.66666667%;
+  }
+  .ant-col-lg-offset-10 {
+    margin-left: 41.66666667%;
+  }
+  .ant-col-lg-order-10 {
+    order: 10;
+  }
+  .ant-col-lg-9 {
+    display: block;
+    box-sizing: border-box;
+    width: 37.5%;
+  }
+  .ant-col-lg-push-9 {
+    left: 37.5%;
+  }
+  .ant-col-lg-pull-9 {
+    right: 37.5%;
+  }
+  .ant-col-lg-offset-9 {
+    margin-left: 37.5%;
+  }
+  .ant-col-lg-order-9 {
+    order: 9;
+  }
+  .ant-col-lg-8 {
+    display: block;
+    box-sizing: border-box;
+    width: 33.33333333%;
+  }
+  .ant-col-lg-push-8 {
+    left: 33.33333333%;
+  }
+  .ant-col-lg-pull-8 {
+    right: 33.33333333%;
+  }
+  .ant-col-lg-offset-8 {
+    margin-left: 33.33333333%;
+  }
+  .ant-col-lg-order-8 {
+    order: 8;
+  }
+  .ant-col-lg-7 {
+    display: block;
+    box-sizing: border-box;
+    width: 29.16666667%;
+  }
+  .ant-col-lg-push-7 {
+    left: 29.16666667%;
+  }
+  .ant-col-lg-pull-7 {
+    right: 29.16666667%;
+  }
+  .ant-col-lg-offset-7 {
+    margin-left: 29.16666667%;
+  }
+  .ant-col-lg-order-7 {
+    order: 7;
+  }
+  .ant-col-lg-6 {
+    display: block;
+    box-sizing: border-box;
+    width: 25%;
+  }
+  .ant-col-lg-push-6 {
+    left: 25%;
+  }
+  .ant-col-lg-pull-6 {
+    right: 25%;
+  }
+  .ant-col-lg-offset-6 {
+    margin-left: 25%;
+  }
+  .ant-col-lg-order-6 {
+    order: 6;
+  }
+  .ant-col-lg-5 {
+    display: block;
+    box-sizing: border-box;
+    width: 20.83333333%;
+  }
+  .ant-col-lg-push-5 {
+    left: 20.83333333%;
+  }
+  .ant-col-lg-pull-5 {
+    right: 20.83333333%;
+  }
+  .ant-col-lg-offset-5 {
+    margin-left: 20.83333333%;
+  }
+  .ant-col-lg-order-5 {
+    order: 5;
+  }
+  .ant-col-lg-4 {
+    display: block;
+    box-sizing: border-box;
+    width: 16.66666667%;
+  }
+  .ant-col-lg-push-4 {
+    left: 16.66666667%;
+  }
+  .ant-col-lg-pull-4 {
+    right: 16.66666667%;
+  }
+  .ant-col-lg-offset-4 {
+    margin-left: 16.66666667%;
+  }
+  .ant-col-lg-order-4 {
+    order: 4;
+  }
+  .ant-col-lg-3 {
+    display: block;
+    box-sizing: border-box;
+    width: 12.5%;
+  }
+  .ant-col-lg-push-3 {
+    left: 12.5%;
+  }
+  .ant-col-lg-pull-3 {
+    right: 12.5%;
+  }
+  .ant-col-lg-offset-3 {
+    margin-left: 12.5%;
+  }
+  .ant-col-lg-order-3 {
+    order: 3;
+  }
+  .ant-col-lg-2 {
+    display: block;
+    box-sizing: border-box;
+    width: 8.33333333%;
+  }
+  .ant-col-lg-push-2 {
+    left: 8.33333333%;
+  }
+  .ant-col-lg-pull-2 {
+    right: 8.33333333%;
+  }
+  .ant-col-lg-offset-2 {
+    margin-left: 8.33333333%;
+  }
+  .ant-col-lg-order-2 {
+    order: 2;
+  }
+  .ant-col-lg-1 {
+    display: block;
+    box-sizing: border-box;
+    width: 4.16666667%;
+  }
+  .ant-col-lg-push-1 {
+    left: 4.16666667%;
+  }
+  .ant-col-lg-pull-1 {
+    right: 4.16666667%;
+  }
+  .ant-col-lg-offset-1 {
+    margin-left: 4.16666667%;
+  }
+  .ant-col-lg-order-1 {
+    order: 1;
+  }
+  .ant-col-lg-0 {
+    display: none;
+  }
+  .ant-col-push-0 {
+    left: auto;
+  }
+  .ant-col-pull-0 {
+    right: auto;
+  }
+  .ant-col-lg-push-0 {
+    left: auto;
+  }
+  .ant-col-lg-pull-0 {
+    right: auto;
+  }
+  .ant-col-lg-offset-0 {
+    margin-left: 0;
+  }
+  .ant-col-lg-order-0 {
+    order: 0;
+  }
+}
+@media (min-width: 1200px) {
+  .ant-col-xl-1, .ant-col-xl-2, .ant-col-xl-3, .ant-col-xl-4, .ant-col-xl-5, .ant-col-xl-6, .ant-col-xl-7, .ant-col-xl-8, .ant-col-xl-9, .ant-col-xl-10, .ant-col-xl-11, .ant-col-xl-12, .ant-col-xl-13, .ant-col-xl-14, .ant-col-xl-15, .ant-col-xl-16, .ant-col-xl-17, .ant-col-xl-18, .ant-col-xl-19, .ant-col-xl-20, .ant-col-xl-21, .ant-col-xl-22, .ant-col-xl-23, .ant-col-xl-24 {
+    float: left;
+    flex: 0 0 auto;
+  }
+  .ant-col-xl-24 {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .ant-col-xl-push-24 {
+    left: 100%;
+  }
+  .ant-col-xl-pull-24 {
+    right: 100%;
+  }
+  .ant-col-xl-offset-24 {
+    margin-left: 100%;
+  }
+  .ant-col-xl-order-24 {
+    order: 24;
+  }
+  .ant-col-xl-23 {
+    display: block;
+    box-sizing: border-box;
+    width: 95.83333333%;
+  }
+  .ant-col-xl-push-23 {
+    left: 95.83333333%;
+  }
+  .ant-col-xl-pull-23 {
+    right: 95.83333333%;
+  }
+  .ant-col-xl-offset-23 {
+    margin-left: 95.83333333%;
+  }
+  .ant-col-xl-order-23 {
+    order: 23;
+  }
+  .ant-col-xl-22 {
+    display: block;
+    box-sizing: border-box;
+    width: 91.66666667%;
+  }
+  .ant-col-xl-push-22 {
+    left: 91.66666667%;
+  }
+  .ant-col-xl-pull-22 {
+    right: 91.66666667%;
+  }
+  .ant-col-xl-offset-22 {
+    margin-left: 91.66666667%;
+  }
+  .ant-col-xl-order-22 {
+    order: 22;
+  }
+  .ant-col-xl-21 {
+    display: block;
+    box-sizing: border-box;
+    width: 87.5%;
+  }
+  .ant-col-xl-push-21 {
+    left: 87.5%;
+  }
+  .ant-col-xl-pull-21 {
+    right: 87.5%;
+  }
+  .ant-col-xl-offset-21 {
+    margin-left: 87.5%;
+  }
+  .ant-col-xl-order-21 {
+    order: 21;
+  }
+  .ant-col-xl-20 {
+    display: block;
+    box-sizing: border-box;
+    width: 83.33333333%;
+  }
+  .ant-col-xl-push-20 {
+    left: 83.33333333%;
+  }
+  .ant-col-xl-pull-20 {
+    right: 83.33333333%;
+  }
+  .ant-col-xl-offset-20 {
+    margin-left: 83.33333333%;
+  }
+  .ant-col-xl-order-20 {
+    order: 20;
+  }
+  .ant-col-xl-19 {
+    display: block;
+    box-sizing: border-box;
+    width: 79.16666667%;
+  }
+  .ant-col-xl-push-19 {
+    left: 79.16666667%;
+  }
+  .ant-col-xl-pull-19 {
+    right: 79.16666667%;
+  }
+  .ant-col-xl-offset-19 {
+    margin-left: 79.16666667%;
+  }
+  .ant-col-xl-order-19 {
+    order: 19;
+  }
+  .ant-col-xl-18 {
+    display: block;
+    box-sizing: border-box;
+    width: 75%;
+  }
+  .ant-col-xl-push-18 {
+    left: 75%;
+  }
+  .ant-col-xl-pull-18 {
+    right: 75%;
+  }
+  .ant-col-xl-offset-18 {
+    margin-left: 75%;
+  }
+  .ant-col-xl-order-18 {
+    order: 18;
+  }
+  .ant-col-xl-17 {
+    display: block;
+    box-sizing: border-box;
+    width: 70.83333333%;
+  }
+  .ant-col-xl-push-17 {
+    left: 70.83333333%;
+  }
+  .ant-col-xl-pull-17 {
+    right: 70.83333333%;
+  }
+  .ant-col-xl-offset-17 {
+    margin-left: 70.83333333%;
+  }
+  .ant-col-xl-order-17 {
+    order: 17;
+  }
+  .ant-col-xl-16 {
+    display: block;
+    box-sizing: border-box;
+    width: 66.66666667%;
+  }
+  .ant-col-xl-push-16 {
+    left: 66.66666667%;
+  }
+  .ant-col-xl-pull-16 {
+    right: 66.66666667%;
+  }
+  .ant-col-xl-offset-16 {
+    margin-left: 66.66666667%;
+  }
+  .ant-col-xl-order-16 {
+    order: 16;
+  }
+  .ant-col-xl-15 {
+    display: block;
+    box-sizing: border-box;
+    width: 62.5%;
+  }
+  .ant-col-xl-push-15 {
+    left: 62.5%;
+  }
+  .ant-col-xl-pull-15 {
+    right: 62.5%;
+  }
+  .ant-col-xl-offset-15 {
+    margin-left: 62.5%;
+  }
+  .ant-col-xl-order-15 {
+    order: 15;
+  }
+  .ant-col-xl-14 {
+    display: block;
+    box-sizing: border-box;
+    width: 58.33333333%;
+  }
+  .ant-col-xl-push-14 {
+    left: 58.33333333%;
+  }
+  .ant-col-xl-pull-14 {
+    right: 58.33333333%;
+  }
+  .ant-col-xl-offset-14 {
+    margin-left: 58.33333333%;
+  }
+  .ant-col-xl-order-14 {
+    order: 14;
+  }
+  .ant-col-xl-13 {
+    display: block;
+    box-sizing: border-box;
+    width: 54.16666667%;
+  }
+  .ant-col-xl-push-13 {
+    left: 54.16666667%;
+  }
+  .ant-col-xl-pull-13 {
+    right: 54.16666667%;
+  }
+  .ant-col-xl-offset-13 {
+    margin-left: 54.16666667%;
+  }
+  .ant-col-xl-order-13 {
+    order: 13;
+  }
+  .ant-col-xl-12 {
+    display: block;
+    box-sizing: border-box;
+    width: 50%;
+  }
+  .ant-col-xl-push-12 {
+    left: 50%;
+  }
+  .ant-col-xl-pull-12 {
+    right: 50%;
+  }
+  .ant-col-xl-offset-12 {
+    margin-left: 50%;
+  }
+  .ant-col-xl-order-12 {
+    order: 12;
+  }
+  .ant-col-xl-11 {
+    display: block;
+    box-sizing: border-box;
+    width: 45.83333333%;
+  }
+  .ant-col-xl-push-11 {
+    left: 45.83333333%;
+  }
+  .ant-col-xl-pull-11 {
+    right: 45.83333333%;
+  }
+  .ant-col-xl-offset-11 {
+    margin-left: 45.83333333%;
+  }
+  .ant-col-xl-order-11 {
+    order: 11;
+  }
+  .ant-col-xl-10 {
+    display: block;
+    box-sizing: border-box;
+    width: 41.66666667%;
+  }
+  .ant-col-xl-push-10 {
+    left: 41.66666667%;
+  }
+  .ant-col-xl-pull-10 {
+    right: 41.66666667%;
+  }
+  .ant-col-xl-offset-10 {
+    margin-left: 41.66666667%;
+  }
+  .ant-col-xl-order-10 {
+    order: 10;
+  }
+  .ant-col-xl-9 {
+    display: block;
+    box-sizing: border-box;
+    width: 37.5%;
+  }
+  .ant-col-xl-push-9 {
+    left: 37.5%;
+  }
+  .ant-col-xl-pull-9 {
+    right: 37.5%;
+  }
+  .ant-col-xl-offset-9 {
+    margin-left: 37.5%;
+  }
+  .ant-col-xl-order-9 {
+    order: 9;
+  }
+  .ant-col-xl-8 {
+    display: block;
+    box-sizing: border-box;
+    width: 33.33333333%;
+  }
+  .ant-col-xl-push-8 {
+    left: 33.33333333%;
+  }
+  .ant-col-xl-pull-8 {
+    right: 33.33333333%;
+  }
+  .ant-col-xl-offset-8 {
+    margin-left: 33.33333333%;
+  }
+  .ant-col-xl-order-8 {
+    order: 8;
+  }
+  .ant-col-xl-7 {
+    display: block;
+    box-sizing: border-box;
+    width: 29.16666667%;
+  }
+  .ant-col-xl-push-7 {
+    left: 29.16666667%;
+  }
+  .ant-col-xl-pull-7 {
+    right: 29.16666667%;
+  }
+  .ant-col-xl-offset-7 {
+    margin-left: 29.16666667%;
+  }
+  .ant-col-xl-order-7 {
+    order: 7;
+  }
+  .ant-col-xl-6 {
+    display: block;
+    box-sizing: border-box;
+    width: 25%;
+  }
+  .ant-col-xl-push-6 {
+    left: 25%;
+  }
+  .ant-col-xl-pull-6 {
+    right: 25%;
+  }
+  .ant-col-xl-offset-6 {
+    margin-left: 25%;
+  }
+  .ant-col-xl-order-6 {
+    order: 6;
+  }
+  .ant-col-xl-5 {
+    display: block;
+    box-sizing: border-box;
+    width: 20.83333333%;
+  }
+  .ant-col-xl-push-5 {
+    left: 20.83333333%;
+  }
+  .ant-col-xl-pull-5 {
+    right: 20.83333333%;
+  }
+  .ant-col-xl-offset-5 {
+    margin-left: 20.83333333%;
+  }
+  .ant-col-xl-order-5 {
+    order: 5;
+  }
+  .ant-col-xl-4 {
+    display: block;
+    box-sizing: border-box;
+    width: 16.66666667%;
+  }
+  .ant-col-xl-push-4 {
+    left: 16.66666667%;
+  }
+  .ant-col-xl-pull-4 {
+    right: 16.66666667%;
+  }
+  .ant-col-xl-offset-4 {
+    margin-left: 16.66666667%;
+  }
+  .ant-col-xl-order-4 {
+    order: 4;
+  }
+  .ant-col-xl-3 {
+    display: block;
+    box-sizing: border-box;
+    width: 12.5%;
+  }
+  .ant-col-xl-push-3 {
+    left: 12.5%;
+  }
+  .ant-col-xl-pull-3 {
+    right: 12.5%;
+  }
+  .ant-col-xl-offset-3 {
+    margin-left: 12.5%;
+  }
+  .ant-col-xl-order-3 {
+    order: 3;
+  }
+  .ant-col-xl-2 {
+    display: block;
+    box-sizing: border-box;
+    width: 8.33333333%;
+  }
+  .ant-col-xl-push-2 {
+    left: 8.33333333%;
+  }
+  .ant-col-xl-pull-2 {
+    right: 8.33333333%;
+  }
+  .ant-col-xl-offset-2 {
+    margin-left: 8.33333333%;
+  }
+  .ant-col-xl-order-2 {
+    order: 2;
+  }
+  .ant-col-xl-1 {
+    display: block;
+    box-sizing: border-box;
+    width: 4.16666667%;
+  }
+  .ant-col-xl-push-1 {
+    left: 4.16666667%;
+  }
+  .ant-col-xl-pull-1 {
+    right: 4.16666667%;
+  }
+  .ant-col-xl-offset-1 {
+    margin-left: 4.16666667%;
+  }
+  .ant-col-xl-order-1 {
+    order: 1;
+  }
+  .ant-col-xl-0 {
+    display: none;
+  }
+  .ant-col-push-0 {
+    left: auto;
+  }
+  .ant-col-pull-0 {
+    right: auto;
+  }
+  .ant-col-xl-push-0 {
+    left: auto;
+  }
+  .ant-col-xl-pull-0 {
+    right: auto;
+  }
+  .ant-col-xl-offset-0 {
+    margin-left: 0;
+  }
+  .ant-col-xl-order-0 {
+    order: 0;
+  }
+}
+@media (min-width: 1600px) {
+  .ant-col-xxl-1, .ant-col-xxl-2, .ant-col-xxl-3, .ant-col-xxl-4, .ant-col-xxl-5, .ant-col-xxl-6, .ant-col-xxl-7, .ant-col-xxl-8, .ant-col-xxl-9, .ant-col-xxl-10, .ant-col-xxl-11, .ant-col-xxl-12, .ant-col-xxl-13, .ant-col-xxl-14, .ant-col-xxl-15, .ant-col-xxl-16, .ant-col-xxl-17, .ant-col-xxl-18, .ant-col-xxl-19, .ant-col-xxl-20, .ant-col-xxl-21, .ant-col-xxl-22, .ant-col-xxl-23, .ant-col-xxl-24 {
+    float: left;
+    flex: 0 0 auto;
+  }
+  .ant-col-xxl-24 {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .ant-col-xxl-push-24 {
+    left: 100%;
+  }
+  .ant-col-xxl-pull-24 {
+    right: 100%;
+  }
+  .ant-col-xxl-offset-24 {
+    margin-left: 100%;
+  }
+  .ant-col-xxl-order-24 {
+    order: 24;
+  }
+  .ant-col-xxl-23 {
+    display: block;
+    box-sizing: border-box;
+    width: 95.83333333%;
+  }
+  .ant-col-xxl-push-23 {
+    left: 95.83333333%;
+  }
+  .ant-col-xxl-pull-23 {
+    right: 95.83333333%;
+  }
+  .ant-col-xxl-offset-23 {
+    margin-left: 95.83333333%;
+  }
+  .ant-col-xxl-order-23 {
+    order: 23;
+  }
+  .ant-col-xxl-22 {
+    display: block;
+    box-sizing: border-box;
+    width: 91.66666667%;
+  }
+  .ant-col-xxl-push-22 {
+    left: 91.66666667%;
+  }
+  .ant-col-xxl-pull-22 {
+    right: 91.66666667%;
+  }
+  .ant-col-xxl-offset-22 {
+    margin-left: 91.66666667%;
+  }
+  .ant-col-xxl-order-22 {
+    order: 22;
+  }
+  .ant-col-xxl-21 {
+    display: block;
+    box-sizing: border-box;
+    width: 87.5%;
+  }
+  .ant-col-xxl-push-21 {
+    left: 87.5%;
+  }
+  .ant-col-xxl-pull-21 {
+    right: 87.5%;
+  }
+  .ant-col-xxl-offset-21 {
+    margin-left: 87.5%;
+  }
+  .ant-col-xxl-order-21 {
+    order: 21;
+  }
+  .ant-col-xxl-20 {
+    display: block;
+    box-sizing: border-box;
+    width: 83.33333333%;
+  }
+  .ant-col-xxl-push-20 {
+    left: 83.33333333%;
+  }
+  .ant-col-xxl-pull-20 {
+    right: 83.33333333%;
+  }
+  .ant-col-xxl-offset-20 {
+    margin-left: 83.33333333%;
+  }
+  .ant-col-xxl-order-20 {
+    order: 20;
+  }
+  .ant-col-xxl-19 {
+    display: block;
+    box-sizing: border-box;
+    width: 79.16666667%;
+  }
+  .ant-col-xxl-push-19 {
+    left: 79.16666667%;
+  }
+  .ant-col-xxl-pull-19 {
+    right: 79.16666667%;
+  }
+  .ant-col-xxl-offset-19 {
+    margin-left: 79.16666667%;
+  }
+  .ant-col-xxl-order-19 {
+    order: 19;
+  }
+  .ant-col-xxl-18 {
+    display: block;
+    box-sizing: border-box;
+    width: 75%;
+  }
+  .ant-col-xxl-push-18 {
+    left: 75%;
+  }
+  .ant-col-xxl-pull-18 {
+    right: 75%;
+  }
+  .ant-col-xxl-offset-18 {
+    margin-left: 75%;
+  }
+  .ant-col-xxl-order-18 {
+    order: 18;
+  }
+  .ant-col-xxl-17 {
+    display: block;
+    box-sizing: border-box;
+    width: 70.83333333%;
+  }
+  .ant-col-xxl-push-17 {
+    left: 70.83333333%;
+  }
+  .ant-col-xxl-pull-17 {
+    right: 70.83333333%;
+  }
+  .ant-col-xxl-offset-17 {
+    margin-left: 70.83333333%;
+  }
+  .ant-col-xxl-order-17 {
+    order: 17;
+  }
+  .ant-col-xxl-16 {
+    display: block;
+    box-sizing: border-box;
+    width: 66.66666667%;
+  }
+  .ant-col-xxl-push-16 {
+    left: 66.66666667%;
+  }
+  .ant-col-xxl-pull-16 {
+    right: 66.66666667%;
+  }
+  .ant-col-xxl-offset-16 {
+    margin-left: 66.66666667%;
+  }
+  .ant-col-xxl-order-16 {
+    order: 16;
+  }
+  .ant-col-xxl-15 {
+    display: block;
+    box-sizing: border-box;
+    width: 62.5%;
+  }
+  .ant-col-xxl-push-15 {
+    left: 62.5%;
+  }
+  .ant-col-xxl-pull-15 {
+    right: 62.5%;
+  }
+  .ant-col-xxl-offset-15 {
+    margin-left: 62.5%;
+  }
+  .ant-col-xxl-order-15 {
+    order: 15;
+  }
+  .ant-col-xxl-14 {
+    display: block;
+    box-sizing: border-box;
+    width: 58.33333333%;
+  }
+  .ant-col-xxl-push-14 {
+    left: 58.33333333%;
+  }
+  .ant-col-xxl-pull-14 {
+    right: 58.33333333%;
+  }
+  .ant-col-xxl-offset-14 {
+    margin-left: 58.33333333%;
+  }
+  .ant-col-xxl-order-14 {
+    order: 14;
+  }
+  .ant-col-xxl-13 {
+    display: block;
+    box-sizing: border-box;
+    width: 54.16666667%;
+  }
+  .ant-col-xxl-push-13 {
+    left: 54.16666667%;
+  }
+  .ant-col-xxl-pull-13 {
+    right: 54.16666667%;
+  }
+  .ant-col-xxl-offset-13 {
+    margin-left: 54.16666667%;
+  }
+  .ant-col-xxl-order-13 {
+    order: 13;
+  }
+  .ant-col-xxl-12 {
+    display: block;
+    box-sizing: border-box;
+    width: 50%;
+  }
+  .ant-col-xxl-push-12 {
+    left: 50%;
+  }
+  .ant-col-xxl-pull-12 {
+    right: 50%;
+  }
+  .ant-col-xxl-offset-12 {
+    margin-left: 50%;
+  }
+  .ant-col-xxl-order-12 {
+    order: 12;
+  }
+  .ant-col-xxl-11 {
+    display: block;
+    box-sizing: border-box;
+    width: 45.83333333%;
+  }
+  .ant-col-xxl-push-11 {
+    left: 45.83333333%;
+  }
+  .ant-col-xxl-pull-11 {
+    right: 45.83333333%;
+  }
+  .ant-col-xxl-offset-11 {
+    margin-left: 45.83333333%;
+  }
+  .ant-col-xxl-order-11 {
+    order: 11;
+  }
+  .ant-col-xxl-10 {
+    display: block;
+    box-sizing: border-box;
+    width: 41.66666667%;
+  }
+  .ant-col-xxl-push-10 {
+    left: 41.66666667%;
+  }
+  .ant-col-xxl-pull-10 {
+    right: 41.66666667%;
+  }
+  .ant-col-xxl-offset-10 {
+    margin-left: 41.66666667%;
+  }
+  .ant-col-xxl-order-10 {
+    order: 10;
+  }
+  .ant-col-xxl-9 {
+    display: block;
+    box-sizing: border-box;
+    width: 37.5%;
+  }
+  .ant-col-xxl-push-9 {
+    left: 37.5%;
+  }
+  .ant-col-xxl-pull-9 {
+    right: 37.5%;
+  }
+  .ant-col-xxl-offset-9 {
+    margin-left: 37.5%;
+  }
+  .ant-col-xxl-order-9 {
+    order: 9;
+  }
+  .ant-col-xxl-8 {
+    display: block;
+    box-sizing: border-box;
+    width: 33.33333333%;
+  }
+  .ant-col-xxl-push-8 {
+    left: 33.33333333%;
+  }
+  .ant-col-xxl-pull-8 {
+    right: 33.33333333%;
+  }
+  .ant-col-xxl-offset-8 {
+    margin-left: 33.33333333%;
+  }
+  .ant-col-xxl-order-8 {
+    order: 8;
+  }
+  .ant-col-xxl-7 {
+    display: block;
+    box-sizing: border-box;
+    width: 29.16666667%;
+  }
+  .ant-col-xxl-push-7 {
+    left: 29.16666667%;
+  }
+  .ant-col-xxl-pull-7 {
+    right: 29.16666667%;
+  }
+  .ant-col-xxl-offset-7 {
+    margin-left: 29.16666667%;
+  }
+  .ant-col-xxl-order-7 {
+    order: 7;
+  }
+  .ant-col-xxl-6 {
+    display: block;
+    box-sizing: border-box;
+    width: 25%;
+  }
+  .ant-col-xxl-push-6 {
+    left: 25%;
+  }
+  .ant-col-xxl-pull-6 {
+    right: 25%;
+  }
+  .ant-col-xxl-offset-6 {
+    margin-left: 25%;
+  }
+  .ant-col-xxl-order-6 {
+    order: 6;
+  }
+  .ant-col-xxl-5 {
+    display: block;
+    box-sizing: border-box;
+    width: 20.83333333%;
+  }
+  .ant-col-xxl-push-5 {
+    left: 20.83333333%;
+  }
+  .ant-col-xxl-pull-5 {
+    right: 20.83333333%;
+  }
+  .ant-col-xxl-offset-5 {
+    margin-left: 20.83333333%;
+  }
+  .ant-col-xxl-order-5 {
+    order: 5;
+  }
+  .ant-col-xxl-4 {
+    display: block;
+    box-sizing: border-box;
+    width: 16.66666667%;
+  }
+  .ant-col-xxl-push-4 {
+    left: 16.66666667%;
+  }
+  .ant-col-xxl-pull-4 {
+    right: 16.66666667%;
+  }
+  .ant-col-xxl-offset-4 {
+    margin-left: 16.66666667%;
+  }
+  .ant-col-xxl-order-4 {
+    order: 4;
+  }
+  .ant-col-xxl-3 {
+    display: block;
+    box-sizing: border-box;
+    width: 12.5%;
+  }
+  .ant-col-xxl-push-3 {
+    left: 12.5%;
+  }
+  .ant-col-xxl-pull-3 {
+    right: 12.5%;
+  }
+  .ant-col-xxl-offset-3 {
+    margin-left: 12.5%;
+  }
+  .ant-col-xxl-order-3 {
+    order: 3;
+  }
+  .ant-col-xxl-2 {
+    display: block;
+    box-sizing: border-box;
+    width: 8.33333333%;
+  }
+  .ant-col-xxl-push-2 {
+    left: 8.33333333%;
+  }
+  .ant-col-xxl-pull-2 {
+    right: 8.33333333%;
+  }
+  .ant-col-xxl-offset-2 {
+    margin-left: 8.33333333%;
+  }
+  .ant-col-xxl-order-2 {
+    order: 2;
+  }
+  .ant-col-xxl-1 {
+    display: block;
+    box-sizing: border-box;
+    width: 4.16666667%;
+  }
+  .ant-col-xxl-push-1 {
+    left: 4.16666667%;
+  }
+  .ant-col-xxl-pull-1 {
+    right: 4.16666667%;
+  }
+  .ant-col-xxl-offset-1 {
+    margin-left: 4.16666667%;
+  }
+  .ant-col-xxl-order-1 {
+    order: 1;
+  }
+  .ant-col-xxl-0 {
+    display: none;
+  }
+  .ant-col-push-0 {
+    left: auto;
+  }
+  .ant-col-pull-0 {
+    right: auto;
+  }
+  .ant-col-xxl-push-0 {
+    left: auto;
+  }
+  .ant-col-xxl-pull-0 {
+    right: auto;
+  }
+  .ant-col-xxl-offset-0 {
+    margin-left: 0;
+  }
+  .ant-col-xxl-order-0 {
+    order: 0;
+  }
+}
+.ant-input {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+}
+.ant-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input:hover {
+  border-color: #40a9ff;
+}
+.ant-input:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-input {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-input-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-input-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-input-group {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+.ant-input-group[class*="col-"] {
+  float: none;
+  padding-left: 0;
+  padding-right: 0;
+}
+.ant-input-group > [class*="col-"] {
+  padding-right: 8px;
+}
+.ant-input-group > [class*="col-"]:last-child {
+  padding-right: 0;
+}
+.ant-input-group-addon,
+.ant-input-group-wrap,
+.ant-input-group > .ant-input {
+  display: table-cell;
+}
+.ant-input-group-addon:not(:first-child):not(:last-child),
+.ant-input-group-wrap:not(:first-child):not(:last-child),
+.ant-input-group > .ant-input:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+.ant-input-group-addon,
+.ant-input-group-wrap {
+  width: 1px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.ant-input-group-wrap > * {
+  display: block !important;
+}
+.ant-input-group .ant-input {
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
+}
+.ant-input-group .ant-input:focus {
+  z-index: 1;
+}
+.ant-input-group-addon {
+  padding: 0 11px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1;
+  color: #54657e;
+  text-align: center;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  position: relative;
+  transition: all .3s;
+}
+.ant-input-group-addon .ant-select {
+  margin: -5px -11px;
+}
+.ant-input-group-addon .ant-select .ant-select-selection {
+  background-color: inherit;
+  margin: -1px;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.ant-input-group-addon .ant-select-open .ant-select-selection,
+.ant-input-group-addon .ant-select-focused .ant-select-selection {
+  color: #1890ff;
+}
+.ant-input-group-addon > i:only-child:after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.ant-input-group > .ant-input:first-child,
+.ant-input-group-addon:first-child {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.ant-input-group > .ant-input:first-child .ant-select .ant-select-selection,
+.ant-input-group-addon:first-child .ant-select .ant-select-selection {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.ant-input-group > .ant-input-affix-wrapper:not(:first-child) .ant-input {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.ant-input-group > .ant-input-affix-wrapper:not(:last-child) .ant-input {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.ant-input-group-addon:first-child {
+  border-right: 0;
+}
+.ant-input-group-addon:last-child {
+  border-left: 0;
+}
+.ant-input-group > .ant-input:last-child,
+.ant-input-group-addon:last-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.ant-input-group > .ant-input:last-child .ant-select .ant-select-selection,
+.ant-input-group-addon:last-child .ant-select .ant-select-selection {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.ant-input-group-lg .ant-input,
+.ant-input-group-lg > .ant-input-group-addon {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-input-group-sm .ant-input,
+.ant-input-group-sm > .ant-input-group-addon {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-input-group-lg .ant-select-selection--single {
+  height: 40px;
+}
+.ant-input-group-sm .ant-select-selection--single {
+  height: 24px;
+}
+.ant-input-group .ant-input-affix-wrapper {
+  display: table-cell;
+  width: 100%;
+  float: left;
+}
+.ant-input-group.ant-input-group-compact {
+  display: block;
+  zoom: 1;
+}
+.ant-input-group.ant-input-group-compact:before,
+.ant-input-group.ant-input-group-compact:after {
+  content: " ";
+  display: table;
+}
+.ant-input-group.ant-input-group-compact:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-input-group.ant-input-group-compact:before,
+.ant-input-group.ant-input-group-compact:after {
+  content: " ";
+  display: table;
+}
+.ant-input-group.ant-input-group-compact:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-input-group.ant-input-group-compact > * {
+  border-radius: 0;
+  border-right-width: 0;
+  vertical-align: top;
+  float: none;
+  display: inline-block;
+}
+.ant-input-group.ant-input-group-compact .ant-input {
+  float: none;
+  z-index: auto;
+}
+.ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input {
+  border-radius: 0;
+  border-right-width: 0;
+}
+.ant-input-group.ant-input-group-compact > *:first-child,
+.ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.ant-input-group.ant-input-group-compact > *:last-child,
+.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection,
+.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input,
+.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor,
+.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-right-width: 1px;
+}
+.ant-input-group-wrapper {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+}
+.ant-input-affix-wrapper {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.ant-input-affix-wrapper .ant-input {
+  z-index: 1;
+}
+.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
+  border-color: #40a9ff;
+}
+.ant-input-affix-wrapper .ant-input-prefix,
+.ant-input-affix-wrapper .ant-input-suffix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  line-height: 0;
+  color: #54657e;
+}
+.ant-input-affix-wrapper .ant-input-prefix :not(.anticon),
+.ant-input-affix-wrapper .ant-input-suffix :not(.anticon) {
+  line-height: 1.5;
+}
+.ant-input-affix-wrapper .ant-input-prefix {
+  left: 12px;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+  right: 12px;
+}
+.ant-input-affix-wrapper .ant-input:not(:first-child) {
+  padding-left: 30px;
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+  padding-right: 30px;
+}
+.ant-input-affix-wrapper .ant-input {
+  min-height: 100%;
+}
+.ant-input-search-icon {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-search:not(.ant-input-search-small) > .ant-input-suffix {
+  right: 12px;
+}
+.ant-input-search > .ant-input-suffix > .ant-input-search-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ant-input-search > .ant-input-suffix > .ant-input-search-button > .anticon-search {
+  font-size: 16px;
+}
+.ant-input-search.ant-input-search-enter-button > .ant-input {
+  padding-right: 46px;
+}
+.ant-input-search.ant-input-search-enter-button > .ant-input-suffix {
+  right: 0;
+}
+.ant-input-number {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+  list-style: none;
+  position: relative;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  transition: all .3s;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  width: 90px;
+}
+.ant-input-number::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-input-number:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input-number::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input-number:hover {
+  border-color: #40a9ff;
+}
+.ant-input-number:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-number-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-input-number {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-input-number-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-input-number-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-input-number-handler {
+  text-align: center;
+  line-height: 0;
+  height: 50%;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.45);
+  position: relative;
+  transition: all 0.1s linear;
+  display: block;
+  width: 100%;
+  font-weight: bold;
+}
+.ant-input-number-handler:active {
+  background: #f4f4f4;
+}
+.ant-input-number-handler:hover .ant-input-number-handler-up-inner,
+.ant-input-number-handler:hover .ant-input-number-handler-down-inner {
+  color: #40a9ff;
+}
+.ant-input-number-handler-up-inner,
+.ant-input-number-handler-down-inner {
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 12px;
+  user-select: none;
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  transition: all 0.1s linear;
+  display: inline-block;
+  font-size: 12px;
+  font-size: 7px \9;
+  transform: scale(0.58333333) rotate(0deg);
+  right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-number-handler-up-inner:before,
+.ant-input-number-handler-down-inner:before {
+  display: block;
+  font-family: "anticon" !important;
+}
+:root .ant-input-number-handler-up-inner,
+:root .ant-input-number-handler-down-inner {
+  font-size: 12px;
+}
+.ant-input-number:hover {
+  border-color: #40a9ff;
+}
+.ant-input-number-focused {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-input-number-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-disabled:hover {
+  border-color: #e6d8d8;
+}
+.ant-input-number-disabled .ant-input-number-input {
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+}
+.ant-input-number-disabled .ant-input-number-handler-wrap {
+  display: none;
+}
+.ant-input-number-input {
+  width: 100%;
+  text-align: left;
+  outline: 0;
+  -moz-appearance: textfield;
+  height: 30px;
+  transition: all 0.3s linear;
+  color: #54657e;
+  background-color: #fff;
+  border: 0;
+  border-radius: 4px;
+  padding: 0 11px;
+  display: block;
+}
+.ant-input-number-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-input-number-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input-number-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-input-number-input[disabled] {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-input-number-input[disabled]:hover {
+  border-color: #e6d8d8;
+}
+.ant-input-number-lg {
+  padding: 0;
+  font-size: 16px;
+}
+.ant-input-number-lg input {
+  height: 38px;
+}
+.ant-input-number-sm {
+  padding: 0;
+}
+.ant-input-number-sm input {
+  height: 22px;
+  padding: 0 7px;
+}
+.ant-input-number-handler-wrap {
+  border-left: 1px solid #d9d9d9;
+  width: 22px;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 0;
+  border-radius: 0 4px 4px 0;
+  transition: opacity 0.24s linear 0.1s;
+  z-index: 2;
+}
+.ant-input-number-handler-wrap:hover .ant-input-number-handler {
+  height: 40%;
+}
+.ant-input-number:hover .ant-input-number-handler-wrap {
+  opacity: 1;
+}
+.ant-input-number-handler-up {
+  cursor: pointer;
+}
+.ant-input-number-handler-up-inner {
+  top: 50%;
+  margin-top: -6px;
+}
+.ant-input-number-handler-up-inner:before {
+  text-align: center;
+  content: "\e61e";
+}
+.ant-input-number-handler-up:hover {
+  height: 60% !important;
+}
+.ant-input-number-handler-down {
+  border-top: 1px solid #d9d9d9;
+  top: -1px;
+  cursor: pointer;
+}
+.ant-input-number-handler-down-inner {
+  top: 50%;
+  margin-top: -6px;
+}
+.ant-input-number-handler-down-inner:before {
+  text-align: center;
+  content: "\e61d";
+}
+.ant-input-number-handler-down:hover {
+  height: 60% !important;
+}
+.ant-input-number-handler-up-disabled,
+.ant-input-number-handler-down-disabled {
+  cursor: not-allowed;
+}
+.ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner,
+.ant-input-number-handler-down-disabled:hover .ant-input-number-handler-down-inner {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-layout {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  background: #f0f2f5;
+}
+.ant-layout,
+.ant-layout * {
+  box-sizing: border-box;
+}
+.ant-layout.ant-layout-has-sider {
+  flex-direction: row;
+}
+.ant-layout.ant-layout-has-sider > .ant-layout,
+.ant-layout.ant-layout-has-sider > .ant-layout-content {
+  overflow-x: hidden;
+}
+.ant-layout-header,
+.ant-layout-footer {
+  flex: 0 0 auto;
+}
+.ant-layout-header {
+  background: #2a3542;
+  padding: 0 50px;
+  height: 64px;
+  line-height: 64px;
+}
+.ant-layout-footer {
+  background: #f0f2f5;
+  padding: 24px 50px;
+  color: #54657e;
+  font-size: 14px;
+}
+.ant-layout-content {
+  flex: auto;
+}
+.ant-layout-sider {
+  transition: all .2s;
+  position: relative;
+  background: #2a3542;
+  /* fix firefox can't set width smaller than content on flex item */
+  min-width: 0;
+}
+.ant-layout-sider-children {
+  height: 100%;
+  padding-top: 0.1px;
+  margin-top: -0.1px;
+}
+.ant-layout-sider-has-trigger {
+  padding-bottom: 48px;
+}
+.ant-layout-sider-right {
+  order: 1;
+}
+.ant-layout-sider-trigger {
+  position: fixed;
+  text-align: center;
+  bottom: 0;
+  cursor: pointer;
+  height: 48px;
+  line-height: 48px;
+  color: #fff;
+  background: #002140;
+  z-index: 1;
+  transition: all .2s;
+}
+.ant-layout-sider-zero-width > * {
+  overflow: hidden;
+}
+.ant-layout-sider-zero-width-trigger {
+  position: absolute;
+  top: 64px;
+  right: -36px;
+  text-align: center;
+  width: 36px;
+  height: 42px;
+  line-height: 42px;
+  background: #2a3542;
+  color: #fff;
+  font-size: 18px;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  transition: background .3s ease;
+}
+.ant-layout-sider-zero-width-trigger:hover {
+  background: #3f4955;
+}
+.ant-list {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+}
+.ant-list * {
+  outline: none;
+}
+.ant-list-pagination {
+  margin-top: 24px;
+  text-align: right;
+}
+.ant-list-more {
+  margin-top: 12px;
+  text-align: center;
+}
+.ant-list-more button {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.ant-list-spin {
+  text-align: center;
+  min-height: 40px;
+}
+.ant-list-empty-text {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+}
+.ant-list-item {
+  align-items: center;
+  display: flex;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.ant-list-item-meta {
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  font-size: 0;
+}
+.ant-list-item-meta-avatar {
+  margin-right: 16px;
+}
+.ant-list-item-meta-content {
+  flex: 1 0;
+}
+.ant-list-item-meta-title {
+  color: #54657e;
+  margin-bottom: 4px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.ant-list-item-meta-title > a {
+  color: #54657e;
+  transition: all .3s;
+}
+.ant-list-item-meta-title > a:hover {
+  color: #1890ff;
+}
+.ant-list-item-meta-description {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  line-height: 22px;
+}
+.ant-list-item-content {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+}
+.ant-list-item-content-single {
+  justify-content: flex-start;
+}
+.ant-list-item-action {
+  font-size: 0;
+  flex: 0 0 auto;
+  margin-left: 48px;
+  padding: 0;
+  list-style: none;
+}
+.ant-list-item-action > li {
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  padding: 0 8px;
+  position: relative;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+}
+.ant-list-item-action > li:first-child {
+  padding-left: 0;
+}
+.ant-list-item-action-split {
+  background-color: #e8e8e8;
+  margin-top: -7px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 1px;
+  height: 14px;
+}
+.ant-list-item-main {
+  display: flex;
+  flex: 1;
+}
+.ant-list-header,
+.ant-list-footer {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.ant-list-empty {
+  color: rgba(0, 0, 0, 0.45);
+  padding: 16px 0;
+  font-size: 12px;
+  text-align: center;
+}
+.ant-list-split .ant-list-item {
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-split .ant-list-item:last-child {
+  border-bottom: none;
+}
+.ant-list-split .ant-list-header {
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-loading .ant-list-spin-nested-loading {
+  min-height: 32px;
+}
+.ant-list-something-after-last-item .ant-list-item:last-child {
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-list-lg .ant-list-item {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.ant-list-sm .ant-list-item {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.ant-list-vertical .ant-list-item {
+  display: block;
+}
+.ant-list-vertical .ant-list-item-extra-wrap {
+  display: flex;
+}
+.ant-list-vertical .ant-list-item-main {
+  display: block;
+  flex: 1;
+}
+.ant-list-vertical .ant-list-item-extra {
+  margin-left: 58px;
+}
+.ant-list-vertical .ant-list-item-meta {
+  margin-bottom: 16px;
+}
+.ant-list-vertical .ant-list-item-meta-avatar {
+  display: none;
+}
+.ant-list-vertical .ant-list-item-meta-title {
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+  font-size: 16px;
+  line-height: 24px;
+}
+.ant-list-vertical .ant-list-item-content {
+  display: block;
+  color: #54657e;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+.ant-list-vertical .ant-list-item-action {
+  margin-left: auto;
+}
+.ant-list-vertical .ant-list-item-action > li {
+  padding: 0 16px;
+}
+.ant-list-vertical .ant-list-item-action > li:first-child {
+  padding-left: 0;
+}
+.ant-list-grid .ant-list-item {
+  border-bottom: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+}
+.ant-list-grid .ant-list-item-content {
+  display: block;
+}
+.ant-list-bordered {
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+}
+.ant-list-bordered .ant-list-header {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.ant-list-bordered .ant-list-footer {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.ant-list-bordered .ant-list-item {
+  border-bottom: 1px solid #e8e8e8;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.ant-list-bordered .ant-list-pagination {
+  margin: 16px 24px;
+}
+.ant-list-bordered.ant-list-sm .ant-list-item {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.ant-list-bordered.ant-list-sm .ant-list-header,
+.ant-list-bordered.ant-list-sm .ant-list-footer {
+  padding: 8px 16px;
+}
+.ant-list-bordered.ant-list-lg .ant-list-header,
+.ant-list-bordered.ant-list-lg .ant-list-footer {
+  padding: 16px 24px;
+}
+@media screen and (max-width: 768px) {
+  .ant-list-item-action {
+    margin-left: 24px;
+  }
+  .ant-list-vertical .ant-list-item-extra {
+    margin-left: 24px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .ant-list-item {
+    flex-wrap: wrap;
+  }
+  .ant-list-item-action {
+    margin-left: 12px;
+  }
+  .ant-list-vertical .ant-list-item-extra-wrap {
+    flex-wrap: wrap-reverse;
+  }
+  .ant-list-vertical .ant-list-item-main {
+    min-width: 220px;
+  }
+  .ant-list-vertical .ant-list-item-extra {
+    margin-left: 0;
+  }
+}
+.ant-mention-wrapper {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: middle;
+}
+.ant-mention-wrapper .ant-mention-editor {
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+  min-height: 32px;
+  height: auto;
+  line-height: 1.5;
+  padding: 0;
+  display: block;
+}
+.ant-mention-wrapper .ant-mention-editor::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-mention-wrapper .ant-mention-editor:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-mention-wrapper .ant-mention-editor::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-mention-wrapper .ant-mention-editor:hover {
+  border-color: #40a9ff;
+}
+.ant-mention-wrapper .ant-mention-editor:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-mention-wrapper .ant-mention-editor-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-wrapper .ant-mention-editor-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-mention-wrapper .ant-mention-editor {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-mention-wrapper .ant-mention-editor-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-mention-wrapper .ant-mention-editor-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-mention-wrapper .ant-mention-editor-wrapper {
+  overflow-y: auto;
+  height: auto;
+}
+.ant-mention-wrapper.ant-mention-active:not(.disabled) .ant-mention-editor {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-mention-wrapper.disabled .ant-mention-editor {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-wrapper.disabled .ant-mention-editor:hover {
+  border-color: #e6d8d8;
+}
+.ant-mention-wrapper .public-DraftEditorPlaceholder-root {
+  position: absolute;
+  pointer-events: none;
+}
+.ant-mention-wrapper .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner {
+  color: #bfbfbf;
+  opacity: 1;
+  outline: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  height: auto;
+  padding: 5px 11px;
+}
+.ant-mention-wrapper .DraftEditor-editorContainer .public-DraftEditor-content {
+  height: auto;
+  padding: 5px 11px;
+}
+.ant-mention-dropdown {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  margin-top: 1.5em;
+  max-height: 250px;
+  min-width: 120px;
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  z-index: 1050;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.ant-mention-dropdown-placement-top {
+  margin-top: -0.1em;
+}
+.ant-mention-dropdown-notfound.ant-mention-dropdown-item {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-mention-dropdown-notfound.ant-mention-dropdown-item .anticon-loading {
+  color: #1890ff;
+  text-align: center;
+  display: block;
+}
+.ant-mention-dropdown-item {
+  position: relative;
+  display: block;
+  padding: 5px 12px;
+  line-height: 22px;
+  font-weight: normal;
+  color: #54657e;
+  white-space: nowrap;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  transition: background 0.3s;
+}
+.ant-mention-dropdown-item:hover {
+  background-color: #e6f7ff;
+}
+.ant-mention-dropdown-item.focus,
+.ant-mention-dropdown-item-active {
+  background-color: #e6f7ff;
+}
+.ant-mention-dropdown-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-mention-dropdown-item-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+  cursor: not-allowed;
+}
+.ant-mention-dropdown-item-selected,
+.ant-mention-dropdown-item-selected:hover {
+  background-color: #f5f5f5;
+  font-weight: bold;
+  color: #54657e;
+}
+.ant-mention-dropdown-item-divider {
+  height: 1px;
+  margin: 1px 0;
+  overflow: hidden;
+  background-color: #e8e8e8;
+  line-height: 0;
+}
+.ant-menu {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: #54657e;
+  background: #fff;
+  line-height: 0;
+  transition: background .3s, width .2s;
+  zoom: 1;
+}
+.ant-menu:before,
+.ant-menu:after {
+  content: " ";
+  display: table;
+}
+.ant-menu:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-menu:before,
+.ant-menu:after {
+  content: " ";
+  display: table;
+}
+.ant-menu:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-menu ul,
+.ant-menu ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ant-menu-hidden {
+  display: none;
+}
+.ant-menu-item-group-title {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 8px 16px;
+  transition: all .3s;
+}
+.ant-menu-submenu,
+.ant-menu-submenu-inline {
+  transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item:active,
+.ant-menu-submenu-title:active {
+  background: #e6f7ff;
+}
+.ant-menu-submenu .ant-menu-sub {
+  cursor: initial;
+  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item > a {
+  display: block;
+  color: #54657e;
+}
+.ant-menu-item > a:hover {
+  color: #3fa8eb;
+}
+.ant-menu-item > a:focus {
+  text-decoration: none;
+}
+.ant-menu-item > a:before {
+  position: absolute;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  content: '';
+}
+.ant-menu-item-divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: #e8e8e8;
+  line-height: 0;
+}
+.ant-menu-item:hover,
+.ant-menu-item-active,
+.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+.ant-menu-submenu-active,
+.ant-menu-submenu-title:hover {
+  color: #3fa8eb;
+}
+.ant-menu-horizontal .ant-menu-item,
+.ant-menu-horizontal .ant-menu-submenu {
+  margin-top: -1px;
+}
+.ant-menu-horizontal > .ant-menu-item:hover,
+.ant-menu-horizontal > .ant-menu-item-active,
+.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover {
+  background-color: transparent;
+}
+.ant-menu-item-selected {
+  color: #3fa8eb;
+}
+.ant-menu-item-selected > a,
+.ant-menu-item-selected > a:hover {
+  color: #3fa8eb;
+}
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: #e6f7ff;
+}
+.ant-menu-inline,
+.ant-menu-vertical,
+.ant-menu-vertical-left {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-menu-vertical-right {
+  border-left: 1px solid #e8e8e8;
+}
+.ant-menu-vertical.ant-menu-sub,
+.ant-menu-vertical-left.ant-menu-sub,
+.ant-menu-vertical-right.ant-menu-sub {
+  border-right: 0;
+  padding: 0;
+  transform-origin: 0 0;
+}
+.ant-menu-vertical.ant-menu-sub .ant-menu-item,
+.ant-menu-vertical-left.ant-menu-sub .ant-menu-item,
+.ant-menu-vertical-right.ant-menu-sub .ant-menu-item {
+  border-right: 0;
+  margin-left: 0;
+  left: 0;
+}
+.ant-menu-vertical.ant-menu-sub .ant-menu-item:after,
+.ant-menu-vertical-left.ant-menu-sub .ant-menu-item:after,
+.ant-menu-vertical-right.ant-menu-sub .ant-menu-item:after {
+  border-right: 0;
+}
+.ant-menu-vertical.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical-left.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical-right.ant-menu-sub > .ant-menu-item,
+.ant-menu-vertical.ant-menu-sub > .ant-menu-submenu,
+.ant-menu-vertical-left.ant-menu-sub > .ant-menu-submenu,
+.ant-menu-vertical-right.ant-menu-sub > .ant-menu-submenu {
+  transform-origin: 0 0;
+}
+.ant-menu-horizontal.ant-menu-sub,
+.ant-menu-vertical.ant-menu-sub,
+.ant-menu-vertical-left.ant-menu-sub,
+.ant-menu-vertical-right.ant-menu-sub {
+  min-width: 160px;
+}
+.ant-menu-item,
+.ant-menu-submenu-title {
+  cursor: pointer;
+  margin: 0;
+  padding: 0 20px;
+  position: relative;
+  display: block;
+  white-space: nowrap;
+  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item .anticon,
+.ant-menu-submenu-title .anticon {
+  min-width: 14px;
+  margin-right: 10px;
+  transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-item .anticon + span,
+.ant-menu-submenu-title .anticon + span {
+  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  opacity: 1;
+}
+.ant-menu > .ant-menu-item-divider {
+  height: 1px;
+  margin: 1px 0;
+  overflow: hidden;
+  padding: 0;
+  line-height: 0;
+  background-color: #e8e8e8;
+}
+.ant-menu-submenu-popup {
+  position: absolute;
+  border-radius: 4px;
+  z-index: 1050;
+}
+.ant-menu-submenu > .ant-menu {
+  background-color: #fff;
+  border-radius: 4px;
+}
+.ant-menu-submenu > .ant-menu-submenu-title:after {
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 10px;
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+  content: '';
+  position: absolute;
+  vertical-align: baseline;
+  background: #fff;
+  background-image: linear-gradient(to right, #54657e, #54657e);
+  width: 6px;
+  height: 1.5px;
+  border-radius: 2px;
+  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+  transform: rotate(45deg) translateY(-2px);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+  transform: rotate(-45deg) translateY(2px);
+}
+.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
+.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before,
+.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
+  background: linear-gradient(to right, #3fa8eb, #3fa8eb);
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+  transform: rotate(-45deg) translateX(2px);
+}
+.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+  transform: rotate(45deg) translateX(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+  transform: translateY(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
+  transform: rotate(-45deg) translateX(-2px);
+}
+.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+  transform: rotate(45deg) translateX(2px);
+}
+.ant-menu-vertical .ant-menu-submenu-selected,
+.ant-menu-vertical-left .ant-menu-submenu-selected,
+.ant-menu-vertical-right .ant-menu-submenu-selected {
+  color: #3fa8eb;
+}
+.ant-menu-vertical .ant-menu-submenu-selected > a,
+.ant-menu-vertical-left .ant-menu-submenu-selected > a,
+.ant-menu-vertical-right .ant-menu-submenu-selected > a {
+  color: #3fa8eb;
+}
+.ant-menu-horizontal {
+  border: 0;
+  border-bottom: 1px solid #e8e8e8;
+  box-shadow: none;
+  line-height: 46px;
+}
+.ant-menu-horizontal > .ant-menu-item,
+.ant-menu-horizontal > .ant-menu-submenu {
+  position: relative;
+  top: 1px;
+  float: left;
+  border-bottom: 2px solid transparent;
+}
+.ant-menu-horizontal > .ant-menu-item:hover,
+.ant-menu-horizontal > .ant-menu-submenu:hover,
+.ant-menu-horizontal > .ant-menu-item-active,
+.ant-menu-horizontal > .ant-menu-submenu-active,
+.ant-menu-horizontal > .ant-menu-item-open,
+.ant-menu-horizontal > .ant-menu-submenu-open,
+.ant-menu-horizontal > .ant-menu-item-selected,
+.ant-menu-horizontal > .ant-menu-submenu-selected {
+  border-bottom: 2px solid #3fa8eb;
+  color: #3fa8eb;
+}
+.ant-menu-horizontal > .ant-menu-item > a,
+.ant-menu-horizontal > .ant-menu-submenu > a {
+  display: block;
+  color: #54657e;
+}
+.ant-menu-horizontal > .ant-menu-item > a:hover,
+.ant-menu-horizontal > .ant-menu-submenu > a:hover {
+  color: #3fa8eb;
+}
+.ant-menu-horizontal:after {
+  content: "\20";
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item {
+  position: relative;
+}
+.ant-menu-vertical .ant-menu-item:after,
+.ant-menu-vertical-left .ant-menu-item:after,
+.ant-menu-vertical-right .ant-menu-item:after,
+.ant-menu-inline .ant-menu-item:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-right: 3px solid #3fa8eb;
+  transform: scaleY(0.0001);
+  opacity: 0;
+  transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.ant-menu-vertical .ant-menu-item,
+.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-vertical-right .ant-menu-item,
+.ant-menu-inline .ant-menu-item,
+.ant-menu-vertical .ant-menu-submenu-title,
+.ant-menu-vertical-left .ant-menu-submenu-title,
+.ant-menu-vertical-right .ant-menu-submenu-title,
+.ant-menu-inline .ant-menu-submenu-title {
+  padding: 0 16px;
+  font-size: 14px;
+  line-height: 50px;
+  height: 50px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ant-menu-vertical .ant-menu-submenu,
+.ant-menu-vertical-left .ant-menu-submenu,
+.ant-menu-vertical-right .ant-menu-submenu,
+.ant-menu-inline .ant-menu-submenu {
+  padding-bottom: 0.01px;
+}
+.ant-menu-vertical .ant-menu-item:not(:last-child),
+.ant-menu-vertical-left .ant-menu-item:not(:last-child),
+.ant-menu-vertical-right .ant-menu-item:not(:last-child),
+.ant-menu-inline .ant-menu-item:not(:last-child) {
+  margin-bottom: 8px;
+}
+.ant-menu-vertical > .ant-menu-item,
+.ant-menu-vertical-left > .ant-menu-item,
+.ant-menu-vertical-right > .ant-menu-item,
+.ant-menu-inline > .ant-menu-item,
+.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
+.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+  line-height: 50px;
+  height: 50px;
+}
+.ant-menu-inline {
+  width: 100%;
+}
+.ant-menu-inline .ant-menu-selected:after,
+.ant-menu-inline .ant-menu-item-selected:after {
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+  opacity: 1;
+  transform: scaleY(1);
+}
+.ant-menu-inline .ant-menu-item,
+.ant-menu-inline .ant-menu-submenu-title {
+  width: calc(100% + 1px);
+}
+.ant-menu-inline .ant-menu-submenu-title {
+  padding-right: 34px;
+}
+.ant-menu-inline-collapsed {
+  width: 80px;
+}
+.ant-menu-inline-collapsed > .ant-menu-item,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+  left: 0;
+  text-overflow: clip;
+  padding: 0 32px !important;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .ant-menu-submenu-arrow,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-submenu-arrow,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow {
+  display: none;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .anticon,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon {
+  font-size: 16px;
+  line-height: 50px;
+  margin: 0;
+}
+.ant-menu-inline-collapsed > .ant-menu-item .anticon + span,
+.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon + span,
+.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
+  max-width: 0;
+  display: inline-block;
+  opacity: 0;
+}
+.ant-menu-inline-collapsed-tooltip {
+  pointer-events: none;
+}
+.ant-menu-inline-collapsed-tooltip .anticon {
+  display: none;
+}
+.ant-menu-inline-collapsed-tooltip a {
+  color: rgba(255, 255, 255, 0.85);
+}
+.ant-menu-inline-collapsed .ant-menu-item-group-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.ant-menu-item-group-list {
+  margin: 0;
+  padding: 0;
+}
+.ant-menu-item-group-list .ant-menu-item,
+.ant-menu-item-group-list .ant-menu-submenu-title {
+  padding: 0 16px 0 28px;
+}
+.ant-menu-root.ant-menu-vertical,
+.ant-menu-root.ant-menu-vertical-left,
+.ant-menu-root.ant-menu-vertical-right,
+.ant-menu-root.ant-menu-inline {
+  box-shadow: none;
+}
+.ant-menu-sub.ant-menu-inline {
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+.ant-menu-sub.ant-menu-inline > .ant-menu-item,
+.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+  line-height: 50px;
+  height: 50px;
+  list-style-type: disc;
+  list-style-position: inside;
+}
+.ant-menu-sub.ant-menu-inline .ant-menu-item-group-title {
+  padding-left: 32px;
+}
+.ant-menu-item-disabled,
+.ant-menu-submenu-disabled {
+  color: rgba(0, 0, 0, 0.25) !important;
+  cursor: not-allowed;
+  background: none;
+  border-color: transparent !important;
+}
+.ant-menu-item-disabled > a,
+.ant-menu-submenu-disabled > a {
+  color: rgba(0, 0, 0, 0.25) !important;
+  pointer-events: none;
+}
+.ant-menu-item-disabled > .ant-menu-submenu-title,
+.ant-menu-submenu-disabled > .ant-menu-submenu-title {
+  color: rgba(0, 0, 0, 0.25) !important;
+  cursor: not-allowed;
+}
+.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub {
+  color: #fff;
+  background: #2a3542;
+}
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow {
+  opacity: .45;
+  transition: all .3s;
+}
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
+  background: #fff;
+}
+.ant-menu-dark.ant-menu-submenu-popup {
+  background: transparent;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+  background: #2a3542;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
+}
+.ant-menu-dark.ant-menu-horizontal {
+  border-bottom-color: #2a3542;
+}
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-item,
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
+  border-color: #2a3542;
+  border-bottom: 0;
+}
+.ant-menu-dark .ant-menu-item,
+.ant-menu-dark .ant-menu-item-group-title,
+.ant-menu-dark .ant-menu-item > a {
+  color: #fff;
+}
+.ant-menu-dark.ant-menu-inline,
+.ant-menu-dark.ant-menu-vertical,
+.ant-menu-dark.ant-menu-vertical-left,
+.ant-menu-dark.ant-menu-vertical-right {
+  border-right: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical-left .ant-menu-item,
+.ant-menu-dark.ant-menu-vertical-right .ant-menu-item {
+  border-right: 0;
+  margin-left: 0;
+  left: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical-left .ant-menu-item:after,
+.ant-menu-dark.ant-menu-vertical-right .ant-menu-item:after {
+  border-right: 0;
+}
+.ant-menu-dark.ant-menu-inline .ant-menu-item,
+.ant-menu-dark.ant-menu-inline .ant-menu-submenu-title {
+  width: 100%;
+}
+.ant-menu-dark .ant-menu-item:hover,
+.ant-menu-dark .ant-menu-item-active,
+.ant-menu-dark .ant-menu-submenu-active,
+.ant-menu-dark .ant-menu-submenu-open,
+.ant-menu-dark .ant-menu-submenu-selected,
+.ant-menu-dark .ant-menu-submenu-title:hover {
+  background-color: transparent;
+  color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item:hover > a,
+.ant-menu-dark .ant-menu-item-active > a,
+.ant-menu-dark .ant-menu-submenu-active > a,
+.ant-menu-dark .ant-menu-submenu-open > a,
+.ant-menu-dark .ant-menu-submenu-selected > a,
+.ant-menu-dark .ant-menu-submenu-title:hover > a {
+  color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow {
+  opacity: 1;
+}
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before,
+.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before {
+  background: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item-selected {
+  border-right: 0;
+  color: #3fa8eb;
+}
+.ant-menu-dark .ant-menu-item-selected:after {
+  border-right: 0;
+}
+.ant-menu-dark .ant-menu-item-selected > a,
+.ant-menu-dark .ant-menu-item-selected > a:hover {
+  color: #3fa8eb;
+}
+.ant-menu.ant-menu-dark .ant-menu-item-selected,
+.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
+  background-color: #3d4a59;
+}
+.ant-menu-dark .ant-menu-item-disabled,
+.ant-menu-dark .ant-menu-submenu-disabled,
+.ant-menu-dark .ant-menu-item-disabled > a,
+.ant-menu-dark .ant-menu-submenu-disabled > a {
+  opacity: 0.8;
+  color: rgba(255, 255, 255, 0.35) !important;
+}
+.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title,
+.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.35) !important;
+}
+.ant-message {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: fixed;
+  z-index: 1010;
+  width: 100%;
+  top: 16px;
+  left: 0;
+  pointer-events: none;
+}
+.ant-message-notice {
+  padding: 8px;
+  text-align: center;
+}
+.ant-message-notice:first-child {
+  margin-top: -8px;
+}
+.ant-message-notice-content {
+  padding: 10px 16px;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fff;
+  display: inline-block;
+  pointer-events: all;
+}
+.ant-message-success .anticon {
+  color: #52c41a;
+}
+.ant-message-error .anticon {
+  color: #f5222d;
+}
+.ant-message-warning .anticon {
+  color: #faad14;
+}
+.ant-message-info .anticon,
+.ant-message-loading .anticon {
+  color: #1890ff;
+}
+.ant-message .anticon {
+  margin-right: 8px;
+  font-size: 16px;
+  top: 1px;
+  position: relative;
+}
+.ant-message-notice.move-up-leave.move-up-leave-active {
+  animation-name: MessageMoveOut;
+  overflow: hidden;
+  animation-duration: .3s;
+}
+@keyframes MessageMoveOut {
+  0% {
+    opacity: 1;
+    max-height: 150px;
+    padding: 8px;
+  }
+  100% {
+    opacity: 0;
+    max-height: 0;
+    padding: 0;
+  }
+}
+.ant-modal {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  width: auto;
+  margin: 0 auto;
+  top: 100px;
+  padding-bottom: 24px;
+}
+.ant-modal-wrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+.ant-modal-title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-modal-content {
+  position: relative;
+  background-color: #fff;
+  border: 0;
+  border-radius: 4px;
+  background-clip: padding-box;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.ant-modal-close {
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+  transition: color .3s;
+  color: rgba(0, 0, 0, 0.45);
+  outline: 0;
+  padding: 0;
+}
+.ant-modal-close-x {
+  display: block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  width: 56px;
+  height: 56px;
+  line-height: 56px;
+  font-size: 16px;
+}
+.ant-modal-close-x:before {
+  content: "\e633";
+  display: block;
+  font-family: "anticon" !important;
+}
+.ant-modal-close:focus,
+.ant-modal-close:hover {
+  color: #444;
+  text-decoration: none;
+}
+.ant-modal-header {
+  padding: 16px 24px;
+  border-radius: 4px 4px 0 0;
+  background: #fff;
+  color: #54657e;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-modal-body {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.ant-modal-footer {
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  border-radius: 0 0 4px 4px;
+}
+.ant-modal-footer button + button {
+  margin-left: 8px;
+  margin-bottom: 0;
+}
+.ant-modal.zoom-enter,
+.ant-modal.zoom-appear {
+  animation-duration: 0.3s;
+  transform: none;
+  opacity: 0;
+}
+.ant-modal-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: #373737;
+  background-color: rgba(0, 0, 0, 0.65);
+  height: 100%;
+  z-index: 1000;
+  filter: alpha(opacity=50);
+}
+.ant-modal-mask-hidden {
+  display: none;
+}
+.ant-modal-open {
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .ant-modal {
+    width: auto !important;
+    margin: 10px;
+  }
+  .vertical-center-modal .ant-modal {
+    flex: 1;
+  }
+}
+.ant-confirm .ant-modal-header {
+  display: none;
+}
+.ant-confirm .ant-modal-close {
+  display: none;
+}
+.ant-confirm .ant-modal-body {
+  padding: 32px 32px 24px;
+}
+.ant-confirm-body-wrapper {
+  zoom: 1;
+}
+.ant-confirm-body-wrapper:before,
+.ant-confirm-body-wrapper:after {
+  content: " ";
+  display: table;
+}
+.ant-confirm-body-wrapper:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-confirm-body-wrapper:before,
+.ant-confirm-body-wrapper:after {
+  content: " ";
+  display: table;
+}
+.ant-confirm-body-wrapper:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-confirm-body .ant-confirm-title {
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+}
+.ant-confirm-body .ant-confirm-content {
+  margin-left: 38px;
+  font-size: 14px;
+  color: #54657e;
+  margin-top: 8px;
+}
+.ant-confirm-body > .anticon {
+  font-size: 22px;
+  margin-right: 16px;
+  float: left;
+  min-height: 48px;
+}
+.ant-confirm .ant-confirm-btns {
+  margin-top: 24px;
+  float: right;
+}
+.ant-confirm .ant-confirm-btns button + button {
+  margin-left: 8px;
+  margin-bottom: 0;
+}
+.ant-confirm-error .ant-confirm-body > .anticon {
+  color: #f5222d;
+}
+.ant-confirm-warning .ant-confirm-body > .anticon,
+.ant-confirm-confirm .ant-confirm-body > .anticon {
+  color: #faad14;
+}
+.ant-confirm-info .ant-confirm-body > .anticon {
+  color: #1890ff;
+}
+.ant-confirm-success .ant-confirm-body > .anticon {
+  color: #52c41a;
+}
+.ant-notification {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: fixed;
+  z-index: 1010;
+  width: 384px;
+  max-width: calc(100vw - 32px);
+  margin-right: 24px;
+}
+.ant-notification-topLeft,
+.ant-notification-bottomLeft {
+  margin-left: 24px;
+  margin-right: 0;
+}
+.ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
+.ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-fade-appear-active {
+  animation-name: NotificationLeftFadeIn;
+}
+.ant-notification-notice {
+  padding: 16px 24px;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fff;
+  line-height: 1.5;
+  position: relative;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.ant-notification-notice-message {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 8px;
+  line-height: 24px;
+  display: inline-block;
+}
+.ant-notification-notice-message-single-line-auto-margin {
+  width: calc(384px - 24px * 2 - 24px - 48px - 100%);
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  max-width: 4px;
+}
+.ant-notification-notice-message-single-line-auto-margin:before {
+  content: '';
+  display: block;
+  padding-bottom: 100%;
+}
+.ant-notification-notice-description {
+  font-size: 14px;
+}
+.ant-notification-notice-closable .ant-notification-notice-message {
+  padding-right: 24px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-message {
+  font-size: 16px;
+  margin-left: 48px;
+  margin-bottom: 4px;
+}
+.ant-notification-notice-with-icon .ant-notification-notice-description {
+  margin-left: 48px;
+  font-size: 14px;
+}
+.ant-notification-notice-icon {
+  position: absolute;
+  font-size: 24px;
+  line-height: 24px;
+  margin-left: 4px;
+}
+.ant-notification-notice-icon-success {
+  color: #52c41a;
+}
+.ant-notification-notice-icon-info {
+  color: #1890ff;
+}
+.ant-notification-notice-icon-warning {
+  color: #faad14;
+}
+.ant-notification-notice-icon-error {
+  color: #f5222d;
+}
+.ant-notification-notice-close-x:after {
+  font-size: 14px;
+  content: "\e633";
+  font-family: "anticon";
+  cursor: pointer;
+}
+.ant-notification-notice-close {
+  position: absolute;
+  right: 22px;
+  top: 16px;
+  color: rgba(0, 0, 0, 0.45);
+  outline: none;
+}
+a.ant-notification-notice-close:focus {
+  text-decoration: none;
+}
+.ant-notification-notice-close:hover {
+  color: #404040;
+}
+.ant-notification-notice-btn {
+  float: right;
+  margin-top: 16px;
+}
+.ant-notification .notification-fade-effect {
+  animation-duration: 0.24s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-notification-fade-enter,
+.ant-notification-fade-appear {
+  opacity: 0;
+  animation-duration: 0.24s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation-play-state: paused;
+}
+.ant-notification-fade-leave {
+  animation-duration: 0.24s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation-duration: 0.2s;
+  animation-play-state: paused;
+}
+.ant-notification-fade-enter.ant-notification-fade-enter-active,
+.ant-notification-fade-appear.ant-notification-fade-appear-active {
+  animation-name: NotificationFadeIn;
+  animation-play-state: running;
+}
+.ant-notification-fade-leave.ant-notification-fade-leave-active {
+  animation-name: NotificationFadeOut;
+  animation-play-state: running;
+}
+@keyframes NotificationFadeIn {
+  0% {
+    opacity: 0;
+    left: 384px;
+  }
+  100% {
+    left: 0;
+    opacity: 1;
+  }
+}
+@keyframes NotificationLeftFadeIn {
+  0% {
+    opacity: 0;
+    right: 384px;
+  }
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}
+@keyframes NotificationFadeOut {
+  0% {
+    opacity: 1;
+    margin-bottom: 16px;
+    padding-top: 16px 24px;
+    padding-bottom: 16px 24px;
+    max-height: 150px;
+  }
+  100% {
+    opacity: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    max-height: 0;
+  }
+}
+.ant-pagination {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-pagination ul,
+.ant-pagination ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-pagination:after {
+  content: " ";
+  display: block;
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ant-pagination-total-text {
+  display: inline-block;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 30px;
+  margin-right: 8px;
+}
+.ant-pagination-item {
+  cursor: pointer;
+  border-radius: 4px;
+  user-select: none;
+  min-width: 32px;
+  height: 32px;
+  line-height: 30px;
+  text-align: center;
+  list-style: none;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid #d9d9d9;
+  background-color: #fff;
+  margin-right: 8px;
+  font-family: Arial;
+  outline: 0;
+}
+.ant-pagination-item a {
+  text-decoration: none;
+  color: #54657e;
+  transition: none;
+  margin: 0 6px;
+}
+.ant-pagination-item:focus,
+.ant-pagination-item:hover {
+  transition: all .3s;
+  border-color: #1890ff;
+}
+.ant-pagination-item:focus a,
+.ant-pagination-item:hover a {
+  color: #1890ff;
+}
+.ant-pagination-item-active {
+  border-color: #1890ff;
+  font-weight: 500;
+}
+.ant-pagination-item-active a {
+  color: #1890ff;
+}
+.ant-pagination-item-active:focus,
+.ant-pagination-item-active:hover {
+  border-color: #40a9ff;
+}
+.ant-pagination-item-active:focus a,
+.ant-pagination-item-active:hover a {
+  color: #40a9ff;
+}
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+  outline: 0;
+}
+.ant-pagination-jump-prev:after,
+.ant-pagination-jump-next:after {
+  content: "•••";
+  display: block;
+  letter-spacing: 2px;
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+}
+.ant-pagination-jump-prev:focus:after,
+.ant-pagination-jump-next:focus:after,
+.ant-pagination-jump-prev:hover:after,
+.ant-pagination-jump-next:hover:after {
+  color: #1890ff;
+  display: inline-block;
+  font-size: 12px;
+  font-size: 8px \9;
+  transform: scale(0.66666667) rotate(0deg);
+  letter-spacing: -1px;
+  font-family: "anticon";
+}
+:root .ant-pagination-jump-prev:focus:after,
+:root .ant-pagination-jump-next:focus:after,
+:root .ant-pagination-jump-prev:hover:after,
+:root .ant-pagination-jump-next:hover:after {
+  font-size: 12px;
+}
+.ant-pagination-jump-prev:focus:after,
+.ant-pagination-jump-prev:hover:after {
+  content: "\e620\e620";
+}
+.ant-pagination-jump-next:focus:after,
+.ant-pagination-jump-next:hover:after {
+  content: "\e61f\e61f";
+}
+.ant-pagination-prev,
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+  margin-right: 8px;
+}
+.ant-pagination-prev,
+.ant-pagination-next,
+.ant-pagination-jump-prev,
+.ant-pagination-jump-next {
+  font-family: Arial;
+  cursor: pointer;
+  color: #54657e;
+  border-radius: 4px;
+  list-style: none;
+  min-width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  transition: all .3s;
+  display: inline-block;
+  vertical-align: middle;
+}
+.ant-pagination-prev,
+.ant-pagination-next {
+  outline: 0;
+}
+.ant-pagination-prev a,
+.ant-pagination-next a {
+  color: #54657e;
+  user-select: none;
+}
+.ant-pagination-prev:hover a,
+.ant-pagination-next:hover a {
+  border-color: #40a9ff;
+}
+.ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-next .ant-pagination-item-link {
+  border: 1px solid #d9d9d9;
+  background-color: #fff;
+  border-radius: 4px;
+  outline: none;
+  display: block;
+  transition: all .3s;
+}
+.ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination-next .ant-pagination-item-link:after {
+  font-size: 12px;
+  display: block;
+  height: 30px;
+  font-family: "anticon";
+  text-align: center;
+  font-weight: 500;
+}
+.ant-pagination-prev:focus .ant-pagination-item-link,
+.ant-pagination-next:focus .ant-pagination-item-link,
+.ant-pagination-prev:hover .ant-pagination-item-link,
+.ant-pagination-next:hover .ant-pagination-item-link {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+.ant-pagination-prev .ant-pagination-item-link:after {
+  content: "\e620";
+  display: block;
+}
+.ant-pagination-next .ant-pagination-item-link:after {
+  content: "\e61f";
+  display: block;
+}
+.ant-pagination-disabled,
+.ant-pagination-disabled:hover,
+.ant-pagination-disabled:focus {
+  cursor: not-allowed;
+}
+.ant-pagination-disabled a,
+.ant-pagination-disabled:hover a,
+.ant-pagination-disabled:focus a,
+.ant-pagination-disabled .ant-pagination-item-link,
+.ant-pagination-disabled:hover .ant-pagination-item-link,
+.ant-pagination-disabled:focus .ant-pagination-item-link {
+  border-color: #d9d9d9;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-pagination-slash {
+  margin: 0 10px 0 5px;
+}
+.ant-pagination-options {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 16px;
+}
+.ant-pagination-options-size-changer.ant-select {
+  display: inline-block;
+  margin-right: 8px;
+}
+.ant-pagination-options-quick-jumper {
+  display: inline-block;
+  vertical-align: top;
+  height: 32px;
+  line-height: 32px;
+}
+.ant-pagination-options-quick-jumper input {
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+  margin: 0 8px;
+  width: 50px;
+}
+.ant-pagination-options-quick-jumper input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-pagination-options-quick-jumper input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-pagination-options-quick-jumper input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-pagination-options-quick-jumper input:hover {
+  border-color: #40a9ff;
+}
+.ant-pagination-options-quick-jumper input:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-pagination-options-quick-jumper input-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-pagination-options-quick-jumper input-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-pagination-options-quick-jumper input {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-pagination-options-quick-jumper input-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-pagination-options-quick-jumper input-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-pagination-simple .ant-pagination-prev,
+.ant-pagination-simple .ant-pagination-next {
+  height: 24px;
+  line-height: 24px;
+  vertical-align: top;
+}
+.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link {
+  border: 0;
+  height: 24px;
+}
+.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link:after {
+  height: 24px;
+  line-height: 24px;
+}
+.ant-pagination-simple .ant-pagination-simple-pager {
+  display: inline-block;
+  margin-right: 8px;
+  height: 24px;
+}
+.ant-pagination-simple .ant-pagination-simple-pager input {
+  margin-right: 8px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  outline: none;
+  padding: 0 6px;
+  height: 100%;
+  text-align: center;
+  transition: border-color 0.3s;
+}
+.ant-pagination-simple .ant-pagination-simple-pager input:hover {
+  border-color: #1890ff;
+}
+.ant-pagination.mini .ant-pagination-total-text,
+.ant-pagination.mini .ant-pagination-simple-pager {
+  height: 24px;
+  line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-item {
+  margin: 0;
+  min-width: 24px;
+  height: 24px;
+  line-height: 22px;
+}
+.ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) {
+  background: transparent;
+  border-color: transparent;
+}
+.ant-pagination.mini .ant-pagination-prev,
+.ant-pagination.mini .ant-pagination-next {
+  margin: 0;
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link,
+.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link {
+  border-color: transparent;
+  background: transparent;
+}
+.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link:after,
+.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link:after {
+  height: 24px;
+  line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-jump-prev,
+.ant-pagination.mini .ant-pagination-jump-next {
+  height: 24px;
+  line-height: 24px;
+  margin-right: 0;
+}
+.ant-pagination.mini .ant-pagination-options {
+  margin-left: 2px;
+}
+.ant-pagination.mini .ant-pagination-options-quick-jumper {
+  height: 24px;
+  line-height: 24px;
+}
+.ant-pagination.mini .ant-pagination-options-quick-jumper input {
+  padding: 1px 7px;
+  height: 24px;
+  width: 44px;
+}
+@media only screen and (max-width: 992px) {
+  .ant-pagination-item-after-jump-prev,
+  .ant-pagination-item-before-jump-next {
+    display: none;
+  }
+}
+@media only screen and (max-width: 576px) {
+  .ant-pagination-options {
+    display: none;
+  }
+}
+.ant-popover {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1030;
+  cursor: auto;
+  user-select: text;
+  white-space: normal;
+  font-weight: normal;
+  text-align: left;
+}
+.ant-popover:after {
+  content: "";
+  position: absolute;
+  background: rgba(255, 255, 255, 0.01);
+}
+.ant-popover-hidden {
+  display: none;
+}
+.ant-popover-placement-top,
+.ant-popover-placement-topLeft,
+.ant-popover-placement-topRight {
+  padding-bottom: 9px;
+}
+.ant-popover-placement-right,
+.ant-popover-placement-rightTop,
+.ant-popover-placement-rightBottom {
+  padding-left: 9px;
+}
+.ant-popover-placement-bottom,
+.ant-popover-placement-bottomLeft,
+.ant-popover-placement-bottomRight {
+  padding-top: 9px;
+}
+.ant-popover-placement-left,
+.ant-popover-placement-leftTop,
+.ant-popover-placement-leftBottom {
+  padding-right: 9px;
+}
+.ant-popover-inner {
+  background-color: #fff;
+  background-clip: padding-box;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-popover-title {
+  min-width: 177px;
+  margin: 0;
+  padding: 5px 16px 4px;
+  min-height: 32px;
+  border-bottom: 1px solid #e8e8e8;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+}
+.ant-popover-inner-content {
+  padding: 12px 16px;
+  color: #54657e;
+}
+.ant-popover-message {
+  padding: 4px 0 12px;
+  font-size: 14px;
+  color: #54657e;
+}
+.ant-popover-message > .anticon {
+  color: #faad14;
+  line-height: 1.6;
+  position: absolute;
+}
+.ant-popover-message-title {
+  padding-left: 22px;
+}
+.ant-popover-buttons {
+  text-align: right;
+  margin-bottom: 4px;
+}
+.ant-popover-buttons button {
+  margin-left: 8px;
+}
+.ant-popover-arrow {
+  background: #fff;
+  width: 7.07106781px;
+  height: 7.07106781px;
+  transform: rotate(45deg);
+  position: absolute;
+  display: block;
+  border-color: transparent;
+  border-style: solid;
+}
+.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
+  bottom: 6px;
+  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
+  left: 6px;
+  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
+  top: 6px;
+  box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.06);
+}
+.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow {
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow,
+.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
+  right: 6px;
+  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+}
+.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-progress {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+}
+.ant-progress-line {
+  width: 100%;
+  font-size: 14px;
+  position: relative;
+}
+.ant-progress-small.ant-progress-line,
+.ant-progress-small.ant-progress-line .ant-progress-text .anticon {
+  font-size: 12px;
+}
+.ant-progress-outer {
+  display: inline-block;
+  width: 100%;
+  margin-right: 0;
+  padding-right: 0;
+}
+.ant-progress-show-info .ant-progress-outer {
+  padding-right: calc(2em + 8px);
+  margin-right: calc(-2em - 8px);
+}
+.ant-progress-inner {
+  display: inline-block;
+  width: 100%;
+  background-color: #f5f5f5;
+  border-radius: 100px;
+  vertical-align: middle;
+  position: relative;
+}
+.ant-progress-circle-trail {
+  stroke: #f5f5f5;
+}
+.ant-progress-circle-path {
+  stroke: #1890ff;
+  animation: ant-progress-appear 0.3s;
+}
+.ant-progress-success-bg,
+.ant-progress-bg {
+  border-radius: 100px;
+  background-color: #1890ff;
+  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+  position: relative;
+}
+.ant-progress-success-bg {
+  background-color: #52c41a;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.ant-progress-text {
+  word-break: normal;
+  width: 2em;
+  text-align: left;
+  font-size: 1em;
+  margin-left: 8px;
+  vertical-align: middle;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1;
+}
+.ant-progress-text .anticon {
+  font-size: 14px;
+}
+.ant-progress-status-active .ant-progress-bg:before {
+  content: "";
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 10px;
+  animation: ant-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+}
+.ant-progress-status-exception .ant-progress-bg {
+  background-color: #f5222d;
+}
+.ant-progress-status-exception .ant-progress-text {
+  color: #f5222d;
+}
+.ant-progress-status-exception .ant-progress-circle-path {
+  stroke: #f5222d;
+}
+.ant-progress-status-success .ant-progress-bg {
+  background-color: #52c41a;
+}
+.ant-progress-status-success .ant-progress-text {
+  color: #52c41a;
+}
+.ant-progress-status-success .ant-progress-circle-path {
+  stroke: #52c41a;
+}
+.ant-progress-circle .ant-progress-inner {
+  position: relative;
+  line-height: 1;
+  background-color: transparent;
+}
+.ant-progress-circle .ant-progress-text {
+  display: block;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  line-height: 1;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  margin: 0;
+  color: #54657e;
+}
+.ant-progress-circle .ant-progress-text .anticon {
+  font-size: 1.16666667em;
+}
+.ant-progress-circle.ant-progress-status-exception .ant-progress-text {
+  color: #f5222d;
+}
+.ant-progress-circle.ant-progress-status-success .ant-progress-text {
+  color: #52c41a;
+}
+@keyframes ant-progress-active {
+  0% {
+    opacity: 0.1;
+    width: 0;
+  }
+  20% {
+    opacity: 0.5;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+.ant-radio-group {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  line-height: unset;
+}
+.ant-radio-wrapper {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  margin-right: 8px;
+  cursor: pointer;
+}
+.ant-radio {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+  outline: none;
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+  vertical-align: text-bottom;
+  cursor: pointer;
+}
+.ant-radio-wrapper:hover .ant-radio .ant-radio-inner,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-focused .ant-radio-inner {
+  border-color: #1890ff;
+}
+.ant-radio-checked:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid #1890ff;
+  content: '';
+  animation: antRadioEffect 0.36s ease-in-out;
+  animation-fill-mode: both;
+  visibility: hidden;
+}
+.ant-radio:hover:after,
+.ant-radio-wrapper:hover .ant-radio:after {
+  visibility: visible;
+}
+.ant-radio-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 100px;
+  border-color: #d9d9d9;
+  background-color: #fff;
+  transition: all 0.3s;
+}
+.ant-radio-inner:after {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: 3px;
+  top: 3px;
+  border-radius: 4px;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  background-color: #1890ff;
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-radio-input {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.ant-radio-checked .ant-radio-inner {
+  border-color: #1890ff;
+}
+.ant-radio-checked .ant-radio-inner:after {
+  transform: scale(0.875);
+  opacity: 1;
+  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-radio-disabled .ant-radio-inner {
+  border-color: #d9d9d9 !important;
+  background-color: #f5f5f5;
+}
+.ant-radio-disabled .ant-radio-inner:after {
+  background-color: #ccc;
+}
+.ant-radio-disabled .ant-radio-input {
+  cursor: not-allowed;
+}
+.ant-radio-disabled + span {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+span.ant-radio + * {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ant-radio-button-wrapper {
+  margin: 0;
+  height: 32px;
+  line-height: 30px;
+  color: #54657e;
+  display: inline-block;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  border-left: 0;
+  border-top-width: 1.02px;
+  background: #fff;
+  padding: 0 15px;
+  position: relative;
+}
+.ant-radio-button-wrapper a {
+  color: #54657e;
+}
+.ant-radio-button-wrapper > .ant-radio-button {
+  margin-left: 0;
+  display: block;
+  width: 0;
+  height: 0;
+}
+.ant-radio-group-large .ant-radio-button-wrapper {
+  height: 40px;
+  line-height: 38px;
+  font-size: 16px;
+}
+.ant-radio-group-small .ant-radio-button-wrapper {
+  height: 24px;
+  line-height: 22px;
+  padding: 0 7px;
+}
+.ant-radio-button-wrapper:not(:first-child)::before {
+  content: "";
+  display: block;
+  top: 0;
+  left: -1px;
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  background-color: #d9d9d9;
+}
+.ant-radio-button-wrapper:first-child {
+  border-radius: 4px 0 0 4px;
+  border-left: 1px solid #d9d9d9;
+}
+.ant-radio-button-wrapper:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.ant-radio-button-wrapper:first-child:last-child {
+  border-radius: 4px;
+}
+.ant-radio-button-wrapper:hover,
+.ant-radio-button-wrapper-focused {
+  color: #1890ff;
+  position: relative;
+}
+.ant-radio-button-wrapper .ant-radio-inner,
+.ant-radio-button-wrapper input[type="checkbox"],
+.ant-radio-button-wrapper input[type="radio"] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ant-radio-button-wrapper-checked {
+  background: #fff;
+  border-color: #1890ff;
+  color: #1890ff;
+  box-shadow: -1px 0 0 0 #1890ff;
+  z-index: 1;
+}
+.ant-radio-button-wrapper-checked::before {
+  background-color: #1890ff !important;
+  opacity: 0.1;
+}
+.ant-radio-button-wrapper-checked:first-child {
+  border-color: #1890ff;
+  box-shadow: none !important;
+}
+.ant-radio-button-wrapper-checked:hover {
+  border-color: #40a9ff;
+  box-shadow: -1px 0 0 0 #40a9ff;
+  color: #40a9ff;
+}
+.ant-radio-button-wrapper-checked:active {
+  border-color: #096dd9;
+  box-shadow: -1px 0 0 0 #096dd9;
+  color: #096dd9;
+}
+.ant-radio-button-wrapper-disabled {
+  border-color: #d9d9d9;
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+  border-color: #d9d9d9;
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-radio-button-wrapper-disabled:first-child {
+  border-left-color: #d9d9d9;
+}
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  color: #fff;
+  background-color: #e6e6e6;
+  border-color: #d9d9d9;
+  box-shadow: none;
+}
+@keyframes antRadioEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+.ant-rate {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  line-height: unset;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 20px;
+  display: inline-block;
+  color: #fadb14;
+  outline: none;
+}
+.ant-rate-disabled .ant-rate-star {
+  cursor: not-allowed;
+}
+.ant-rate-disabled .ant-rate-star:hover {
+  transform: scale(1);
+}
+.ant-rate-star {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  margin-right: 8px;
+  position: relative;
+  transition: all .3s;
+  color: inherit;
+  cursor: pointer;
+}
+.ant-rate-star-first,
+.ant-rate-star-second {
+  user-select: none;
+  transition: all .3s;
+  color: #e8e8e8;
+}
+.ant-rate-star-focused,
+.ant-rate-star:hover {
+  transform: scale(1.1);
+}
+.ant-rate-star-first {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  opacity: 0;
+}
+.ant-rate-star-half .ant-rate-star-first,
+.ant-rate-star-half .ant-rate-star-second {
+  opacity: 1;
+}
+.ant-rate-star-half .ant-rate-star-first,
+.ant-rate-star-full .ant-rate-star-second {
+  color: inherit;
+}
+.ant-rate-text {
+  margin-left: 8px;
+  display: inline-block;
+  font-size: 14px;
+}
+.ant-select {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  position: relative;
+}
+.ant-select ul,
+.ant-select ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ant-select > ul > li > a {
+  padding: 0;
+  background-color: #fff;
+}
+.ant-select-arrow {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  line-height: 1;
+  margin-top: -6px;
+  transform-origin: 50% 50%;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 12px;
+}
+.ant-select-arrow:before {
+  display: block;
+  font-family: "anticon" !important;
+}
+.ant-select-arrow * {
+  display: none;
+}
+.ant-select-arrow:before {
+  content: '\e61d';
+  transition: transform .3s;
+}
+.ant-select-selection {
+  outline: none;
+  user-select: none;
+  box-sizing: border-box;
+  display: block;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  border-top-width: 1.02px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-select-selection:hover {
+  border-color: #40a9ff;
+}
+.ant-select-focused .ant-select-selection,
+.ant-select-selection:focus,
+.ant-select-selection:active {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-select-selection__clear {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  opacity: 0;
+  position: absolute;
+  right: 11px;
+  z-index: 1;
+  background: #fff;
+  top: 50%;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease, opacity 0.15s ease;
+}
+.ant-select-selection__clear:before {
+  display: block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e62e";
+}
+.ant-select-selection__clear:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-select-selection:hover .ant-select-selection__clear {
+  opacity: 1;
+}
+.ant-select-selection-selected-value {
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  padding-right: 20px;
+}
+.ant-select-disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-select-disabled .ant-select-selection {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+.ant-select-disabled .ant-select-selection:hover,
+.ant-select-disabled .ant-select-selection:focus,
+.ant-select-disabled .ant-select-selection:active {
+  border-color: #d9d9d9;
+  box-shadow: none;
+}
+.ant-select-disabled .ant-select-selection__clear {
+  display: none;
+  visibility: hidden;
+  pointer-events: none;
+}
+.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice {
+  background: #f5f5f5;
+  color: #aaa;
+  padding-right: 10px;
+}
+.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice__remove {
+  display: none;
+}
+.ant-select-selection--single {
+  height: 32px;
+  position: relative;
+  cursor: pointer;
+}
+.ant-select-selection__rendered {
+  display: block;
+  margin-left: 11px;
+  margin-right: 11px;
+  position: relative;
+  line-height: 30px;
+}
+.ant-select-selection__rendered:after {
+  content: '.';
+  visibility: hidden;
+  pointer-events: none;
+  display: inline-block;
+  width: 0;
+}
+.ant-select-lg {
+  font-size: 16px;
+}
+.ant-select-lg .ant-select-selection--single {
+  height: 40px;
+}
+.ant-select-lg .ant-select-selection__rendered {
+  line-height: 38px;
+}
+.ant-select-lg .ant-select-selection--multiple {
+  min-height: 40px;
+}
+.ant-select-lg .ant-select-selection--multiple .ant-select-selection__rendered li {
+  height: 32px;
+  line-height: 32px;
+}
+.ant-select-lg .ant-select-selection--multiple .ant-select-selection__clear {
+  top: 20px;
+}
+.ant-select-sm .ant-select-selection--single {
+  height: 24px;
+}
+.ant-select-sm .ant-select-selection__rendered {
+  line-height: 22px;
+  margin: 0 7px;
+}
+.ant-select-sm .ant-select-selection--multiple {
+  min-height: 24px;
+}
+.ant-select-sm .ant-select-selection--multiple .ant-select-selection__rendered li {
+  height: 16px;
+  line-height: 14px;
+}
+.ant-select-sm .ant-select-selection--multiple .ant-select-selection__clear {
+  top: 12px;
+}
+.ant-select-sm .ant-select-selection__clear,
+.ant-select-sm .ant-select-arrow {
+  right: 8px;
+}
+.ant-select-disabled .ant-select-selection__choice__remove {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: default;
+}
+.ant-select-disabled .ant-select-selection__choice__remove:hover {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-select-search__field__wrap {
+  display: inline-block;
+  position: relative;
+}
+.ant-select-selection__placeholder,
+.ant-select-search__field__placeholder {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 9px;
+  color: #bfbfbf;
+  line-height: 20px;
+  height: 20px;
+  max-width: 100%;
+  margin-top: -10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.ant-select-search__field__placeholder {
+  left: 12px;
+}
+.ant-select-search__field__mirror {
+  position: absolute;
+  top: 0;
+  left: -9999px;
+  white-space: pre;
+  pointer-events: none;
+}
+.ant-select-search--inline {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.ant-select-search--inline .ant-select-search__field__wrap {
+  width: 100%;
+  height: 100%;
+}
+.ant-select-search--inline .ant-select-search__field {
+  border-width: 0;
+  font-size: 100%;
+  height: 100%;
+  width: 100%;
+  background: transparent;
+  outline: 0;
+  border-radius: 4px;
+  line-height: 1;
+}
+.ant-select-search--inline > i {
+  float: right;
+}
+.ant-select-selection--multiple {
+  min-height: 32px;
+  cursor: text;
+  padding-bottom: 3px;
+  zoom: 1;
+}
+.ant-select-selection--multiple:before,
+.ant-select-selection--multiple:after {
+  content: " ";
+  display: table;
+}
+.ant-select-selection--multiple:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-select-selection--multiple:before,
+.ant-select-selection--multiple:after {
+  content: " ";
+  display: table;
+}
+.ant-select-selection--multiple:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-select-selection--multiple .ant-select-search--inline {
+  float: left;
+  position: static;
+  width: auto;
+  padding: 0;
+  max-width: 100%;
+}
+.ant-select-selection--multiple .ant-select-search--inline .ant-select-search__field {
+  max-width: 100%;
+  width: 0.75em;
+}
+.ant-select-selection--multiple .ant-select-selection__rendered {
+  margin-left: 5px;
+  margin-bottom: -3px;
+  height: auto;
+}
+.ant-select-selection--multiple .ant-select-selection__placeholder {
+  margin-left: 6px;
+}
+.ant-select-selection--multiple > ul > li,
+.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
+  margin-top: 3px;
+  height: 24px;
+  line-height: 22px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice {
+  color: #54657e;
+  background-color: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  cursor: default;
+  float: left;
+  margin-right: 4px;
+  max-width: 99%;
+  position: relative;
+  overflow: hidden;
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  padding: 0 20px 0 10px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__disabled {
+  padding: 0 10px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__content {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition: margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove {
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: inherit;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all .3s;
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+  position: absolute;
+  right: 4px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:before {
+  display: block;
+  font-family: "anticon" !important;
+}
+:root .ant-select-selection--multiple .ant-select-selection__choice__remove {
+  font-size: 12px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
+  color: #404040;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:before {
+  content: "\e633";
+}
+.ant-select-selection--multiple .ant-select-selection__clear {
+  top: 16px;
+}
+.ant-select-allow-clear .ant-select-selection--multiple .ant-select-selection__rendered {
+  margin-right: 20px;
+}
+.ant-select-open .ant-select-arrow:before {
+  transform: rotate(180deg);
+}
+.ant-select-open .ant-select-selection {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-select-combobox .ant-select-arrow {
+  display: none;
+}
+.ant-select-combobox .ant-select-search--inline {
+  height: 100%;
+  width: 100%;
+  float: none;
+}
+.ant-select-combobox .ant-select-search__field__wrap {
+  width: 100%;
+  height: 100%;
+}
+.ant-select-combobox .ant-select-search__field {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-shadow: none;
+}
+.ant-select-combobox.ant-select-allow-clear .ant-select-selection:hover .ant-select-selection__rendered {
+  margin-right: 20px;
+}
+.ant-select-dropdown {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  color: #54657e;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-sizing: border-box;
+  z-index: 1050;
+  left: -9999px;
+  top: -9999px;
+  position: absolute;
+  outline: none;
+  font-size: 14px;
+}
+.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft,
+.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft {
+  animation-name: antSlideUpIn;
+}
+.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft,
+.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft {
+  animation-name: antSlideDownIn;
+}
+.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft {
+  animation-name: antSlideUpOut;
+}
+.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft {
+  animation-name: antSlideDownOut;
+}
+.ant-select-dropdown-hidden {
+  display: none;
+}
+.ant-select-dropdown-menu {
+  outline: none;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  max-height: 250px;
+  overflow: auto;
+}
+.ant-select-dropdown-menu-item-group-list {
+  margin: 0;
+  padding: 0;
+}
+.ant-select-dropdown-menu-item-group-list > .ant-select-dropdown-menu-item {
+  padding-left: 20px;
+}
+.ant-select-dropdown-menu-item-group-title {
+  color: rgba(0, 0, 0, 0.45);
+  padding: 0 12px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 12px;
+}
+.ant-select-dropdown-menu-item {
+  position: relative;
+  display: block;
+  padding: 5px 12px;
+  line-height: 22px;
+  font-weight: normal;
+  color: #54657e;
+  white-space: nowrap;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background 0.3s ease;
+}
+.ant-select-dropdown-menu-item:hover {
+  background-color: #e6f7ff;
+}
+.ant-select-dropdown-menu-item:first-child {
+  border-radius: 4px 4px 0 0;
+}
+.ant-select-dropdown-menu-item:last-child {
+  border-radius: 0 0 4px 4px;
+}
+.ant-select-dropdown-menu-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-select-dropdown-menu-item-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+  cursor: not-allowed;
+}
+.ant-select-dropdown-menu-item-selected,
+.ant-select-dropdown-menu-item-selected:hover {
+  background-color: #fafafa;
+  font-weight: 600;
+  color: #54657e;
+}
+.ant-select-dropdown-menu-item-active {
+  background-color: #e6f7ff;
+}
+.ant-select-dropdown-menu-item-divider {
+  height: 1px;
+  margin: 1px 0;
+  overflow: hidden;
+  background-color: #e8e8e8;
+  line-height: 0;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:after {
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e632";
+  color: transparent;
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+  transition: all 0.2s ease;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 12px;
+  font-weight: bold;
+  text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
+}
+:root .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:after {
+  font-size: 12px;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover:after {
+  color: #ddd;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-disabled:after {
+  display: none;
+}
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:after,
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover:after {
+  color: #1890ff;
+  display: inline-block;
+}
+.ant-select-dropdown-container-open .ant-select-dropdown,
+.ant-select-dropdown-open .ant-select-dropdown {
+  display: block;
+}
+.ant-slider {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  margin: 14px 6px 10px;
+  padding: 4px 0;
+  height: 12px;
+  cursor: pointer;
+}
+.ant-slider-vertical {
+  width: 12px;
+  height: 100%;
+  margin: 6px 10px;
+  padding: 0 4px;
+}
+.ant-slider-vertical .ant-slider-rail {
+  height: 100%;
+  width: 4px;
+}
+.ant-slider-vertical .ant-slider-track {
+  width: 4px;
+}
+.ant-slider-vertical .ant-slider-handle {
+  margin-left: -5px;
+  margin-bottom: -7px;
+}
+.ant-slider-vertical .ant-slider-mark {
+  top: 0;
+  left: 12px;
+  width: 18px;
+  height: 100%;
+}
+.ant-slider-vertical .ant-slider-mark-text {
+  left: 4px;
+  white-space: nowrap;
+}
+.ant-slider-vertical .ant-slider-step {
+  width: 4px;
+  height: 100%;
+}
+.ant-slider-vertical .ant-slider-dot {
+  top: auto;
+  left: 2px;
+  margin-bottom: -4px;
+}
+.ant-slider-with-marks {
+  margin-bottom: 28px;
+}
+.ant-slider-rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+  transition: background-color 0.3s;
+}
+.ant-slider-track {
+  position: absolute;
+  height: 4px;
+  border-radius: 4px;
+  background-color: #91d5ff;
+  transition: background-color 0.3s ease;
+}
+.ant-slider-handle {
+  position: absolute;
+  margin-left: -7px;
+  margin-top: -5px;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  border-radius: 50%;
+  border: solid 2px #91d5ff;
+  background-color: #fff;
+  transition: border-color 0.3s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+.ant-slider-handle:focus {
+  border-color: #46a6ff;
+  box-shadow: 0 0 0 5px #8cc8ff;
+  outline: none;
+}
+.ant-slider-handle.ant-tooltip-open {
+  border-color: #1890ff;
+}
+.ant-slider:hover .ant-slider-rail {
+  background-color: #e1e1e1;
+}
+.ant-slider:hover .ant-slider-track {
+  background-color: #69c0ff;
+}
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+  border-color: #69c0ff;
+}
+.ant-slider-mark {
+  position: absolute;
+  top: 14px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+}
+.ant-slider-mark-text {
+  position: absolute;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-slider-mark-text-active {
+  color: #54657e;
+}
+.ant-slider-step {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+}
+.ant-slider-dot {
+  position: absolute;
+  top: -2px;
+  margin-left: -4px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid #e8e8e8;
+  background-color: #fff;
+  cursor: pointer;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+.ant-slider-dot:first-child {
+  margin-left: -4px;
+}
+.ant-slider-dot:last-child {
+  margin-left: -4px;
+}
+.ant-slider-dot-active {
+  border-color: #8cc8ff;
+}
+.ant-slider-disabled {
+  cursor: not-allowed;
+}
+.ant-slider-disabled .ant-slider-track {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+}
+.ant-slider-disabled .ant-slider-handle,
+.ant-slider-disabled .ant-slider-dot {
+  border-color: rgba(0, 0, 0, 0.25) !important;
+  background-color: #fff;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.ant-slider-disabled .ant-slider-mark-text,
+.ant-slider-disabled .ant-slider-dot {
+  cursor: not-allowed !important;
+}
+.ant-spin {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: #1890ff;
+  vertical-align: middle;
+  text-align: center;
+  opacity: 0;
+  position: absolute;
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  display: none;
+}
+.ant-spin-spinning {
+  opacity: 1;
+  position: static;
+  display: inline-block;
+}
+.ant-spin-nested-loading {
+  position: relative;
+}
+.ant-spin-nested-loading > div > .ant-spin {
+  position: absolute;
+  height: 100%;
+  max-height: 320px;
+  width: 100%;
+  z-index: 4;
+}
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px;
+}
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  padding-top: 5px;
+  text-shadow: 0 1px 2px #fff;
+}
+.ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
+  margin-top: -20px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
+  margin: -7px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
+  padding-top: 2px;
+}
+.ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
+  margin-top: -17px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
+  margin: -16px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
+  padding-top: 11px;
+}
+.ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
+  margin-top: -26px;
+}
+.ant-spin-container {
+  position: relative;
+  zoom: 1;
+}
+.ant-spin-container:before,
+.ant-spin-container:after {
+  content: " ";
+  display: table;
+}
+.ant-spin-container:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-spin-container:before,
+.ant-spin-container:after {
+  content: " ";
+  display: table;
+}
+.ant-spin-container:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-spin-blur {
+  overflow: hidden;
+  opacity: 0.7;
+  -webkit-filter: blur(0.5px);
+  filter: blur(0.5px);
+  /* autoprefixer: off */
+  filter: progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false);
+  -webkit-transform: translateZ(0);
+}
+.ant-spin-blur:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: #fff;
+  opacity: 0.3;
+  transition: all .3s;
+  z-index: 10;
+}
+.ant-spin-tip {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-spin-dot {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.ant-spin-dot i {
+  width: 9px;
+  height: 9px;
+  border-radius: 100%;
+  background-color: #1890ff;
+  transform: scale(0.75);
+  display: block;
+  position: absolute;
+  opacity: 0.3;
+  animation: antSpinMove 1s infinite linear alternate;
+  transform-origin: 50% 50%;
+}
+.ant-spin-dot i:nth-child(1) {
+  left: 0;
+  top: 0;
+}
+.ant-spin-dot i:nth-child(2) {
+  right: 0;
+  top: 0;
+  animation-delay: 0.4s;
+}
+.ant-spin-dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.ant-spin-dot i:nth-child(4) {
+  left: 0;
+  bottom: 0;
+  animation-delay: 1.2s;
+}
+.ant-spin-dot-spin {
+  transform: rotate(45deg);
+  animation: antRotate 1.2s infinite linear;
+}
+.ant-spin-sm .ant-spin-dot {
+  width: 14px;
+  height: 14px;
+}
+.ant-spin-sm .ant-spin-dot i {
+  width: 6px;
+  height: 6px;
+}
+.ant-spin-lg .ant-spin-dot {
+  width: 32px;
+  height: 32px;
+}
+.ant-spin-lg .ant-spin-dot i {
+  width: 14px;
+  height: 14px;
+}
+.ant-spin.ant-spin-show-text .ant-spin-text {
+  display: block;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+ */
+  .ant-spin-blur {
+    background: #fff;
+    opacity: 0.5;
+  }
+}
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes antRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+.ant-steps {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0;
+  width: 100%;
+  display: flex;
+}
+.ant-steps-item {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  flex: 1;
+  overflow: hidden;
+}
+.ant-steps-item:last-child {
+  flex: none;
+}
+.ant-steps-item:last-child .ant-steps-item-tail,
+.ant-steps-item:last-child .ant-steps-item-title:after {
+  display: none;
+}
+.ant-steps-item-icon,
+.ant-steps-item-content {
+  display: inline-block;
+  vertical-align: top;
+}
+.ant-steps-item-icon {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 32px;
+  font-size: 16px;
+  margin-right: 8px;
+  transition: background-color 0.3s, border-color 0.3s;
+  font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.ant-steps-item-icon > .ant-steps-icon {
+  line-height: 1;
+  top: -1px;
+  color: #1890ff;
+  position: relative;
+}
+.ant-steps-item-tail {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 12px;
+  padding: 0 10px;
+}
+.ant-steps-item-tail:after {
+  content: '';
+  display: inline-block;
+  background: #e8e8e8;
+  height: 1px;
+  border-radius: 1px;
+  width: 100%;
+  transition: background .3s;
+}
+.ant-steps-item-title {
+  font-size: 16px;
+  color: #54657e;
+  display: inline-block;
+  padding-right: 16px;
+  position: relative;
+  line-height: 32px;
+}
+.ant-steps-item-title:after {
+  content: '';
+  height: 1px;
+  width: 9999px;
+  background: #e8e8e8;
+  display: block;
+  position: absolute;
+  top: 16px;
+  left: 100%;
+}
+.ant-steps-item-description {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait .ant-steps-item-icon {
+  border-color: rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+}
+.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+  background: rgba(0, 0, 0, 0.25);
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-wait > .ant-steps-item-tail:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item-process .ant-steps-item-icon {
+  border-color: #1890ff;
+  background-color: #fff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+  color: #1890ff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+  background: #1890ff;
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-description {
+  color: #54657e;
+}
+.ant-steps-item-process > .ant-steps-item-tail:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item-process .ant-steps-item-icon {
+  background: #1890ff;
+}
+.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+  color: #fff;
+}
+.ant-steps-item-process .ant-steps-item-title {
+  font-weight: 500;
+}
+.ant-steps-item-finish .ant-steps-item-icon {
+  border-color: #1890ff;
+  background-color: #fff;
+}
+.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
+  color: #1890ff;
+}
+.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+  background: #1890ff;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title {
+  color: #54657e;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title:after {
+  background-color: #1890ff;
+}
+.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-item-finish > .ant-steps-item-tail:after {
+  background-color: #1890ff;
+}
+.ant-steps-item-error .ant-steps-item-icon {
+  border-color: #f5222d;
+  background-color: #fff;
+}
+.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon {
+  color: #f5222d;
+}
+.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
+  background: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title {
+  color: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-description {
+  color: #f5222d;
+}
+.ant-steps-item-error > .ant-steps-item-tail:after {
+  background-color: #e8e8e8;
+}
+.ant-steps-item.ant-steps-next-error .ant-steps-item-title:after {
+  background: #f5222d;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
+  margin-right: 16px;
+  white-space: nowrap;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child {
+  margin-right: 0;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child .ant-steps-item-title {
+  padding-right: 0;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-tail {
+  display: none;
+}
+.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
+  max-width: 140px;
+}
+.ant-steps-item-custom .ant-steps-item-icon {
+  background: none;
+  border: 0;
+  width: auto;
+  height: auto;
+}
+.ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
+  font-size: 24px;
+  line-height: 32px;
+  top: 0;
+  left: 0.5px;
+  width: 32px;
+  height: 32px;
+}
+.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
+  color: #1890ff;
+}
+.ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
+  margin-right: 12px;
+}
+.ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child {
+  margin-right: 0;
+}
+.ant-steps-small .ant-steps-item-icon {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 24px;
+  font-size: 12px;
+}
+.ant-steps-small .ant-steps-item-title {
+  font-size: 14px;
+  line-height: 24px;
+  padding-right: 12px;
+}
+.ant-steps-small .ant-steps-item-title:after {
+  top: 12px;
+}
+.ant-steps-small .ant-steps-item-description {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-steps-small .ant-steps-item-tail {
+  top: 8px;
+  padding: 0 8px;
+}
+.ant-steps-small .ant-steps-item-custom .ant-steps-item-icon {
+  width: inherit;
+  height: inherit;
+  line-height: inherit;
+  border-radius: 0;
+  border: 0;
+  background: none;
+}
+.ant-steps-small .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon {
+  font-size: 24px;
+  line-height: 24px;
+  transform: none;
+}
+.ant-steps-vertical {
+  display: block;
+}
+.ant-steps-vertical .ant-steps-item {
+  display: block;
+  overflow: visible;
+}
+.ant-steps-vertical .ant-steps-item-icon {
+  float: left;
+  margin-right: 16px;
+}
+.ant-steps-vertical .ant-steps-item-content {
+  min-height: 48px;
+  overflow: hidden;
+  display: block;
+}
+.ant-steps-vertical .ant-steps-item-title {
+  line-height: 32px;
+}
+.ant-steps-vertical .ant-steps-item-description {
+  padding-bottom: 12px;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail {
+  position: absolute;
+  left: 16px;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  padding: 38px 0 6px;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail:after {
+  height: 100%;
+  width: 1px;
+}
+.ant-steps-vertical > .ant-steps-item:not(:last-child) > .ant-steps-item-tail {
+  display: block;
+}
+.ant-steps-vertical > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after {
+  display: none;
+}
+.ant-steps-vertical.ant-steps-small .ant-steps-item-tail {
+  position: absolute;
+  left: 12px;
+  top: 0;
+  padding: 30px 0 6px;
+}
+.ant-steps-vertical.ant-steps-small .ant-steps-item-title {
+  line-height: 24px;
+}
+@media (max-width: 480px) {
+  .ant-steps-horizontal.ant-steps-label-horizontal {
+    display: block;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item {
+    display: block;
+    overflow: visible;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-icon {
+    float: left;
+    margin-right: 16px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-content {
+    min-height: 48px;
+    overflow: hidden;
+    display: block;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-title {
+    line-height: 32px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-description {
+    padding-bottom: 12px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail {
+    position: absolute;
+    left: 16px;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    padding: 38px 0 6px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail:after {
+    height: 100%;
+    width: 1px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item:not(:last-child) > .ant-steps-item-tail {
+    display: block;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after {
+    display: none;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-tail {
+    position: absolute;
+    left: 12px;
+    top: 0;
+    padding: 30px 0 6px;
+  }
+  .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-title {
+    line-height: 24px;
+  }
+}
+.ant-steps-label-vertical .ant-steps-item {
+  overflow: visible;
+}
+.ant-steps-label-vertical .ant-steps-item-tail {
+  padding: 0 24px;
+  margin-left: 48px;
+}
+.ant-steps-label-vertical .ant-steps-item-content {
+  display: block;
+  text-align: center;
+  margin-top: 8px;
+  width: 140px;
+}
+.ant-steps-label-vertical .ant-steps-item-icon {
+  display: inline-block;
+  margin-left: 36px;
+}
+.ant-steps-label-vertical .ant-steps-item-title {
+  padding-right: 0;
+}
+.ant-steps-label-vertical .ant-steps-item-title:after {
+  display: none;
+}
+.ant-steps-label-vertical .ant-steps-item-description {
+  text-align: left;
+}
+.ant-steps-dot .ant-steps-item-title {
+  line-height: 1.5;
+}
+.ant-steps-dot .ant-steps-item-tail {
+  width: 100%;
+  top: 2px;
+  margin: 0 0 0 70px;
+  padding: 0;
+}
+.ant-steps-dot .ant-steps-item-tail:after {
+  height: 3px;
+  width: calc(100% - 20px);
+  margin-left: 12px;
+}
+.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot {
+  left: 2px;
+}
+.ant-steps-dot .ant-steps-item-icon {
+  padding-right: 0;
+  width: 8px;
+  height: 8px;
+  line-height: 8px;
+  border: 0;
+  margin-left: 67px;
+  background: transparent;
+}
+.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot {
+  float: left;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  position: relative;
+  transition: all .3s;
+  /* expand hover area */
+}
+.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot:after {
+  content: "";
+  background: rgba(0, 0, 0, 0.001);
+  width: 60px;
+  height: 32px;
+  position: absolute;
+  top: -12px;
+  left: -26px;
+}
+.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon {
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+}
+.ant-steps-dot .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon-dot {
+  top: -1px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-icon {
+  margin-left: 0;
+  margin-top: 8px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-tail {
+  margin: 0;
+  left: -9px;
+  top: 2px;
+  padding: 22px 0 4px;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot {
+  left: 0;
+}
+.ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-icon-dot {
+  left: -2px;
+}
+.ant-switch {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: 22px;
+  min-width: 44px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 100px;
+  border: 1px solid transparent;
+  background-color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  transition: all 0.36s;
+  user-select: none;
+}
+.ant-switch-inner {
+  color: #fff;
+  font-size: 12px;
+  margin-left: 24px;
+  margin-right: 6px;
+  display: block;
+}
+.ant-switch:before,
+.ant-switch:after {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 1px;
+  top: 1px;
+  border-radius: 18px;
+  background-color: #fff;
+  content: " ";
+  cursor: pointer;
+  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-switch:after {
+  box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
+}
+.ant-switch:active:before,
+.ant-switch:active:after {
+  width: 24px;
+}
+.ant-switch:before {
+  content: "\e64d";
+  font-family: anticon;
+  animation: loadingCircle 1s infinite linear;
+  text-align: center;
+  background: transparent;
+  z-index: 1;
+  display: none;
+  font-size: 12px;
+}
+.ant-switch-loading:before {
+  display: inline-block;
+  color: #54657e;
+}
+.ant-switch-checked.ant-switch-loading:before {
+  color: #1890ff;
+}
+.ant-switch:focus {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  outline: 0;
+}
+.ant-switch:focus:hover {
+  box-shadow: none;
+}
+.ant-switch-small {
+  height: 16px;
+  min-width: 28px;
+  line-height: 14px;
+}
+.ant-switch-small .ant-switch-inner {
+  margin-left: 18px;
+  margin-right: 3px;
+  font-size: 12px;
+}
+.ant-switch-small:before,
+.ant-switch-small:after {
+  width: 12px;
+  height: 12px;
+}
+.ant-switch-small:active:before,
+.ant-switch-small:active:after {
+  width: 16px;
+}
+.ant-switch-small.ant-switch-checked:before,
+.ant-switch-small.ant-switch-checked:after {
+  left: 100%;
+  margin-left: -12.5px;
+}
+.ant-switch-small.ant-switch-checked .ant-switch-inner {
+  margin-left: 3px;
+  margin-right: 18px;
+}
+.ant-switch-small:active.ant-switch-checked:before,
+.ant-switch-small:active.ant-switch-checked:after {
+  margin-left: -16.5px;
+}
+.ant-switch-small.ant-switch-loading:before {
+  animation: AntSwitchSmallLoadingCircle 1s infinite linear;
+  font-weight: bold;
+}
+.ant-switch-checked {
+  background-color: #1890ff;
+}
+.ant-switch-checked .ant-switch-inner {
+  margin-left: 6px;
+  margin-right: 24px;
+}
+.ant-switch-checked:before,
+.ant-switch-checked:after {
+  left: 100%;
+  margin-left: -19px;
+}
+.ant-switch-checked:active:before,
+.ant-switch-checked:active:after {
+  margin-left: -25px;
+}
+.ant-switch-loading,
+.ant-switch-disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+@keyframes AntSwitchSmallLoadingCircle {
+  0% {
+    transform-origin: 50% 50%;
+    transform: rotate(0deg) scale(0.66667);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg) scale(0.66667);
+  }
+}
+.ant-table-wrapper {
+  zoom: 1;
+}
+.ant-table-wrapper:before,
+.ant-table-wrapper:after {
+  content: " ";
+  display: table;
+}
+.ant-table-wrapper:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-table-wrapper:before,
+.ant-table-wrapper:after {
+  content: " ";
+  display: table;
+}
+.ant-table-wrapper:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-table {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  border-radius: 4px 4px 0 0;
+  clear: both;
+}
+.ant-table-body {
+  transition: opacity .3s;
+}
+.ant-table table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  text-align: left;
+  border-radius: 4px 4px 0 0;
+}
+.ant-table-thead > tr > th {
+  background: #fafafa;
+  transition: background .3s ease;
+  text-align: left;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-thead > tr > th:first-child {
+  border-top-left-radius: 4px;
+}
+.ant-table-thead > tr > th:last-child {
+  border-top-right-radius: 4px;
+}
+.ant-table-thead > tr > th[colspan] {
+  text-align: center;
+  border-bottom: 0;
+}
+.ant-table-thead > tr > th .anticon-filter,
+.ant-table-thead > tr > th .ant-table-filter-icon {
+  position: relative;
+  margin-left: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.45);
+  transition: all .3s;
+  width: 14px;
+  font-weight: normal;
+  vertical-align: text-bottom;
+}
+.ant-table-thead > tr > th .anticon-filter:hover,
+.ant-table-thead > tr > th .ant-table-filter-icon:hover {
+  color: #54657e;
+}
+.ant-table-thead > tr > th .ant-table-column-sorter + .anticon-filter {
+  margin-left: 4px;
+}
+.ant-table-thead > tr > th .ant-table-filter-selected.anticon-filter {
+  color: #1890ff;
+}
+.ant-table-thead > tr > th.ant-table-column-has-filters {
+  overflow: hidden;
+}
+.ant-table-tbody > tr > td {
+  border-bottom: 1px solid #e8e8e8;
+  transition: all .3s;
+}
+.ant-table-thead > tr,
+.ant-table-tbody > tr {
+  transition: all .3s;
+}
+.ant-table-thead > tr.ant-table-row-hover > td,
+.ant-table-tbody > tr.ant-table-row-hover > td,
+.ant-table-thead > tr:hover > td,
+.ant-table-tbody > tr:hover > td {
+  background: #e6f7ff;
+}
+.ant-table-thead > tr:hover {
+  background: none;
+}
+.ant-table-footer {
+  padding: 16px 16px;
+  background: #fafafa;
+  border-radius: 0 0 4px 4px;
+  position: relative;
+  border-top: 1px solid #e8e8e8;
+}
+.ant-table-footer:before {
+  content: '';
+  height: 1px;
+  background: #fafafa;
+  position: absolute;
+  top: -1px;
+  width: 100%;
+  left: 0;
+}
+.ant-table.ant-table-bordered .ant-table-footer {
+  border: 1px solid #e8e8e8;
+}
+.ant-table-title {
+  padding: 16px 0;
+  position: relative;
+  top: 1px;
+  border-radius: 4px 4px 0 0;
+}
+.ant-table.ant-table-bordered .ant-table-title {
+  border: 1px solid #e8e8e8;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.ant-table-title + .ant-table-content {
+  position: relative;
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+}
+.ant-table-bordered .ant-table-title + .ant-table-content,
+.ant-table-bordered .ant-table-title + .ant-table-content table {
+  border-radius: 0;
+}
+.ant-table-without-column-header .ant-table-title + .ant-table-content,
+.ant-table-without-column-header table {
+  border-radius: 0;
+}
+.ant-table-tbody > tr.ant-table-row-selected td {
+  background: #fafafa;
+}
+.ant-table-thead > tr > th.ant-table-column-sort {
+  background: #f5f5f5;
+}
+.ant-table-thead > tr > th,
+.ant-table-tbody > tr > td {
+  padding: 16px 16px;
+  word-break: break-all;
+}
+.ant-table-thead > tr > th.ant-table-selection-column-custom {
+  padding-left: 16px;
+  padding-right: 0;
+}
+.ant-table-thead > tr > th.ant-table-selection-column,
+.ant-table-tbody > tr > td.ant-table-selection-column {
+  text-align: center;
+  min-width: 62px;
+  width: 62px;
+}
+.ant-table-thead > tr > th.ant-table-selection-column .ant-radio-wrapper,
+.ant-table-tbody > tr > td.ant-table-selection-column .ant-radio-wrapper {
+  margin-right: 0;
+}
+.ant-table-expand-icon-th,
+.ant-table-row-expand-icon-cell {
+  text-align: center;
+  min-width: 50px;
+  width: 50px;
+}
+.ant-table-header {
+  background: #fafafa;
+  overflow: hidden;
+}
+.ant-table-header table {
+  border-radius: 4px 4px 0 0;
+}
+.ant-table-loading {
+  position: relative;
+}
+.ant-table-loading .ant-table-body {
+  background: #fff;
+  opacity: 0.5;
+}
+.ant-table-loading .ant-table-spin-holder {
+  height: 20px;
+  line-height: 20px;
+  left: 50%;
+  top: 50%;
+  margin-left: -30px;
+  position: absolute;
+}
+.ant-table-loading .ant-table-with-pagination {
+  margin-top: -20px;
+}
+.ant-table-loading .ant-table-without-pagination {
+  margin-top: 10px;
+}
+.ant-table-column-sorter {
+  position: relative;
+  margin-left: 8px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+  text-align: center;
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-table-column-sorter-up,
+.ant-table-column-sorter-down {
+  line-height: 6px;
+  display: block;
+  width: 14px;
+  height: 6px;
+  cursor: pointer;
+  position: relative;
+}
+.ant-table-column-sorter-up:hover .anticon,
+.ant-table-column-sorter-down:hover .anticon {
+  color: #69c0ff;
+}
+.ant-table-column-sorter-up.on .anticon-caret-up,
+.ant-table-column-sorter-down.on .anticon-caret-up,
+.ant-table-column-sorter-up.on .anticon-caret-down,
+.ant-table-column-sorter-down.on .anticon-caret-down {
+  color: #1890ff;
+}
+.ant-table-column-sorter-up:after,
+.ant-table-column-sorter-down:after {
+  position: absolute;
+  content: '';
+  height: 30px;
+  width: 14px;
+  left: 0;
+}
+.ant-table-column-sorter-up:after {
+  bottom: 0;
+}
+.ant-table-column-sorter-down:after {
+  top: 0;
+}
+.ant-table-column-sorter .anticon-caret-up,
+.ant-table-column-sorter .anticon-caret-down {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 8px \9;
+  transform: scale(0.66666667) rotate(0deg);
+  line-height: 4px;
+  height: 4px;
+  transition: all .3s;
+}
+:root .ant-table-column-sorter .anticon-caret-up,
+:root .ant-table-column-sorter .anticon-caret-down {
+  font-size: 12px;
+}
+.ant-table-bordered .ant-table-header > table,
+.ant-table-bordered .ant-table-body > table,
+.ant-table-bordered .ant-table-fixed-left table,
+.ant-table-bordered .ant-table-fixed-right table {
+  border: 1px solid #e8e8e8;
+  border-right: 0;
+  border-bottom: 0;
+}
+.ant-table-bordered.ant-table-empty .ant-table-placeholder {
+  border-left: 1px solid #e8e8e8;
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-header > table {
+  border-bottom: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-body > table {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-body-inner > table {
+  border-top: 0;
+}
+.ant-table-bordered.ant-table-fixed-header .ant-table-placeholder {
+  border: 0;
+}
+.ant-table-bordered .ant-table-thead > tr > th {
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-bordered .ant-table-thead > tr > th,
+.ant-table-bordered .ant-table-tbody > tr > td {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-placeholder {
+  position: relative;
+  padding: 16px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  text-align: center;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+  z-index: 1;
+}
+.ant-table-placeholder .anticon {
+  margin-right: 4px;
+}
+.ant-table-pagination.ant-pagination {
+  margin: 16px 0;
+  float: right;
+}
+.ant-table-filter-dropdown {
+  min-width: 96px;
+  margin-left: -8px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-filter-dropdown .ant-dropdown-menu {
+  border: 0;
+  box-shadow: none;
+  border-radius: 4px 4px 0 0;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-without-submenu {
+  max-height: 400px;
+  overflow-x: hidden;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-item > label + span {
+  padding-right: 0;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-sub {
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-filter-dropdown .ant-dropdown-menu .ant-dropdown-submenu-contain-selected .ant-dropdown-menu-submenu-title:after {
+  color: #1890ff;
+  font-weight: bold;
+  text-shadow: 0 0 2px #bae7ff;
+}
+.ant-table-filter-dropdown .ant-dropdown-menu-item {
+  overflow: hidden;
+}
+.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
+.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+  border-radius: 0;
+}
+.ant-table-filter-dropdown-btns {
+  overflow: hidden;
+  padding: 7px 8px;
+  border-top: 1px solid #e8e8e8;
+}
+.ant-table-filter-dropdown-link {
+  color: #1890ff;
+}
+.ant-table-filter-dropdown-link:hover {
+  color: #40a9ff;
+}
+.ant-table-filter-dropdown-link:active {
+  color: #096dd9;
+}
+.ant-table-filter-dropdown-link.confirm {
+  float: left;
+}
+.ant-table-filter-dropdown-link.clear {
+  float: right;
+}
+.ant-table-selection-select-all-custom {
+  margin-right: 4px !important;
+}
+.ant-table-selection .anticon-down {
+  color: rgba(0, 0, 0, 0.45);
+  transition: all .3s;
+}
+.ant-table-selection-menu {
+  min-width: 96px;
+  margin-top: 5px;
+  margin-left: -30px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.ant-table-selection-menu .ant-action-down {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-table-selection-down {
+  cursor: pointer;
+  padding: 0;
+  display: inline-block;
+  line-height: 1;
+}
+.ant-table-selection-down:hover .anticon-down {
+  color: #666;
+}
+.ant-table-row-expand-icon {
+  cursor: pointer;
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  line-height: 14px;
+  border: 1px solid #e8e8e8;
+  user-select: none;
+  background: #fff;
+}
+.ant-table-row-expanded:after {
+  content: '-';
+}
+.ant-table-row-collapsed:after {
+  content: '+';
+}
+.ant-table-row-spaced {
+  visibility: hidden;
+}
+.ant-table-row-spaced:after {
+  content: '.';
+}
+.ant-table-row[class*="ant-table-row-level-0"] .ant-table-selection-column > span {
+  display: inline-block;
+}
+tr.ant-table-expanded-row,
+tr.ant-table-expanded-row:hover {
+  background: #fbfbfb;
+}
+.ant-table .ant-table-row-indent + .ant-table-row-expand-icon {
+  margin-right: 8px;
+}
+.ant-table-scroll {
+  overflow: auto;
+  overflow-x: hidden;
+}
+.ant-table-scroll table {
+  width: auto;
+  min-width: 100%;
+}
+.ant-table-body-inner {
+  height: 100%;
+}
+.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
+  position: relative;
+  background: #fff;
+}
+.ant-table-fixed-header .ant-table-body-inner {
+  overflow: scroll;
+}
+.ant-table-fixed-header .ant-table-scroll .ant-table-header {
+  overflow: scroll;
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+}
+.ant-table-fixed-left,
+.ant-table-fixed-right {
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  border-radius: 0;
+}
+.ant-table-fixed-left table,
+.ant-table-fixed-right table {
+  width: auto;
+  background: #fff;
+}
+.ant-table-fixed-header .ant-table-fixed-left .ant-table-body-outer .ant-table-fixed,
+.ant-table-fixed-header .ant-table-fixed-right .ant-table-body-outer .ant-table-fixed {
+  border-radius: 0;
+}
+.ant-table-fixed-left {
+  left: 0;
+  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
+}
+.ant-table-fixed-left .ant-table-header {
+  overflow-y: hidden;
+}
+.ant-table-fixed-left .ant-table-body-inner {
+  margin-right: -20px;
+  padding-right: 20px;
+}
+.ant-table-fixed-header .ant-table-fixed-left .ant-table-body-inner {
+  padding-right: 0;
+}
+.ant-table-fixed-left,
+.ant-table-fixed-left table {
+  border-radius: 4px 0 0 0;
+}
+.ant-table-fixed-left .ant-table-thead > tr > th:last-child {
+  border-top-right-radius: 0;
+}
+.ant-table-fixed-right {
+  right: 0;
+  box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);
+}
+.ant-table-fixed-right,
+.ant-table-fixed-right table {
+  border-radius: 0 4px 0 0;
+}
+.ant-table-fixed-right .ant-table-expanded-row {
+  color: transparent;
+  pointer-events: none;
+}
+.ant-table-fixed-right .ant-table-thead > tr > th:first-child {
+  border-top-left-radius: 0;
+}
+.ant-table.ant-table-scroll-position-left .ant-table-fixed-left {
+  box-shadow: none;
+}
+.ant-table.ant-table-scroll-position-right .ant-table-fixed-right {
+  box-shadow: none;
+}
+.ant-table-middle > .ant-table-title,
+.ant-table-middle > .ant-table-footer {
+  padding: 12px 8px;
+}
+.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
+.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
+  padding: 12px 8px;
+}
+.ant-table-small {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+.ant-table-small > .ant-table-title,
+.ant-table-small > .ant-table-footer {
+  padding: 8px 8px;
+}
+.ant-table-small > .ant-table-title {
+  border-bottom: 1px solid #e8e8e8;
+  top: 0;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table {
+  border: 0;
+  padding: 0 8px;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
+  padding: 8px 8px;
+}
+.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table,
+.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table {
+  padding: 0;
+}
+.ant-table-small > .ant-table-content .ant-table-header {
+  background: #fff;
+}
+.ant-table-small > .ant-table-content .ant-table-placeholder,
+.ant-table-small > .ant-table-content .ant-table-row:last-child td {
+  border-bottom: 0;
+}
+.ant-table-small.ant-table-bordered {
+  border-right: 0;
+}
+.ant-table-small.ant-table-bordered .ant-table-title {
+  border: 0;
+  border-bottom: 1px solid #e8e8e8;
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-content {
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-footer {
+  border: 0;
+  border-top: 1px solid #e8e8e8;
+  border-right: 1px solid #e8e8e8;
+}
+.ant-table-small.ant-table-bordered .ant-table-footer:before {
+  display: none;
+}
+.ant-table-small.ant-table-bordered .ant-table-placeholder {
+  border-left: 0;
+  border-bottom: 0;
+}
+.ant-table-small.ant-table-bordered .ant-table-thead > tr > th:last-child,
+.ant-table-small.ant-table-bordered .ant-table-tbody > tr > td:last-child {
+  border-right: none;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+  height: 40px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-ink-bar {
+  visibility: hidden;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+  margin: 0;
+  border: 1px solid #e8e8e8;
+  border-bottom: 0;
+  border-radius: 4px 4px 0 0;
+  background: #fafafa;
+  margin-right: 2px;
+  padding: 0 16px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  line-height: 38px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  background: #fff;
+  border-color: #e8e8e8;
+  color: #1890ff;
+  padding-bottom: 1px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-inactive {
+  padding: 0;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-bottom: 0;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .anticon-close {
+  color: rgba(0, 0, 0, 0.45);
+  transition: all .3s;
+  font-size: 12px;
+  margin-left: 3px;
+  margin-right: -5px;
+  overflow: hidden;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  height: 14px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .anticon-close:hover {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-tabs.ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane,
+.ant-tabs.ant-tabs-editable-card .ant-tabs-content > .ant-tabs-tabpane {
+  transition: none !important;
+}
+.ant-tabs.ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs.ant-tabs-editable-card .ant-tabs-content > .ant-tabs-tabpane-inactive {
+  overflow: hidden;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:hover .anticon-close {
+  opacity: 1;
+}
+.ant-tabs-extra-content {
+  line-height: 40px;
+}
+.ant-tabs-extra-content .ant-tabs-new-tab {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 2px;
+  border: 1px solid #e8e8e8;
+  font-size: 12px;
+  color: #54657e;
+  transition: all .3s;
+}
+.ant-tabs-extra-content .ant-tabs-new-tab:hover {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+  height: auto;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 8px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  padding-bottom: 4px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-child {
+  margin-bottom: 8px;
+}
+.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-new-tab {
+  width: 90%;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-right: 0;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab {
+  border-right: 0;
+  border-radius: 4px 0 0 4px;
+  margin-right: 1px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab-active {
+  margin-right: -1px;
+  padding-right: 18px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-left: 0;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-tab {
+  border-left: 0;
+  border-radius: 0 4px 4px 0;
+  margin-left: 1px;
+}
+.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-tab-active {
+  margin-left: -1px;
+  padding-left: 18px;
+}
+.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab {
+  border-bottom: 1px solid #e8e8e8;
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+}
+.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab-active {
+  color: #1890ff;
+  padding-bottom: 0;
+  padding-top: 1px;
+}
+.ant-tabs {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  overflow: hidden;
+  zoom: 1;
+}
+.ant-tabs:before,
+.ant-tabs:after {
+  content: " ";
+  display: table;
+}
+.ant-tabs:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-tabs:before,
+.ant-tabs:after {
+  content: " ";
+  display: table;
+}
+.ant-tabs:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-tabs-ink-bar {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 1px;
+  box-sizing: border-box;
+  height: 2px;
+  background-color: #1890ff;
+  transform-origin: 0 0;
+}
+.ant-tabs-bar {
+  border-bottom: 1px solid #e8e8e8;
+  margin: 0 0 16px 0;
+  outline: none;
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-nav-container {
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  position: relative;
+  white-space: nowrap;
+  margin-bottom: -1px;
+  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  zoom: 1;
+}
+.ant-tabs-nav-container:before,
+.ant-tabs-nav-container:after {
+  content: " ";
+  display: table;
+}
+.ant-tabs-nav-container:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-tabs-nav-container:before,
+.ant-tabs-nav-container:after {
+  content: " ";
+  display: table;
+}
+.ant-tabs-nav-container:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-tabs-nav-container-scrolling {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.ant-tabs-bottom .ant-tabs-bar {
+  border-bottom: none;
+  border-top: 1px solid #e8e8e8;
+}
+.ant-tabs-bottom .ant-tabs-ink-bar {
+  bottom: auto;
+  top: 1px;
+}
+.ant-tabs-bottom .ant-tabs-nav-container {
+  margin-bottom: 0;
+  margin-top: -1px;
+}
+.ant-tabs-tab-prev,
+.ant-tabs-tab-next {
+  user-select: none;
+  z-index: 2;
+  width: 0;
+  height: 100%;
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  position: absolute;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  opacity: 0;
+  pointer-events: none;
+}
+.ant-tabs-tab-prev.ant-tabs-tab-arrow-show,
+.ant-tabs-tab-next.ant-tabs-tab-arrow-show {
+  opacity: 1;
+  width: 32px;
+  height: 100%;
+  pointer-events: auto;
+}
+.ant-tabs-tab-prev:hover,
+.ant-tabs-tab-next:hover {
+  color: #54657e;
+}
+.ant-tabs-tab-prev-icon,
+.ant-tabs-tab-next-icon {
+  font-style: normal;
+  font-weight: bold;
+  font-variant: normal;
+  line-height: inherit;
+  vertical-align: baseline;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  text-transform: none;
+}
+.ant-tabs-tab-prev-icon:before,
+.ant-tabs-tab-next-icon:before {
+  display: block;
+  font-family: "anticon" !important;
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+}
+:root .ant-tabs-tab-prev-icon:before,
+:root .ant-tabs-tab-next-icon:before {
+  font-size: 12px;
+}
+.ant-tabs-tab-btn-disabled {
+  cursor: not-allowed;
+}
+.ant-tabs-tab-btn-disabled,
+.ant-tabs-tab-btn-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-tabs-tab-next {
+  right: 2px;
+}
+.ant-tabs-tab-next-icon:before {
+  content: "\e61f";
+}
+.ant-tabs-tab-prev {
+  left: 0;
+}
+.ant-tabs-tab-prev-icon:before {
+  content: "\e620";
+}
+:root .ant-tabs-tab-prev {
+  filter: none;
+}
+.ant-tabs-nav-wrap {
+  overflow: hidden;
+  margin-bottom: -1px;
+}
+.ant-tabs-nav-scroll {
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ant-tabs-nav {
+  box-sizing: border-box;
+  padding-left: 0;
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  margin: 0;
+  list-style: none;
+  display: inline-block;
+}
+.ant-tabs-nav:before,
+.ant-tabs-nav:after {
+  display: table;
+  content: " ";
+}
+.ant-tabs-nav:after {
+  clear: both;
+}
+.ant-tabs-nav .ant-tabs-tab-disabled {
+  pointer-events: none;
+  cursor: default;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-tabs-nav .ant-tabs-tab {
+  display: inline-block;
+  height: 100%;
+  margin: 0 32px 0 0;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  position: relative;
+  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  cursor: pointer;
+  text-decoration: none;
+}
+.ant-tabs-nav .ant-tabs-tab:last-child {
+  margin-right: 0;
+}
+.ant-tabs-nav .ant-tabs-tab:hover {
+  color: #40a9ff;
+}
+.ant-tabs-nav .ant-tabs-tab:active {
+  color: #096dd9;
+}
+.ant-tabs-nav .ant-tabs-tab .anticon {
+  margin-right: 8px;
+}
+.ant-tabs-nav .ant-tabs-tab-active {
+  color: #1890ff;
+  font-weight: 500;
+}
+.ant-tabs-large .ant-tabs-nav-container {
+  font-size: 16px;
+}
+.ant-tabs-large .ant-tabs-tab {
+  padding: 16px;
+}
+.ant-tabs-small .ant-tabs-nav-container {
+  font-size: 14px;
+}
+.ant-tabs-small .ant-tabs-tab {
+  padding: 8px 16px;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content {
+  width: 100%;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane {
+  flex-shrink: 0;
+  width: 100%;
+  transition: opacity .45s;
+  opacity: 1;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane-inactive {
+  opacity: 0;
+  height: 0;
+  padding: 0 !important;
+  pointer-events: none;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content-animated {
+  display: flex;
+  flex-direction: row;
+  will-change: margin-left;
+  transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-vertical > .ant-tabs-bar {
+  border-bottom: 0;
+  height: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar-tab-prev,
+.ant-tabs-vertical > .ant-tabs-bar-tab-next {
+  width: 32px;
+  height: 0;
+  transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-vertical > .ant-tabs-bar-tab-prev.ant-tabs-tab-arrow-show,
+.ant-tabs-vertical > .ant-tabs-bar-tab-next.ant-tabs-tab-arrow-show {
+  width: 100%;
+  height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
+  float: none;
+  margin: 0 0 16px 0;
+  padding: 8px 24px;
+  display: block;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab:last-child {
+  margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-extra-content {
+  text-align: center;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-scroll {
+  width: auto;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container,
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-wrap {
+  height: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container {
+  margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-container.ant-tabs-nav-container-scrolling {
+  padding: 32px 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-bottom: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-nav {
+  width: 100%;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-ink-bar {
+  width: 2px;
+  left: auto;
+  height: auto;
+  top: 0;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-next {
+  width: 100%;
+  bottom: 0;
+  height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-next-icon:before {
+  content: "\e61d";
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-prev {
+  top: 0;
+  width: 100%;
+  height: 32px;
+}
+.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab-prev-icon:before {
+  content: "\e61e";
+}
+.ant-tabs-vertical > .ant-tabs-content {
+  overflow: hidden;
+  width: auto;
+  margin-top: 0 !important;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar {
+  float: left;
+  border-right: 1px solid #e8e8e8;
+  margin-right: -1px;
+  margin-bottom: 0;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab {
+  text-align: right;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-container {
+  margin-right: -1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-right: -1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar .ant-tabs-ink-bar {
+  right: 1px;
+}
+.ant-tabs-vertical.ant-tabs-left > .ant-tabs-content {
+  padding-left: 24px;
+  border-left: 1px solid #e8e8e8;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar {
+  float: right;
+  border-left: 1px solid #e8e8e8;
+  margin-left: -1px;
+  margin-bottom: 0;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-container {
+  margin-left: -1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-nav-wrap {
+  margin-left: -1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar .ant-tabs-ink-bar {
+  left: 1px;
+}
+.ant-tabs-vertical.ant-tabs-right > .ant-tabs-content {
+  padding-right: 24px;
+  border-right: 1px solid #e8e8e8;
+}
+.ant-tabs-bottom > .ant-tabs-bar {
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+.ant-tabs-top .ant-tabs-ink-bar-animated,
+.ant-tabs-bottom .ant-tabs-ink-bar-animated {
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.ant-tabs-left .ant-tabs-ink-bar-animated,
+.ant-tabs-right .ant-tabs-ink-bar-animated {
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.no-flex > .ant-tabs-content-animated,
+.ant-tabs-no-animation > .ant-tabs-content-animated,
+.ant-tabs-vertical > .ant-tabs-content-animated {
+  transform: none !important;
+  margin-left: 0 !important;
+}
+.no-flex > .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs-no-animation > .ant-tabs-content > .ant-tabs-tabpane-inactive,
+.ant-tabs-vertical > .ant-tabs-content > .ant-tabs-tabpane-inactive {
+  display: none;
+}
+.ant-tag {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+  line-height: 20px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  background: #fafafa;
+  font-size: 12px;
+  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  opacity: 1;
+  margin-right: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ant-tag:hover {
+  opacity: 0.85;
+}
+.ant-tag,
+.ant-tag a,
+.ant-tag a:hover {
+  color: #54657e;
+}
+.ant-tag > a:first-child:last-child {
+  display: inline-block;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+.ant-tag .anticon-cross {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+  cursor: pointer;
+  margin-left: 3px;
+  transition: all .3s;
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: bold;
+}
+:root .ant-tag .anticon-cross {
+  font-size: 12px;
+}
+.ant-tag .anticon-cross:hover {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-tag-has-color {
+  border-color: transparent;
+}
+.ant-tag-has-color,
+.ant-tag-has-color a,
+.ant-tag-has-color a:hover,
+.ant-tag-has-color .anticon-cross,
+.ant-tag-has-color .anticon-cross:hover {
+  color: #fff;
+}
+.ant-tag-checkable {
+  background-color: transparent;
+  border-color: transparent;
+}
+.ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
+  color: #1890ff;
+}
+.ant-tag-checkable:active,
+.ant-tag-checkable-checked {
+  color: #fff;
+}
+.ant-tag-checkable-checked {
+  background-color: #1890ff;
+}
+.ant-tag-checkable:active {
+  background-color: #096dd9;
+}
+.ant-tag-close {
+  width: 0 !important;
+  padding: 0;
+  margin: 0;
+}
+.ant-tag-zoom-enter,
+.ant-tag-zoom-appear {
+  animation: antFadeIn 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  animation-fill-mode: both;
+}
+.ant-tag-zoom-leave {
+  animation: antZoomOut 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  animation-fill-mode: both;
+}
+.ant-tag-pink {
+  color: #eb2f96;
+  background: #fff0f6;
+  border-color: #ffadd2;
+}
+.ant-tag-pink-inverse {
+  background: #eb2f96;
+  border-color: #eb2f96;
+  color: #fff;
+}
+.ant-tag-magenta {
+  color: #eb2f96;
+  background: #fff0f6;
+  border-color: #ffadd2;
+}
+.ant-tag-magenta-inverse {
+  background: #eb2f96;
+  border-color: #eb2f96;
+  color: #fff;
+}
+.ant-tag-red {
+  color: #f5222d;
+  background: #fff1f0;
+  border-color: #ffa39e;
+}
+.ant-tag-red-inverse {
+  background: #f5222d;
+  border-color: #f5222d;
+  color: #fff;
+}
+.ant-tag-volcano {
+  color: #fa541c;
+  background: #fff2e8;
+  border-color: #ffbb96;
+}
+.ant-tag-volcano-inverse {
+  background: #fa541c;
+  border-color: #fa541c;
+  color: #fff;
+}
+.ant-tag-orange {
+  color: #fa8c16;
+  background: #fff7e6;
+  border-color: #ffd591;
+}
+.ant-tag-orange-inverse {
+  background: #fa8c16;
+  border-color: #fa8c16;
+  color: #fff;
+}
+.ant-tag-yellow {
+  color: #fadb14;
+  background: #feffe6;
+  border-color: #fffb8f;
+}
+.ant-tag-yellow-inverse {
+  background: #fadb14;
+  border-color: #fadb14;
+  color: #fff;
+}
+.ant-tag-gold {
+  color: #faad14;
+  background: #fffbe6;
+  border-color: #ffe58f;
+}
+.ant-tag-gold-inverse {
+  background: #faad14;
+  border-color: #faad14;
+  color: #fff;
+}
+.ant-tag-cyan {
+  color: #13c2c2;
+  background: #e6fffb;
+  border-color: #87e8de;
+}
+.ant-tag-cyan-inverse {
+  background: #13c2c2;
+  border-color: #13c2c2;
+  color: #fff;
+}
+.ant-tag-lime {
+  color: #a0d911;
+  background: #fcffe6;
+  border-color: #eaff8f;
+}
+.ant-tag-lime-inverse {
+  background: #a0d911;
+  border-color: #a0d911;
+  color: #fff;
+}
+.ant-tag-green {
+  color: #52c41a;
+  background: #f6ffed;
+  border-color: #b7eb8f;
+}
+.ant-tag-green-inverse {
+  background: #52c41a;
+  border-color: #52c41a;
+  color: #fff;
+}
+.ant-tag-blue {
+  color: #1890ff;
+  background: #e6f7ff;
+  border-color: #91d5ff;
+}
+.ant-tag-blue-inverse {
+  background: #1890ff;
+  border-color: #1890ff;
+  color: #fff;
+}
+.ant-tag-geekblue {
+  color: #2f54eb;
+  background: #f0f5ff;
+  border-color: #adc6ff;
+}
+.ant-tag-geekblue-inverse {
+  background: #2f54eb;
+  border-color: #2f54eb;
+  color: #fff;
+}
+.ant-tag-purple {
+  color: #722ed1;
+  background: #f9f0ff;
+  border-color: #d3adf7;
+}
+.ant-tag-purple-inverse {
+  background: #722ed1;
+  border-color: #722ed1;
+  color: #fff;
+}
+.ant-time-picker-panel {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  z-index: 1050;
+  position: absolute;
+}
+.ant-time-picker-panel-inner {
+  position: relative;
+  outline: none;
+  list-style: none;
+  font-size: 14px;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background-clip: padding-box;
+  overflow: hidden;
+  left: -2px;
+}
+.ant-time-picker-panel-input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  cursor: auto;
+  outline: 0;
+}
+.ant-time-picker-panel-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-time-picker-panel-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-time-picker-panel-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-time-picker-panel-input-wrap {
+  box-sizing: border-box;
+  position: relative;
+  padding: 7px 2px 7px 12px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ant-time-picker-panel-input-invalid {
+  border-color: red;
+}
+.ant-time-picker-panel-clear-btn {
+  position: absolute;
+  right: 8px;
+  cursor: pointer;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  top: 7px;
+  margin: 0;
+}
+.ant-time-picker-panel-clear-btn:after {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  line-height: 1;
+  width: 20px;
+  transition: color 0.3s ease;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e62e";
+}
+.ant-time-picker-panel-clear-btn:hover:after {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-time-picker-panel-narrow .ant-time-picker-panel-input-wrap {
+  max-width: 112px;
+}
+.ant-time-picker-panel-select {
+  float: left;
+  font-size: 14px;
+  border-left: 1px solid #e8e8e8;
+  box-sizing: border-box;
+  width: 56px;
+  overflow: hidden;
+  position: relative;
+  max-height: 192px;
+}
+.ant-time-picker-panel-select:hover {
+  overflow-y: auto;
+}
+.ant-time-picker-panel-select:first-child {
+  border-left: 0;
+  margin-left: 0;
+}
+.ant-time-picker-panel-select:last-child {
+  border-right: 0;
+}
+.ant-time-picker-panel-select:only-child {
+  width: 100%;
+}
+.ant-time-picker-panel-select ul {
+  list-style: none;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 160px;
+  width: 100%;
+}
+.ant-time-picker-panel-select li {
+  list-style: none;
+  box-sizing: content-box;
+  margin: 0;
+  padding: 0 0 0 12px;
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.3s;
+}
+.ant-time-picker-panel-select li:hover {
+  background: #e6f7ff;
+}
+li.ant-time-picker-panel-select-option-selected {
+  background: #f5f5f5;
+  font-weight: bold;
+}
+li.ant-time-picker-panel-select-option-selected:hover {
+  background: #f5f5f5;
+}
+li.ant-time-picker-panel-select-option-disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+li.ant-time-picker-panel-select-option-disabled:hover {
+  background: transparent;
+  cursor: not-allowed;
+}
+.ant-time-picker-panel-combobox {
+  zoom: 1;
+}
+.ant-time-picker-panel-combobox:before,
+.ant-time-picker-panel-combobox:after {
+  content: " ";
+  display: table;
+}
+.ant-time-picker-panel-combobox:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-time-picker-panel-combobox:before,
+.ant-time-picker-panel-combobox:after {
+  content: " ";
+  display: table;
+}
+.ant-time-picker-panel-combobox:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-time-picker-panel-addon {
+  padding: 8px;
+  border-top: 1px solid #e8e8e8;
+}
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-topRight,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-enter.slide-up-enter-active.ant-time-picker-panel-placement-bottomRight,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-appear.slide-up-appear-active.ant-time-picker-panel-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-topLeft,
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-bottomLeft,
+.ant-time-picker-panel.slide-up-leave.slide-up-leave-active.ant-time-picker-panel-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.ant-time-picker {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  outline: none;
+  transition: opacity .3s;
+  width: 128px;
+}
+.ant-time-picker-input {
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  width: 100%;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all .3s;
+}
+.ant-time-picker-input::-moz-placeholder {
+  color: #bfbfbf;
+  opacity: 1;
+}
+.ant-time-picker-input:-ms-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-time-picker-input::-webkit-input-placeholder {
+  color: #bfbfbf;
+}
+.ant-time-picker-input:hover {
+  border-color: #40a9ff;
+}
+.ant-time-picker-input:focus {
+  border-color: #40a9ff;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-time-picker-input-disabled {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-time-picker-input-disabled:hover {
+  border-color: #e6d8d8;
+}
+textarea.ant-time-picker-input {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+  transition: all .3s, height 0s;
+  min-height: 32px;
+}
+.ant-time-picker-input-lg {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-time-picker-input-sm {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-time-picker-input[disabled] {
+  background-color: #f5f5f5;
+  opacity: 1;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-time-picker-input[disabled]:hover {
+  border-color: #e6d8d8;
+}
+.ant-time-picker-open {
+  opacity: 0;
+}
+.ant-time-picker-icon {
+  position: absolute;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  right: 11px;
+  color: rgba(0, 0, 0, 0.25);
+  top: 50%;
+  margin-top: -7px;
+}
+.ant-time-picker-icon:after {
+  content: "\e641";
+  font-family: "anticon";
+  color: rgba(0, 0, 0, 0.25);
+  display: block;
+  line-height: 1;
+}
+.ant-time-picker-large .ant-time-picker-input {
+  padding: 6px 11px;
+  height: 40px;
+  font-size: 16px;
+}
+.ant-time-picker-small .ant-time-picker-input {
+  padding: 1px 7px;
+  height: 24px;
+}
+.ant-time-picker-small .ant-time-picker-icon {
+  right: 7px;
+}
+.ant-timeline {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ant-timeline-item {
+  position: relative;
+  padding: 0 0 20px;
+  list-style: none;
+  margin: 0;
+  font-size: 14px;
+}
+.ant-timeline-item-tail {
+  position: absolute;
+  left: 4px;
+  top: 0.75em;
+  height: 100%;
+  border-left: 2px solid #e8e8e8;
+}
+.ant-timeline-item-pending .ant-timeline-item-head {
+  font-size: 12px;
+}
+.ant-timeline-item-pending .ant-timeline-item-tail {
+  display: none;
+}
+.ant-timeline-item-head {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  border-radius: 100px;
+  border: 2px solid transparent;
+}
+.ant-timeline-item-head-blue {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+.ant-timeline-item-head-red {
+  border-color: #f5222d;
+  color: #f5222d;
+}
+.ant-timeline-item-head-green {
+  border-color: #52c41a;
+  color: #52c41a;
+}
+.ant-timeline-item-head-custom {
+  position: absolute;
+  text-align: center;
+  line-height: 1;
+  margin-top: 0;
+  border: 0;
+  height: auto;
+  border-radius: 0;
+  padding: 3px 1px;
+  transform: translate(-50%, -50%);
+  top: 5px;
+  left: 5px;
+  width: auto;
+}
+.ant-timeline-item-content {
+  padding: 0 0 0 18px;
+  position: relative;
+  top: -6px;
+}
+.ant-timeline-item-last .ant-timeline-item-tail {
+  border-left: 2px dotted #e8e8e8;
+  display: none;
+}
+.ant-timeline-item-last .ant-timeline-item-content {
+  min-height: 48px;
+}
+.ant-timeline.ant-timeline-pending .ant-timeline-item-last .ant-timeline-item-tail {
+  display: block;
+}
+.ant-tooltip {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  z-index: 1060;
+  display: block;
+  visibility: visible;
+}
+.ant-tooltip-hidden {
+  display: none;
+}
+.ant-tooltip-placement-top,
+.ant-tooltip-placement-topLeft,
+.ant-tooltip-placement-topRight {
+  padding-bottom: 8px;
+}
+.ant-tooltip-placement-right,
+.ant-tooltip-placement-rightTop,
+.ant-tooltip-placement-rightBottom {
+  padding-left: 8px;
+}
+.ant-tooltip-placement-bottom,
+.ant-tooltip-placement-bottomLeft,
+.ant-tooltip-placement-bottomRight {
+  padding-top: 8px;
+}
+.ant-tooltip-placement-left,
+.ant-tooltip-placement-leftTop,
+.ant-tooltip-placement-leftBottom {
+  padding-right: 8px;
+}
+.ant-tooltip-inner {
+  max-width: 250px;
+  padding: 6px 8px;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  min-height: 32px;
+}
+.ant-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.ant-tooltip-placement-top .ant-tooltip-arrow,
+.ant-tooltip-placement-topLeft .ant-tooltip-arrow,
+.ant-tooltip-placement-topRight .ant-tooltip-arrow {
+  bottom: 3px;
+  border-width: 5px 5px 0;
+  border-top-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-top .ant-tooltip-arrow {
+  left: 50%;
+  margin-left: -5px;
+}
+.ant-tooltip-placement-topLeft .ant-tooltip-arrow {
+  left: 16px;
+}
+.ant-tooltip-placement-topRight .ant-tooltip-arrow {
+  right: 16px;
+}
+.ant-tooltip-placement-right .ant-tooltip-arrow,
+.ant-tooltip-placement-rightTop .ant-tooltip-arrow,
+.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
+  left: 3px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-right .ant-tooltip-arrow {
+  top: 50%;
+  margin-top: -5px;
+}
+.ant-tooltip-placement-rightTop .ant-tooltip-arrow {
+  top: 8px;
+}
+.ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
+  bottom: 8px;
+}
+.ant-tooltip-placement-left .ant-tooltip-arrow,
+.ant-tooltip-placement-leftTop .ant-tooltip-arrow,
+.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
+  right: 3px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-left .ant-tooltip-arrow {
+  top: 50%;
+  margin-top: -5px;
+}
+.ant-tooltip-placement-leftTop .ant-tooltip-arrow {
+  top: 8px;
+}
+.ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
+  bottom: 8px;
+}
+.ant-tooltip-placement-bottom .ant-tooltip-arrow,
+.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
+.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
+  top: 3px;
+  border-width: 0 5px 5px;
+  border-bottom-color: rgba(0, 0, 0, 0.75);
+}
+.ant-tooltip-placement-bottom .ant-tooltip-arrow {
+  left: 50%;
+  margin-left: -5px;
+}
+.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
+  left: 16px;
+}
+.ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
+  right: 16px;
+}
+.ant-transfer {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+}
+.ant-transfer-list {
+  border: 1px solid #d9d9d9;
+  display: inline-block;
+  border-radius: 4px;
+  vertical-align: middle;
+  position: relative;
+  width: 180px;
+  height: 200px;
+  padding-top: 34px;
+}
+.ant-transfer-list-with-footer {
+  padding-bottom: 34px;
+}
+.ant-transfer-list-search {
+  padding: 0 8px;
+}
+.ant-transfer-list-search-action {
+  color: rgba(0, 0, 0, 0.25);
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  bottom: 4px;
+  width: 28px;
+  line-height: 32px;
+  text-align: center;
+}
+.ant-transfer-list-search-action .anticon {
+  transition: all .3s;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-transfer-list-search-action .anticon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+span.ant-transfer-list-search-action {
+  pointer-events: none;
+}
+.ant-transfer-list-header {
+  padding: 6px 12px;
+  border-radius: 4px 4px 0 0;
+  background: #fff;
+  color: #54657e;
+  border-bottom: 1px solid #e8e8e8;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.ant-transfer-list-header-title {
+  position: absolute;
+  right: 12px;
+}
+.ant-transfer-list-body {
+  font-size: 14px;
+  position: relative;
+  height: 100%;
+}
+.ant-transfer-list-body-search-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 4px;
+  width: 100%;
+}
+.ant-transfer-list-body-with-search {
+  padding-top: 40px;
+}
+.ant-transfer-list-content {
+  height: 100%;
+  overflow: auto;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.ant-transfer-list-content > .LazyLoad {
+  animation: transferHighlightIn 1s;
+}
+.ant-transfer-list-content-item {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 6px 12px;
+  min-height: 32px;
+  transition: all .3s;
+}
+.ant-transfer-list-content-item > span {
+  padding-right: 0;
+}
+.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover {
+  cursor: pointer;
+  background-color: #e6f7ff;
+}
+.ant-transfer-list-content-item-disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-transfer-list-body-not-found {
+  padding-top: 0;
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+  display: none;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  margin-top: -10px;
+}
+.ant-transfer-list-content:empty + .ant-transfer-list-body-not-found {
+  display: block;
+}
+.ant-transfer-list-footer {
+  border-top: 1px solid #e8e8e8;
+  border-radius: 0 0 4px 4px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.ant-transfer-operation {
+  display: inline-block;
+  overflow: hidden;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+.ant-transfer-operation .ant-btn {
+  display: block;
+}
+.ant-transfer-operation .ant-btn:first-child {
+  margin-bottom: 4px;
+}
+.ant-transfer-operation .ant-btn .anticon {
+  font-size: 12px;
+}
+@keyframes transferHighlightIn {
+  0% {
+    background: #bae7ff;
+  }
+  100% {
+    background: transparent;
+  }
+}
+.ant-tree-checkbox {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  line-height: 1;
+  position: relative;
+  vertical-align: middle;
+  top: -0.09em;
+}
+.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
+.ant-tree-checkbox:hover .ant-tree-checkbox-inner,
+.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner {
+  border-color: #1890ff;
+}
+.ant-tree-checkbox-checked:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  border: 1px solid #1890ff;
+  content: '';
+  animation: antCheckboxEffect 0.36s ease-in-out;
+  animation-fill-mode: both;
+  visibility: hidden;
+}
+.ant-tree-checkbox:hover:after,
+.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox:after {
+  visibility: visible;
+}
+.ant-tree-checkbox-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background-color: #fff;
+  transition: all .3s;
+}
+.ant-tree-checkbox-inner:after {
+  transform: rotate(45deg) scale(0);
+  position: absolute;
+  left: 4.57142857px;
+  top: 1.14285714px;
+  display: table;
+  width: 5.71428571px;
+  height: 9.14285714px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+}
+.ant-tree-checkbox-input {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
+  content: ' ';
+  transform: scale(1);
+  position: absolute;
+  left: 2.42857143px;
+  top: 5.92857143px;
+  width: 9.14285714px;
+  height: 1.14285714px;
+}
+.ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
+  transform: rotate(45deg) scale(1);
+  position: absolute;
+  display: table;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+}
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner,
+.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+.ant-tree-checkbox-disabled {
+  cursor: not-allowed;
+}
+.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
+  animation-name: none;
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-input {
+  cursor: not-allowed;
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
+  border-color: #d9d9d9 !important;
+  background-color: #f5f5f5;
+}
+.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
+  animation-name: none;
+  border-color: #f5f5f5;
+}
+.ant-tree-checkbox-disabled + span {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-tree-checkbox-wrapper {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: unset;
+  cursor: pointer;
+  display: inline-block;
+}
+.ant-tree-checkbox-wrapper + .ant-tree-checkbox-wrapper {
+  margin-left: 8px;
+}
+.ant-tree-checkbox-wrapper + span,
+.ant-tree-checkbox + span {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.ant-tree-checkbox-group {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: inline-block;
+}
+.ant-tree-checkbox-group-item {
+  display: inline-block;
+  margin-right: 8px;
+}
+.ant-tree-checkbox-group-item:last-child {
+  margin-right: 0;
+}
+.ant-tree-checkbox-group-item + .ant-tree-checkbox-group-item {
+  margin-left: 0;
+}
+.ant-tree {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+.ant-tree ol,
+.ant-tree ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ant-tree li {
+  padding: 4px 0;
+  margin: 0;
+  list-style: none;
+  white-space: nowrap;
+  outline: 0;
+}
+.ant-tree li span[draggable],
+.ant-tree li span[draggable="true"] {
+  user-select: none;
+  border-top: 2px transparent solid;
+  border-bottom: 2px transparent solid;
+  margin-top: -2px;
+  /* Required to make elements draggable in old WebKit */
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+}
+.ant-tree li.drag-over > span[draggable] {
+  background-color: #1890ff;
+  color: white;
+  opacity: 0.8;
+}
+.ant-tree li.drag-over-gap-top > span[draggable] {
+  border-top-color: #1890ff;
+}
+.ant-tree li.drag-over-gap-bottom > span[draggable] {
+  border-bottom-color: #1890ff;
+}
+.ant-tree li.filter-node > span {
+  color: #f5222d !important;
+  font-weight: 500 !important;
+}
+.ant-tree li ul {
+  margin: 0;
+  padding: 0 0 0 18px;
+}
+.ant-tree li .ant-tree-node-content-wrapper {
+  display: inline-block;
+  padding: 0 5px;
+  border-radius: 2px;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  vertical-align: top;
+  color: #54657e;
+  transition: all .3s;
+  position: relative;
+  height: 24px;
+  line-height: 24px;
+}
+.ant-tree li .ant-tree-node-content-wrapper:hover {
+  background-color: #e6f7ff;
+}
+.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+  background-color: #bae7ff;
+}
+.ant-tree li .ant-tree-node-content-wrapper .font-red {
+  color: #FF5500;
+}
+.ant-tree li span {
+  cursor: pointer;
+}
+.ant-tree li span.ant-tree-checkbox {
+  margin: 4px 4px 0 2px;
+}
+.ant-tree li span.ant-tree-switcher,
+.ant-tree li span.ant-tree-iconEle {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 0 none;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+}
+.ant-tree li span.ant-tree-icon_loading {
+  background: #fff;
+}
+.ant-tree li span.ant-tree-icon_loading:after {
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\E64D";
+  animation: loadingCircle 1s infinite linear;
+  color: #1890ff;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
+  cursor: default;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_open:after {
+  font-size: 12px;
+  font-size: 7px \9;
+  transform: scale(0.58333333) rotate(0deg);
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e606";
+  font-weight: bold;
+  transition: transform .3s;
+}
+:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_open:after {
+  font-size: 12px;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+  font-size: 12px;
+  font-size: 7px \9;
+  transform: scale(0.58333333) rotate(0deg);
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e606";
+  font-weight: bold;
+  transition: transform .3s;
+}
+:root .ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+  font-size: 12px;
+}
+.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close:after {
+  transform: rotate(270deg) scale(0.59);
+}
+.ant-tree li:last-child > span.ant-tree-switcher:before,
+.ant-tree li:last-child > span.ant-tree-iconEle:before {
+  display: none;
+}
+.ant-tree > li:first-child {
+  padding-top: 7px;
+}
+.ant-tree > li:last-child {
+  padding-bottom: 7px;
+}
+.ant-tree-child-tree {
+  display: none;
+}
+.ant-tree-child-tree-open {
+  display: block;
+}
+li.ant-tree-treenode-disabled > span,
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper,
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span,
+li.ant-tree-treenode-disabled > span.ant-tree-switcher {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper:hover {
+  background: transparent;
+}
+.ant-tree-icon__open {
+  margin-right: 2px;
+  vertical-align: top;
+}
+.ant-tree-icon__close {
+  margin-right: 2px;
+  vertical-align: top;
+}
+.ant-tree.ant-tree-show-line li {
+  position: relative;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
+  background: #fff;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher-noop:after {
+  font-size: 12px;
+  font-size: 12px \9;
+  transform: scale(1) rotate(0deg);
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e664";
+  vertical-align: baseline;
+  font-weight: normal;
+  transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher-noop:after {
+  font-size: 12px;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_open:after {
+  font-size: 12px;
+  font-size: 12px \9;
+  transform: scale(1) rotate(0deg);
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e621";
+  vertical-align: baseline;
+  font-weight: normal;
+  transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_open:after {
+  font-size: 12px;
+}
+.ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_close:after {
+  font-size: 12px;
+  font-size: 12px \9;
+  transform: scale(1) rotate(0deg);
+  display: inline-block;
+  font-family: 'anticon';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e645";
+  vertical-align: baseline;
+  font-weight: normal;
+  transition: transform .3s;
+}
+:root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_close:after {
+  font-size: 12px;
+}
+.ant-tree.ant-tree-show-line > nz-tree-node:not(:last-child) > li:before,
+.ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:not(:last-child) > li:before {
+  content: ' ';
+  width: 1px;
+  border-left: 1px solid #d9d9d9;
+  height: 100%;
+  position: absolute;
+  left: 12px;
+  margin: 22px 0;
+}
+.ant-tree.ant-tree-show-line .ant-tree-child-tree > nz-tree-node:last-child > li:before {
+  content: ' ';
+  width: 1px;
+  border-left: 0px solid #d9d9d9;
+  height: 100%;
+  position: absolute;
+  left: 12px;
+  margin: 22px 0;
+}
+.ant-upload {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: 0;
+}
+.ant-upload p {
+  margin: 0;
+}
+.ant-upload-btn {
+  display: block;
+  width: 100%;
+  outline: none;
+}
+.ant-upload input[type="file"] {
+  cursor: pointer;
+}
+.ant-upload.ant-upload-select {
+  display: inline-block;
+}
+.ant-upload.ant-upload-select-picture-card {
+  border: 1px dashed #d9d9d9;
+  width: 104px;
+  height: 104px;
+  border-radius: 4px;
+  background-color: #fafafa;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.3s ease;
+  vertical-align: top;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  display: table;
+}
+.ant-upload.ant-upload-select-picture-card > .ant-upload {
+  width: 100%;
+  height: 100%;
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  padding: 8px;
+}
+.ant-upload.ant-upload-select-picture-card:hover {
+  border-color: #1890ff;
+}
+.ant-upload.ant-upload-drag {
+  border: 1px dashed #d9d9d9;
+  transition: border-color 0.3s;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 16px 0;
+  background: #fafafa;
+}
+.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) {
+  border: 2px dashed #40a9ff;
+}
+.ant-upload.ant-upload-drag.ant-upload-disabled {
+  cursor: not-allowed;
+}
+.ant-upload.ant-upload-drag .ant-upload-btn {
+  display: table;
+  height: 100%;
+}
+.ant-upload.ant-upload-drag .ant-upload-drag-container {
+  display: table-cell;
+  vertical-align: middle;
+}
+.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
+  border-color: #40a9ff;
+}
+.ant-upload.ant-upload-drag p.ant-upload-drag-icon {
+  margin-bottom: 20px;
+}
+.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon {
+  font-size: 48px;
+  color: #40a9ff;
+}
+.ant-upload.ant-upload-drag p.ant-upload-text {
+  font-size: 16px;
+  margin: 0 0 4px;
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-upload.ant-upload-drag p.ant-upload-hint {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload.ant-upload-drag .anticon-plus {
+  font-size: 30px;
+  transition: all .3s;
+  color: rgba(0, 0, 0, 0.25);
+}
+.ant-upload.ant-upload-drag .anticon-plus:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload.ant-upload-drag:hover .anticon-plus {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list {
+  font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #54657e;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  zoom: 1;
+}
+.ant-upload-list:before,
+.ant-upload-list:after {
+  content: " ";
+  display: table;
+}
+.ant-upload-list:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-upload-list:before,
+.ant-upload-list:after {
+  content: " ";
+  display: table;
+}
+.ant-upload-list:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.ant-upload-list-item {
+  margin-top: 8px;
+  font-size: 14px;
+  position: relative;
+  height: 22px;
+}
+.ant-upload-list-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 22px;
+  width: 100%;
+  display: inline-block;
+}
+.ant-upload-list-item-info {
+  height: 100%;
+  padding: 0 12px 0 4px;
+  transition: background-color 0.3s;
+}
+.ant-upload-list-item-info > span {
+  display: block;
+}
+.ant-upload-list-item-info .anticon-loading,
+.ant-upload-list-item-info .anticon-paper-clip {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+  position: absolute;
+  top: 5px;
+}
+.ant-upload-list-item .anticon-cross {
+  display: inline-block;
+  font-size: 12px;
+  font-size: 10px \9;
+  transform: scale(0.83333333) rotate(0deg);
+  transition: all .3s;
+  opacity: 0;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 22px;
+}
+:root .ant-upload-list-item .anticon-cross {
+  font-size: 12px;
+}
+.ant-upload-list-item .anticon-cross:hover {
+  color: #54657e;
+}
+.ant-upload-list-item:hover .ant-upload-list-item-info {
+  background-color: #e6f7ff;
+}
+.ant-upload-list-item:hover .anticon-cross {
+  opacity: 1;
+}
+.ant-upload-list-item-error,
+.ant-upload-list-item-error .anticon-paper-clip,
+.ant-upload-list-item-error .ant-upload-list-item-name {
+  color: #f5222d;
+}
+.ant-upload-list-item-error .anticon-cross {
+  opacity: 1;
+  color: #f5222d !important;
+}
+.ant-upload-list-item-progress {
+  line-height: 0;
+  font-size: 14px;
+  position: absolute;
+  width: 100%;
+  bottom: -12px;
+  padding-left: 26px;
+}
+.ant-upload-list-picture .ant-upload-list-item,
+.ant-upload-list-picture-card .ant-upload-list-item {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  height: 66px;
+  position: relative;
+}
+.ant-upload-list-picture .ant-upload-list-item:hover,
+.ant-upload-list-picture-card .ant-upload-list-item:hover {
+  background: transparent;
+}
+.ant-upload-list-picture .ant-upload-list-item-error,
+.ant-upload-list-picture-card .ant-upload-list-item-error {
+  border-color: #f5222d;
+}
+.ant-upload-list-picture .ant-upload-list-item-info,
+.ant-upload-list-picture-card .ant-upload-list-item-info {
+  padding: 0;
+}
+.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info,
+.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {
+  background: transparent;
+}
+.ant-upload-list-picture .ant-upload-list-item-uploading,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading {
+  border-style: dashed;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail img,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
+  width: 48px;
+  height: 48px;
+  display: block;
+  overflow: hidden;
+}
+.ant-upload-list-picture .ant-upload-list-item-thumbnail.anticon:before,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail.anticon:before {
+  line-height: 48px;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list-picture .ant-upload-list-item-name,
+.ant-upload-list-picture-card .ant-upload-list-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0 0 0 8px;
+  line-height: 44px;
+  transition: all .3s;
+  padding-left: 48px;
+  padding-right: 8px;
+  max-width: 100%;
+  display: inline-block;
+  box-sizing: border-box;
+}
+.ant-upload-list-picture .ant-upload-list-item-uploading .ant-upload-list-item-name,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-name {
+  line-height: 28px;
+}
+.ant-upload-list-picture .ant-upload-list-item-progress,
+.ant-upload-list-picture-card .ant-upload-list-item-progress {
+  padding-left: 56px;
+  margin-top: 0;
+  bottom: 14px;
+  width: calc(100% - 24px);
+}
+.ant-upload-list-picture .anticon-cross,
+.ant-upload-list-picture-card .anticon-cross {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  line-height: 1;
+}
+.ant-upload-list-picture-card {
+  display: inline;
+}
+.ant-upload-list-picture-card.ant-upload-list:after {
+  display: none;
+}
+.ant-upload-list-picture-card .ant-upload-list-item {
+  float: left;
+  width: 104px;
+  height: 104px;
+  margin: 0 8px 8px 0;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info:before {
+  content: ' ';
+  position: absolute;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: all .3s;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info:before {
+  opacity: 1;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  white-space: nowrap;
+  opacity: 0;
+  transition: all .3s;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o,
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {
+  z-index: 10;
+  transition: all .3s;
+  cursor: pointer;
+  font-size: 16px;
+  width: 16px;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0 4px;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o:hover,
+.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete:hover {
+  color: #fff;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-info:hover + .ant-upload-list-item-actions,
+.ant-upload-list-picture-card .ant-upload-list-item-actions:hover {
+  opacity: 1;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail,
+.ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: static;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-name {
+  margin: 8px 0 0;
+  padding: 0;
+  text-align: center;
+  line-height: 1.5;
+  display: none;
+}
+.ant-upload-list-picture-card .anticon-picture + .ant-upload-list-item-name {
+  display: block;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading.ant-upload-list-item {
+  background-color: #fafafa;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info {
+  height: auto;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info:before,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-eye-o,
+.ant-upload-list-picture-card .ant-upload-list-item-uploading .ant-upload-list-item-info .anticon-delete {
+  display: none;
+}
+.ant-upload-list-picture-card .ant-upload-list-item-uploading-text {
+  margin-top: 18px;
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-upload-list-picture-card .ant-upload-list-item-progress {
+  padding-left: 0;
+  bottom: 32px;
+}
+.ant-upload-list .ant-upload-success-icon {
+  color: #52c41a;
+  font-weight: bold;
+}
+.ant-upload-list .ant-upload-animate-enter,
+.ant-upload-list .ant-upload-animate-leave,
+.ant-upload-list .ant-upload-animate-inline-enter,
+.ant-upload-list .ant-upload-animate-inline-leave {
+  animation-duration: .3s;
+  animation-fill-mode: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-upload-list .ant-upload-animate-enter {
+  animation-name: uploadAnimateIn;
+}
+.ant-upload-list .ant-upload-animate-leave {
+  animation-name: uploadAnimateOut;
+}
+.ant-upload-list .ant-upload-animate-inline-enter {
+  animation-name: uploadAnimateInlineIn;
+}
+.ant-upload-list .ant-upload-animate-inline-leave {
+  animation-name: uploadAnimateInlineOut;
+}
+@keyframes uploadAnimateIn {
+  from {
+    height: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+  }
+}
+@keyframes uploadAnimateOut {
+  to {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+  }
+}
+@keyframes uploadAnimateInlineIn {
+  from {
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+  }
+}
+@keyframes uploadAnimateInlineOut {
+  to {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+  }
+}
diff --git a/usecaseui-portal/src/my-theme.less b/usecaseui-portal/src/my-theme.less
new file mode 100644
index 00000000..946b8afb
--- /dev/null
+++ b/usecaseui-portal/src/my-theme.less
@@ -0,0 +1,11 @@
+@import "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less";
+
+@menu-inline-toplevel-item-height: 50px;
+@menu-item-height: 50px;
+@menu-highlight-color: #3fa8eb;
+@text-color: #54657e;
+@menu-dark-item-selected-bg: #3d4a59;
+@menu-dark-color: #fff;
+@menu-dark-highlight-color: #3fa8eb;
+@layout-header-background: #2a3542;
+@menu-dark-submenu-bg: #2a3542;
diff --git a/usecaseui-portal/src/polyfills.ts b/usecaseui-portal/src/polyfills.ts
new file mode 100644
index 00000000..199ac5d1
--- /dev/null
+++ b/usecaseui-portal/src/polyfills.ts
@@ -0,0 +1,81 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';
+import 'core-js/es7/array';
+import 'core-js/es7/object';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/usecaseui-portal/src/styles.css b/usecaseui-portal/src/styles.css
new file mode 100644
index 00000000..2b7176e6
--- /dev/null
+++ b/usecaseui-portal/src/styles.css
@@ -0,0 +1,113 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/* You can add global styles to this file, and also import other style files */
+.ant-dropdown-menu .ant-dropdown-menu-item:hover,
+.ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover {
+  background-color: #3fa8eb;
+}
+nz-table .ant-table-thead > tr > th {
+  color: #3fa8eb;
+}
+nz-table .ant-spin-container nz-pagination ul .ant-pagination-options .ant-pagination-options-size-changer.ant-select {
+  position: absolute;
+  left: 0;
+}
+.detailInformatioin nz-table .ant-table-small {
+  border-color: #dfdfe0;
+  border-right: 0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content {
+  border-color: #dfdfe0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table {
+  padding: 0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table .ant-table-thead > tr > th {
+  background-color: #f0f2f5;
+  font-weight: 700;
+  font-size: 14px;
+  padding: 2px 15px;
+  border-color: #dfdfe0;
+}
+.detailInformatioin nz-table .ant-table-small .ant-table-content .ant-table-body > table .ant-table-tbody > tr > td {
+  background-color: #f0f2f5;
+  font-size: 14px;
+  padding: 2px 15px;
+  color: #323437;
+  border-color: #dfdfe0;
+}
+.ant-calendar-picker .ant-input {
+  background-color: #eceff4;
+  border-color: #9fa9ab;
+}
+nz-pagination ul .ant-pagination-options .ant-pagination-options-size-changer.ant-select {
+  position: absolute;
+  left: 0;
+}
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+a,
+span {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  text-decoration: none;
+}
+body {
+  padding: 0 !important;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.clearfix:after {
+  content: "";
+  height: 0;
+  line-height: 0;
+  display: block;
+  visibility: hidden;
+  clear: both;
+}
+.deleteModelContent {
+  color: red;
+}
+/* WAN Port */
+.wanPortModalList li {
+  height: 35px;
+}
+.wanPortModalList li > span {
+  display: inline-block;
+  width: 165px;
+  font: 700 14px "Arial";
+  color: #3fa8eb;
+  vertical-align: middle;
+}
+.wanPortModalList li input {
+  width: 165px;
+}
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
new file mode 100644
index 00000000..5429a9c1
--- /dev/null
+++ b/usecaseui-portal/src/styles.less
@@ -0,0 +1,117 @@
+/* You can add global styles to this file, and also import other style files */
+// 下拉框背景hover状态颜色
+.ant-dropdown-menu {
+    .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
+        background-color: #3fa8eb;
+    }
+}
+// 表格每页条数选项单位置
+nz-table {
+    .ant-table-thead>tr>th {
+        color: #3fa8eb; //标题字体颜色
+    }
+    .ant-spin-container {
+        nz-pagination {
+            ul {
+                .ant-pagination-options {
+                    .ant-pagination-options-size-changer.ant-select{
+                        position: absolute;
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 详情页迷你表格样式
+.detailInformatioin {
+    nz-table {
+        .ant-table-small {
+            border-color: #dfdfe0;
+            border-right: 0;
+            .ant-table-content {
+                border-color:  #dfdfe0;
+                .ant-table-body > table { 
+                    padding: 0;
+                    .ant-table-thead > tr > th {
+                        background-color: #f0f2f5;
+                        font-weight: 700;
+                        font-size: 14px;
+                        padding: 2px 15px;
+                        border-color: #dfdfe0;
+                    }
+                    .ant-table-tbody > tr > td {
+                        background-color: #f0f2f5;
+                        font-size: 14px;
+                        padding: 2px 15px;
+                        color: #323437;
+                        border-color: #dfdfe0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 日期选择插件背景颜色
+.ant-calendar-picker {
+    .ant-input {
+        background-color: #eceff4;
+        border-color: #9fa9ab;
+    }           
+}
+// 分页每页条数选项单位置
+nz-pagination {
+    ul {
+        .ant-pagination-options {
+            .ant-pagination-options-size-changer.ant-select{
+                position: absolute;
+                left: 0;
+            }
+        }
+    }
+}
+
+html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+}
+body {
+    padding: 0 !important;
+}
+.fl {
+    float: left;
+}
+.fr {
+    float: right;
+}
+.clearfix:after{
+    content:"";
+    height:0;
+    line-height:0;
+    display:block;
+    visibility:hidden;
+    clear:both
+}
+.deleteModelContent {
+    color: red;
+}
+
+/* WAN Port */
+.wanPortModalList li {
+    height: 35px;
+    >span{
+        display: inline-block;
+        width: 165px;
+        font: 700 14px "Arial";
+        color: #3fa8eb;
+        vertical-align: middle;
+    }
+    input {
+        width: 165px;
+    }
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/src/test.ts b/usecaseui-portal/src/test.ts
new file mode 100644
index 00000000..16317897
--- /dev/null
+++ b/usecaseui-portal/src/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/usecaseui-portal/src/tsconfig.app.json b/usecaseui-portal/src/tsconfig.app.json
new file mode 100644
index 00000000..39ba8dba
--- /dev/null
+++ b/usecaseui-portal/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/usecaseui-portal/src/tsconfig.spec.json b/usecaseui-portal/src/tsconfig.spec.json
new file mode 100644
index 00000000..ac22a298
--- /dev/null
+++ b/usecaseui-portal/src/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/usecaseui-portal/src/typings.d.ts b/usecaseui-portal/src/typings.d.ts
new file mode 100644
index 00000000..ef5c7bd6
--- /dev/null
+++ b/usecaseui-portal/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
author	zhangab <zhanganbing@chinamobile.com>	2018-10-23 11:32:03 +0800
committer	zhangab <zhanganbing@chinamobile.com>	2018-10-23 11:32:05 +0800
commit	de9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree	0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src
parent	101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)