summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--usecaseui-portal/src/app/app.component.html10
-rw-r--r--usecaseui-portal/src/app/app.component.less43
-rw-r--r--usecaseui-portal/src/app/home/home.component.css1
-rw-r--r--usecaseui-portal/src/app/home/home.component.html14
-rw-r--r--usecaseui-portal/src/app/home/home.component.less189
-rw-r--r--usecaseui-portal/src/styles.less8
6 files changed, 168 insertions, 97 deletions
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 1b201c08..2bd60670 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -14,11 +14,11 @@
limitations under the License.
-->
<nz-layout>
- <nz-sider nzWidth='330' style="overflow: auto; height: 100vh; position: fixed; left: 0;background: url('assets/images/UUIMenuBar.png')">
- <div style="width: 330px;height:240px;text-align: center">
- <img src="assets/images/uui-logo130.png" alt="" style="margin-top: 40px">
+ <nz-sider nzWidth='330' nzBreakpoint='xl' nzCollapsedWidth=260>
+ <div class="siderContent">
+ <img src="../assets/images/uui-logo130.png" alt="">
</div>
- <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 330px">
+ <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'">
<li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)">
<a routerLink="home">
<span title>
@@ -91,7 +91,7 @@
</li>
</ul>
</nz-sider>
- <nz-layout style="margin-left: 330px; height:100vh; position:relative;">
+ <nz-layout class="main">
<router-outlet></router-outlet>
</nz-layout>
</nz-layout>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index 685a2167..42889ef2 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -1,7 +1,46 @@
+@media screen and (min-width: 1200px){
+ .siderContent{
+ height:240px;
+ img{
+ margin-top: 40px;
+ }
+ }
+ .main{
+ margin-left: 330px
+ }
+}
+@media screen and (max-width: 1200px){
+ .siderContent{
+ height:180px;
+ img{
+ transform: scale(0.8);
+ margin-top: 26px;
+ }
+ }
+ .main{
+ margin-left: 260px
+ }
+}
+
nz-layout {
nz-sider {
+ position: fixed;
+ left: 0;
+ z-index: 100;
+ // overflow: auto;
+ height: 100vh;
+ background: #313449 url('../assets/images/UUIMenuBar.png') no-repeat;
+ background-size: 100%;
+ .siderContent{
+ width: 100%;
+ text-align: center;
+ img{
+ transition: .5s;
+ }
+ }
ul {
background: transparent;
+ width: 100%;
li {
margin: 0;
font-size: 16px;
@@ -55,4 +94,8 @@ nz-layout {
}
}
}
+ .main{
+ height:100vh;
+ position:relative;
+ }
} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
index 03cc8f94..41b3f5fe 100644
--- a/usecaseui-portal/src/app/home/home.component.css
+++ b/usecaseui-portal/src/app/home/home.component.css
@@ -71,6 +71,7 @@ hr {
}
.content .rightcontent .rt-content .poerformance {
float: left;
+ margin-left: 2%;
background-color: #fff;
height: 100%;
width: 50%;
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index d429bf8f..4126f241 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -16,8 +16,8 @@
<!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
<hr> -->
-<div class="content" style="padding: 20px 20px;">
- <div style="float: left;width:30%;height:96vh">
+<div class="content">
+ <div class="left-content">
<div class="services">
<h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
<!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
@@ -35,10 +35,10 @@
<span style="color:#3C4F8C" (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
- <div class="PACKAGE" style="height: 43%;margin-top: 3%">
+ <div class="PACKAGE">
<h4>{{"i18nTextDefine_PACKAGE" | translate}}</h4>
<div class="details">
- <li>
+ <li class="detailstoplinContent">
<div class="detailstoplin">
<div><span></span> NS</div>
<div>
@@ -47,7 +47,7 @@
<div>{{NSdata}}</div>
</div>
</li>
- <li>
+ <li class="detailstoplinContent">
<div class="detailstoplin">
<div><span style="background-color:#BCECB8;"></span> VNF</div>
<div>
@@ -56,7 +56,7 @@
<div>{{Vnfdata}}</div>
</div>
</li>
- <li>
+ <li class="detailstoplinContent">
<div class="detailstoplin">
<div><span style="background-color:#ACCAF4;"></span> PNF</div>
<div>
@@ -66,7 +66,7 @@
</div>
</li>
</div>
- <p class="tip" style="margin-top: 20px;">
+ <p class="tip">
<span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
</p>
</div>
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 4297f5bb..9e768cf7 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -25,18 +25,103 @@
// margin-bottom: 20px;
// }
.content {
- .services,.PACKAGE{
- background-color: #fff;
- width: 100%;
- height: 57%;
- border-radius: 5px;
- padding: 28px 22px;
- clear: both;
- h4 {
- font: 600 16px/16px "Arial Bold";
- color: #0DA9E2;
- margin-bottom: 20px;
+ padding: 20px 20px;
+ overflow: hidden;
+ .left-content{
+ float: left;
+ width:30%;
+ // height:96vh;
+ .services,.PACKAGE{
+ width: 100%;
+ background:rgba(255,255,255,1);
+ box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
+ border-radius:6px;
+ padding: 28px 22px;
+ h4{
+ font: 600 16px/16px "Arial Bold";
+ color: #0DA9E2;
+ }
+ .tip {
+ float: right;
+ width: 110px;
+ line-height: 35px;
+ border-radius: 5px;
+ background-color: #eceff4;
+ font-size: 16px;
+ color: #3C4F8C;
+ margin-top: 20px;
+ margin-bottom: 0!important;
+ }
+ }
+ .services{
+ height:466px;
+ h4{
+ margin-bottom: 20px;
+ }
+ h5 {
+ font: 500 18px/18px "ArialMT";
+ color:#0DA9E2;
+ margin: -2em 0 1em 0 ;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ span {
+ font-size: 14px;
+ font-family: "Arial";
+ color:#3C4F8C;
+ }
+ span:first-child {
+ font-size: 18px;
+ padding: 0 4PX 0 4px;
+ }
+ span:last-child {
+ padding-left: 4px;
+ }
+
+ }
}
+ .PACKAGE{
+ height:422px;
+ margin-top: 20px;
+ h4{
+ margin-bottom: 50px;
+ }
+ .details {
+ .detailstoplinContent{
+ border-bottom:0.5px solid rgba(237,237,237,1);
+ border-radius:4px;
+ line-height: 45px;
+ font-size: 14px;
+ color: #3C4F8C;
+ font-family:"ArialMT";
+ .detailstoplin {
+ width: 100%;
+ height: 50px;
+ border-top: 0.5px solid #ededed;
+ border-radius: 4px;
+ div:first-child{
+ width: 20%;
+ float: left;
+ }
+ div:nth-child(2){
+ width: 65%;
+ float: left;
+ }
+ div:last-child {
+ width: 13%;
+ float: right;
+ font-size:12px;
+ font-weight: 500;
+ color:rgba(60,79,140,0.5);
+ }
+ }
+ }
+ }
+
+ }
+ }
+ .services,.PACKAGE{
h3 {
font: 400 48px/48px "Arial";
color: #3fa8eb;
@@ -45,83 +130,13 @@
font-size: 14px;
}
}
- h5 {
- font: 500 18px/18px "ArialMT";
- color: #0DA9E2;
- margin: -1em 0 0em 0;
- span {
- font-size: 14px;
- font-family: "Arial";
- color:#3C4F8C;
- }
- span:first-child {
- font-size: 18px;
- padding: 0 4PX 0 4px;
- }
- span:last-child {
- padding-left: 4px;
- }
-
- }
+
p {
font: 400 14px/14px "Arial";
color: #54657e;
text-align: center;
margin-bottom: 48px;
}
- .details {
- li:first-child{
- border-top: 0.5px solid #ededed;
- }
- li {
- border-bottom: 0.5px solid #ededed;
- border-radius: 4px;
- line-height: 40px;
- font-size: 14px;
- color: #3C4F8C;
- font-family:"ArialMT";
- .detailstoplin {
- width: 100%;
- height: 40px;
- /* border-top: 0.5px solid #ededed; */
- border-radius: 4px;
- div:first-child{
- width: 20%;
- float: left;
- span{
- height: 12px;
- width: 12px;
- margin-left: 2px;
- border-radius: 6px;
- background-color: #FECE72;
- display: inline-block;
- }
- }
- div:nth-child(2){
- width: 65%;
- float: left;
- }
- div:last-child {
- width: 13%;
- float: right;
- font-size:12px;
- font-weight: 500;
- color:rgba(60,79,140,0.5);
- }
- }
- }
- }
- .tip {
- width: 110px;
- background-color: #eceff4;
- color: #3C4F8C;
- font-size: 16px;
- float: right;
- // margin-top: 20px;
- margin-bottom: 0!important;
- line-height: 35px;
- border-radius: 5px;
- }
}
.rightcontent {
float: left;
@@ -130,6 +145,9 @@
.rt-content {
height: 40%;
margin-bottom: 18px;
+ background:rgba(255,255,255,1);
+ box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
+ border-radius:6px;
.poerformance {
float: left;
background-color: #fff;
@@ -187,7 +205,7 @@
}
.alarm-name{
text-align: center;
- // margin-top: 15px;
+ margin-top: 15px;
}
.tip{
width: 110px;
@@ -203,11 +221,12 @@
}
}
.rb-content {
+ position: relative;
height: 58%;
background-color: #fff;
- border-radius: 5px;
padding: 24px 30px;
- position: relative;
+ box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
+ border-radius:6px;
h4 {
font: 600 16px/16px "Arial Bold";
color: #0DA9E2;
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 4e4ee690..4dcc0f3e 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -1,5 +1,13 @@
/* You can add global styles to this file, and also import other style files */
// Drop-down box background hover status color
+
+// reset
+body{
+ min-width: 990px;
+ a:link{
+ text-decoration: none;
+ }
+}
.ant-dropdown-menu {
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
background-color: #3fa8eb;