summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-09-29 13:15:41 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-09-29 13:15:52 +0800
commitf1a0ffa2e0323a61141453c56f12218e3e57a141 (patch)
tree98eeeaf3bea1a27ea3386d356a801db199d35f18 /usecaseui-portal/src/app
parent831a305ed9f1bf0027f3450dd41e901eafcb7dc4 (diff)
feat:top card code split into new components of service-list page
Change-Id: I1095c2c56aeb097d7d5318a4287afbf5f4adfcd8 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/app.module.ts4
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html18
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less65
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts19
5 files changed, 130 insertions, 1 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index e2f56f97..b87aaf76 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -73,6 +73,7 @@ import { ManagemencsService } from './core/services/managemencs.service';
import { FcapsComponent } from './views/fcaps/fcaps.component';
import { TestComponent } from './test/test.component';
import { TextService } from './core/services/text.service';
+import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
@NgModule({
providers: [
@@ -112,7 +113,8 @@ import { TextService } from './core/services/text.service';
CustomerComponent,
PerformanceDetailsComponent,
FcapsComponent,
- TestComponent
+ TestComponent,
+ TopCardComponent
],
imports: [
BrowserModule,
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html
new file mode 100644
index 00000000..98e42ae7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.html
@@ -0,0 +1,18 @@
+<div class="top-list">
+ <span class="round">{{serviceDomain}}</span>
+ <div class="top-list-text">
+ <p>
+ <span>{{failedNum}}</span>
+ <span> {{"i18nTextDefine_Failed" | translate}} </span>
+ </p>
+ <p>
+ <span>{{successNum}}</span>
+ <span> {{"i18nTextDefine_Success" | translate}} </span>
+ </p>
+ <p>
+ <span>{{inProgressNum}}</span>
+ <span> {{"i18nTextDefine_InProgress" | translate}} </span>
+ </p>
+ <p class="service-description"> {{serviceDetailName | translate}} </p>
+ </div>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less
new file mode 100644
index 00000000..a235b1e6
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less
@@ -0,0 +1,65 @@
+.top-list{
+ position: relative;
+ width:100%;
+ max-width:400px;
+ height:170px;
+ background:url("/assets/images/servicelist-e2e.png") no-repeat;
+ background-size: 100% 100%;
+ border-radius:2px;
+ .round{
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ text-align: center;
+ background:#E0EDFF;
+ border:2px solid rgba(224,237,255,1);
+ border-radius: 50%;
+ font-size:16px;
+ font-family:ArialMT;
+ color:#3C4F8C;
+ transition: .5s;
+ top: 42%;
+ margin-top: -30px;
+ left: 15%;
+ }
+ .top-list-text{
+ position: absolute;
+ text-align: right;
+ line-height: 20px;
+ right: 12%;
+ color: #fff;
+ p{
+ height: 28px;
+ margin-bottom: 0;
+ padding-left: 5px;
+ font-size: 14px;
+ clear: both;
+ span{
+ display: inline-block;
+ float: right;
+ font-weight: 500;
+ text-align: right;
+ }
+ span:nth-child(1){
+ font-size: 18px;
+ margin-left: 15px;
+ }
+ span:nth-child(2){
+ width: 85px;
+ font-size: 16px;
+ }
+ }
+ p:nth-child(1){
+ margin-top: 25px;
+ }
+ .service-description{
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #3C4F8C;
+
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts
new file mode 100644
index 00000000..b2d2cbb4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopCardComponent } from './top-card.component';
+
+describe('TopCardComponent', () => {
+ let component: TopCardComponent;
+ let fixture: ComponentFixture<TopCardComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TopCardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TopCardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts
new file mode 100644
index 00000000..6004fb8e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-top-card',
+ templateUrl: './top-card.component.html',
+ styleUrls: ['./top-card.component.less']
+})
+export class TopCardComponent implements OnInit {
+ @Input() serviceDomain: string;
+ @Input() failedNum: number;
+ @Input() successNum: number;
+ @Input() inProgressNum: number;
+ @Input() serviceDetailName: string;
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}