From eedea1498658f6c6a07cbad256bca1ab8218ea06 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 13 Feb 2019 09:41:51 +0800 Subject: [PATCH] Fix instance instantiation for CCVPN Change-Id: I0f9eefab631fabfaf8ea73f35a65a505e91b5bdf Issue-ID: USECASEUI-220 Signed-off-by: guochuyicmri --- .../ccvpn-creation/ccvpn-creation.component.css | 258 +++++--- .../ccvpn-creation/ccvpn-creation.component.html | 646 +++++++++++---------- .../app/ccvpn-creation/ccvpn-creation.component.ts | 11 + .../services-list/services-list.component.html | 18 +- .../services-list/services-list.component.less | 33 +- .../services-list/services-list.component.ts | 8 + usecaseui-portal/src/assets/images/noDatalist.png | Bin 0 -> 6997 bytes usecaseui-portal/src/styles.less | 241 +++++++- 8 files changed, 832 insertions(+), 383 deletions(-) create mode 100644 usecaseui-portal/src/assets/images/noDatalist.png 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 35fdbef5..54b92d03 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -25,80 +25,125 @@ hr { margin-bottom: 10px; } .model { - background-color: #fff; - height: 90%; + background-color: #F7F8FC; + /*height: 100%;*/ overflow-y: auto; } +.creation-model{ + position: relative; +} +.top-title{ /*2019.01.22 add*/ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} .model .back { position: absolute; top: 10px; right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + color: #fff; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + /*font: 700 20px/20px "Arial";*/ + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + /*top:10px;*/ + +} +.model .submit{ + position: absolute; + width:84px; + 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; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.model .submit:hover,.model .back:hover,.model .site>button:hover,.model .sitegroup>button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; } .model .creation { - position: relative; - width: 60%; - height: 100%; + width: 100%; + /*height: 60vh;*/ overflow-y: auto; border-radius: 5px; padding: 15px; } -.model .creation h3.title { - height: 20px; - font: 700 20px/20px "Arial"; - color: #666; -} .model .creation h3 { height: 20px; font: 700 16px/20px "Arial"; margin: 5px 0px; color: #000; } -.model .creation .submit { - position: absolute; - top: 10px; - right: 20px; -} /* SOTN VPN */ .model .creation .sotnvpn ul li { display: inline-block; - height: 35px; - width: 49.5%; + height: 40px; + width: 24.5%; + margin-bottom: 40px; } .model .creation .sotnvpn ul li span { display: inline-block; width: 110px; font: 700 14px "Arial"; - color: #3fa8eb; + color: #3C4F8C; vertical-align: middle; } .model .creation .sotnvpn ul li input { - width: 165px; + width: 234px; + height: 40px; + border-radius:4px; + outline: none; } /* Site List */ /* addsite model */ .model .sitemodel { position: absolute; - z-index: 10; - left: 10px; + z-index: 1001; + left: 100px; top: 60px; background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 60%; + /*box-shadow: 0px 0px 20px #000;*/ + width:650px; + /*width:1300px;px*/ max-height: 90%; - border-radius: 5px; + border-radius:2px; overflow-y: auto; } -.model .sitemodel h3 { - height: 30px; - font: 700 16px/30px "Arial"; - border-bottom: 1px solid #aaa; - padding-left: 10px; -} -.model .sitemodel h4 { - height: 30px; - font: 700 16px/30px "Arial"; - padding-left: 10px; - background-color: #ddd; +.model .sitemodel h3,.sitegroupmodal>h3{ + width: 92%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + /*padding-left: 10px;*/ + color: #06A7E2; + /*color: #ffffff;*/ + /*background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);*/ + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; } .model .sitemodel .inputs { padding: 10px 20px 0; @@ -106,21 +151,46 @@ hr { .model .sitemodel .inputs ul li { display: inline-block; height: 35px; + line-height: 35px; width: 49.5%; } .model .sitemodel .inputs ul li span { display: inline-block; - width: 110px; - font: 700 14px "Arial"; - color: #3fa8eb; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; vertical-align: middle; + float: left; } -.model .sitemodel .inputs input { - width: 165px; +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { + width: 156px; + float: right; + margin-right: 30px; } .model .sitemodel .action { - float: left; - padding: 10px; + text-align: center; + margin-top: 30px; + margin-bottom: 20px; +} + +.model .sitemodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.sitemodel h3 button{ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.sitemodel h3 button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; } .model nz-table tbody td i.anticon:hover { @@ -129,6 +199,24 @@ hr { } /* site table */ +.model .site>button,.model .sitegroup>button,.sitemodel h3>button{ + width:36px; + height:36px; + color: #fff; + background:linear-gradient(270deg,rgba(63,156,255,1) 0%,rgba(98,193,246,1) 100%); + border-radius:4px; + border: none!important; +} +.sitemodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} +.model nz-table tbody th{ + color:rgba(60,79,140,0.5); + font-size: 16px; +} .model .site nz-table tbody td i.anticon:hover { color: #3fa8eb; cursor: pointer; @@ -136,49 +224,75 @@ hr { /* WAN Port */ /* Site Group List */ -.model .sitegroup .sitegroupmodal { + +.model .sitegroupmodal { position: absolute; - z-index: 10; - left: 200px; - top: 300px; - background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 330px; - border-radius: 5px; + z-index: 1001; + width: 360px!important; + height: 376px!important; + left:35%; + top:40%; + margin-top: -188px; + margin-left: -180px; + background: #ffffff; } -.model .sitegroup .sitegroupmodal h3 { - height: 30px; - font: 700 16px/30px "Arial"; - border-bottom: 1px solid #aaa; - padding-left: 10px; +.sitegroupmodal .list-div{ + width: 100%; + height: 32px !important; + line-height: 32px; + margin-bottom: 10px; } -.model .sitegroup .sitegroupmodal .inputs { - padding: 10px 20px 0; +.sitegroupmodal .list-div > span { + line-height: 32px !important; + color: #3C4F8C; + margin-left: 30px; } -.model .sitegroup .sitegroupmodal span { - display: inline-block; - width: 100px; - margin-bottom: 10px; +.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select { + margin-right: 50px; } -.model .sitegroup .sitegroupmodal .inputs input { - width: 165px; +.sitegroupmodal .action{ + text-align: center; + margin-top: 30px; } -.model .sitegroup .sitegroupmodal .action { - float: right; - padding: 10px; +.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%); + color: #fff; +} +.sitegroupmodal .action button:nth-child(2):hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; +} +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; } -/* 图 */ +/* chart */ .model .chart { - width: 40%; + width: 100%; padding: 10px; - height: 100%; + /*height: 30vh;*/ border-left: 10px solid #f3f3f3; + margin-bottom: 30px; + box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); } .model .chart #createChart { width: 100%; - height: 80%; + /*height: 50vh;*/ margin-top: 20px; position: relative; } @@ -193,3 +307,7 @@ hr { overflow: hidden; text-overflow: ellipsis; } +.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{ + background: #fff; + padding: 30px; +} 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 15486238..1b54b7bc 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -13,301 +13,361 @@ See the License for the specific language governing permissions and limitations under the License. --> -

Services List

-
-
- - -
-

{{createParams.commonParams.templateType}} Instance Creation

-
-

SOTN VPN Info

-
    -
  • Name:
    • -
  • Description:
    • -
  • Start Time: - - -
    • -
  • End Time: - - -
    • -
  • COS: - - - - -
    • -
  • Reroute Enabled:
    • -
  • Service Level Specification:
    • -
  • Dual Link: - - - - - -
    • -
  • CIR:
    • -
  • EIR:
    • -
  • CBS:
    • -
  • EBS:
    • -
  • Color Aware:
    • -
  • Coupling Flag:
    • -
-
- -
-

Site List

- - - - - NO. - Name - Description - Post Code - Address - VLAN - Action - - - - - - {{i+1}} - {{item.baseData.name}} - {{item.baseData.description}} - {{item.baseData.postcode}} - {{item.baseData.address}} - {{item.baseData.vlan}} - -   - - - - - - -
- -
-

Site_Group List

- -
-

Site_Group

-
- Group Name:
- Topology: - - - - - - - - - Site Name - Role - - - - - - {{ item.siteName }} - - - - - - - - - -
-
- - -
-
- - - - NO. - Group Name - Topology - Sites - Role - Action - - - - - - {{i+1}} - {{item.name}} - {{item.topology}} - {{item.sites}} - {{item.role}} - -   - - - - - - -
+ + +
+ +
+

{{createParams.commonParams.templateType}} Instance Creation

+
+ + +
+
+ +
+ Create Service + {{createParams.commonParams.templateType}} +
+ + + + + + + + {{ item.name }} + + - Create -
- -
-

Site_Enterprise Service

-
-
    -
  • Name:
    • -
  • Description:
    • -
  • Type: - - - - -
    • -
  • Role: - - - - -
    • -
  • PostCode:
    • -
  • VLAN:
    • -
  • Address: - - - -
    • -
+ + +
-
-

CPE

-
-
    -
  • Name:
    • -
  • Version:
    • -
  • ESN:
    • -
  • Class: - - - - -
    • -
  • System IP:
    • -
  • Vendor:
    • -
  • Type:
    • -
-
-

WAN Port

-
- - - - NO. - Name - Description - PortType - PortNumber - IPAddress - Action - - - - - - {{i+1}} - {{item.sitewanport_name}} - {{item.sitewanport_description}} - {{item.sitewanport_portType}} - {{item.sitewanport_portNumber}} - {{item.sitewanport_ipAddress}} - - - - - - - -
- -
    -
  • Name:
    • - -
  • Description:
    • -
  • Port Type: - - - - - - - - -
    • -
  • Port Number:
    • -
  • Ip Address:
    • -
  • Provider IP Address:
    • -
  • Transport Nerwork:
    • -
  • Input Bandwidth:
    • -
  • Output Bandwidth:
    • -
- +
+ + +
+ +
    +
  • Name:
    • +
  • Description:
    • +
  • Start Time: + + +
    • +
  • End Time: + + +
    • +
  • COS: + + + + +
    • +
  • Reroute Enabled: + +
    • +
  • Service Level Specification:
    • +
  • Dual Link: + + + + + +
    • +
  • CIR:
    • +
  • EIR:
    • +
  • CBS:
    • +
  • EBS:
    • +
  • Color Aware: + +
    • +
  • Coupling Flag: + +
    • +
+
+ + +
+ + + + + + NO. + Name + Description + Post Code + Address + VLAN + Action + + + + + + {{i+1}} + {{item.baseData.name}} + {{item.baseData.description}} + {{item.baseData.postcode}} + {{item.baseData.address}} + {{item.baseData.vlan}} + +   + + + + + + +
+ + +
+ + + + + + NO. + Group Name + Topology + Sites + Role + Action + + + + + + {{i+1}} + {{item.name}} + {{item.topology}} + {{item.sites}} + {{item.role}} + + +   + + + + + + +
+ +
+ +
+

Site_Enterprise Service

+
+
    +
  • Name:
    • +
  • Description:
    • +
  • Type: + + + + +
    • +
  • Role: + + + + +
    • +
  • PostCode:
    • +
  • VLAN:
    • +
  • Address: + + + + +
    • +
+
+
+

CPE

+
+
    +
  • Name:
    • +
  • Version:
    • +
  • ESN:
    • +
  • Class: + + + + +
    • +
  • System IP:
    • +
  • Vendor:
    • +
  • Type:
    • +
+
+

WAN Port + +

+
+ + + + NO. + Name + Description + PortType + PortNumber + IPAddress + + + + + Action + + + + + + {{i+1}} + {{item.sitewanport_name}} + {{item.sitewanport_description}} + {{item.sitewanport_portType}} + {{item.sitewanport_portNumber}} + {{item.sitewanport_ipAddress}} + + + + + + + +
+ +
    +
  • Name:
    • + +
  • Description: +
    • +
  • Port Type: + + + + + + + + +
    • +
  • Port Number: +
    • +
  • Ip Address:
    • +
  • Provider IP Address: +
    • +
  • Transport Nerwork: +
    • +
  • Input Bandwidth: +
    • +
  • Output Bandwidth: +
    • +
+ +
-
- - -
-
- -
- Create Service - {{createParams.commonParams.templateType}} -
- - - - - - - - {{ item.name }} - - - - -
-
- +
+ + +
+
+ +
+

Site_Group

+
+
+ Group Name: + +
+
+ Topology: + + + + +
+ + + + + Site Name + Role + + + + + + {{ item.siteName }} + + + + + + + + + +
+
+ + +
+
+
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 4dd3f5c2..ace7ac42 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -19,11 +19,22 @@ export class CcvpnCreationComponent implements OnInit { @Input() namesTranslate; //输入项参数名字转换 @Output() closeCreate = new EventEmitter(); + //tabBarStyle + tabBarStyle = { + "height": "58px", + "width": "528px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; templateParameters = {}; getTemParameters(){ //获取模板参数 let chosedtemplates = Object.values(this.createParams.templates); // console.log(this.createParams); console.log(chosedtemplates); //模板id数组 + if(this.createParams.commonParams.templateType == 'SOTN'){ + this.tabBarStyle["width"]="351px"; + } let types = ["sotnvpn","site","sdwanvpn"]; chosedtemplates.forEach((item,index)=>{ this.myhttp.getTemplateParameters(types[index],item) diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index 28162251..ff977190 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -38,7 +38,8 @@ + class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"> Create +
@@ -96,7 +97,7 @@
-
+
{{data.tips}} - + - @@ -169,7 +171,8 @@ - +

Are you sure heal this instance?

Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || @@ -194,7 +197,7 @@
-

Are you sure delete this instance?

@@ -211,7 +214,8 @@ [(ngModel)]="gracefulTerminationTimeout">
- +

Are you sure heal this instance?

Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 3ef3fde2..0e59ca2e 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -24,6 +24,9 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.ant-tabs-bar{ + margin-bottom: 0!important; +} .action { margin-bottom: 15px; padding: 28px; @@ -85,16 +88,20 @@ hr { .create.ant-btn.ant-btn-primary{ border: none; } + .create:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + } } .top-num{ overflow: auto; + width: 100%; } .top-list{ position: relative; - width:360px; + width:22%; height:160px; - margin: 15px 15px 30px 15px; + margin: 15px 1.5%; float: left; background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); box-shadow:0px 10px 15px 2px rgba(222,222,222,1); @@ -102,17 +109,17 @@ hr { } .top-list .round{ position: absolute; - width:80px; - height:80px; - line-height: 80px; + width: 60px; + height: 60px; + line-height: 60px; text-align: center; top:50%; left: 10px; - margin-top: -40px; + margin-top: -30px; background:#E0EDFF; border:2px solid rgba(224,237,255,1); border-radius: 50%; - font-size:18px; + font-size:16px; font-family:ArialMT; color:#3C4F8C; } @@ -123,8 +130,11 @@ hr { line-height: 20px; top:50%; margin-top: -20px; - right: 20px; + right: 15px; color: #fff; + span:nth-child(1){ + font-size: 22px; + } } .list { background-color: #fff; @@ -207,9 +217,9 @@ hr { top: 0; width: 100%; height: 100vh; - background-color: #f3f3f3; + background-color: #F7F8FC; overflow-y: auto; - padding: 20px 32px; + //padding: 20px 32px; z-index: 3; } /*2019.01.14*/ @@ -236,3 +246,6 @@ hr { line-height: 32px; } +.listdisplay{ + display: none; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 7149ae2f..2dfbc942 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -140,6 +140,7 @@ export class ServicesListComponent implements OnInit { // createshow = false; createshow2 = false; + listDisplay = false; createData:Object={}; handleOk(): void { // console.log('Button ok clicked!'); @@ -153,6 +154,7 @@ export class ServicesListComponent implements OnInit { }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4}; this.createshow2 = true; + this.listDisplay = true; } } @@ -461,9 +463,11 @@ export class ServicesListComponent implements OnInit { closeCreate(obj){ if(!obj){ this.createshow = false; //close + this.listDisplay = false; return false; } this.createshow = false; + this.listDisplay = false; console.log(obj); let newData; //Newly created service data for the main table let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; @@ -584,9 +588,11 @@ export class ServicesListComponent implements OnInit { e2eCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + @@ -638,9 +644,11 @@ export class ServicesListComponent implements OnInit { nsCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // // step1 diff --git a/usecaseui-portal/src/assets/images/noDatalist.png b/usecaseui-portal/src/assets/images/noDatalist.png new file mode 100644 index 0000000000000000000000000000000000000000..a7f612ef9783df8ec87c73fa968cd1121966fb3a GIT binary patch literal 6997 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 literal 0 HcmV?d00001 diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 93e5251c..9574b8e0 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -46,6 +46,9 @@ nz-table { width: 40px; height: 40px; line-height: 40px; + background: rgba(255, 255, 255, 1); + border-radius: 2px; + margin: 0 5px; .ant-pagination-item-link, .ant-pagination-item-link:after { width: 40px; height: 40px; @@ -54,6 +57,7 @@ nz-table { } .ant-pagination-item.ant-pagination-item-active { background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border: none; border-radius: 2px; a { color: #fff; @@ -128,6 +132,9 @@ nz-pagination { width: 40px; height: 40px; line-height: 40px; + background: rgba(255, 255, 255, 1); + border-radius: 2px; + margin: 0 5px; .ant-pagination-item-link, .ant-pagination-item-link:after { width: 40px; height: 40px; @@ -137,6 +144,7 @@ nz-pagination { .ant-pagination-item.ant-pagination-item-active { background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); border-radius: 2px; + border: none; a { color: #fff; } @@ -248,6 +256,7 @@ nz-layout { //2019.01.21 add services-list.component.html +//creat框 nz-modal { .ant-modal { height: 628px; @@ -255,7 +264,22 @@ nz-modal { } .ant-modal-content{ height: 628px; - background:transparent; + background: transparent; + .ant-modal-close-x { + width: 25px; + height: 25px; + line-height: 25px; + margin-top: 12px; + margin-right: 12px; + } + .ant-modal-close-x::before { + color: #fff; + width: 25px; + height: 25px; + line-height: 25px; + border-radius: 50%; + border: 1px solid #fff; + } } .ant-modal-header,ant-modal-title,.ant-modal-footer{ background:transparent; @@ -299,7 +323,7 @@ nz-modal { button:nth-child(1){ background:#EEEEEE; border-radius:2px; - margin-left: 50px; + //margin-left: 50px; margin-right: 10px; span{ color: #9DA7C5; @@ -317,5 +341,216 @@ nz-modal { font-size: 14px !important; } } + button:nth-child(2):hover { + background: linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + } + } +} + +//2019.01.25 add ccvpn-creation.component.html +.model .creation nz-tabset { + box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); + .ant-tabs-bar { + .ant-tabs-nav-container { + height: 59px !important; + .ant-tabs-nav { + padding: 0 !important; + } + .ant-tabs-ink-bar { + display: none !important; + } + ; + .ant-tabs-tab { + width: 175px; + height: 59px !important; + line-height: 38px; + text-align: center; + border-radius: 4px 4px 0px 0px; + border: 1px solid rgba(238, 238, 238, 0.8); + border-bottom: 0; + color: #06A7E2; + font-size: 18px; + } + ; + .ant-tabs-nav .ant-tabs-tab-active { + color: #fff; + background: linear-gradient(90deg, rgba(99, 194, 246, 1) 0%, rgba(62, 155, 255, 1) 100%); + } + } + } + .ant-tabs-content { + background: #fff; + padding: 0; + .ant-tabs-tabpane { + height: 486px; + background: #fff; + border-radius: 0px 0px 4px 4px; + border: 1px solid rgba(63, 156, 255, 0.8); + } + } +} + +.model .creation .sotnvpn ul li nz-date-picker { + nz-picker { + .ant-calendar-picker { + .ant-calendar-picker-input.ant-input { + //width: 180px!important; + height: 40px !important; + } + } + } +} + +.model .creation .sotnvpn ul li nz-select { + .ant-select-selection.ant-select-selection--single { + height: 40px; + .ant-select-selection__rendered { + line-height: 35px; + } + } +} + +.model .creation .site nz-table, .model .creation .sitegroup nz-table { + .ant-table-wrapper { + margin: 20px 0; + .ant-table-small { + border: none; + .ant-table-tbody tr td { + padding: 10px 8px; + border-bottom: 5px solid #F7F8FC; + color: #3C4F8C; + } + .ant-table-tbody tr:hover > td { + background: #F7F7FA !important; + } + } + } + .ant-table-empty{ + .ant-spin-container{ + .ant-table-small{ + .ant-table-content{ + .ant-table-thead tr th{ + padding-bottom: 20px; + } + .ant-table-placeholder{ + background:url("./assets/images/noDatalist.png") no-repeat 50% 0; + span{ + display: inline-block; + padding-top: 60px; + } + } + } + } + } } -} \ No newline at end of file +} +//2019.01.29 add +.sitemodel nz-table { + .ant-table-wrapper { + + } + .ant-table-small { + border: none; + //border-top: 1px solid #e8e8e8; + border-radius: 4px; + .ant-table-body{ + table{ + padding: 0 1px; + .ant-table-thead{ + tr{ + height: 45px; + color:rgba(60,79,140,0.5); + th{ + border: none; + color:rgba(60,79,140,0.5); + font-size: 16px; + font-weight: 500; + } + } + } + .ant-table-tbody > tr > td{ + border-top: 1px solid #e8e8e8; + border-bottom: 2px solid #F7F8FC; + padding-top: 10px; + padding-bottom: 10px; + } + } + } + .ant-table-placeholder{ + font-size: 16px; + background:url("./assets/images/noDatalist.png") no-repeat 50% 0; + span { + display: inline-block; + padding-top: 50px; + } + } + } + +} + +.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{ + 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{ + .ant-spin-container{ + .ant-table-content{ + .ant-table-scroll{ + .ant-table-header{ + overflow:auto!important; + margin-bottom: 0!important; + } + } + } + } + } + .ant-table-empty{ + .ant-spin-container{ + .ant-table-content{ + .ant-table-thead tr th{ + padding-bottom: 20px; + border-bottom: 1px solid #e8e8e8; + } + .ant-table-placeholder{ + background:url("assets/images/noDatalist.png") no-repeat 50% 0; + border: none; + span{ + display: inline-block; + padding-top: 50px; + } + } + } + } + } +} -- 2.16.6