fj-dc-ui/.svn/pristine/0c/0cb83a4ebdc8e83ec190df7109c19f2a49843d39.svn-base

$heightBase:11.1vh;
$widthBase:20%;
$fontSizeNormal:.8vw;
//所有div基础样式
@mixin divBase {
background: rgba(255,255,255,1);
box-shadow: 0px 2px 12px 0px rgba(83,101,164,0.3);
border-radius: 10px;
margin-top: 15px;

	&: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 / 2.5;

		.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中的QuestionLineChart组件样式
.left_qusLineChart {
  @include divBase;
  @include divBase_dark;
  height: $heightBase * 3.6;
  @include divBaseHeight (($heightBase  * 3.6));
  .simple_header{
    height: $heightBase / 2.5 ;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 20px;
    background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(233,240,243,1) 100%);
    box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1);
    .simple_header_text{
      float: left;
      color: #333;
      font-size: 1.1vw;
      padding: .5vw 0;
      font-weight: bold;
      position: relative;
      .redCircle{
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: #E52C10;
        font-size: 12px;
        border-radius: 12px;
        text-align: center;
        color: #ffffff;
      }
    }

  }

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

    li {
      margin: 0;
      height: 6vh;
      line-height: 3vh;
      list-style: none;
      border-bottom: 1px dashed rgba(239,240,244,1);
      img.notice_img{
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
      }
      a {
        color: #333333;
        text-decoration: none;
        @include fontColor_dark_gray;

        &:hover {
          color: #3D7EFF;
        }
      }
    }

    span.jc_date{
      float: left;
      color: #999999;

    }
  }
}

//左侧div中的Notices组件样式
	.left_notices {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 3.6;
		@include divBaseHeight (($heightBase  * 3.6));
    .simple_header{
      height: $heightBase / 2.5 ;
      border-radius: 10px 10px 0px 0px;
      padding: 10px 20px;
      background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(233,240,243,1) 100%);
      box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1);
      .simple_header_text{
        float: left;
        color: #333;
        font-size: 1.1vw;
        padding: .5vw 0;
        font-weight: bold;

      }
    }

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

			li {
				margin: 0;
				height: 6vh;
        line-height: 3vh;
				list-style: none;
				border-bottom: 1px dashed rgba(239,240,244,1);
				a {
					color: #333333;
					text-decoration: none;
					@include fontColor_dark_gray;

					&:hover {
						color: #3D7EFF;
					}
				}
			}

			span.jc_date{
        float: left;
        color: #999999;

			}
		}
	}
}

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


	.middle_map {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 5.24;
    text-align: center;
    padding-top: 5px;
    .map_header{
      margin: 0px auto 5px;
      width: 50%;
      height: 46px;
      line-height: 46px;
      font-size: 20px;
      color: #ffffff;
      background-color: #437BEB;
      box-shadow: 10px 10px 5px #C6D7F9;
      border-radius:10px;
      span{
        font-size: 20px;
      }
    }
	}
	.middle_bar {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 1.9;
		@include simpleHeader;
	}
}

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

.right_qus {
	@include divBase;
  box-shadow:none;
  background-color: #EFF0F4;
	@include divBase_dark;
	height: $heightBase * 1.4 ;
	@include divBaseHeight (($heightBase * 1.3));
  display: flex;
  flex-wrap: nowrap;
  .firstDiv{
    flex: 1;
    margin-right: 15px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(83,101,164,0.3);
    p.p_header{
      text-align: center;
      font-size: 16px;
      line-height: $heightBase * .36;
      font-weight:600;
      border-radius: 10px 10px 0px 0px;
      color:rgba(255,255,255,1);
      height:$heightBase * .36;
      background:rgba(67,123,235,1);
    }
    .flexBox{
      display: flex;
      flex-wrap: nowrap;
      .imgBox{
        flex: 1;
        padding: 10px 5px;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .contentBox{
        flex: 3;
        padding: 10px 0px;
        line-height: $heightBase * .3;
        .firstP{
          text-align: center;
          font-size: 24px;
          color: #E6A23C;

        }
        .secondP{
          text-align: center;
          line-height: 3vh;
          color: #5365A4;
          font-size: 10px;

        }
      }
    }
  }
  .secondDiv{
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 2px 12px 0px rgba(83,101,164,0.3);
    p.p_header{
      text-align: center;
      font-size: 16px;
      line-height: $heightBase * .36;
      font-weight:600;
      border-radius: 10px 10px 0px 0px;
      color:rgba(255,255,255,1);
      height:$heightBase * .36;
      background:rgba(67,123,235,1);
    }
    .flexBox{
      display: flex;
      flex-wrap: nowrap;
      .imgBox{
        flex: 1;
        padding: 10px 5px;
        img{
          width: 40px;
          height: 40px;

        }
      }
      .contentBox{
        flex: 3;
        padding: 6px 0px;
        line-height: $heightBase * .3;
        .firstP{
          text-align: center;
          font-size: 12px;
          color: #957E58;
          span{
            font-size: 24px;
            color: #E6A23C;
          }
        }
        .secondP{
          text-align: center;
          line-height: 3vh;
          color: #5365A4;
          font-size: 10px;
          span{

            margin-left: 10px;
            color: #73DEB3;
          }
        }
      }
    }
  }
}

	//右侧div中的QuestionLineChart组件样式
	.right_pie_dcdx {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2.8;
		@include divBaseHeight (($heightBase * 2));
		@include simpleHeader;
		.right_FinishRate_content{
		width: 100%;
		height: ($heightBase * 2.8) - ($heightBase / 3);
		}
	}
	.right_pie_wtfb {
		@include divBase;
		@include divBase_dark;
		height: $heightBase * 2.8;
		@include divBaseHeight (($heightBase * 2.22));
		@include simpleHeader;
		.left_ProblemPieChart_content{
		width: 100%;
		height: ($heightBase * 2.8) - ($heightBase / 3);
		}
	}
}