Page style created by CCVPN instance

Change-Id: I281c28ffb640d9cdaa220e89099f1f63960667c2
Issue-ID: USECASEUI-220
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

1 files changed, 65 insertions, 76 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