fj-dc-ui/.svn/pristine/4d/4d0632ddbffe1307c4448dd531dd2bcc50af0304.svn-base

$heightBase: 11.5vh ;
$widthBase: 20% ;
$fontSizeNormal:.8vw ;
//所有div基础样式
@mixin divBase {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 10px 0px rgba(160, 170, 199, 0.15);
	border-radius: 2px;
	margin-top: 10px;

	&:first-child {
		margin-top: 0px;
	}
}

//用户情况内部样式
@mixin systemStatus ($backgroundColor) {
	float: left;
	width: 9.1vw;
	height: $heightBase * .8;
	background: $backgroundColor;
	border-radius: 6px;
	margin-top: 1vh;
	margin-left: .5vw;

.icon {
	width: 35%;
	height: 100%;
	float: left;

	img {
		float: left;
		padding: 2.5vh 1vh;
		width: 3.5vh;
	}
}

.text {
	width: 65%;
	height: 100%;
	font-size: medium;
	float: left;
	color: #fff;

	div {
	margin: 1vh 0 .5vh 0;

		&:last-child {
			margin: 0;
		}
	}
}
}

//!左右小div头部样式
@mixin simpleHeader {
.simple_header {
	height: $heightBase / 3;

	.simple_header_icon {
		background-color: rgba(46, 101, 253, 1);
		width: 4px;
		height: 2vh;
		border-radius: 4px;
		float: left;
		margin: .6vw;
	}

	.simple_header_text {
		float: left;
		color: rgba(49, 63, 102, 1);
		font-size: .9vw;
		padding: .5vw 0;
		font-weight: bold;
	}
	.simple_header_control {
		float: left;
		padding: 0;
		text-align: right;
		width: 12.6vw;
	}
}
}

@mixin checked($boxShaDowDolor) {
	box-shadow: 0 0 10px $boxShaDowDolor;
}

@mixin bar ($image) {
	margin-left: .6vw;
	color: #fff;
	cursor: pointer;
	width: 9.3vw;
	height: 10.3vh;
	padding: 0vw;
	margin-top: .5vh;
	float: left;

	background: {
		image: url($image);
		repeat: no-repeat;
		size: contain;
	}

.content {
	width: 100%;
	height: 100%;

	.content_top {
		padding: 1vh 1vh 0vh 1vh;

		span {
			margin-left: .4vw;
			font-size: 1.5vw;
		}
	}

	.content_bottom {
		.content_bottom_num {
			margin-left: 1vw;
			font-size:2vw;
		}

		.content_bottom_dw {
			font-size: .9vw;
		}
	}
}
}

