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