ShangHaiYuan-AnXin/src/app/gis-management/fire-facilities/fire-facilities.component.scss

*{
  scrollbar-width: none; /* Firefox */
} 
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.content {
    width: 100%;
    height: 100%;
    //box-sizing: border-box;
    //padding: 10px;
    overflow-y: auto;
    .contentBox {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      overflow-y: auto;
    }
    .tableContent{
      width: 100%;
      height: 100%;
      .panelhead{
        //height: 24px;
        background-color: #F2F9FF;
      }
      .column{
        width: 100%;
        display: flex;
        flex-direction: column;
        border-bottom: 8px solid #EEF1F5;
        .up{
          width: 100%;
          margin-top: 3%;
          display: flex;
          flex-direction: row;
          .left{
            width: 40%;
          }
          .centernum{
            //width: 25%;
            color: black;
            text-align: center;
            white-space: pre-line;
            max-height: 48px;
            overflow-y: auto;
          }
        }
        .down{
          width: 100%;
         /*  display: flex;
          justify-content: space-around; */
          span{
           display: inline-block;
          }
        }
        .downtable{
          width: 100%;
        }
        .imgdown{
          margin-top: 3%;
          span{
            color: #0080FF;
          }
          input{
            border:none;
            outline: none;
            text-align: right;
            color: #0080FF;
          }
          img{
            height: 8px;
            width: 10px;
          }
        }
      }
    }
  }
  .mat-icon {
    color: black;
    cursor:pointer;
  }
  
  
  
  //可展开面板每一行css
  .mat-expansion-panel-header {
    padding: 3px 24px;
  }
  
  .firstContent {
    width: 3%;
  }
  .textContent {
    width: 12%;
    color: black;
    text-align: center;
    overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
  }
  .totalContent {
    width: 25%;
    color: black;
    text-align: center;
    white-space: pre-line;
    max-height: 48px;
    overflow-y: auto;
  }
  .lastTextContent { //textarea多行文本
    width: 45%;
    color: black;
    text-align: center;
  }
  input {
    height: 22px;
    line-height: 22px;
    padding-left: 5px;
    border-radius: 3px;
  }
  a {
    color: #0000ff;
  }
  
  
  
  //bottom用户输入框
  .InputField {
    display: inline-block;
    width: 40%;
    text-align: right;
    margin: 10px 25px;
    input {width: 60%;}
    label {margin-right: 10px;}
  }
  textarea {
    vertical-align: middle;
    border-radius: 5px;
    padding: 5px;
    width: 60%;
    height: 36px;
    resize: none;
  }
  
  
  
  //表格样式
  .overflowTable {
    width: 95%;
    margin: 0 auto;
    max-height: 300px;
    overflow-y: auto;
  }
  .detailsTable {
    margin: 10px 0;
    table {
      width: 100%;
      text-align: center;
      border-collapse:collapse;
      word-break:break-all; 
      word-wrap:break-all;
      table-layout:fixed;
      th {
        height: 35px;
        //border: 1px solid #999;
      }
      td {
        height: 35px;
        //border: 1px solid #999;
      }
        tr:nth-child(odd){
          background: #F2F9FF;
          }
    }
  }
  
  
  
  //滚动条样式
  ::-webkit-scrollbar{
    width: 5px;
    background-color: white;
  }
  ::-webkit-scrollbar-thumb{
    background-color: #999;
  }
  
  
  
  //img图片列表页面
  .imageList {
    width:1350px;
    height:700px;
    
    overflow-y: auto;
    .imageListBox {
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .imagesBox {
        width: 300px;
        height: 200px;
        margin: 0 11px 0 11px;
        display: inline-block;
        img {
          border: 1px solid #999;
          width: auto;
          height: auto;
          max-width: 100%;
          height: 170px;
          cursor:pointer;
        }
      }
    }
  }
  @media screen and (max-width:1200px){
    .imageList{
      width: 880px;
      height: 580px;
      .imageListBox {
        .imagesBox{
          width:262px;
        }
      }
    }
  }
  @media screen and (min-width:1200px) and (max-width:1400px){
    .imageList{
      width: 880px;
      height: 610px;
      .imageListBox {
        .imagesBox{
          width:275px;
        }
      }
    }
  }
  @media screen and (min-width:1400px) and (max-width:1600px){
    .imageList{
      width:1110px;
      height: 660px;
    }
  }