|
|
/**
|
|
|
* layui-v2.5.6 MIT License By https://www.layui.com
|
|
|
* 这是Layui框架版本2.5.6的相关代码声明,表明采用MIT许可协议,版权归属于https://www.layui.com网站
|
|
|
*/
|
|
|
|
|
|
/* 全局元素样式重置 */
|
|
|
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, td, textarea, th, ul {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
/* 清除元素默认内外边距,移动端点击时去除高亮显示效果 */
|
|
|
}
|
|
|
|
|
|
html {
|
|
|
font: 12px 'Helvetica Neue', 'PingFang SC', STHeitiSC-Light, Helvetica, Arial, sans-serif;
|
|
|
-ms-text-size-adjust: 100%;
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
/* 设置html的字体族、字号,并进行文本大小适配调整 */
|
|
|
}
|
|
|
|
|
|
a, button, input {
|
|
|
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
|
|
|
/* 去除点击时的默认高亮效果 */
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
text-decoration: none;
|
|
|
background: 0 0;
|
|
|
/* 去除链接默认下划线和背景 */
|
|
|
}
|
|
|
|
|
|
a:active, a:hover {
|
|
|
outline: 0;
|
|
|
/* 去除链接激活、悬停时的轮廓线 */
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
border-spacing: 0;
|
|
|
/* 让表格边框合并,单元格间距设为0 */
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
list-style: none;
|
|
|
/* 去除列表默认的项目符号样式 */
|
|
|
}
|
|
|
|
|
|
b, strong {
|
|
|
font-weight: 700;
|
|
|
/* 设置加粗文本元素的字体粗细 */
|
|
|
}
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
font-weight: 500;
|
|
|
/* 设置各级标题的字体粗细 */
|
|
|
}
|
|
|
|
|
|
address, cite, dfn, em, var {
|
|
|
font-style: normal;
|
|
|
/* 规范这些元素的字体样式 */
|
|
|
}
|
|
|
|
|
|
dfn {
|
|
|
font-style: italic;
|
|
|
/* 特别设置dfn元素为斜体样式 */
|
|
|
}
|
|
|
|
|
|
sub, sup {
|
|
|
font-size: 75%;
|
|
|
line-height: 0;
|
|
|
position: relative;
|
|
|
vertical-align: baseline;
|
|
|
/* 设置上下标元素的字号、行高、相对位置和垂直对齐方式 */
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
border: 0;
|
|
|
vertical-align: bottom;
|
|
|
/* 去除图片边框,设置垂直对齐方式为底部对齐 */
|
|
|
}
|
|
|
|
|
|
.layui-inline, input, label {
|
|
|
vertical-align: middle;
|
|
|
/* 让相关元素垂直居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 表单元素相关样式 */
|
|
|
button, input, optgroup, select, textarea {
|
|
|
color: inherit;
|
|
|
font: inherit;
|
|
|
margin: 0;
|
|
|
outline: 0;
|
|
|
/* 表单元素继承颜色、字体,去除默认外边距和轮廓 */
|
|
|
}
|
|
|
|
|
|
button, select {
|
|
|
text-transform: none;
|
|
|
/* 保持表单元素文本原始大小写状态 */
|
|
|
}
|
|
|
|
|
|
select {
|
|
|
-webkit-appearance: none;
|
|
|
border: none;
|
|
|
/* 去除select下拉框默认样式和边框 */
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
line-height: normal;
|
|
|
/* 保证输入框文本行高正常 */
|
|
|
}
|
|
|
|
|
|
input[type=checkbox], input[type=radio] {
|
|
|
box-sizing: border-box;
|
|
|
padding: 0;
|
|
|
/* 针对复选框、单选框设置盒模型和内边距 */
|
|
|
}
|
|
|
|
|
|
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
|
|
|
height: auto;
|
|
|
/* 控制数字输入框的增减按钮样式 */
|
|
|
}
|
|
|
|
|
|
input[type=search] {
|
|
|
-webkit-appearance: textfield;
|
|
|
-moz-box-sizing: content-box;
|
|
|
-webkit-box-sizing: content-box;
|
|
|
box-sizing: content-box;
|
|
|
/* 设置搜索输入框的外观和盒模型 */
|
|
|
}
|
|
|
|
|
|
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
|
|
|
-webkit-appearance: none;
|
|
|
/* 去除搜索输入框相关按钮的默认样式 */
|
|
|
}
|
|
|
|
|
|
/* 字体图标相关样式 */
|
|
|
@font-face {
|
|
|
font-family: layui-icon;
|
|
|
src: url(../font/iconfont.eot?v=1.0.7);
|
|
|
src: url(../font/iconfont.eot?v=1.0.7#iefix) format('embedded-opentype'),
|
|
|
url(../font/iconfont.woff?v=1.0.7) format('woff'),
|
|
|
url(../font/iconfont.ttf?v=1.0.7) format('truetype'),
|
|
|
url(../font/iconfont.svg?v=1.0.7#iconfont) format('svg');
|
|
|
/* 定义layui-icon字体图标,指定不同格式的字体文件路径 */
|
|
|
}
|
|
|
|
|
|
.layui-icon {
|
|
|
font-family: layui-icon!important;
|
|
|
font-size: 16px;
|
|
|
font-style: normal;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
/* 设置使用layui-icon字体图标的元素的字号、样式等属性 */
|
|
|
}
|
|
|
|
|
|
/* 盒模型及布局相关样式 */
|
|
|
.layui-box,.layui-box * {
|
|
|
-webkit-box-sizing: content-box!important;
|
|
|
-moz-box-sizing: content-box!important;
|
|
|
box-sizing: content-box!important;
|
|
|
/* 设置类及其后代元素采用内容盒模型 */
|
|
|
}
|
|
|
|
|
|
.layui-border-box,.layui-border-box * {
|
|
|
-webkit-box-sizing: border-box!important;
|
|
|
-moz-box-sizing: border-box!important;
|
|
|
box-sizing: border-box!important;
|
|
|
/* 设置类及其后代元素采用边框盒模型 */
|
|
|
}
|
|
|
|
|
|
.layui-inline {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
*display: inline;
|
|
|
*zoom: 1;
|
|
|
/* 让元素以行内块方式显示(解决部分浏览器兼容问题) */
|
|
|
}
|
|
|
|
|
|
.layui-edge,.layui-upload-iframe {
|
|
|
position: absolute;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
/* 用于一些需要绝对定位且宽高为0的元素(可能用于绘制边界等用途) */
|
|
|
}
|
|
|
|
|
|
.layui-elip {
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
/* 文本溢出时显示省略号的样式设置 */
|
|
|
}
|
|
|
|
|
|
.layui-unselect {
|
|
|
-moz-user-select: none;
|
|
|
-webkit-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
/* 禁止元素被用户选择,在不同浏览器下设置相应属性 */
|
|
|
}
|
|
|
|
|
|
.layui-disabled,.layui-disabled:active {
|
|
|
background-color: #d2d2d2!important;
|
|
|
color: #fff!important;
|
|
|
cursor: not-allowed!important;
|
|
|
/* 设置禁用状态元素的背景色、颜色和鼠标指针样式 */
|
|
|
}
|
|
|
|
|
|
.layui-circle {
|
|
|
border-radius: 100%;
|
|
|
/* 让元素呈现圆形样式 */
|
|
|
}
|
|
|
|
|
|
.layui-show {
|
|
|
display: block!important;
|
|
|
/* 用于显示元素的类 */
|
|
|
}
|
|
|
|
|
|
.layui-hide {
|
|
|
display: none!important;
|
|
|
/* 用于隐藏元素的类 */
|
|
|
}
|
|
|
|
|
|
.layui-upload-iframe {
|
|
|
border: 0;
|
|
|
visibility: hidden;
|
|
|
/* 可能用于上传相关的隐藏iframe的样式设置 */
|
|
|
}
|
|
|
|
|
|
.layui-upload-enter {
|
|
|
border: 1px solid #009E94;
|
|
|
background-color: #009E94;
|
|
|
color: #fff;
|
|
|
-webkit-transform: scale(1.1);
|
|
|
transform: scale(1.1);
|
|
|
/* 可能用于上传相关的特定元素样式(比如鼠标悬停等交互态) */
|
|
|
}
|
|
|
|
|
|
/* 动画相关样式 */
|
|
|
@-webkit-keyframes layui-m-anim-scale {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
-webkit-transform: scale(.5);
|
|
|
transform: scale(.5);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
-webkit-transform: scale(1);
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-scale {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
-webkit-transform: scale(.5);
|
|
|
transform: scale(.5);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
-webkit-transform: scale(1);
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-scale {
|
|
|
animation-name: layui-m-anim-scale;
|
|
|
-webkit-animation-name: layui-m-anim-scale;
|
|
|
/* 定义元素淡入并放大显示的动画效果类 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes layui-m-anim-up {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
-webkit-transform: translateY(800px);
|
|
|
transform: translateY(800px);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
-webkit-transform: translateY(0);
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-up {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
-webkit-transform: translateY(800px);
|
|
|
transform: translateY(800px);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
-webkit-transform: translateY(0);
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-up {
|
|
|
-webkit-animation-name: layui-m-anim-up;
|
|
|
animation-name: layui-m-anim-up;
|
|
|
/* 定义元素从下方移入的动画效果类 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes layui-m-anim-left {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(100%);
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-left {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(100%);
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-left {
|
|
|
-webkit-animation-name: layui-m-anim-left;
|
|
|
animation-name: layui-m-anim-left;
|
|
|
/* 定义元素从左侧移入的动画效果类 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes layui-m-anim-right {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(-100%);
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-right {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(-100%);
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-right {
|
|
|
-webkit-animation-name: layui-m-anim-right;
|
|
|
animation-name: layui-m-anim-right;
|
|
|
/* 定义元素从右侧移入的动画效果类 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes layui-m-anim-lout {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(-100%);
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-lout {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(-100%);
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-lout {
|
|
|
-webkit-animation-name: layui-m-anim-lout;
|
|
|
animation-name: layui-m-anim-lout;
|
|
|
/* 定义元素向左侧移出的动画效果类 */
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes layui-m-anim-rout {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(100%);
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes layui-m-anim-rout {
|
|
|
0% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
100% {
|
|
|
-webkit-transform: translateX(100%);
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.layui-m-anim-rout {
|
|
|
-webkit-animation-name: layui-m-anim-rout;
|
|
|
animation-name: layui-m-anim-rout;
|
|
|
/* 定义元素向右侧移出的动画效果类 */
|
|
|
}
|
|
|
|
|
|
/* 弹层(Layer)相关样式 */
|
|
|
.layui-m-layer {
|
|
|
position: relative;
|
|
|
z-index: 19891014;
|
|
|
/* 弹层的外层容器,设置相对定位和较高的z-index值 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layer * {
|
|
|
-webkit-box-sizing: content-box;
|
|
|
-moz-box-sizing: content-box;
|
|
|
box-sizing: content-box;
|
|
|
/* 弹层内部元素采用内容盒模型 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layermain,.layui-m-layershade {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/* 弹层主体容器和遮罩层采用固定定位铺满整个页面 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layershade {
|
|
|
background-color: rgba(0, 0, 0,.7);
|
|
|
pointer-events: auto;
|
|
|
/* 遮罩层设置背景颜色及透明度,允许触发事件 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layermain {
|
|
|
display: table;
|
|
|
font-family: Helvetica, arial, sans-serif;
|
|
|
pointer-events: none;
|
|
|
/* 弹层主体容器以表格形式布局,设置字体族,禁止触发事件 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layermain.layui-m-layersection {
|
|
|
display: table-cell;
|
|
|
vertical-align: middle;
|
|
|
text-align: center;
|
|
|
/* 用于让弹层内容在垂直方向居中显示 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layerchild {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
text-align: left;
|
|
|
background-color: #fff;
|
|
|
font-size: 14px;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: 0 0 8px rgba(0, 0, 0,.1);
|
|
|
pointer-events: auto;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
-webkit-animation-fill-mode: both;
|
|
|
animation-fill-mode: both;
|
|
|
-webkit-animation-duration:.2s;
|
|
|
animation-duration:.2s;
|
|
|
/* 弹层子元素的通用样式,如布局、背景、边框、阴影等,以及动画相关设置 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layer0.layui-m-layerchild {
|
|
|
width: 90%;
|
|
|
max-width: 640px;
|
|
|
/* 特定类型(layui-m-layer0)弹层子元素的宽度设置 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layer1.layui-m-layerchild {
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
/* 另一种类型(layui-m-layer1)弹层子元素的边框等样式设置 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layer2.layui-m-layerchild {
|
|
|
width: auto;
|
|
|
max-width: 260px;
|
|
|
min-width: 40px;
|
|
|
border: none;
|
|
|
background: 0 0;
|
|
|
box-shadow: none;
|
|
|
color: #fff;
|
|
|
/* 又一种类型(layui-m-layer2)弹层子元素的样式设置,常用于加载等提示弹层 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layerchild h3 {
|
|
|
padding: 0 10px;
|
|
|
height: 60px;
|
|
|
line-height: 60px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
text-align: center;
|
|
|
/* 弹层标题部分的样式设置,如内边距、高度、行高、字号等 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layerbtn span,.layui-m-layerchild h3 {
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
/* 弹层按钮文本和标题文本溢出时的处理样式 */
|
|
|
}
|
|
|
|
|
|
.layui-m-layercont {
|
|
|
padding: 50px 30px;
|
|
|
line-height: 22px;
|
|
|
text |