ttk-app-core/compatible/apps/edf/ttk-edf-app-landingpage/style.less

enterprise develop framework

.ttk-edf-app-landingpage{
	width: 100%;
	height: 100%;

	&-header{
	    height: 60px;
	    flex: 0 0 60px;
		background: #1EB5AD;
	    border-bottom: 1px solid #34c9e0;
		font-size: 16px;
    	flex-direction:row;
    	align-items:center;
    	overflow: hidden;
		justify-content: space-between;

    	&-left {
			height: 60px;
			width: 200px;
			flex-direction: row;
			line-height: 60px;
			color: #ffffff;
			line-height: 60px;
			padding-left:25px;
			overflow: hidden;

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

			&-sitename {
				font-family: 'Microsoft Yahei', 'PingFang SC';
				font-style: normal;
				font-weight: bold;
				font-size: 24px;
				color: #FFFFFF;
				margin:0 auto;
				margin: 0px 0px 0px 10px;
			}

			&-split {
				width: 2px;
				height: 22px;
				background: #ffffff;
				margin: 21px 15px 0 15px;
			}

			&-login {
				font-size: 18px;
				font-weight: 400;
			}
		}
		
		&-menu{
			display: inline-flex;
			z-index: 15;
			background-color: @primary-color;
			height: 100%;
			float:left;
			align-items: stretch;
			.helpCenter:hover{
				background:@top-hover;
			}
			.liveCast: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;
			}

			&-title{
				height:100%;
				width: 90px;
				//display: flex;
				//align-items: center;
				text-align: center;
				padding-top:15px;
				color: #fff;
				cursor: pointer;
				float:left;
				span{
					input{
						background-color: @top-hover;
						outline: none;
						border: 1px solid  @top-hover !important;
						color: #fff;
						font-size: 12px;
						height: 30px;
						i{
							color: #fff !important;
						}
						&:hover, &:focus{
							border: 1px solid  #fff !important;
						}
					}
					.ant-input-suffix {
						font-size: 20px;
					}
					input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
						color:    #fff;
					}
					input:focus::-webkit-input-placeholder {  /* WebKit, Blink, Edge */
						color: rgba(255,255,255,0.5);
					}
					input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
					   color:    #fff;
					}
					input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
					   color:    rgba(255,255,255,0.5);
					}
					input::-moz-placeholder { /* Mozilla Firefox 19+ */
					   color:    #fff;
					}
					input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
					   color:    rgba(255,255,255,0.5);
					}
					input:-ms-input-placeholder { /* Internet Explorer 10-11 */
					   color:    #fff;
					}
					input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
					   color:    rgba(255,255,255,0.5);
					}
					// input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder{
					// 	color: #fff;
					// }
				}
				i{
					color: #fff !important;
				}
				&:hover{
					background:@top-hover;
				}
			}
		}

		&-split{
			width: 500px;
		}

		&-right{
			display: block;
			width:70px;
			line-height:30px;
			border:1px solid #ffffff;
			border-radius: 5px;
			font-size:16px;
			font-weight:400;
			text-align: center;
			color:#ffffff;
			margin-right:20px;
			cursor: pointer;
			&:hover{
				color:#9ad9c2;
				border-color:#9ad9c2;
			}
		}

		.mk-layout {
			display: flex;
			flex-direction: column;
			overflow: auto;
		}
	}

	&-content {
		flex: 1;
		flex-direction: row;
		position: relative;
		overflow: hidden;

		&-bgs {
			position: absolute;
			width: 100%;
			height: 500px;
		}
		.ant-carousel {
			width: 100%;
			height: 100%;

			//.slick-track {
			//	user-select: all;
			//}
			.slick-list {
				transition: all .5s linear;
			}
			.slick-slide {
				position: relative;
			}
			div {
				height: inherit;
			}
			img {
				width: 100%;
				height: 100%;
			}
			.slick-dots li {
				margin: 0 10px;
			}
			.slick-dots li button {
				background: #1EB5AD;
				width: 30px;
				height: 5px;
			}
		}
	}
}

.headBarBtn{
	display: inline-block;
	vertical-align: middle;
}
.liveCast:hover{
	background:@top-hover;
}