Add user service type management module

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

1 files changed, 208 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
new file mode 100644
index 00000000..b7b4bc24
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.less
@@ -0,0 +1,208 @@
+.content {
+    width: 100%;
+    height: 100vh;
+    i.anticon {
+        cursor: pointer;
+        font-size: 18px;
+        padding: 2px;
+        &:hover{
+            color: #147dc2;
+        }
+    }
+    li.active{
+        &:hover{
+            cursor: pointer;
+            color: #3C4F8C;
+            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
+            background-color: #e6f7ff;
+        }
+    }
+    .customer {
+        height: 580px;
+        margin-right: 2.5%;
+        border-radius: 5px;
+        width: 31%;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .customer_title {
+            line-height: 3.5;
+            height: 50px;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .customers {
+                padding: 0 20px;
+                span {
+                    color: #3F9CFF;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 30px;
+                    float: right;
+                    margin-top: 7px;
+                }
+            }
+        }
+        .customer_detail {
+            height: 535px;
+            width: 100%;
+            border-top: 1px #07A9E1 solid;
+            .customer_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .customer_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .customer_addbut {
+                    float: right;
+                    margin-top: 9px;
+                    width: 28%;
+                    background-color: #0DA9E2;
+                }
+            }
+            .customer_list {
+                .active {
+                    background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                }
+                li {                  
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    img {
+                        width: 10%;
+                    }
+                    span {
+                        width: 80%;
+                        padding-left: 10%;
+                        display: inline-block;
+                        color: rgba(60,79,140,0.5);
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        height: 580px;
+        margin-right: 2.5%;
+        border-radius: 5px;
+        width: 31%;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .services_type_title {
+            line-height: 3.5;
+            height: 50px;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .servicess {
+                padding: 0 20px;
+                span {
+                    color: #3F9CFF;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 50px;
+                    float: right;
+                    margin-top: 5px;
+                }
+            }
+        }
+        .services_type_detail {
+            height: 535px;
+            width: 100%;
+            border-top: 1px #07A9E1 solid;
+            .services_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .services_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .services_addbut {
+                    float: right;
+                    margin-top: 5px;
+                    width: 28%;
+                    clear: both;
+                    background-color: #0DA9E2;
+                }
+            }
+            .services_list {
+                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                height: 530px;
+                li {
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    border-bottom: 2px #FFFFFF dashed;
+                    i {
+                        float: right;
+                        clear: both;
+                        padding-top: 17px;
+                    }
+                }
+
+            }
+            
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 31%;
+        vertical-align: top;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu {
+            height: 280px;
+            width: 100%;
+            margin-bottom: 20px;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#3F9CFF;
+                font-family:"ArialMT";
+            }
+            .legend {
+                height: 10px;
+                width: 20px;
+                display: inline-block;
+                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+                border-radius: 1px;
+                margin: 15px 4px 0 43%;
+            }
+        }
+        .type {
+            height: 280px;
+            width: 100%;
+            margin-bottom: 20px;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#3F9CFF;
+                font-family:"ArialMT";
+                
+            }
+        }
+    }
+}
\ No newline at end of file