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;
  }
}
.more-label-font {       
  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; */
}

.tool-bar{
	visibility: hidden;
	float: right;
}

table tr:hover{
	.tool-bar{
		visibility: visible;
		.u-btn{   
			float: right;
		} 
	}
}
table tr.hover-row{
	.tool-bar{
		visibility: visible;
		.u-btn{   
			float: right;
		} 
	}
}
.cell-bar{
	display: none;
	float: right;
} 

.el-table__row td:hover{ 
  cursor: pointer;
	.cell-bar{
		display: inline; 
    .u-btn{   
			float: right;
		}   
	}
  .cell-text{
    display:none;
  }
}
 /**
 *解决表格固定列无法滚动问题
 */
.el-table {
  .el-table__fixed {
    height:auto !important; 
    bottom:17px !important;  
  }
}

.icon {
  color: #fff;
  height: 20px;
  width: 20px;
  border-radius: 15px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  display: inline-block;
  margin-right: 5px;
}  
/*2.隐藏滚动条，太丑了
.el-drawer__container ::-webkit-scrollbar{
  display: none;
}
*/
/*此处根据不同屏幕分配率显示不同的样式*/
/*手机端*/
@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;
  }
}