feat:Optimize page style of slicing management page

Change-Id: I3df19a4463a65116401c96c65000c63a5a22d699
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

8 files changed, 38 insertions, 17 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
index 336e11c6..ad4cb7f6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
@@ -7,8 +7,8 @@
           <th>Service Instance Id</th>
           <th>Service Instance Name</th>
           <th>Service Type</th>
-          <th>S-NSSAI</th>
-          <th>Status</th>
+          <th width="90px">S-NSSAI</th>
+          <th width="110px">Status</th>
           <th width="110px">Detail</th>
         </tr>
       </thead>
@@ -28,15 +28,15 @@
       </tbody>
     </nz-table>
   </nz-list>
-  <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Related Slicing NSSI List ：'" [nzFooter]="null">
+  <nz-list class="taskmodel_list taskmodel_list-margin" nzBordered [nzHeader]="'Related Slicing NSSI List ：'" [nzFooter]="null">
     <nz-table #nssiTable [nzData]="nssiList" [nzShowPagination]="false" nzHideOnSinglePage class="model-table-padding">
       <thead>
         <tr>
           <th>Service Instance Id</th>
           <th>Service Instance Name</th>
           <th>Service Type</th>
-          <th>Environment Context</th>
-          <th>Status</th>
+          <th width="85px">Context</th>
+          <th width="110px">Status</th>
           <th width="110px">Detail</th>
         </tr>
       </thead>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.less
index e69de29b..4e3fdb12 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.less
@@ -0,0 +1,3 @@
+.taskmodel_list-margin{
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html
index 1b489e09..7675f4f1 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.html
@@ -27,7 +27,7 @@
                     <th>Service Instance Id</th>
                     <th>Service Instance Name</th>
                     <th>Service Type</th>
-                    <th>Status</th>
+                    <th width="110px">Status</th>
                     <th width="140px">Detail</th>
                 </tr>
             </thead>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
index 946c6e05..da67682b 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
@@ -12,7 +12,7 @@
           <th>Service Instance Id</th>
           <th>Service Instance Name</th>
           <th>Service Type</th>
-          <th>Status</th>
+          <th width="110px">Status</th>
           <th width="110px">Detail</th>
         </tr>
       </thead>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html
index 0da9adaf..534f18a1 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.html
@@ -27,8 +27,8 @@
           <th>Service Instance Id</th>
           <th>Service Instance Name</th>
           <th>Service Type</th>
-          <th>Environment Context</th>
-          <th>Status</th>
+          <th width="85px">Context</th>
+          <th width="110px">Status</th>
           <th width="140px">Detail</th>
         </tr>
       </thead>
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 fd21b524..7b629cd5 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
@@ -14,7 +14,7 @@
                     <th>Service Instance Id</th>
                     <th>Service Instance Name</th>
                     <th>Service Type</th>
-                    <th>Status</th>
+                    <th width="110px">Status</th>
                     <th width="110px">Detail</th>
                 </tr>
             </thead>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
index 9dbd1c2b..006a6d73 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
@@ -27,9 +27,9 @@
                     <th>Service Instance Id</th>
                     <th>Service Instance Name</th>
                     <th>Service Type</th>
-                    <th>S-NSSAI</th>
-                    <th>Status</th>
-                	<th width="180px">Aciton</th>
+                    <th width="90px">S-NSSAI</th>
+                    <th width="110px">Status</th>
+                	<th width="140px">Aciton</th>
                     <th width="110px">Detail</th>
                 </tr>
             </thead>
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 1bca5408..6f10e362 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -828,13 +828,31 @@ nz-notification-container .ant-notification{
 }
 .slicing-resource-table-list{
   padding: 0 20px 0 0!important;
+  nz-table{
+    .ant-table-wrapper{
+      .ant-table-body{
+        th,td{
+          word-break: break-word!important;
+        }
+      }
+    }
+  }
 }
 .taskmodel_list{
   margin-bottom: 20px;
-}
-
-.taskmodel_list {
-  margin-bottom: 20px;
+  nz-table{
+    .ant-table-wrapper{
+      .ant-table-body{
+        th,td{
+          word-break: break-word!important;
+        }
+      }
+    }
+  }
+  .ant-list-header{
+    font-weight: 600;
+    color: #000000!important;
+  }
 }
 
 .model-table-padding {