ttk-app-core/src/jsonApps/edf/ttk-edf-app-portal/style.less

@ttk/recat enterprise develop framework

.ant-menu.mk-menu.ant-menu-root{
	max-height: 500px;
    overflow-y: auto;
}
.ttk-edf-app-portal{
	overflow:hidden;
	width: 100%;
	height: 100%;
    min-width: 1024px;
	display:flex;
	flex-direction: column;
	background-color:#ececec;
	.leftNavMenu{
		i:before{
			color:inherit!important;
		}
	}
    a:hover {
        text-decoration: underline;
    }
	.ant-popover.ant-popover-placement-bottom{
		margin-top: -11px !important;
		.ant-popover-inner-content{
			ul{
				max-height: 300px;
				overflow-y: scroll;
			}
		}
	}
	.edficon-bianji:before:hover {
		color:#fff
	}
	&-search{
		&-shade{
			// position: fixed;
			// width: 100%;
			// height: 100%;
			// top: 0;
			// left: 0;
			// bottom: 0;
			// right: 0;
			// z-index:10;
		}
        &-rightDiv{
			display: inline-flex;
			z-index: 15;
			background-color: @primary-color;
			height: 100%;
			float:right;
			align-items: stretch;
			.helpCenter:hover{
				background:@top-hover;
			}
			.basicInfo{
				display: flex;
				align-items: center;
				padding-right:15px;
			}
			.basicInfo:hover{
				background:@top-hover;
			}
			.basicInfo.ant-popover-open{
				background:@top-hover;
			}
		}
	}

	.item {
		&:hover{
			background-color: #E3FEF9 !important;
		}
	}
	&-header{
		display:flex;
		flex-direction: row;
		align-items: center;
		flex:0 0 54px;
		height:54px;
		background-color:#00B38A;
		color:#fff;
		overflow: visible;
		// z-index: 2;
		position: relative;
		&-left{
			height: 100%;
			width:168px;
			flex: 0 0 199px;
			flex-direction: row;
			align-items: center;
			background: @primary-color;
			padding:0px 0px 0px 20px;

			&-logo {
				width: 35px;
				height: 35px;
				margin: 0 0 0 7px;
			}

			h1{
				font-family: 'Microsoft Yahei', 'PingFang SC';
				font-weight: 700;
				font-style: normal;
				font-size: 24px;
				color: #FFFFFF;
				margin:0 0 0 8px;
			}
		}
		&-right{
			height: 100%;
			// padding:0px 24px 0px 0;
			display:block;
			align-items:center;
			overflow: visible;
			background: @primary-color;
			.orgName:hover{
				cursor: pointer;
				background:@top-hover;
			}
			.orgName.ant-popover-open{
				background:@top-hover;
			}
			.currentOrgName{
				height:15px;
				white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;
				vertical-align: middle;
				max-width: 278px;
				display: inline-block;
				line-height:1;
			}
			&-menu{

				&-item1{
					font-size: 12px;
					color: #515151;
					transition: none !important;
					max-width: 320px;
					&:hover{
						color: @primary-color;
						background:@primary-1;
						//border-bottom:1px solid #E4E4E4;
					}
				}
			}
			&-self{
				// background-color: red !important;

				width: 150px;
				.ant-popover-inner-content{
					padding: 0px !important;
				}
				&-popover-item{
					padding: 10px;
					&:hover{
						background: @primary-1;
						cursor: pointer;
					}
					&-toggleColor{
						margin-right:5px;
						color:transparent;
						width:15px;
						height:8px;
					}
				}
			}

			input {
				border-radius: 100px;
				border: 1px solid rgb(214, 205, 205) !important;
				// box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.50);
				// background: #02AA83;
				&:hover{
					border: 1px solid rgb(214, 205, 205) !important;
					// box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.50);
					// background: #02AA83;
				}
				&:focus {
					border: 1px solid rgb(214, 205, 205) !important;
					// box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.50);
					// background: #02AA83;
				}
			}

			&-headerSearch{
				height:100%;
				display: flex;
				align-items: center;
				padding:0 16px 0 10px;
				cursor: pointer;
				float:right;
				span{
					input{
						background-color: @primary-color;
						outline: none;
						border: 1px solid  #eee;
						color: #fff;
						i{
							color: #fff !important;
						}
					}
					input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
						color:    #fff;
					}
					input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
					   color:    #fff;
					}
					input::-moz-placeholder { /* Mozilla Firefox 19+ */
					   color:    #fff;
					}
					input:-ms-input-placeholder { /* Internet Explorer 10-11 */
					   color:    #fff;
					}
					// input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder{
					// 	color: #fff;
					// }
				}
				i{
					color: #fff !important;
				}
			}
			&-headerSearch:hover{
				background:@top-hover;
			}

			&-org{

				background-color: @primary-color;
				color: #FFFFFF
			}
			&-org-popover {

				line-height: 40px;
				vertical-align: middle;
				border-bottom: 1px solid #E4E4E4;
				// background-color: #E3FEF9;
				&:hover {
					//
					// color: #1890ff
				}
				.edfx-app-sale-trend-widget-right-list-detail-name{

					width: 100%;
					padding: 0px 0px 0px 8px;
					&:hover{
						background-color: #E3FEF9;

					}
				}
				&-icon{
					background-color: #F9F8FA;
					width: 49%;
					height: 40px;
					display: inline-block;
					text-align: center;
					vertical-align: middle;
					border: none;
                  border-radius: 0;
					// border-right: 1px dashed #8E8C8C;
					// padding-right: 2px;
					span{
						margin-left: 0px !important;
					}
					&-title{

					}
					//&:hover{
					//	border-radius: 0;
						// background-color: #E3FEF9 !important;
						// color:#13a984 !important;
					//}

				}
			}
			&-org-popoverIcon {
				&:hover{
					background-color: #FFFFFF;
					color:#3F90F7
				}
			}
			&-org-menu{
				width: 200px;
				height: 35px;
				align-items: center;
				color: #FFFFFF;

				&-icon-menu {
					margin-right: 2px;
					//font-size: 19px

				}
			}

			&-search{
				width: 260px;
				height: 36px;
				align-items: left;
				input{
					border-radius: 2px;
					// border: 1px solid #E4E4E4 !important;
				}
				span{
					right: 1px !important;
					// input{
					// 	border-radius: 0px;
					// 	// border: 1px solid #E4E4E4 !important;
					// }
					i{
						padding: 10px;
						background: #EAEFF4;
						// border-radius: 2px;
						color: #454545;
					}
				}
			}

			&-my-title{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 30px;
			}

			&-help{
				// margin-top: 12px !important;
				// right: 0px;
				&-popover{
					// position:absolute;
					// width:100%;
					height:100%;
					width:100%;
					z-index:10;
					top:0px;
					right:0;
					overflow:hidden;
					display: none;
					&-shade{
						width:100%;
						height:100%;
						left: 0;
						top: 0;
						position: absolute;
						z-index: 99;
					}
					&-content{
						width: 330px;
						height: 100%;
						position: absolute;
						right: 0;
						top: 0px;
						z-index: 99;
						background: #fff;
						color: #333;
						padding: 22px 24px 22px 22px;
						border: 1px solid #E4E4E4;
						box-shadow: 0 0 8px 0 rgba(181,181,181,0.50);
						.ant-popover-arrow{
							position: fixed;
							top: 51px;
							right: 165px;
						}
					}
					&-titleIcon{
						margin-bottom: 24px;
						vertical-align: middle;
					}
					&-title1{
						font-size: 18px;
						color: #454545;
						font-weight: normal;
					}
					&-title2{
						font-size: 14px;
						color: #454545;
						font-weight: normal;
					}
					ul{
						padding-left: 20px;
						height: 34px;
						line-height: 34px;
					}
					.ant-card-head {
						border-bottom: none !important;
					}
					.ant-card-body{
						padding-top: 10px;
					}
				}

				&-content {
					margin: 5px 0px;
				}


				&-title {
					margin: 33px 0px 10px 0px;
				}

				&-icon-popover {
					margin-right: 6px;
					//font-size: 19px
				}
			}

			.mk-menu {
				border-bottom: 0px !important;
			}

			.mk-menu > li{
				display: flex;
				flex-direction: row;
				align-items: center;

				i{
					font-size: 14px;
				}
			}

			&-photo {
				width: 30px;
				height: 30px;
				border-radius: 30px;
				margin-right: 10px;
			}

			.ant-menu{
				&-submenu{
					&-title{
						background-color: #13a984;
					}
				}

			}
		}
	}

	&-content-tabs{
		flex: 0 0 40px;

		.ant-tabs-bar{
			margin-bottom: 0px;
			padding-top:6px;
			background: #e8ecf2;
			border:none;
			.ant-tabs-nav-container-scrolling{
				padding-left:20px;
				padding-right:20px;
				&>span{
					width:16px;
					background:white;
				}
				&>span:hover{
					background:@primary-color;
					color:white;
				}
			}
			.ant-tabs-extra-content{
				order:10;
				width: 30px;
				height: 28px;
				overflow: hidden;
				background: #fff;
				text-align: center;
				line-height:28px;
				margin-left:-1px;
			}
		}
		.ant-tabs-bar .ant-tabs-tab{
			height:28px;
			border:none!important;
			line-height:28px!important;
			border-radius:0!important;
			vertical-align: top;
		}
	}
	&-content{
		height:100%;
		display:flex;
		flex-direction: row;
		flex: 1 1 auto;
		background-color: #e8ecf2;
		position: relative;
		padding-right: 10px;
		&-left{
			width:200px;
			overflow: visible;
			flex: 0 0 auto;
			padding:6px 10px 10px;
			.ant-menu.ant-menu-root{
				/*height: 100%;引发safari菜单不显示问题*/
				max-height: 100%;
				overflow-y: auto;
				color:#333333;
			}
			.ant-menu-submenu-open.ant-menu-submenu-active{
				background:@item-hover-bg;
				.ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
					background:@primary-color;
				}
			}
			&>div:nth-of-type(1){
				flex:1!important;
			}
			.mk-layout{
				background:#ffffff;
			}
			.menu-switch {
				flex:0 0 23px;
				background:#f2f2f2;
				position:relative;
				cursor: pointer;
				i{
					position: absolute;
					top:50%;
					left:50%;
					transform: translate(-50%,-50%);
					color:#aaaaaa;
				}
			}
			.menu-switch:hover{
				background: #e4e4e4;
			}
			.new-guide{
				flex-direction: row;
				flex:0 0 109px;
				position: relative;
				div{
					display: flex;
					align-items: center;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				div:hover i,div:hover span{
					cursor: pointer;
					color:@primary-color;
				}
				i{
					font-size:28px;
					margin-right:5px;
					vertical-align: middle;
					color:#999999;
				}
				i:hover{
					// color:#868686;
				}
				span{
					width:60px;
					font-size:14px;
					font-weight:400;
					vertical-align: middle;
					color:#333333;
				}
				span:hover{
					// color:#868686;
				}
			}
			.hide-content .menu-content{
				display: none;
			}
			.show-content .menu-content{
				display: inline;
			}
		}
		&-apiLink{
			position: absolute;
			height: 30px;
			right: 16px;
			z-index: 1;
			cursor: pointer;
			padding-top: 4px;
			line-height: 28px;
			// color: rgba(0, 0, 0, 0.65);
		}
		&-apiLink:hover{
			// color:#00B38A;
		}
		&-main{
			background: #e8ecf2;
			flex: 1 1 auto;
			position: relative;
			& > div {
				padding:0 10px 10px 0;
			}
		}
		&-noTabMarginStyle{
			margin-top:6px;
		}


		&-configPanel{
			position:fixed;
			width:100%;
			height:100%;
			z-index:10;
			top:0;
			left:0;
			overflow:hidden;
			display: none;

			&-shade{
				position:absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
			}
			&-container{
				position: absolute;
				right:0;
				top:54px;
				bottom:0;
				width:344px;
				overflow-y: auto;
				background: #FFFFFF;
				padding:0 16px;
				border: 1px solid #E4E4E4;
				box-shadow: 0 0 8px 0 rgba(181,181,181,0.50);
			}
			&-title{
				padding:25px 0;
				font-size: 16px;
				color: #000000;
				letter-spacing: 0.07px;
				i{
					margin-right:4px;
					vertical-align: middle;
					color:#999999;
					font-size: 24px;
					transform: translateY(1px);
				}
				span{
					display: inline-block;
					vertical-align: middle;
				}
			}

			&-main{
				&>div:not(:first-child){
					margin-top:10px;
				}
				&-title{
					font-size: 14px;
					color: #949393;
					letter-spacing: 0.07px;
					padding-bottom:3px;
					border-bottom:1px solid #D9D9D9;
					margin-bottom:10px;
				}
				&-options{
					display: flex;
					flex-direction: column;
					&>label{
						font-size: 13px;
						color: #454545;
						margin-left:0!important;
						margin-bottom:14px;
					}
				}
			}

			&-btns{
				padding-top:25px;
				padding-bottom:25px;
				button:nth-of-type(1){
					margin-right:10px;
				}
			}
		}
	}
	/*menu图标*/
	.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
		content: '';
		position: absolute;
		vertical-align: baseline;
		background: #d9d9d9;
		background-image:none;
		width: 8px;
		height: 1px;
		border-radius: 1px;
	}
	.ant-menu-submenu-vertical:hover > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical:hover > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
		background:@primary-color;
	}
	.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before{
		transform: rotate(40deg) translateY(-3px);
	}
	.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
		transform: rotate(-40deg) translateY(3px);
	}
}
.left-menu-itemgroup{
	cursor: default;

	.ant-menu-item-group-title{
		font-size:14px;
		font-weight:400;
		padding:3px 16px;
	}
	ul{
		overflow: hidden;

		li{
			float: left;
			font-size:14px;
			font-weight:400;
			// color:#666666;
			position: relative;
		}
		li:not(:first-child){
			padding-left:16px;
		}
		li:not(:last-child):hover:before{
			color:#d9d9d9;
		}
		li:not(:last-child):before{
			content: '';
			width:1px;
			height:9px;
			border-right:1px solid #d9d9d9;
			position: absolute;
			top:50%;
			transform: translateY(-50%);
			right:0;
		}
		li:hover{
			// color: #00b38a;
			text-decoration: underline;
		}
		li:hover:before{
			// color:#666666;
		}
	}
}
.left-menu-submenu-menuitem{
	font-size:14px;
	font-weight:400;
	height: 28px!important;
    line-height: 28px!important;
	height:28px;
}
.left-menu-submenu-menuitem:hover{
	text-decoration: underline;
	// color:#00b38a;
}
.app-portal-header-popover .ant-popover-inner-content {
	padding: 0px !important
}
.ant-popover-inner-content {
	padding: 0px;
}
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left{
	border-right: none;
}
.ant-menu-vertical .ant-menu-item:not(:last-child), .ant-menu-vertical .ant-menu-item{
	margin: 0px;
}
.level-first{
	// color:#000000;
	font-size:14px;
	font-weight:400;
	&>ul{
		padding:14px 24px 32px 6px!important;
		min-width:88px!important;
		.ant-menu-item{
			display: inline-block!important;
		}
		&>li{

			color:#333333;
			&>div{
				color:#999999;
			}
			&>ul{
				color:#555555;
				height:34px;
				padding-top:4px;
				&>li{
					height:26px!important;
					line-height:26px!important;
				}
				&>li{
					padding:0 10px;
				}
				&>li:first-child{
					padding: 0 10px 0 16px!important;
				}
			}
		}
		&>li:not(:last-child){
			margin-bottom:11px;
		}
	}
	.ant-menu-item-group-list .ant-menu-item{
		padding: 0 16px 0 10px;
	}
	.menu-icon{
		font-size:28px;
		transform: translateY(6px);
	}
	.anticon{
		margin-right:2px;
	}
}
.level-first:hover{
	background:@item-hover-bg;
}
.headBarBtn{
	display: inline-block;
	vertical-align: middle;
}
.userName{
	cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hideLast .ant-tabs-bar .ant-tabs-tab:last-child{
	display:none;
	padding: 0;
    width: 28px;
	height: 28px;
	background:#ffffff;
	.ant-tabs-tab-unclosable{
		width:100%;
		height:100%;
		i{
			display: block;
			width:100%;
			height:100%;
			line-height:28px;
		}
	}
}
.showLast .ant-tabs-bar .ant-tabs-tab:last-child{
	display: inline-block;
	padding: 0;
    width: 28px;
	background:#ffffff;
	height: 28px;
	.ant-tabs-tab-unclosable{
		width:100%;
		height:100%;
		i{
			display: block;
			width:100%;
			height:100%;
			line-height:28px;
		}
	}
}
/*企业列表位置*/
.manageListPopover{
	top:45px!important;
	.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
		color: @primary-color;
		background-color: @item-hover-bg;
	}
}
/*顶部右侧menu位置*/
.headerRightMenu{
	top:45px!important;
}
/*menu图标*/