:root {
/* 基准色 */
--蓝色1: #0078C7;
--灰色1: #B5B6B7;
--灰色2: #F7F7F7;
--黑色: #000000;
--白色: #FFFFFF;
/*块颜色*/
--标准边框颜色: #343a40;
/*按钮颜色*/
--标准按钮字体色: #212529;
--标准按钮背景色: #B6B7B8;
--标准按钮边框色: #343a40;
/*字体颜色*/
--字体浅色背景: #000000;
/* 表格颜色 */
--table边框色: #C5C7C7;
--tr背景色: transparent;
--tr高度: 1.5rem;
--th字体色: #FFFFFF;
--th字体: 微软雅黑;
--th字体大小: 0.875rem;
--th字体粗细: 700;
--th边框宽度: 1px;
--th边框色: #C5C7C7;
--td字体色: #585757;
--tr单行背景色: #FFFFFF; /*#FFF;网格标准色*/
--tr双行背景色: #F0F4F8; /*#E7F4FB;网格标准色*/
--tr高亮色: #D6E8F8; /*#BDDEFF;网格标准色*/
/* 特殊约定颜色 */
--小屏幕弹窗标题背景色: #8494B6;
--大屏弹窗标题背景色: #007ACC;
--大屏弹窗标题字体色: #FFFFFF;
--计划甘特图背景色1: #00FF00;
--计划甘特图背景色2: #00FFFF;
--查询冻结区背景色: #96F1DE;
/*特殊尺寸*/
--日历高亮色: #D3ECFB;
}
@media (prefers-color-scheme: dark) {
/*在手机edge一类的浏览器内，在这里可以定义黑暗模式下实际颜色，
如果要在黑暗模式下显示为暗色调，如果和浅色模式颜色一样，可以不定义或者定义为一样的
但在小米浏览器内，此设置无效，但一下js代码是可以运行的（看起来小米浏览器不支持css的黑暗模式，但js方式支持）
如果一定要在小米浏览器内保持深色模式和浅色模式一致，必须通过js强行加载不同的css参数
看起来是小米浏览器在底层对颜色进行了映射，在浏览器端实现了黑暗模式，而edge浏览器本身不会映射颜色，而是需要通过css自己来设置深色或者浅色
window.top.全局变量.浏览器参数.浏览器名称 === '小米'
&& window.top.全局变量.浏览器参数.浏览器操作系统 !== 'windows'
&& window.matchMedia('(prefers-color-scheme:dark)').matches === true
*/
:root {
/* 基准色 */
--蓝色1: #0078C7;
--灰色1: #B5B6B7;
--灰色2: #F7F7F7;
--黑色: #000000;
--白色: #FFFFFF;
/*块颜色*/
--标准边框颜色: #343a40;
/*按钮颜色*/
--标准按钮字体色: #212529;
--标准按钮背景色: #B6B7B8;
--标准按钮边框色: #343a40;
/*字体颜色*/
--字体背景: #000000;
/* 表格颜色 */
--tr背景色: transparent;
--tr高度: 1.5rem;
--th字体色: #FFFFFF;
--th字体: 微软雅黑;
--th字体大小: 0.875rem;
--th字体粗细: 700;
--th边框宽度: 1px;
--th边框色: #C5C7C7;
--td字体色: #585757;
--tr单行背景色: #FFFFFF; /*网格标准*/
--tr双行背景色: #F0F4F8; /*网格标准*/
--tr高亮色: #D6E8F8; /*网格标准*/
/* 特殊约定颜色 */
--小屏幕弹窗标题背景色: #8494B6;
--大屏弹窗标题背景色: #007ACC;
--大屏弹窗标题字体色: #FFFFFF;
--计划甘特图背景色1: #00FF00;
--计划甘特图背景色2: #00FFFF;
--查询冻结区背景色: #96F1DE;
/*特殊尺寸*/
--日历高亮色: #D3ECFB;
--弹窗标题背景色: aqua;
}
}
/*黑暗模式颜色定义*/
.登陆按钮 {
-webkit-border-radius: 50px 50px !important;
border-radius: 50px 50px; /*圆角*/
padding: 0 1rem 0 1rem;
font-weight: 600;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0px;
padding: 0px;
border: 0px;
font-family: Arial, sans-serif; /*字体家族 sans-serif 无衬线字体族 黑体、幼圆、隶书、楷体*/
/*vertical-align: baseline;*/ /*设置元素的垂直对齐方式 baseline 元素放置在父元素的基线上*/
-webkit-appearance: none; /*取消浏览器对于控件的默认样式*/
-moz-appearance: none; /*取消浏览器对于控件的默认样式*/
-webkit-overflow-scrolling: touch; /* 为了苹果浏览器滚动顺畅 凡是有overflow:scroll的地方全要增加此css 允许独立的滚动区域和触摸回弹 */
}
html {
height: 100%;
width: 100%;
overflow: hidden;
font-size: 16px;
/*text-size-adjust: 100%;*/
/*-ms-text-size-adjust: 100%;*/ /* 2 */
/*-webkit-text-size-adjust: 100%;*/ /* 2 */
}
body {
height: 100%;
width: 100%;
overflow: auto;
line-height: 1.5; /*设置行间的距离（行高）*/
}
form {
width: 100%;
height: 100%;
}
table {
border: none;
/*border-color: var(--table边框颜色);*/
border-collapse: collapse; /*设置表格的边框是否被合并为一个单一的边框*/
border-spacing: 0; /*设置相邻单元格的边框间的距离（仅用于“边框分离”模式）*/
/*color: var(--table字体颜色);*/
/*font-size: 0.8rem;*/
table-layout: fixed; /*列宽由表格宽度和列宽度设定*/
width: 100%;
}
tbody tr {
height: 1.5rem;
background-color: var(--tr背景色);
vertical-align: middle; /*设置元素的垂直对齐方式*/
width: 100%;
}
tbody tr:nth-child(odd) {
background-color: var(--tr单行背景色);
}
tbody tr:nth-child(even) {
background-color: var(--tr双行背景色);
}
tbody tr.active {
background-color: var(--tr高亮色) !important;
}
thead tr {
height: var(--tr高度);
background-color: var(--thead背景色);
}
/*必须在tbody tr后定义，否则 tbody tr 会覆盖 thead tr */
th {
height: 1.5rem;
background-color: transparent;
color: var(--th字体色);
font-family: var(--th字体);
font-size: var(--th字体大小);
font-weight: var(--th字体粗细);
border-width: var(--th边框宽度);
border-style: solid;
border-color: var(--th边框色);
overflow: hidden; /*内容溢出的时候,禁止使用滚动条*/
text-overflow: ellipsis; /*内容溢出的时候,显示省略符号来代表被修剪的文本*/
text-align: center; /*水平对齐方式*/
vertical-align: middle; /*垂直对齐方式*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。*/
/*其他定义*/
padding: 4px;
position: sticky;
top: 0px;
z-index: 2;
}
th.冻结 {
position: sticky; /*因为需要冻结 所以 th必须强制定位*/
z-index: 2; /*因为需要固定表单头部以及启用滚动 所以 th必须浮动高度*/
background: var(--查询冻结区背景色) !important; /*因为需要固定表单头部 所以 td 必须有颜色*/
/*border-width: 1px 0px 0px 1px;*/ /*上，右，下，左*/
}
/*th:hover {
background: #95e1e6;
background: var(--td悬停背景色);
}
th empty:hover {
background: #95e1e6;
background: var(--td悬停背景色2);
}*/
td {
height: 1.5rem;
background-color: transparent;
color: var(--td字体色);
font-family: var(--th字体);
font-size: var(--th字体大小);
border-width: var(--th边框宽度);
border-color: var(--th边框色);
overflow: hidden; /*内容溢出的时候,禁止使用滚动条*/
text-overflow: ellipsis; /*内容溢出的时候,显示省略符号来代表被修剪的文本*/
vertical-align: middle; /*垂直对齐方式*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。*/
/*其他定义*/
padding: 4px;
}
td:hover {
background: var(--td悬停背景色);
}
td empty:hover {
background: var(--td悬停背景色2);
}/*鼠标悬停在没有元素的光溜溜td 加颜色*/
td input:hover {
background: var(--td悬停背景色2);
}/*鼠标悬停在有input的td 加颜色*/
td input[type="button"] {
height: 100%;
border-width: 1px; /*主要针对 新edge 按钮默认边框宽度=2 导致的边框过黑问题*/
}
/*td内的input按钮样式*/
td input[type="text"] {
width: 100%;
height: 100%;
border: 0px;
background-color: transparent;
text-overflow: ellipsis; /*超出部分以点号代替*/
}
td input[type="radio"] {
/*width: 100px;
height: 100%;*/
min-height: 0.8em;
min-width: 0.8em;
}
/*圆点选择css*/
td input[type="radio"] + label {
margin-left: .2em;
margin-right: .4em;
}
/*圆点选择css 后的 label*/
td input[type="checkbox"] {
/*height: 50%;*/
/*min-height: 0.8em;
min-width: 0.8em;*/
}
/*方框选择css*/
td input[type="checkbox"] + label {
margin-left: .2em;
margin-right: .4em;
}
/*方框选择 后的 label css*/
td.冻结 {
position: sticky; /*因为需要冻结 所以 th必须强制定位*/
z-index: 2; /*因为需要固定表单头部以及启用滚动 所以 th必须浮动高度*/
background: var(--查询冻结区背景色) !important; /*因为需要固定表单头部 所以 td 必须有颜色*/
/*border-width: 1px 0px 0px 1px;*/ /*上，右，下，左*/
}
input {
padding: 0px;
}
/*实际上是针对苹果浏览器设置的 苹果兼容 padding=0*/
input[type="button"], input[type="submit"], input[type="file"], input[type="text"], button, select {
cursor: pointer;
/*-webkit-appearance:none; 会产生问题，导致 苹果 火狐 的 按钮 丢失外观*/
-webkit-border-radius: 0; /*取消苹果浏览器下的圆角按钮*/
/*
解决iphone safari上的默认样式问题
改变按钮和其他控件的外观，使其类似于原生控件
none:去除系统默认appearance的样式,常用于IOS下移除原生样式
button:渲染成button的风格
*/
}
/*苹果兼容 按钮样式*/
input[readonly='readonly'] {
cursor: default; /*设置鼠标样式*/
pointer-events: none; /*不响应鼠标点击事件*/
}
/*不可编辑的input*/
label, button, td, span, p, div, input[readonly='readonly'] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*-o-user-select: none; 旧 欧派 浏览器*/
/*-khtml-user-select: none; 旧浏览器*/
/* input 在 谷歌 下，readonly 的 不支持 通过 user-select 禁止用户选择文字，但 背景色 之类的 是 生效的
但 如果针对 所有 input，则是 生效的
input[readonly='readonly'], input [type='radio'], input [type='checkbox']
*/
}
/*不允许选中文字*/
div [contenteditable = true] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/*允许编辑的div 在 苹果浏览器下 可以正常编辑*/
span {
white-space: nowrap; /*强制span不换行*/
overflow: hidden; /*超出宽度部分隐藏*/
text-overflow: ellipsis; /*超出部分以点号代替*/
/*display: inline-block;*/ /*将span当做块级元素对待*/
/*line-height: 1;*/ /*数字与之前的文字对齐*/
/*height:100%;*/
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
svg:not(:root) {
overflow: hidden;
}
select option:checked {
background-color: #9a9a9a;
color: #212529 !important;
}/*针对select下拉的时候 会自动高亮鼠标下的option 但 不能持续展现当前选择项的背景色 导致 选择的时候 不知道当前选择的是哪个*/
/*::-webkit-scrollbar {
width: 0px;
height: 0px;
color: transparent;
仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
}*/
/*
max-width：基于浏览器视口(Viewport)的当前渲染宽度，反映用户实际可见区域
max-device-width：基于设备物理屏幕的原始宽度，反映硬件设备的实际显示能力
768px是手机和平板的分界点
480px及以下是典型小屏手机
orientation：检测设备方向(portrait/landscape)
hover和pointer 检测输入设备类型
hover:none和pointer:coarse可排除平板设备
@media 算符
非 not 最优先
并且 and 中等
或者 , 最低
超小屏手机(<360px)
@media (max-width: 360px)
常规手机(360px-768px)
@media (min-width: 361px) and (max-width: 768px)
平板设备(768px-1024px)
@media (min-width: 769px) and (max-width: 1024px)
常规桌面(1025px-1440px)
@media (min-width: 1025px) and (max-width: 1440px)
超大桌面显示器(≥1440px)
@media (min-width: 1441px)
折叠屏特殊适配 折叠屏展开态样式
@media (min-width: 360px) and (max-width: 768px) and (min-aspect-ratio: 4/3) {
小屏幕
@media (max-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse)
手机横屏
@media (max-width: 768px) and (orientation: landscape) and (hover: none) and (pointer: coarse)
非手机
@media (min-width: 769px), (hover: hover) and (pointer: fine)
*/
@media only screen and (max-width: 576px) {
.小屏幕 {
display: block !important;
}
.大屏幕 {
display: none !important;
}
.弹窗标题 {
/*display: none;*/
width: 100%;
height: 1.5em;
line-height: 1.5em;
vertical-align: middle;
font-size: 1.2em;
background-color: var(--小屏弹窗标题背景色); /*标题的颜色，固定为浅蓝色*/
color: var(--小屏弹窗标题字体色); /*字体用白色*/
text-align: center;
}
/*小屏幕下模态框改造为app弹窗模式*/
.modal:not(#myModalalert) {
}
.modal:not(#myModalalert) .modal-dialog {
width: 100% !important;
height: 100% !important;
margin: 0px !important;
}
.modal:not(#myModalalert) .modal-dialog .modal-content {
width: 100% !important;
height: 100% !important;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header {
background-color: var(--小屏幕弹窗标题背景色);
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header .回退图片 {
width: 2em;
height: 2em;
margin: 0.25em 0em 0.25em 0.5em;
padding-top: 10px;
padding-bottom: 10px;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header .modal-title {
width: 100%;
height: 2em;
line-height: 2em;
text-align: center;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header button {
display: none !important;
}
#myModalalert.modal {
}
#myModalalert.modal .modal-dialog {
/*width: 100% !important;
height: 100% !important;*/
/*margin: 0px !important;*/
}
#myModalalert.modal .modal-dialog .modal-content {
/*height: 100% !important;*/
}
#myModalalert.modal .modal-dialog .modal-content .modal-header {
background-color: var(--小屏幕弹窗标题背景色);
}
#myModalalert.modal .modal-dialog .modal-content .modal-header .回退图片 {
width: 2em;
height: 2em;
margin: 0.25em 0em 0.25em 0.5em;
padding-top: 10px;
padding-bottom: 10px;
}
#myModalalert.modal .modal-dialog .modal-content .modal-header .modal-title {
/*width: 100%;*/
height: 2em;
line-height: 2em;
text-align: center;
}
#myModalalert.modal .modal-dialog .modal-content .modal-header button {
/*display: none !important;*/
}
/*小屏幕下模态框改造为app弹窗模式*/
}
/*浏览器最大可见宽度 小于 576px。。。实际上是 小屏幕*/
@media only screen and (max-height: 576px) {
.小屏幕 {
display: block !important;
}
.大屏幕 {
display: none !important;
}
.弹窗标题 {
width: 100%;
margin: 0px;
padding: 0.3rem 1rem 0.5rem 1rem;
border-bottom: 1px solid #009FE7;
height: 2em;
line-height: 1.5em;
vertical-align: middle;
font-size: 1.2em;
font-weight: 700;
background-color: var(--大屏弹窗标题背景色); /*标题的颜色，固定为浅蓝色*/
color: var(--大屏弹窗标题字体色); /*字体用白色*/
/*text-align: center;*/
}
.大屏幕弹窗关闭图片 {
width: 1.5em;
height: 1.5em;
margin: 2px;
margin-top: 8px;
margin-left: 22px;
float: right;
}
/*小屏幕下模态框改造为app弹窗模式*/
.modal:not(#myModalalert) {
}
.modal:not(#myModalalert) .modal-dialog {
width: 100% !important;
height: 100% !important;
margin: 0px !important;
}
.modal:not(#myModalalert) .modal-dialog .modal-content {
height: 100% !important;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header {
background-color: var(--小屏幕弹窗标题背景色);
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header .回退图片 {
width: 2em;
height: 2em;
margin: 0.25em 0em 0.25em 0.5em;
padding-top: 10px;
padding-bottom: 10px;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header .modal-title {
/*width: 100%;*/
height: 2em;
line-height: 2em;
text-align: center;
}
.modal:not(#myModalalert) .modal-dialog .modal-content .modal-header button {
/*display: none !important;*/
}
#myModalalert.modal {
}
#myModalalert.modal .modal-dialog {
/*width: 100% !important;
height: 100% !important;*/
/*margin: 0px !important;*/
}
#myModalalert.modal .modal-dialog .modal-content {
/*height: 100% !important;*/
}
#myModalalert.modal .modal-dialog .modal-content .modal-header {
background-color: var(--小屏幕弹窗标题背景色);
}
#myModalalert.modal .modal-dialog .modal-content .modal-header .回退图片 {
width: 2em;
height: 2em;
margin: 0.25em 0em 0.25em 0.5em;
padding-top: 10px;
padding-bottom: 10px;
}
#myModalalert.modal .modal-dialog .modal-content .modal-header .modal-title {
/*width: 100%;*/
height: 2em;
line-height: 2em;
text-align: center;
}
#myModalalert.modal .modal-dialog .modal-content .modal-header button {
display: none !important;
}
/*小屏幕下模态框改造为app弹窗模式*/
}
/*浏览器的页面最大可见高度 小于 576px。。。实际上是 手机横屏*/
@media only screen and (min-width: 575px) and (min-height: 575px) {
.小屏幕 {
display: none !important;
}
.大屏幕 {
display: block !important;
}
.弹窗标题 {
width: 100%;
margin: 0px;
padding: 0.3rem 1rem 0.5rem 1rem;
border-bottom: 1px solid #009FE7;
height: 2em;
line-height: 1.5em;
vertical-align: middle;
font-size: 1.2em;
font-weight: 700;
background-color: var(--大屏弹窗标题背景色); /*标题的颜色，固定为浅蓝色*/
color: var(--大屏弹窗标题字体色); /*字体用白色*/
/*text-align: center;*/
}
.大屏幕弹窗关闭图片 {
width: 1.5em;
height: 1.5em;
margin: 2px;
margin-top: 8px;
margin-left: 22px;
float: right;
}
.modal .modal-dialog {
max-width: fit-content;
}
.modal .modal-dialog .modal-content .modal-header {
background-color: var(--大屏弹窗标题背景色);
color: var(--大屏弹窗标题字体色);
padding: 0.5rem 1rem 0.5rem 1rem;
}
.modal .modal-dialog .modal-content .modal-header .回退图片 {
display: none;
}
.modal .modal-dialog .modal-content .modal-header .close {
margin-top: 1px;
margin-right: 1px;
padding: 2px 8px 2px 8px !important;
}
#myModalalert.modal .modal-content {
width: 30rem;
height: 25rem;
}
}/*真实设备的页面最小可见宽度 大于 575px，实际上是 pc、pad。*/
@media only screen and (max-device-width: 576px) and (hover: none) {
}/*手机 小屏幕+触摸设备(无悬停) */
@media only screen and (min-width: 576px) and (min-height: 576px) {
}/*浏览器的页面最小可见高度宽度 都大于 575px，实际上是 屏幕缩放后的尺寸。*/
@media only screen and (max-device-height: 576px) {
}/*真实手机的页面最大可见高度 小于 576px。。。实际上是 手机横屏*/
@media only screen and (max-device-width: 576px) {
}/*真实手机的最大可见宽度 小于 576px。。。实际上是 小屏幕*/
@media only screen and (orientation:portrait) {
}
/*竖屏*/
@media only screen and (orientation:landscape) {
}
/*横屏*/
td.下拉对象 {
position: relative;
}
td.下拉对象 .下拉箭头 {
width: 0px;
height: 0px;
/*border-width: 5px 4px;*/
border-color: #828282 transparent transparent;
border-style: solid;
display: block;
position: absolute;
top: 50%;
margin-top: -2px;
right: 4px;
}
tr.数据行 td.下拉对象 .下拉箭头 {
border-width: 5px 4px;
}
.标准上边框 {
border-top-color: var(--标准边框颜色);
}
.标准边框 {
border-color: var(--标准边框颜色);
}
.标准按钮 {
cursor: pointer;
display: inline-block;
font-weight: 400;
color: var(--标准按钮字体色);
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #343a40;
border-color: var(--标准按钮边框色);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.标准按钮-1 {
cursor: pointer;
display: inline-block;
font-weight: 400;
color: var(--标准按钮字体色);
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #343a40;
border-color: var(--标准按钮边框色);
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/*小div按钮*/
.标准按钮-2 {
cursor: pointer;
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #343a40;
border-color: var(--标准按钮边框色);
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/*标准input按钮*/
.标准选择外壳 {
width: 100%;
height: 100%;
cursor: pointer;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-weight: 400;
color: var(--标准按钮字体色);
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #343a40;
border-color: var(--标准按钮边框色);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.查询界面标准按钮 {
cursor: pointer;
display: inline-block;
font-weight: 400;
color: var(--标准按钮字体色);
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid #343a40;
border-color: var(--标准按钮边框色);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
margin-left: 0.5rem;
}
.标准按钮:hover, .标准按钮-1:hover, .标准按钮-2:hover, .查询界面标准按钮:hover, .标准选择外壳:hover {
background: #95e1e6;
}
/*鼠标悬停 加颜色*/
.弹窗表格头部外壳 {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
flex: 1;
width: calc(100% - 0.5rem);
overflow-x: auto;
overflow-y: hidden;
padding: 0.5rem;
}
.弹窗表格头部内壳 {
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
height: 100%;
width: calc(100% - 0.5rem);
}
.弹窗表格头部内壳 table {
width: 100%;
}
.弹窗表格身体外壳 {
flex: 1;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.弹窗表格身体外壳 table {
width: 100%;
height: auto;
}
.大屏页眉 {
height: 3em;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
/*background: rgb(10,82,150);*/
/*linear-gradient 从头部开始的线性渐变*/
/*background: linear-gradient(top,#196eac 0,#7fb4d9 100%);
background: -ms-linear-gradient(top,#196eac 0,#7fb4d9 100%);
background: -webkit-linear-gradient(top,#196eac 0,#7fb4d9 100%);
background: -moz-linear-gradient(top,#196eac 0,#7fb4d9 100%);
background: -o-linear-gradient(top,#196eac 0,#7fb4d9 100%);*/
/*color: #C0C0C0;*/
}
/*大屏幕登陆页和首页眉背景色*/
/*用于 login 和 max 2个页面*/
.大屏页眉 .软件名称 {
/*padding-left: 2rem;*/
height: 2.5rem;
}
.大屏页眉 .软件名称 img {
padding-left: 1rem;
height: 2.5rem;
width: 100%;
}
.大屏页眉 .按钮区 {
display: -ms-flexbox;
display: flex;
flex: 1;
}
.大屏图片区 {
width: 100%;
height: 600px;
max-height: 600px;
background-size: 100% 100%;
}
.大屏宣传图区 {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: auto;
margin-top: 50px;
}
.大屏页眉tab li {
/*background: #7fb4d9;*/
color: #009FE7;
}
/*大屏幕tab部分页眉背景色*/
@media screen {
.打印外壳1 {
display: none !important;
}
.打印子窗口 {
display: none !important;
}
.仅打印 {
display: none !important;
}
}
@media print {
@page {
/*size: A4 portrait;*/ /*纸张默认大小必须设置，landscape 否则换了纸张或者横竖后没有事件发生，就不能计算正文实际高度来改变显示的元素*/
margin: 7mm;
}
* {
/*直接访问公网服务器会导致edge打印的时候 丢失 背景颜色。。。所以增加以下设置*/
/* exact 精确的 economy 简易的 print-color-adjust 打印机颜色调节 */
-webkit-print-color-adjust: exact; /*为Google Chrome、Safari等浏览器内核*/
print-color-adjust: exact; /*火狐*/
color-adjust: exact; /*火狐*/
color: black !important;
}
html {
overflow: visible !important;
}
body {
min-width: initial !important; /*必须设置，否则会因为 bootstrap 中设置了 min-width: 992px !important; 而导致 打印页面中的所有 宽度 高度 被除以 1.6*/
overflow: hidden !important; /*滚动条全部隐藏*/
counter-reset: 打印总页码; /*一个段内只能有一个 counter-reset*/
}
.打印子窗口 {
display: block;
}
.打印外壳 {
height: 100%;
counter-reset: 打印页码; /*一个段内只能有一个 counter-reset*/
}
.打印外壳 th, .打印外壳 td, .打印外壳 th span, .打印外壳 td span {
font-size: 14px !important;
}
.打印外壳 th, .打印外壳 td, .打印外壳 .网格外壳 {
border-bottom-color: black !important;
border-left-color: black !important;
border-top-color: black !important;
border-right-color: black !important;
}
.打印元素页数 {
counter-increment: 打印总页码 1; /*因为不能得到总页数，所以建立和页数同样多的【打印元素页数】元素，对此元素计数来得到总页数*/
}
.打印正文 {
flex: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden; /*滚动条全部隐藏*/
counter-increment: 打印页码 1;
}
.打印正文 * {
overflow: hidden !important; /*滚动条全部隐藏*/
}
/*打印元素总页数此元素必须隐藏*/
.打印元素总页数 {
width: 0px;
height: 0px;
}
.不打印 {
display: none !important;
}
.仅打印 {
display: block !important;
}
/*以下可以不同打印页面独立设置*/
/*实际打印的块，一般是 div*/
.打印元素 {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
/*page-break-after: always;*/
page-break-inside: avoid; /*插入分页符号，减少一个元素被拆分打印在2页上，但忘记是上面那个还是下面这个了*/
height: 100%;
overflow: hidden; /*滚动条全部隐藏*/
}
.打印页眉 {
height: 1.5rem;
}
.打印页眉:before {
/*
打印页码 和 打印总页码 都是css统计变量，不需要js计算
内容必须用 before或者after 以及 content 来输出
.打印外壳 {counter-reset: 打印页码; 一个段内只能有一个 counter-reset
body {counter-reset: 打印总页码; 一个段内只能有一个 counter-reset
*/
content: '页眉：打印测试';
/*content: '第' counter(打印页码) '页/共' counter(打印总页码) '页';*/
}
.打印页脚 {
height: 1.5rem;
}
.打印页脚:before {
/*
打印页码 和 打印总页码 都是css统计变量，不需要js计算
内容必须用 before或者after 以及 content 来输出
.打印外壳 {counter-reset: 打印页码; 一个段内只能有一个 counter-reset
body {counter-reset: 打印总页码; 一个段内只能有一个 counter-reset
*/
/*content: '页尾：打印测试';*/
content: '第' counter(打印页码) '页/共' counter(打印总页码) '页';
}
}