From 97d51b5b848e74c905502f1ee14c833a2df75394 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Mon, 16 Jul 2018 13:31:52 +0800
Subject: [PATCH] 预报预警

---
 src/app/routes/dashboard/workplace/workplace.component.less |  389 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 389 insertions(+), 0 deletions(-)

diff --git a/src/app/routes/dashboard/workplace/workplace.component.less b/src/app/routes/dashboard/workplace/workplace.component.less
new file mode 100644
index 0000000..c732176
--- /dev/null
+++ b/src/app/routes/dashboard/workplace/workplace.component.less
@@ -0,0 +1,389 @@
+@import '~@delon/theme/styles/antd/themes/default.less';
+@import '~@delon/abc/utils/utils.less';
+
+:host ::ng-deep {
+	.page-header {
+		display: flex;
+		.avatar {
+			flex: 0 1 72px;
+			margin-bottom: 8px;
+			.ant-avatar {
+				border-radius: 72px;
+				display: block;
+				width: 72px;
+				height: 72px;
+			}
+		}
+		.desc {
+			position: relative;
+			top: 4px;
+			margin-left: 24px;
+			flex: 1 1 auto;
+			color: @text-color-secondary;
+			line-height: 22px;
+			.desc-title {
+				font-size: 20px;
+				line-height: 28px;
+				font-weight: 500;
+				color: @heading-color;
+				margin-bottom: 12px;
+			}
+		}
+	}
+
+	.page-extra {
+        .clearfix();
+		float: right;
+		& > div {
+			padding: 0 32px;
+			position: relative;
+			float: left;
+			& > p:first-child {
+				color: @text-color-secondary;
+				font-size: @font-size-base;
+				line-height: 22px;
+				margin-bottom: 4px;
+			}
+			& > p {
+				color: @heading-color;
+				font-size: 30px;
+				line-height: 38px;
+				margin: 0;
+				& > span {
+					color: @text-color-secondary;
+					font-size: 20px;
+				}
+			}
+			&:after {
+				background-color: @border-color-split;
+				position: absolute;
+				top: 8px;
+				right: 0;
+				width: 1px;
+				height: 40px;
+				content: "";
+			}
+		}
+		& > div:last-child {
+			padding-right: 0;
+			&:after {
+				display: none;
+			}
+		}
+    }
+
+    .project-list {
+        .ant-card-meta-description {
+            color: @text-color-secondary;
+            height: 44px;
+            line-height: 22px;
+            overflow: hidden;
+        }
+        .card-title {
+            font-size: 0;
+            a {
+                color: @heading-color;
+                margin-left: 12px;
+                line-height: 24px;
+                height: 24px;
+                display: inline-block;
+                vertical-align: top;
+                font-size: @font-size-base;
+                &:hover {
+                    color: @primary-color;
+                }
+            }
+        }
+
+        .project-grid {
+            width: 33.33%;
+        }
+
+        .project-item {
+            display: flex;
+            margin-top: 8px;
+            overflow: hidden;
+            font-size: 12px;
+            height: 20px;
+            line-height: 20px;
+            .textOverflow();
+            a {
+                color: @text-color-secondary;
+                display: inline-block;
+                flex: 1 1 0;
+                .textOverflow();
+                &:hover {
+                    color: @primary-color;
+                }
+            }
+            .datetime {
+                color: @disabled-color;
+                flex: 0 0 auto;
+                float: right;
+            }
+        }
+    }
+
+    .activities {
+        padding: 0 24px 8px;
+        .username {
+            color: @text-color;
+        }
+        .event {
+            font-weight: normal;
+        }
+    }
+
+    .members {
+        a {
+          display: block;
+          margin: 12px 0;
+          line-height: 24px;
+          height: 24px;
+          .textOverflow();
+          .member {
+            font-size: @font-size-base;
+            color: @text-color;
+            line-height: 24px;
+            max-width: 100px;
+            vertical-align: top;
+            margin-left: 12px;
+            transition: all .3s;
+            display: inline-block;
+            .textOverflow();
+          }
+          &:hover {
+            span {
+              color: @primary-color;
+            }
+          }
+        }
+    }
+
+    .datetime {
+        color: @disabled-color;
+    }
+
+    .links {
+        padding: 20px 0 8px 24px;
+        font-size: 0;
+        > a {
+            color: rgba(0, 0, 0, 0.65);
+            display: inline-block;
+            font-size: 14px;
+            margin-bottom: 13px;
+            width: 25%;
+        }
+    }
+
+	@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
+        .active-card {
+            margin-bottom: 24px;
+        }
+        .members {
+            margin-bottom: 0;
+        }
+		.page-extra {
+			margin-left: -44px;
+			& > div {
+				padding: 0 16px;
+			}
+		}
+	}
+
+	@media screen and (max-width: @screen-lg) {
+        .active-card {
+            margin-bottom: 24px;
+        }
+        .members {
+            margin-bottom: 0;
+        }
+		.page-extra {
+			float: none;
+			margin-right: 0;
+			& > div {
+				padding: 0 16px;
+				text-align: left;
+				&:after {
+					display: none;
+				}
+			}
+		}
+	}
+
+	@media screen and (max-width: @screen-md) {
+		.page-extra {
+			margin-left: -16px;
+		}
+	}
+
+	@media screen and (max-width: @screen-sm) {
+		.page-header {
+			display: block;
+			.desc {
+				margin-left: 0;
+			}
+		}
+		.page-extra {
+			& > div {
+				float: none;
+			}
+		}
+	}
+
+	@media screen and (max-width: @screen-xs) {
+        .project-list {
+            .project-grid {
+                width: 100%;
+            }
+        }
+	}
+
+
+
+    .icon-group {
+        transition: color 0.32s;
+        color: @text-color-secondary;
+        cursor: pointer;
+        margin-left: 16px;
+        &:hover {
+            color: @text-color;
+        }
+    }
+
+    .rank-list {
+        padding: 0px 32px 32px 72px;
+        ul {
+            margin-top: 25px;
+        }
+        li {
+            zoom: 1;
+            margin-top: 16px;
+            display: flex;
+            justify-content: space-between;
+            .icon {
+                background-color: #f5f5f5;
+                border-radius: 20px;
+                display: inline-block;
+                font-size: 12px;
+                font-weight: 600;
+                margin-right: 24px;
+                height: 20px;
+                line-height: 20px;
+                width: 20px;
+                text-align: center;
+            }
+            .active {
+                background-color: #314659;
+                color: #fff;
+            }
+        }
+    }
+
+    .sales-extra {
+        display: inline-block;
+        margin-right: 24px;
+        a {
+            margin-left: 24px;
+        }
+    }
+
+    .sales-card {
+        .bar {
+            padding: 0px 0px 32px 32px;
+        }
+        .rank {
+            padding: 0 32px 32px 72px;
+        }
+        .ant-tabs-tab {
+            padding-top: 16px;
+            padding-bottom: 14px;
+            line-height: 24px;
+        }
+
+        .ant-tabs-extra-content {
+            padding-right: 24px;
+            line-height: 55px;
+        }
+
+        .ant-card-head {
+            position: relative;
+        }
+    }
+
+    .sales-card-extra {
+        height: 68px;
+    }
+
+    .sales-type-radio {
+        position: absolute;
+        left: 24px;
+        bottom: 15px;
+    }
+
+    .offline-card {
+        .ant-tabs-ink-bar {
+            bottom: auto;
+        }
+        .ant-tabs-bar {
+            border-bottom: none;
+        }
+        .ant-tabs-nav-container-scrolling {
+            padding-left: 40px;
+            padding-right: 40px;
+        }
+        .ant-tabs-tab-prev-icon:before {
+            position: relative;
+            left: 6px;
+        }
+        .ant-tabs-tab-next-icon:before {
+            position: relative;
+            right: 6px;
+        }
+    }
+
+    .trend-text {
+        margin-left: 8px;
+        color: @heading-color;
+    }
+
+    @media screen and (max-width: @screen-lg) {
+        .sales-extra {
+            display: none;
+        }
+
+        .rank-list {
+            li {
+                span:first-child {
+                    margin-right: 8px;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: @screen-md) {
+        .rank-title {
+            margin-top: 16px;
+        }
+
+        .sales-card .bar {
+            padding: 16px;
+        }
+    }
+
+    @media screen and (max-width: @screen-sm) {
+        .sales-extra-wrap {
+            display: none;
+        }
+
+        .sales-card {
+            .ant-tabs-content {
+                padding-top: 30px;
+            }
+        }
+    }
+
+    .ant-table-pagination {
+        margin-bottom: 0;
+    }
+}

--
Gitblit v1.8.0