diff options
author | 2019-08-16 11:59:21 +0800 | |
---|---|---|
committer | 2019-08-16 12:00:21 +0800 | |
commit | 19a945de783b6158ec48f5c5ff5bbb9858db2890 (patch) | |
tree | 01deab59fe43aa7ae9f1d7d6883624fbff0cfb2f /usecaseui-portal/src/app | |
parent | e86d393096599044ba5a6a42ad386c9990d61501 (diff) |
feat: Home page style optimization
Change-Id: I6fa4760b5c401cb9ff9e0198ed545b7c2fef18b3
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r-- | usecaseui-portal/src/app/app.component.html | 10 | ||||
-rw-r--r-- | usecaseui-portal/src/app/app.component.less | 43 | ||||
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.css | 1 | ||||
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 14 | ||||
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.less | 189 |
5 files changed, 160 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; |