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, 380 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
new file mode 100644
index 00000000..392d1b3a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -0,0 +1,380 @@
+/*
+    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.
+*/
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.ant-tabs-bar{
+    margin-bottom: 0!important;
+}
+.mask{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.65);
+    top:0;
+}
+.loading{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    margin-top: -50px;
+    margin-left: -50px;
+    z-index: 1001;
+    text-align: center;
+    background: transparent;
+    p{
+        color: #0DA9E2;
+        text-align: center;
+        position: absolute;
+        width: 300px;
+        height: 30px;
+        line-height: 30px;
+        top: 71%;
+        left: 36%;
+        margin-top: -150px;
+        margin-left: -150px;
+    }
+    img{
+        width: 300px;
+        height: 300px;
+        position: absolute;
+        top: 50%;
+        left: 36%;
+        margin-top: -150px;
+        margin-left: -150px;
+    }
+}
+.action {
+    margin-bottom: 15px;
+    padding: 28px;
+    background: #ffffff;
+    position: relative;
+    span {
+        display: inline-block;
+        font: 700 14px "Arial";
+        color: #3C4F8C;
+        margin-right: 5px;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        background-color:#ffffff;
+        :hover{
+            border-color: #48C6EF;
+        }
+        button {
+            width: 165px;
+            height: 42px;
+            background-color:#ffffff;
+            text-align: left;
+            border-color: #EEEEEE;
+            span {
+                font-weight: 400;
+                color: #3C4F8C;
+                display: inline-block;
+                width: 120px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-top: 2px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+            }
+        }
+    }
+    //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body.
+    .create {
+        position: absolute;
+        right: 3%;
+        top:50%;
+        width:116px;
+        height:42px;
+        background:#0DA9E2;
+        border-radius:6px;
+        margin-top: -15px;
+        span {
+            color: #fff;
+            font-weight: 400;
+            font-size: 18px;
+        }
+        .anticon-plus-circle-o{
+            font-size: 18px;
+        }
+    }
+    .create.ant-btn.ant-btn-primary{
+        border: none;
+    }
+    .create:hover{
+        background:#09C6E2;
+    }
+
+}
+.top-num{
+    overflow: auto;
+    width: 100%;
+}
+.top-list{
+    position: relative;
+    width:29%;
+    height:170px;
+    margin: 10px 1%;
+    float: left;
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+    border-radius:2px;
+}
+.top-num .top-list:nth-child(2){
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+    background:url("../../../../assets/images/servicelist-e2e.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:45%;
+    left: 50px;
+    margin-top: -30px;
+    background:#E0EDFF;
+    border:2px solid rgba(224,237,255,1);
+    border-radius: 50%;
+    font-size:16px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+}
+.top-list {
+    .top-list-text {
+        position: absolute;
+        text-align: right;
+        height: 40px;
+        line-height: 20px;
+        right: 50px;
+        color: #fff;
+        p {
+            font-size: 14px;
+            width: 250px;
+            margin: 15px 0 0 0;
+            height: 13px;
+            clear: both;
+            span {
+                display: inline-block;
+                font-weight: 500;
+                text-align: right;
+                float: right;
+            }
+            span:nth-child(1) {
+                font-size: 18px;
+                width: 40px;
+                min-width: 40px;
+            }
+            span:nth-child(2) {
+                width: 85px;
+                font-size: 16px;
+            }
+        }
+        p:nth-child(1) {
+            margin-top: 25px;
+        }
+    }
+    .service-description{
+        font-size: 14px;
+        width: 250px;
+        height: 13px;
+        position: absolute;
+        bottom: 30px;
+        left: 50px;
+        color: #3C4F8C;
+    }
+}
+.list {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    nz-table {
+        tbody {
+            td {
+                position: relative;
+                span.active {
+                    font-size: 14px;
+                    color: #147dc2;
+                }
+                span.closed {
+                    font-size: 14px;
+                    color: red;
+                }
+                span.onboarding{
+                    font-size: 12px;
+                    color: #147dc2;
+                }
+                span.updating{
+                    font-size: 12px;
+                    color: blue;
+                }
+                span.deleting {
+                    font-size: 12px;
+                    color: red;
+                }
+                span.creating {
+                    font-size: 12px;
+                    color: green;
+                }
+                span.scaling {
+                    font-size: 12px;
+                    color: purple;
+                }
+                span.healing {
+                    font-size: 12px;
+                    color: orangered;
+                }
+                i.anticon {
+                    cursor: pointer;
+                    font-size: 18px;
+                    padding: 2px;
+                    &:hover{
+                        color: #147dc2;
+                    }
+                }
+                .cannotclick {
+                    pointer-events: none;
+                    color: #aaa;
+                    opacity: 0.6;
+                }
+                .icon-more{
+                    position: absolute;
+                    width: 115px;
+                    height: 90px;
+                    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;
+                        cursor: pointer;
+                        .anticon{
+                            width: 18px;
+                            height: 18px;
+                            background: url("../../../../assets/images/scale.png") no-repeat;
+                        }
+                        .anticon.anticon-update{
+                            background: url("../../../../assets/images/update.png") no-repeat;
+                        }
+                        span{
+                            margin-left: 5px;
+                        }
+                    }
+                    li:hover{
+                        color: #0DA9E2;
+                        .anticon{
+                            background: url("../../../../assets/images/scale-active.png") no-repeat;
+                        }
+                        .anticon.anticon-update{
+                            background: url("../../../../assets/images/update-active.png") no-repeat;
+                        }
+                    }
+                }
+            }
+            tr.childtr {
+                td {
+                    font-size: 12px;
+                    color: #147dc2;
+                }
+            }
+        }
+    }
+}
+
+
+.detailComponent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #f3f3f3;
+    overflow-y: auto;
+    z-index: 3;
+}
+.createComponent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #F7F8FC;
+    overflow-y: auto;
+    z-index: 3;
+}
+
+.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
+    width:120px;
+    height: 34px;
+    line-height: 34px;
+    margin-bottom: 0!important;
+    text-align: center;
+    background:rgba(158, 158, 158, 0.38);
+    border-radius:4px
+}
+
+.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: 320px;
+    height: 32px;
+    line-height: 32px;
+    margin: 35px auto;
+}
+.select-list>span{
+    text-align: right;
+    width: 110px!important;
+    line-height: 32px;
+}
+
+.listdisplay{
+    display: none;
+}
\ No newline at end of file