Service instance lifecycle management

Change-Id: I9ec0d53ead1b19a3de8902cde71dc341fba3d7cf
Issue-ID: USECASEUI-218
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

1 files changed, 80 insertions, 20 deletions

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
index 55419785..ec4a7f76 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -73,7 +73,7 @@ hr {
         top:50%;
         width:116px;
         height:42px;
-        background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%);
+        background:#0DA9E2;
         border-radius:2px;
         margin-top: -15px;
         span {
@@ -89,7 +89,8 @@ hr {
         border: none;
     }
     .create:hover{
-        background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+        background:#09C6E2;
+        //background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
     }
 
 }
@@ -100,21 +101,34 @@ hr {
 .top-list{
     position: relative;
     width:22%;
-    height:160px;
-    margin: 15px 1.5%;
-    float: left;
-    background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
-    box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
+    height:184px;
+  margin: 15px 1.5%;
+  float: left;
+    background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+    //background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
     border-radius:2px;
 }
+.top-num .top-list:nth-child(2){
+    background:url("../../../assets/images/servicelist-ns.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+    background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(4){
+    background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
+    background-size: 100% 100%;
+}
 .top-list .round{
     position: absolute;
     width: 60px;
     height: 60px;
     line-height: 60px;
-    text-align: center;
-    top:50%;
-    left: 10px;
+  text-align: center;
+    top:45%;
+    left: 50px;
     margin-top: -30px;
     background:#E0EDFF;
     border:2px solid rgba(224,237,255,1);
@@ -128,12 +142,15 @@ hr {
     text-align: right;
     height: 40px;
     line-height: 20px;
-    top:50%;
+    top:45%;
     margin-top: -20px;
-    right: 15px;
+    right: 50px;
     color: #fff;
     span:nth-child(1){
+        display: inline-block;
         font-size: 22px;
+        font-weight: 500;
+        margin-bottom: 10px;
     }
 }
 .list {
@@ -143,6 +160,7 @@ hr {
     nz-table {
         tbody {
             td {
+                position: relative;
                 span.active {
                     font-size: 14px;
                     color: #147dc2;
@@ -188,6 +206,26 @@ hr {
                     color: #aaa;
                     opacity: 0.6;
                 }
+                .icon-more{
+                    position: absolute;
+                    width: 115px;
+                    height: 135px;
+                    //height: 156px;
+                    top:50px;
+                    padding:15px 0 0 15px;
+                    background: #ffffff;
+                    z-index: 2;
+                    border-radius: 5px;
+                    box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5);
+                    li{
+                        margin-bottom:10px;
+                        line-height: 20px;
+                        text-align: left;
+                        span{
+                            margin-left: 5px;
+                        }
+                    }
+                }
             }
             tr.childtr {
                 td {
@@ -223,26 +261,48 @@ hr {
     z-index: 3;
 }
 /*2019.01.14*/
-.e2eColor{
-    color: #5B45E7;
+.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
+    color: #FFFFFF;
+    width:120px;
+    height: 34px;
+    line-height: 34px;
+    margin-bottom: 0!important;
+    text-align: center;
+    background:linear-gradient(131deg,rgba(79,151,239,1) 0%,rgba(48,217,196,1) 100%);
+    border-radius:4px
 }
 .nsColor{
-    color: #F96D7D;
+    background:linear-gradient(135deg,rgba(252,167,91,1) 0%,rgba(253,203,106,1) 100%);
 }
-.ccvpnColor{
-    color: #3E86EC;
+.ccvpnColor{ 
+    background:linear-gradient(135deg,rgba(81,113,251,1) 0%,rgba(201,123,254,1) 100%);
 }
 .sotnColor{
-    color: #FFB629;
+    background:linear-gradient(133deg,rgba(24,179,170,1) 0%,rgba(70,216,178,1) 100%);
+}
+.voLTEColor{    
+    background:#0AD251;
 }
+.vnfColor,.siteColor,.SDWANColor{
+    color:rgba(60,79,140,0.5);
+    width:120px;
+    height: 34px;
+    line-height: 34px;
+    margin-bottom: 0!important;
+    text-align: center;
+    background:rgba(238,238,238,1);
+    border-radius:4px;
+}
+
 .select-list{
-    width: 280px;
+    width: 320px;
     height: 32px;
     line-height: 32px;
     margin: 25px auto;
 }
 .select-list>span{
-    text-align: left;
+    text-align: right;
+    width: 110px!important;
     line-height: 32px;
 }