summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/home/home.component.less
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/home/home.component.less')
-rw-r--r--usecaseui-portal/src/app/home/home.component.less189
1 files changed, 104 insertions, 85 deletions
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;