summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/views/services/services-list/services-list.component.less
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/services-list.component.less')
-rw-r--r--usecaseui-portal/src/app/views/services/services-list/services-list.component.less380
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