feat:modify style

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: I70efd97fb18f3afb8e82014663df0c185a6d026c
Issue-ID: USECASEUI-527

3 files changed, 20 insertions, 14 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 951e5096..3944f967 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -29,7 +29,7 @@
         </nz-table>
     </nz-list>
     <nz-list class="taskmodel_list" nzBordered [nzHeader]="'End to End Topology:'" [nzFooter]="null">
-        <div>status:{{status}}</div>
+        <!-- <div>status:{{status}}</div> -->
         <!-- <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" /> -->
         <!-- <img src="assets/images/slicing-business-management/server.svg" /> -->
         <div class="warp">
@@ -49,21 +49,21 @@
                     <p >
                        vLan:{{businessDetailInfo.vLanText}}
                     </p>
-                    <p class="online-vlan"></p>
+                    <p [ngClass]="{'online-type':status!=='deactivated','offline-type':status=='deactivated'}"></p>
                 </li>
                 <li>
                     <p>{{businessDetailInfo.tnVersion}}</p>
                     <p>
                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
                     </p>
-                    <p>TN EDGEText<br/>Gateway</p>
+                    <p>PE</p>
                 </li>
                 <li class="three-box" >
-                    <p>{{businessDetailInfo.mbps}} Mbps/yyyG</p>
+                    <p>{{businessDetailInfo.mbps}} Mbps</p>
                     <p>
                        {{businessDetailInfo.msText}} ms
                     </p>
-                    <p  [ngClass]="{'online-type':businessDetailInfo.orchestration_status!=='deactivated','offline-type':businessDetailInfo.orchestration_status=='deactivated'}"></p>
+                    <p  [ngClass]="{'online-type':status!=='deactivated','offline-type':status=='deactivated'}"></p>
                     <p class="">Link Type:{{businessDetailInfo.linkType}}</p>
                 </li>
                 <li>
@@ -71,13 +71,13 @@
                     <p>
                         <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
                     </p>
-                    <p>TN EDGEText<br/>Gateway</p>
+                    <p>PE</p>
                 </li>
                 <li class="vLan-line">
                     <p >
                        vLan:{{businessDetailInfo.cnVlan}}
                     </p>
-                    <p class="online-vlan"></p>
+                    <p [ngClass]="{'online-type':status!=='deactivated','offline-type':status=='deactivated'}"></p>
                 </li>
                 <li>
                     <p>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
index 21c68524..38e20a72 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
@@ -6,16 +6,17 @@ a{
 }
 .header{
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
     height: 40px;
     line-height: 40px;
     color:#000;
-    margin:10px 20px;
+    margin:10px 102px;
 }
 .anImg{
     width: 65px;
     height: auto;
+    margin-top: 20px;
 }
 .list-box{
     display: flex;
@@ -36,21 +37,23 @@ a{
   background: #000;
 }
 .online-type{
-  width: 200px;
+  width: 180px;
   height: 3px;
-  background: #6a9bd0;
+  background: #1DA57A;
+  margin: 0 5px;
 }
 .offline-type{
-    width: 200px;
+    width: 180px;
     height: 3px;
     background: #7e848a;
+    margin: 0 5px;
 }
 .vLan-line{
     text-align: center;
     top:-20px;
 }
 .tnImg{
-    width: 85px;
+    width: 65px;
     height:auto;
 }
 .three-box{
@@ -58,6 +61,8 @@ a{
     top:-20px;
 }
 .cnCloud{
-    width: 90px;
+    margin-left:10px;
+    width: 88px;
     height: auto;
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
index 0072378a..2d97dc3f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
@@ -28,6 +28,7 @@ export class SlicingBusinessModelComponent implements OnInit {
     businessDetailInfo : any = {}
     ngOnInit() {
         this.status = this.outerData.orchestration_status
+        console.log('status',this.status)
         this.getDetail()
     }