program_xm_vue/src/styles/mdp.scss

//main-container全局样式

.page-full-height{ 
  height: calc(100vh); 
} 

.page-height-95{
  height: calc(95vh);   
}  
.page-height-85{
  height: calc(85vh);  
} 

.page-height-75{
  height: calc(75vh);   
}  
.page-height-65{
  height: calc(65vh);  
} 

.page-height-55{
  height: calc(55vh);   
}  
.page-height-45{
  height: calc(45vh);  
} 

.page-height-35{
  height: calc(35vh);   
}  
.page-height-25{
  height: calc(25vh);  
} 
.page-height-15{
  
  height: calc(15vh);  

} 
.page-height-90{
  height: calc(90vh);   
}  
.page-height-80{
  height: calc(80vh);  
} 

.page-height-70{
  height: calc(70vh);   
}  
.page-height-60{
  height: calc(60vh);  
} 

.page-height-50{
  height: calc(50vh);   
}  
.page-height-40{
  height: calc(40vh);  
} 

.page-height-30{
  height: calc(30vh);   
}  
.page-height-20{
  height: calc(20vh);  
} 
.page-height-10{
  
  height: calc(10vh);  

} 
.page-height-5{
  
  height: calc(5vh);  

}  
.page-container {   
  overflow: auto;
  .page-tips{ 
    position:absolute;
    font-size: 16px;  
    bottom: 0px;
    color: red;
    padding-left: 10px;
    flex: 0 0 auto; 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden; 
  }
  .page-header{   
    overflow: auto; 
  }
  .page-main{  
    overflow: auto;
  }
  .page-bottom{   
    overflow: auto;
  }
} 
.overflow-auto{
  overflow: auto;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.border{ 
  border: 1px solid #e8e8e8;
}
.padding-20{
  padding:40px;
}
.padding{
  padding:10px;
}
.padding-top{
  padding-top: 10px;
}
.padding-bottom{
  padding-bottom: 10px;
}
.padding-left{
  padding-left: 10px;
}
.border-top{
  border-top: 1px solid #e8e8e8;
} 
.border-bottom{
  border-bottom: 1px solid #e8e8e8;
}
.padding-right{
  padding-right: 10px;
} 
.input-width{
  width:270px;
} 

/**
更多按钮
**/
.more-filter {
  margin: 20px 0px; 
  padding-left: 10px;
  padding-right: 10px;
  font{
    text-align: center;
    float: left;
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-top: 2px;
  }
  .el-row {
    padding-top: 10px;
  }
}
/**
  修改弹出框关闭按钮，放大，原来的太小
**/
.el-dialog__headerbtn {
  top: 8px !important; 
  background-size: cover;
 }
 .el-dialog__headerbtn i { 
  font-size: 32px; 
 }


.more-label-font {

  height: 32px;
  line-height: 32px;
  text-align: left;
  float: left; 
  min-width: 100px;
}

.tips{
  position:absolute;
  font-size: 14px;  
  bottom: -10px;
  color: red;
  padding-left: 10px;
  flex: 0 0 auto; 
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: bottom; 
  overflow-x: hidden; 
}
.center{
  text-align: center;
  align-items: center; 
}
.page-center{    
  margin:0 auto;
  max-width: 95vw;
}
//富文本必须放在全局，否则不起作用
.rich-context{   
  padding-left: 5px;
  padding-right: 5px; 
  overflow: hidden;
}
.rich-context img{ 
  max-width: 100%;
  object-fit: scale-down;  
}
 
.el-table .current-row > td { 
  background: #a9d6f0 !important; 
}

/**
模拟鼠标经过描点样式
*/  
.vlink:hover{
  text-decoration:none;    
	color: blue;
	cursor: pointer;  
}

/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
  /* overflow-x: auto; */
}

.el-drawer__header{ 
  margin-bottom: 10px !important;
  padding: 10px 10px 0 !important;
}

.hidden-bar{  
	visibility: hidden; 
}

table tr:hover{
	.hidden-bar{  
		visibility: visible;  
	}
}
table tr.hover-row{
	.hidden-bar{  
		visibility: visible;  
	}
}
.tool-bar{ 
  z-index: 500;
  position:absolute;
	visibility: hidden;
  top: 50%; 
  right:5px; 
  transform: translate(0%, -50%); 
}

table tr:hover{
	.tool-bar{  
		visibility: visible;  
	}
}
table tr.hover-row{
	.tool-bar{  
		visibility: visible;  
	}
}
.cell-box{
  display: flex;
  flex-wrap: nowrap;
}
.cell-input{
  display: none;
}
 
.cell-bar{
  
  z-index: 500;  
  top: 50%; 
  right:5px; 
  transform: translate(0%, -50%); 
  position:absolute;   
  display: none;
} 

.el-table__row td:hover{ 
 

	.cell-bar{
    cursor: pointer;  
		display: flex;   
    flex-wrap: nowrap;
	}
  .cell-text{
    display:none;
  }
  .cell-input{ 
    display:block;  
  }
}
 

.res-text{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  max-width:15vw;
} 
 /**
 *解决表格固定列无法滚动问题
 */

.el-table__body-wrapper{

  z-index:2

}
.icon {
  color: #fff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  text-align: center;
  line-height: 20px;
  font-size: 14px; 
  margin-right: 5px;
}  
 
.el-dialog__header{
  padding: 20px !important;  
}
.el-dialog__footer{
  padding: 20px !important;  
}
.el-dialog__body{
  padding-top: 0px !important; 
  padding-bottom: 20px !important; 
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.label-font-color{
  color: #C0C4CC;
}

.title-font-size{
  font-size:28px;
}
 
.big-icon {
  color: #fff;
  height: 36px;
  width: 36px;
  border-radius: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 18px;
  display: inline-block; 
} 
.icon {
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;  
} 

.echart-box{  
  min-height: calc(60vh);
  max-height: calc(80vh);   
  overflow-y: 'hidden';
  width:100%; 
  padding:10px;
} 
/*此处根据不同屏幕分配率显示不同的样式*/
/*手机端*/
@media only screen and (min-width: 0px) and (max-width: 768px) {  
  .page-center{    
    margin:0 auto;
    max-width: 95vw;
  } 
}
/*ipad*/
@media only screen and (min-width: 768px) and (max-width: 992px) { 
  .page-center{    
    margin:0 auto;
    max-width: 95vw;
  }
}
/*ipadpro*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {  
  .page-center{    
    margin:0 auto;
    max-width: 95vw;
  }
}
/*笔记本*/
@media only screen and (min-width: 1200px) and (max-width: 1920px) {  
  .page-center{    
    margin:0 auto;
    max-width: 90vw;
  }
}
/*台式电脑*/
@media only screen and (min-width: 1920px)   {  
  .page-center{    
    margin:0 auto;
    max-width:80vw;
  }
}