BJ_web_developers / cityOperationCenter

/**
 * @author songcxa
 * @date 2018/8/18
 * @Description:
*/
*{
  margin: 0;
  padding: 0;
}
/*html{*/
  /*!*因为100%=16px，1px=6.25%，所以10px=62.5%，这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来*!*/
  /*font-size:62.5%;*/
/*}*/
/*body{*/
  /*!*为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面*!*/
  /*font-size:12px;font-size:1.2rem ;*/
/*}*/

/*1 html{font-size:62.5%;} */
    /*因为100%=16px，1px=6.25%，所以10px=62.5%，*/
/*这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来*!*/
/*!*2 body{font-size:12px;font-size:1.2rem ;}*!*/
/*!*为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面*!*/
/*!*3 p{font-size:14px;font-size:1.4rem;}*!*/

html, body{
  height: 100%;width: 99.99%;
  font-family: "Microsoft YaHei";
  background-color: #052675;

  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
}
body{
  background: url(../images/body/bg.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  /*background-size:100% 100%;*/
  /*默认颜色*/
  color:#FFFFFF;
}

/*
*自定义字体
*/
@font-face {
  font-family: 'display-free';
  src: url('display-free.woff') format('woff'), /* Modern Browsers */
  url('display-free.ttf')  format('truetype') /* Safari, Android, iOS */
}

/*
*卡片样式1
*/
.theme-card {
  /*-webkit-box-shadow:inset 0 0 10px #295b7c;*/
  /*-moz-box-shadow:inset 0 0 10px #295b7c;*/
  /*box-shadow:inset 0 0 10px #295b7c;*/
  position: relative;
  background: url(../images/com/cardBorder.svg) no-repeat;
  background-size: 100% 100%;
}
.theme-card > .title,.theme-card2> .title{
  color: #FFFFFF;
  font-size: 14px;
  /*font-size:1.4rem ;*/
  height: 30px;
  line-height:30px;
  width: 100%;
  text-align: left;
  background: url(../images/com/cardTitleBg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.theme-card > .title >span,.theme-card2 > .title >span{
  margin-left: 60px;
  position:relative;
}
.theme-card > .title >span:before,.theme-card2 > .title >span:before{
  content: '';
  background: url('../images/com/cardTitleSide.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 40px;
  height: 13px;
  top:3px;
  left: -47px;
}
.theme-card > .title >span:after,.theme-card2 > .title >span:after{
  content: '';
  background: url('../images/com/cardTitleSide.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 40px;
  height: 13px;
  top:3px;
  right:-47px;
}
.theme-card > .content,.theme-card2 > .content{
  height: -webkit-calc(100% - 30px);
  height: -moz-calc(100% - 30px);
  height: calc(100% - 30px);
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}

/*
*卡片样式2
*/
.theme-card2 {
  position: relative;
}

/*
*卡片样式2
*/
.theme-map {
  position: relative;
  border:1px solid #1679de;
  margin-left:-1px !important;
}


/*************************************************************************************************************************/
/*
*工具类
*/
/*弹性盒模型*/
.eleVerHorCenter-flex{
  /*弹性盒模型*/
  display:flex;
  /*主轴居中对齐*/
  justify-content: center;
  /*侧轴居中对齐*/
  align-items: center;
}

/*盒模型*/
.eleVerHorCenter-box{
  display:-moz-box;
  display:-webkit-box;

  box-pack:center;
  box-orient:vertical;
  display: -webkit-box;
  -webkit-box-pack:center;
  -webkit-box-orient:vertical;
  -moz-box-pack: center;

}

/*表格模型*/
.eleVerHorCenter-table{
  display: table;
}
.eleVerHorCenter-tableCell,.eleNumBg{
  /*让元素渲染为表格单元格*/
  display:table-cell;
  /*设置文本水平居中*/
  text-align:center;
  /*设置文本垂直居中*/
  vertical-align:middle;
}
/*数字描述*/
.eleText{
  font-size: 14px;
  /*font-size:1.4rem ;*/
}
/*数字距左侧距离*/
.eleMarginLeft{
  margin-left: 15px;
  padding:5px;
  background: url(../images/com/numBorder.svg) no-repeat;
  background-size: 100% 100%;
}
/*数字背景*/
.eleNumBg{
  background: url(../images/com/numBg.svg) no-repeat;
  background-size: 100% 100%;

  width: 20px;
  height: 30px;
  margin-left: 5px;
  font-size:22px;
  /*font-size:2.2rem ;*/
}
/*div表格*/
.eleRotation{
  -webkit-transform: rotate(360deg);
  animation: rotation 5s linear infinite;
  -moz-animation: rotation 5s linear infinite;
  -webkit-animation: rotation 5s linear infinite;
  -o-animation: rotation 5s linear infinite;
}
@-webkit-keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
/*
*总计类[背景数字]
*/
.topBox,.bottomBox{
  border:0px solid red;
  position: relative;
}
.topBox{
  height: 30%;width: 100%;
  justify-content:left !important;
}
.bottomBox{
  height: 70%; width: 100%;
}