//左侧div
.left {
	//左侧div中的Systemstatus组件样式
	.left_user {
		@include divBase;
		height: $heightBase;
		.left_user_left {
			@include systemStatus(rgba(105, 176, 255, 1));
		}

		.left_user_right {
			@include systemStatus(rgba(131, 172, 255, 1));
		}
	}
	.middle_button {
		@include divBase;
		height: $heightBase;
		span {
		font-size: $fontSizeNormal;
		color: rgba(51, 51, 51, 1);
		}

		.time {
			text-align: right;
			padding: .5vh 0;
			width: 30%;
			float: left;
			height: 100%;
		}

		.button {
			width: 70%;
			float: left;
			height: 100%;

			.dcz {
				@include bar('/src/assets/img/duchazuPad.png');
			}

			.dcz_checked {
				@include bar('/src/assets/img/duchazuPad.png');
				@include checked(#51afea);
			}

			.dcry {
				@include bar('/src/assets/img/ducharenyuanPad.png');
			}

			.dcry_checked {
				@include bar('/src/assets/img/ducharenyuanPad.png');
				@include checked(#ff9780);
			}

			.dcdx {
				@include bar('/src/assets/img/duchaduixiangPad.png');
			}

			.dcdx_checked {
				@include bar('/src/assets/img/duchaduixiangPad.png');
				@include checked(#76e9c0);
			}

			.fxwt {
				@include bar('/src/assets/img/faxianwentiPad.png');
			}

			.fxwt_checked {
				@include bar('/src/assets/img/faxianwentiPad.png');
				@include checked(#b87cf6);
			}
		}
	}
	//左侧div中的QuestionCount组件样式
	.left_qus {
		@include divBase;
		height: $heightBase * 1.6;

		.header {
		height: $heightBase / 3;
		background-image: url('/src/assets/img/wentidikuang.png');

			.header_icon {
				img {
					float: left;
					width: 1.5vw;
					padding: .1vw 0 0 .3vw;
				}
			}

			.header_text {
					float: left;
					color: #fff;
					font-size: .9vw;
					padding: .3vw 0;
					font-weight: bold;
			}
		}

		.content {
			text-align: center;

			.top_text {
				padding: 3vh 0;
				font-size: .9vw;
				color: rgba(86, 108, 146, .8);
				font-weight: bold;
			}

			.bottom_text {
				span {
				font-size: 1.1vw;
				color: rgba(254, 178, 58, 1);
				font-weight: bold;

					&:last-child {
						font-size: .8vw;
						color: rgba(86, 108, 146, 1)
					}
				}
			}
		}
	}

	//左侧div中的QuestionLineChart组件样式
	.left_qusLineChart {
		@include divBase;
		height: $heightBase * 4.6;
		@include simpleHeader;
		.left_PublicSentiment_content{
			height: $heightBase * 4.4;;
		}
	}

//左侧div中的Notices组件样式
	.left_notices {
		@include divBase;
		height: $heightBase * 2.82;
		@include simpleHeader;

		.left_Notices_content {
				font-size: 12px;
				color: #606266;
				max-height: $heightBase * 2;
				overflow-y: auto;
				width: 100%;
				ul {
					padding: 0;
					margin: 0;
				}

				li {
					padding: 0 1vw;
					margin: 0;
					height: 3vh;
					line-height: 3vh;
					list-style: none;

					a {
						color: #606266;
						text-decoration: none;

						&:hover {
							color: #51afea;
						}
					}
				}

			span {
				float: right;
			}
		}
	}
}

//中部div
.middle {
	// width: $widthBase * 2.9;
	// float: left;
	// margin-left: 10px;

	

	.middle_map {
		@include divBase;
		height: $heightBase * 7.49;
		.superviseObject{
		margin-top: 2vh;
		font-size: 12px;
		color: #606266;
		height: ($heightBase * 2.93) - 50;
		overflow-y: auto;
		width: 100%;
			ul {
				padding: 0;
				margin: 0;
				li{
				cursor: pointer;
				padding: 0 0vw;
				margin: 0;
				height: 3vh;
				line-height: 3vh;
				list-style: none;
				margin-top: .5vh;
					&:first-child{
						margin-top: 0
					}
				}
			}
		}
	}
}

//右侧div
.right {
	// width: $widthBase;
	// float: left;
	// margin-left: 10px;

	.right_qus {
		@include divBase;
		height: $heightBase;

		.header {
			height: $heightBase / 3;
			background-image: url('/src/assets/img/wentidikuang.png');

			.header_icon {
				img {
					float: left;
					width: 1.5vw;
					padding: .1vw 0 0 .3vw;
				}
			}

			.header_text {
				float: left;
				color: #fff;
				font-size: .9vw;
				padding: .3vw 0;
				font-weight: bold;
			}
		}

		.content {
			text-align: center;

			.top_text {
				padding: .5vh 0;
				font-size: .9vw;
				color: rgba(86, 108, 146, .8);
				font-weight: bold;
			}

			.bottom_text {
				span {
				font-size: 1.1vw;
				color: rgba(254, 178, 58, 1);
				font-weight: bold;

					&:last-child {
						font-size: .8vw;
						color: rgba(86, 108, 146, 1)
					}
				}
			}
		}
	}

	//右侧div中的PublicSentiment组件样式
	.right_line {
		@include divBase;
		height: $heightBase * 2.3;
		@include simpleHeader;
		.right_QuestionLineChart_content{
			width: 100%;
			height: ($heightBase * 2.3) - ($heightBase / 3);
			}
	}

	//右侧div中的QuestionLineChart组件样式
	.right_pie_dcdx {
		@include divBase;
		height: $heightBase * 2.3;
		@include simpleHeader;
		
	}

	//右侧div中的QuestionLineChart组件样式
	.right_pie_wtfb {
		@include divBase;
		height: $heightBase * 2.75;
		@include simpleHeader;
		.left_ProblemPieChart_content{
			width: 100%;
			height: ($heightBase * 3.2) - ($heightBase / 3);
			}
			// 29.51667vh
	}
}