railwaysystem/build_ui/static/css/project.css

*{ padding: 0; margin:0; }

.fnb{ font-weight: bold; }

.fnsm{ font-size:14px; } /*小号字体*/

.layui-table-tips-main,
.layui-table-cell,
.layui-layer-msg .layui-layer-dialog .layui-layer-content,
.layui-layer-dialog .layui-layer-content,
.layui-laydate,
.layui-laydate-footer .laydate-footer-btns span,
.layui-laydate-content td,
.layui-layer-title,
.layui-laypage a,
.layui-laypage span,
.layui-btn,
input, textarea, select, button,
.fnTxt{ font-size: 16px;  } /*正文*/

.fnTit{ font-size: 16px; }  /*标题*/



.active .fnTit{ font-size:18px; }

.fnNav{ font-size: 20px; }  /*标题*/
.fnMenu{ font-size:18px !important; }

.fmt .tbH3{ font-size:18px !important;  }

.active .fnNav{ font-size:24px; }

.layui-table-tool .layui-inline[lay-event] .layui-icon,

.fnTitlg{ font-size: 24px; }

.fnLogo{ font-size: 40px; } /*页面大标题*/

.fnSubLogo{ font-size: 36px; } /*页面二标题*/

.fniconL{ font-size:52px; }

.layui-form-label{ font-size: 14px; }

.dtree-layui-dtreefont,
.dtree-layui-ficon{ font-size:20px !important; }
.dtree .dtree-layui-item cite{ font-size:16px !important; }

.fmt_help h2{ font-size:22px; }
.fmt_help p{ font-size:18px; }

/*小屏字体布局问题*/

@media screen and (min-width:2000px){



.fnsm{ font-size:16px; } /*小号字体*/

.layui-table-tips-main,
.layui-table-cell,
.layui-layer-msg .layui-layer-dialog .layui-layer-content,
.layui-layer-dialog .layui-layer-content,
.layui-laydate,
.layui-laydate-footer .laydate-footer-btns span,
.layui-laydate-content td,
.layui-layer-title,
.layui-laypage a,
.layui-laypage span,
.layui-btn,
input, textarea, select, button,
.fnTxt{ font-size: 22px!important;  } /*正文20*/

.fnNav{ font-size: 28px; }  /*标题*/
.fnMenu{ font-size: 26px !important; }

.fmt_help h2{ font-size:34px; }
.fmt_help p{ font-size:26px; }

.fmt .tbH3{ font-size:28px !important;  }

.active .fnNav{ font-size:30px; }

.layui-table-tool .layui-inline[lay-event] .layui-icon{ font-size:22px;}

.fnTitlg{ font-size: 32px; }

.fnTit{ font-size: 26px; }  /*标题*/

.typepul .fnTit{ font-size: 30px; }
.menuItem .fnTit{ font-size: 29px; }

.dtree-layui-ficon{ font-size:24px; }

.active .fnTit{ font-size:30px; }

.fnLogo{ font-size: 52px; } /*页面大标题*/

.fnSubLogo{ font-size: 46px; } /*页面二标题*/

.fniconL{ font-size:62px; }

.layui-form-label{ font-size: 20px; } /*18*/

.dtree-layui-dtreefont,
.dtree-layui-ficon{ font-size:28px !important; }
.dtree .dtree-layui-item cite{ font-size:20px !important; }

}


