feat: adjust the file structure of the customer component

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

1 files changed, 292 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.less b/usecaseui-portal/src/app/views/management/customer/customer.component.less
new file mode 100644
index 00000000..93e14455
--- /dev/null
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.less
@@ -0,0 +1,292 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.content {
+    display: flex;   
+    width: 100%;
+    min-height: 917px;
+    i.anticon {
+        cursor: pointer;
+        font-size: 18px;
+        padding: 2px;
+        &:hover{
+            color: #0DA9E2;
+        }
+    }
+    li.active{
+        &:hover{
+            cursor: pointer;
+            color: #3C4F8C;
+            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
+            background-color: #e6f7ff;
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 32%;
+        margin-right: 1.5%;  
+        vertical-align: top;
+        height: 100%;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu,.type{
+            min-height: 438px;
+            height: 46.5vh;
+            width: 100%;
+            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: #0DA9E2;
+                font-family:"ArialMT";
+            }
+        }
+        .Cu {
+            margin-bottom: 20px;
+            p{
+                margin-bottom: 60px;
+            }
+            div:last-child{
+                color: #ddd; 
+                font-weight: 700;
+                font-size: 19px;
+                height: 200px;
+                text-align: center;
+                line-height: 8;
+            }
+        }
+        .type {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            app-bar{
+                position: relative;
+                left: 0px;
+                top: -6%;
+                width: 100%;
+            }
+            .footname{
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #3C4F8C;
+                margin-bottom: 20px;
+                
+                img{
+                    margin-right: 5px;
+                    margin-bottom: 3px;
+                }
+            }
+            // &::after{
+            //     display: block;
+            //     content: '';
+            //     height: 1px;
+            // }
+
+        }
+    }
+    .customer {
+        min-height: 897px;
+        height: 95.7vh;
+        overflow: hidden;
+        width: 32%;
+        margin-right: 1.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);
+        display: inline-block;
+        vertical-align: top;
+        .customer_title {
+            line-height: 3.5em;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .customers {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 30px;
+                    height: 30px;
+                    float: right;
+                    margin-top: 7px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .customer_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            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);
+                    color: #3C4F8C;
+                }
+                li {
+                    display:flex; 
+                    align-items: center;                 
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    cursor: pointer;
+                    color: rgba(60,79,140,0.5);
+                    img {
+                        width: 30px;
+                        height: 30px;
+                    }
+                    span {
+                        width: 70%;
+                        padding-left: 10%;
+                        display: block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        min-height: 897px;
+        height: 95.7vh;
+        overflow: hidden;
+        border-radius: 5px;
+        width: 32%;
+        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.5em;
+            //height: 5%;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .servicess {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 40px;
+                    height:40px;
+                    float: right;
+                    margin-right: -10px;
+                    margin-top: 5px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .services_type_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            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_content {
+                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                height: 100%;
+                .border_size{
+                    position: absolute;
+                    margin-left: -8px;
+                    width: 0;
+                    height: 0;
+                    border-top: 24px solid transparent;
+                    border-bottom: 24px solid transparent;
+                    border-right: 10px solid #E5F6FF;
+                }
+                .services_list{ 
+                    padding:0 20px;
+                    li {
+                        height: 50px;
+                        line-height: 50px;
+                        width: 100%;
+                        vertical-align: middle;
+                        border-bottom: 2px #FFFFFF dashed;
+                        position: relative;
+                        color: #3C4F8C;
+                        i {
+                            display: inline-block;
+                            vertical-align: middle;
+                            position: absolute;
+                            width: 48px;
+                            height: 48px;
+                            top: 0;
+                            right: -16px;
+                            line-height: 46px;
+                        }
+                    }
+                }
+                    
+            }
+            
+        }
+    }
+
+    
+}
\ No newline at end of file