screen_demo2.git

New file
			@@ -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;
			}
			}