@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;
|
}
|
}
|
|
.line-chart {
|
height: 100%;
|
}
|
.table-tr-bgcolor-focus {
|
background-color: #ecf6fd;
|
}
|
.table-tr-bgcolor-blur {
|
background-color: #fff;
|
}
|
.table-scroll {
|
z-index: 9;
|
height: auto;
|
max-height: 388px;
|
overflow: hidden;
|
}
|
.table-scroll-box-shadow {
|
-moz-box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1); /* 老的 Firefox */
|
box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1);
|
}
|
.chart-switch-select {
|
position: absolute;
|
right: 8%;
|
top: 2%;
|
}
|
