/**
|
航空工业UI设计手册2023版(PC)
|
请遵从此文件的要求
|
@autor wangting
|
**/
|
@font-face{
|
font-family:alibaba;
|
src:url("./font/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-RegularL3/AlibabaPuHuiTi-3-55-RegularL3.ttf");
|
}
|
@font-face{
|
font-family:alibabaBold;
|
src:url("./font/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.ttf");
|
}
|
@font-face{
|
font-family:'思源黑体';/**常规*/
|
src:url("./font/syht/SourceHanSans-Regular.otf");
|
}
|
@font-face{
|
font-family:'思源黑体 Medium';/**中等*/
|
src:url("./font/syht/SourceHanSans-Medium.otf");
|
}
|
@font-face{
|
font-family:'思源黑体 Bold';
|
src:url("./font/syht/SourceHanSans-Bold.otf");
|
}
|
body,html{width: 100%;height:100%;}
|
body{
|
font-size: 14px;line-height: 22px;color: #1D2129;font-family: "思源黑体","PingFang SC","Microsoft YaHei",Arial, Helvetica, SimSun,sans-serif;min-width: 1280px;
|
}
|
a{text-decoration: none;color: #1E89FF;}
|
a:hover{color: #479DFF}
|
a:active{color: #006DEA}
|
|
/***
|
主题色和链接色。常⽤于以下场景: 重要操作、⾼亮提⽰、操作状态等
|
****/
|
.color-primary-1 {background-color: #EBF4FF}
|
.color-primary-2 {background-color: #C2DEFF}
|
.color-primary-3 {background-color: #99C9FF}
|
.color-primary-4 {background-color: #70B3FF}
|
.color-primary-5 {background-color: #479DFF}
|
.color-primary-6 {background-color: #1E89FF}/**主⾊值**/
|
.color-primary-7 {background-color: #006DEA}
|
.color-primary-8 {background-color: #0055B6}
|
.color-primary-9 {background-color: #003D82}
|
.color-primary-10 {background-color: #00244E}
|
|
/*******
|
通用文字色
|
********/
|
.text-primary {color:#1D2129}
|
.text-regular {color:#606266}
|
.text-secondary {color:#909399}
|
.text-placeholder {color:#A8ABB2}
|
.text-disabled {color:#C0C4CC}
|
|
/*******
|
通用边框色
|
********/
|
.border-extra-darker{border: 1px solid #86909C}
|
.border-darker {border:1px solid #C9CDD4}
|
.border-dark {border:1px solid #D4D7DE}
|
.border {border:1px solid #DCDFE6}
|
.border-light {border:1px solid #E5E6EB}
|
.border-lighter {border:1px solid #F2F6FC}
|
|
/*******
|
通用填充色
|
********/
|
.fill-extra-darker {background-color: rgba(201, 205, 212 , 0.5)}
|
.fill {background-color: rgba(240, 242, 245 , 0.5)}
|
.fill-light {background-color: rgba(245, 247, 250 , 0.5)}
|
.fill-lighter {background-color: rgba(250, 250, 250 , 0.8)}
|
|
/******
|
常量色
|
基础⿊⽩⾊
|
color-white #FFFFFF
|
color-black #000000
|
*/
|
|
/******
|
背景色
|
bg-color #FFFFFF
|
*/
|
|
/*******
|
Mask
|
*/
|
.mask-verlay-light {background-color: rgba(0, 0, 0 , 0.7)}
|
.mask {background-color: rgba(255, 255, 255 , 0.9)}
|
|
/******
|
功能色
|
代表: 明确的信息以及状态，⽐如成功、出错、失败、
|
*/
|
/**成功**/
|
.success-light-6{ color: #EBFAED}
|
.success-light-5{ color: #A3D6AC}
|
.success-light-4{ color: #7BCC88}
|
.success-light-3{ color: #52BD64}
|
.success-light-2{ color: #31B046}
|
.success{color:#2CA340}
|
.success-dark-2{color:#0A801E}
|
.success-dark-3{color:#025C27}
|
.success-dark-4{color:#003B0A}
|
.success-dark-5{color:#002106}
|
|
/**错误**/
|
.danger-light-6 {color: #DDEDED}
|
.danger-light-5 {color: #F39D9D}
|
.danger-light-4 {color: #EF7777}
|
.danger-light-3 {color: #E85959}
|
.danger-light-2 {color: #D93636}
|
.danger {color: #D40000}
|
.danger-dark-2 {color: #A10000}
|
.danger-dark-3 {color: #7A0000}
|
.danger-dark-4 {color: #5E0000}
|
.danger-dark-5 {color: #420000}
|
|
/**警告、等待、重点提示**/
|
.warning-light-6{color: #FFFAED}
|
.warning-light-5 {color: #FFDD80}
|
.warning-light-4 {color: #FAD15F}
|
.warning-light-3 {color: #FAC637}
|
.warning-light-2 {color: #FABD16}
|
.warning {color: #F0B100}
|
.warning-dark-2{color: #D4970B}
|
.warning-dark-3{color: #AD7400}
|
.warning-dark-4{color: #875600}
|
.warning-dark-5{color: #613A00}
|
|
/**信息色**/
|
.info-light-6{color: #F4F4F5}
|
.info-light-5{color: #E9E9EB}
|
.info-light-4{color: #DEDFE0}
|
.info-light-3{color: #C7C9CC}
|
.info-light-2{color: #B1B3B8}
|
.info{color: #909399}
|
.info-dark-2{color: #73767A}
|
.info-dark-3{color: #65686B}
|
.info-dark-4{color: #5B5E61}
|
.info-dark-5{color: #4F5154}
|
|
/**提示色**/
|
.hint-light-6{color: #FFF4E6}
|
.hint-light-5{color: #FFD194}
|
.hint-light-4{color: #FFBA70}
|
.hint-light-3{color: #FF9E42}
|
.hint-light-2{color: #FE8624}
|
.hint{color: #ED6807}
|
.hint-dark-2{color: #C74B00}
|
.hint-dark-3{color: #A13800}
|
.hint-dark-4{color: #7A2700}
|
.hint-dark-5{color: #541700}
|
|
/*******
|
页眉
|
*/
|
.header{background-color: #1F76CB}
|
|
/*******
|
密级色，分为6种
|
公开 #1AA4EE
|
普通商密 #1E89FF
|
核心商密 #224ECD
|
内部 #FE8624
|
秘密 #D40000
|
机密 #7A0000
|
*/
|
.secret-1{color:#ffffff;background-color: #1AA4EE;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-2{color:#ffffff;background-color: #1E89FF;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-3{color:#ffffff;background-color: #224ECD;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-4{color:#ffffff;background-color: #FE8624;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-5{color:#ffffff;background-color: #D40000;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-6{color:#ffffff;background-color: #7A0000;border-radius: 5px;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-text-1{color: #1AA4EE;font-size: 14px;text-align: center}
|
.secret-text-2{color: #1E89FF;font-size: 14px;text-align: center}
|
.secret-text-3{color: #224ECD;font-size: 14px;text-align: center}
|
.secret-text-4{color: #FE8624;font-size: 14px;text-align: center}
|
.secret-text-5{color: #D40000;font-size: 14px;text-align: center}
|
.secret-text-6{color: #7A0000;font-size: 14px;text-align: center}
|
.secret-light-1{color: #1AA4EE;background-color: #ddf1fb;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-light-2{color: #1E89FF;background-color: #dbe9fb;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-light-3{color: #224ECD;background-color: #cfdeff;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-light-4{color: #FE8624;background-color: #fff4e6;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-light-5{color: #D40000;background-color: #ffeded;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
.secret-light-6{color: #7A0000;background-color: #ffeded;line-height: 30px;width: 80px;font-size: 14px;text-align: center}
|
|
/**************
|
字阶与行高
|
*/
|
.font-12{font-size: 12px;line-height: 20px;}
|
.font-14{font-size: 14px;line-height: 22px;}
|
.font-16{font-size: 16px;line-height: 24px;}
|
.font-20{font-size: 20px;line-height: 28px;}
|
.font-24{font-size: 24px;line-height: 32px;}
|
.font-30{font-size: 30px;line-height: 38px;}
|
.font-38{font-size: 38px;line-height: 46px;}
|
.font-46{font-size: 46px;line-height: 54px;}
|
.font-56{font-size: 56px;line-height: 64px;}
|
.font-68{font-size: 68px;line-height: 76px;}
|
|
/**首页***/
|
#portal_head{height:56px;background-color: #1F76CB;}
|
.layui-layout-admin .layui-logo{color: #ffffff;line-height: 56px;font-size:22px;font-family:alibabaBold;width: auto;position: relative;display: inline-block;margin-left:10px;box-shadow:none;}
|
.layui-layout-admin img.logo{margin-left: 10px;}
|
#secretFlag{color: #A10000;line-height: 56px;font-size:22px;font-family:alibabaBold;position: relative;text-align: center}
|
|
.secretTip{position: relative;top:-10px;left:4px;font-size: 12px;width:auto;line-height: 18px;padding:0 8px;border-radius: 8px;display: inline-block}
|
#portal_head .layui-nav .layui-nav-item{line-height: 56px;}
|
#portal_head .layui-layout-left{left:10px;width: 50%}
|
#portal_head .layui-layout-right{right:4px;}
|
#portal_head .layui-layout-left .layui-nav{display: inline-block;line-height: 30px;top:-10px; position: relative;}
|
#portal_head .layui-nav-child:after{
|
content:''; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;
|
position: absolute; top: -12px; left: 50%; margin-left: -6px; border-width: 6px; border-bottom-style: solid; border-bottom-color: #fff;z-index: 10;
|
}
|
#portal_head .layui-icon{color: #ffffff}
|
|
/* 侧边菜单 */
|
.layui-layout-admin .layui-side{top:56px;background-color: #ffffff;box-shadow: 0 5px 5px 0 rgba(0,0,0,.12)}
|
.layui-side-menu .layui-side-scroll{width: 228px;height:calc(100% - 39px)}
|
.layui-side-menu .layui-nav{width: 208px;background: none;color: #1D2129}
|
.layui-side-menu .layui-nav .layui-nav-item a{padding-left: 42px; padding-right: 28px;color: #1D2129}
|
.layui-side-menu .layui-nav .layui-nav-item a:hover{background-color: rgba(201, 205, 212 , 0.5)}
|
.layui-side-menu .layui-nav .layui-nav-itemed > .layui-nav-child{padding: 5px 0;background: none !important;}
|
.layui-side-menu .layui-nav>.layui-nav-item .layui-icon:first-child{position: absolute; top: 50%; left: 16px; margin-top: -19px;}
|
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child{background: none!important;}
|
.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a{padding-left: 60px}
|
.layui-side-menu .layui-nav-itemed>a,.layui-side-menu .layui-nav-tree .layui-nav-title a,.layui-side-menu .layui-nav-tree .layui-nav-title a:hover{color: #1E89FF !important}
|
.layui-side-menu .layui-nav-tree .layui-nav-item a .layui-nav-more{border-top-color: #606266}
|
.layui-side-menu .layui-nav-tree .layui-nav-mored,.layui-side-menu .layui-nav-tree .layui-nav-itemed>a>.layui-nav-more {margin-top: -17px;}
|
.layui-side-menu .layui-nav-tree .layui-nav-itemed .layui-nav-itemed>a>.layui-nav-more {margin-top: -9px;}
|
.layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a{background-color: #EBF4FF !important;color: #1D2129;position: relative;}
|
.layui-nav-tree .layui-this:before, .layui-nav-tree .layui-this>a:before, .layui-nav-tree .layui-nav-child dd.layui-this:before, .layui-nav-tree .layui-nav-child dd.layui-this a:before{
|
content: '';
|
width: 3px;
|
height: 100%;
|
background-color: #1E89FF;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 10;
|
}
|
.layui-nav-tree .layui-nav-bar {width: 3px;height: 0;background-color: #1E89FF}
|
#portal_toolmenu{height: 39px;overflow: hidden;border-top:1px solid #C9CDD4;position:absolute;bottom: 0;left: 0;width: 208px;padding: 0 16px;background-color: #ffffff;}
|
#portal_toolmenu .layui-nav-item a{color: #909399;}
|
#portal_toolmenu .layui-nav-item a:hover{color: #1D2129;}
|
#portal_toolmenu .layui-nav-item .layui-icon:first-child{left: 0;}
|
|
|
/* 侧边收缩悬浮 */
|
.side-hover {position: absolute;top: 0;left: 60px;z-index: 100001;background-color: #ffffff;border-radius:5px;box-shadow: 0 0px 10px 5px rgba(0,0,0,.12);padding: 4px 0;display: none}
|
.side-hover:after{
|
content:''; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;
|
position: absolute; top: 12px; left: -12px; border-width: 6px; border-right-style: solid; border-right-color: #fff;z-index: 10;
|
}
|
.side-hover dd {height: 38px;}
|
.side-hover dl {width: 185px;background-color: #ffffff;border-radius: 5px;}
|
.side-hover a {display: block;position: relative;color: #1D2129;font-size: 16px;padding: 0 16px;}
|
.side-hover a .layui-nav-more {position: absolute;right: 15px;top: 1px;font-size: 16px;}
|
.side-hover .leve3 {position: absolute;top: 0;left: 190px;box-shadow: 0 0px 10px 5px rgba(0,0,0,.12);border-radius:5px;}
|
.side-hover .isHover>a{color: #1E89FF !important;background-color: rgba(245, 247, 250 , 0.8)}
|
.side-hover .layui-this>a{background-color: #EBF4FF !important;color: #1E89FF;}
|
|
.layui-layout-admin .layui-body{overflow: auto;background-color: #F0F2F5;padding-bottom:56px;top:56px;}
|
.layui-layout-admin .layui-footer{height: 40px;line-height:40px;padding:6px 0;border-top:4px solid #1E89FF;text-align: center;color: #1D2129;left:0;}
|
.layui-fixbar{right: 30px;}
|
|
/****主题内容******/
|
#portal_body>.layui-tab{position: absolute;top:0;left:0;width:100%;height:100%;}
|
#portal_body>.layui-tab>.layui-tab-title{background-color: #ffffff;height:40px;padding: 0}
|
#portal_body>.layui-tab>.layui-tab-title li{margin: 4px 0 4px 8px;height:30px;line-height: 30px;border: 1px solid #E5E6EB;border-radius:2px;padding: 0 8px;}
|
#portal_body>.layui-tab>.layui-tab-title li:after{display: none}
|
#portal_body>.layui-tab>.layui-tab-title li.layui-this{color: #0055B6;background-color: #EBF4FF;border: 1px solid #0055b6;box-shadow: 0 0px 1px 0px rgba(0,85,182,.5) inset;}
|
#portal_body>.layui-tab>.layui-tab-title li .layui-tab-close{color: #1D2129}
|
#portal_body>.layui-tab>.layui-tab-title li.layui-this .layui-tab-close{color: #0055B6}
|
#portal_body>.layui-tab>.layui-tab-content{height: calc(100% - 61px);padding:10px;overflow: auto}
|
#portal_body>.layui-tab>.layui-tab-content>.layui-tab-item{min-width: 1200px;}
|
|
/****首页***/
|
|
/*****表格蓝色主题*****/
|
.layui-table-blue .layui-table thead tr,.layui-table-blue .layui-table-header{
|
background-color: #EBF4FF !important
|
}
|
.layui-table-blue .layui-table-click,.layui-table-blue .layui-table-select,.layui-table-blue .layui-table-hover,.layui-table-blue .layui-table tbody tr:hover,.layui-table-blue .layui-table-mend,.layui-table-blue .layui-table-patch,.layui-table-blue .layui-table-tool,.layui-table-blue .layui-table-total,.layui-table-blue .layui-table-total tr {
|
background-color: #EBF4FF !important
|
}
|
|
.layui-btn-intable{height: 20px;line-height: 20px;padding: 0 ;font-size: 14px;background: none;color: #1E89FF;border: none;min-width: auto}
|
.layui-btn-intable:hover {color: #479DFF;background: none;}
|
.layui-btn-intable:active{color: #006DEA;background: none;}
|
.layui-disabled,.layui-disabled .layui-icon{color: #C0C4CC !important}
|
|
/******表格中分页居右******/
|
.layui-table-page>div{float: right}
|
.layui-table-view{border: none;position: relative;}
|
.layui-table-box{border: 1px solid #E5E6EB}
|
.layui-table-page{border-width: 0;padding: 7px 0 0;}
|
.layui-table-total{border-width: 0 1px 1px 1px}
|
.layui-table-total td{border-bottom: none;}
|
|
/*****分区****/
|
.layui-west,.layui-east,.layui-center,.layui-north,.layui-south{padding: 10px;margin: 0; border-radius: 3px;background-color: #fff;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);-webkit-transition: 0.1s linear;transition: 0.1s linear;}
|
.layui-west{margin-right: 10px;float: left}
|
.layui-east{margin-left: 10px;float: right}
|
.layui-west+.layui-center{float:left;width: calc(100% - 300px - 10px);box-sizing: border-box;}
|
.layui-north{margin-bottom: 10px;height:300px}
|
.layui-south{margin-top: 10px;height:300px;}
|
.layui-west > .layui-tab > .layui-tab-content,.layui-center> .layui-tab > .layui-tab-content,.layui-north> .layui-tab > .layui-tab-content,.layui-south> .layui-tab > .layui-tab-content,.layui-east> .layui-tab > .layui-tab-content{padding-bottom: 0}
|
|
|
.layui-btn~.layui-input-inline,.layui-btn-group ~.layui-input-inline{margin-bottom: 10px;margin-right: 10px;}
|
|
/***参照**/
|
.layui-table-toolbar{margin: 0}
|
.vciWebReferGrid .layui-btn-container .layui-input,.vciWebReferGrid .layui-btn-container .layui-btn,.vciWebReferGrid .layui-btn-container .layui-select{height: 30px;line-height: 30px;}
|
.vciWebReferGrid .layui-btn-container .layui-form-item{height: 30px;}
|
|
/*
|
右键菜单样式
|
*/
|
.rightMenu {background: #ffffff;z-index: 999;}
|
.rightMenu ul { width: 80px;padding: 2px;color: #1D2129;border: 1px solid #E5E6EB; cursor: pointer;}
|
.rightMenu ul li { text-align: center;display: block;height: 28px;line-height: 28px;}
|
.rightMenu ul li:hover{background-color: #EBF4FF}
|
|
|
fieldset {border: none;padding: 0;border-top: 1px solid #E5E6EB;}
|
fieldset legend {margin-left: 50px;padding: 0 10px;font-size: 14px;}
|
fieldset legend a,fieldset legend a:hover,fieldset legend a:active {color: #909399;}
|