.titleInfo{ color:#ccc;/* position: absolute; right: 1vh; top: .5vh;*/ cursor: pointer; margin-left:1vh; }


html,body{ width: 100%; height: 100%; font-size: 16px; }

p{ line-height: 1.5; }

a:hover{ color: #fff; }

input[disabled]{ border:1px #5c6468 solid; background:#707884; color:#5c6468; }

.txtcut2 {

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

}



.form-control .button{ font-size:18px;}

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-transition-delay: 99999s;

    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;

}






@keyframes lxmove1 {

    0%{

        top: 1vh; left: 13vh;

    }

    25%{

        top: -5vh; left: 19vh;

    }

    50%{

        top: -5vh; left: 19vh;

        transform: rotate(0deg);

    }

    75%{

        top: -5vh; left: 19vh;

        transform: rotate(360deg);

    }

    100%{

        top: 1vh; left: 13vh;

        transform:rotate(0deg);

    }

}

@keyframes lxmove2 {

    0%{

        top:12vh; left:1vh;

    }

    25%{

        top: 7vh; left: -5vh;

    }

    50%{

        top: 7vh; left: -5vh;

        transform:rotate(0deg);

    }

    75%{

        top: 7vh; left: -5vh;

        transform:rotate(360deg);

    }

    100%{

        top:12vh; left:1vh;

        transform:rotate(0deg);

    }

}

@keyframes lxmove3 {

    0%{

        bottom: 0; right: 1vh;

    }

    25%{

        bottom: -6.5vh; right: -6vh;

    }

    50%{

         bottom: -6.5vh; right: -6vh;

        transform:rotate(0deg);

    }

    75%{

         bottom: -6.5vh; right: -6vh;

        transform:rotate(360deg);

    }

    100%{

        bottom: 0; right: 1vh;

        transform:rotate(0deg);

    }

}



@keyframes hebing1 {

    0%{

        top: 1vh; left: 13vh;

    }

    50%{

       top: -5vh; left: 19vh;

    }

    100%{

        top: 1vh; left: 13vh;

    }

}

@keyframes hebing2 {

    0%{

        top:12vh; left:1vh;

    }

    50%{

       top: 7vh; left: -5vh;

    }

    100%{

        top:12vh; left:1vh;

    }

}

@keyframes hebing3 {

    0%{

        bottom: 0; right: 1vh;

    }

    50%{

       bottom: -6.5vh; right: -6vh;

    }

    100%{

        bottom: 0; right: 1vh;

    }

}



.fl{ float: left; }

.fr{ float: right; }

.ml{ margin-left:12vh; }

.tr{ text-align: right; }
.tl{ text-align: left; }
.tc{ text-align: center; }



/* 下面是页面内样式，无需引用 */

.layui-block {

    margin-bottom: 10px;

}



.layui-form-label {

    width: 180px;

}

.code {

    color: gray;

    margin-left: 10px;

}

.unshow>#result {

    display: none;

}

pre { padding: 5px; margin: 5px; }

.string { color: green; }

.number { color: darkorange; }

.boolean { color: blue; }

.null { color: magenta; }

.key { color: red; }

.treesearch{ width: 90%; margin:6px auto ; }



.btn-tree{ position: absolute; right: -80px; top: 0; }



/*表单表格样式重置 dark版本*/

::placeholder{ color:#D5E5EB; }

.layui-table{ background:#050A18; }



.layui-table td{ color:#D5E5EB }
.layui-table td a{ color:#D5E5EB; text-decoration: underline; }

.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row]{ border-color:transparent; }

.layui-table th{ background:#101E3B; color:#D5E5EB; font-weight:bold; /*border:none;*/ border:1px #5a5a5a solid; }

.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even){ background:#050A18; }

.layui-table-box tbody tr:nth-child(even){ background-color:#012980; }

.layui-table-box tbody tr:nth-child(odd){ background-color:#011552; }

.layui-table-box tbody tr.layui-table-click{ background-color: #6f5803; }



.layui-table-fixed-l{ box-shadow: 3px 4px 4px rgba(0,0,0,.9); }

.layui-table-fixed-r{ box-shadow: -3px 4px 4px rgba(0,0,0,.9); }

.layui-tableTree tbody td { border-bottom:1px #555 solid;  }
.layui-tableTree tbody tr.layui-table-click{ background-color: #6f5803; }

.layui-laypage .layui-laypage-skip,

.layui-laypage a,

.layui-laypage span{ color:#D5E5EB; }

.layui-laypage .layui-laypage-curr .layui-laypage-em{ background:#0651A4; }

.layui-form-label{ width:40%; font-weight: bold; color:#f0f0f0; }

.app-container el-form el-form-item {color: #f0f0f0;}

.layui-input,

.layui-select,

.layui-textarea{ background:#050a18; color:#D5E5EB; border-color:#274580; border-width:2px; }

.layui-select-tips .layui-input{ background:#f0f0f0; color:#333; }

.layui-select-tips .layui-input::placeholder{ color:#666; }

.layui-form-item .layui-inline{ margin-right: 0; }

.layui-laypage .layui-laypage-skip,

.layui-laypage a,

.layui-laypage span{ color:#101E3B; }

.fuzzyBox{ width:92%; margin:6px auto; }

.fuzzyBox .layui-input{ background:#fff; color:#101E3B;  }

.fuzzyBox .layui-input::placeholder{ color:#101E3B; }

.dtree{ color: #101E3B; }

.layui-table-tool .layui-inline[lay-event]{ color:#fff; width:40px; height: 40px; line-height:1.5; }

.layui-table-tool{ min-height: 60px; }

.layui-table-tool-panel{ width:800px; background-color:#eee; }

.layui-table-tool-panel li{ display: inline-block; width:50%; height:3vh; }

.layui-form{ color:#fff; }

.layui-layer-page .layui-layer-content{ background:lightgray; }

.layui-form-select dl{ color:#000; }

.btn-search{ margin-bottom:2vh; }

.layui-table thead .layui-table-cell{ height: auto; }

.layui-table-cell .layui-table-link{ color:#fff; text-decoration: underline; }

.td-merge{ background:#1763c1; }

.layui-table-cell.table-cell-tree{ height: auto; overflow: auto; white-space: normal; }

/* 一户式查询方案 */
.fmt{}
.fmt .tbH3{ /*width:88%;*/ margin:20px auto 16px;/* color:#43B0EF;*/ color:#f0f0f0; font-weight: bold; border-left:4px #43B0EF solid; padding-left:18px; background:rgba(0,0,0,.6); }
.fmt .tbForm{width:100%; margin:0 auto; margin-bottom:40px; border:1px #333 solid;}
.fmt .tbForm th,
.fmt .tbForm td{ border:1px #333 solid; padding:8px 10px; text-align: left; }
/*.tbForm th{  }*/
.fmt .tbForm td a{ color:#A6E2FF; text-decoration: underline; }
.fmt .tbForm tr.layui-table-click{ background-color: #6f5803; }
.fmt .tbForm .tdLable{ color: #A6E2FF; }
.fmt .tbForm .tdValue{ color: #f0f0f0; }
.tdValue .tdTitle{  width:20%; padding:6px 10px; border-radius: 8px; background-image: -webkit-linear-gradient(left,#065197,#090d3c); }
.tdValue .tdSubTitle{  width:20%; padding:6px 10px; border-radius: 8px; background-image: -webkit-linear-gradient(left,#072652,#090d3c); }

.fmt .tdLable{ font-weight: bold;  }
.fmt .tab-top{ width:12vw; color:#A6E2FF;  position: fixed; text-align: center; left:1%; top:30%;  }
.fmt .layui-tab-left{ width:12vw; border-bottom: none; position: fixed; text-align: right; left:1%; top:38%;  }
.fmt .layui-tab-left li{ display: block; }

.fmt .layui-tab-left .tab-li{ width:80%; padding:8px 0; margin:4px 0; margin-left:10%; background:#204b6d; border-radius:20px 0 0 20px;  }
.fmt .layui-tab-left .tab-li.layui-this{ width:90%;  margin-left:0;  padding:12px 0; background-image: -webkit-linear-gradient(left,#065197,#090d3c);  }
.layui-tab-title .layui-this:after{ height: 100%; }

.fmt .layui-tab-right{ width:84vw; }
.fmt .layui-tab-brief{ color: #A6E2FF; }
.fmt .layui-tab-brief > .layui-tab-left .layui-this{ color:#f0f0f0; }
.fmt .layui-tab-brief > .layui-tab-left li.layui-this:after{ /*border-bottom:2px #A6E2FF solid;*/ border-bottom:none; }

@media screen and (min-width:2000px){
    .fmt .tab-top{ width:14vw; position: fixed; left:1%; top:24%;  }
    .fmt .layui-tab-left{ width:14vw; left:1%; top: 36%;}

    .fmt .layui-tab-right{ width:82vw; }
    .fmt .layui-tab-left .tab-li{ padding:10px 0; }
    .fmt .layui-tab-left .tab-li.layui-this{ padding:20px 0; }
}

/*fpmap*/
.grid-cn{ width: 100%; height: 90vh; background:#eee; }
.grid-msg{ width: 100%; height: 90vh; background:#eee;  }
.grid-sy{ width: 100%; height: 90vh;  background:#eee; }
.grid-scroll{ width: 100%; height: 4vh;  background:#eee; }


/*特殊字体颜色渐变色-元素里不可以单独写color*/

.colGlight  {

    color:#fff;

    letter-spacing: 1px;

    font-weight: 600;

    background-image:-webkit-linear-gradient(left,#ffffff,#F5FAFC);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.colGblue{

    color: #fff;

    background-image: -webkit-linear-gradient(top,#ffffff 30%,#13C3FF);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

}

.colGbluehz{

    color: #fff;

    background-image: -webkit-linear-gradient(left,#ffffff,#03ADFF);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.td-dark{ background:#000; color:#f0f0f0; }

.hide{ display:none; }

.inline{ display: inline-block; }

.pr{ position: relative; }

/*正式使用的loading*/
.dataLoading{  width: 100%; height: 100%; background:rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 999; text-align: center; color:#fff; }
.mychartLoadingBox{ width:80%;  height:auto; margin:0 auto; position: absolute; top: auto; bottom:0; left: 10%; }

@media screen and (min-width:2000px){

.mychartLoadingBox { width:94%; left: 3%;  }

}


.layEportOut{ padding:50px; background-color:#393D49; color:#f0f0f0; }


.pageTip{ width: 50vw; text-align: center; line-height: 3.5vh; background:rgba(255,140,28,.8); color:#481c05; position: absolute; top:4vh; right: 25vw; z-index: 9999; border-radius: 20px; font-weight: bold;}

.timeline,
.timeline .layui-text{ color: #f0f0f0 }
.timeline-item{ border-bottom:1px dashed #333; padding:10px; margin-bottom: 8px; }
.timeline-item-header{ font-weight: bold; color: #A6E2FF; }

.timeline .layui-timeline-title{ margin-top: 14px; }

.bg-tr-tit{ background:rgba(0,0,0,.6); }

@media screen and (max-width:1918px){

.statuBox { padding-top:10%;   }

}