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.less265
1 files changed, 265 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less
new file mode 100644
index 00000000..9e768cf7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/home/home.component.less
@@ -0,0 +1,265 @@
+/*
+ Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+// .title {
+// font: 700 18px/18px "思源黑体";
+// color: #4c5e70;
+// margin-bottom: 18px;
+// }
+// hr {
+// border: none;
+// height: 2px;
+// background-color: #dce1e7;
+// margin-bottom: 20px;
+// }
+.content {
+ 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;
+ text-align: center;
+ span {
+ font-size: 14px;
+ }
+ }
+
+ p {
+ font: 400 14px/14px "Arial";
+ color: #54657e;
+ text-align: center;
+ margin-bottom: 48px;
+ }
+ }
+ .rightcontent {
+ float: left;
+ padding-left: 15px;
+ width: 70%;
+ .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;
+ height: 100%;
+ width: 50%;
+ border-radius: 5px;
+ padding: 28px 26px;
+ .pfVmPm {
+ h3 {
+ color:#BD57E5;
+ }
+ }
+ h4 {
+ font: 600 16px/16px "Arial Bold";
+ color: #0DA9E2;
+ margin-bottom: 34px;
+ }
+
+ 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);
+ padding-left: 50%;
+
+ }
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+ .alarm {
+ float: left;
+ background-color: #fff;
+ height: 100%;
+ width: 48%;
+ border-radius: 5px;
+ position: relative;
+ padding: 28px 26px;
+ h4 {
+ position: absolute;
+ font: 600 16px/16px "Arial Bold";
+ color: #0DA9E2;
+ }
+ }
+ .alarm-name{
+ text-align: center;
+ margin-top: 15px;
+ }
+ .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;
+ text-align: center;
+ }
+ }
+ .rb-content {
+ position: relative;
+ height: 58%;
+ background-color: #fff;
+ padding: 24px 30px;
+ 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;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ }
+ i {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ }
+ }
+ //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+ }
+ #pfVmChartLine {
+ width: 100%;
+ height: 318px;
+ }
+ }
+ }
+} \ No newline at end of file