diff options
Diffstat (limited to 'usecaseui-portal/src/app')
5 files changed, 39 insertions, 26 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index e0ce4b99..78cf3134 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -63,19 +63,21 @@ hr { } .model .submit{ position: absolute; - width:84px; + width:116px; height: 35px; top: 10px; right: 85px; color: #fff; font-size: 18px; - background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + background:#0DA9E2; + /*background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important;*/ border-radius:4px; border: none!important; border-color:rgba(0,0,0,0)!important; } .model .submit:hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + background:#09C6E2; + /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ border: none; } .model .creation { @@ -185,11 +187,13 @@ hr { margin: 0 15px; } .model .sitemodel .action button:nth-child(2){ - background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + /*background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);*/ + background: #0DA9E2; color: #fff; } .model .sitemodel .action button:nth-child(2):hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ + background:#09C6E2; } .model nz-table tbody td i.anticon:hover { @@ -208,8 +212,8 @@ hr { } .model .site>button:hover,.model .sitegroup>button:hover,.sitemodel h3 button:hover,.model .back:hover{ background:#ffffff; - color: #3F9CFF; - border:1px solid #3F9CFF; + color: #0DA9E2; + border:1px solid #0DA9E2; } .sitemodel h3>button{ float: right; @@ -270,11 +274,13 @@ hr { margin: 0 8px; } .sitegroupmodal .action button:nth-child(2){ - background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + /*background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);*/ + background:#0DA9E2; color: #fff; } .sitegroupmodal .action button:nth-child(2):hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ + background:#09C6E2; } .mask{ width: 100%; @@ -288,18 +294,16 @@ hr { /* chart */ .model .chart { - width: 100%; + width: 98%; padding: 10px; /*height: 30vh;*/ + margin: 0 auto; color: #06A7E2; font-size: 16px; font-weight: 500; margin-bottom: 30px; - /*box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);*/ - /*background: url("../../../assets/images/ccvpn-createbanner.png") no-repeat;*/ - /*background-size: 100% 100%;*/ - background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); - /*background-color:rgba(188, 231, 248, 1);*/ + background: #EEF9FF; + /*background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%);*/ border-radius:4px; } .model .chart #createChart { diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index f1906285..f64e1237 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -20,7 +20,8 @@ <div class="top-title"> <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submit()"><span>Create</span></button> + <button class="submit" nz-button (click)="submit()"><i + class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span>Create</span></button> <button class="back" nz-button (click)="goback()"> <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> </button> @@ -29,8 +30,7 @@ <!-- chart --> <div class="chart"> <span style="padding: 25px;display: inline-block;"> - Create Service - {{createParams.commonParams.templateType}} + Instance Topology </span> <div id="createChart"> <svg width="100%" height="100%"> diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css index 99b58160..0347ce72 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css @@ -38,13 +38,17 @@ #tpContainer{ + position: relative; width:100%; - /*height: 80%;*/ + height: 95%; + margin-top: 15px; float: left; + background: #EEF9FF; } .model { + position: relative; padding: 15px; - height: 100%; + height: 100vh; width: 100%; } .model .creation { @@ -53,7 +57,9 @@ /*float: left;*/ width: 20%; position: absolute; - right: 1%; + left: 0; + margin-top: 30px; + margin-left: 30px; border-radius: 5px; box-shadow: 0 0 10px #9e9e9e; padding: 10px; diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts index 03cc5065..9ec321c5 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts index 48de5636..03894ba9 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -124,9 +124,9 @@ export class CcvpnNetworkComponent implements OnInit { network = []; delcloud = false; - winWidth = $('.content').width(); - winHeight = 600; - charge = -300; + winWidth = $('#tpContainer').width(); + winHeight = $('#tpContainer').height(); + charge = -300; imgmap = { '1': './assets/images/cloud-county1.png', @@ -274,7 +274,10 @@ export class CcvpnNetworkComponent implements OnInit { .attr('width', width) .attr('height', height) .attr('id', 'content-svg') - .style('pointer-events', 'all'), + .style('pointer-events', 'all') + .style('position','absolute') + .style('top','1%') + .style('right','2%'), graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'), _g_nodes = graph.selectAll('g.node') |