summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css141
-rw-r--r--usecaseui-portal/src/styles.less41
2 files changed, 69 insertions, 113 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 78cf3134..99095ec3 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -94,41 +94,47 @@ hr {
color: #000;
}
/* SOTN VPN */
-.model .creation .sotnvpn ul li {
- display: inline-block;
- height: 40px;
- width: 24.5%;
- margin-bottom: 40px;
+.model .creation .sotnvpn .service-title{
+ margin-bottom: 35px;
}
-.model .creation .sotnvpn ul li span {
+.model .creation .sotnvpn .service-title .lable {
display: inline-block;
- width: 110px;
+ width: 90px;
font: 700 14px "Arial";
color: #3C4F8C;
vertical-align: middle;
+ margin-left: 5px;
}
-.model .creation .sotnvpn ul li input {
+.model .creation .sotnvpn .service-title input {
width: 234px;
height: 40px;
border-radius:4px;
outline: none;
+ margin-right: 50px;
}
/* Site List */
/* addsite model */
-.model .sitemodel {
+.model .sitemodel,.model .sotnnpnmodel{
position: absolute;
z-index: 1001;
left: 50px;
top: 60px;
background-color: #fff;
/*box-shadow: 0px 0px 20px #000;*/
- width:1300px;
+ width:1500px;
/*width:1300px;px*/
- max-height: 90%;
+ height: 81%;
border-radius:2px;
- overflow-y: auto;
+ overflow:auto;
+}
+.model .sotnnpnmodel{
+ width: 1000px;
+ height: 53%;
+ top:200px;
+ left: 50%;
+ margin-left: -500px;
}
-.model .sitemodel h3,.sitegroupmodal>h3{
+.model .sitemodel h3,.model .sotnnpnmodel h3{
width: 96%;
height: 40px;
line-height: 35px;
@@ -145,17 +151,20 @@ hr {
border-image: linear-gradient(#07A9E1,#30D9C4) 100 100;
border-radius:2px;
}
-.model .sitemodel .inputs {
+.model .sitemodel .inputs,.model .sotnnpnmodel .inputs {
padding: 10px 20px 0;
}
-.model .sitemodel .inputs ul li {
+.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li {
display: inline-block;
height: 35px;
line-height: 35px;
width: 24.5%;
margin-bottom: 20px;
}
-.model .sitemodel .inputs ul li span {
+.model .sotnnpnmodel .inputs ul li{
+ width: 31%;
+}
+.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span {
display: inline-block;
line-height: 35px;
font-size: 14px;
@@ -170,13 +179,21 @@ hr {
float: right;
margin-right: 25px;
}
-.model .sitemodel .action {
+.model .sotnnpnmodel .inputs input{
+ width: 186px;
+ float: left;
+ margin-left: 20px;
+}
+.model .sitemodel .action,.model .sotnnpnmodel .action {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
+ cursor: pointer
}
-
-.model .sitemodel .action button{
+.model .sotnnpnmodel .action{
+ margin-top: 70px;
+}
+.model .sitemodel .action button,.model .sotnnpnmodel .action button{
width: 126px;
height:40px;
background:#EEEEEE;
@@ -186,12 +203,12 @@ hr {
font-size: 16px;
margin: 0 15px;
}
-.model .sitemodel .action button:nth-child(2){
+.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){
/*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{
+.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{
/*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/
background:#09C6E2;
}
@@ -202,7 +219,7 @@ hr {
}
/* site table */
-.model .site>button,.model .sitegroup>button,.sitemodel h3 button{
+.sitemodel h3 button,.sotnnpnmodel h3 button{
color: #D7D7D7;
width:32px;
height:32px;
@@ -210,12 +227,12 @@ hr {
border-radius:4px;
border:1px solid #D7D7D7;
}
-.model .site>button:hover,.model .sitegroup>button:hover,.sitemodel h3 button:hover,.model .back:hover{
+.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{
background:#ffffff;
color: #0DA9E2;
border:1px solid #0DA9E2;
}
-.sitemodel h3>button{
+.sitemodel h3>button,.sotnnpnmodel h3>button{
float: right;
width: 30px;
height: 30px;
@@ -231,57 +248,6 @@ hr {
}
/* WAN Port */
-/* Site Group List */
-
-.model .sitegroupmodal {
- position: absolute;
- z-index: 1001;
- width: 360px!important;
- height: 450px!important;
- left:35%;
- top:40%;
- margin-top: -188px;
- margin-left: -180px;
- background: #ffffff;
-}
-
-.sitegroupmodal .list-div{
- width: 100%;
- height: 32px !important;
- line-height: 32px;
- margin-bottom: 10px;
-}
-.sitegroupmodal .list-div > span {
- line-height: 32px !important;
- color: #3C4F8C;
- margin-left: 30px;
-}
-.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select {
- margin-right: 50px;
-}
-.sitegroupmodal .action{
- text-align: center;
- margin-top: 30px;
-}
-.sitegroupmodal .action button{
- width: 126px;
- height:40px;
- background:#EEEEEE;
- border-radius:2px;
- border: none!important;
- color: #9DA7C5;
- font-size: 16px;
- 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:#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:#09C6E2;
-}
.mask{
width: 100%;
height: 100%;
@@ -323,7 +289,30 @@ hr {
overflow: hidden;
text-overflow: ellipsis;
}
-.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{
+.model .creation .sotnvpn,.model .creation .site{
background: #fff;
padding: 30px 30px 0 30px;
}
+.siteWanTab{
+ width: 96%;
+ margin: 0 auto;
+ margin-top: 10px;
+}
+.siteWanTab th{
+ padding: 10px 8px;
+ color: #3C4F8C;
+ font-size: 16px;
+}
+.siteWanTab tr td{
+ padding: 10px 5px;
+}
+.siteWanTab .tr-border{
+ border-bottom: 1px solid #EDEDED;
+}
+.addListBtn{
+ margin-right: 30px;
+ color: #06A7E2;
+ border: none;
+ background: rgba(229,238,252,0.8);
+ cursor: pointer;
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index b12aa622..86c5b08f 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -384,7 +384,7 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
}
;
.ant-tabs-tab {
- width: 175px;
+ width: 230px;
height: 59px !important;
line-height: 38px;
text-align: center;
@@ -437,7 +437,7 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
}
}
-.model .creation .site nz-table, .model .creation .sitegroup nz-table,.model .detaildata .site nz-table, .model .detaildata .sitegroup nz-table {
+.model .creation .site nz-table,.model .detaildata .site nz-table,.model .creation .sotnvpn nz-table,.model .detaildata .sotnvpn nz-table{
.ant-table-wrapper {
margin: 20px 0;
.ant-table-small {
@@ -488,10 +488,10 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
.ant-table-thead{
tr{
height: 45px;
- color:rgba(60,79,140,0.5);
+ color: #3C4F8C;
th{
border: none;
- color:rgba(60,79,140,0.5);
+ color: #3C4F8C;
font-size: 16px;
font-weight: 500;
padding: 8px 0!important;
@@ -527,39 +527,6 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod
}
}
-.sitegroupmodal nz-table {
- .ant-table-wrapper {
- margin: 0 auto;
- margin-top: 30px;
- width: 340px;
- }
- .ant-table-small {
- border: none;
- border-top: 1px solid #e8e8e8;
- border-radius: 4px;
- .ant-table-body{
- table{
- padding: 0 1px;
- .ant-table-thead{
- tr{
- font-size: 16px;
- height: 45px;
- color: #3C4F8C;
- }
- }
- }
- }
- .ant-table-placeholder{
- margin-top: 30px;
- font-size: 16px;
- background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
- span {
- display: inline-block;
- padding-top: 50px;
- }
- }
- }
-}
//2019.02.01 gong add
.list#services-list nz-table{
.ant-table-wrapper{