/** * 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