From 70303875bbb5139219e4795d0ef29e8ab895859d Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Mon, 2 Dec 2019 16:21:06 +0800
Subject: style: change the style of layout menu
Change-Id: I15571e7fe584a55837ff6100004f0e1756db3739
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
usecaseui-portal/src/app/app.component.less | 103 ++++++++++++++++++----------
1 file changed, 66 insertions(+), 37 deletions(-)
(limited to 'usecaseui-portal/src/app')
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index d86fb853..8a2d6e6c 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -16,28 +16,33 @@
// left menu bar adaptation
-@media screen and (min-width: 1200px){
- .siderContent{
- height:240px;
- img{
+@media screen and (min-width: 1200px) {
+ .siderContent {
+ height: 180px;
+
+ img {
margin-top: 40px;
}
}
- .main{
+
+ .main {
margin-left: 330px
}
}
-@media screen and (max-width: 1200px){
- .siderContent{
- height:180px;
- img{
+
+@media screen and (max-width: 1200px) {
+ .siderContent {
+ height: 140px;
+
+ img {
transform: scale(0.8);
margin-top: 26px;
- }
+ }
}
- .main{
+
+ .main {
margin-left: 260px
- }
+ }
}
nz-layout {
@@ -45,61 +50,84 @@ nz-layout {
position: fixed;
left: 0;
z-index: 100;
- min-height: 937px;
- height: 100vh;
- background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
- background-size: 100%;
- .siderContent{
+ // min-height: 937px;
+ height: 100vh;
+ background: #313449;
+ // background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
+ // background-size: 100%;
+ overflow: scroll;
+
+ .siderContent {
width: 100%;
text-align: center;
- img{
+ background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
+ background-size: cover;
+
+ img {
transition: .5s;
}
}
+
ul {
background: transparent;
+ background: #313449;
width: 100%;
+
li {
margin: 0;
font-size: 16px;
- color: #ffffff!important;
+ color: #ffffff !important;
background: transparent;
- a{
+
+ a {
color: #ffffff;
}
+
span {
font-size: 16px;
}
+
i {
width: 16px;
height: 16px;
margin-right: 12px;
- img{
+
+ img {
width: 20px;
}
}
+
ul {
- background: transparent!important;
- li{
+ background: transparent !important;
+
+ li {
font-size: 12px;
- color: #ffffff!important;
- background: transparent!important;
+ color: #ffffff !important;
+ background: transparent !important;
}
- li:hover,li a:hover{
- color: #ffffff!important;
+
+ li:hover,
+ li a:hover {
+ color: #ffffff !important;
}
- li.activeMenuList,li.activeMenuList a{
- color: #0DA9E2!important;
+
+ li.activeMenuList,
+ li.activeMenuList a {
+ color: #0DA9E2 !important;
}
}
}
- li:hover,li a:hover{
- color: #ffffff!important;
+
+ li:hover,
+ li a:hover {
+ color: #ffffff !important;
}
- li.activeMenuBar{
- color: #ffffff!important;
- background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);
+
+ li.activeMenuBar {
+ color: #ffffff !important;
+ background: linear-gradient(90deg, rgba(7, 169, 225, 1) 0%, rgba(48, 217, 196, 1) 100%);
}
+
hr {
margin: 0 auto;
background-color: #39434f;
@@ -109,8 +137,9 @@ nz-layout {
}
}
}
- .main{
- height:100vh;
- position:relative;
+
+ .main {
+ height: 100vh;
+ position: relative;
}
}
\ No newline at end of file
--
cgit