User and service type management interface

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

1 files changed, 26 insertions, 18 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
index abfcb5c0..89f49cc0 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ b/usecaseui-portal/src/app/components/customer/customer.component.less
@@ -15,7 +15,7 @@
 */
 .content {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     i.anticon {
         cursor: pointer;
         font-size: 18px;
@@ -33,7 +33,7 @@
         }
     }
     .customer {
-        height: 580px;
+        height: 100%;
         overflow: hidden;
         width: 32%;
         margin-right: 1.5%;
@@ -44,7 +44,7 @@
         vertical-align: top;
         .customer_title {
             line-height: 3.5;
-            height: 50px;
+            height: 5%;
             width: 100%;
             border-bottom: 1px #07A9E1 solid;
             .customers {
@@ -61,7 +61,7 @@
             }
         }
         .customer_detail {
-            height: 535px;
+            height: 95%;
             width: 100%;
             border-top: 1px #07A9E1 solid;
             .customer_add {
@@ -93,6 +93,7 @@
                     height: 50px;
                     line-height: 3.5;
                     width: 100%;
+                    cursor: pointer;
                     img {
                         width: 10%;
                     }
@@ -109,7 +110,7 @@
     }
     .services_type {
         overflow: hidden;
-        height: 580px;
+        height: 100%;
         border-radius: 5px;
         width: 32%;
         background-color: #fff;
@@ -118,7 +119,7 @@
         vertical-align: top;
         .services_type_title {
             line-height: 3.5;
-            height: 50px;
+            height: 5%;
             width: 100%;
             border-bottom: 1px #07A9E1 solid;
             .servicess {
@@ -136,7 +137,7 @@
             }
         }
         .services_type_detail {
-            height: 535px;
+            height: 95%;
             width: 100%;
             border-top: 1px #07A9E1 solid;
             .services_add {
@@ -163,7 +164,7 @@
 
             .services_list {
                 background:linear-gradient(to right, #E5F6FF, #CFEEFA);
-                height: 530px;
+                height: 100%;
                 .border_size{
                     position: absolute;
                     margin-left: -8px;
@@ -175,13 +176,20 @@
                 }
                     li {
                         height: 50px;
-                        line-height: 3.5;
+                        line-height: 50px;
                         width: 100%;
+                        vertical-align: middle;
                         border-bottom: 2px #FFFFFF dashed;
+                        position: relative;
                         i {
-                            float: right;
-                            clear: both;
-                            padding-top: 17px;
+                            display: inline-block;
+                            vertical-align: middle;
+                            position: absolute;
+                            width: 48px;
+                            height: 48px;
+                            top: 0;
+                            right: -16px;
+                            line-height: 46px;
                         }
                     }
                 }
@@ -193,13 +201,14 @@
         width: 32%;
         margin-right: 1.5%;  
         vertical-align: top;
+        height: 100%;
         >div{
             padding: 20px 20px;
         }
         .Cu {
-            height: 280px;
+            height: 48%;
             width: 100%;
-            margin-bottom: 20px;
+            margin-bottom: 7%;
             margin-right: 2.5%;
             border-radius: 5px;
             background-color: #fff;
@@ -210,17 +219,16 @@
             }
             .legend {
                 height: 10px;
-                width: 20px;
+                width: 10px;
                 display: inline-block;
                 background: linear-gradient(to right,#7DCEFB, #0DA9E2);
-                border-radius: 1px;
+                border-radius: 50%;
                 margin: 15px 4px 0 43%;
             }
         }
         .type {
-            height: 280px;
+            height: 48%;
             width: 100%;
-            margin-bottom: 20px;
             margin-right: 2.5%;
             border-radius: 5px;
             background-color: #fff;