From 12b04f145bae740e1971036b1e2dfc1bc224d17b Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Wed, 11 Jul 2018 14:38:47 +0800 Subject: [PATCH] Revert "框架调整" --- src/app/routes/dashboard/workplace/workplace.component.less | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 240 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..d8dfe1f --- /dev/null +++ b/src/app/routes/dashboard/workplace/workplace.component.less @@ -0,0 +1,240 @@ +@import 'node_modules/@delon/theme/styles/default'; +: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; + white-space: nowrap; + & > div { + padding: 0 32px; + position: relative; + display: inline-block; + & > 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 0.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: @text-color; + display: inline-block; + font-size: @font-size-base; + margin-bottom: 13px; + width: 25%; + &:hover { + color: @primary-color; + } + } + } + + @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; + } + .project-list { + .project-grid { + width: 50%; + } + } + } + + @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%; + } + } + } +} -- Gitblit v1.8.0