Page style created by CCVPN instance

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

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{