gate-dashboard-program/static/css/oil-windtalkiot.css

  body {
    background: #eeeeee;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
  }

  a:hover,
  a:focus {
    text-decoration: inherit;
  }

  table.dataTable thead .sorting:after,
  table.dataTable thead .sorting_asc:after,
  table.dataTable thead .sorting_desc:after,
  table.dataTable thead .sorting_asc_disabled:after,
  table.dataTable thead .sorting_desc_disabled:after {
    opacity: 0;
  }

  #app {
    height: 100%;
  }

  /*模板修改*/

  .breadcrumb {
    background-color: rgba(0,0,0,0);
  }
  .navbar.horizontal-menu .navbar-inner>.nav>li {
    line-height: 45px;
  }

  .navbar.horizontal-menu.navbar-fixed-top+.page-container>.sidebar-menu.fixed .sidebar-menu-inner {
    top: 55px;
  }

  .sidebar-menu .logo-env {
    padding: 30px;
    border-bottom: 1px solid #313437;
  }

  .xe-widget.xe-status-update .xe-body li .status-date {
    font-size: 0.6rem;
  }

  .xe-widget.xe-status-update .xe-body li p {
    font-size: 0.8rem;
  }

  .xe-widget.xe-status-update {
    padding: 15px;
  }

  .xe-widget.xe-status-update .xe-header .xe-icon,
  .xe-widget.xe-status-update .xe-header .xe-nav {
    padding-bottom: 0.5rem;
  }

  .xe-widget.xe-status-update .xe-body li .status-date {
    padding-bottom: 0.3rem;
  }
  .breadcrumb {
    background-color: none;
  }

  .dataTables_wrapper .table thead>tr .sorting:before,
  .dataTables_wrapper .table thead>tr .sorting_asc:before,
  .dataTables_wrapper .table thead>tr .sorting_desc:before {
    height: 0;
  }

  .list-unstyled {
    padding-bottom: 5px;
  }

  .page-container .main-content .page-title {
    padding: 10px;
  }

  .sidebar-menu {
    width: 280px;
  }

  .modal {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -280px;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }

  .modal-backdrop {
    z-index: 0;
  }

  .modal-backdrop.in {
    opacity: 0;
  }

  /*end*/

  .add-zindex {
    position: absolute;
    z-index: 200;
  }

  .top-nav-userinfo {
    background: #fff;
  }

  .router-view-min-h {
    min-height: calc(100vh - 96px);
  }

  .maps-router-view-min-h {
    min-height: calc(100vh - 70px);
    margin: -25px -25px 5px -25px;
  }

  .page-container .main-content .map-page-title {
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 5px;
  }

  .page-container .main-content .card-page-title {
    margin-left: -15px;
    margin-right: -15px;
  }

  .data-box-t-name {
    position: absolute;
    height: 12%;
    padding-top: 2%;
    z-index: 200;
  }

  .img-b-name {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    z-index: 200;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6) 100%);
  }

  .mark1 {
    position: relative;
    width: calc(100vw - 267px);
    height: calc( calc(100vw - 267px) * 0.56);
    min-width: 740px;
    min-height: 430px;
  }

  .mark-box {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /*滚动条样式*/

  .mark-box::-webkit-scrollbar {
    width: 1px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  /*滚动条里面小方块*/

  .mark-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    background: #bab4b4;
  }

  /*滚动条里面轨道*/

  .mark-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    border-radius: 10px;
    background: #eee;
  }

  .add-ul {
    display: none;
    color: #2c2e2f;
  }

  .data-device-type {
    padding-left: 20px;
  }

  /*弹框样式*/

  #tk_list {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    height: 100%;
    background: rgba(174, 169, 169, 0.699);
    width: 20vw;
    min-width: 300px;
    padding: 20px;
  }

  #tk_top {
    padding: 10px 0;
  }

  /*end*/

  /*百度地图logo 版权*/

  .anchorBL,
  .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
  }

  .container3-name {
    position: absolute;
    top: 3%;
    left: 5%;
    line-height: 0.8rem;
    padding: 0.3rem;
    color: #989898;
    background: #e4e4e4;
    z-index: 100;
    vertical-align: center;
    font-size: 0.6rem;
  }

  /*datatable*/

  #sensor_list_tb_wrapper,
  #sensor_vendorManagement_tb_wrapper,
  #sensor_model_management_tb_wrapper,
  #sensor_agreement_management_tb_wrapper,
  #sensor_function_grounp_tb_wrapper,
  #deployment_record_tb_wrapper,
  #warning_record_tb_wrapper,
  #warning_rules_list_tb_wrapper,
  #jz_management_tb_wrapper,
  #security_ThoseResponsible_tb_wrapper,
  #setting_personal_tb_wrapper {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    padding: 20px;
  }

  #sensor_list_tb,
  #sensor_vendorManagement_tb,
  #sensor_model_management_tb,
  #sensor_agreement_management_tb,
  #sensor_function_grounp_tb,
  #deployment_record_tb,
  #warning_record_tb,
  #warning_rules_list_tb,
  #jz_management_tb,
  #security_ThoseResponsible_tb,
  #setting_personal_tb {
    min-width: 950px;
  }
  #sensor_details_tb{
    min-width: 500px;
  }

  #sensor_list_tb thead,
  #sensor_vendorManagement_tb thead,
  #sensor_model_management_tb thead,
  #sensor_agreement_management_tb thead,
  #sensor_function_grounp_tb thead,
  #sensor_details_tb thead,
  #tz_list_tb thead,
  #deployment_record_tb thead,
  #warning_record_tb thead,
  #warning_rules_list_tb thead,
  #jz_management_tb thead,
  #security_ThoseResponsible_tb thead,
  #setting_personal_tb thead {
    opacity: 0;
  }

  .dataTables_wrapper {
    color: #979898;
  }

  th,
  td {
    text-align: center;
  }

  table.dataTable thead th {
    border-bottom: 1px solid #eeeeee;
  }

  form .form-control{
    background-color: rgba(55, 57, 58, 0.3);
  }

  /*end*/

  /*home_data*/

  .devise-bar-box {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .carousel-box {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .data-one {
    height: calc(calc(100vw - 300px) * 0.22);
  }

  .carousel-control {
    width: 30px;
  }

  .carousel-control.right {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.0) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.0) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.0) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
  }

  /*滚动条样式*/

  .devise-bar-box::-webkit-scrollbar {
    width: 3px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  /*滚动条里面小方块*/

  .devise-bar-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    background: #bab4b4;
  }

  /*滚动条里面轨道*/

  .devise-bar-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    border-radius: 10px;
    background: #eee;
  }

  /*滚动条样式*/

  .dataTables_scrollBody::-webkit-scrollbar,
  .carousel-box::-webkit-scrollbar {
    width: 3px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  /*滚动条里面小方块*/

  .dataTables_scrollBody::-webkit-scrollbar-thumb,
  .carousel-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    background: #bab4b4;
  }

  /*滚动条里面轨道*/

  .dataTables_scrollBody::-webkit-scrollbar-track,
  .carousel-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.01);
    border-radius: 10px;
    background: #eee;
  }

  /*end*/

  /*start*/

  .border-1px-eee {
    border: 1px solid #eee;
  }

  .font-sizepx-20 {
    font-size: 20px;
  }

  .border-2-eee {
    border: 8px solid #eeeeee;
  }

  .hide_tk_list {
    display: none;
  }

  .no-padding {
    padding: 0;
  }

  .no-margin-l {
    margin-left: 0;
  }

  .conter-margin {
    margin: auto;
  }

  .p_20 {
    padding: 20px;
  }

  .p-t-20 {
    padding-top: 20px;
  }

  .p-t-10 {
    padding-top: 10px;
  }

  .p-l-10 {
    padding-left: 10px;
  }

  .p-b-10 {
    padding-bottom: 10px;
  }

  .m-t-10 {
    margin-top: 10px;
  }

  .font-size-30 {
    font-size: 4rem;
  }

  .m-r-5 {
    margin-right: 5px;
  }

  .m-t-5 {
    margin-top: 5px;
  }

  .m-t--15 {
    margin-top: -15px;
  }

  .height-100 {
    height: 100%;
  }

  .height-23 {
    height: 23%;
  }

  .height-50 {
    height: 50%;
  }

  .height-30vh {
    height: 35vh;
  }

  .height-50vh {
    height: 45vh;
  }

  .color-fff {
    color: #fff;
  }

  .g-color-fff {
    background: #ffffff;
  }

  .felx-v-center {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .felx-vcenter {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
  }

  .flex-grow-1 {
    flex-grow: 1;
    /* default 0 */
  }

  .flex-grow-2 {
    flex-grow: 5;
    /* default 0 */
  }

  .felx-v-bottom {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  /*end*/
  [v-cloak] {
    display: none;
  }
  @media screen and (max-width: 1280px) {
    .data-one {
      min-height: calc(calc(100vw - 300px) * 0.3);
    }
  }

  @media screen and (max-width: 990px) {
    .data-device-type {
      padding-left: 0;
    }
    .data-one {
      min-height: calc(calc(100vw - 300px) * 0.4);
    }
  }

  @media screen and (max-width: 768px) {
    .mark1 {
      width: calc(100vw - 27px);
      height: calc(100vw * 0.56);
    }
    .add-ul {
      display: block;
    }
    .data-one {
      min-height: calc(calc(100vw - 60px) * 0.5);
    }
    .carousel-control .glyphicon-chevron-right {
      top: calc(50% - 10px);
    }
    .navbar.horizontal-menu .navbar-inner>.nav.nav-userinfo.mobile-is-visible {
      float: right;
    }
    .navbar.horizontal-menu.navbar-fixed-top+.page-container>.sidebar-menu.fixed .sidebar-menu-inner {
      top: 0;
    }
    .modal {
      left: 0;
    }
    /*修改手机版导航栏样式*/
    .page-container .sidebar-menu {
      position: absolute;
      z-index: 1000;
      width: 280px;
      left: 0;
      top: -1px;
    }
    .navbar.horizontal-menu .navbar-inner>.nav.navbar-mobile a:hover,
    .navbar.horizontal-menu .navbar-inner>.nav.navbar-mobile a:focus {
      color: #979898;
    }
    .nav .open>a,
    .nav .open>a:hover,
    .nav .open>a:focus {
      background-color: #2c2e2f;
      border-color: #373e4a;
    }
    .dropdown-menu {
      left: auto;
    }
    .navbar.horizontal-menu.navbar-fixed-top+.page-container>.sidebar-menu.fixed .sidebar-menu-inner {
      border-top: 1px solid #313437;
    }
  }

  @media screen and (min-width: 768px) {
    .dataTables_wrapper {
      min-height: 75vh;
    }
    #sensor_details_tb_wrapper {
      min-height: 25vh;
    }
    .navbar.horizontal-menu .navbar-inner .navbar-nav>li>a,
    .navbar.horizontal-menu .navbar-inner .navbar-nav>li {
      line-height: 45px;
    }
    .navbar.horizontal-menu.navbar-fixed-top+.page-container {
      margin-top: 45px;
    }
    .navbar.horizontal-menu,
    .navbar.horizontal-menu .navbar-inner .navbar-brand {
      height: 45px;
    }
    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-next {
      margin-right: -10px;
    }
  }

  /*弹出层样式*/

  .tk_moudel {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
  }

  .tk_panel {
    min-width: 300px;
    width: 50%;
    font-size: 0.9rem;
    background: #fff;
    border-radius: 5px;
  }

  .tk_top {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
  }

  .form_warning>div {
    padding: 10px 20px;
  }

  .submit_but_box {
    border-top: 1px solid #eee;
  }

  .submit_but {
    padding: 5px 10px;
    color: #fff;
    min-width: 30px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 3px 1px rgba(71, 117, 218, 0.59) inset;
    border-radius: 18px;
    border: 0;
    background: -webkit-linear-gradient(top, rgba(20, 6, 218, 0.3), rgba(0, 0, 0, .9));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .9));
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .9));
    background: linear-gradient(to bottom, rgba(23, 73, 167, 0.6), rgba(23, 73, 167, .9));
  }

  /*预警规则设置*/

  .width-100px {
    width: 100px;
  }

  .inp-width-100px {
    width: 150px;
  }

  .form-control {
    display: inline-block;
  }

  .border-t-eee {
    border-top: 1px solid #eee;
  }

  .warning_rules_setting-form .control-label {
    text-align: left;
  }

  /*组态样式*/
  .font-40bbea {
    color: #40bbea;
  }

  .font-241-253-4 {
    color: rgba(241, 253, 4, 1);
  }

  .font-red {
    color: red;
  }

  .font-6 {
    font-size: 0.6rem;
    font-weight: 500;
  }

  .font-1 {
    font-size: 0.1rem;
    font-weight: 200;
  }

  .font-10 {
    font-size: 1rem;
    font-weight: 800;
  }

  /*第一列的内容*/

  .wshc-2 {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 21%;
    height: 28%;
    /* border: 1px solid #40bbea; */
  }

  .wshc-1 {
    position: absolute;
    top: 10%;
    left: 32%;
    width: 21%;
    height: 28%;
    /* border: 1px solid #40bbea; */
  }

  .wscy-1 {
    position: absolute;
    top: 40%;
    left: 10%;
    width: 21%;
    height: 28%;
    /* border: 1px solid #40bbea; */
  }

  .wscy-2 {
    position: absolute;
    top: 40%;
    left: 32%;
    width: 21%;
    height: 28%;
    /* border: 1px solid #40bbea; */
  }

  .ws-name {
    position: absolute;
    left: 0;
    bottom: 1%;
    width: 100%;
    text-align: center;
  }

  .ws-top-num {
    padding-left: 13%;
  }

  .ws-right-num-1 {
    position: absolute;
    top: 23%;
    right: 5%;
  }

  .ws-right-num-2 {
    position: absolute;
    top: 45%;
    right: 5%;
  }

  .ws-right-num-3 {
    position: absolute;
    top: 65%;
    right: 5%;
  }

  .wsll-1,
  .wsll-2 {
    position: absolute;
    top: 71%;
    width: 23%;
  }

  .wsll-1 {
    left: 10%;
  }

  .wsll-2 {
    left: 30%;
  }

  /*第二列的内容*/

  .wsOilStorage-3,
  .wsOilStorage-2,
  .wsOilStorage-1,
  .diesel,
  .fuel-1,
  .fuel-2 {
    position: absolute;
    left: 54%;
    width: 20.5%;
    height: 14.5%;
  }

  .wsOilStorage-3 {
    top: 8%;
  }

  .wsOilStorage-2 {
    top: 22.5%;
  }

  .wsOilStorage-1 {
    top: 37%;
  }

  .diesel {
    top: 51.5%;
  }

  .fuel-2 {
    top: 66%;
  }

  .fuel-1 {
    top: 80.5%;
  }

  .row-2-l {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
  }

  .row-2-r {
    position: absolute;
    left: 52%;
    width: 48%;
    height: 100%;
  }

  .row-2-l-b-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }

  .row-2-l-t-name {
    position: absolute;
    top: 15%;
    width: 100%;
    text-align: center;
  }

  .row-2-r-t-name {
    position: absolute;
    top: 15%;
    left: 18%;
    width: 82%;
  }

  .row-2-l-b-liquidLevel {
    position: absolute;
    right: 24%;
    top: 15%;
  }

  .row-2-r-b-temperature {
    position: absolute;
    right: 5%;
    top: 43%;
  }

  /*第三列*/

  .row-3-i {
    position: absolute;
    left: 75%;
    width: 24.5%;
    height: 8%;
  }

  .row-3-i-1 {
    top: 5%;
  }

  .row-3-i-2 {
    top: 15%;
  }

  .row-3-i-3 {
    top: 25%;
  }

  .row-3-i-4 {
    top: 36%;
  }

  .row-3-i-5 {
    top: 46%;
  }

  .row-3-i-6 {
    top: 57%;
  }

  .row-3-i-7 {
    top: 67%;
  }

  .row-3-i-8 {
    top: 77%;
  }

  .row-3-i-9 {
    top: 87%;
  }

  .row-3-l-b-num {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .row-2-r-b-name {
    position: absolute;
    bottom: 10%;
    right: 0;
    width: 30%;
    text-align: center;
  }