summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/home/home.component.less
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/home/home.component.less')
-rw-r--r--usecaseui-portal/src/app/views/home/home.component.less139
1 files changed, 89 insertions, 50 deletions
diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
index cb0d877e..68c1367e 100644
--- a/usecaseui-portal/src/app/views/home/home.component.less
+++ b/usecaseui-portal/src/app/views/home/home.component.less
@@ -18,26 +18,32 @@
padding: 20px;
min-height: 937px;
height: 100vh;
- .left-content{
+
+ .left-content {
height: 100%;
float: left;
- width:30%;
- .services,.PACKAGE{
- display:flex;
+ width: 40%;
+
+ .services,
+ .PACKAGE {
+ display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
- background:rgba(255,255,255,1);
- box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ 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{
+
+ h4 {
font: 600 16px/16px "Arial Bold";
- color: #0DA9E2;
+ color: #0DA9E2;
}
+
p {
font: 400 14px/14px "Arial";
}
+
.tip {
align-self: flex-end;
width: 110px;
@@ -48,92 +54,108 @@
color: #3C4F8C;
text-align: center;
cursor: pointer;
- span{
+
+ span {
color: #3C4F8C;
}
}
}
- .services{
- min-height:467px;
+
+ .services {
+ min-height: 467px;
height: 49vh;
flex-wrap: wrap;
+
h5 {
position: relative;
z-index: 3;
font: 500 18px/18px "ArialMT";
- color:#0DA9E2;
- margin: -2em 0 1em 0 ;
+ 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;
+ color: #3C4F8C;
}
+
span:first-child {
font-size: 18px;
- padding: 0 4PX 0 4px;
+ padding: 0 4PX 0 4px;
}
+
span:last-child {
padding-left: 4px;
}
-
+
}
}
- .PACKAGE{
- min-height:410px;
+
+ .PACKAGE {
+ min-height: 410px;
height: 43vh;
margin-top: 20px;
+
.details {
- .detailstoplinContent{
- border-bottom:0.5px solid rgba(237,237,237,1);
- border-radius:4px;
+ .detailstoplinContent {
+ border-bottom: 0.5px solid rgba(237, 237, 237, 1);
+ border-radius: 4px;
line-height: 58px;
font-size: 14px;
color: #3C4F8C;
- font-family:"ArialMT";
+ font-family: "ArialMT";
+
.detailstoplin {
width: 100%;
height: 58px;
border-radius: 4px;
- div:first-child{
+
+ div:first-child {
width: 20%;
float: left;
}
- div:nth-child(2){
+
+ div:nth-child(2) {
width: 65%;
float: left;
}
+
div:last-child {
width: 13%;
float: right;
- font-size:12px;
+ font-size: 12px;
font-weight: 500;
- color:rgba(60,79,140,0.5);
+ color: rgba(60, 79, 140, 0.5);
}
}
- &:first-child{
- border-top: 0.5px solid rgba(237,237,237,1);
- }
+
+ &:first-child {
+ border-top: 0.5px solid rgba(237, 237, 237, 1);
+ }
}
}
-
- }
+
+ }
}
+
.right-content {
height: 100%;
float: left;
- width: 70%;
+ width: 60%;
padding-left: 15px;
+
.rt-content {
min-height: 327px;
height: 34vh;
margin-bottom: 18px;
- background:rgba(255,255,255,1);
- box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ background: rgba(255, 255, 255, 1);
+ box-shadow: 0px 10px 10px 2px rgba(222, 222, 222, 0.5);
+ border-radius: 6px;
+
.alarm {
float: left;
background-color: #fff;
@@ -142,12 +164,14 @@
border-radius: 5px;
position: relative;
padding: 28px 26px;
+
h4 {
position: absolute;
font: 600 16px/16px "Arial Bold";
color: #0DA9E2;
}
}
+
.poerformance {
float: left;
background-color: #fff;
@@ -155,78 +179,90 @@
width: 50%;
border-radius: 5px;
padding: 28px 26px;
+
.pfVmPm {
h3 {
- color:#BD57E5;
+ color: #BD57E5;
}
- }
+ }
+
div {
height: 57px;
position: relative;
margin-bottom: 10px;
+
h3 {
font: 600 25px/25px "Arial";
color: #2F6AEF;
margin-bottom: 10px;
padding-left: 50%;
}
+
p {
- font: 400 12px/12px "Arial";
- color:rgba(60,79,140,0.5);
+ font: 400 12px/12px "Arial";
+ color: rgba(60, 79, 140, 0.5);
padding-left: 50%;
-
+
}
+
img {
position: absolute;
top: 0;
left: 0;
}
}
- .tip{
+
+ .tip {
width: 110px;
background-color: #eceff4;
color: #3C4F8C;
font-size: 16px;
float: right;
margin-top: 20px;
- margin-bottom: 0!important;
+ margin-bottom: 0 !important;
line-height: 35px;
border-radius: 5px;
text-align: center;
- a{
- color:#3C4F8C;
+
+ a {
+ color: #3C4F8C;
}
}
}
-
- .alarm-name{
+
+ .alarm-name {
text-align: center;
margin-top: 15px;
}
-
+
}
+
.rb-content {
position: relative;
min-height: 550px;
height: 58vh;
background-color: #fff;
padding: 24px 30px;
- box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
- border-radius:6px;
+ box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);
+ border-radius: 6px;
+
h4 {
font: 600 16px/16px "Arial Bold";
color: #0DA9E2;
}
+
nz-dropdown {
position: absolute;
top: 24px;
right: 30px;
+
button {
width: 170px;
height: 35px;
background-color: #eceff4;
text-align: left;
border-color: #cad3df;
+
span {
display: inline-block;
width: 120px;
@@ -234,14 +270,17 @@
text-overflow: ellipsis;
font-size: 14px;
}
+
i {
position: absolute;
top: 12px;
right: 12px;
}
}
+
//The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body.
}
+
#pfVmChartLine {
width: 100%;
height: 318px;