fj-dc-ui/.svn/pristine/7c/7c4f961fcfac9b2d19e8cdd01e064a10435ccd5e.svn-base

$heightBase: 11.6vh;
$widthBase: 20%;
$fontSizeNormal:.8vw;
//所有div基础样式
@mixin divBase {
	background: rgba(226,250,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;
	}
}
//保持暗色主题添加border后 div高度一致
@mixin divBaseHeight ($divSelfHeight){
	[data-theme="dark"] & {
		height: $divSelfHeight * .99;
	}
}
//暗色主题 div透明背景
@mixin divBase_dark{
	[data-theme="dark"] & {
	  background:transparent;
	  box-shadow: none;
	  border: 1px solid rgba(54, 162, 252, 1);
	}
}
//暗色主题白色字体
@mixin fontColor_dark{
	[data-theme="dark"] & {
		color:#fff;
	}
}
//暗色主题浅灰色字体
@mixin fontColor_dark_gray{
	[data-theme="dark"] & {
		color:rgba(177, 210, 254, 1);
	}
}
//左上用户在线情况和bar的暗色无边框
@mixin border_delete_dark{
	[data-theme="dark"] & {
		border:none;
	}
}
//右上问题个数统计暗色无图片加虚线底边框
@mixin background_deletePic {
	[data-theme="dark"] & {
		background-image: none;
		border-bottom: 1px dashed rgba(255,255,255,0.5);
	}
}


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

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

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

	div {
	margin: 2vh 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;
		@include fontColor_dark;
	}
	.simple_header_control {
		float: left;
		padding: .5vw 0;
		text-align: right;
		width: 14.6vw;
	}
}
}

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

@mixin bar ($image) {
	margin-left: .4vw;
	color: #fff;
	cursor: pointer;
	width: 11.1vw;
	height: 9.7vh;
	padding: 0vw;
	margin-top: 1vh;
	float: left;

	background: {
		image: url($image);
		repeat: no-repeat;
		size: 100% 100%;
	}
.content {
	width: 70%;
	height: 100%;

	.content_top {
		padding: 2.2vh 1vh .8vh 1vh;

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

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

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

//左侧div
.left {
	width: $widthBase;
	float: left;

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

		.left_user_right {
			@include systemStatus(rgba(131, 172, 255, 1));
		}
	}

	//左侧div中的QuestionCount组件样式
	.left_qus {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 1.6;
		@include divBaseHeight (($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;
		@include divBase_dark;
		height: $heightBase * 4.3;
		@include divBaseHeight (($heightBase* 4.3));
		@include simpleHeader;
		.left_PublicSentiment_content{
			height: $heightBase * 4.4;;
		}
	}

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

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

				li {
					margin: 0;
					height: 3.1vh;
					line-height: 3.1vh;
					list-style: none;
					border-bottom: 1px solid rgba(109, 118, 236, 0.2);

					a {
						color: #606266;
						text-decoration: none;
						@include fontColor_dark_gray;

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

			span {
				float: right;
				@include fontColor_dark_gray;
			}
		}
	}
}

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

	.middle_button {
		@include divBase;
		@include divBase_dark;
		@include border_delete_dark;
		height: $heightBase;
		span {
			// font-size: $fontSizeNormal;
			font-size: $fontSizeNormal;
			color: rgba(51, 51, 51, 1);
			@include fontColor_dark_gray;
		}

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

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

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

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

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

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

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

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

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

			.fxwt_checked {
				@include bar('/src/assets/img/faxianwenti.png');
				@include checked(#b87cf6);
			}
			.jbyywt {
				@include bar('/src/assets/img/specialQus.png');
			}
		}
	}

	.middle_map {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 4.9;
		span {
			// font-size: $fontSizeNormal;
			font-size: 12px;
			cursor: pointer;
			// color: rgba(51, 51, 51, 1);
			@include fontColor_dark_gray;
		}

		.time {
			text-align: right;
			padding: 0;
			width: 100%;
			float: right;
			height: 100%;
		}
		.superviseObject{
			margin-top: 2vh;
			font-size: 12px;
			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: 1vh;
					&:first-child{
						margin-top: 0
					}
					span{
						// background-color: transparent;
					}
				}
			}
		}
	}
	.middle_bar {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 1.6;
		@include simpleHeader;
	}
}

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

	.right_qus {
		@include divBase;
		@include divBase_dark;
		height: $heightBase;
		@include divBaseHeight (($heightBase));
		.header {
			height: $heightBase / 3;
			background-image: url('/src/assets/img/wentidikuang.png');
			@include background_deletePic;
			.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;
				@include fontColor_dark_gray;
			}

			.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);
						@include fontColor_dark_gray;
					}
				}
			}
		}
	}

	//右侧div中的PublicSentiment组件样式
	.right_line {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2;
		@include divBaseHeight (($heightBase * 2));
		@include simpleHeader;
	}

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

	//右侧div中的QuestionLineChart组件样式
	.right_pie_wtfb {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2.2;
		@include divBaseHeight (($heightBase * 2.2));
		@include simpleHeader;
	}
}