fj-dc-ui/.svn/pristine/e1/e1699ace1f6deb5ef32a4bf3cb9bda6342a18c48.svn-base

$heightBase:11.1vh;
$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: 5px;

	&:first-child {
		margin-top: 0px;
	}
}
//保持暗色主题添加border后 div高度一致
@mixin divBaseHeight ($divSelfHeight){
	[data-theme="dark"] & {
		height: $divSelfHeight * .99;
	}
}
@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: 2vh 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: .5vh 0;
			text-align: right;
			width: 13.6vw;
		}
	}
}

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

@mixin bar ($image) {
	border-radius: 4px;
	margin-left: .5vw;
	color: #fff;
	cursor: pointer;
	width: 11vw;
	height: 9.7vh;
	padding: 0vw;
	margin-top: .6vh;
	float: left;
	background: {
		image: url($image);
		repeat: no-repeat;
		size: 100% 100%;
	}

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

		.content_top {
			padding: 1vh .5vw;

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

		.content_bottom {
			.content_bottom_num {
				margin-left: 1vw;
				font-size: 1vw;
			}
			.content_bottom_dw {
				font-size: $fontSizeNormal;
			}
		}
	}
}

//左侧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: $fontSizeNormal;
						color: rgba(86, 108, 146, 1)
					}
				}
			}
		}
	}

//左侧div中的QuestionLineChart组件样式
.left_qusLineChart {
	@include divBase;
	@include divBase_dark;
	height: $heightBase * 4.2;
	@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.3;
		@include divBaseHeight (($heightBase  * 2.25));
		@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: 3vh;
				line-height: 3vh;
				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.96;
	float: left;
	margin-left: 5px;

.middle_button {
	@include divBase;
	@include divBase_dark;
	@include border_delete_dark;
	height: $heightBase;

		span {
			font-size: $fontSizeNormal;
			color: rgba(51, 51, 51, 1);
			@include fontColor_dark_gray;
		}

	.time {
		text-align: right;
		padding: 1vh .5vw;
		width: 24%;
		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.8;
		span {
			font-size: 12px;
			// font-size: $fontSizeNormal;
			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;
			color: #606266;
			height: ($heightBase) * 2.95 - 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.7;
		@include simpleHeader;
	}
}

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

.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: $fontSizeNormal;
					color: rgba(86, 108, 146, 1);
					@include fontColor_dark_gray;
				}
			}
		}
	}
}

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

	//右侧div中的QuestionLineChart组件样式
	.right_pie_dcdx {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2;
		@include divBaseHeight (($heightBase * 2));
		@include simpleHeader;
		.right_FinishRate_content{
		width: 100%;
		height: ($heightBase * 2.1) - ($heightBase / 3);
		}
	}
	.right_pie_wtfb {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2.22;
		@include divBaseHeight (($heightBase * 2.22));
		@include simpleHeader;
		.left_ProblemPieChart_content{
		width: 100%;
		height: ($heightBase * 2.2) - ($heightBase / 3);
		}
	}
}
// .myRadio .el-radio-button--mini .el-radio-button__inner {
// 	padding: .8vh .5vw;
// 	font-size: 12px;
// }
// .myRadio .el-radio-button__orig-radio:checked+.el-radio-button__inner {
// 	padding:.8vh .5vw;
// }