feat: change the project structure and add mock data function

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

1 files changed, 254 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
new file mode 100644
index 00000000..7d329230
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
@@ -0,0 +1,254 @@
+/*
+    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%;
+    height: 100%;
+    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;
+        }
+    }
+    .customer {
+        height: 100%;
+        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;
+            //height: 5%;
+            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;
+                }
+            }
+        }
+        .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: inline-block;
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        overflow: hidden;
+        height: 100%;
+        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;
+                }
+            }
+        }
+        .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 {
+                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;
+                }
+                    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;
+                        }
+                    }
+                }
+            
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 32%;
+        margin-right: 1.5%;  
+        vertical-align: top;
+        height: 100%;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu {
+            height: 48%;
+            width: 100%;
+            margin-bottom: 7%;
+            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";
+            }
+            .legend {
+                height: 10px;
+                width: 10px;
+                display: inline-block;
+                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+                border-radius: 50%;
+                margin: 15px 4px 0 43%;
+            }
+        }
+        .type {
+            height: 48%;
+            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";
+                
+            }
+        }
+    }
+}
\ No newline at end of file