|
|
/** layui-v2.4.5 MIT License By https://www.layui.com */
|
|
|
|
|
|
/* 设置所有类名为 layui-inline 和 img 的元素为内联块级元素，并使其垂直居中对齐 */
|
|
|
.layui-inline, img {
|
|
|
display: inline-block; /* 设置元素为内联块级元素 */
|
|
|
vertical-align: middle; /* 设置元素在垂直方向居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置所有标题元素（h1, h2, h3, h4, h5, h6）的字体粗细为400，通常表示常规字体 */
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
font-weight: 400; /* 设置字体权重为400，即正常粗细 */
|
|
|
}
|
|
|
|
|
|
/* 设置以下元素的 position 为 relative，用于定位参考 */
|
|
|
.layui-edge, .layui-header, .layui-inline, .layui-main {
|
|
|
position: relative; /* 设置元素为相对定位，允许子元素进行绝对定位 */
|
|
|
}
|
|
|
|
|
|
/* 设置元素的文本超出时显示省略号，且不换行 */
|
|
|
.layui-elip, .layui-form-checkbox span, .layui-form-pane .layui-form-label {
|
|
|
text-overflow: ellipsis; /* 超出文本显示省略号(...) */
|
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 和 layui-inline、img 元素的垂直对齐方式为居中 */
|
|
|
.layui-btn, .layui-edge, .layui-inline, img {
|
|
|
vertical-align: middle; /* 使这些元素垂直居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 禁止用户选中以下元素的文本内容 */
|
|
|
.layui-btn, .layui-disabled, .layui-icon, .layui-unselect {
|
|
|
-webkit-user-select: none; /* 禁止在 Webkit 浏览器（如Chrome）中选择文本 */
|
|
|
-ms-user-select: none; /* 禁止在 IE/Edge 浏览器中选择文本 */
|
|
|
-moz-user-select: none; /* 禁止在 Firefox 浏览器中选择文本 */
|
|
|
}
|
|
|
/* 设置所有常见元素（如 blockquote、body、button、dd 等）的默认 margin 和 padding 为 0，去除浏览器的默认间距 */
|
|
|
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
|
|
|
margin: 0; /* 去除元素的外边距 */
|
|
|
padding: 0; /* 去除元素的内边距 */
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 在移动设备上禁用点击高亮 */
|
|
|
}
|
|
|
|
|
|
/* 去除在链接（a 元素）在被点击（active）或鼠标悬停（hover）时的轮廓（outline） */
|
|
|
a:active, a:hover {
|
|
|
outline: 0; /* 去除链接在点击或悬停时的轮廓 */
|
|
|
}
|
|
|
|
|
|
/* 去除图像元素（img）的边框 */
|
|
|
img {
|
|
|
border: none; /* 去除图像的默认边框 */
|
|
|
}
|
|
|
|
|
|
/* 去除列表项（li）的默认列表样式 */
|
|
|
li {
|
|
|
list-style: none; /* 去除无序列表的圆点标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格（table）元素的边框样式 */
|
|
|
table {
|
|
|
border-collapse: collapse; /* 合并表格单元格之间的边框 */
|
|
|
border-spacing: 0; /* 去除表格单元格之间的间距 */
|
|
|
}
|
|
|
|
|
|
/* 调整 h4、h5 和 h6 标题的字体大小为 100%，使其继承父元素的字体大小 */
|
|
|
h4, h5, h6 {
|
|
|
font-size: 100%; /* 设置标题字体大小为默认值 */
|
|
|
}
|
|
|
|
|
|
/* 重置表单元素的样式（button、input、optgroup、option、select、textarea） */
|
|
|
button, input, optgroup, option, select, textarea {
|
|
|
font-family: inherit; /* 继承父元素的字体 */
|
|
|
font-size: inherit; /* 继承父元素的字体大小 */
|
|
|
font-style: inherit; /* 继承父元素的字体样式 */
|
|
|
font-weight: inherit; /* 继承父元素的字体粗细 */
|
|
|
outline: 0; /* 去除表单元素的焦点轮廓 */
|
|
|
}
|
|
|
|
|
|
/* 预格式化文本（pre）样式：保持换行，并自动换行超长的单词 */
|
|
|
pre {
|
|
|
white-space: pre-wrap; /* 保持原有空格，并允许换行 */
|
|
|
white-space: -moz-pre-wrap; /* Firefox 中的预格式化换行 */
|
|
|
white-space: -pre-wrap; /* 旧版浏览器中的预格式化换行 */
|
|
|
white-space: -o-pre-wrap; /* Opera 中的预格式化换行 */
|
|
|
word-wrap: break-word; /* 在单词过长时自动换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置 body 元素的默认字体、字号、行高 */
|
|
|
body {
|
|
|
line-height: 24px; /* 设置行高为 24px */
|
|
|
font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif; /* 设置默认字体和字号 */
|
|
|
}
|
|
|
|
|
|
/* 设置水平分隔线（hr）的样式 */
|
|
|
hr {
|
|
|
height: 1px; /* 设置分隔线的高度为 1px */
|
|
|
margin: 10px 0; /* 上下外边距为 10px */
|
|
|
border: 0; /* 去除默认的边框 */
|
|
|
clear: both; /* 清除浮动元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置链接（a 元素）的颜色和去除下划线 */
|
|
|
a {
|
|
|
color: #333; /* 设置链接的文字颜色为深灰色 */
|
|
|
text-decoration: none; /* 去除链接的下划线 */
|
|
|
}
|
|
|
|
|
|
/* 设置链接（a 元素）悬停时的样式 */
|
|
|
a:hover {
|
|
|
color: #777; /* 鼠标悬停时，链接文字变为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置引用（cite）元素的样式 */
|
|
|
a cite {
|
|
|
font-style: normal; /* 去除引用的斜体样式 */
|
|
|
*cursor: pointer; /* 防止 IE 中出现不必要的光标样式 */
|
|
|
}
|
|
|
|
|
|
/* 设置包含 .layui-border-box 类的元素及其子元素的盒子模型为 border-box */
|
|
|
.layui-border-box, .layui-border-box * {
|
|
|
box-sizing: border-box; /* 使用 border-box 盒子模型，包含内边距和边框在内 */
|
|
|
}
|
|
|
|
|
|
/* 设置包含 .layui-box 类的元素及其子元素的盒子模型为 content-box */
|
|
|
.layui-box, .layui-box * {
|
|
|
box-sizing: content-box; /* 使用 content-box 盒子模型，内边距和边框不包含在宽高计算中 */
|
|
|
}
|
|
|
|
|
|
/* 清除浮动元素的影响 */
|
|
|
.layui-clear {
|
|
|
clear: both; /* 清除浮动 */
|
|
|
*zoom: 1; /* 通过 hack 实现 clearfix 技术，在 IE 浏览器中强制触发块级格式化上下文 */
|
|
|
}
|
|
|
|
|
|
/* 在 .layui-clear 元素后添加清除浮动的伪元素 */
|
|
|
.layui-clear:after {
|
|
|
content: '\20'; /* 添加空字符，防止没有子元素时伪元素被省略 */
|
|
|
clear: both; /* 清除浮动 */
|
|
|
}
|
|
|
/* 使元素行为像块级元素，并通过 *zoom:1; hack 来触发 IE6/7 的双倍字号问题，解决布局问题 */
|
|
|
*zoom: 1;
|
|
|
display: block; /* 强制元素显示为块级元素 */
|
|
|
height: 0; /* 设置元素的高度为0 */
|
|
|
|
|
|
/* 将 .layui-inline 元素表现为内联元素，并通过 *zoom:1; hack 处理 IE6/7 的问题 */
|
|
|
.layui-inline {
|
|
|
*display: inline; /* 强制在 IE6/7 中显示为 inline（内联元素） */
|
|
|
*zoom: 1; /* 通过 zoom 技巧解决 IE6/7 中内联元素的布局问题 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-edge 元素的样式，创建一个零宽度、透明的虚线框 */
|
|
|
.layui-edge {
|
|
|
display: inline-block; /* 显示为行内块元素 */
|
|
|
width: 0; /* 宽度为 0 */
|
|
|
height: 0; /* 高度为 0 */
|
|
|
border-width: 6px; /* 边框宽度为 6px */
|
|
|
border-style: dashed; /* 设置边框为虚线 */
|
|
|
border-color: transparent; /* 边框颜色为透明 */
|
|
|
overflow: hidden; /* 超出内容隐藏 */
|
|
|
}
|
|
|
|
|
|
/* 设定 .layui-edge-top 元素的位置和虚线的样式，定位于上方 */
|
|
|
.layui-edge-top {
|
|
|
top: -4px; /* 将元素向上偏移 4px */
|
|
|
border-bottom-color: #999; /* 设置底边虚线颜色为灰色 */
|
|
|
border-bottom-style: solid; /* 设置底边为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设定 .layui-edge-right 元素的样式，定位于右侧 */
|
|
|
.layui-edge-right {
|
|
|
border-left-color: #999; /* 设置左边虚线颜色为灰色 */
|
|
|
border-left-style: solid; /* 设置左边为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设定 .layui-edge-bottom 元素的样式，定位于下方 */
|
|
|
.layui-edge-bottom {
|
|
|
top: 2px; /* 将元素向下偏移 2px */
|
|
|
border-top-color: #999; /* 设置上边虚线颜色为灰色 */
|
|
|
border-top-style: solid; /* 设置上边为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设定 .layui-edge-left 元素的样式，定位于左侧 */
|
|
|
.layui-edge-left {
|
|
|
border-right-color: #999; /* 设置右边虚线颜色为灰色 */
|
|
|
border-right-style: solid; /* 设置右边为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-elip 元素的样式，隐藏溢出的内容 */
|
|
|
.layui-elip {
|
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用元素的样式，包括鼠标悬停时 */
|
|
|
.layui-disabled, .layui-disabled:hover {
|
|
|
color: #d2d2d2 !important; /* 设置文本颜色为淡灰色，表示禁用 */
|
|
|
cursor: not-allowed !important; /* 设置鼠标样式为禁用 */
|
|
|
}
|
|
|
|
|
|
/* 创建一个圆形的元素 */
|
|
|
.layui-circle {
|
|
|
border-radius: 100%; /* 设置元素为圆形 */
|
|
|
}
|
|
|
|
|
|
/* 设置元素显示为块级元素，并且优先应用这个样式 */
|
|
|
.layui-show {
|
|
|
display: block !important; /* 强制设置 display 为 block */
|
|
|
}
|
|
|
|
|
|
/* 设置元素隐藏，优先应用这个样式 */
|
|
|
.layui-hide {
|
|
|
display: none !important; /* 强制设置 display 为 none */
|
|
|
}
|
|
|
|
|
|
/* 定义 layui-icon 字体图标的样式，并指定字体文件的路径 */
|
|
|
@font-face {
|
|
|
font-family: layui-icon; /* 设置字体家族名称为 layui-icon */
|
|
|
src: url(../font/iconfont.eot?v=240); /* 引入 EOT 格式的字体文件 */
|
|
|
src: url(../font/iconfont.eot?v=240#iefix) format('embedded-opentype'), /* 兼容 IE6/7 的 EOT 文件 */
|
|
|
url(../font/iconfont.svg?v=240#iconfont) format('svg'), /* 兼容 SVG 格式字体 */
|
|
|
url(../font/iconfont.woff?v=240) format('woff'), /* 兼容 WOFF 格式字体 */
|
|
|
url(../font/iconfont.ttf?v=240) format('truetype'); /* 兼容 TTF 格式字体 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-icon 元素的样式，确保图标显示正常 */
|
|
|
.layui-icon {
|
|
|
font-family: layui-icon !important; /* 强制使用 layui-icon 字体 */
|
|
|
font-size: 16px; /* 设置图标的大小 */
|
|
|
font-style: normal; /* 设置字体样式为正常 */
|
|
|
-webkit-font-smoothing: antialiased; /* 启用 Webkit 的字体平滑处理 */
|
|
|
-moz-osx-font-smoothing: grayscale; /* 启用 Firefox 下的字体平滑处理 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-icon-reply-fill 图标的内容（通过 Unicode 编码） */
|
|
|
.layui-icon-reply-fill:before {
|
|
|
content: "\e611"; /* 设置图标的 Unicode 编码 */
|
|
|
}
|
|
|
/* 设置 layui-icon-set-fill 图标的内容为 Unicode 编码 \e614 */
|
|
|
.layui-icon-set-fill:before {
|
|
|
content: "\e614"; /* 设置图标为 Unicode 字符 \e614 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-menu-fill 图标的内容为 Unicode 编码 \e60f */
|
|
|
.layui-icon-menu-fill:before {
|
|
|
content: "\e60f"; /* 设置图标为 Unicode 字符 \e60f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-search 图标的内容为 Unicode 编码 \e615 */
|
|
|
.layui-icon-search:before {
|
|
|
content: "\e615"; /* 设置图标为 Unicode 字符 \e615 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-share 图标的内容为 Unicode 编码 \e641 */
|
|
|
.layui-icon-share:before {
|
|
|
content: "\e641"; /* 设置图标为 Unicode 字符 \e641 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-set-sm 图标的内容为 Unicode 编码 \e620 */
|
|
|
.layui-icon-set-sm:before {
|
|
|
content: "\e620"; /* 设置图标为 Unicode 字符 \e620 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-engine 图标的内容为 Unicode 编码 \e628 */
|
|
|
.layui-icon-engine:before {
|
|
|
content: "\e628"; /* 设置图标为 Unicode 字符 \e628 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-close 图标的内容为 Unicode 编码 \1006 */
|
|
|
.layui-icon-close:before {
|
|
|
content: "\1006"; /* 设置图标为 Unicode 字符 \1006 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-close-fill 图标的内容为 Unicode 编码 \1007 */
|
|
|
.layui-icon-close-fill:before {
|
|
|
content: "\1007"; /* 设置图标为 Unicode 字符 \1007 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-chart-screen 图标的内容为 Unicode 编码 \e629 */
|
|
|
.layui-icon-chart-screen:before {
|
|
|
content: "\e629"; /* 设置图标为 Unicode 字符 \e629 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-star 图标的内容为 Unicode 编码 \e600 */
|
|
|
.layui-icon-star:before {
|
|
|
content: "\e600"; /* 设置图标为 Unicode 字符 \e600 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-circle-dot 图标的内容为 Unicode 编码 \e617 */
|
|
|
.layui-icon-circle-dot:before {
|
|
|
content: "\e617"; /* 设置图标为 Unicode 字符 \e617 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-chat 图标的内容为 Unicode 编码 \e606 */
|
|
|
.layui-icon-chat:before {
|
|
|
content: "\e606"; /* 设置图标为 Unicode 字符 \e606 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-release 图标的内容为 Unicode 编码 \e609 */
|
|
|
.layui-icon-release:before {
|
|
|
content: "\e609"; /* 设置图标为 Unicode 字符 \e609 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-list 图标的内容为 Unicode 编码 \e60a */
|
|
|
.layui-icon-list:before {
|
|
|
content: "\e60a"; /* 设置图标为 Unicode 字符 \e60a */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-chart 图标的内容为 Unicode 编码 \e62c */
|
|
|
.layui-icon-chart:before {
|
|
|
content: "\e62c"; /* 设置图标为 Unicode 字符 \e62c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-ok-circle 图标的内容为 Unicode 编码 \1005 */
|
|
|
.layui-icon-ok-circle:before {
|
|
|
content: "\1005"; /* 设置图标为 Unicode 字符 \1005 */
|
|
|
}
|
|
|
/* 设置 layui-icon-layim-theme 图标的内容为 Unicode 编码 \e61b */
|
|
|
.layui-icon-layim-theme:before {
|
|
|
content: "\e61b"; /* 设置图标为 Unicode 字符 \e61b */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-table 图标的内容为 Unicode 编码 \e62d */
|
|
|
.layui-icon-table:before {
|
|
|
content: "\e62d"; /* 设置图标为 Unicode 字符 \e62d */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-right 图标的内容为 Unicode 编码 \e602 */
|
|
|
.layui-icon-right:before {
|
|
|
content: "\e602"; /* 设置图标为 Unicode 字符 \e602 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-left 图标的内容为 Unicode 编码 \e603 */
|
|
|
.layui-icon-left:before {
|
|
|
content: "\e603"; /* 设置图标为 Unicode 字符 \e603 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-cart-simple 图标的内容为 Unicode 编码 \e698 */
|
|
|
.layui-icon-cart-simple:before {
|
|
|
content: "\e698"; /* 设置图标为 Unicode 字符 \e698 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-face-cry 图标的内容为 Unicode 编码 \e69c */
|
|
|
.layui-icon-face-cry:before {
|
|
|
content: "\e69c"; /* 设置图标为 Unicode 字符 \e69c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-face-smile 图标的内容为 Unicode 编码 \e6af */
|
|
|
.layui-icon-face-smile:before {
|
|
|
content: "\e6af"; /* 设置图标为 Unicode 字符 \e6af */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-survey 图标的内容为 Unicode 编码 \e6b2 */
|
|
|
.layui-icon-survey:before {
|
|
|
content: "\e6b2"; /* 设置图标为 Unicode 字符 \e6b2 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tree 图标的内容为 Unicode 编码 \e62e */
|
|
|
.layui-icon-tree:before {
|
|
|
content: "\e62e"; /* 设置图标为 Unicode 字符 \e62e */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-upload-circle 图标的内容为 Unicode 编码 \e62f */
|
|
|
.layui-icon-upload-circle:before {
|
|
|
content: "\e62f"; /* 设置图标为 Unicode 字符 \e62f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-add-circle 图标的内容为 Unicode 编码 \e61f */
|
|
|
.layui-icon-add-circle:before {
|
|
|
content: "\e61f"; /* 设置图标为 Unicode 字符 \e61f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-download-circle 图标的内容为 Unicode 编码 \e601 */
|
|
|
.layui-icon-download-circle:before {
|
|
|
content: "\e601"; /* 设置图标为 Unicode 字符 \e601 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-templeate-1 图标的内容为 Unicode 编码 \e630 */
|
|
|
.layui-icon-templeate-1:before {
|
|
|
content: "\e630"; /* 设置图标为 Unicode 字符 \e630 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-util 图标的内容为 Unicode 编码 \e631 */
|
|
|
.layui-icon-util:before {
|
|
|
content: "\e631"; /* 设置图标为 Unicode 字符 \e631 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-face-surprised 图标的内容为 Unicode 编码 \e664 */
|
|
|
.layui-icon-face-surprised:before {
|
|
|
content: "\e664"; /* 设置图标为 Unicode 字符 \e664 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-edit 图标的内容为 Unicode 编码 \e642 */
|
|
|
.layui-icon-edit:before {
|
|
|
content: "\e642"; /* 设置图标为 Unicode 字符 \e642 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-speaker 图标的内容为 Unicode 编码 \e645 */
|
|
|
.layui-icon-speaker:before {
|
|
|
content: "\e645"; /* 设置图标为 Unicode 字符 \e645 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-down 图标的内容为 Unicode 编码 \e61a */
|
|
|
.layui-icon-down:before {
|
|
|
content: "\e61a"; /* 设置图标为 Unicode 字符 \e61a */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-file 图标的内容为 Unicode 编码 \e621 */
|
|
|
.layui-icon-file:before {
|
|
|
content: "\e621"; /* 设置图标为 Unicode 字符 \e621 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-layouts 图标的内容为 Unicode 编码 \e632 */
|
|
|
.layui-icon-layouts:before {
|
|
|
content: "\e632"; /* 设置图标为 Unicode 字符 \e632 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-rate-half 图标的内容为 Unicode 编码 \e6c9 */
|
|
|
.layui-icon-rate-half:before {
|
|
|
content: "\e6c9"; /* 设置图标为 Unicode 字符 \e6c9 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-add-circle-fine 图标的内容为 Unicode 编码 \e608 */
|
|
|
.layui-icon-add-circle-fine:before {
|
|
|
content: "\e608"; /* 设置图标为 Unicode 字符 \e608 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-prev-circle 图标的内容为 Unicode 编码 \e633 */
|
|
|
.layui-icon-prev-circle:before {
|
|
|
content: "\e633"; /* 设置图标为 Unicode 字符 \e633 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-read 图标的内容为 Unicode 编码 \e705 */
|
|
|
.layui-icon-read:before {
|
|
|
content: "\e705"; /* 设置图标为 Unicode 字符 \e705 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-404 图标的内容为 Unicode 编码 \e61c */
|
|
|
.layui-icon-404:before {
|
|
|
content: "\e61c"; /* 设置图标为 Unicode 字符 \e61c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-carousel 图标的内容为 Unicode 编码 \e634 */
|
|
|
.layui-icon-carousel:before {
|
|
|
content: "\e634"; /* 设置图标为 Unicode 字符 \e634 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-help 图标的内容为 Unicode 编码 \e607 */
|
|
|
.layui-icon-help:before {
|
|
|
content: "\e607"; /* 设置图标为 Unicode 字符 \e607 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-code-circle 图标的内容为 Unicode 编码 \e635 */
|
|
|
.layui-icon-code-circle:before {
|
|
|
content: "\e635"; /* 设置图标为 Unicode 字符 \e635 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-water 图标的内容为 Unicode 编码 \e636 */
|
|
|
.layui-icon-water:before {
|
|
|
content: "\e636"; /* 设置图标为 Unicode 字符 \e636 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-username 图标的内容为 Unicode 编码 \e66f */
|
|
|
.layui-icon-username:before {
|
|
|
content: "\e66f"; /* 设置图标为 Unicode 字符 \e66f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-find-fill 图标的内容为 Unicode 编码 \e670 */
|
|
|
.layui-icon-find-fill:before {
|
|
|
content: "\e670"; /* 设置图标为 Unicode 字符 \e670 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-about 图标的内容为 Unicode 编码 \e60b */
|
|
|
.layui-icon-about:before {
|
|
|
content: "\e60b"; /* 设置图标为 Unicode 字符 \e60b */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-location 图标的内容为 Unicode 编码 \e715 */
|
|
|
.layui-icon-location:before {
|
|
|
content: "\e715"; /* 设置图标为 Unicode 字符 \e715 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-up 图标的内容为 Unicode 编码 \e619 */
|
|
|
.layui-icon-up:before {
|
|
|
content: "\e619"; /* 设置图标为 Unicode 字符 \e619 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-pause 图标的内容为 Unicode 编码 \e651 */
|
|
|
.layui-icon-pause:before {
|
|
|
content: "\e651"; /* 设置图标为 Unicode 字符 \e651 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-date 图标的内容为 Unicode 编码 \e637 */
|
|
|
.layui-icon-date:before {
|
|
|
content: "\e637"; /* 设置图标为 Unicode 字符 \e637 */
|
|
|
}
|
|
|
/* 设置 layui-icon-layim-uploadfile 图标的内容为 Unicode 编码 \e61d */
|
|
|
.layui-icon-layim-uploadfile:before {
|
|
|
content: "\e61d"; /* 设置图标为 Unicode 字符 \e61d */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-delete 图标的内容为 Unicode 编码 \e640 */
|
|
|
.layui-icon-delete:before {
|
|
|
content: "\e640"; /* 设置图标为 Unicode 字符 \e640 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-play 图标的内容为 Unicode 编码 \e652 */
|
|
|
.layui-icon-play:before {
|
|
|
content: "\e652"; /* 设置图标为 Unicode 字符 \e652 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-top 图标的内容为 Unicode 编码 \e604 */
|
|
|
.layui-icon-top:before {
|
|
|
content: "\e604"; /* 设置图标为 Unicode 字符 \e604 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-friends 图标的内容为 Unicode 编码 \e612 */
|
|
|
.layui-icon-friends:before {
|
|
|
content: "\e612"; /* 设置图标为 Unicode 字符 \e612 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-refresh-3 图标的内容为 Unicode 编码 \e9aa */
|
|
|
.layui-icon-refresh-3:before {
|
|
|
content: "\e9aa"; /* 设置图标为 Unicode 字符 \e9aa */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-ok 图标的内容为 Unicode 编码 \e605 */
|
|
|
.layui-icon-ok:before {
|
|
|
content: "\e605"; /* 设置图标为 Unicode 字符 \e605 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-layer 图标的内容为 Unicode 编码 \e638 */
|
|
|
.layui-icon-layer:before {
|
|
|
content: "\e638"; /* 设置图标为 Unicode 字符 \e638 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-face-smile-fine 图标的内容为 Unicode 编码 \e60c */
|
|
|
.layui-icon-face-smile-fine:before {
|
|
|
content: "\e60c"; /* 设置图标为 Unicode 字符 \e60c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-dollar 图标的内容为 Unicode 编码 \e659 */
|
|
|
.layui-icon-dollar:before {
|
|
|
content: "\e659"; /* 设置图标为 Unicode 字符 \e659 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-group 图标的内容为 Unicode 编码 \e613 */
|
|
|
.layui-icon-group:before {
|
|
|
content: "\e613"; /* 设置图标为 Unicode 字符 \e613 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-layim-download 图标的内容为 Unicode 编码 \e61e */
|
|
|
.layui-icon-layim-download:before {
|
|
|
content: "\e61e"; /* 设置图标为 Unicode 字符 \e61e */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-picture-fine 图标的内容为 Unicode 编码 \e60d */
|
|
|
.layui-icon-picture-fine:before {
|
|
|
content: "\e60d"; /* 设置图标为 Unicode 字符 \e60d */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-link 图标的内容为 Unicode 编码 \e64c */
|
|
|
.layui-icon-link:before {
|
|
|
content: "\e64c"; /* 设置图标为 Unicode 字符 \e64c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-diamond 图标的内容为 Unicode 编码 \e735 */
|
|
|
.layui-icon-diamond:before {
|
|
|
content: "\e735"; /* 设置图标为 Unicode 字符 \e735 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-log 图标的内容为 Unicode 编码 \e60e */
|
|
|
.layui-icon-log:before {
|
|
|
content: "\e60e"; /* 设置图标为 Unicode 字符 \e60e */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-rate-solid 图标的内容为 Unicode 编码 \e67a */
|
|
|
.layui-icon-rate-solid:before {
|
|
|
content: "\e67a"; /* 设置图标为 Unicode 字符 \e67a */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-del 图标的内容为 Unicode 编码 \e64f */
|
|
|
.layui-icon-fonts-del:before {
|
|
|
content: "\e64f"; /* 设置图标为 Unicode 字符 \e64f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-unlink 图标的内容为 Unicode 编码 \e64d */
|
|
|
.layui-icon-unlink:before {
|
|
|
content: "\e64d"; /* 设置图标为 Unicode 字符 \e64d */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-clear 图标的内容为 Unicode 编码 \e639 */
|
|
|
.layui-icon-fonts-clear:before {
|
|
|
content: "\e639"; /* 设置图标为 Unicode 字符 \e639 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-triangle-r 图标的内容为 Unicode 编码 \e623 */
|
|
|
.layui-icon-triangle-r:before {
|
|
|
content: "\e623"; /* 设置图标为 Unicode 字符 \e623 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-circle 图标的内容为 Unicode 编码 \e63f */
|
|
|
.layui-icon-circle:before {
|
|
|
content: "\e63f"; /* 设置图标为 Unicode 字符 \e63f */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-radio 图标的内容为 Unicode 编码 \e643 */
|
|
|
.layui-icon-radio:before {
|
|
|
content: "\e643"; /* 设置图标为 Unicode 字符 \e643 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-align-center 图标的内容为 Unicode 编码 \e647 */
|
|
|
.layui-icon-align-center:before {
|
|
|
content: "\e647"; /* 设置图标为 Unicode 字符 \e647 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-align-right 图标的内容为 Unicode 编码 \e648 */
|
|
|
.layui-icon-align-right:before {
|
|
|
content: "\e648"; /* 设置图标为 Unicode 字符 \e648 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-align-left 图标的内容为 Unicode 编码 \e649 */
|
|
|
.layui-icon-align-left:before {
|
|
|
content: "\e649"; /* 设置图标为 Unicode 字符 \e649 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-loading-1 图标的内容为 Unicode 编码 \e63e */
|
|
|
.layui-icon-loading-1:before {
|
|
|
content: "\e63e"; /* 设置图标为 Unicode 字符 \e63e */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-return 图标的内容为 Unicode 编码 \e65c */
|
|
|
.layui-icon-return:before {
|
|
|
content: "\e65c"; /* 设置图标为 Unicode 字符 \e65c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-strong 图标的内容为 Unicode 编码 \e62b */
|
|
|
.layui-icon-fonts-strong:before {
|
|
|
content: "\e62b"; /* 设置图标为 Unicode 字符 \e62b */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-upload 图标的内容为 Unicode 编码 \e67c */
|
|
|
.layui-icon-upload:before {
|
|
|
content: "\e67c"; /* 设置图标为 Unicode 字符 \e67c */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-dialogue 图标的内容为 Unicode 编码 \e63a */
|
|
|
.layui-icon-dialogue:before {
|
|
|
content: "\e63a"; /* 设置图标为 Unicode 字符 \e63a */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-video 图标的内容为 Unicode 编码 \e6ed */
|
|
|
.layui-icon-video:before {
|
|
|
content: "\e6ed"; /* 设置图标为 Unicode 字符 \e6ed */
|
|
|
}
|
|
|
/* 设置 layui-icon-headset 图标的内容为 Unicode 编码 \e6fc */
|
|
|
.layui-icon-headset:before {
|
|
|
content: "\e6fc";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-cellphone-fine 图标的内容为 Unicode 编码 \e63b */
|
|
|
.layui-icon-cellphone-fine:before {
|
|
|
content: "\e63b";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-add-1 图标的内容为 Unicode 编码 \e654 */
|
|
|
.layui-icon-add-1:before {
|
|
|
content: "\e654";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-face-smile-b 图标的内容为 Unicode 编码 \e650 */
|
|
|
.layui-icon-face-smile-b:before {
|
|
|
content: "\e650";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-html 图标的内容为 Unicode 编码 \e64b */
|
|
|
.layui-icon-fonts-html:before {
|
|
|
content: "\e64b";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-form 图标的内容为 Unicode 编码 \e63c */
|
|
|
.layui-icon-form:before {
|
|
|
content: "\e63c";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-cart 图标的内容为 Unicode 编码 \e657 */
|
|
|
.layui-icon-cart:before {
|
|
|
content: "\e657";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-camera-fill 图标的内容为 Unicode 编码 \e65d */
|
|
|
.layui-icon-camera-fill:before {
|
|
|
content: "\e65d";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tabs 图标的内容为 Unicode 编码 \e62a */
|
|
|
.layui-icon-tabs:before {
|
|
|
content: "\e62a";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-code 图标的内容为 Unicode 编码 \e64e */
|
|
|
.layui-icon-fonts-code:before {
|
|
|
content: "\e64e";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fire 图标的内容为 Unicode 编码 \e756 */
|
|
|
.layui-icon-fire:before {
|
|
|
content: "\e756";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-set 图标的内容为 Unicode 编码 \e716 */
|
|
|
.layui-icon-set:before {
|
|
|
content: "\e716";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-u 图标的内容为 Unicode 编码 \e646 */
|
|
|
.layui-icon-fonts-u:before {
|
|
|
content: "\e646";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-triangle-d 图标的内容为 Unicode 编码 \e625 */
|
|
|
.layui-icon-triangle-d:before {
|
|
|
content: "\e625";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tips 图标的内容为 Unicode 编码 \e702 */
|
|
|
.layui-icon-tips:before {
|
|
|
content: "\e702";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-picture 图标的内容为 Unicode 编码 \e64a */
|
|
|
.layui-icon-picture:before {
|
|
|
content: "\e64a";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-more-vertical 图标的内容为 Unicode 编码 \e671 */
|
|
|
.layui-icon-more-vertical:before {
|
|
|
content: "\e671";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-flag 图标的内容为 Unicode 编码 \e66c */
|
|
|
.layui-icon-flag:before {
|
|
|
content: "\e66c";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-loading 图标的内容为 Unicode 编码 \e63d */
|
|
|
.layui-icon-loading:before {
|
|
|
content: "\e63d";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-fonts-i 图标的内容为 Unicode 编码 \e644 */
|
|
|
.layui-icon-fonts-i:before {
|
|
|
content: "\e644";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-refresh-1 图标的内容为 Unicode 编码 \e666 */
|
|
|
.layui-icon-refresh-1:before {
|
|
|
content: "\e666";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-rmb 图标的内容为 Unicode 编码 \e65e */
|
|
|
.layui-icon-rmb:before {
|
|
|
content: "\e65e";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-home 图标的内容为 Unicode 编码 \e68e */
|
|
|
.layui-icon-home:before {
|
|
|
content: "\e68e";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-user 图标的内容为 Unicode 编码 \e770 */
|
|
|
.layui-icon-user:before {
|
|
|
content: "\e770";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-notice 图标的内容为 Unicode 编码 \e667 */
|
|
|
.layui-icon-notice:before {
|
|
|
content: "\e667";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-login-weibo 图标的内容为 Unicode 编码 \e675 */
|
|
|
.layui-icon-login-weibo:before {
|
|
|
content: "\e675";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-voice 图标的内容为 Unicode 编码 \e688 */
|
|
|
.layui-icon-voice:before {
|
|
|
content: "\e688";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-upload-drag 图标的内容为 Unicode 编码 \e681 */
|
|
|
.layui-icon-upload-drag:before {
|
|
|
content: "\e681";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-login-qq 图标的内容为 Unicode 编码 \e676 */
|
|
|
.layui-icon-login-qq:before {
|
|
|
content: "\e676";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-snowflake 图标的内容为 Unicode 编码 \e6b1 */
|
|
|
.layui-icon-snowflake:before {
|
|
|
content: "\e6b1";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-file-b 图标的内容为 Unicode 编码 \e655 */
|
|
|
.layui-icon-file-b:before {
|
|
|
content: "\e655";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-template 图标的内容为 Unicode 编码 \e663 */
|
|
|
.layui-icon-template:before {
|
|
|
content: "\e663";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-auz 图标的内容为 Unicode 编码 \e672 */
|
|
|
.layui-icon-auz:before {
|
|
|
content: "\e672";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-console 图标的内容为 Unicode 编码 \e665 */
|
|
|
.layui-icon-console:before {
|
|
|
content: "\e665";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-app 图标的内容为 Unicode 编码 \e653 */
|
|
|
.layui-icon-app:before {
|
|
|
content: "\e653";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-prev 图标的内容为 Unicode 编码 \e65a */
|
|
|
.layui-icon-prev:before {
|
|
|
content: "\e65a";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-website 图标的内容为 Unicode 编码 \e7ae */
|
|
|
.layui-icon-website:before {
|
|
|
content: "\e7ae";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-next 图标的内容为 Unicode 编码 \e65b */
|
|
|
.layui-icon-next:before {
|
|
|
content: "\e65b";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-component 图标的内容为 Unicode 编码 \e857 */
|
|
|
.layui-icon-component:before {
|
|
|
content: "\e857";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-more 图标的内容为 Unicode 编码 \e65f */
|
|
|
.layui-icon-more:before {
|
|
|
content: "\e65f";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-login-wechat 图标的内容为 Unicode 编码 \e677 */
|
|
|
.layui-icon-login-wechat:before {
|
|
|
content: "\e677";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-shrink-right 图标的内容为 Unicode 编码 \e668 */
|
|
|
.layui-icon-shrink-right:before {
|
|
|
content: "\e668";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-spread-left 图标的内容为 Unicode 编码 \e66b */
|
|
|
.layui-icon-spread-left:before {
|
|
|
content: "\e66b";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-camera 图标的内容为 Unicode 编码 \e660 */
|
|
|
.layui-icon-camera:before {
|
|
|
content: "\e660";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-note 图标的内容为 Unicode 编码 \e66e */
|
|
|
.layui-icon-note:before {
|
|
|
content: "\e66e";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-refresh 图标的内容为 Unicode 编码 \e669 */
|
|
|
.layui-icon-refresh:before {
|
|
|
content: "\e669";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-female 图标的内容为 Unicode 编码 \e661 */
|
|
|
.layui-icon-female:before {
|
|
|
content: "\e661";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-male 图标的内容为 Unicode 编码 \e662 */
|
|
|
.layui-icon-male:before {
|
|
|
content: "\e662";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-password 图标的内容为 Unicode 编码 \e673 */
|
|
|
.layui-icon-password:before {
|
|
|
content: "\e673";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-senior 图标的内容为 Unicode 编码 \e674 */
|
|
|
.layui-icon-senior:before {
|
|
|
content: "\e674";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-theme 图标的内容为 Unicode 编码 \e66a */
|
|
|
.layui-icon-theme:before {
|
|
|
content: "\e66a";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tread 图标的内容为 Unicode 编码 \e6c5 */
|
|
|
.layui-icon-tread:before {
|
|
|
content: "\e6c5";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-praise 图标的内容为 Unicode 编码 \e6c6 */
|
|
|
.layui-icon-praise:before {
|
|
|
content: "\e6c6";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-star-fill 图标的内容为 Unicode 编码 \e658 */
|
|
|
.layui-icon-star-fill:before {
|
|
|
content: "\e658";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-key 图标的内容为 Unicode 编码 \e678 */
|
|
|
.layui-icon-key:before {
|
|
|
content: "\e678";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tips-fill 图标的内容为 Unicode 编码 \e703 */
|
|
|
.layui-icon-tips-fill:before {
|
|
|
content: "\e703";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-write 图标的内容为 Unicode 编码 \e6a7 */
|
|
|
.layui-icon-write:before {
|
|
|
content: "\e6a7";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-share 图标的内容为 Unicode 编码 \e69b */
|
|
|
.layui-icon-share:before {
|
|
|
content: "\e69b";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-top 图标的内容为 Unicode 编码 \e685 */
|
|
|
.layui-icon-top:before {
|
|
|
content: "\e685";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-gift 图标的内容为 Unicode 编码 \e695 */
|
|
|
.layui-icon-gift:before {
|
|
|
content: "\e695";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-link 图标的内容为 Unicode 编码 \e64f */
|
|
|
.layui-icon-link:before {
|
|
|
content: "\e64f";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-logout 图标的内容为 Unicode 编码 \e678 */
|
|
|
.layui-icon-logout:before {
|
|
|
content: "\e678";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-refresh-left 图标的内容为 Unicode 编码 \e67a */
|
|
|
.layui-icon-refresh-left:before {
|
|
|
content: "\e67a";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-back 图标的内容为 Unicode 编码 \e60e */
|
|
|
.layui-icon-back:before {
|
|
|
content: "\e60e";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-save 图标的内容为 Unicode 编码 \e614 */
|
|
|
.layui-icon-save:before {
|
|
|
content: "\e614";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-location 图标的内容为 Unicode 编码 \e65c */
|
|
|
.layui-icon-location:before {
|
|
|
content: "\e65c";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-location-fill 图标的内容为 Unicode 编码 \e6a4 */
|
|
|
.layui-icon-location-fill:before {
|
|
|
content: "\e6a4";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-screen-fill 图标的内容为 Unicode 编码 \e604 */
|
|
|
.layui-icon-screen-fill:before {
|
|
|
content: "\e604";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-like 图标的内容为 Unicode 编码 \e629 */
|
|
|
.layui-icon-like:before {
|
|
|
content: "\e629";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-article 图标的内容为 Unicode 编码 \e60f */
|
|
|
.layui-icon-article:before {
|
|
|
content: "\e60f";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-edit 图标的内容为 Unicode 编码 \e616 */
|
|
|
.layui-icon-edit:before {
|
|
|
content: "\e616";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-folder 图标的内容为 Unicode 编码 \e622 */
|
|
|
.layui-icon-folder:before {
|
|
|
content: "\e622";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-pc 图标的内容为 Unicode 编码 \e659 */
|
|
|
.layui-icon-pc:before {
|
|
|
content: "\e659";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tasks 图标的内容为 Unicode 编码 \e655 */
|
|
|
.layui-icon-tasks:before {
|
|
|
content: "\e655";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-sort 图标的内容为 Unicode 编码 \e62f */
|
|
|
.layui-icon-sort:before {
|
|
|
content: "\e62f";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-tip 图标的内容为 Unicode 编码 \e677 */
|
|
|
.layui-icon-tip:before {
|
|
|
content: "\e677";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-zoom-in 图标的内容为 Unicode 编码 \e623 */
|
|
|
.layui-icon-zoom-in:before {
|
|
|
content: "\e623";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-zoom-out 图标的内容为 Unicode 编码 \e624 */
|
|
|
.layui-icon-zoom-out:before {
|
|
|
content: "\e624";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-code 图标的内容为 Unicode 编码 \e66f */
|
|
|
.layui-icon-code:before {
|
|
|
content: "\e66f";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-video 图标的内容为 Unicode 编码 \e6a8 */
|
|
|
.layui-icon-video:before {
|
|
|
content: "\e6a8";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-phone 图标的内容为 Unicode 编码 \e6c8 */
|
|
|
.layui-icon-phone:before {
|
|
|
content: "\e6c8";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-cloud 图标的内容为 Unicode 编码 \e6c7 */
|
|
|
.layui-icon-cloud:before {
|
|
|
content: "\e6c7";
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-icon-error 图标的内容为 Unicode 编码 \e703 */
|
|
|
.layui-icon-error:before {
|
|
|
content: "\e703";
|
|
|
}
|
|
|
/* 设置验证码图标的 Unicode 编码为 \e679 */
|
|
|
.layui-icon-vercode:before {
|
|
|
content: "\e679";
|
|
|
}
|
|
|
|
|
|
/* 设置手机图标的 Unicode 编码为 \e678 */
|
|
|
.layui-icon-cellphone:before {
|
|
|
content: "\e678";
|
|
|
}
|
|
|
|
|
|
/* 设置全屏图标的 Unicode 编码为 \e622 */
|
|
|
.layui-icon-screen-full:before {
|
|
|
content: "\e622";
|
|
|
}
|
|
|
|
|
|
/* 设置恢复全屏图标的 Unicode 编码为 \e758 */
|
|
|
.layui-icon-screen-restore:before {
|
|
|
content: "\e758";
|
|
|
}
|
|
|
|
|
|
/* 设置列的图标的 Unicode 编码为 \e610 */
|
|
|
.layui-icon-cols:before {
|
|
|
content: "\e610";
|
|
|
}
|
|
|
|
|
|
/* 设置导出图标的 Unicode 编码为 \e67d */
|
|
|
.layui-icon-export:before {
|
|
|
content: "\e67d";
|
|
|
}
|
|
|
|
|
|
/* 设置打印图标的 Unicode 编码为 \e66d */
|
|
|
.layui-icon-print:before {
|
|
|
content: "\e66d";
|
|
|
}
|
|
|
|
|
|
/* 设置滑块图标的 Unicode 编码为 \e714 */
|
|
|
.layui-icon-slider:before {
|
|
|
content: "\e714";
|
|
|
}
|
|
|
|
|
|
/* 设置主内容区域的宽度为 1140px，居中显示 */
|
|
|
.layui-main {
|
|
|
width: 1140px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
/* 设置头部区域的 z-index 为 1000，高于其他元素，设置高度为 60px */
|
|
|
.layui-header {
|
|
|
z-index: 1000;
|
|
|
height: 60px;
|
|
|
}
|
|
|
|
|
|
/* 设置头部链接在鼠标悬停时的过渡效果 */
|
|
|
.layui-header a:hover {
|
|
|
transition: all .5s;
|
|
|
-webkit-transition: all .5s;
|
|
|
}
|
|
|
|
|
|
/* 设置侧边栏位置固定，宽度为 200px，占据整个高度 */
|
|
|
.layui-side {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 999;
|
|
|
width: 200px;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
/* 设置侧边栏滚动区域的宽度为 220px，高度自适应，隐藏横向滚动 */
|
|
|
.layui-side-scroll {
|
|
|
position: relative;
|
|
|
width: 220px;
|
|
|
height: 100%;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
/* 设置主体区域的位置为绝对定位，左侧留出 200px 宽度，溢出隐藏，纵向可滚动 */
|
|
|
.layui-body {
|
|
|
position: absolute;
|
|
|
left: 200px;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 998;
|
|
|
width: auto;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* 设置布局的主体区域的溢出隐藏 */
|
|
|
.layui-layout-body {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
/* 设置管理模式下的头部背景色为深色 */
|
|
|
.layui-layout-admin .layui-header {
|
|
|
background-color: #23262E;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的侧边栏的顶部偏移为 60px，宽度为 200px */
|
|
|
.layui-layout-admin .layui-side {
|
|
|
top: 60px;
|
|
|
width: 200px;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的主体区域顶部偏移为 60px，底部偏移为 44px */
|
|
|
.layui-layout-admin .layui-body {
|
|
|
top: 60px;
|
|
|
bottom: 44px;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的主内容区域宽度自动调整，左右外边距为 15px */
|
|
|
.layui-layout-admin .layui-main {
|
|
|
width: auto;
|
|
|
margin: 0 15px;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的底部区域固定，宽度自适应，背景色为浅灰色 */
|
|
|
.layui-layout-admin .layui-footer {
|
|
|
position: fixed;
|
|
|
left: 200px;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
|
|
padding: 0 15px;
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的 logo 区域，定位在左侧顶部，宽度 200px，居中显示 */
|
|
|
.layui-layout-admin .layui-logo {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 200px;
|
|
|
height: 100%;
|
|
|
line-height: 60px;
|
|
|
text-align: center;
|
|
|
color: #009688;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
/* 管理模式下的导航栏背景透明 */
|
|
|
.layui-layout-admin .layui-header .layui-nav {
|
|
|
background: 0 0;
|
|
|
}
|
|
|
|
|
|
/* 设置左侧布局的绝对定位，左边留出 200px */
|
|
|
.layui-layout-left {
|
|
|
position: absolute !important;
|
|
|
left: 200px;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
/* 设置右侧布局的绝对定位，右边对齐 */
|
|
|
.layui-layout-right {
|
|
|
position: absolute !important;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
/* 设置容器的定位为相对定位，居中显示，并设置左右内边距为 15px，采用盒模型计算 */
|
|
|
.layui-container {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
margin: 0 auto; /* 水平居中 */
|
|
|
padding: 0 15px; /* 设置左右内边距为 15px */
|
|
|
box-sizing: border-box; /* 采用盒模型，内外边距都包含在元素的宽高内 */
|
|
|
}
|
|
|
|
|
|
/* 设置流式布局容器的相对定位，居中显示，并设置左右内边距为 15px */
|
|
|
.layui-fluid {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
margin: 0 auto; /* 水平居中 */
|
|
|
padding: 0 15px; /* 设置左右内边距为 15px */
|
|
|
}
|
|
|
|
|
|
/* 清除浮动，确保父元素能够包裹住浮动的子元素 */
|
|
|
.layui-row:after, .layui-row:before {
|
|
|
content: ''; /* 清除浮动的内容 */
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
clear: both; /* 清除左右浮动 */
|
|
|
}
|
|
|
|
|
|
/* 定义多个列的宽度，适用于不同的屏幕尺寸 (如 lg, md, sm, xs) */
|
|
|
/* 设置列的相对定位，块级显示，采用盒模型计算 */
|
|
|
.layui-col-lg1, .layui-col-lg10, .layui-col-lg11, .layui-col-lg12,
|
|
|
.layui-col-lg2, .layui-col-lg3, .layui-col-lg4, .layui-col-lg5,
|
|
|
.layui-col-lg6, .layui-col-lg7, .layui-col-lg8, .layui-col-lg9,
|
|
|
.layui-col-md1, .layui-col-md10, .layui-col-md11, .layui-col-md12,
|
|
|
.layui-col-md2, .layui-col-md3, .layui-col-md4, .layui-col-md5,
|
|
|
.layui-col-md6, .layui-col-md7, .layui-col-md8, .layui-col-md9,
|
|
|
.layui-col-sm1, .layui-col-sm10, .layui-col-sm11, .layui-col-sm12,
|
|
|
.layui-col-sm2, .layui-col-sm3, .layui-col-sm4, .layui-col-sm5,
|
|
|
.layui-col-sm6, .layui-col-sm7, .layui-col-sm8, .layui-col-sm9,
|
|
|
.layui-col-xs1, .layui-col-xs10, .layui-col-xs11, .layui-col-xs12,
|
|
|
.layui-col-xs2, .layui-col-xs3, .layui-col-xs4, .layui-col-xs5,
|
|
|
.layui-col-xs6, .layui-col-xs7, .layui-col-xs8, .layui-col-xs9 {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
box-sizing: border-box; /* 采用盒模型，内外边距都包含在元素的宽高内 */
|
|
|
}
|
|
|
|
|
|
/* 定义在小屏幕（xs）下的列，设置它们的浮动行为，按照列宽百分比进行布局 */
|
|
|
.layui-col-xs1, .layui-col-xs10, .layui-col-xs11, .layui-col-xs12,
|
|
|
.layui-col-xs2, .layui-col-xs3, .layui-col-xs4, .layui-col-xs5,
|
|
|
.layui-col-xs6, .layui-col-xs7, .layui-col-xs8, .layui-col-xs9 {
|
|
|
float: left; /* 使元素浮动到左侧，创建并排布局 */
|
|
|
}
|
|
|
|
|
|
/* 设置各列的宽度，按照 12 等分的比例进行布局 */
|
|
|
|
|
|
/* 设置 1 栏的宽度为 8.33% */
|
|
|
.layui-col-xs1 {
|
|
|
width: 8.33333333%;
|
|
|
}
|
|
|
|
|
|
/* 设置 2 栏的宽度为 16.67% */
|
|
|
.layui-col-xs2 {
|
|
|
width: 16.66666667%;
|
|
|
}
|
|
|
|
|
|
/* 设置 3 栏的宽度为 25% */
|
|
|
.layui-col-xs3 {
|
|
|
width: 25%;
|
|
|
}
|
|
|
|
|
|
/* 设置 4 栏的宽度为 33.33% */
|
|
|
.layui-col-xs4 {
|
|
|
width: 33.33333333%;
|
|
|
}
|
|
|
|
|
|
/* 设置 5 栏的宽度为 41.67% */
|
|
|
.layui-col-xs5 {
|
|
|
width: 41.66666667%;
|
|
|
}
|
|
|
|
|
|
/* 设置 6 栏的宽度为 50% */
|
|
|
.layui-col-xs6 {
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
/* 设置 7 栏的宽度为 58.33% */
|
|
|
.layui-col-xs7 {
|
|
|
width: 58.33333333%;
|
|
|
}
|
|
|
|
|
|
/* 设置 8 栏的宽度为 66.67% */
|
|
|
.layui-col-xs8 {
|
|
|
width: 66.66666667%;
|
|
|
}
|
|
|
|
|
|
/* 设置 9 栏的宽度为 75% */
|
|
|
.layui-col-xs9 {
|
|
|
width: 75%;
|
|
|
}
|
|
|
|
|
|
/* 设置 10 栏的宽度为 83.33% */
|
|
|
.layui-col-xs10 {
|
|
|
width: 83.33333333%;
|
|
|
}
|
|
|
/* 定义一个列宽为 91.66666667%，大约是 11/12 的宽度 */
|
|
|
.layui-col-xs11 {
|
|
|
width: 91.66666667%; /* 设置列宽为 91.6667% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个列宽为 100%，占据整行 */
|
|
|
.layui-col-xs12 {
|
|
|
width: 100%; /* 设置列宽为 100% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 8.33333333%，相当于 1/12 宽度 */
|
|
|
.layui-col-xs-offset1 {
|
|
|
margin-left: 8.33333333%; /* 设置左边距为 8.3333% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 16.66666667%，相当于 2/12 宽度 */
|
|
|
.layui-col-xs-offset2 {
|
|
|
margin-left: 16.66666667%; /* 设置左边距为 16.6667% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 25%，相当于 3/12 宽度 */
|
|
|
.layui-col-xs-offset3 {
|
|
|
margin-left: 25%; /* 设置左边距为 25% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 33.33333333%，相当于 4/12 宽度 */
|
|
|
.layui-col-xs-offset4 {
|
|
|
margin-left: 33.33333333%; /* 设置左边距为 33.3333% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 41.66666667%，相当于 5/12 宽度 */
|
|
|
.layui-col-xs-offset5 {
|
|
|
margin-left: 41.66666667%; /* 设置左边距为 41.6667% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 50%，相当于 6/12 宽度 */
|
|
|
.layui-col-xs-offset6 {
|
|
|
margin-left: 50%; /* 设置左边距为 50% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 58.33333333%，相当于 7/12 宽度 */
|
|
|
.layui-col-xs-offset7 {
|
|
|
margin-left: 58.33333333%; /* 设置左边距为 58.3333% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 66.66666667%，相当于 8/12 宽度 */
|
|
|
.layui-col-xs-offset8 {
|
|
|
margin-left: 66.66666667%; /* 设置左边距为 66.6667% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 75%，相当于 9/12 宽度 */
|
|
|
.layui-col-xs-offset9 {
|
|
|
margin-left: 75%; /* 设置左边距为 75% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 83.33333333%，相当于 10/12 宽度 */
|
|
|
.layui-col-xs-offset10 {
|
|
|
margin-left: 83.33333333%; /* 设置左边距为 83.3333% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 91.66666667%，相当于 11/12 宽度 */
|
|
|
.layui-col-xs-offset11 {
|
|
|
margin-left: 91.66666667%; /* 设置左边距为 91.6667% */
|
|
|
}
|
|
|
|
|
|
/* 定义一个偏移量，左边距为 100%，相当于占据整行 */
|
|
|
.layui-col-xs-offset12 {
|
|
|
margin-left: 100%; /* 设置左边距为 100% */
|
|
|
}
|
|
|
|
|
|
/* 媒体查询，针对屏幕宽度小于等于 768px 的设备 */
|
|
|
@media screen and (max-width: 768px) {
|
|
|
/* 隐藏小屏幕设备下的元素 */
|
|
|
.layui-hide-xs {
|
|
|
display: none !important; /* 强制隐藏该元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示小屏幕设备下的块级元素 */
|
|
|
.layui-show-xs-block {
|
|
|
display: block !important; /* 强制显示为块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示小屏幕设备下的内联元素 */
|
|
|
.layui-show-xs-inline {
|
|
|
display: inline !important; /* 强制显示为内联元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示小屏幕设备下的内联块级元素 */
|
|
|
.layui-show-xs-inline-block {
|
|
|
display: inline-block !important; /* 强制显示为内联块级元素 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 媒体查询，针对屏幕宽度大于等于 768px 的设备 */
|
|
|
@media screen and (min-width: 768px) {
|
|
|
/* 设置大屏幕容器的宽度为 750px */
|
|
|
.layui-container {
|
|
|
width: 750px; /* 设置容器宽度为 750px */
|
|
|
}
|
|
|
|
|
|
/* 隐藏中等屏幕设备下的元素 */
|
|
|
.layui-hide-sm {
|
|
|
display: none !important; /* 强制隐藏该元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示中等屏幕设备下的块级元素 */
|
|
|
.layui-show-sm-block {
|
|
|
display: block !important; /* 强制显示为块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示中等屏幕设备下的内联元素 */
|
|
|
.layui-show-sm-inline {
|
|
|
display: inline !important; /* 强制显示为内联元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示中等屏幕设备下的内联块级元素 */
|
|
|
.layui-show-sm-inline-block {
|
|
|
display: inline-block !important; /* 强制显示为内联块级元素 */
|
|
|
}
|
|
|
}
|
|
|
/* 设置这些列类的浮动属性，使它们在水平方向上排列 */
|
|
|
.layui-col-sm1,
|
|
|
.layui-col-sm10,
|
|
|
.layui-col-sm11,
|
|
|
.layui-col-sm12,
|
|
|
.layui-col-sm2,
|
|
|
.layui-col-sm3,
|
|
|
.layui-col-sm4,
|
|
|
.layui-col-sm5,
|
|
|
.layui-col-sm6,
|
|
|
.layui-col-sm7,
|
|
|
.layui-col-sm8,
|
|
|
.layui-col-sm9 {
|
|
|
float: left; /* 使这些列元素浮动，排列在一行 */
|
|
|
}
|
|
|
|
|
|
/* 设置不同列宽度，采用 12 栅格系统，每个类表示占据屏幕宽度的不同百分比 */
|
|
|
.layui-col-sm1 {
|
|
|
width: 8.33333333%; /* 占据 1/12 的宽度，约 8.33% */
|
|
|
}
|
|
|
.layui-col-sm2 {
|
|
|
width: 16.66666667%; /* 占据 2/12 的宽度，约 16.67% */
|
|
|
}
|
|
|
.layui-col-sm3 {
|
|
|
width: 25%; /* 占据 3/12 的宽度，约 25% */
|
|
|
}
|
|
|
.layui-col-sm4 {
|
|
|
width: 33.33333333%; /* 占据 4/12 的宽度，约 33.33% */
|
|
|
}
|
|
|
.layui-col-sm5 {
|
|
|
width: 41.66666667%; /* 占据 5/12 的宽度，约 41.67% */
|
|
|
}
|
|
|
.layui-col-sm6 {
|
|
|
width: 50%; /* 占据 6/12 的宽度，约 50% */
|
|
|
}
|
|
|
.layui-col-sm7 {
|
|
|
width: 58.33333333%; /* 占据 7/12 的宽度，约 58.33% */
|
|
|
}
|
|
|
.layui-col-sm8 {
|
|
|
width: 66.66666667%; /* 占据 8/12 的宽度，约 66.67% */
|
|
|
}
|
|
|
.layui-col-sm9 {
|
|
|
width: 75%; /* 占据 9/12 的宽度，约 75% */
|
|
|
}
|
|
|
.layui-col-sm10 {
|
|
|
width: 83.33333333%; /* 占据 10/12 的宽度，约 83.33% */
|
|
|
}
|
|
|
.layui-col-sm11 {
|
|
|
width: 91.66666667%; /* 占据 11/12 的宽度，约 91.67% */
|
|
|
}
|
|
|
.layui-col-sm12 {
|
|
|
width: 100%; /* 占据整个屏幕宽度，100% */
|
|
|
}
|
|
|
|
|
|
/* 设置列的偏移量，用来调整列的位置（通过 margin-left 实现） */
|
|
|
.layui-col-sm-offset1 {
|
|
|
margin-left: 8.33333333%; /* 设置左边距为 1/12 宽度，约 8.33% */
|
|
|
}
|
|
|
.layui-col-sm-offset2 {
|
|
|
margin-left: 16.66666667%; /* 设置左边距为 2/12 宽度，约 16.67% */
|
|
|
}
|
|
|
.layui-col-sm-offset3 {
|
|
|
margin-left: 25%; /* 设置左边距为 3/12 宽度，约 25% */
|
|
|
}
|
|
|
.layui-col-sm-offset4 {
|
|
|
margin-left: 33.33333333%; /* 设置左边距为 4/12 宽度，约 33.33% */
|
|
|
}
|
|
|
.layui-col-sm-offset5 {
|
|
|
margin-left: 41.66666667%; /* 设置左边距为 5/12 宽度，约 41.67% */
|
|
|
}
|
|
|
.layui-col-sm-offset6 {
|
|
|
margin-left: 50%; /* 设置左边距为 6/12 宽度，约 50% */
|
|
|
}
|
|
|
.layui-col-sm-offset7 {
|
|
|
margin-left: 58.33333333%; /* 设置左边距为 7/12 宽度，约 58.33% */
|
|
|
}
|
|
|
.layui-col-sm-offset8 {
|
|
|
margin-left: 66.66666667%; /* 设置左边距为 8/12 宽度，约 66.67% */
|
|
|
}
|
|
|
.layui-col-sm-offset9 {
|
|
|
margin-left: 75%; /* 设置左边距为 9/12 宽度，约 75% */
|
|
|
}
|
|
|
.layui-col-sm-offset10 {
|
|
|
margin-left: 83.33333333%; /* 设置左边距为 10/12 宽度，约 83.33% */
|
|
|
}
|
|
|
.layui-col-sm-offset11 {
|
|
|
margin-left: 91.66666667%; /* 设置左边距为 11/12 宽度，约 91.67% */
|
|
|
}
|
|
|
.layui-col-sm-offset12 {
|
|
|
margin-left: 100%; /* 设置左边距为 12/12 宽度，约 100% */
|
|
|
}
|
|
|
|
|
|
/* 媒体查询：当屏幕宽度大于或等于 992px 时应用以下样式 */
|
|
|
@media screen and (min-width: 992px) {
|
|
|
/* 设置容器宽度为 970px */
|
|
|
.layui-container {
|
|
|
width: 970px; /* 容器宽度为 970px */
|
|
|
}
|
|
|
|
|
|
/* 隐藏大屏幕设备下的元素 */
|
|
|
.layui-hide-md {
|
|
|
display: none !important; /* 强制隐藏该元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示大屏幕设备下的块级元素 */
|
|
|
.layui-show-md-block {
|
|
|
display: block !important; /* 强制显示为块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示大屏幕设备下的内联元素 */
|
|
|
.layui-show-md-inline {
|
|
|
display: inline !important; /* 强制显示为内联元素 */
|
|
|
}
|
|
|
|
|
|
/* 显示大屏幕设备下的内联块级元素 */
|
|
|
.layui-show-md-inline-block {
|
|
|
display: inline-block !important; /* 强制显示为内联块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置不同列宽度，采用 12 栅格系统，每个类表示占据屏幕宽度的不同百分比 */
|
|
|
.layui-col-md1,
|
|
|
.layui-col-md10,
|
|
|
.layui-col-md11,
|
|
|
.layui-col-md12,
|
|
|
.layui-col-md2,
|
|
|
.layui-col-md3,
|
|
|
.layui-col-md4,
|
|
|
.layui-col-md5,
|
|
|
.layui-col-md6,
|
|
|
.layui-col-md7,
|
|
|
.layui-col-md8,
|
|
|
.layui-col-md9 {
|
|
|
float: left; /* 使这些列元素浮动，排列在一行 */
|
|
|
}
|
|
|
|
|
|
/* 设置每列的宽度，采用 12 栅格系统 */
|
|
|
.layui-col-md1 {
|
|
|
width: 8.33333333%; /* 占据 1/12 的宽度，约 8.33% */
|
|
|
}
|
|
|
}
|
|
|
/* 定义了 .layui-col-md2 类，宽度为 16.67%，即占据 12 栅格系统中的 2 格 */
|
|
|
.layui-col-md2 {
|
|
|
width: 16.66666667%; /* 占据 2/12 的宽度，即 16.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md3 类，宽度为 25%，即占据 12 栅格系统中的 3 格 */
|
|
|
.layui-col-md3 {
|
|
|
width: 25%; /* 占据 3/12 的宽度，即 25% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md4 类，宽度为 33.33%，即占据 12 栅格系统中的 4 格 */
|
|
|
.layui-col-md4 {
|
|
|
width: 33.33333333%; /* 占据 4/12 的宽度，即 33.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md5 类，宽度为 41.67%，即占据 12 栅格系统中的 5 格 */
|
|
|
.layui-col-md5 {
|
|
|
width: 41.66666667%; /* 占据 5/12 的宽度，即 41.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md6 类，宽度为 50%，即占据 12 栅格系统中的 6 格 */
|
|
|
.layui-col-md6 {
|
|
|
width: 50%; /* 占据 6/12 的宽度，即 50% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md7 类，宽度为 58.33%，即占据 12 栅格系统中的 7 格 */
|
|
|
.layui-col-md7 {
|
|
|
width: 58.33333333%; /* 占据 7/12 的宽度，即 58.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md8 类，宽度为 66.67%，即占据 12 栅格系统中的 8 格 */
|
|
|
.layui-col-md8 {
|
|
|
width: 66.66666667%; /* 占据 8/12 的宽度，即 66.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md9 类，宽度为 75%，即占据 12 栅格系统中的 9 格 */
|
|
|
.layui-col-md9 {
|
|
|
width: 75%; /* 占据 9/12 的宽度，即 75% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md10 类，宽度为 83.33%，即占据 12 栅格系统中的 10 格 */
|
|
|
.layui-col-md10 {
|
|
|
width: 83.33333333%; /* 占据 10/12 的宽度，即 83.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md11 类，宽度为 91.67%，即占据 12 栅格系统中的 11 格 */
|
|
|
.layui-col-md11 {
|
|
|
width: 91.66666667%; /* 占据 11/12 的宽度，即 91.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md12 类，宽度为 100%，即占据 12 栅格系统中的所有 12 格 */
|
|
|
.layui-col-md12 {
|
|
|
width: 100%; /* 占据 12/12 的宽度，即 100% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset1 类，将该列向右偏移 8.33% */
|
|
|
.layui-col-md-offset1 {
|
|
|
margin-left: 8.33333333%; /* 左偏移 1/12 的宽度，即 8.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset2 类，将该列向右偏移 16.67% */
|
|
|
.layui-col-md-offset2 {
|
|
|
margin-left: 16.66666667%; /* 左偏移 2/12 的宽度，即 16.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset3 类，将该列向右偏移 25% */
|
|
|
.layui-col-md-offset3 {
|
|
|
margin-left: 25%; /* 左偏移 3/12 的宽度，即 25% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset4 类，将该列向右偏移 33.33% */
|
|
|
.layui-col-md-offset4 {
|
|
|
margin-left: 33.33333333%; /* 左偏移 4/12 的宽度，即 33.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset5 类，将该列向右偏移 41.67% */
|
|
|
.layui-col-md-offset5 {
|
|
|
margin-left: 41.66666667%; /* 左偏移 5/12 的宽度，即 41.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset6 类，将该列向右偏移 50% */
|
|
|
.layui-col-md-offset6 {
|
|
|
margin-left: 50%; /* 左偏移 6/12 的宽度，即 50% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset7 类，将该列向右偏移 58.33% */
|
|
|
.layui-col-md-offset7 {
|
|
|
margin-left: 58.33333333%; /* 左偏移 7/12 的宽度，即 58.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset8 类，将该列向右偏移 66.67% */
|
|
|
.layui-col-md-offset8 {
|
|
|
margin-left: 66.66666667%; /* 左偏移 8/12 的宽度，即 66.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset9 类，将该列向右偏移 75% */
|
|
|
.layui-col-md-offset9 {
|
|
|
margin-left: 75%; /* 左偏移 9/12 的宽度，即 75% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset10 类，将该列向右偏移 83.33% */
|
|
|
.layui-col-md-offset10 {
|
|
|
margin-left: 83.33333333%; /* 左偏移 10/12 的宽度，即 83.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset11 类，将该列向右偏移 91.67% */
|
|
|
.layui-col-md-offset11 {
|
|
|
margin-left: 91.66666667%; /* 左偏移 11/12 的宽度，即 91.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-md-offset12 类，将该列向右偏移 100% */
|
|
|
.layui-col-md-offset12 {
|
|
|
margin-left: 100%; /* 左偏移 12/12 的宽度，即 100% */
|
|
|
}
|
|
|
|
|
|
/* 媒体查询: 当屏幕宽度大于或等于 1200px 时，应用以下样式 */
|
|
|
@media screen and (min-width: 1200px) {
|
|
|
/* 设置 .layui-container 的宽度为 1170px */
|
|
|
.layui-container {
|
|
|
width: 1170px; /* 容器宽度设置为 1170px */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-hide-lg 类，在大屏设备下该元素将被隐藏 */
|
|
|
.layui-hide-lg {
|
|
|
display: none !important; /* 强制隐藏该元素 */
|
|
|
}
|
|
|
}
|
|
|
/* 定义了 .layui-show-lg-block 类，强制设置 display 为 block，在大屏幕上显示为块级元素 */
|
|
|
.layui-show-lg-block {
|
|
|
display: block !important; /* 强制显示为块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-show-lg-inline 类，强制设置 display 为 inline，在大屏幕上显示为内联元素 */
|
|
|
.layui-show-lg-inline {
|
|
|
display: inline !important; /* 强制显示为内联元素 */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-show-lg-inline-block 类，强制设置 display 为 inline-block，在大屏幕上显示为内联块元素 */
|
|
|
.layui-show-lg-inline-block {
|
|
|
display: inline-block !important; /* 强制显示为内联块元素 */
|
|
|
}
|
|
|
|
|
|
/* 栅格系统类：以下所有类都使用 float: left 实现列的排列 */
|
|
|
.layui-col-lg1, .layui-col-lg10, .layui-col-lg11, .layui-col-lg12,
|
|
|
.layui-col-lg2, .layui-col-lg3, .layui-col-lg4, .layui-col-lg5,
|
|
|
.layui-col-lg6, .layui-col-lg7, .layui-col-lg8, .layui-col-lg9 {
|
|
|
float: left; /* 使用浮动布局，使得列元素并排显示 */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg1 类，宽度为 8.33%，即占据 12 栅格系统中的 1 格 */
|
|
|
.layui-col-lg1 {
|
|
|
width: 8.33333333%; /* 占据 1/12 的宽度，即 8.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg2 类，宽度为 16.67%，即占据 12 栅格系统中的 2 格 */
|
|
|
.layui-col-lg2 {
|
|
|
width: 16.66666667%; /* 占据 2/12 的宽度，即 16.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg3 类，宽度为 25%，即占据 12 栅格系统中的 3 格 */
|
|
|
.layui-col-lg3 {
|
|
|
width: 25%; /* 占据 3/12 的宽度，即 25% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg4 类，宽度为 33.33%，即占据 12 栅格系统中的 4 格 */
|
|
|
.layui-col-lg4 {
|
|
|
width: 33.33333333%; /* 占据 4/12 的宽度，即 33.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg5 类，宽度为 41.67%，即占据 12 栅格系统中的 5 格 */
|
|
|
.layui-col-lg5 {
|
|
|
width: 41.66666667%; /* 占据 5/12 的宽度，即 41.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg6 类，宽度为 50%，即占据 12 栅格系统中的 6 格 */
|
|
|
.layui-col-lg6 {
|
|
|
width: 50%; /* 占据 6/12 的宽度，即 50% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg7 类，宽度为 58.33%，即占据 12 栅格系统中的 7 格 */
|
|
|
.layui-col-lg7 {
|
|
|
width: 58.33333333%; /* 占据 7/12 的宽度，即 58.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg8 类，宽度为 66.67%，即占据 12 栅格系统中的 8 格 */
|
|
|
.layui-col-lg8 {
|
|
|
width: 66.66666667%; /* 占据 8/12 的宽度，即 66.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg9 类，宽度为 75%，即占据 12 栅格系统中的 9 格 */
|
|
|
.layui-col-lg9 {
|
|
|
width: 75%; /* 占据 9/12 的宽度，即 75% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg10 类，宽度为 83.33%，即占据 12 栅格系统中的 10 格 */
|
|
|
.layui-col-lg10 {
|
|
|
width: 83.33333333%; /* 占据 10/12 的宽度，即 83.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg11 类，宽度为 91.67%，即占据 12 栅格系统中的 11 格 */
|
|
|
.layui-col-lg11 {
|
|
|
width: 91.66666667%; /* 占据 11/12 的宽度，即 91.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg12 类，宽度为 100%，即占据 12 栅格系统中的所有 12 格 */
|
|
|
.layui-col-lg12 {
|
|
|
width: 100%; /* 占据 12/12 的宽度，即 100% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset1 类，将该列向右偏移 8.33% */
|
|
|
.layui-col-lg-offset1 {
|
|
|
margin-left: 8.33333333%; /* 左偏移 1/12 的宽度，即 8.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset2 类，将该列向右偏移 16.67% */
|
|
|
.layui-col-lg-offset2 {
|
|
|
margin-left: 16.66666667%; /* 左偏移 2/12 的宽度，即 16.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset3 类，将该列向右偏移 25% */
|
|
|
.layui-col-lg-offset3 {
|
|
|
margin-left: 25%; /* 左偏移 3/12 的宽度，即 25% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset4 类，将该列向右偏移 33.33% */
|
|
|
.layui-col-lg-offset4 {
|
|
|
margin-left: 33.33333333%; /* 左偏移 4/12 的宽度，即 33.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset5 类，将该列向右偏移 41.67% */
|
|
|
.layui-col-lg-offset5 {
|
|
|
margin-left: 41.66666667%; /* 左偏移 5/12 的宽度，即 41.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset6 类，将该列向右偏移 50% */
|
|
|
.layui-col-lg-offset6 {
|
|
|
margin-left: 50%; /* 左偏移 6/12 的宽度，即 50% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset7 类，将该列向右偏移 58.33% */
|
|
|
.layui-col-lg-offset7 {
|
|
|
margin-left: 58.33333333%; /* 左偏移 7/12 的宽度，即 58.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset8 类，将该列向右偏移 66.67% */
|
|
|
.layui-col-lg-offset8 {
|
|
|
margin-left: 66.66666667%; /* 左偏移 8/12 的宽度，即 66.67% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset9 类，将该列向右偏移 75% */
|
|
|
.layui-col-lg-offset9 {
|
|
|
margin-left: 75%; /* 左偏移 9/12 的宽度，即 75% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset10 类，将该列向右偏移 83.33% */
|
|
|
.layui-col-lg-offset10 {
|
|
|
margin-left: 83.33333333%; /* 左偏移 10/12 的宽度，即 83.33% */
|
|
|
}
|
|
|
|
|
|
/* 定义了 .layui-col-lg-offset11 类，将该列向右偏移 91.67% */
|
|
|
.layui-col-lg-offset11 {
|
|
|
margin-left: 91.66666667%; /* 左偏移 11/12 的宽度，即 91.67% */
|
|
|
}
|
|
|
/* 设置 .layui-col-lg-offset12 类的左外边距为 100% */
|
|
|
.layui-col-lg-offset12 {
|
|
|
margin-left: 100%;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space1 类的外边距为 -0.5px */
|
|
|
.layui-col-space1 {
|
|
|
margin: -0.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space1 下所有子元素的内边距为 0.5px */
|
|
|
.layui-col-space1 > * {
|
|
|
padding: 0.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space3 类的外边距为 -1.5px */
|
|
|
.layui-col-space3 {
|
|
|
margin: -1.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space3 下所有子元素的内边距为 1.5px */
|
|
|
.layui-col-space3 > * {
|
|
|
padding: 1.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space5 类的外边距为 -2.5px */
|
|
|
.layui-col-space5 {
|
|
|
margin: -2.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space5 下所有子元素的内边距为 2.5px */
|
|
|
.layui-col-space5 > * {
|
|
|
padding: 2.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space8 类的外边距为 -3.5px */
|
|
|
.layui-col-space8 {
|
|
|
margin: -3.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space8 下所有子元素的内边距为 3.5px */
|
|
|
.layui-col-space8 > * {
|
|
|
padding: 3.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space10 类的外边距为 -5px */
|
|
|
.layui-col-space10 {
|
|
|
margin: -5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space10 下所有子元素的内边距为 5px */
|
|
|
.layui-col-space10 > * {
|
|
|
padding: 5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space12 类的外边距为 -6px */
|
|
|
.layui-col-space12 {
|
|
|
margin: -6px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space12 下所有子元素的内边距为 6px */
|
|
|
.layui-col-space12 > * {
|
|
|
padding: 6px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space15 类的外边距为 -7.5px */
|
|
|
.layui-col-space15 {
|
|
|
margin: -7.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space15 下所有子元素的内边距为 7.5px */
|
|
|
.layui-col-space15 > * {
|
|
|
padding: 7.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space18 类的外边距为 -9px */
|
|
|
.layui-col-space18 {
|
|
|
margin: -9px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space18 下所有子元素的内边距为 9px */
|
|
|
.layui-col-space18 > * {
|
|
|
padding: 9px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space20 类的外边距为 -10px */
|
|
|
.layui-col-space20 {
|
|
|
margin: -10px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space20 下所有子元素的内边距为 10px */
|
|
|
.layui-col-space20 > * {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space22 类的外边距为 -11px */
|
|
|
.layui-col-space22 {
|
|
|
margin: -11px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space22 下所有子元素的内边距为 11px */
|
|
|
.layui-col-space22 > * {
|
|
|
padding: 11px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space25 类的外边距为 -12.5px */
|
|
|
.layui-col-space25 {
|
|
|
margin: -12.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space25 下所有子元素的内边距为 12.5px */
|
|
|
.layui-col-space25 > * {
|
|
|
padding: 12.5px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space30 类的外边距为 -15px */
|
|
|
.layui-col-space30 {
|
|
|
margin: -15px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-col-space30 下所有子元素的内边距为 15px */
|
|
|
.layui-col-space30 > * {
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button 元素的轮廓为 0（去除默认轮廓） */
|
|
|
.layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button {
|
|
|
outline: 0; /* 去除轮廓 */
|
|
|
-webkit-appearance: none; /* 禁用Webkit默认样式 */
|
|
|
transition: all .3s; /* 所有属性的过渡时间为0.3秒 */
|
|
|
-webkit-transition: all .3s; /* 兼容Webkit浏览器 */
|
|
|
box-sizing: border-box; /* 使用border-box模型计算宽高 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-elem-quote 元素的样式 */
|
|
|
.layui-elem-quote {
|
|
|
margin-bottom: 10px; /* 底部外边距10px */
|
|
|
padding: 15px; /* 内边距15px */
|
|
|
line-height: 22px; /* 行高22px */
|
|
|
border-left: 5px solid #009688; /* 左边框5px，颜色为#009688 */
|
|
|
border-radius: 0 2px 2px 0; /* 设置圆角，右上和右下为2px */
|
|
|
background-color: #f2f2f2; /* 背景色为#f2f2f2 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-quote-nm 元素的样式 */
|
|
|
.layui-quote-nm {
|
|
|
border-style: solid; /* 边框为实线 */
|
|
|
border-width: 1px 1px 1px 5px; /* 边框宽度分别为1px，1px，1px，5px */
|
|
|
background: 0 0; /* 背景设置为透明 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-elem-field 元素的样式 */
|
|
|
.layui-elem-field {
|
|
|
margin-bottom: 10px; /* 底部外边距10px */
|
|
|
padding: 0; /* 内边距为0 */
|
|
|
border-width: 1px; /* 边框宽度为1px */
|
|
|
border-style: solid; /* 边框为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-elem-field legend 元素的样式 */
|
|
|
.layui-elem-field legend {
|
|
|
margin-left: 20px; /* 左外边距20px */
|
|
|
padding: 0 10px; /* 上下内边距为0，左右内边距为10px */
|
|
|
font-size: 20px; /* 字体大小为20px */
|
|
|
font-weight: 300; /* 字体粗细为300 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-field-title 元素的样式 */
|
|
|
.layui-field-title {
|
|
|
margin: 10px 0 20px; /* 上外边距为10px，下外边距为20px，左右外边距为0 */
|
|
|
border-width: 1px 0 0; /* 上边框为1px，左右下边框为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-field-box 元素的样式 */
|
|
|
.layui-field-box {
|
|
|
padding: 10px 15px; /* 内边距上下10px，左右15px */
|
|
|
}
|
|
|
/* 设置 .layui-field-title .layui-field-box 的内边距：上下10px，左右0px */
|
|
|
.layui-field-title .layui-field-box {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-progress 的基本样式：相对定位、高度6px、圆角、背景色 */
|
|
|
.layui-progress {
|
|
|
position: relative; /* 相对定位 */
|
|
|
height: 6px; /* 高度设置为6px */
|
|
|
border-radius: 20px; /* 设置圆角为20px */
|
|
|
background-color: #e2e2e2; /* 背景色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-progress-bar 的样式：绝对定位、宽度为0（进度条初始宽度），高度6px、圆角 */
|
|
|
.layui-progress-bar {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 0; /* 左侧位置为0 */
|
|
|
top: 0; /* 顶部位置为0 */
|
|
|
width: 0; /* 初始宽度为0 */
|
|
|
max-width: 100%; /* 最大宽度为100% */
|
|
|
height: 6px; /* 高度设置为6px */
|
|
|
border-radius: 20px; /* 设置圆角为20px */
|
|
|
text-align: right; /* 文本对齐方式为右对齐 */
|
|
|
background-color: #5FB878; /* 进度条的背景色为绿色 */
|
|
|
transition: all .3s; /* 所有属性的过渡效果，时间为0.3秒 */
|
|
|
-webkit-transition: all .3s; /* 兼容webkit浏览器 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-progress-big 的样式：高度为18px，行高18px */
|
|
|
.layui-progress-big, .layui-progress-big .layui-progress-bar {
|
|
|
height: 18px; /* 高度设置为18px */
|
|
|
line-height: 18px; /* 行高设置为18px，使得内容垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-progress-text 的样式：相对定位、向上移动20px，行高18px，字体大小12px，颜色为灰色 */
|
|
|
.layui-progress-text {
|
|
|
position: relative; /* 相对定位 */
|
|
|
top: -20px; /* 向上移动20px */
|
|
|
line-height: 18px; /* 行高18px */
|
|
|
font-size: 12px; /* 字体大小为12px */
|
|
|
color: #666; /* 文字颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-progress-big 中的 .layui-progress-text 的样式：静态定位，左右内边距10px，颜色为白色 */
|
|
|
.layui-progress-big .layui-progress-text {
|
|
|
position: static; /* 定位方式改为静态 */
|
|
|
padding: 0 10px; /* 上下内边距为0，左右内边距为10px */
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-collapse 的样式：边框宽度1px，边框为实线，圆角为2px */
|
|
|
.layui-collapse {
|
|
|
border-width: 1px; /* 边框宽度为1px */
|
|
|
border-style: solid; /* 边框样式为实线 */
|
|
|
border-radius: 2px; /* 圆角为2px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-colla-content 和 .layui-colla-item 的样式：顶部边框宽度为1px，样式为实线 */
|
|
|
.layui-colla-content, .layui-colla-item {
|
|
|
border-top-width: 1px; /* 顶部边框宽度为1px */
|
|
|
border-top-style: solid; /* 顶部边框为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-colla-item 的第一个元素不显示顶部边框 */
|
|
|
.layui-colla-item:first-child {
|
|
|
border-top: none; /* 移除第一个元素的顶部边框 */
|
|
|
}
|
|
|
/* 设置折叠面板标题的样式：相对定位，高度42px，行高42px，内边距设置，文字颜色、背景色，光标样式，字体大小，溢出隐藏 */
|
|
|
.layui-colla-title {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
height: 42px; /* 设置高度为42px */
|
|
|
line-height: 42px; /* 设置行高为42px，使文字垂直居中 */
|
|
|
padding: 0 15px 0 35px; /* 设置左右内边距，左侧内边距35px */
|
|
|
color: #333; /* 文字颜色为深灰色 */
|
|
|
background-color: #f2f2f2; /* 背景色为浅灰色 */
|
|
|
cursor: pointer; /* 光标样式为手型 */
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
|
}
|
|
|
|
|
|
/* 设置折叠面板内容的样式：隐藏状态、内边距、行高、文字颜色 */
|
|
|
.layui-colla-content {
|
|
|
display: none; /* 默认隐藏折叠面板的内容 */
|
|
|
padding: 10px 15px; /* 设置内边距：上下10px，左右15px */
|
|
|
line-height: 22px; /* 设置行高为22px */
|
|
|
color: #666; /* 文字颜色为中灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置折叠面板图标的样式：绝对定位，图标位置 */
|
|
|
.layui-colla-icon {
|
|
|
position: absolute; /* 设置绝对定位 */
|
|
|
left: 15px; /* 设置图标距离左侧15px */
|
|
|
top: 0; /* 设置图标距离顶部0px */
|
|
|
font-size: 14px; /* 图标字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片的样式：下边距为15px，圆角，背景色，阴影效果 */
|
|
|
.layui-card {
|
|
|
margin-bottom: 15px; /* 设置卡片底部外边距为15px */
|
|
|
border-radius: 2px; /* 设置圆角为2px */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); /* 设置轻微的阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 去除卡片最后一个元素的底部外边距 */
|
|
|
.layui-card:last-child {
|
|
|
margin-bottom: 0; /* 去除最后一个卡片的底部外边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片头部的样式：相对定位，高度42px，行高42px，内边距，边框颜色，圆角，字体大小 */
|
|
|
.layui-card-header {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
height: 42px; /* 设置高度为42px */
|
|
|
line-height: 42px; /* 设置行高为42px，文字垂直居中 */
|
|
|
padding: 0 15px; /* 设置左右内边距为15px */
|
|
|
border-bottom: 1px solid #f6f6f6; /* 设置底部边框为1px实线，颜色为浅灰色 */
|
|
|
color: #333; /* 设置文字颜色为深灰色 */
|
|
|
border-radius: 2px 2px 0 0; /* 设置卡片头部圆角：左上和右上角为2px，其他角不圆角 */
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 设置一些背景颜色的类，颜色为白色文字 */
|
|
|
.layui-bg-black,
|
|
|
.layui-bg-blue,
|
|
|
.layui-bg-cyan,
|
|
|
.layui-bg-green,
|
|
|
.layui-bg-orange,
|
|
|
.layui-bg-red {
|
|
|
color: #fff !important; /* 设置文字颜色为白色，且通过!important确保优先级 */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片主体部分的样式：相对定位，内边距、行高 */
|
|
|
.layui-card-body {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
padding: 10px 15px; /* 设置内边距：上下10px，左右15px */
|
|
|
line-height: 24px; /* 设置行高为24px */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片主体部分的内边距为15px */
|
|
|
.layui-card-body[pad15] {
|
|
|
padding: 15px; /* 设置内边距为15px */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片主体部分的内边距为20px */
|
|
|
.layui-card-body[pad20] {
|
|
|
padding: 20px; /* 设置内边距为20px */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片主体部分内的表格的外边距 */
|
|
|
.layui-card-body .layui-table {
|
|
|
margin: 5px 0; /* 设置表格上下外边距为5px */
|
|
|
}
|
|
|
|
|
|
/* 设置卡片内部标签页的外边距 */
|
|
|
.layui-card .layui-tab {
|
|
|
margin: 0; /* 去除标签页的外边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置面板窗口的样式：相对定位，内边距，顶部边框样式，背景色 */
|
|
|
.layui-panel-window {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
padding: 15px; /* 设置内边距为15px */
|
|
|
border-radius: 0; /* 设置无圆角 */
|
|
|
border-top: 5px solid #E6E6E6; /* 设置顶部边框为5px实线，颜色为灰色 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置全屏遮罩层的样式：固定定位，覆盖整个屏幕，背景透明，z-index非常高 */
|
|
|
.layui-auxiliar-moving {
|
|
|
position: fixed; /* 设置固定定位 */
|
|
|
left: 0; /* 设置左侧位置为0 */
|
|
|
right: 0; /* 设置右侧位置为0 */
|
|
|
top: 0; /* 设置顶部位置为0 */
|
|
|
bottom: 0; /* 设置底部位置为0 */
|
|
|
width: 100%; /* 宽度设置为100% */
|
|
|
height: 100%; /* 高度设置为100% */
|
|
|
background: 0 0; /* 背景设置为透明 */
|
|
|
z-index: 9999999999; /* 设置非常高的z-index，确保覆盖在所有元素之上 */
|
|
|
}
|
|
|
/* 设置以下元素的定位方式为相对定位 */
|
|
|
.layui-form-label,
|
|
|
.layui-form-mid,
|
|
|
.layui-form-select,
|
|
|
.layui-input-block,
|
|
|
.layui-input-inline,
|
|
|
.layui-textarea {
|
|
|
position: relative; /* 设置元素的定位方式为相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 设置红色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-red {
|
|
|
background-color: #FF5722 !important; /* 设置背景颜色为红色 */
|
|
|
}
|
|
|
|
|
|
/* 设置橙色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-orange {
|
|
|
background-color: #FFB800 !important; /* 设置背景颜色为橙色 */
|
|
|
}
|
|
|
|
|
|
/* 设置绿色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-green {
|
|
|
background-color: #009688 !important; /* 设置背景颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置青色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-cyan {
|
|
|
background-color: #2F4056 !important; /* 设置背景颜色为青色 */
|
|
|
}
|
|
|
|
|
|
/* 设置蓝色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-blue {
|
|
|
background-color: #1E9FFF !important; /* 设置背景颜色为蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置黑色背景色，并通过!important确保优先级 */
|
|
|
.layui-bg-black {
|
|
|
background-color: #393D49 !important; /* 设置背景颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置灰色背景色，并通过!important确保优先级，同时修改文字颜色 */
|
|
|
.layui-bg-gray {
|
|
|
background-color: #eee !important; /* 设置背景颜色为浅灰色 */
|
|
|
color: #666 !important; /* 设置文字颜色为中灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置边框颜色为灰色 #e6e6e6 */
|
|
|
.layui-badge-rim,
|
|
|
.layui-colla-content,
|
|
|
.layui-colla-item,
|
|
|
.layui-collapse,
|
|
|
.layui-elem-field,
|
|
|
.layui-form-pane .layui-form-item[pane],
|
|
|
.layui-form-pane .layui-form-label,
|
|
|
.layui-input,
|
|
|
.layui-layedit,
|
|
|
.layui-layedit-tool,
|
|
|
.layui-quote-nm,
|
|
|
.layui-select,
|
|
|
.layui-tab-bar,
|
|
|
.layui-tab-card,
|
|
|
.layui-tab-title,
|
|
|
.layui-tab-title .layui-this:after,
|
|
|
.layui-textarea {
|
|
|
border-color: #e6e6e6; /* 设置元素的边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置时间轴的项和hr元素的背景颜色为灰色 #e6e6e6 */
|
|
|
.layui-timeline-item:before,
|
|
|
hr {
|
|
|
background-color: #e6e6e6; /* 设置时间轴项和hr元素的背景色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置文本的行高、字体大小和颜色 */
|
|
|
.layui-text {
|
|
|
line-height: 22px; /* 设置行高为22px */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
color: #666; /* 设置文字颜色为中灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置文本中的标题元素的字体粗细和颜色 */
|
|
|
.layui-text h1,
|
|
|
.layui-text h2,
|
|
|
.layui-text h3 {
|
|
|
font-weight: 500; /* 设置字体粗细为500 */
|
|
|
color: #333; /* 设置标题文字颜色为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置h1标题的字体大小 */
|
|
|
.layui-text h1 {
|
|
|
font-size: 30px; /* 设置h1的字体大小为30px */
|
|
|
}
|
|
|
|
|
|
/* 设置h2标题的字体大小 */
|
|
|
.layui-text h2 {
|
|
|
font-size: 24px; /* 设置h2的字体大小为24px */
|
|
|
}
|
|
|
|
|
|
/* 设置h3标题的字体大小 */
|
|
|
.layui-text h3 {
|
|
|
font-size: 18px; /* 设置h3的字体大小为18px */
|
|
|
}
|
|
|
|
|
|
/* 设置链接的颜色为蓝色，并确保按钮类不受影响 */
|
|
|
.layui-text a:not(.layui-btn) {
|
|
|
color: #01AAED; /* 设置链接颜色为蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置链接在悬停时的样式：下划线 */
|
|
|
.layui-text a:not(.layui-btn):hover {
|
|
|
text-decoration: underline; /* 鼠标悬停时，链接文字加下划线 */
|
|
|
}
|
|
|
|
|
|
/* 设置文本中的无序列表的样式：内边距和列表项的样式 */
|
|
|
.layui-text ul {
|
|
|
padding: 5px 0 5px 15px; /* 设置无序列表的上下内边距为5px，左侧内边距为15px */
|
|
|
}
|
|
|
|
|
|
/* 设置无序列表项的样式：上边距为5px，并使用圆点符号 */
|
|
|
.layui-text ul li {
|
|
|
margin-top: 5px; /* 设置无序列表项的上边距为5px */
|
|
|
list-style-type: disc; /* 设置列表项的符号为圆点 */
|
|
|
}
|
|
|
/* 设置 em 标签和 layui-word-aux 类的字体颜色为 #999，内边距左右各 5px，并通过 !important 确保优先级 */
|
|
|
.layui-text em,
|
|
|
.layui-word-aux {
|
|
|
color: #999 !important; /* 设置字体颜色为灰色 */
|
|
|
padding: 0 5px !important; /* 设置左右内边距为 5px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮的基础样式 */
|
|
|
.layui-btn {
|
|
|
display: inline-block; /* 设置按钮为行内块级元素，允许设置宽高 */
|
|
|
height: 38px; /* 设置按钮高度为 38px */
|
|
|
line-height: 38px; /* 设置按钮文本垂直居中 */
|
|
|
padding: 0 18px; /* 设置按钮的左右内边距为 18px */
|
|
|
background-color: #009688; /* 设置按钮背景色为绿色 */
|
|
|
color: #fff; /* 设置按钮文本颜色为白色 */
|
|
|
white-space: nowrap; /* 防止按钮文本换行 */
|
|
|
text-align: center; /* 设置文本居中对齐 */
|
|
|
font-size: 14px; /* 设置按钮字体大小为 14px */
|
|
|
border: none; /* 去掉按钮的边框 */
|
|
|
border-radius: 2px; /* 设置按钮的圆角为 2px */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为可点击的指针形状 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮在鼠标悬停时的样式 */
|
|
|
.layui-btn:hover {
|
|
|
opacity: .8; /* 鼠标悬停时按钮透明度为 0.8 */
|
|
|
filter: alpha(opacity=80); /* 兼容 IE 的透明度设置 */
|
|
|
color: #fff; /* 鼠标悬停时按钮文本颜色仍为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮在点击时的样式 */
|
|
|
.layui-btn:active {
|
|
|
opacity: 1; /* 鼠标点击时按钮透明度恢复为 1 */
|
|
|
filter: alpha(opacity=100); /* 兼容 IE 的透明度恢复 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮之间的间距 */
|
|
|
.layui-btn + .layui-btn {
|
|
|
margin-left: 10px; /* 按钮之间左侧间距为 10px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 容器的样式 */
|
|
|
.layui-btn-container {
|
|
|
font-size: 0; /* 设置按钮容器字体大小为 0，清除字体的空隙 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 容器内每个按钮的右侧间距为 10px，底部间距为 10px */
|
|
|
.layui-btn-container .layui-btn {
|
|
|
margin-right: 10px; /* 按钮右侧间距为 10px */
|
|
|
margin-bottom: 10px; /* 按钮底部间距为 10px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 容器内相邻按钮之间的左侧间距为 0 */
|
|
|
.layui-btn-container .layui-btn + .layui-btn {
|
|
|
margin-left: 0; /* 相邻按钮之间左侧间距清除 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-table 表格中的按钮容器内按钮的底部间距为 9px */
|
|
|
.layui-table .layui-btn-container .layui-btn {
|
|
|
margin-bottom: 9px; /* 按钮底部间距为 9px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮的圆形样式 */
|
|
|
.layui-btn-radius {
|
|
|
border-radius: 100px; /* 设置按钮为圆形 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn 按钮内的图标样式，右侧间距 3px，字体大小为 18px，垂直对齐底部 */
|
|
|
.layui-btn .layui-icon {
|
|
|
margin-right: 3px; /* 图标右侧间距为 3px */
|
|
|
font-size: 18px; /* 图标字体大小为 18px */
|
|
|
vertical-align: bottom; /* 设置图标垂直对齐底部 */
|
|
|
vertical-align: middle\9; /* 兼容 IE6-8 的垂直对齐方式 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-primary 按钮的样式：白色背景、灰色边框和文字颜色 */
|
|
|
.layui-btn-primary {
|
|
|
border: 1px solid #C9C9C9; /* 设置边框为灰色 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
color: #555; /* 设置文字颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-primary 按钮在鼠标悬停时的样式 */
|
|
|
.layui-btn-primary:hover {
|
|
|
border-color: #009688; /* 鼠标悬停时边框颜色为绿色 */
|
|
|
color: #333; /* 鼠标悬停时文字颜色为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-normal 按钮的背景颜色为蓝色 */
|
|
|
.layui-btn-normal {
|
|
|
background-color: #1E9FFF; /* 设置按钮背景色为蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-warm 按钮的背景颜色为橙色 */
|
|
|
.layui-btn-warm {
|
|
|
background-color: #FFB800; /* 设置按钮背景色为橙色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-danger 按钮的背景颜色为红色 */
|
|
|
.layui-btn-danger {
|
|
|
background-color: #FF5722; /* 设置按钮背景色为红色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-disabled 按钮的禁用样式，去掉边框，背景色为浅灰色，文本颜色为灰色 */
|
|
|
.layui-btn-disabled,
|
|
|
.layui-btn-disabled:active,
|
|
|
.layui-btn-disabled:hover {
|
|
|
border: 1px solid #e6e6e6; /* 设置禁用按钮的边框为浅灰色 */
|
|
|
background-color: #FBFBFB; /* 设置禁用按钮的背景色为非常浅的灰色 */
|
|
|
color: #C9C9C9; /* 设置禁用按钮的文字颜色为灰色 */
|
|
|
cursor: not-allowed; /* 设置鼠标指针为不允许点击的状态 */
|
|
|
opacity: 1; /* 禁用状态下的透明度为 1，保持不透明 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-lg 按钮的大号样式，增大字体和内边距 */
|
|
|
.layui-btn-lg {
|
|
|
height: 44px; /* 设置按钮高度为 44px */
|
|
|
line-height: 44px; /* 设置文本垂直居中 */
|
|
|
padding: 0 25px; /* 设置按钮左右内边距为 25px */
|
|
|
font-size: 16px; /* 设置字体大小为 16px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-sm 按钮的小号样式，增小字体和内边距 */
|
|
|
.layui-btn-sm {
|
|
|
height: 30px; /* 设置按钮高度为 30px */
|
|
|
line-height: 30px; /* 设置文本垂直居中 */
|
|
|
padding: 0 10px; /* 设置按钮左右内边距为 10px */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-sm 小号按钮内图标的大小 */
|
|
|
.layui-btn-sm i {
|
|
|
font-size: 16px !important; /* 设置小号按钮内图标的字体大小为 16px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-xs 按钮的超小号样式，字体和内边距都更小 */
|
|
|
.layui-btn-xs {
|
|
|
height: 22px; /* 设置按钮高度为 22px */
|
|
|
line-height: 22px; /* 设置文本垂直居中 */
|
|
|
padding: 0 5px; /* 设置按钮左右内边距为 5px */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-btn-xs 超小号按钮内图标的字体大小 */
|
|
|
.layui-btn-xs i {
|
|
|
font-size: 14px !important; /* 设置超小号按钮内图标的字体大小为 14px */
|
|
|
}
|
|
|
/* .layui-btn-group 样式定义 */
|
|
|
.layui-btn-group {
|
|
|
display: inline-block; /* 设置按钮组为内联块元素 */
|
|
|
vertical-align: middle; /* 设置垂直对齐方式为居中 */
|
|
|
font-size: 0; /* 设置字体大小为 0，避免间距 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的 .layui-btn 样式定义 */
|
|
|
.layui-btn-group .layui-btn {
|
|
|
margin-left: 0!important; /* 去除左边的外边距 */
|
|
|
margin-right: 0!important; /* 去除右边的外边距 */
|
|
|
border-left: 1px solid rgba(255, 255, 255, .5); /* 设置左边边框为浅灰色 */
|
|
|
border-radius: 0; /* 设置边角圆角为 0，去掉圆角 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的 .layui-btn-primary 样式定义 */
|
|
|
.layui-btn-group .layui-btn-primary {
|
|
|
border-left: none; /* 去除左边的边框 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的 .layui-btn-primary hover 状态样式 */
|
|
|
.layui-btn-group .layui-btn-primary:hover {
|
|
|
border-color: #C9C9C9; /* hover 时，设置边框颜色 */
|
|
|
color: #009688; /* hover 时，设置文本颜色 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的第一个按钮样式定义 */
|
|
|
.layui-btn-group .layui-btn:first-child {
|
|
|
border-left: none; /* 第一个按钮去掉左边的边框 */
|
|
|
border-radius: 2px 0 0 2px; /* 设置圆角，只保留左上和左下的圆角 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的第一个 .layui-btn-primary 按钮样式 */
|
|
|
.layui-btn-group .layui-btn-primary:first-child {
|
|
|
border-left: 1px solid #c9c9c9; /* 第一个 .layui-btn-primary 按钮添加左边框 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的最后一个按钮样式定义 */
|
|
|
.layui-btn-group .layui-btn:last-child {
|
|
|
border-radius: 0 2px 2px 0; /* 设置圆角，只保留右上和右下的圆角 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 下的按钮之间的样式 */
|
|
|
.layui-btn-group .layui-btn+.layui-btn {
|
|
|
margin-left: 0; /* 按钮之间没有外边距 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-group 与其他 .layui-btn-group 之间的间距 */
|
|
|
.layui-btn-group+.layui-btn-group {
|
|
|
margin-left: 10px; /* 按钮组之间的左边距 */
|
|
|
}
|
|
|
|
|
|
/* .layui-btn-fluid 样式定义 */
|
|
|
.layui-btn-fluid {
|
|
|
width: 100%; /* 按钮宽度填满父容器 */
|
|
|
}
|
|
|
|
|
|
/* .layui-input, .layui-select, .layui-textarea 样式定义 */
|
|
|
.layui-input, .layui-select, .layui-textarea {
|
|
|
height: 38px; /* 设置元素的高度为 38px */
|
|
|
line-height: 1.3; /* 设置行高为 1.3倍 */
|
|
|
line-height: 38px\9; /* 兼容 IE 的 line-height 样式 */
|
|
|
border-width: 1px; /* 设置边框宽度为 1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
border-radius: 2px; /* 设置圆角为 2px */
|
|
|
}
|
|
|
|
|
|
/* .layui-input, .layui-select, .layui-textarea 的占位符样式 */
|
|
|
.layui-input::-webkit-input-placeholder, .layui-select::-webkit-input-placeholder, .layui-textarea::-webkit-input-placeholder {
|
|
|
line-height: 1.3; /* 设置占位符的行高为 1.3倍 */
|
|
|
}
|
|
|
|
|
|
/* .layui-input, .layui-textarea 样式定义 */
|
|
|
.layui-input, .layui-textarea {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
width: 100%; /* 宽度为父元素的 100% */
|
|
|
padding-left: 10px; /* 左侧内边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* .layui-input, .layui-textarea 鼠标悬浮时的样式 */
|
|
|
.layui-input:hover, .layui-textarea:hover {
|
|
|
border-color: #D2D2D2!important; /* 悬浮时，设置边框颜色 */
|
|
|
}
|
|
|
|
|
|
/* .layui-input, .layui-textarea 聚焦时的样式 */
|
|
|
.layui-input:focus, .layui-textarea:focus {
|
|
|
border-color: #C9C9C9!important; /* 聚焦时，设置边框颜色 */
|
|
|
}
|
|
|
|
|
|
/* .layui-textarea 的样式定义 */
|
|
|
.layui-textarea {
|
|
|
min-height: 100px; /* 设置最小高度为 100px */
|
|
|
height: auto; /* 高度自适应 */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
padding: 6px 10px; /* 设置内边距为 6px 上下、10px 左右 */
|
|
|
resize: vertical; /* 允许垂直方向调整大小 */
|
|
|
}
|
|
|
|
|
|
/* .layui-select 样式定义 */
|
|
|
.layui-select {
|
|
|
padding: 0 10px; /* 设置内边距，左右各 10px */
|
|
|
}
|
|
|
|
|
|
/* .layui-form 中的 checkbox、radio 和 select 样式隐藏 */
|
|
|
.layui-form input[type=checkbox], .layui-form input[type=radio], .layui-form select {
|
|
|
display: none; /* 隐藏 checkbox、radio 和 select 元素 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form 中的 [lay-ignore] 样式 */
|
|
|
.layui-form [lay-ignore] {
|
|
|
display: initial; /* 显示 lay-ignore 元素 */
|
|
|
}/* .layui-form-item 样式定义 */
|
|
|
.layui-form-item {
|
|
|
margin-bottom: 15px; /* 设置每个表单项的底部外边距为 15px */
|
|
|
clear: both; /* 清除浮动，使元素不与之前的浮动元素重叠 */
|
|
|
*zoom: 1; /* 为了 IE6/7 添加 clearfix Hack */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-item::after 伪元素，用于清除浮动 */
|
|
|
.layui-form-item:after {
|
|
|
content: '\20'; /* 使用空格字符作为内容 */
|
|
|
clear: both; /* 清除浮动 */
|
|
|
*zoom: 1; /* 为了 IE6/7 添加 clearfix Hack */
|
|
|
display: block; /* 使其成为块级元素 */
|
|
|
height: 0; /* 设置高度为 0，避免占据空间 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-label 样式定义 */
|
|
|
.layui-form-label {
|
|
|
float: left; /* 设置标签浮动到左侧 */
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
padding: 9px 15px; /* 设置内边距，顶部和底部为 9px，左右为 15px */
|
|
|
width: 80px; /* 设置标签的宽度为 80px */
|
|
|
font-weight: 400; /* 设置字体粗细为正常 */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
text-align: right; /* 标签内容右对齐 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-label-col 样式定义 */
|
|
|
.layui-form-label-col {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
float: none; /* 取消浮动 */
|
|
|
padding: 9px 0; /* 设置内边距，顶部和底部为 9px，左右为 0 */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
text-align: left; /* 内容左对齐 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-item 内部 .layui-inline 样式定义 */
|
|
|
.layui-form-item .layui-inline {
|
|
|
margin-bottom: 5px; /* 设置底部外边距为 5px */
|
|
|
margin-right: 10px; /* 设置右边外边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* .layui-input-block 样式定义 */
|
|
|
.layui-input-block {
|
|
|
margin-left: 110px; /* 设置左边外边距为 110px */
|
|
|
min-height: 36px; /* 设置最小高度为 36px */
|
|
|
}
|
|
|
|
|
|
/* .layui-input-inline 样式定义 */
|
|
|
.layui-input-inline {
|
|
|
display: inline-block; /* 设置为内联块级元素 */
|
|
|
vertical-align: middle; /* 设置垂直对齐方式为居中 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-item 内部 .layui-input-inline 样式定义 */
|
|
|
.layui-form-item .layui-input-inline {
|
|
|
float: left; /* 设置为浮动到左侧 */
|
|
|
width: 190px; /* 设置宽度为 190px */
|
|
|
margin-right: 10px; /* 设置右边外边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-text 内部 .layui-input-inline 样式定义 */
|
|
|
.layui-form-text .layui-input-inline {
|
|
|
width: auto; /* 设置宽度自适应 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-mid 样式定义 */
|
|
|
.layui-form-mid {
|
|
|
float: left; /* 设置浮动到左侧 */
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
padding: 9px 0!important; /* 设置内边距，顶部和底部为 9px，左右为 0，使用 !important 强制应用 */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
margin-right: 10px; /* 设置右边外边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-danger（错误状态）下的 .layui-form-select 样式定义 */
|
|
|
.layui-form-danger + .layui-form-select .layui-input,
|
|
|
.layui-form-danger:focus {
|
|
|
border-color: #FF5722!important; /* 在错误状态或焦点状态下，设置边框颜色为红色（#FF5722），使用 !important 强制应用 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-select 样式定义 */
|
|
|
.layui-form-select .layui-input {
|
|
|
padding-right: 30px; /* 设置右侧内边距为 30px，留出空间显示下拉箭头 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时的光标为指针，表示可以点击 */
|
|
|
}
|
|
|
|
|
|
/* .layui-form-select 下的 .layui-edge 样式定义 */
|
|
|
.layui-form-select .layui-edge {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: 10px; /* 设置右边距为 10px */
|
|
|
top: 50%; /* 设置上边距为父容器的 50% */
|
|
|
margin-top: -3px; /* 向上移动 3px，调整垂直居中的位置 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时的光标为指针，表示可以点击 */
|
|
|
border-width: 6px; /* 设置箭头的边框宽度为 6px */
|
|
|
border-top-color: #c2c2c2; /* 设置箭头上边框颜色为浅灰色 */
|
|
|
border-top-style: solid; /* 设置箭头上边框样式为实线 */
|
|
|
transition: all .3s; /* 设置所有属性的过渡效果，持续时间为 0.3 秒 */
|
|
|
-webkit-transition: all .3s; /* 为了兼容旧版 Webkit 浏览器（如 Safari）设置过渡效果 */
|
|
|
}/* 隐藏下拉框并设置绝对定位 */
|
|
|
.layui-form-select dl {
|
|
|
display: none; /* 默认隐藏下拉框 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
left: 0; /* 设置下拉框相对于其父容器的左边距为 0 */
|
|
|
top: 42px; /* 设置下拉框相对于父容器的上边距为 42px */
|
|
|
padding: 5px 0; /* 设置上下内边距为 5px，左右为 0 */
|
|
|
z-index: 899; /* 设置 z-index 为 899，确保下拉框在其他元素之上 */
|
|
|
min-width: 100%; /* 设置下拉框的最小宽度为 100%，保证宽度与父元素相同 */
|
|
|
border: 1px solid #d2d2d2; /* 设置下拉框边框为 1px 实线，颜色为浅灰色 */
|
|
|
max-height: 300px; /* 设置下拉框最大高度为 300px */
|
|
|
overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
|
|
|
background-color: #fff; /* 设置下拉框背景颜色为白色 */
|
|
|
border-radius: 2px; /* 设置圆角，半径为 2px */
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,.12); /* 设置下拉框的阴影效果，模拟浮动效果 */
|
|
|
box-sizing: border-box; /* 使用 border-box 使得 padding 和 border 包含在元素的总宽高内 */
|
|
|
}
|
|
|
|
|
|
/* 下拉框中的 dd 和 dt 项目（即每个选项和标题） */
|
|
|
.layui-form-select dl dd, .layui-form-select dl dt {
|
|
|
padding: 0 10px; /* 设置左右内边距为 10px，顶部和底部内边距为 0 */
|
|
|
line-height: 36px; /* 设置行高为 36px，确保每个选项的高度一致 */
|
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
|
overflow: hidden; /* 隐藏超出容器的文本 */
|
|
|
text-overflow: ellipsis; /* 超出文本的部分用省略号 (...) 显示 */
|
|
|
}
|
|
|
|
|
|
/* 下拉框中的 dt（通常是选项组的标题） */
|
|
|
.layui-form-select dl dt {
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
color: #999; /* 设置字体颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 下拉框中的 dd（选项） */
|
|
|
.layui-form-select dl dd {
|
|
|
cursor: pointer; /* 设置鼠标悬停时的光标为指针，表示可以点击 */
|
|
|
}
|
|
|
|
|
|
/* 鼠标悬停在 dd 项时改变背景色 */
|
|
|
.layui-form-select dl dd:hover {
|
|
|
background-color: #f2f2f2; /* 设置悬停时背景颜色为浅灰色 */
|
|
|
-webkit-transition: .5s all; /* 设置过渡效果，持续时间为 0.5 秒，适用于 Webkit 浏览器 */
|
|
|
transition: .5s all; /* 设置过渡效果，持续时间为 0.5 秒 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-select-group 内 dd 的左侧内边距 */
|
|
|
.layui-form-select .layui-select-group dd {
|
|
|
padding-left: 20px; /* 增加左边距，使得子项与父项有一定的缩进 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-select-tips 的样式，通常用于提示项 */
|
|
|
.layui-form-select dl dd.layui-select-tips {
|
|
|
padding-left: 10px !important; /* 强制设置左边距为 10px（使用 !important 强制应用） */
|
|
|
color: #999; /* 设置字体颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中的项的样式 */
|
|
|
.layui-form-select dl dd.layui-this {
|
|
|
background-color: #5FB878; /* 设置选中项的背景颜色为绿色 */
|
|
|
color: #fff; /* 设置选中项的字体颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用项的样式 */
|
|
|
.layui-form-checkbox, .layui-form-select dl dd.layui-disabled {
|
|
|
background-color: #fff; /* 禁用项背景色设置为白色 */
|
|
|
}
|
|
|
|
|
|
/* 当选项被选中时，显示下拉框 */
|
|
|
.layui-form-selected dl {
|
|
|
display: block; /* 显示下拉框 */
|
|
|
}
|
|
|
|
|
|
/* 复选框、下拉框和开关的布局设置 */
|
|
|
.layui-form-checkbox, .layui-form-checkbox *, .layui-form-switch {
|
|
|
display: inline-block; /* 设置为内联块级元素，使其可以在一行内显示 */
|
|
|
vertical-align: middle; /* 设置垂直对齐方式为居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中状态下的下拉箭头旋转 */
|
|
|
.layui-form-selected .layui-edge {
|
|
|
margin-top: -9px; /* 设置箭头的上边距为 -9px，使其与下拉框对齐 */
|
|
|
-webkit-transform: rotate(180deg); /* 为 Webkit 浏览器设置箭头旋转，旋转 180 度 */
|
|
|
transform: rotate(180deg); /* 为其他浏览器设置箭头旋转，旋转 180 度 */
|
|
|
margin-top: -3px\9; /* IE9 的 Hack：为了解决箭头偏移问题 */
|
|
|
}
|
|
|
|
|
|
/* :root .layui-form-selected .layui-edge 的兼容性处理 */
|
|
|
:root .layui-form-selected .layui-edge {
|
|
|
margin-top: -9px\0/IE9; /* 为 IE9 提供特殊的兼容性处理 */
|
|
|
}
|
|
|
/* 定义下拉框位置为向上展开，并调整 bottom 属性 */
|
|
|
.layui-form-selectup dl {
|
|
|
top: auto; /* 设置 top 为 auto，表示不使用顶部定位 */
|
|
|
bottom: 42px; /* 设置下拉框的 bottom 为 42px，即下拉框底部距离其父容器底部 42px */
|
|
|
}
|
|
|
|
|
|
/* 定义没有内容的下拉框的样式 */
|
|
|
.layui-select-none {
|
|
|
margin: 5px 0; /* 设置上下外边距为 5px，左右为 0 */
|
|
|
text-align: center; /* 设置文本水平居中对齐 */
|
|
|
color: #999; /* 设置文本颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 禁用状态下的样式，针对 layui-select-disabled 状态 */
|
|
|
.layui-select-disabled .layui-disabled {
|
|
|
border-color: #eee !important; /* 强制设置禁用项的边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 禁用状态下，设置下拉箭头的边框颜色 */
|
|
|
.layui-select-disabled .layui-edge {
|
|
|
border-top-color: #d2d2d2; /* 设置禁用状态下的箭头上边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 定义复选框的基础样式 */
|
|
|
.layui-form-checkbox {
|
|
|
position: relative; /* 设置复选框的位置为相对定位，以便后续对其子元素定位 */
|
|
|
height: 30px; /* 设置复选框的高度为 30px */
|
|
|
line-height: 30px; /* 设置行高为 30px，使文本和复选框垂直居中 */
|
|
|
margin-right: 10px; /* 设置右外边距为 10px */
|
|
|
padding-right: 30px; /* 设置右内边距为 30px，为了给复选框的图标留空间 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时的光标为指针，表示可以点击 */
|
|
|
font-size: 0; /* 设置字体大小为 0，隐藏文本内容 */
|
|
|
-webkit-transition: .1s linear; /* 设置 Webkit 浏览器下，过渡效果持续 0.1 秒，过渡方式为线性 */
|
|
|
transition: .1s linear; /* 设置过渡效果持续 0.1 秒，过渡方式为线性 */
|
|
|
box-sizing: border-box; /* 设置盒模型为 border-box，确保 padding 和 border 不会影响元素的总宽度和高度 */
|
|
|
}
|
|
|
|
|
|
/* 复选框内的 span 元素样式 */
|
|
|
.layui-form-checkbox span {
|
|
|
padding: 0 10px; /* 设置左右内边距为 10px */
|
|
|
height: 100%; /* 设置高度为 100% */
|
|
|
font-size: 14px; /* 设置字体大小为 14px */
|
|
|
border-radius: 2px 0 0 2px; /* 设置左上和左下圆角为 2px */
|
|
|
background-color: #d2d2d2; /* 设置背景色为浅灰色 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
}
|
|
|
|
|
|
/* 复选框悬停时的样式 */
|
|
|
.layui-form-checkbox:hover span {
|
|
|
background-color: #c2c2c2; /* 设置悬停时背景颜色为稍深的灰色 */
|
|
|
}
|
|
|
|
|
|
/* 复选框内的 i 元素样式（通常是复选框的勾选框） */
|
|
|
.layui-form-checkbox i {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: 0; /* 设置右边距为 0，使其靠右显示 */
|
|
|
top: 0; /* 设置上边距为 0，使其紧贴顶部 */
|
|
|
width: 30px; /* 设置宽度为 30px */
|
|
|
height: 28px; /* 设置高度为 28px */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为 1px 浅灰色实线 */
|
|
|
border-left: none; /* 移除左边框 */
|
|
|
border-radius: 0 2px 2px 0; /* 设置右上和右下圆角为 2px */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
font-size: 20px; /* 设置字体大小为 20px */
|
|
|
text-align: center; /* 设置文本居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 复选框悬停时，i 元素的样式 */
|
|
|
.layui-form-checkbox:hover i {
|
|
|
border-color: #c2c2c2; /* 悬停时改变边框颜色为稍深的灰色 */
|
|
|
color: #c2c2c2; /* 悬停时改变勾选框的颜色为稍深的灰色 */
|
|
|
}
|
|
|
|
|
|
/* 选中状态下的复选框样式 */
|
|
|
.layui-form-checked, .layui-form-checked:hover {
|
|
|
border-color: #5FB878; /* 设置选中状态下的边框颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 选中状态下复选框内 span 的样式 */
|
|
|
.layui-form-checked span, .layui-form-checked:hover span {
|
|
|
background-color: #5FB878; /* 设置选中状态下的背景颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 选中状态下复选框内 i 的样式 */
|
|
|
.layui-form-checked i, .layui-form-checked:hover i {
|
|
|
color: #5FB878; /* 设置选中状态下勾选框的颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 为复选框添加上外边距 */
|
|
|
.layui-form-item .layui-form-checkbox {
|
|
|
margin-top: 4px; /* 设置上外边距为 4px */
|
|
|
}
|
|
|
|
|
|
/* 针对皮肤为 primary 的复选框，进行一些特殊样式设置 */
|
|
|
.layui-form-checkbox[lay-skin=primary] {
|
|
|
height: auto !important; /* 强制设置高度为 auto，取消默认的高度 */
|
|
|
line-height: normal !important; /* 强制设置行高为正常 */
|
|
|
min-width: 18px; /* 设置最小宽度为 18px */
|
|
|
min-height: 18px; /* 设置最小高度为 18px */
|
|
|
border: none !important; /* 去除边框 */
|
|
|
margin-right: 0; /* 设置右外边距为 0 */
|
|
|
padding-left: 28px; /* 设置左内边距为 28px */
|
|
|
padding-right: 0; /* 设置右内边距为 0 */
|
|
|
background: 0 0; /* 去除背景 */
|
|
|
}
|
|
|
/* 为 primary 皮肤的复选框的 span 设置内边距、行高、背景和颜色 */
|
|
|
.layui-form-checkbox[lay-skin=primary] span {
|
|
|
padding-left: 0; /* 设置左内边距为 0 */
|
|
|
padding-right: 15px; /* 设置右内边距为 15px */
|
|
|
line-height: 18px; /* 设置行高为 18px，确保文字垂直居中 */
|
|
|
background: 0 0; /* 设置背景为透明 */
|
|
|
color: #666; /* 设置文字颜色为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 为 primary 皮肤的复选框的勾选框（i 元素）设置样式 */
|
|
|
.layui-form-checkbox[lay-skin=primary] i {
|
|
|
right: auto; /* 设置右边距为 auto */
|
|
|
left: 0; /* 设置左边距为 0，使勾选框靠左对齐 */
|
|
|
width: 16px; /* 设置宽度为 16px */
|
|
|
height: 16px; /* 设置高度为 16px */
|
|
|
line-height: 16px; /* 设置行高为 16px，使其垂直居中 */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为 1px 浅灰色 */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
border-radius: 2px; /* 设置边框圆角为 2px */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
-webkit-transition: .1s linear; /* 设置过渡效果，Webkit 浏览器下持续 0.1 秒，线性过渡 */
|
|
|
transition: .1s linear; /* 设置过渡效果，持续 0.1 秒，线性过渡 */
|
|
|
}
|
|
|
|
|
|
/* 当鼠标悬停在 primary 皮肤的复选框的勾选框上时，改变边框颜色和文字颜色 */
|
|
|
.layui-form-checkbox[lay-skin=primary]:hover i {
|
|
|
border-color: #5FB878; /* 改变边框颜色为绿色 */
|
|
|
color: #fff; /* 改变文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 在选中状态下，设置 primary 皮肤复选框的勾选框的边框和背景颜色 */
|
|
|
.layui-form-checked[lay-skin=primary] i {
|
|
|
border-color: #5FB878; /* 设置边框颜色为绿色 */
|
|
|
background-color: #5FB878; /* 设置背景颜色为绿色 */
|
|
|
color: #fff; /* 设置文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 在禁用状态下，设置 primary 皮肤复选框的 span 的颜色和背景 */
|
|
|
.layui-checkbox-disbaled[lay-skin=primary] span {
|
|
|
background: 0 0 !important; /* 强制设置背景为透明 */
|
|
|
color: #c2c2c2; /* 设置文字颜色为禁用的灰色 */
|
|
|
}
|
|
|
|
|
|
/* 在禁用状态下，悬停时，设置 primary 皮肤复选框的勾选框边框颜色为浅灰色 */
|
|
|
.layui-checkbox-disbaled[lay-skin=primary]:hover i {
|
|
|
border-color: #d2d2d2; /* 设置禁用状态下，悬停时边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 primary 皮肤复选框项的上外边距 */
|
|
|
.layui-form-item .layui-form-checkbox[lay-skin=primary] {
|
|
|
margin-top: 10px; /* 设置上外边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* 设置开关的样式 */
|
|
|
.layui-form-switch {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
height: 22px; /* 设置高度为 22px */
|
|
|
line-height: 22px; /* 设置行高为 22px，使文本或内容垂直居中 */
|
|
|
min-width: 35px; /* 设置最小宽度为 35px */
|
|
|
padding: 0 5px; /* 设置左右内边距为 5px */
|
|
|
margin-top: 8px; /* 设置上外边距为 8px */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为 1px 浅灰色 */
|
|
|
border-radius: 20px; /* 设置边框圆角为 20px，使其呈现圆形 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时显示为指针，表示可以点击 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
-webkit-transition: .1s linear; /* 设置过渡效果，Webkit 浏览器下持续 0.1 秒，线性过渡 */
|
|
|
transition: .1s linear; /* 设置过渡效果，持续 0.1 秒，线性过渡 */
|
|
|
}
|
|
|
|
|
|
/* 设置开关的内部勾选按钮的样式 */
|
|
|
.layui-form-switch i {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 5px; /* 设置左边距为 5px */
|
|
|
top: 3px; /* 设置上边距为 3px */
|
|
|
width: 16px; /* 设置宽度为 16px */
|
|
|
height: 16px; /* 设置高度为 16px */
|
|
|
border-radius: 20px; /* 设置圆角为 20px */
|
|
|
background-color: #d2d2d2; /* 设置背景颜色为浅灰色 */
|
|
|
-webkit-transition: .1s linear; /* 设置过渡效果，Webkit 浏览器下持续 0.1 秒，线性过渡 */
|
|
|
transition: .1s linear; /* 设置过渡效果，持续 0.1 秒，线性过渡 */
|
|
|
}
|
|
|
/* 设置 layui-form-switch 中 em 元素的样式 */
|
|
|
.layui-form-switch em {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
top: 0; /* 设置距离顶部为 0 */
|
|
|
width: 25px; /* 设置宽度为 25px */
|
|
|
margin-left: 21px; /* 设置左外边距为 21px */
|
|
|
padding: 0 !important; /* 强制去除内边距 */
|
|
|
text-align: center !important; /* 强制设置文本居中对齐 */
|
|
|
color: #999 !important; /* 强制设置文本颜色为灰色 */
|
|
|
font-style: normal !important; /* 强制设置字体样式为正常 */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
}
|
|
|
|
|
|
/* 设置已开启状态的开关的样式 */
|
|
|
.layui-form-onswitch {
|
|
|
border-color: #5FB878; /* 设置边框颜色为绿色 */
|
|
|
background-color: #5FB878; /* 设置背景颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用状态的复选框的边框颜色 */
|
|
|
.layui-checkbox-disbaled, .layui-checkbox-disbaled i {
|
|
|
border-color: #e2e2e2 !important; /* 强制设置边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置已开启状态的开关的滑块的样式 */
|
|
|
.layui-form-onswitch i {
|
|
|
left: 100%; /* 将滑块的位置设为开关的右侧 */
|
|
|
margin-left: -21px; /* 设置滑块左外边距为 -21px，使其平移到正确位置 */
|
|
|
background-color: #fff; /* 设置滑块背景颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置已开启状态的开关中 em 元素的样式 */
|
|
|
.layui-form-onswitch em {
|
|
|
margin-left: 5px; /* 设置左外边距为 5px */
|
|
|
margin-right: 21px; /* 设置右外边距为 21px */
|
|
|
color: #fff !important; /* 强制设置文本颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用状态的复选框的背景色 */
|
|
|
.layui-checkbox-disbaled span {
|
|
|
background-color: #e2e2e2 !important; /* 强制设置禁用复选框背景色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用状态下鼠标悬停时复选框的图标颜色 */
|
|
|
.layui-checkbox-disbaled:hover i {
|
|
|
color: #fff !important; /* 强制设置禁用状态下悬停时的图标颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 隐藏 radio 元素 */
|
|
|
[lay-radio] {
|
|
|
display: none; /* 隐藏 radio 按钮 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 内部元素的排列样式 */
|
|
|
.layui-form-radio, .layui-form-radio * {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
vertical-align: middle; /* 设置垂直对齐方式为居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 的样式 */
|
|
|
.layui-form-radio {
|
|
|
line-height: 28px; /* 设置行高为 28px */
|
|
|
margin: 6px 10px 0 0; /* 设置外边距为 6px 10px 0 0，右边和上边有一定的间距 */
|
|
|
padding-right: 10px; /* 设置右内边距为 10px */
|
|
|
cursor: pointer; /* 鼠标悬停时显示为指针，表示可点击 */
|
|
|
font-size: 0; /* 设置字体大小为 0，去除默认的字体间隙 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 内部元素的字体大小 */
|
|
|
.layui-form-radio * {
|
|
|
font-size: 14px; /* 设置字体大小为 14px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 中勾选图标的样式 */
|
|
|
.layui-form-radio > i {
|
|
|
margin-right: 8px; /* 设置右外边距为 8px */
|
|
|
font-size: 22px; /* 设置图标的字体大小为 22px */
|
|
|
color: #c2c2c2; /* 设置图标的颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置已选中状态的 layui-form-radio 的图标颜色 */
|
|
|
.layui-form-radio > i:hover, .layui-form-radioed > i {
|
|
|
color: #5FB878; /* 设置鼠标悬停或选中状态下图标颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置禁用状态下的 layui-radio 图标颜色 */
|
|
|
.layui-radio-disbaled > i {
|
|
|
color: #e2e2e2 !important; /* 强制设置禁用状态下图标颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-pane 中标签的样式 */
|
|
|
.layui-form-pane .layui-form-label {
|
|
|
width: 110px; /* 设置宽度为 110px */
|
|
|
padding: 8px 15px; /* 设置内边距，顶部和底部为 8px，左侧和右侧为 15px */
|
|
|
height: 38px; /* 设置高度为 38px */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
border-width: 1px; /* 设置边框宽度为 1px */
|
|
|
border-style: solid; /* 设置边框样式为实线 */
|
|
|
border-radius: 2px 0 0 2px; /* 设置左上和左下角的圆角为 2px */
|
|
|
text-align: center; /* 设置文本居中对齐 */
|
|
|
background-color: #FBFBFB; /* 设置背景颜色为浅灰色 */
|
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
|
box-sizing: border-box; /* 包含边框和内边距在内的总宽度和高度 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-pane 中输入框的样式 */
|
|
|
.layui-form-pane .layui-input-inline {
|
|
|
margin-left: -1px; /* 设置左外边距为 -1px，确保与标签边缘对齐 */
|
|
|
}
|
|
|
/* 设置 .layui-input-block 的左外边距为 110px，并调整其相对于父元素的位置 */
|
|
|
.layui-form-pane .layui-input-block {
|
|
|
margin-left: 110px; /* 设置左外边距为 110px */
|
|
|
left: -1px; /* 设置相对左边位置为 -1px，轻微调整位置 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-input 的右下角圆角，左上和右上角无圆角 */
|
|
|
.layui-form-pane .layui-input {
|
|
|
border-radius: 0 2px 2px 0; /* 设置右上和右下角圆角，其他角没有圆角 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-form-text 中的 .layui-form-label 样式，使其宽度为 100%，并使其左对齐 */
|
|
|
.layui-form-pane .layui-form-text .layui-form-label {
|
|
|
float: none; /* 取消浮动，恢复正常的文档流布局 */
|
|
|
width: 100%; /* 设置宽度为 100% */
|
|
|
border-radius: 2px; /* 设置圆角 */
|
|
|
box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
|
|
|
text-align: left; /* 设置文本左对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-form-text 中的 .layui-input-inline 的样式，使其变为块级元素，并清除浮动 */
|
|
|
.layui-form-pane .layui-form-text .layui-input-inline {
|
|
|
display: block; /* 使元素成为块级元素 */
|
|
|
margin: 0; /* 设置外边距为 0 */
|
|
|
top: -1px; /* 向上移动 1px */
|
|
|
clear: both; /* 清除之前的浮动 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-form-text 中 .layui-input-block 的样式，取消外边距，并调整其位置 */
|
|
|
.layui-form-pane .layui-form-text .layui-input-block {
|
|
|
margin: 0; /* 设置外边距为 0 */
|
|
|
left: 0; /* 设置相对左边的位置为 0 */
|
|
|
top: -1px; /* 向上移动 1px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-form-text 中 .layui-textarea 的最小高度，并设置圆角 */
|
|
|
.layui-form-pane .layui-form-text .layui-textarea {
|
|
|
min-height: 100px; /* 设置最小高度为 100px */
|
|
|
border-radius: 0 0 2px 2px; /* 设置右下和左下角圆角 */
|
|
|
}
|
|
|
|
|
|
/* 设置复选框的外边距，上下为 4px，左侧为 10px */
|
|
|
.layui-form-pane .layui-form-checkbox {
|
|
|
margin: 4px 0 4px 10px; /* 设置外边距：上下 4px，左侧 10px */
|
|
|
}
|
|
|
|
|
|
/* 设置单选框和开关的外边距，上边为 6px，左边为 10px */
|
|
|
.layui-form-pane .layui-form-radio, .layui-form-pane .layui-form-switch {
|
|
|
margin-top: 6px; /* 设置上外边距为 6px */
|
|
|
margin-left: 10px; /* 设置左外边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* 设置带有 pane 属性的 .layui-form-item 的位置和边框样式 */
|
|
|
.layui-form-pane .layui-form-item[pane] {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
border-width: 1px; /* 设置边框宽度为 1px */
|
|
|
border-style: solid; /* 设置边框样式为实线 */
|
|
|
}
|
|
|
|
|
|
/* 设置带有 pane 属性的 .layui-form-item 中 .layui-form-label 的位置和样式 */
|
|
|
.layui-form-pane .layui-form-item[pane] .layui-form-label {
|
|
|
position: absolute; /* 设置绝对定位 */
|
|
|
left: 0; /* 设置左边距为 0 */
|
|
|
top: 0; /* 设置顶部为 0 */
|
|
|
height: 100%; /* 设置高度为 100% */
|
|
|
border-width: 0 1px 0 0; /* 设置右边框宽度为 1px，其它边框宽度为 0 */
|
|
|
}
|
|
|
|
|
|
/* 设置带有 pane 属性的 .layui-form-item 中 .layui-input-inline 的外边距 */
|
|
|
.layui-form-pane .layui-form-item[pane] .layui-input-inline {
|
|
|
margin-left: 110px; /* 设置左外边距为 110px */
|
|
|
}
|
|
|
|
|
|
/* 针对屏幕宽度小于等于 450px 的设备，设置不同的样式 */
|
|
|
@media screen and (max-width: 450px) {
|
|
|
/* 设置 .layui-form-item 中 .layui-form-label 的文本溢出处理 */
|
|
|
.layui-form-item .layui-form-label {
|
|
|
text-overflow: ellipsis; /* 设置文本溢出时显示省略号 */
|
|
|
overflow: hidden; /* 隐藏溢出的文本 */
|
|
|
white-space: nowrap; /* 不允许文本换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-form-item 中 .layui-inline 的布局，变为块级元素，调整外边距 */
|
|
|
.layui-form-item .layui-inline {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
margin-right: 0; /* 设置右外边距为 0 */
|
|
|
margin-bottom: 20px; /* 设置底外边距为 20px */
|
|
|
clear: both; /* 清除浮动 */
|
|
|
}
|
|
|
}
|
|
|
/* 为 .layui-inline 添加伪元素 :after，清除浮动并设置内容为空格 */
|
|
|
.layui-inline:after {
|
|
|
content: '\20'; /* 设置伪元素的内容为空格符号 */
|
|
|
clear: both; /* 清除浮动 */
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
height: 0; /* 高度为 0，用来清除浮动 */
|
|
|
}
|
|
|
|
|
|
/* 为 .layui-form-item 中的 .layui-input-inline 设置样式，改变布局 */
|
|
|
.layui-form-item .layui-input-inline {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
float: none; /* 取消浮动 */
|
|
|
left: -3px; /* 向左移动 3px */
|
|
|
width: auto; /* 宽度自动调整 */
|
|
|
margin: 0 0 10px 112px; /* 设置底部外边距为 10px，左边距为 112px，右边距为 0 */
|
|
|
}
|
|
|
|
|
|
/* 为 .layui-form-item 中的 .layui-input-inline 紧接着的 .layui-form-mid 设置样式 */
|
|
|
.layui-form-item .layui-input-inline + .layui-form-mid {
|
|
|
margin-left: 110px; /* 设置左外边距为 110px */
|
|
|
top: -5px; /* 向上移动 5px */
|
|
|
padding: 0; /* 取消内边距 */
|
|
|
}
|
|
|
|
|
|
/* 为 .layui-form-item 中的 .layui-form-checkbox 设置外边距 */
|
|
|
.layui-form-item .layui-form-checkbox {
|
|
|
margin-right: 5px; /* 设置右外边距为 5px */
|
|
|
margin-bottom: 5px; /* 设置底部外边距为 5px */
|
|
|
}
|
|
|
|
|
|
/* 为 .layui-layedit 设置边框样式和圆角 */
|
|
|
.layui-layedit {
|
|
|
border-width: 1px; /* 设置边框宽度为 1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
border-radius: 2px; /* 设置圆角为 2px */
|
|
|
}
|
|
|
|
|
|
/* 为 .layui-layedit-tool 设置内边距和底边框样式 */
|
|
|
.layui-layedit-tool {
|
|
|
padding: 3px 5px; /* 设置内边距，上下 3px，左右 5px */
|
|
|
border-bottom-width: 1px; /* 设置底边框宽度为 1px */
|
|
|
border-bottom-style: solid; /* 设置底边框为实线 */
|
|
|
font-size: 0; /* 设置字体大小为 0（通常用于清除某些元素的额外空间） */
|
|
|
}
|
|
|
|
|
|
/* 为 .layedit-tool-fixed 设置固定定位和顶部边框 */
|
|
|
.layedit-tool-fixed {
|
|
|
position: fixed; /* 设置定位为固定定位 */
|
|
|
top: 0; /* 设置顶部位置为 0 */
|
|
|
border-top: 1px solid #e2e2e2; /* 设置顶部边框为 1px 实线，颜色为 #e2e2e2 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中的 .layedit-tool-mid 和 .layui-icon 样式，使其并排显示 */
|
|
|
.layui-layedit-tool .layedit-tool-mid, .layui-layedit-tool .layui-icon {
|
|
|
display: inline-block; /* 设置为内联块级元素 */
|
|
|
vertical-align: middle; /* 垂直居中对齐 */
|
|
|
text-align: center; /* 文本水平居中 */
|
|
|
font-size: 14px; /* 设置字体大小为 14px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中 .layui-icon 的样式 */
|
|
|
.layui-layedit-tool .layui-icon {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
width: 32px; /* 设置宽度为 32px */
|
|
|
height: 30px; /* 设置高度为 30px */
|
|
|
line-height: 30px; /* 设置行高为 30px，垂直居中 */
|
|
|
margin: 3px 5px; /* 设置外边距，上下 3px，左右 5px */
|
|
|
color: #777; /* 设置图标颜色为 #777 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时显示为指针 */
|
|
|
border-radius: 2px; /* 设置圆角为 2px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中 .layui-icon 在悬停时的颜色 */
|
|
|
.layui-layedit-tool .layui-icon:hover {
|
|
|
color: #393D49; /* 悬停时设置图标颜色为 #393D49 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中 .layui-icon 在点击时的颜色 */
|
|
|
.layui-layedit-tool .layui-icon:active {
|
|
|
color: #000; /* 点击时设置图标颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中 .layedit-tool-active 的样式，表示活动状态 */
|
|
|
.layui-layedit-tool .layedit-tool-active {
|
|
|
background-color: #e2e2e2; /* 设置背景色为 #e2e2e2 */
|
|
|
color: #000; /* 设置字体颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-layedit-tool 中的禁用状态样式 */
|
|
|
.layui-layedit-tool .layui-disabled {
|
|
|
/* 没有具体样式定义，通常这里会用于禁用状态的样式处理 */
|
|
|
}
|
|
|
/* 禁用状态下的按钮悬停效果 */
|
|
|
.layui-disabled:hover {
|
|
|
color: #d2d2d2; /* 悬停时字体颜色变为 #d2d2d2 */
|
|
|
cursor: not-allowed; /* 鼠标悬停时显示为禁止符号，表示禁用 */
|
|
|
}
|
|
|
|
|
|
/* 编辑器工具栏中 .layedit-tool-mid 的样式 */
|
|
|
.layui-layedit-tool .layedit-tool-mid {
|
|
|
width: 1px; /* 设置宽度为 1px */
|
|
|
height: 18px; /* 设置高度为 18px */
|
|
|
margin: 0 10px; /* 左右外边距为 10px */
|
|
|
background-color: #d2d2d2; /* 设置背景颜色为 #d2d2d2 */
|
|
|
}
|
|
|
|
|
|
/* HTML 工具按钮的样式 */
|
|
|
.layedit-tool-html {
|
|
|
width: 50px !important; /* 强制设置宽度为 50px */
|
|
|
font-size: 30px !important; /* 强制设置字体大小为 30px */
|
|
|
}
|
|
|
|
|
|
/* 代码、帮助、工具按钮字体大小 */
|
|
|
.layedit-tool-b, .layedit-tool-code, .layedit-tool-help {
|
|
|
font-size: 16px !important; /* 强制设置字体大小为 16px */
|
|
|
}
|
|
|
|
|
|
/* 各种工具按钮（例如：删除、表情、图片等）字体大小 */
|
|
|
.layedit-tool-d, .layedit-tool-face, .layedit-tool-image, .layedit-tool-unlink {
|
|
|
font-size: 18px !important; /* 强制设置字体大小为 18px */
|
|
|
}
|
|
|
|
|
|
/* 为图片工具按钮中的 input 元素设置样式 */
|
|
|
.layedit-tool-image input {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
font-size: 0; /* 设置字体大小为 0，去除文字显示 */
|
|
|
left: 0; /* 设置左边距为 0 */
|
|
|
top: 0; /* 设置上边距为 0 */
|
|
|
width: 100%; /* 设置宽度为 100% */
|
|
|
height: 100%; /* 设置高度为 100% */
|
|
|
opacity: 0.01; /* 设置透明度为 0.01，使其几乎不可见 */
|
|
|
filter: Alpha(opacity=1); /* 兼容老版本 IE 设置透明度 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示为手指形状，表示可点击 */
|
|
|
}
|
|
|
|
|
|
/* 设置 iframe 标签在编辑器中显示 */
|
|
|
.layui-layedit-iframe iframe {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
width: 100%; /* 设置宽度为 100% */
|
|
|
}
|
|
|
|
|
|
/* 设置代码编辑框的溢出隐藏 */
|
|
|
#LAY_layedit_code {
|
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件的样式 */
|
|
|
.layui-laypage {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
*display: inline; /* IE6/7 的兼容样式 */
|
|
|
*zoom: 1; /* IE6/7 的兼容样式 */
|
|
|
vertical-align: middle; /* 垂直居中对齐 */
|
|
|
margin: 10px 0; /* 设置上下外边距为 10px */
|
|
|
font-size: 0; /* 设置字体大小为 0，用来清除默认的间距 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中第一个链接和第一个链接的 <em> 标签 */
|
|
|
.layui-laypage > a:first-child, .layui-laypage > a:first-child em {
|
|
|
border-radius: 2px 0 0 2px; /* 设置左侧圆角 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中最后一个链接和最后一个链接的 <em> 标签 */
|
|
|
.layui-laypage > a:last-child, .layui-laypage > a:last-child em {
|
|
|
border-radius: 0 2px 2px 0; /* 设置右侧圆角 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中第一个子元素的样式 */
|
|
|
.layui-laypage > :first-child {
|
|
|
margin-left: 0 !important; /* 第一个子元素左外边距为 0 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中最后一个子元素的样式 */
|
|
|
.layui-laypage > :last-child {
|
|
|
margin-right: 0 !important; /* 最后一个子元素右外边距为 0 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中各个链接、按钮、输入框、选择框的样式 */
|
|
|
.layui-laypage a, .layui-laypage button, .layui-laypage input, .layui-laypage select, .layui-laypage span {
|
|
|
border: 1px solid #e2e2e2; /* 设置边框为 1px 实线，颜色为 #e2e2e2 */
|
|
|
}
|
|
|
|
|
|
/* 分页组件中各个链接、span 标签的基本样式 */
|
|
|
.layui-laypage a, .layui-laypage span {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
*display: inline; /* IE6/7 的兼容样式 */
|
|
|
*zoom: 1; /* IE6/7 的兼容样式 */
|
|
|
vertical-align: middle; /* 垂直居中对齐 */
|
|
|
padding: 0 15px; /* 设置左右内边距为 15px */
|
|
|
height: 28px; /* 设置高度为 28px */
|
|
|
line-height: 28px; /* 设置行高为 28px，垂直居中 */
|
|
|
margin: 0 -1px 5px 0; /* 设置外边距，上右 0，底部为 5px */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
color: #333; /* 设置字体颜色为 #333 */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
}
|
|
|
|
|
|
/* 分页组件的更多内容按钮 */
|
|
|
.layui-flow-more a *, .layui-laypage input, .layui-table-view select[lay-ignore] {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 分页链接悬停效果 */
|
|
|
.layui-laypage a:hover {
|
|
|
color: #009688; /* 悬停时字体颜色变为 #009688 */
|
|
|
}
|
|
|
|
|
|
/* 分页中的分隔符样式 */
|
|
|
.layui-laypage em {
|
|
|
font-style: normal; /* 去除斜体样式 */
|
|
|
}
|
|
|
|
|
|
/* 分页中间的分隔符样式 */
|
|
|
.layui-laypage .layui-laypage-spr {
|
|
|
color: #999; /* 设置颜色为 #999 */
|
|
|
font-weight: 700; /* 设置字体加粗 */
|
|
|
}
|
|
|
|
|
|
/* 分页链接去除下划线 */
|
|
|
.layui-laypage a {
|
|
|
text-decoration: none; /* 去除文字下划线 */
|
|
|
}
|
|
|
/* 当前页（被选中）样式 */
|
|
|
.layui-laypage-curr {
|
|
|
position: relative; /* 设置元素为相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 当前页中的em标签样式 */
|
|
|
.layui-laypage .layui-laypage-curr em {
|
|
|
position: relative; /* 设置em标签为相对定位 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 当前页的背景色和位置 */
|
|
|
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: -1px; /* 左侧位置偏移1px */
|
|
|
top: -1px; /* 顶部位置偏移1px */
|
|
|
padding: 1px; /* 内边距设置为1px */
|
|
|
width: 100%; /* 宽度占满父元素 */
|
|
|
height: 100%; /* 高度占满父元素 */
|
|
|
background-color: #009688; /* 设置背景色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 当前页背景颜色的圆角设置 */
|
|
|
.layui-laypage-em {
|
|
|
border-radius: 2px; /* 设置圆角半径为2px */
|
|
|
}
|
|
|
|
|
|
/* 翻页按钮（上一页和下一页）的样式 */
|
|
|
.layui-laypage-next em,
|
|
|
.layui-laypage-prev em {
|
|
|
font-family: Sim sun; /* 设置字体为宋体 */
|
|
|
font-size: 16px; /* 设置字体大小为16px */
|
|
|
}
|
|
|
|
|
|
/* 分页信息区域的样式 */
|
|
|
.layui-laypage .layui-laypage-count,
|
|
|
.layui-laypage .layui-laypage-limits,
|
|
|
.layui-laypage .layui-laypage-refresh,
|
|
|
.layui-laypage .layui-laypage-skip {
|
|
|
margin-left: 10px; /* 设置左边距为10px */
|
|
|
margin-right: 10px; /* 设置右边距为10px */
|
|
|
padding: 0; /* 去掉内边距 */
|
|
|
border: none; /* 去掉边框 */
|
|
|
}
|
|
|
|
|
|
/* 页数选择的下拉框和刷新按钮的样式 */
|
|
|
.layui-laypage .layui-laypage-limits,
|
|
|
.layui-laypage .layui-laypage-refresh {
|
|
|
vertical-align: top; /* 设置垂直对齐方式为顶部对齐 */
|
|
|
}
|
|
|
|
|
|
/* 刷新按钮图标样式 */
|
|
|
.layui-laypage .layui-laypage-refresh i {
|
|
|
font-size: 18px; /* 设置图标字体大小为18px */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为指针样式 */
|
|
|
}
|
|
|
|
|
|
/* 分页下拉框的样式 */
|
|
|
.layui-laypage select {
|
|
|
height: 22px; /* 设置下拉框的高度为22px */
|
|
|
padding: 3px; /* 设置内边距为3px */
|
|
|
border-radius: 2px; /* 设置边框圆角为2px */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为指针样式 */
|
|
|
}
|
|
|
|
|
|
/* 分页输入框或下拉框获得焦点时的样式 */
|
|
|
.layui-laypage input:focus,
|
|
|
.layui-laypage select:focus {
|
|
|
border-color: #009688 !important; /* 设置焦点时的边框颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 分页输入框的样式 */
|
|
|
.layui-laypage input {
|
|
|
width: 40px; /* 设置输入框的宽度为40px */
|
|
|
margin: 0 10px; /* 设置左右外边距为10px */
|
|
|
padding: 0 3px; /* 设置左右内边距为3px */
|
|
|
text-align: center; /* 设置文本居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 分页按钮的样式 */
|
|
|
.layui-laypage button {
|
|
|
margin-left: 10px; /* 设置左外边距为10px */
|
|
|
padding: 0 10px; /* 设置水平内边距为10px */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为指针样式 */
|
|
|
}
|
|
|
|
|
|
/* 表格样式 */
|
|
|
.layui-table,
|
|
|
.layui-table-view {
|
|
|
margin: 10px 0; /* 设置上下外边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 加载更多按钮的样式 */
|
|
|
.layui-flow-more {
|
|
|
margin: 10px 0; /* 设置上下外边距为10px */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
color: #999; /* 设置文字颜色为灰色 */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 加载更多按钮中的链接样式 */
|
|
|
.layui-flow-more a {
|
|
|
height: 32px; /* 设置高度为32px */
|
|
|
line-height: 32px; /* 设置行高为32px，使其垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 加载更多按钮中的子元素垂直对齐 */
|
|
|
.layui-flow-more a * {
|
|
|
vertical-align: top; /* 设置子元素顶部对齐 */
|
|
|
}
|
|
|
|
|
|
/* 加载更多按钮的cite标签样式 */
|
|
|
.layui-flow-more a cite {
|
|
|
padding: 0 20px; /* 设置左右内边距为20px */
|
|
|
border-radius: 3px; /* 设置边框圆角为3px */
|
|
|
background-color: #eee; /* 设置背景色为灰色 */
|
|
|
color: #333; /* 设置字体颜色为深灰色 */
|
|
|
font-style: normal; /* 设置字体样式为常规 */
|
|
|
}
|
|
|
|
|
|
/* 加载更多按钮悬停时的效果 */
|
|
|
.layui-flow-more a cite:hover {
|
|
|
opacity: .8; /* 设置悬停时的不透明度为0.8 */
|
|
|
}
|
|
|
/* 设置加载更多按钮中i标签的字体大小和颜色 */
|
|
|
.layui-flow-more a i {
|
|
|
font-size: 30px; /* 设置字体大小为30px */
|
|
|
color: #737383; /* 设置字体颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格的宽度、背景色和字体颜色 */
|
|
|
.layui-table {
|
|
|
width: 100%; /* 设置表格宽度为100% */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
color: #666; /* 设置字体颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格行的过渡效果，使行在状态变化时平滑过渡 */
|
|
|
.layui-table tr {
|
|
|
transition: all .3s; /* 设置所有属性在0.3秒内过渡 */
|
|
|
-webkit-transition: all .3s; /* 为WebKit浏览器添加过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格标题的文本对齐方式和字体加粗 */
|
|
|
.layui-table th {
|
|
|
text-align: left; /* 设置标题文本左对齐 */
|
|
|
font-weight: 400; /* 设置标题文本的字体重量为常规 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格行在鼠标悬停时的背景色，以及其他一些特殊行的样式 */
|
|
|
.layui-table tbody tr:hover, /* 鼠标悬停时表格行的背景色 */
|
|
|
.layui-table thead tr, /* 表头行的背景色 */
|
|
|
.layui-table-click, /* 被点击的行 */
|
|
|
.layui-table-header, /* 表头样式 */
|
|
|
.layui-table-hover, /* 表格悬停效果 */
|
|
|
.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-color: #f2f2f2; /* 设置背景色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格的边框样式 */
|
|
|
.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-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-style: solid; /* 设置边框样式为实线 */
|
|
|
border-color: #e6e6e6; /* 设置边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格单元格的内边距、字体大小和行高 */
|
|
|
.layui-table td, /* 表格单元格 */
|
|
|
.layui-table th { /* 表头单元格 */
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
padding: 9px 15px; /* 设置内边距为9px上下，15px左右 */
|
|
|
min-height: 20px; /* 设置最小高度为20px */
|
|
|
line-height: 20px; /* 设置行高为20px */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 针对line皮肤表格，设置底部边框 */
|
|
|
.layui-table[lay-skin=line] td, /* line皮肤的单元格 */
|
|
|
.layui-table[lay-skin=line] th { /* line皮肤的表头单元格 */
|
|
|
border-width: 0 0 1px; /* 设置底部边框为1px */
|
|
|
}
|
|
|
|
|
|
/* 针对row皮肤表格，设置右侧边框 */
|
|
|
.layui-table[lay-skin=row] td, /* row皮肤的单元格 */
|
|
|
.layui-table[lay-skin=row] th { /* row皮肤的表头单元格 */
|
|
|
border-width: 0 1px 0 0; /* 设置右侧边框为1px */
|
|
|
}
|
|
|
|
|
|
/* 针对nob皮肤表格，去掉边框 */
|
|
|
.layui-table[lay-skin=nob] td, /* nob皮肤的单元格 */
|
|
|
.layui-table[lay-skin=nob] th { /* nob皮肤的表头单元格 */
|
|
|
border: none; /* 去掉所有边框 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格中的图片最大宽度为100px */
|
|
|
.layui-table img {
|
|
|
max-width: 100px; /* 设置图片最大宽度为100px */
|
|
|
}
|
|
|
|
|
|
/* 针对lg大小的表格，增加单元格内边距 */
|
|
|
.layui-table[lay-size=lg] td, /* lg大小表格的单元格 */
|
|
|
.layui-table[lay-size=lg] th { /* lg大小表格的表头单元格 */
|
|
|
padding: 15px 30px; /* 设置内边距为15px上下，30px左右 */
|
|
|
}
|
|
|
|
|
|
/* 针对lg大小的表格，调整单元格的高度和行高 */
|
|
|
.layui-table-view .layui-table[lay-size=lg] .layui-table-cell {
|
|
|
height: 40px; /* 设置单元格高度为40px */
|
|
|
line-height: 40px; /* 设置行高为40px，使其垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 针对sm大小的表格，设置字体大小和内边距 */
|
|
|
.layui-table[lay-size=sm] td, /* sm大小表格的单元格 */
|
|
|
.layui-table[lay-size=sm] th { /* sm大小表格的表头单元格 */
|
|
|
font-size: 12px; /* 设置字体大小为12px */
|
|
|
padding: 5px 10px; /* 设置内边距为5px上下，10px左右 */
|
|
|
}
|
|
|
|
|
|
/* 针对sm大小的表格，调整单元格的高度和行高 */
|
|
|
.layui-table-view .layui-table[lay-size=sm] .layui-table-cell {
|
|
|
height: 20px; /* 设置单元格高度为20px */
|
|
|
line-height: 20px; /* 设置行高为20px，使其垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 隐藏含有lay-data属性的表格 */
|
|
|
.layui-table[lay-data] {
|
|
|
display: none; /* 隐藏含有lay-data属性的表格 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格容器的样式 */
|
|
|
.layui-table-box {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
|
}
|
|
|
/* 设置 layui-table 的基本样式 */
|
|
|
.layui-table-view .layui-table {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
width: auto; /* 设置宽度为自动 */
|
|
|
margin: 0; /* 设置外边距为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格使用 'line' 皮肤时的边框样式 */
|
|
|
.layui-table-view .layui-table[lay-skin=line] {
|
|
|
border-width: 0 1px 0 0; /* 设置右边框为1px，其他边框为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格使用 'row' 皮肤时的边框样式 */
|
|
|
.layui-table-view .layui-table[lay-skin=row] {
|
|
|
border-width: 0 0 1px; /* 设置下边框为1px，其他边框为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格的单元格（td 和 th）的内边距和去掉顶部和左边的边框 */
|
|
|
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
|
|
padding: 5px 0; /* 设置内边距为5px上下，0px左右 */
|
|
|
border-top: none; /* 去掉顶部边框 */
|
|
|
border-left: none; /* 去掉左边边框 */
|
|
|
}
|
|
|
|
|
|
/* 设置表头单元格中不可选状态下的文本样式，并添加指针样式 */
|
|
|
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
|
|
|
cursor: pointer; /* 设置为点击时显示指针 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格单元格的鼠标样式 */
|
|
|
.layui-table-view .layui-table td {
|
|
|
cursor: default; /* 设置为默认的光标样式 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-checkbox 组件在 'primary' 皮肤下的大小 */
|
|
|
.layui-table-view .layui-form-checkbox[lay-skin=primary] i {
|
|
|
width: 18px; /* 设置宽度为18px */
|
|
|
height: 18px; /* 设置高度为18px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 组件的行高和内边距 */
|
|
|
.layui-table-view .layui-form-radio {
|
|
|
line-height: 0; /* 设置行高为0 */
|
|
|
padding: 0; /* 去掉内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-form-radio 内部 i 元素的样式 */
|
|
|
.layui-table-view .layui-form-radio > i {
|
|
|
margin: 0; /* 去掉外边距 */
|
|
|
font-size: 20px; /* 设置字体大小为20px */
|
|
|
}
|
|
|
|
|
|
/* 设置初始化表格的占位层样式 */
|
|
|
.layui-table-init {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置左侧为0 */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
z-index: 110; /* 设置 z-index 为110，确保层级高于其他元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置初始化表格的图标样式 */
|
|
|
.layui-table-init .layui-icon {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 50%; /* 设置水平居中 */
|
|
|
top: 50%; /* 设置垂直居中 */
|
|
|
margin: -15px 0 0 -15px; /* 通过负边距进行精确居中 */
|
|
|
font-size: 30px; /* 设置字体大小为30px */
|
|
|
color: #c2c2c2; /* 设置颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格头部的样式 */
|
|
|
.layui-table-header {
|
|
|
border-width: 0 0 1px; /* 设置底边框为1px，其他边框为0 */
|
|
|
overflow: hidden; /* 设置内容溢出隐藏 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格头部中的表格样式，使表格底部无间隙 */
|
|
|
.layui-table-header .layui-table {
|
|
|
margin-bottom: -1px; /* 设置底部外边距为-1px，去除底部间隙 */
|
|
|
}
|
|
|
|
|
|
/* 设置工具栏中的 inline 元素样式 */
|
|
|
.layui-table-tool .layui-inline[lay-event] {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
width: 26px; /* 设置宽度为26px */
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
padding: 5px; /* 设置内边距为5px */
|
|
|
line-height: 16px; /* 设置行高为16px */
|
|
|
margin-right: 10px; /* 设置右边距为10px */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
color: #333; /* 设置文本颜色为深灰色 */
|
|
|
border: 1px solid #ccc; /* 设置边框颜色为浅灰色 */
|
|
|
cursor: pointer; /* 设置鼠标为指针样式 */
|
|
|
-webkit-transition: .5s all; /* 设置过渡效果（Webkit浏览器） */
|
|
|
transition: .5s all; /* 设置过渡效果（所有浏览器） */
|
|
|
}
|
|
|
|
|
|
/* 设置工具栏中的 inline 元素在鼠标悬停时的样式 */
|
|
|
.layui-table-tool .layui-inline[lay-event]:hover {
|
|
|
border: 1px solid #999; /* 鼠标悬停时改变边框颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置工具栏的临时容器的右侧内边距 */
|
|
|
.layui-table-tool-temp {
|
|
|
padding-right: 120px; /* 设置右侧内边距为120px */
|
|
|
}
|
|
|
|
|
|
/* 设置工具栏中包含按钮的容器样式 */
|
|
|
.layui-table-tool-self {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: 17px; /* 设置右侧距离为17px */
|
|
|
top: 10px; /* 设置顶部距离为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置工具栏中包含按钮的元素的样式 */
|
|
|
.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
|
|
|
margin: 0 0 0 10px; /* 设置左边距为10px */
|
|
|
}
|
|
|
/* 设置 layui-table-tool-panel（表格工具面板）的样式 */
|
|
|
.layui-table-tool-panel {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 29px; /* 设置面板顶部距父元素的距离为29px */
|
|
|
left: -1px; /* 设置面板左侧距离为-1px，使其稍微偏左 */
|
|
|
padding: 5px 0; /* 设置上下内边距为5px，左右内边距为0 */
|
|
|
min-width: 150px; /* 设置最小宽度为150px */
|
|
|
min-height: 40px; /* 设置最小高度为40px */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为1px，颜色为浅灰色 */
|
|
|
text-align: left; /* 设置文本左对齐 */
|
|
|
overflow-y: auto; /* 设置垂直方向上溢出的内容可滚动 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12); /* 设置阴影效果，产生微弱的下方阴影 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格单元格和工具面板中的 li 元素文本溢出时的处理方式 */
|
|
|
.layui-table-cell, .layui-table-tool-panel li {
|
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
|
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置工具面板（li 元素）的样式 */
|
|
|
.layui-table-tool-panel li {
|
|
|
padding: 0 10px; /* 设置左右内边距为10px，上下为0 */
|
|
|
line-height: 30px; /* 设置行高为30px */
|
|
|
-webkit-transition: .5s all; /* 设置过渡效果（Webkit浏览器） */
|
|
|
transition: .5s all; /* 设置过渡效果（所有浏览器） */
|
|
|
}
|
|
|
|
|
|
/* 设置工具面板内复选框（layui-form-checkbox）的样式，特别是在主皮肤下 */
|
|
|
.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
padding-left: 28px; /* 设置左内边距为28px */
|
|
|
}
|
|
|
|
|
|
/* 设置鼠标悬停在工具面板（li 元素）上的样式 */
|
|
|
.layui-table-tool-panel li:hover {
|
|
|
background-color: #f2f2f2; /* 设置背景颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置工具面板中复选框的样式 */
|
|
|
.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] i {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置左侧对齐 */
|
|
|
top: 0; /* 设置顶部对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置工具面板中复选框标签的内边距 */
|
|
|
.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] span {
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-table-tool 面板自适应定位 */
|
|
|
.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
|
|
|
left: auto; /* 自动计算左侧位置 */
|
|
|
right: -1px; /* 设置右侧偏移-1px，使面板稍微偏向右侧 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格列设置按钮的样式 */
|
|
|
.layui-table-col-set {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: 0; /* 设置右侧对齐 */
|
|
|
top: 0; /* 设置顶部对齐 */
|
|
|
width: 20px; /* 设置宽度为20px */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
border-width: 0 0 0 1px; /* 设置左边框为1px，其他边框为0 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格排序按钮的样式 */
|
|
|
.layui-table-sort {
|
|
|
width: 10px; /* 设置宽度为10px */
|
|
|
height: 20px; /* 设置高度为20px */
|
|
|
margin-left: 5px; /* 设置左外边距为5px */
|
|
|
cursor: pointer!important; /* 设置鼠标为指针样式，表示可以点击 */
|
|
|
}
|
|
|
|
|
|
/* 设置排序按钮左侧边缘的样式 */
|
|
|
.layui-table-sort .layui-edge {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 5px; /* 设置左侧对齐 */
|
|
|
border-width: 5px; /* 设置边框宽度为5px */
|
|
|
}
|
|
|
|
|
|
/* 设置升序排序按钮的样式 */
|
|
|
.layui-table-sort .layui-table-sort-asc {
|
|
|
top: 3px; /* 设置顶部对齐为3px */
|
|
|
border-top: none; /* 去掉顶部边框 */
|
|
|
border-bottom-style: solid; /* 设置底部边框为实线 */
|
|
|
border-bottom-color: #b2b2b2; /* 设置底部边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置升序排序按钮悬停时的样式 */
|
|
|
.layui-table-sort .layui-table-sort-asc:hover {
|
|
|
border-bottom-color: #666; /* 鼠标悬停时，底部边框颜色变为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置降序排序按钮的样式 */
|
|
|
.layui-table-sort .layui-table-sort-desc {
|
|
|
bottom: 5px; /* 设置底部对齐为5px */
|
|
|
border-bottom: none; /* 去掉底部边框 */
|
|
|
border-top-style: solid; /* 设置顶部边框为实线 */
|
|
|
border-top-color: #b2b2b2; /* 设置顶部边框颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置降序排序按钮悬停时的样式 */
|
|
|
.layui-table-sort .layui-table-sort-desc:hover {
|
|
|
border-top-color: #666; /* 鼠标悬停时，顶部边框颜色变为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前排序状态为升序时的样式 */
|
|
|
.layui-table-sort[lay-sort=asc] .layui-table-sort-asc {
|
|
|
border-bottom-color: #000; /* 设置升序按钮的底部边框颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前排序状态为降序时的样式 */
|
|
|
.layui-table-sort[lay-sort=desc] {
|
|
|
/* 这里缺少具体样式定义，可能是想设置降序时的外观 */
|
|
|
}
|
|
|
/* 设置降序排序按钮的顶部边框颜色为黑色 */
|
|
|
.layui-table-sort-desc {
|
|
|
border-top-color: #000; /* 设置边框颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格单元格的高度、行高和内边距 */
|
|
|
.layui-table-cell {
|
|
|
height: 28px; /* 设置单元格的高度为28px */
|
|
|
line-height: 28px; /* 设置行高为28px，确保文本垂直居中 */
|
|
|
padding: 0 15px; /* 设置左右内边距为15px，上下内边距为0 */
|
|
|
position: relative; /* 设置单元格为相对定位，以便内部元素定位 */
|
|
|
box-sizing: border-box; /* 包括内边距和边框在内的总宽度和高度 */
|
|
|
}
|
|
|
|
|
|
/* 设置复选框在单元格内的垂直位置 */
|
|
|
.layui-table-cell .layui-form-checkbox[lay-skin=primary] {
|
|
|
top: -1px; /* 设置复选框上移1px */
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格链接文本的颜色为蓝色 */
|
|
|
.layui-table-cell .layui-table-link {
|
|
|
color: #01AAED; /* 设置链接文本颜色为蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置不同类型的表格单元格（复选框、数字、单选框等）的样式 */
|
|
|
.laytable-cell-checkbox,
|
|
|
.laytable-cell-numbers,
|
|
|
.laytable-cell-radio,
|
|
|
.laytable-cell-space {
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
text-align: center; /* 设置文本水平居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格主体区域的位置和溢出处理 */
|
|
|
.layui-table-body {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
overflow: auto; /* 启用自动滚动，允许表格内容溢出时出现滚动条 */
|
|
|
margin-right: -1px; /* 设置右外边距为-1px，去除滚动条的空白 */
|
|
|
margin-bottom: -1px; /* 设置下外边距为-1px，去除底部空白 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格主体区域没有数据时的样式 */
|
|
|
.layui-table-body .layui-none {
|
|
|
line-height: 26px; /* 设置文本行高为26px */
|
|
|
padding: 15px; /* 设置内边距为15px */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
color: #999; /* 设置字体颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置固定表格的样式，确保它定位在正确的位置 */
|
|
|
.layui-table-fixed {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置左侧对齐 */
|
|
|
top: 0; /* 设置顶部对齐 */
|
|
|
z-index: 101; /* 设置z-index为101，确保固定表格在其他元素之上 */
|
|
|
}
|
|
|
|
|
|
/* 设置固定表格的主体区域溢出处理 */
|
|
|
.layui-table-fixed .layui-table-body {
|
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
}
|
|
|
|
|
|
/* 设置左侧固定表格的阴影效果 */
|
|
|
.layui-table-fixed-l {
|
|
|
box-shadow: 0 -1px 8px rgba(0, 0, 0, .08); /* 设置表格左侧阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置右侧固定表格的样式 */
|
|
|
.layui-table-fixed-r {
|
|
|
left: auto; /* 设置自动计算左侧位置 */
|
|
|
right: -1px; /* 设置右侧偏移-1px */
|
|
|
border-width: 0 0 0 1px; /* 设置左边框宽度为1px，其它边框宽度为0 */
|
|
|
box-shadow: -1px 0 8px rgba(0, 0, 0, .08); /* 设置表格右侧阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置右侧固定表格头部区域的溢出处理 */
|
|
|
.layui-table-fixed-r .layui-table-header {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
overflow: visible; /* 允许表头内容溢出 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格修补区域的定位样式 */
|
|
|
.layui-table-mend {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: -49px; /* 设置右偏移量为-49px */
|
|
|
top: 0; /* 设置顶部对齐 */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
width: 50px; /* 设置宽度为50px */
|
|
|
}
|
|
|
|
|
|
/* 设置表格工具区域的样式 */
|
|
|
.layui-table-tool {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
z-index: 890; /* 设置z-index为890，确保工具区域在其他元素之上 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
min-height: 50px; /* 设置最小高度为50px */
|
|
|
line-height: 30px; /* 设置行高为30px */
|
|
|
padding: 10px 15px; /* 设置内边距，顶部和底部为10px，左右为15px */
|
|
|
border-width: 0 0 1px; /* 设置底部边框宽度为1px，其他边框宽度为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格工具区域按钮容器的下外边距 */
|
|
|
.layui-table-tool .layui-btn-container {
|
|
|
margin-bottom: -10px; /* 设置下外边距为-10px */
|
|
|
}
|
|
|
|
|
|
/* 设置表格页码和总条目区域的样式 */
|
|
|
.layui-table-page,
|
|
|
.layui-table-total {
|
|
|
border-width: 1px 0 0; /* 设置顶部边框宽度为1px，其他边框为0 */
|
|
|
margin-bottom: -1px; /* 设置下外边距为-1px */
|
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
}
|
|
|
/* 设置表格分页区域的基础样式 */
|
|
|
.layui-table-page {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
padding: 7px 7px 0; /* 设置上下内边距为7px，底部内边距为0 */
|
|
|
height: 41px; /* 设置高度为41px */
|
|
|
font-size: 12px; /* 设置字体大小为12px */
|
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置分页容器内部的 div 高度 */
|
|
|
.layui-table-page > div {
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
}
|
|
|
|
|
|
/* 设置分页容器的分页组件的外边距 */
|
|
|
.layui-table-page .layui-laypage {
|
|
|
margin: 0; /* 去除外边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置分页链接和页码的样式 */
|
|
|
.layui-table-page .layui-laypage a,
|
|
|
.layui-table-page .layui-laypage span {
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
line-height: 26px; /* 设置行高为26px，确保文本垂直居中 */
|
|
|
margin-bottom: 10px; /* 设置底部外边距为10px */
|
|
|
border: none; /* 去除边框 */
|
|
|
background: 0 0; /* 去除背景 */
|
|
|
}
|
|
|
|
|
|
/* 设置分页链接和当前页码的内边距 */
|
|
|
.layui-table-page .layui-laypage a,
|
|
|
.layui-table-page .layui-laypage span.layui-laypage-curr {
|
|
|
padding: 0 12px; /* 设置左右内边距为12px */
|
|
|
}
|
|
|
|
|
|
/* 设置分页页码的左外边距为0，并去除内边距 */
|
|
|
.layui-table-page .layui-laypage span {
|
|
|
margin-left: 0; /* 设置左外边距为0 */
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置“上一页”按钮的左外边距 */
|
|
|
.layui-table-page .layui-laypage .layui-laypage-prev {
|
|
|
margin-left: -7px !important; /* 强制设置左外边距为-7px */
|
|
|
}
|
|
|
|
|
|
/* 设置当前页码的内嵌元素（如页码高亮样式）的定位和内边距 */
|
|
|
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
|
|
|
left: 0; /* 设置左边距为0 */
|
|
|
top: 0; /* 设置顶部边距为0 */
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置分页按钮和输入框的样式 */
|
|
|
.layui-table-page button,
|
|
|
.layui-table-page input {
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
line-height: 26px; /* 设置行高为26px */
|
|
|
}
|
|
|
|
|
|
/* 设置分页输入框的宽度 */
|
|
|
.layui-table-page .layui-laypage input {
|
|
|
width: 40px; /* 设置宽度为40px */
|
|
|
}
|
|
|
|
|
|
/* 设置分页按钮的内边距 */
|
|
|
.layui-table-page .layui-laypage button {
|
|
|
padding: 0 10px; /* 设置左右内边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置下拉框的样式 */
|
|
|
.layui-table-page select {
|
|
|
height: 18px; /* 设置高度为18px */
|
|
|
}
|
|
|
|
|
|
/* 设置补丁表格的单元格样式 */
|
|
|
.layui-table-patch .layui-table-cell {
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
width: 30px; /* 设置宽度为30px */
|
|
|
}
|
|
|
|
|
|
/* 设置表格编辑区域的基本样式 */
|
|
|
.layui-table-edit {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置左对齐 */
|
|
|
top: 0; /* 设置顶部对齐 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
padding: 0 14px 1px; /* 设置左右内边距为14px，底部内边距为1px */
|
|
|
border-radius: 0; /* 去除边框圆角 */
|
|
|
box-shadow: 1px 1px 20px rgba(0, 0, 0, .15); /* 添加阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格编辑框聚焦时的样式 */
|
|
|
.layui-table-edit:focus {
|
|
|
border-color: #5FB878 !important; /* 设置聚焦时的边框颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格编辑框内的下拉框的样式 */
|
|
|
select.layui-table-edit {
|
|
|
padding: 0 0 0 10px; /* 设置内边距为左边10px */
|
|
|
border-color: #C9C9C9; /* 设置边框颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格中复选框、单选框、开关等表单控件的定位 */
|
|
|
.layui-table-view .layui-form-checkbox,
|
|
|
.layui-table-view .layui-form-radio,
|
|
|
.layui-table-view .layui-form-switch {
|
|
|
top: 0; /* 设置控件上对齐 */
|
|
|
margin: 0; /* 去除外边距 */
|
|
|
box-sizing: content-box; /* 使得盒模型包含内容而不包括边框和内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置复选框的样式 */
|
|
|
.layui-table-view .layui-form-checkbox {
|
|
|
top: -1px; /* 设置复选框上移1px */
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
line-height: 26px; /* 设置行高为26px */
|
|
|
}
|
|
|
|
|
|
/* 设置复选框内图标的样式 */
|
|
|
.layui-table-view .layui-form-checkbox i {
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
}
|
|
|
|
|
|
/* 设置表格网格的单元格溢出处理 */
|
|
|
.layui-table-grid .layui-table-cell {
|
|
|
overflow: visible; /* 设置内容溢出时可见 */
|
|
|
}
|
|
|
/* 设置表格下拉按钮的样式 */
|
|
|
.layui-table-grid-down {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 0; /* 定位在顶部 */
|
|
|
right: 0; /* 定位在右侧 */
|
|
|
width: 26px; /* 设置宽度为26px */
|
|
|
height: 100%; /* 设置高度为100%（占满父容器的高度） */
|
|
|
padding: 5px 0; /* 设置上下内边距为5px */
|
|
|
border-width: 0 0 0 1px; /* 设置左边框宽度为1px，其它边框宽度为0 */
|
|
|
text-align: center; /* 设置文字居中对齐 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
color: #999; /* 设置文本颜色为灰色 */
|
|
|
cursor: pointer; /* 设置鼠标指针为可点击状态 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格下拉按钮内部图标的样式 */
|
|
|
.layui-table-grid-down .layui-icon {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 50%; /* 定位在垂直中间 */
|
|
|
left: 50%; /* 定位在水平中间 */
|
|
|
margin: -8px 0 0 -8px; /* 设置图标的偏移，确保其居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格下拉按钮在悬停时的样式 */
|
|
|
.layui-table-grid-down:hover {
|
|
|
background-color: #fbfbfb; /* 设置悬停时的背景颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格提示层的内容区域样式 */
|
|
|
body .layui-table-tips .layui-layer-content {
|
|
|
background: 0 0; /* 去除背景色 */
|
|
|
padding: 0; /* 去除内边距 */
|
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, .12); /* 设置阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格提示层的主体区域样式 */
|
|
|
.layui-table-tips-main {
|
|
|
margin: -44px 0 0 -1px; /* 设置外边距，上外边距为-44px，左外边距为-1px */
|
|
|
max-height: 150px; /* 设置最大高度为150px */
|
|
|
padding: 8px 15px; /* 设置内边距 */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
overflow-y: scroll; /* 启用垂直滚动条 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
color: #666; /* 设置文本颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格提示层关闭按钮的样式 */
|
|
|
.layui-table-tips-c {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: -3px; /* 定位在右边-3px */
|
|
|
top: -13px; /* 定位在顶部-13px */
|
|
|
width: 20px; /* 设置宽度为20px */
|
|
|
height: 20px; /* 设置高度为20px */
|
|
|
padding: 3px; /* 设置内边距为3px */
|
|
|
cursor: pointer; /* 设置鼠标指针为可点击状态 */
|
|
|
background-color: #666; /* 设置背景色为深灰色 */
|
|
|
border-radius: 50%; /* 设置圆形边框 */
|
|
|
color: #fff; /* 设置文本颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格提示层关闭按钮的悬停样式 */
|
|
|
.layui-table-tips-c:hover {
|
|
|
background-color: #777; /* 设置悬停时的背景色为稍深的灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置表格提示层关闭按钮的伪元素样式 */
|
|
|
.layui-table-tips-c:before {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
right: -2px; /* 设置伪元素偏移-2px */
|
|
|
}
|
|
|
|
|
|
/* 隐藏上传文件按钮 */
|
|
|
.layui-upload-file {
|
|
|
display: none !important; /* 强制隐藏上传按钮 */
|
|
|
opacity: .01; /* 设置透明度为0.01，几乎不可见 */
|
|
|
filter: Alpha(opacity=1); /* 为IE浏览器设置透明度 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传组件外层容器为内联块级元素 */
|
|
|
.layui-upload-drag, .layui-upload-form, .layui-upload-wrap {
|
|
|
display: inline-block; /* 设置为内联块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传文件列表的样式 */
|
|
|
.layui-upload-list {
|
|
|
margin: 10px 0; /* 设置上下外边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置上传文件选择按钮的样式 */
|
|
|
.layui-upload-choose {
|
|
|
padding: 0 10px; /* 设置左右内边距为10px */
|
|
|
color: #999; /* 设置文本颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传拖拽区域的样式 */
|
|
|
.layui-upload-drag {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
padding: 30px; /* 设置内边距为30px */
|
|
|
border: 1px dashed #e2e2e2; /* 设置虚线边框，颜色为灰色 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
cursor: pointer; /* 设置鼠标指针为可点击状态 */
|
|
|
color: #999; /* 设置文本颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传拖拽区域内图标的样式 */
|
|
|
.layui-upload-drag .layui-icon {
|
|
|
font-size: 50px; /* 设置图标的字体大小为50px */
|
|
|
color: #009688; /* 设置图标颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传拖拽区域在悬停时的边框颜色 */
|
|
|
.layui-upload-drag[lay-over] {
|
|
|
border-color: #009688; /* 设置悬停时的边框颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传文件嵌套的 iframe 样式 */
|
|
|
.layui-upload-iframe {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
width: 0; /* 设置宽度为0 */
|
|
|
height: 0; /* 设置高度为0 */
|
|
|
border: 0; /* 去除边框 */
|
|
|
visibility: hidden; /* 设置为不可见 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传容器的样式 */
|
|
|
.layui-upload-wrap {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
vertical-align: middle; /* 设置垂直居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置上传容器内上传文件按钮的样式 */
|
|
|
.layui-upload-wrap .layui-upload-file {
|
|
|
display: block !important; /* 强制设置为块级元素 */
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 定位在左侧 */
|
|
|
top: 0; /* 定位在顶部 */
|
|
|
z-index: 10; /* 设置堆叠顺序，确保按钮在最上层 */
|
|
|
font-size: 100px; /* 设置字体大小为100px */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
opacity: .01; /* 设置透明度为0.01，几乎不可见 */
|
|
|
filter: Alpha(opacity=1); /* 为IE浏览器设置透明度 */
|
|
|
cursor: pointer; /* 设置鼠标指针为可点击状态 */
|
|
|
}
|
|
|
/* 设置 layui-tree（树形控件）容器的行高 */
|
|
|
.layui-tree {
|
|
|
line-height: 26px; /* 设置行高为26px，控制树形项的高度 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件的列表项（li）的溢出文本处理 */
|
|
|
.layui-tree li {
|
|
|
text-overflow: ellipsis; /* 当文本超出容器宽度时，使用省略号表示 */
|
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
|
white-space: nowrap; /* 禁止换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项的展开按钮和链接（a）的样式 */
|
|
|
.layui-tree li .layui-tree-spread,
|
|
|
.layui-tree li a {
|
|
|
display: inline-block; /* 设置为内联块元素，使得元素占据宽度且支持设置宽高 */
|
|
|
vertical-align: top; /* 设置垂直对齐方式为顶部对齐 */
|
|
|
height: 26px; /* 设置高度为26px */
|
|
|
*display: inline; /* 兼容IE6，设置为内联元素 */
|
|
|
*zoom: 1; /* 兼容IE6，触发hasLayout，使元素表现得像块级元素 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时显示为指针形状，表示可点击 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项的链接（a）字体大小为0，去除默认的间距 */
|
|
|
.layui-tree li a {
|
|
|
font-size: 0; /* 设置字体大小为0，通常用来去除空白间隙 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项的链接内图标（i）字体大小为16px */
|
|
|
.layui-tree li a i {
|
|
|
font-size: 16px; /* 设置图标的字体大小为16px */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项链接文本（cite）的内边距和字体大小 */
|
|
|
.layui-tree li a cite {
|
|
|
padding: 0 6px; /* 设置左右内边距为6px */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
font-style: normal; /* 禁用斜体样式 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项内的图标（i）的样式 */
|
|
|
.layui-tree li i {
|
|
|
padding-left: 6px; /* 设置左内边距为6px，确保图标与其他内容有间隔 */
|
|
|
color: #333; /* 设置图标颜色为深灰色 */
|
|
|
-moz-user-select: none; /* 禁止在 Firefox 浏览器中选择文本 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项复选框的字体大小为13px */
|
|
|
.layui-tree li .layui-tree-check {
|
|
|
font-size: 13px; /* 设置复选框字体大小 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项复选框在悬停时的颜色变化 */
|
|
|
.layui-tree li .layui-tree-check:hover {
|
|
|
color: #009E94; /* 设置悬停时的颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件项的子项列表（ul）的样式 */
|
|
|
.layui-tree li ul {
|
|
|
display: none; /* 初始状态下，隐藏子项列表 */
|
|
|
margin-left: 20px; /* 设置左外边距为20px，用于缩进子项 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件展开或折叠时，显示的内容框的样式 */
|
|
|
.layui-tree li .layui-tree-enter {
|
|
|
line-height: 24px; /* 设置行高为24px */
|
|
|
border: 1px dotted #000; /* 设置边框为1px点状黑色边框 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件拖拽时显示的拖拽框样式 */
|
|
|
.layui-tree-drag {
|
|
|
display: none; /* 默认隐藏拖拽框 */
|
|
|
position: absolute; /* 设置为绝对定位，放置在页面上特定位置 */
|
|
|
left: -666px; /* 初始位置设置为屏幕外，确保不可见 */
|
|
|
top: -666px; /* 初始位置设置为屏幕外 */
|
|
|
background-color: #f2f2f2; /* 设置背景色为浅灰色 */
|
|
|
padding: 5px 10px; /* 设置内边距为5px上下，10px左右 */
|
|
|
border: 1px dotted #000; /* 设置边框为1px点状黑色边框 */
|
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形控件拖拽时，拖拽框内图标的样式 */
|
|
|
.layui-tree-drag i {
|
|
|
padding-right: 5px; /* 设置右内边距为5px */
|
|
|
}
|
|
|
|
|
|
/* 设置导航条（.layui-nav）样式 */
|
|
|
.layui-nav {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
padding: 0 20px; /* 设置左右内边距为20px */
|
|
|
background-color: #393D49; /* 设置背景色为深灰色 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
border-radius: 2px; /* 设置圆角为2px */
|
|
|
font-size: 0; /* 设置字体大小为0，通常用来去除间隙 */
|
|
|
box-sizing: border-box; /* 设置盒模型为border-box，包含边框和内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置导航条内所有元素的字体大小为14px */
|
|
|
.layui-nav * {
|
|
|
font-size: 14px; /* 设置导航条内所有元素的字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 设置导航条项目（.layui-nav-item）样式 */
|
|
|
.layui-nav .layui-nav-item {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
display: inline-block; /* 设置为内联块元素，使其水平排列 */
|
|
|
*display: inline; /* 兼容IE6，设置为内联元素 */
|
|
|
*zoom: 1; /* 兼容IE6，触发hasLayout */
|
|
|
vertical-align: middle; /* 设置垂直对齐方式为居中 */
|
|
|
line-height: 60px; /* 设置行高为60px，使得垂直方向上的文本居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置导航条项目（.layui-nav-item）链接（a）的样式 */
|
|
|
.layui-nav .layui-nav-item a {
|
|
|
display: block; /* 设置为块级元素，确保链接占据整个项的宽度 */
|
|
|
padding: 0 20px; /* 设置左右内边距为20px */
|
|
|
color: #fff; /* 设置文本颜色为白色 */
|
|
|
color: rgba(255, 255, 255, .7); /* 设置文本颜色为半透明白色 */
|
|
|
transition: all .3s; /* 设置平滑过渡效果，持续时间为0.3秒 */
|
|
|
-webkit-transition: all .3s; /* 兼容旧版Safari */
|
|
|
}
|
|
|
/* 设置选中项（.layui-this）及其他相关元素的伪元素（:after）的样式 */
|
|
|
.layui-nav .layui-this:after,
|
|
|
.layui-nav-bar,
|
|
|
.layui-nav-tree .layui-nav-itemed:after {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置从左边开始 */
|
|
|
top: 0; /* 设置从顶部开始 */
|
|
|
width: 0; /* 初始宽度为0，用于过渡效果 */
|
|
|
height: 5px; /* 设置高度为5px，通常是用于指示选中项的底部条 */
|
|
|
background-color: #5FB878; /* 设置底部条的背景色为绿色 */
|
|
|
transition: all .2s; /* 设置过渡效果，所有属性在0.2秒内平滑变化 */
|
|
|
-webkit-transition: all .2s; /* 兼容旧版Safari */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-nav-bar 元素的层级，使其在其他元素之上 */
|
|
|
.layui-nav-bar {
|
|
|
z-index: 1000; /* 设置 z-index 为1000，确保其位于其他元素之上 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前选中项的链接颜色为白色 */
|
|
|
.layui-nav .layui-nav-item a:hover,
|
|
|
.layui-nav .layui-this a {
|
|
|
color: #fff; /* 鼠标悬停或当前选中时，链接文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中项（.layui-this）下方伪元素的样式 */
|
|
|
.layui-nav .layui-this:after {
|
|
|
content: ''; /* 内容为空，用于清除默认内容 */
|
|
|
top: auto; /* 取消顶部定位 */
|
|
|
bottom: 0; /* 设置底部定位为0，确保底部条在底部 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
}
|
|
|
|
|
|
/* 设置导航项的头像样式 */
|
|
|
.layui-nav-img {
|
|
|
width: 30px; /* 设置宽度为30px */
|
|
|
height: 30px; /* 设置高度为30px */
|
|
|
margin-right: 10px; /* 设置右外边距为10px */
|
|
|
border-radius: 50%; /* 设置圆角为50%，使其成为圆形 */
|
|
|
}
|
|
|
|
|
|
/* 设置更多按钮的样式，通常用于展开子菜单 */
|
|
|
.layui-nav .layui-nav-more {
|
|
|
content: ''; /* 内容为空 */
|
|
|
width: 0; /* 初始宽度为0，用于过渡效果 */
|
|
|
height: 0; /* 初始高度为0 */
|
|
|
border-style: solid dashed dashed; /* 设置边框样式为实线、虚线、虚线 */
|
|
|
border-color: #fff transparent transparent; /* 设置边框颜色，顶部为白色，其他为透明 */
|
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为指针形状，表示可点击 */
|
|
|
transition: all .2s; /* 设置过渡效果，所有属性在0.2秒内平滑变化 */
|
|
|
-webkit-transition: all .2s; /* 兼容旧版Safari */
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 50%; /* 设置垂直方向居中 */
|
|
|
right: 3px; /* 设置右外边距为3px */
|
|
|
margin-top: -3px; /* 调整垂直位置，使其居中 */
|
|
|
border-width: 6px; /* 设置边框宽度为6px */
|
|
|
border-top-color: rgba(255, 255, 255, .7); /* 设置顶部边框颜色为半透明白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置展开子菜单时，更多按钮的样式 */
|
|
|
.layui-nav .layui-nav-mored,
|
|
|
.layui-nav-itemed > a .layui-nav-more {
|
|
|
margin-top: -9px; /* 设置垂直方向上的外边距 */
|
|
|
border-style: dashed dashed solid; /* 设置边框样式为虚线、虚线、实线 */
|
|
|
border-color: transparent transparent #fff; /* 设置边框颜色，顶部和左边透明，底部为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单的样式，初始为隐藏 */
|
|
|
.layui-nav-child {
|
|
|
display: none; /* 隐藏子菜单 */
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 0; /* 设置左侧对齐 */
|
|
|
top: 65px; /* 设置顶部距离为65px，确保显示在父项下方 */
|
|
|
min-width: 100%; /* 设置最小宽度为100% */
|
|
|
line-height: 36px; /* 设置行高为36px，调整菜单项的高度 */
|
|
|
padding: 5px 0; /* 设置上下内边距为5px */
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12); /* 设置阴影效果 */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为1px实线，颜色为浅灰色 */
|
|
|
background-color: #fff; /* 设置背景色为白色 */
|
|
|
z-index: 100; /* 设置层级，使其在其他元素之上 */
|
|
|
border-radius: 2px; /* 设置圆角为2px */
|
|
|
white-space: nowrap; /* 防止文字换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项链接的颜色 */
|
|
|
.layui-nav .layui-nav-child a {
|
|
|
color: #333; /* 设置链接颜色为深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项链接悬停时的样式 */
|
|
|
.layui-nav .layui-nav-child a:hover {
|
|
|
background-color: #f2f2f2; /* 悬停时背景颜色变为浅灰色 */
|
|
|
color: #000; /* 悬停时文字颜色变为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项（dd）的相对定位 */
|
|
|
.layui-nav-child dd {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前选中项（.layui-this）在子菜单中的样式 */
|
|
|
.layui-nav .layui-nav-child dd.layui-this a,
|
|
|
.layui-nav-child dd.layui-this {
|
|
|
background-color: #5FB878; /* 设置选中项的背景色为绿色 */
|
|
|
color: #fff; /* 设置选中项的文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 隐藏选中项的下划线 */
|
|
|
.layui-nav-child dd.layui-this:after {
|
|
|
display: none; /* 隐藏伪元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形导航的样式 */
|
|
|
.layui-nav-tree {
|
|
|
width: 200px; /* 设置宽度为200px */
|
|
|
padding: 0; /* 设置无内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形导航的导航项（.layui-nav-item）样式 */
|
|
|
.layui-nav-tree .layui-nav-item {
|
|
|
display: block; /* 设置为块级元素，确保每个项占据一行 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
line-height: 45px; /* 设置行高为45px，控制项的高度 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形导航项的链接样式 */
|
|
|
.layui-nav-tree .layui-nav-item a {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
height: 45px; /* 设置高度为45px */
|
|
|
line-height: 45px; /* 设置行高为45px，确保文本垂直居中 */
|
|
|
text-overflow: ellipsis; /* 设置文本溢出时显示省略号 */
|
|
|
overflow: hidden; /* 隐藏溢出部分 */
|
|
|
white-space: nowrap; /* 禁止换行 */
|
|
|
}
|
|
|
|
|
|
/* 设置树形导航项的链接悬停样式 */
|
|
|
.layui-nav-tree .layui-nav-item a:hover {
|
|
|
background-color: #4E5465; /* 悬停时背景色变为深灰色 */
|
|
|
}
|
|
|
/* 设置 layui-nav-tree 内的导航条宽度和背景色 */
|
|
|
.layui-nav-tree .layui-nav-bar {
|
|
|
width: 5px; /* 设置导航条的宽度为5px */
|
|
|
height: 0; /* 设置高度为0 */
|
|
|
background-color: #009688; /* 设置背景色为 #009688 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中的子菜单的背景色和文字颜色 */
|
|
|
.layui-nav-tree .layui-nav-child dd.layui-this,
|
|
|
.layui-nav-tree .layui-nav-child dd.layui-this a,
|
|
|
.layui-nav-tree .layui-this,
|
|
|
.layui-nav-tree .layui-this>a,
|
|
|
.layui-nav-tree .layui-this>a:hover {
|
|
|
background-color: #009688; /* 设置选中项的背景色 */
|
|
|
color: #fff; /* 设置文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 隐藏选中项的 after 伪元素 */
|
|
|
.layui-nav-tree .layui-this:after {
|
|
|
display: none; /* 隐藏选中项的下标 */
|
|
|
}
|
|
|
|
|
|
/* 设置已展开的导航项颜色 */
|
|
|
.layui-nav-itemed>a,
|
|
|
.layui-nav-tree .layui-nav-title a,
|
|
|
.layui-nav-tree .layui-nav-title a:hover {
|
|
|
color: #fff!important; /* 设置导航项颜色为白色并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单的样式 */
|
|
|
.layui-nav-tree .layui-nav-child {
|
|
|
position: relative; /* 设置子菜单相对定位 */
|
|
|
z-index: 0; /* 设置 z-index 为 0 */
|
|
|
top: 0; /* 设置顶部位置为0 */
|
|
|
border: none; /* 去掉边框 */
|
|
|
box-shadow: none; /* 去掉阴影 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项链接的样式 */
|
|
|
.layui-nav-tree .layui-nav-child a {
|
|
|
height: 40px; /* 设置子菜单项的高度为40px */
|
|
|
line-height: 40px; /* 设置行高为40px，使文本垂直居中 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
color: rgba(255, 255, 255, .7); /* 设置字体颜色为白色，并且具有透明度 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项的 hover 状态下的背景色和字体颜色 */
|
|
|
.layui-nav-tree .layui-nav-child,
|
|
|
.layui-nav-tree .layui-nav-child a:hover {
|
|
|
background: 0 0; /* 设置背景为透明 */
|
|
|
color: #fff; /* 设置文字颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置更多按钮的位置 */
|
|
|
.layui-nav-tree .layui-nav-more {
|
|
|
right: 10px; /* 设置更多按钮距离右侧为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置已展开的子菜单项的背景色 */
|
|
|
.layui-nav-itemed>.layui-nav-child {
|
|
|
display: block; /* 设置已展开的子菜单项为块级元素 */
|
|
|
padding: 0; /* 去掉内边距 */
|
|
|
background-color: rgba(0, 0, 0, .3)!important; /* 设置背景色并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置子菜单项的选中项的子菜单的显示 */
|
|
|
.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child {
|
|
|
display: block; /* 显示子菜单 */
|
|
|
}
|
|
|
|
|
|
/* 设置侧边栏的样式 */
|
|
|
.layui-nav-side {
|
|
|
position: fixed; /* 设置为固定定位 */
|
|
|
top: 0; /* 设置顶部位置为0 */
|
|
|
bottom: 0; /* 设置底部位置为0 */
|
|
|
left: 0; /* 设置左侧位置为0 */
|
|
|
overflow-x: hidden; /* 设置水平方向隐藏溢出内容 */
|
|
|
z-index: 999; /* 设置 z-index 为 999，使其处于顶层 */
|
|
|
}
|
|
|
|
|
|
/* 设置蓝色背景时的导航条样式 */
|
|
|
.layui-bg-blue .layui-nav-bar,
|
|
|
.layui-bg-blue .layui-nav-itemed:after,
|
|
|
.layui-bg-blue .layui-this:after {
|
|
|
background-color: #93D1FF; /* 设置背景色为淡蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置蓝色背景下的选中子菜单的背景色 */
|
|
|
.layui-bg-blue .layui-nav-child dd.layui-this {
|
|
|
background-color: #1E9FFF; /* 设置选中的子菜单项背景色为蓝色 */
|
|
|
}
|
|
|
|
|
|
/* 设置蓝色背景下已展开导航项的颜色 */
|
|
|
.layui-bg-blue .layui-nav-itemed>a,
|
|
|
.layui-nav-tree.layui-bg-blue .layui-nav-title a,
|
|
|
.layui-nav-tree .layui-nav-title a:hover {
|
|
|
background-color: #007DDB!important; /* 设置已展开的项背景色并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑导航的样式 */
|
|
|
.layui-breadcrumb {
|
|
|
visibility: hidden; /* 隐藏面包屑导航 */
|
|
|
font-size: 0; /* 设置字体大小为0 */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑中的子元素字体大小 */
|
|
|
.layui-breadcrumb>* {
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑导航链接的颜色 */
|
|
|
.layui-breadcrumb a {
|
|
|
color: #999!important; /* 设置链接文字颜色为灰色，并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑导航链接的 hover 状态 */
|
|
|
.layui-breadcrumb a:hover {
|
|
|
color: #5FB878!important; /* 设置鼠标悬停时的颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑导航的引用文本颜色 */
|
|
|
.layui-breadcrumb a cite {
|
|
|
color: #666; /* 设置引用文本颜色为深灰色 */
|
|
|
font-style: normal; /* 取消斜体样式 */
|
|
|
}
|
|
|
|
|
|
/* 设置面包屑中分隔符的样式 */
|
|
|
.layui-breadcrumb span[lay-separator] {
|
|
|
margin: 0 10px; /* 设置左右间距为10px */
|
|
|
color: #999; /* 设置颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置标签的样式 */
|
|
|
.layui-tab {
|
|
|
margin: 10px 0; /* 设置上下间距为10px */
|
|
|
text-align: left!important; /* 设置文本左对齐并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置有 overflow 属性的标签标题的溢出处理 */
|
|
|
.layui-tab[overflow]>.layui-tab-title {
|
|
|
overflow: hidden; /* 设置超出部分隐藏 */
|
|
|
}
|
|
|
/* 设置 .layui-tab-title 的基本样式 */
|
|
|
.layui-tab-title {
|
|
|
position: relative; /* 设置相对定位，使子元素可以使用绝对定位 */
|
|
|
left: 0; /* 设置左侧位置为0 */
|
|
|
height: 40px; /* 设置高度为 40px */
|
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
|
font-size: 0; /* 设置字体大小为 0，后续通过子元素来设置字体大小 */
|
|
|
border-bottom-width: 1px; /* 设置底部边框宽度为 1px */
|
|
|
border-bottom-style: solid; /* 设置底部边框为实线 */
|
|
|
transition: all .2s; /* 设置所有属性的过渡效果，持续时间为0.2秒 */
|
|
|
-webkit-transition: all .2s; /* 设置 Webkit 浏览器下的过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-title 中每个 li 元素的样式 */
|
|
|
.layui-tab-title li {
|
|
|
display: inline-block; /* 设置为行内块元素，使元素水平排列 */
|
|
|
*display: inline; /* 为兼容 IE6/7 设置 display 为 inline */
|
|
|
*zoom: 1; /* 触发 hasLayout 属性以修复 IE6/7 渲染问题 */
|
|
|
vertical-align: middle; /* 设置垂直居中 */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
transition: all .2s; /* 设置过渡效果 */
|
|
|
-webkit-transition: all .2s; /* 设置 Webkit 浏览器下的过渡效果 */
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
line-height: 40px; /* 设置行高为 40px，使文本垂直居中 */
|
|
|
min-width: 65px; /* 设置最小宽度为 65px */
|
|
|
padding: 0 15px; /* 设置左右内边距为 15px */
|
|
|
text-align: center; /* 设置文本水平居中 */
|
|
|
cursor: pointer; /* 设置鼠标样式为指针，表示可点击 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-title 中 li 元素中的 a 标签的样式 */
|
|
|
.layui-tab-title li a {
|
|
|
display: block; /* 设置 a 标签为块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中项 (class="layui-this") 的文字颜色 */
|
|
|
.layui-tab-title .layui-this {
|
|
|
color: #000; /* 设置选中项的文字颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 设置选中项后面的小三角（伪元素）的样式 */
|
|
|
.layui-tab-title .layui-this:after {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 设置左侧为0 */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
content: ''; /* 伪元素的内容为空 */
|
|
|
width: 100%; /* 宽度为100% */
|
|
|
height: 41px; /* 设置高度为41px */
|
|
|
border-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
border-bottom-color: #fff; /* 设置底部边框颜色为白色 */
|
|
|
border-radius: 2px 2px 0 0; /* 设置圆角，顶部圆角为2px */
|
|
|
box-sizing: border-box; /* 设置盒子模型为边框盒模型 */
|
|
|
pointer-events: none; /* 禁用鼠标事件，避免影响交互 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-bar 样式（右侧的箭头按钮） */
|
|
|
.layui-tab-bar {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
right: 0; /* 设置右侧为0 */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
z-index: 10; /* 设置堆叠顺序，确保在上方 */
|
|
|
width: 30px; /* 设置宽度为30px */
|
|
|
height: 39px; /* 设置高度为39px */
|
|
|
line-height: 39px; /* 设置行高为39px，使图标垂直居中 */
|
|
|
border-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
border-radius: 2px; /* 设置边框圆角为2px */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
cursor: pointer; /* 设置鼠标样式为指针 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-bar 中的图标样式 */
|
|
|
.layui-tab-bar .layui-icon {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
display: inline-block; /* 设置为行内块元素 */
|
|
|
top: 3px; /* 设置图标上移 3px */
|
|
|
transition: all .3s; /* 设置过渡效果 */
|
|
|
-webkit-transition: all .3s; /* 设置 Webkit 浏览器下的过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-item 样式 */
|
|
|
.layui-tab-item {
|
|
|
display: none; /* 默认隐藏选项卡内容 */
|
|
|
}
|
|
|
|
|
|
/* 设置更多选项的样式 */
|
|
|
.layui-tab-more {
|
|
|
padding-right: 30px; /* 设置右侧内边距为30px */
|
|
|
height: auto !important; /* 设置高度为自动，并且加上重要性标记 */
|
|
|
white-space: normal !important; /* 使文字换行，并加上重要性标记 */
|
|
|
}
|
|
|
|
|
|
/* 设置更多选项中选中项的下划线颜色 */
|
|
|
.layui-tab-more li.layui-this:after {
|
|
|
border-bottom-color: #e2e2e2; /* 设置选中项下方的边框颜色为灰色 */
|
|
|
border-radius: 2px; /* 设置圆角 */
|
|
|
}
|
|
|
|
|
|
/* 设置更多按钮中的箭头图标 */
|
|
|
.layui-tab-more .layui-tab-bar .layui-icon {
|
|
|
top: -2px; /* 设置箭头上移 */
|
|
|
top: 3px \9; /* 为 IE9 设置额外的定位 */
|
|
|
-webkit-transform: rotate(180deg); /* 设置图标旋转180度 */
|
|
|
transform: rotate(180deg); /* 设置图标旋转180度 */
|
|
|
}
|
|
|
|
|
|
/* 适配 IE9 */
|
|
|
:root .layui-tab-more .layui-tab-bar .layui-icon {
|
|
|
top: -2px\0; /* 为 IE9 设置额外的定位 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-content 中的样式 */
|
|
|
.layui-tab-content {
|
|
|
padding: 10px; /* 设置内边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置选项卡标题中的关闭按钮样式 */
|
|
|
.layui-tab-title li .layui-tab-close {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
display: inline-block; /* 设置为行内块元素 */
|
|
|
width: 18px; /* 设置宽度为18px */
|
|
|
height: 18px; /* 设置高度为18px */
|
|
|
line-height: 20px; /* 设置行高为20px */
|
|
|
margin-left: 8px; /* 设置左侧外边距为8px */
|
|
|
top: 1px; /* 上移1px */
|
|
|
text-align: center; /* 设置文字居中 */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
color: #c2c2c2; /* 设置字体颜色为浅灰色 */
|
|
|
transition: all .2s; /* 设置过渡效果 */
|
|
|
-webkit-transition: all .2s; /* 设置 Webkit 浏览器下的过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置关闭按钮的悬停状态 */
|
|
|
.layui-tab-title li .layui-tab-close:hover {
|
|
|
border-radius: 2px; /* 设置圆角 */
|
|
|
background-color: #FF5722; /* 设置背景颜色为橙色 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置简洁模式下选中项的颜色 */
|
|
|
.layui-tab-brief > .layui-tab-title .layui-this {
|
|
|
color: #009688; /* 设置选中项颜色为 #009688 */
|
|
|
}
|
|
|
/* 设置 .layui-tab-brief 中 .layui-tab-more 和 .layui-tab-title 的选中项（.layui-this）的下划线样式 */
|
|
|
.layui-tab-brief>.layui-tab-more li.layui-this:after,
|
|
|
.layui-tab-brief>.layui-tab-title .layui-this:after {
|
|
|
border: none; /* 去掉边框 */
|
|
|
border-radius: 0; /* 去掉圆角 */
|
|
|
border-bottom: 2px solid #5FB878; /* 设置下边框为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 当 .layui-tab-brief 设置了 overflow 属性时，调整 .layui-tab-title 中选中项的伪元素位置 */
|
|
|
.layui-tab-brief[overflow]>.layui-tab-title .layui-this:after {
|
|
|
top: -1px; /* 将伪元素向上偏移 1px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 的外观样式，包括边框、圆角和阴影效果 */
|
|
|
.layui-tab-card {
|
|
|
border-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
border-radius: 2px; /* 设置圆角为 2px */
|
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); /* 设置阴影效果，深度为 5px，透明度为 10% */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中 .layui-tab-title 的背景颜色 */
|
|
|
.layui-tab-card>.layui-tab-title {
|
|
|
background-color: #f2f2f2; /* 设置背景色为淡灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中每个 li 标签的左右边距为 -1px，避免标签之间的间隙 */
|
|
|
.layui-tab-card>.layui-tab-title li {
|
|
|
margin-right: -1px; /* 右边距为 -1px */
|
|
|
margin-left: -1px; /* 左边距为 -1px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中选中项的背景颜色 */
|
|
|
.layui-tab-card>.layui-tab-title .layui-this {
|
|
|
background-color: #fff; /* 设置选中项的背景色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中选中项下边框的样式 */
|
|
|
.layui-tab-card>.layui-tab-title .layui-this:after {
|
|
|
border-top: none; /* 去掉上边框 */
|
|
|
border-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-bottom-color: #fff; /* 设置下边框颜色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中 .layui-tab-bar 的样式，调整高度和边框 */
|
|
|
.layui-tab-card>.layui-tab-title .layui-tab-bar {
|
|
|
height: 40px; /* 设置高度为40px */
|
|
|
line-height: 40px; /* 设置行高为40px，使文字垂直居中 */
|
|
|
border-radius: 0; /* 去掉圆角 */
|
|
|
border-top: none; /* 去掉顶部边框 */
|
|
|
border-right: none; /* 去掉右边框 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中 .layui-tab-more 的选中项样式 */
|
|
|
.layui-tab-card>.layui-tab-more .layui-this {
|
|
|
background: 0 0; /* 设置背景为透明 */
|
|
|
color: #5FB878; /* 设置选中项的字体颜色为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-card 中 .layui-tab-more 选中项的伪元素样式 */
|
|
|
.layui-tab-card>.layui-tab-more .layui-this:after {
|
|
|
border: none; /* 去掉伪元素的边框 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline 的左侧内边距 */
|
|
|
.layui-timeline {
|
|
|
padding-left: 5px; /* 设置左侧内边距为5px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-item 的样式，包括相对定位和底部内边距 */
|
|
|
.layui-timeline-item {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
padding-bottom: 20px; /* 设置底部内边距为20px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-axis 的样式，定位和圆形样式 */
|
|
|
.layui-timeline-axis {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: -5px; /* 向左偏移5px */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
z-index: 10; /* 设置堆叠顺序，确保在其他元素之上 */
|
|
|
width: 20px; /* 设置宽度为20px */
|
|
|
height: 20px; /* 设置高度为20px */
|
|
|
line-height: 20px; /* 设置行高为20px，使内容垂直居中 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
color: #5FB878; /* 设置文字颜色为绿色 */
|
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
|
text-align: center; /* 设置文字居中 */
|
|
|
cursor: pointer; /* 设置鼠标指针为手形，表示可点击 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-axis 的悬停效果，当鼠标悬停时，文字颜色变为橙色 */
|
|
|
.layui-timeline-axis:hover {
|
|
|
color: #FF5722; /* 设置悬停时文字颜色为橙色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-item 的伪元素样式，用于绘制时间轴的线 */
|
|
|
.layui-timeline-item:before {
|
|
|
content: ''; /* 伪元素内容为空 */
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 5px; /* 向右偏移5px */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
z-index: 0; /* 设置堆叠顺序，确保在其他内容之下 */
|
|
|
width: 1px; /* 设置宽度为1px */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-item 的最后一个元素的伪元素不显示 */
|
|
|
.layui-timeline-item:last-child:before {
|
|
|
display: none; /* 隐藏最后一个 .layui-timeline-item 的伪元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-item 的第一个元素的伪元素显示 */
|
|
|
.layui-timeline-item:first-child:before {
|
|
|
display: block; /* 显示第一个 .layui-timeline-item 的伪元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-content 的左侧内边距 */
|
|
|
.layui-timeline-content {
|
|
|
padding-left: 25px; /* 设置左侧内边距为25px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-timeline-title 的样式，包括相对定位和底部外边距 */
|
|
|
.layui-timeline-title {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
margin-bottom: 10px; /* 设置底部外边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-badge、.layui-badge-dot 和 .layui-badge-rim 的样式 */
|
|
|
.layui-badge, .layui-badge-dot, .layui-badge-rim {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
display: inline-block; /* 设置为行内块元素 */
|
|
|
padding: 0 6px; /* 设置左右内边距为6px */
|
|
|
font-size: 12px; /* 设置字体大小为12px */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
background-color: #FF5722; /* 设置背景颜色为橙色 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
border-radius: 2px; /* 设置圆角为2px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-badge 的高度和行高 */
|
|
|
.layui-badge {
|
|
|
height: 18px; /* 设置高度为18px */
|
|
|
line-height: 18px; /* 设置行高为18px，使文字垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-badge-dot 的大小和圆形样式 */
|
|
|
.layui-badge-dot {
|
|
|
width: 8px; /* 设置宽度为8px */
|
|
|
height: 8px; /* 设置高度为8px */
|
|
|
padding: 0; /* 去掉内边距 */
|
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
|
}
|
|
|
/* 设置 layui-badge-rim 的高度、行高、边框、背景颜色和文字颜色 */
|
|
|
.layui-badge-rim {
|
|
|
height: 18px; /* 设置高度为18px */
|
|
|
line-height: 18px; /* 设置行高为18px，使文字垂直居中 */
|
|
|
border-width: 1px; /* 设置边框宽度为1px */
|
|
|
border-style: solid; /* 设置边框为实线 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
color: #666; /* 设置文字颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-btn 中的徽章与徽章点之间的左边距 */
|
|
|
.layui-btn .layui-badge, .layui-btn .layui-badge-dot {
|
|
|
margin-left: 5px; /* 左边距为5px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-nav 中的徽章与徽章点的位置，绝对定位居中 */
|
|
|
.layui-nav .layui-badge, .layui-nav .layui-badge-dot {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 50%; /* 设置距离顶部为 50%，使其垂直居中 */
|
|
|
margin: -8px 6px 0; /* 向上偏移 8px，使徽章与内容对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-tab-title 中徽章的位置 */
|
|
|
.layui-tab-title .layui-badge, .layui-tab-title .layui-badge-dot {
|
|
|
left: 5px; /* 左边距为5px */
|
|
|
top: -2px; /* 上边距为-2px，调整徽章的位置 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel 的样式，包含背景颜色和相对定位 */
|
|
|
.layui-carousel {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
left: 0; /* 设置左边距为0 */
|
|
|
top: 0; /* 设置上边距为0 */
|
|
|
background-color: #f8f8f8; /* 设置背景颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel > [carousel-item] 的样式，确保每个项都是 100% 宽高 */
|
|
|
.layui-carousel > [carousel-item] {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
width: 100%; /* 设置宽度为 100% */
|
|
|
height: 100%; /* 设置高度为 100% */
|
|
|
overflow: hidden; /* 隐藏超出部分 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel > [carousel-item] 的伪元素样式，用于显示加载图标 */
|
|
|
.layui-carousel > [carousel-item]:before {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
content: '\e63d'; /* 使用layui图标字体 */
|
|
|
left: 50%; /* 水平居中 */
|
|
|
top: 50%; /* 垂直居中 */
|
|
|
width: 100px; /* 设置宽度为100px */
|
|
|
line-height: 20px; /* 设置行高为20px */
|
|
|
margin: -10px 0 0 -50px; /* 使其准确居中 */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
color: #c2c2c2; /* 设置图标颜色为灰色 */
|
|
|
font-family: layui-icon !important; /* 强制使用 layui-icon 字体 */
|
|
|
font-size: 30px; /* 设置图标字体大小为30px */
|
|
|
font-style: normal; /* 设置字体样式为正常 */
|
|
|
-webkit-font-smoothing: antialiased; /* 开启抗锯齿 */
|
|
|
-moz-osx-font-smoothing: grayscale; /* 开启 macOS 的字体平滑 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel > [carousel-item] 中所有直接子元素的样式 */
|
|
|
.layui-carousel > [carousel-item] > * {
|
|
|
display: none; /* 隐藏所有子元素 */
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 0; /* 左边距为0 */
|
|
|
top: 0; /* 上边距为0 */
|
|
|
width: 100%; /* 设置宽度为100% */
|
|
|
height: 100%; /* 设置高度为100% */
|
|
|
background-color: #f8f8f8; /* 设置背景颜色为浅灰色 */
|
|
|
transition-duration: .3s; /* 设置过渡时间为0.3秒 */
|
|
|
-webkit-transition-duration: .3s; /* 为Webkit浏览器设置过渡时间 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-updown 的子元素的过渡效果 */
|
|
|
.layui-carousel-updown > * {
|
|
|
-webkit-transition: .3s ease-in-out up; /* 设置过渡效果 */
|
|
|
transition: .3s ease-in-out up; /* 设置过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-arrow 的样式，包括位置、大小、颜色等 */
|
|
|
.layui-carousel-arrow {
|
|
|
display: none \9; /* 兼容IE8的hack，设置为不显示 */
|
|
|
opacity: 0; /* 设置初始透明度为0 */
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
left: 10px; /* 设置距离左边为10px */
|
|
|
top: 50%; /* 设置垂直居中 */
|
|
|
margin-top: -18px; /* 向上偏移18px，使箭头完全居中 */
|
|
|
width: 36px; /* 设置宽度为36px */
|
|
|
height: 36px; /* 设置高度为36px */
|
|
|
line-height: 36px; /* 设置行高为36px，使文字垂直居中 */
|
|
|
text-align: center; /* 设置文本水平居中 */
|
|
|
font-size: 20px; /* 设置字体大小为20px */
|
|
|
border: 0; /* 去掉边框 */
|
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
|
background-color: rgba(0, 0, 0, .2); /* 设置背景色为透明黑色 */
|
|
|
color: #fff; /* 设置字体颜色为白色 */
|
|
|
-webkit-transition-duration: .3s; /* 设置过渡时间为0.3秒 */
|
|
|
transition-duration: .3s; /* 设置过渡时间为0.3秒 */
|
|
|
cursor: pointer; /* 设置鼠标指针为手形 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-arrow[lay-type=add] 的右边距，使箭头显示在右侧 */
|
|
|
.layui-carousel-arrow[lay-type=add] {
|
|
|
left: auto !important; /* 取消左边距 */
|
|
|
right: 10px; /* 设置右边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 当鼠标悬停时，或者显示箭头时，调整右侧箭头的位置 */
|
|
|
.layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
|
|
|
right: 20px; /* 设置右边距为20px，使其向右偏移 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel[lay-arrow=always] 的样式，用于控制箭头总是显示 */
|
|
|
.layui-carousel[lay-arrow=always] {
|
|
|
/* 样式定义略，通常此处会控制是否总是显示箭头 */
|
|
|
}
|
|
|
/* 设置 .layui-carousel-arrow 的初始透明度为 1，左边距为 20px */
|
|
|
.layui-carousel-arrow {
|
|
|
opacity: 1; /* 设置箭头的透明度为 1（完全不透明） */
|
|
|
left: 20px; /* 设置箭头的左边距为 20px */
|
|
|
}
|
|
|
|
|
|
/* 当 [lay-arrow=none] 时，隐藏 .layui-carousel-arrow（箭头） */
|
|
|
.layui-carousel[lay-arrow=none] .layui-carousel-arrow {
|
|
|
display: none; /* 隐藏箭头 */
|
|
|
}
|
|
|
|
|
|
/* 当鼠标悬停在 .layui-carousel-arrow 或 .layui-carousel-ind ul 上时，设置背景色为半透明黑色 */
|
|
|
.layui-carousel-arrow:hover, .layui-carousel-ind ul:hover {
|
|
|
background-color: rgba(0, 0, 0, .35); /* 设置背景颜色为半透明黑色 */
|
|
|
}
|
|
|
|
|
|
/* 当鼠标悬停在 .layui-carousel 上时，显示箭头并设置透明度和左边距 */
|
|
|
.layui-carousel:hover .layui-carousel-arrow {
|
|
|
display: block\9; /* 显示箭头，并兼容 IE8 */
|
|
|
opacity: 1; /* 设置透明度为 1（完全不透明） */
|
|
|
left: 20px; /* 设置左边距为 20px */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-ind 的位置，向上偏移 35px，宽度为 100%，并居中对齐 */
|
|
|
.layui-carousel-ind {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
top: -35px; /* 向上偏移 35px */
|
|
|
width: 100%; /* 设置宽度为 100% */
|
|
|
line-height: 0 !important; /* 强制行高为 0 */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
font-size: 0; /* 设置字体大小为 0，防止有多余的空白 */
|
|
|
}
|
|
|
|
|
|
/* 当 [lay-indicator=outside] 时，设置 .layui-carousel 的下边距为 30px */
|
|
|
.layui-carousel[lay-indicator=outside] {
|
|
|
margin-bottom: 30px; /* 设置下边距为 30px */
|
|
|
}
|
|
|
|
|
|
/* 当 [lay-indicator=outside] 时，设置 .layui-carousel-ind 的上边距为 10px */
|
|
|
.layui-carousel[lay-indicator=outside] .layui-carousel-ind {
|
|
|
top: 10px; /* 设置上边距为 10px */
|
|
|
}
|
|
|
|
|
|
/* 当 [lay-indicator=outside] 时，设置 .layui-carousel-ind ul 的背景颜色为半透明黑色 */
|
|
|
.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul {
|
|
|
background-color: rgba(0, 0, 0, .5); /* 设置背景色为半透明黑色 */
|
|
|
}
|
|
|
|
|
|
/* 当 [lay-indicator=none] 时，隐藏 .layui-carousel-ind（指示器） */
|
|
|
.layui-carousel[lay-indicator=none] .layui-carousel-ind {
|
|
|
display: none; /* 隐藏指示器 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-ind ul 的样式，包括内边距和背景色 */
|
|
|
.layui-carousel-ind ul {
|
|
|
display: inline-block; /* 设置为内联块元素 */
|
|
|
padding: 5px; /* 设置内边距为 5px */
|
|
|
background-color: rgba(0, 0, 0, .2); /* 设置背景色为半透明黑色 */
|
|
|
border-radius: 10px; /* 设置圆角边框 */
|
|
|
-webkit-transition-duration: .3s; /* 设置过渡时间为 0.3 秒，兼容 WebKit 浏览器 */
|
|
|
transition-duration: .3s; /* 设置过渡时间为 0.3 秒 */
|
|
|
}
|
|
|
|
|
|
/* 设置 .layui-carousel-ind li 的样式，包括大小、颜色和圆角 */
|
|
|
.layui-carousel-ind li {
|
|
|
display: inline-block; /* 设置为内联块元素 */
|
|
|
width: 10px; /* 设置宽度为 10px */
|
|
|
height: 10px; /* 设置高度为 10px */
|
|
|
margin: 0 3px; /* 设置左右边距为 3px */
|
|
|
font-size: 14px; /* 设置字体大小为 14px */
|
|
|
background-color: #e2e2e2; /* 设置背景色为灰色 */
|
|
|
background-color: rgba(255, 255, 255, .5); /* 设置背景色为半透明白色 */
|
|
|
border-radius: 50%; /* 设置圆形边框 */
|
|
|
cursor: pointer; /* 设置鼠标指针为手形，表示可点击 */
|
|
|
-webkit-transition-duration: .3s; /* 设置过渡时间为 0.3 秒，兼容 WebKit 浏览器 */
|
|
|
transition-duration: .3s; /* 设置过渡时间为 0.3 秒 */
|
|
|
}
|
|
|
|
|
|
/* 设置当鼠标悬停在 .layui-carousel-ind li 上时，改变背景色 */
|
|
|
.layui-carousel-ind li:hover {
|
|
|
background-color: rgba(255, 255, 255, .7); /* 设置背景色为半透明白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前选中的 li（.layui-this）的背景色为白色 */
|
|
|
.layui-carousel-ind li.layui-this {
|
|
|
background-color: #fff; /* 设置选中的背景色为白色 */
|
|
|
}
|
|
|
|
|
|
/* 设置每个 .layui-carousel-item 的位置和显示状态 */
|
|
|
.layui-carousel > [carousel-item] > .layui-carousel-next,
|
|
|
.layui-carousel > [carousel-item] > .layui-carousel-prev,
|
|
|
.layui-carousel > [carousel-item] > .layui-this {
|
|
|
display: block; /* 设置这些元素为块级显示 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前显示的轮播项的位置（left 为 0） */
|
|
|
.layui-carousel > [carousel-item] > .layui-this {
|
|
|
left: 0; /* 设置当前位置为 0 */
|
|
|
}
|
|
|
|
|
|
/* 设置上一个轮播项的位置（left 为 -100%） */
|
|
|
.layui-carousel > [carousel-item] > .layui-carousel-prev {
|
|
|
left: -100%; /* 设置上一个项的位置为屏幕外 */
|
|
|
}
|
|
|
|
|
|
/* 设置下一个轮播项的位置（left 为 100%） */
|
|
|
.layui-carousel > [carousel-item] > .layui-carousel-next {
|
|
|
left: 100%; /* 设置下一个项的位置为屏幕外 */
|
|
|
}
|
|
|
/* 设置 .layui-carousel-next 和 .layui-carousel-left 的位置为 0，意味着它们都被放置在容器的左侧 */
|
|
|
.layui-carousel-next.layui-carousel-left,
|
|
|
.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right {
|
|
|
left: 0; /* 设置位置为 0，左对齐 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前显示项（.layui-this）的样式，当它在向左滑动的情况下，left 设置为 -100%（意味着它位于屏幕左侧外面） */
|
|
|
.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left {
|
|
|
left: -100%; /* 当前项向左移动，隐藏在屏幕左侧 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前显示项（.layui-this）的样式，当它在向右滑动的情况下，left 设置为 100%（意味着它位于屏幕右侧外面） */
|
|
|
.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right {
|
|
|
left: 100%; /* 当前项向右移动，隐藏在屏幕右侧 */
|
|
|
}
|
|
|
|
|
|
/* 当轮播的动画方式为上下（updown）时，箭头的位置设置为容器宽度的50%，并且距离顶部20px，确保箭头居中显示 */
|
|
|
.layui-carousel[lay-anim=updown] .layui-carousel-arrow {
|
|
|
left: 50% !important; /* 左对齐，居中 */
|
|
|
top: 20px; /* 上边距为 20px */
|
|
|
margin: 0 0 0 -18px; /* 设置 margin 用来精确调整箭头位置，使其水平居中 */
|
|
|
}
|
|
|
|
|
|
/* 当轮播的动画方式为上下（updown）时，轮播项的位置设置为 left: 0，确保它们在容器内水平显示 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>*,
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]* {
|
|
|
left: 0 !important; /* 强制设置左对齐 */
|
|
|
}
|
|
|
|
|
|
/* 在上下（updown）动画模式下，增加一个特殊的箭头（添加箭头），此箭头的位置调整为距离底部 20px */
|
|
|
.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add] {
|
|
|
top: auto !important; /* 取消 top 属性 */
|
|
|
bottom: 20px; /* 设置箭头距离底部 20px */
|
|
|
}
|
|
|
|
|
|
/* 在上下（updown）动画模式下，设置指示器的位置为绝对定位，并将其放置到右侧中间位置 */
|
|
|
.layui-carousel[lay-anim=updown] .layui-carousel-ind {
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 50%; /* 垂直居中 */
|
|
|
right: 20px; /* 距离右侧 20px */
|
|
|
width: auto; /* 宽度自动 */
|
|
|
height: auto; /* 高度自动 */
|
|
|
}
|
|
|
|
|
|
/* 设置指示器背景的内边距（3px 上下，5px 左右） */
|
|
|
.layui-carousel[lay-anim=updown] .layui-carousel-ind ul {
|
|
|
padding: 3px 5px; /* 设置内边距 */
|
|
|
}
|
|
|
|
|
|
/* 设置每个指示器（li）的样式，指示器垂直排列（6px 的上下边距） */
|
|
|
.layui-carousel[lay-anim=updown] .layui-carousel-ind li {
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
margin: 6px 0; /* 设置上下边距为 6px */
|
|
|
}
|
|
|
|
|
|
/* 设置轮播项（.layui-this）的上边距为 0，确保当前项处于屏幕中 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this {
|
|
|
top: 0; /* 设置当前项的位置为 0，居中显示 */
|
|
|
}
|
|
|
|
|
|
/* 设置前一个轮播项的位置为上方（top 为 -100%），使其隐藏在屏幕上方 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev {
|
|
|
top: -100%; /* 设置上一个项的位置为屏幕上方 */
|
|
|
}
|
|
|
|
|
|
/* 设置下一个轮播项的位置为下方（top 为 100%），使其隐藏在屏幕下方 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next {
|
|
|
top: 100%; /* 设置下一个项的位置为屏幕下方 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前项的样式，在上下（updown）动画模式下，指示器的样式变化 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right {
|
|
|
top: 0; /* 设置下一项和上一项的位置为 0，显示在当前项上面 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前项的样式，在上下（updown）动画模式下，当项在左侧时，top 设置为 -100%，表示它位于上方 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left {
|
|
|
top: -100%; /* 设置当前项的位置为屏幕上方 */
|
|
|
}
|
|
|
|
|
|
/* 设置当前项的样式，在上下（updown）动画模式下，当项在右侧时，top 设置为 100%，表示它位于下方 */
|
|
|
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right {
|
|
|
top: 100%; /* 设置当前项的位置为屏幕下方 */
|
|
|
}
|
|
|
|
|
|
/* 设置 fade（渐变）动画模式下，当前项的下一个和上一个项的透明度为 0，表示它们不可见 */
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev {
|
|
|
opacity: 0; /* 设置透明度为 0，隐藏项 */
|
|
|
}
|
|
|
|
|
|
/* 设置渐变动画模式下，当轮播项在左侧时，下一个项的透明度为 0（不可见） */
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>
|
|
|
/* 设置 .layui-carousel-prev 和 .layui-carousel-right 的透明度为 1，表示它们完全可见 */
|
|
|
.layui-carousel-prev.layui-carousel-right {
|
|
|
opacity: 1; /* 设置透明度为 1，完全可见 */
|
|
|
}
|
|
|
|
|
|
/* 设置 fade 动画模式下，当轮播项处于左侧（.layui-carousel-left）或右侧（.layui-carousel-right）时，透明度为 0，表示它们不可见 */
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,
|
|
|
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right {
|
|
|
opacity: 0; /* 设置透明度为 0，隐藏项 */
|
|
|
}
|
|
|
|
|
|
/* 设置固定位置的浮动按钮，固定在页面右下角 */
|
|
|
.layui-fixbar {
|
|
|
position: fixed; /* 设置固定定位 */
|
|
|
right: 15px; /* 设置右侧距离为 15px */
|
|
|
bottom: 15px; /* 设置底部距离为 15px */
|
|
|
z-index: 999999; /* 设置 z-index 为 999999，确保浮动按钮位于页面最上层 */
|
|
|
}
|
|
|
|
|
|
/* 设置浮动按钮列表项（li）的样式 */
|
|
|
.layui-fixbar li {
|
|
|
width: 50px; /* 设置宽度为 50px */
|
|
|
height: 50px; /* 设置高度为 50px */
|
|
|
line-height: 50px; /* 设置行高为 50px，垂直居中显示内容 */
|
|
|
margin-bottom: 1px; /* 设置下边距为 1px */
|
|
|
text-align: center; /* 设置文本水平居中 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手形指针 */
|
|
|
font-size: 30px; /* 设置字体大小为 30px */
|
|
|
background-color: #9F9F9F; /* 设置背景颜色为灰色 */
|
|
|
color: #fff; /* 设置文字颜色为白色 */
|
|
|
border-radius: 2px; /* 设置边框圆角为 2px */
|
|
|
opacity: .95; /* 设置透明度为 0.95，稍微透明 */
|
|
|
}
|
|
|
|
|
|
/* 设置浮动按钮列表项（li）在鼠标悬停时的透明度变化 */
|
|
|
.layui-fixbar li:hover {
|
|
|
opacity: .85; /* 设置透明度为 0.85，鼠标悬停时稍微透明 */
|
|
|
}
|
|
|
|
|
|
/* 设置浮动按钮列表项（li）在被点击时的透明度变化 */
|
|
|
.layui-fixbar li:active {
|
|
|
opacity: 1; /* 设置透明度为 1，点击时完全可见 */
|
|
|
}
|
|
|
|
|
|
/* 设置浮动按钮顶部按钮（.layui-fixbar-top）的样式，不显示 */
|
|
|
.layui-fixbar .layui-fixbar-top {
|
|
|
display: none; /* 隐藏顶部按钮 */
|
|
|
font-size: 40px; /* 设置字体大小为 40px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-util-face 类的样式，去掉边框和背景 */
|
|
|
body .layui-util-face {
|
|
|
border: none; /* 去掉边框 */
|
|
|
background: 0 0; /* 设置背景为透明 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-util-face 内部内容的样式，去除填充和阴影 */
|
|
|
body .layui-util-face .layui-layer-content {
|
|
|
padding: 0; /* 去掉内边距 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
color: #666; /* 设置文字颜色为灰色 */
|
|
|
box-shadow: none; /* 去掉阴影 */
|
|
|
}
|
|
|
|
|
|
/* 隐藏 layui-util-face 下的 .layui-layer-TipsG 元素 */
|
|
|
.layui-util-face .layui-layer-TipsG {
|
|
|
display: none; /* 隐藏提示框 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-util-face 列表的样式 */
|
|
|
.layui-util-face ul {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
width: 372px; /* 设置宽度为 372px */
|
|
|
padding: 10px; /* 设置内边距为 10px */
|
|
|
border: 1px solid #D9D9D9; /* 设置边框颜色为灰色 */
|
|
|
background-color: #fff; /* 设置背景颜色为白色 */
|
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, .2); /* 设置阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-util-face 列表项的样式 */
|
|
|
.layui-util-face ul li {
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手形指针 */
|
|
|
float: left; /* 设置浮动，排列为横向 */
|
|
|
border: 1px solid #e8e8e8; /* 设置边框颜色为浅灰色 */
|
|
|
height: 22px; /* 设置高度为 22px */
|
|
|
width: 26px; /* 设置宽度为 26px */
|
|
|
overflow: hidden; /* 隐藏溢出内容 */
|
|
|
margin: -1px 0 0 -1px; /* 设置负边距，使得多个列表项紧密排列 */
|
|
|
padding: 4px 2px; /* 设置内边距 */
|
|
|
text-align: center; /* 设置文本居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-util-face 列表项在鼠标悬停时的样式 */
|
|
|
.layui-util-face ul li:hover {
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
z-index: 2; /* 设置 z-index，使其在悬停时显示在其他元素之上 */
|
|
|
border: 1px solid #eb7350; /* 设置边框颜色为橙色 */
|
|
|
background: #fff9ec; /* 设置背景颜色为淡橙色 */
|
|
|
}
|
|
|
|
|
|
/* 设置代码块（.layui-code）的样式 */
|
|
|
.layui-code {
|
|
|
position: relative; /* 设置为相对定位 */
|
|
|
margin: 10px 0; /* 设置上下边距为 10px */
|
|
|
padding: 15px; /* 设置内边距为 15px */
|
|
|
line-height: 20px; /* 设置行高为 20px */
|
|
|
border: 1px solid #ddd; /* 设置边框颜色为浅灰色 */
|
|
|
border-left-width: 6px; /* 设置左边框宽度为 6px */
|
|
|
background-color: #F2F2F2; /* 设置背景颜色为浅灰色 */
|
|
|
color: #333; /* 设置文本颜色为深灰色 */
|
|
|
font-family: Courier New; /* 设置字体为 Courier New */
|
|
|
font-size: 12px; /* 设置字体大小为 12px */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-rate（评分星级）相关的样式 */
|
|
|
.layui-rate, .layui-rate * {
|
|
|
display: inline-block; /* 设置为内联块级元素 */
|
|
|
vertical-align: middle; /* 设置垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 设置 layui-rate 容器的样式 */
|
|
|
.layui-rate {
|
|
|
padding: 10px 5px 10px 0; /* 设置内边距，左右为 5px，顶部和底部为 10px */
|
|
|
font-size: 0; /* 去掉字体大小，防止字间距 */
|
|
|
}
|
|
|
|
|
|
/* 设置评分项（li）内的图标的样式 */
|
|
|
.layui-rate li i.layui-icon {
|
|
|
font-size: 20px; /* 设置图标的字体大小为 20px */
|
|
|
color: #FFB800; /* 设置图标颜色为黄色 */
|
|
|
margin-right: 5px; /* 设置右边距为 5px */
|
|
|
transition: all .3s; /* 设置过渡动画，持续时间为 0.3秒 */
|
|
|
-webkit-transition: all .3s; /* 设置 webkit 前缀的过渡动画 */
|
|
|
}
|
|
|
|
|
|
/* 设置评分项（li）内的图标在悬停时的效果 */
|
|
|
.layui-rate li i:hover {
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手形指针 */
|
|
|
transform: scale(1.12); /* 设置放大效果，缩放到 1.12 倍 */
|
|
|
-webkit-transform: scale(1.12); /* 设置 webkit 前缀的放大效果 */
|
|
|
}
|
|
|
/* 禁用评分组件的hover效果，防止评分时改变视觉效果 */
|
|
|
.layui-rate[readonly] li i:hover {
|
|
|
cursor: default; /* 禁用鼠标悬浮时的光标效果 */
|
|
|
transform: scale(1); /* 禁用鼠标悬浮时的缩放效果 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器组件的基本样式 */
|
|
|
.layui-colorpicker {
|
|
|
width: 26px; /* 宽度为26px */
|
|
|
height: 26px; /* 高度为26px */
|
|
|
border: 1px solid #e6e6e6; /* 设置边框为浅灰色 */
|
|
|
padding: 5px; /* 内边距为5px */
|
|
|
border-radius: 2px; /* 设置圆角半径为2px */
|
|
|
line-height: 24px; /* 设置行高为24px（使其垂直居中） */
|
|
|
display: inline-block; /* 设置为内联块级元素 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示指针光标 */
|
|
|
transition: all .3s; /* 所有属性在0.3秒内平滑过渡 */
|
|
|
-webkit-transition: all .3s; /* 为Webkit浏览器提供过渡效果 */
|
|
|
}
|
|
|
|
|
|
/* 鼠标悬浮时，颜色选择器的边框颜色变化 */
|
|
|
.layui-colorpicker:hover {
|
|
|
border-color: #d2d2d2; /* 边框颜色变为较深灰色 */
|
|
|
}
|
|
|
|
|
|
/* 大号颜色选择器的尺寸 */
|
|
|
.layui-colorpicker.layui-colorpicker-lg {
|
|
|
width: 34px; /* 宽度为34px */
|
|
|
height: 34px; /* 高度为34px */
|
|
|
line-height: 32px; /* 行高为32px，垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 小号颜色选择器的尺寸 */
|
|
|
.layui-colorpicker.layui-colorpicker-sm {
|
|
|
width: 24px; /* 宽度为24px */
|
|
|
height: 24px; /* 高度为24px */
|
|
|
line-height: 22px; /* 行高为22px，垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 超小号颜色选择器的尺寸 */
|
|
|
.layui-colorpicker.layui-colorpicker-xs {
|
|
|
width: 22px; /* 宽度为22px */
|
|
|
height: 22px; /* 高度为22px */
|
|
|
line-height: 20px; /* 行高为20px，垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器触发器的背景样式，使用base64编码的透明色图像 */
|
|
|
.layui-colorpicker-trigger-bgcolor {
|
|
|
display: block; /* 使该元素为块级元素 */
|
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); /* 设置背景为base64编码的透明图片 */
|
|
|
border-radius: 2px; /* 圆角半径为2px */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器触发器的span样式，控制整体外观 */
|
|
|
.layui-colorpicker-trigger-span {
|
|
|
display: block; /* 使该元素为块级元素 */
|
|
|
height: 100%; /* 高度为100% */
|
|
|
box-sizing: border-box; /* 设置盒模型计算方式为包含内边距和边框 */
|
|
|
border: 1px solid rgba(0,0,0,.15); /* 设置边框为浅黑色 */
|
|
|
border-radius: 2px; /* 圆角半径为2px */
|
|
|
text-align: center; /* 文字居中 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器触发器内部的i元素样式，定义文字外观 */
|
|
|
.layui-colorpicker-trigger-i {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
color: #FFF; /* 设置文字颜色为白色 */
|
|
|
font-size: 12px; /* 设置字体大小为12px */
|
|
|
}
|
|
|
|
|
|
/* 关闭图标的颜色样式 */
|
|
|
.layui-colorpicker-trigger-i.layui-icon-close {
|
|
|
color: #999; /* 设置关闭图标颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器主面板样式 */
|
|
|
.layui-colorpicker-main {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
z-index: 66666666; /* 设置极高的层级 */
|
|
|
width: 280px; /* 宽度为280px */
|
|
|
padding: 7px; /* 内边距为7px */
|
|
|
background: #FFF; /* 背景颜色为白色 */
|
|
|
border: 1px solid #d2d2d2; /* 设置边框为浅灰色 */
|
|
|
border-radius: 2px; /* 圆角半径为2px */
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,.12); /* 设置阴影效果 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器主面板内部的容器 */
|
|
|
.layui-colorpicker-main-wrapper {
|
|
|
height: 180px; /* 高度为180px */
|
|
|
position: relative; /* 使该元素相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的基础部分，包含颜色选择的颜色条 */
|
|
|
.layui-colorpicker-basis {
|
|
|
width: 260px; /* 宽度为260px */
|
|
|
height: 100%; /* 高度为100% */
|
|
|
position: relative; /* 相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 白色背景色部分，使用线性渐变创建过渡效果 */
|
|
|
.layui-colorpicker-basis-white {
|
|
|
width: 100%; /* 宽度100% */
|
|
|
height: 100%; /* 高度100% */
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 0; /* 上边距为0 */
|
|
|
left: 0; /* 左边距为0 */
|
|
|
background: linear-gradient(90deg, #FFF, hsla(0, 0%, 100%, 0)); /* 从白色到透明的渐变效果 */
|
|
|
}
|
|
|
|
|
|
/* 黑色背景色部分，使用线性渐变创建过渡效果 */
|
|
|
.layui-colorpicker-basis-black {
|
|
|
width: 100%; /* 宽度100% */
|
|
|
height: 100%; /* 高度100% */
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 0; /* 上边距为0 */
|
|
|
left: 0; /* 左边距为0 */
|
|
|
background: linear-gradient(0deg, #000, transparent); /* 从黑色到透明的渐变效果 */
|
|
|
}
|
|
|
/* 颜色选择器的光标指示器样式，圆形的小标记 */
|
|
|
.layui-colorpicker-basis-cursor {
|
|
|
width: 10px; /* 光标指示器的宽度为10px */
|
|
|
height: 10px; /* 高度为10px */
|
|
|
border: 1px solid #FFF; /* 设置边框为白色 */
|
|
|
border-radius: 50%; /* 圆角半径为50%，使其成为圆形 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: -3px; /* 上边距为-3px，定位到父容器的顶部 */
|
|
|
right: -3px; /* 右边距为-3px，定位到父容器的右侧 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手指形状的光标 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的色条部分，采用渐变颜色 */
|
|
|
.layui-colorpicker-side {
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: 0; /* 上边距为0 */
|
|
|
right: 0; /* 右边距为0 */
|
|
|
width: 12px; /* 宽度为12px */
|
|
|
height: 100%; /* 高度为100%，填满父容器的高度 */
|
|
|
background: linear-gradient(red, #FF0, #0F0, #0FF, #00F, #F0F, red); /* 设置渐变背景，表示彩虹色的渐变效果 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的滑动条样式，水平滑动条 */
|
|
|
.layui-colorpicker-side-slider {
|
|
|
width: 100%; /* 宽度为100% */
|
|
|
height: 5px; /* 高度为5px */
|
|
|
box-shadow: 0 0 1px #888; /* 添加轻微的阴影效果 */
|
|
|
box-sizing: border-box; /* 包括内边距和边框在内计算宽高 */
|
|
|
background: #FFF; /* 背景颜色为白色 */
|
|
|
border-radius: 1px; /* 圆角半径为1px */
|
|
|
border: 1px solid #f0f0f0; /* 边框为浅灰色 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手指形状的光标 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
left: 0; /* 左边距为0 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的透明度调节部分（隐藏） */
|
|
|
.layui-colorpicker-main-alpha {
|
|
|
display: none; /* 隐藏透明度调节条 */
|
|
|
height: 12px; /* 高度为12px */
|
|
|
margin-top: 7px; /* 上边距为7px */
|
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); /* 背景设置为透明的PNG图片 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的透明度背景部分，包含透明度背景色 */
|
|
|
.layui-colorpicker-alpha-bgcolor {
|
|
|
height: 100%; /* 高度为100% */
|
|
|
position: relative; /* 设置相对定位 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的透明度滑动条 */
|
|
|
.layui-colorpicker-alpha-slider {
|
|
|
width: 5px; /* 宽度为5px */
|
|
|
height: 100%; /* 高度为100% */
|
|
|
box-shadow: 0 0 1px #888; /* 添加轻微的阴影效果 */
|
|
|
box-sizing: border-box; /* 包括内边距和边框在内计算宽高 */
|
|
|
background: #FFF; /* 背景颜色为白色 */
|
|
|
border-radius: 1px; /* 圆角半径为1px */
|
|
|
border: 1px solid #f0f0f0; /* 边框为浅灰色 */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手指形状的光标 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: 0; /* 上边距为0 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器面板的预览区域 */
|
|
|
.layui-colorpicker-main-pre {
|
|
|
padding-top: 7px; /* 设置顶部内边距为7px */
|
|
|
font-size: 0; /* 设置字体大小为0，移除预览区域的文本显示 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的颜色预览按钮样式 */
|
|
|
.layui-colorpicker-pre {
|
|
|
width: 20px; /* 宽度为20px */
|
|
|
height: 20px; /* 高度为20px */
|
|
|
border-radius: 2px; /* 圆角半径为2px */
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
margin-left: 6px; /* 左边距为6px */
|
|
|
margin-bottom: 7px; /* 下边距为7px */
|
|
|
cursor: pointer; /* 设置鼠标悬停时为手指形状的光标 */
|
|
|
}
|
|
|
|
|
|
/* 每个颜色预览按钮为第一个的特殊样式，去除左边距 */
|
|
|
.layui-colorpicker-pre:nth-child(11n+1) {
|
|
|
margin-left: 0; /* 移除第一个预览按钮的左边距 */
|
|
|
}
|
|
|
|
|
|
/* 颜色预览按钮的透明度标识样式 */
|
|
|
.layui-colorpicker-pre-isalpha {
|
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); /* 设置为透明的PNG图片，表示透明度选项 */
|
|
|
}
|
|
|
|
|
|
/* 当前选中颜色预览按钮的样式，添加阴影效果 */
|
|
|
.layui-colorpicker-pre.layui-this {
|
|
|
box-shadow: 0 0 3px 2px rgba(0,0,0,.15); /* 添加阴影效果，突出显示 */
|
|
|
}
|
|
|
/* 颜色预览按钮内部的div元素 */
|
|
|
.layui-colorpicker-pre > div {
|
|
|
height: 100%; /* 设置高度为100%，填充父容器 */
|
|
|
border-radius: 2px; /* 设置圆角半径为2px，增加圆角效果 */
|
|
|
}
|
|
|
|
|
|
/* 颜色选择器的输入区域样式 */
|
|
|
.layui-colorpicker-main-input {
|
|
|
text-align: right; /* 设置文本右对齐 */
|
|
|
padding-top: 7px; /* 设置顶部内边距为7px */
|
|
|
}
|
|
|
|
|
|
/* 输入区域内按钮的样式，间隔设置 */
|
|
|
.layui-colorpicker-main-input .layui-btn-container .layui-btn {
|
|
|
margin: 0 0 0 10px; /* 设置按钮的左边距为10px */
|
|
|
}
|
|
|
|
|
|
/* 输入区域内显示文本的样式 */
|
|
|
.layui-colorpicker-main-input div.layui-inline {
|
|
|
float: left; /* 让元素浮动到左边 */
|
|
|
margin-right: 10px; /* 设置右边距为10px */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 输入框样式 */
|
|
|
.layui-colorpicker-main-input input.layui-input {
|
|
|
width: 150px; /* 设置宽度为150px */
|
|
|
height: 30px; /* 设置高度为30px */
|
|
|
color: #666; /* 设置文本颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条的样式 */
|
|
|
.layui-slider {
|
|
|
height: 4px; /* 设置高度为4px */
|
|
|
background: #e2e2e2; /* 背景色为浅灰色 */
|
|
|
border-radius: 3px; /* 设置圆角半径为3px */
|
|
|
position: relative; /* 使用相对定位 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示为指针样式 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条的滑块部分 */
|
|
|
.layui-slider-bar {
|
|
|
border-radius: 3px; /* 设置圆角半径为3px */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
height: 100%; /* 高度为100%，填满父容器 */
|
|
|
}
|
|
|
|
|
|
/* 滑块的步骤标识，通常显示为小圆点 */
|
|
|
.layui-slider-step {
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: 0; /* 顶部对齐 */
|
|
|
width: 4px; /* 设置宽度为4px */
|
|
|
height: 4px; /* 设置高度为4px */
|
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
|
background: #FFF; /* 设置背景色为白色 */
|
|
|
-webkit-transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条按钮的包裹容器 */
|
|
|
.layui-slider-wrap {
|
|
|
width: 36px; /* 宽度为36px */
|
|
|
height: 36px; /* 高度为36px */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: -16px; /* 设置上边距为-16px */
|
|
|
-webkit-transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
z-index: 10; /* 设置 z-index 为10，使其位于更高层 */
|
|
|
text-align: center; /* 设置文本居中对齐 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条按钮的样式 */
|
|
|
.layui-slider-wrap-btn {
|
|
|
width: 12px; /* 设置宽度为12px */
|
|
|
height: 12px; /* 设置高度为12px */
|
|
|
border-radius: 50%; /* 设置为圆形 */
|
|
|
background: #FFF; /* 设置背景色为白色 */
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
vertical-align: middle; /* 设置垂直对齐居中 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示为指针样式 */
|
|
|
transition: .3s; /* 设置过渡效果，0.3秒 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条按钮在悬停时的样式，放大 */
|
|
|
.layui-slider-wrap-btn.layui-slider-hover, .layui-slider-wrap-btn:hover {
|
|
|
transform: scale(1.2); /* 鼠标悬停时放大按钮为原来的1.2倍 */
|
|
|
}
|
|
|
|
|
|
/* 禁用状态的滑动条按钮样式 */
|
|
|
.layui-slider-wrap-btn.layui-disabled:hover {
|
|
|
transform: scale(1)!important; /* 禁用状态时，悬停不会放大 */
|
|
|
}
|
|
|
|
|
|
/* 滑动条的提示框样式 */
|
|
|
.layui-slider-tips {
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: -42px; /* 设置顶部位置为-42px */
|
|
|
z-index: 66666666; /* 设置极高的 z-index，使其位于最上层 */
|
|
|
white-space: nowrap; /* 防止文字换行 */
|
|
|
display: none; /* 默认不显示 */
|
|
|
-webkit-transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
transform: translateX(-50%); /* 通过 transform 水平居中 */
|
|
|
color: #FFF; /* 设置文字颜色为白色 */
|
|
|
background: #000; /* 背景颜色为黑色 */
|
|
|
border-radius: 3px; /* 设置圆角半径为3px */
|
|
|
height: 25px; /* 高度为25px */
|
|
|
line-height: 25px; /* 设置行高为25px，确保文字垂直居中 */
|
|
|
padding: 0 10px; /* 设置内边距为左右各10px */
|
|
|
}
|
|
|
|
|
|
/* 提示框的三角箭头 */
|
|
|
.layui-slider-tips:after {
|
|
|
content: ''; /* 内容为空 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
bottom: -12px; /* 设置底部位置为-12px */
|
|
|
left: 50%; /* 设置左边位置为50% */
|
|
|
margin-left: -6px; /* 将箭头水平居中 */
|
|
|
width: 0; /* 宽度为0 */
|
|
|
height: 0; /* 高度为0 */
|
|
|
border-width: 6px; /* 设置边框宽度为6px */
|
|
|
border-style: solid; /* 设置为实线边框 */
|
|
|
border-color: #000 transparent transparent; /* 设置箭头颜色为黑色 */
|
|
|
}
|
|
|
|
|
|
/* 输入框用于显示滑块值 */
|
|
|
.layui-slider-input {
|
|
|
width: 70px; /* 设置宽度为70px */
|
|
|
height: 32px; /* 设置高度为32px */
|
|
|
border: 1px solid #e6e6e6; /* 设置边框为浅灰色 */
|
|
|
border-radius: 3px; /* 设置圆角半径为3px */
|
|
|
font-size: 16px; /* 设置字体大小为16px */
|
|
|
line-height: 32px; /* 设置行高为32px，使文本垂直居中 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
right: 0; /* 设置右边距为0 */
|
|
|
top: -15px; /* 设置上边距为-15px */
|
|
|
}
|
|
|
/* 隐藏颜色选择器输入框按钮，设置其位置为绝对定位 */
|
|
|
.layui-slider-input-btn {
|
|
|
display: none; /* 隐藏该按钮 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
right: 0; /* 设置右边为0 */
|
|
|
width: 20px; /* 设置宽度为20px */
|
|
|
height: 100%; /* 设置高度为100%，填满父容器 */
|
|
|
border-left: 1px solid #d2d2d2; /* 设置左边框为浅灰色 */
|
|
|
}
|
|
|
|
|
|
/* 输入框按钮中的图标样式 */
|
|
|
.layui-slider-input-btn i {
|
|
|
cursor: pointer; /* 鼠标悬停时显示为指针样式 */
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
right: 0; /* 设置右边为0 */
|
|
|
bottom: 0; /* 设置底部为0 */
|
|
|
width: 20px; /* 设置宽度为20px */
|
|
|
height: 50%; /* 设置高度为父容器的50% */
|
|
|
font-size: 12px; /* 设置字体大小为12px */
|
|
|
line-height: 16px; /* 设置行高为16px，使文字垂直居中 */
|
|
|
text-align: center; /* 设置文本水平居中 */
|
|
|
color: #999; /* 设置文字颜色为灰色 */
|
|
|
}
|
|
|
|
|
|
/* 输入框按钮中第一个图标的样式（用于区分按钮） */
|
|
|
.layui-slider-input-btn i:first-child {
|
|
|
top: 0; /* 设置顶部为0 */
|
|
|
border-bottom: 1px solid #d2d2d2; /* 为第一个图标添加底部边框 */
|
|
|
}
|
|
|
|
|
|
/* 输入框的文本区域样式 */
|
|
|
.layui-slider-input-txt {
|
|
|
height: 100%; /* 设置高度为100%，填充父容器 */
|
|
|
font-size: 14px; /* 设置字体大小为14px */
|
|
|
}
|
|
|
|
|
|
/* 输入框中的输入框样式 */
|
|
|
.layui-slider-input-txt input {
|
|
|
height: 100%; /* 设置高度为100%，填充父容器 */
|
|
|
border: none; /* 去掉边框 */
|
|
|
}
|
|
|
|
|
|
/* 输入框按钮中图标悬停时的样式 */
|
|
|
.layui-slider-input-btn i:hover {
|
|
|
color: #009688; /* 悬停时，图标的颜色变为绿色 */
|
|
|
}
|
|
|
|
|
|
/* 垂直方向滑动条样式 */
|
|
|
.layui-slider-vertical {
|
|
|
width: 4px; /* 设置宽度为4px */
|
|
|
margin-left: 34px; /* 设置左边距为34px */
|
|
|
}
|
|
|
|
|
|
/* 垂直方向滑动条内部的滑块样式 */
|
|
|
.layui-slider-vertical .layui-slider-bar {
|
|
|
width: 4px; /* 设置宽度为4px */
|
|
|
}
|
|
|
|
|
|
/* 垂直方向滑动条步骤标识的位置调整 */
|
|
|
.layui-slider-vertical .layui-slider-step {
|
|
|
top: auto; /* 去掉顶部位置 */
|
|
|
left: 0; /* 设置左边为0 */
|
|
|
-webkit-transform: translateY(50%); /* 使用 transform 将步骤标识垂直居中 */
|
|
|
transform: translateY(50%); /* 使用 transform 将步骤标识垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 垂直方向滑动条按钮的位置调整 */
|
|
|
.layui-slider-vertical .layui-slider-wrap {
|
|
|
top: auto; /* 去掉顶部位置 */
|
|
|
left: -16px; /* 设置左边为-16px */
|
|
|
-webkit-transform: translateY(50%); /* 使用 transform 将按钮垂直居中 */
|
|
|
transform: translateY(50%); /* 使用 transform 将按钮垂直居中 */
|
|
|
}
|
|
|
|
|
|
/* 垂直方向滑动条提示框位置调整 */
|
|
|
.layui-slider-vertical .layui-slider-tips {
|
|
|
top: auto; /* 去掉顶部位置 */
|
|
|
left: 2px; /* 设置左边距为2px */
|
|
|
}
|
|
|
|
|
|
/* 媒体查询，用于兼容某些特殊情况，通常是针对老旧浏览器 */
|
|
|
@media \0screen {
|
|
|
/* 调整横向滑动条按钮的位置 */
|
|
|
.layui-slider-wrap-btn {
|
|
|
margin-left: -20px; /* 设置左边距为-20px */
|
|
|
}
|
|
|
|
|
|
/* 调整垂直滑动条按钮的位置 */
|
|
|
.layui-slider-vertical .layui-slider-wrap-btn {
|
|
|
margin-left: 0; /* 设置左边距为0 */
|
|
|
margin-bottom: -20px; /* 设置底边距为-20px */
|
|
|
}
|
|
|
|
|
|
/* 调整垂直方向滑动条提示框的位置 */
|
|
|
.layui-slider-vertical .layui-slider-tips {
|
|
|
margin-left: -8px; /* 设置左边距为-8px */
|
|
|
}
|
|
|
|
|
|
/* 为横向滑动条的 span 元素设置左边距 */
|
|
|
.layui-slider > span {
|
|
|
margin-left: 8px; /* 设置左边距为8px */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 动画效果的基础设置 */
|
|
|
.layui-anim {
|
|
|
-webkit-animation-duration: .3s; /* 设置动画时长为0.3秒（兼容Webkit） */
|
|
|
animation-duration: .3s; /* 设置动画时长为0.3秒 */
|
|
|
-webkit-animation-fill-mode: both; /* 设置动画结束后状态保持（兼容Webkit） */
|
|
|
animation-fill-mode: both; /* 设置动画结束后状态保持 */
|
|
|
}
|
|
|
|
|
|
/* 对于带有 layui-icon 类的元素，设置为行内块级元素 */
|
|
|
.layui-anim.layui-icon {
|
|
|
display: inline-block; /* 设置为行内块级元素 */
|
|
|
}
|
|
|
|
|
|
/* 设置动画循环的次数为无限 */
|
|
|
.layui-anim-loop {
|
|
|
-webkit-animation-iteration-count: infinite; /* 设置动画无限循环（兼容Webkit） */
|
|
|
animation-iteration-count: infinite; /* 设置动画无限循环 */
|
|
|
}
|
|
|
|
|
|
/* 过渡效果设置 */
|
|
|
.layui-trans, .layui-trans a {
|
|
|
transition: all .3s; /* 所有属性的过渡效果时长为0.3秒 */
|
|
|
-webkit-transition: all .3s; /* 所有属性的过渡效果时长为0.3秒（兼容Webkit） */
|
|
|
}
|
|
|
|
|
|
/* 旋转动画定义（Webkit兼容） */
|
|
|
@-webkit-keyframes layui-rotate {
|
|
|
from {
|
|
|
-webkit-transform: rotate(0); /* 从0度开始旋转 */
|
|
|
}
|
|
|
to {
|
|
|
-webkit-transform: rotate(360deg); /* 旋转360度 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 旋转动画定义 */
|
|
|
@keyframes layui-rotate {
|
|
|
from {
|
|
|
transform: rotate(0); /* 从0度开始旋转 */
|
|
|
}
|
|
|
to {
|
|
|
transform: rotate(360deg); /* 旋转360度 */
|
|
|
}
|
|
|
}
|
|
|
/* 定义旋转动画 */
|
|
|
.layui-anim-rotate {
|
|
|
/* 设置动画名称为 layui-rotate */
|
|
|
-webkit-animation-name: layui-rotate; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-rotate; /* 设置动画名称 */
|
|
|
|
|
|
/* 设置动画持续时间为1秒 */
|
|
|
-webkit-animation-duration: 1s; /* 兼容Webkit的浏览器 */
|
|
|
animation-duration: 1s; /* 设置动画持续时间 */
|
|
|
|
|
|
/* 设置动画的时间函数为线性 */
|
|
|
-webkit-animation-timing-function: linear; /* 兼容Webkit的浏览器 */
|
|
|
animation-timing-function: linear; /* 设置动画时间函数为线性 */
|
|
|
}
|
|
|
|
|
|
/* 定义向上移动并逐渐出现的动画 */
|
|
|
@-webkit-keyframes layui-up {
|
|
|
from {
|
|
|
/* 初始状态：元素向下移动100%，透明度为0.3 */
|
|
|
-webkit-transform: translate3d(0, 100%, 0); /* 向下移动 */
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
}
|
|
|
to {
|
|
|
/* 结束状态：元素返回原位置，透明度为1 */
|
|
|
-webkit-transform: translate3d(0, 0, 0); /* 返回原位置 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的向上移动并逐渐出现的动画 */
|
|
|
@keyframes layui-up {
|
|
|
from {
|
|
|
transform: translate3d(0, 100%, 0); /* 向下移动 */
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
}
|
|
|
to {
|
|
|
transform: translate3d(0, 0, 0); /* 返回原位置 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-up动画 */
|
|
|
.layui-anim-up {
|
|
|
/* 设置动画名称为layui-up */
|
|
|
-webkit-animation-name: layui-up; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-up; /* 设置动画名称 */
|
|
|
}
|
|
|
|
|
|
/* 定义向上弹起并逐渐出现的动画 */
|
|
|
@-webkit-keyframes layui-upbit {
|
|
|
from {
|
|
|
/* 初始状态：元素向上移动30px，透明度为0.3 */
|
|
|
-webkit-transform: translate3d(0, 30px, 0); /* 向上移动 */
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
}
|
|
|
to {
|
|
|
/* 结束状态：元素返回原位置，透明度为1 */
|
|
|
-webkit-transform: translate3d(0, 0, 0); /* 返回原位置 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的向上弹起并逐渐出现的动画 */
|
|
|
@keyframes layui-upbit {
|
|
|
from {
|
|
|
transform: translate3d(0, 30px, 0); /* 向上移动 */
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
}
|
|
|
to {
|
|
|
transform: translate3d(0, 0, 0); /* 返回原位置 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-upbit动画 */
|
|
|
.layui-anim-upbit {
|
|
|
/* 设置动画名称为layui-upbit */
|
|
|
-webkit-animation-name: layui-upbit; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-upbit; /* 设置动画名称 */
|
|
|
}
|
|
|
|
|
|
/* 定义缩放效果的动画 */
|
|
|
@-webkit-keyframes layui-scale {
|
|
|
0% {
|
|
|
/* 初始状态：透明度为0.3，元素缩小为原来的一半 */
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
-webkit-transform: scale(.5); /* 缩小至50% */
|
|
|
}
|
|
|
100% {
|
|
|
/* 结束状态：透明度为1，元素恢复为原大小 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
-webkit-transform: scale(1); /* 恢复到100% */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的缩放效果的动画 */
|
|
|
@keyframes layui-scale {
|
|
|
0% {
|
|
|
opacity: .3; /* 设置透明度为0.3 */
|
|
|
-ms-transform: scale(.5); /* 兼容IE的transform */
|
|
|
transform: scale(.5); /* 缩小至50% */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
-ms-transform: scale(1); /* 兼容IE的transform */
|
|
|
transform: scale(1); /* 恢复到100% */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-scale动画 */
|
|
|
.layui-anim-scale {
|
|
|
/* 设置动画名称为layui-scale */
|
|
|
-webkit-animation-name: layui-scale; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-scale; /* 设置动画名称 */
|
|
|
}
|
|
|
|
|
|
/* 定义缩放并弹簧效果的动画 */
|
|
|
@-webkit-keyframes layui-scale-spring {
|
|
|
0% {
|
|
|
/* 初始状态：透明度为0.5，缩小至50% */
|
|
|
opacity: .5; /* 设置透明度为0.5 */
|
|
|
-webkit-transform: scale(.5); /* 缩小至50% */
|
|
|
}
|
|
|
80% {
|
|
|
/* 中间状态：透明度为0.8，缩放至110% */
|
|
|
opacity: .8; /* 设置透明度为0.8 */
|
|
|
-webkit-transform: scale(1.1); /* 放大至110% */
|
|
|
}
|
|
|
100% {
|
|
|
/* 结束状态：透明度为1，恢复到原大小 */
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
-webkit-transform: scale(1); /* 恢复到100% */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的缩放并弹簧效果的动画 */
|
|
|
@keyframes layui-scale-spring {
|
|
|
0% {
|
|
|
opacity: .5; /* 设置透明度为0.5 */
|
|
|
transform: scale(.5); /* 缩小至50% */
|
|
|
}
|
|
|
80% {
|
|
|
opacity: .8; /* 设置透明度为0.8 */
|
|
|
transform: scale(1.1); /* 放大至110% */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1; /* 设置透明度为1 */
|
|
|
transform: scale(1); /* 恢复到100% */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-scale-spring动画 */
|
|
|
.layui-anim-scaleSpring {
|
|
|
/* 设置动画名称为layui-scale-spring */
|
|
|
-webkit-animation-name: layui-scale-spring; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-scale-spring; /* 设置动画名称 */
|
|
|
}
|
|
|
|
|
|
/* 定义淡入效果的动画 */
|
|
|
@-webkit-keyframes layui-fadein {
|
|
|
0% {
|
|
|
opacity: 0; /* 初始状态：透明度为0 */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1; /* 结束状态：透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的淡入效果的动画 */
|
|
|
@keyframes layui-fadein {
|
|
|
0% {
|
|
|
opacity: 0; /* 初始状态：透明度为0 */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1; /* 结束状态：透明度为1 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-fadein动画 */
|
|
|
.layui-anim-fadein {
|
|
|
/* 设置动画名称为layui-fadein */
|
|
|
-webkit-animation-name: layui-fadein; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-fadein; /* 设置动画名称 */
|
|
|
}
|
|
|
|
|
|
/* 定义淡出效果的动画 */
|
|
|
@-webkit-keyframes layui-fadeout {
|
|
|
0% {
|
|
|
opacity: 1; /* 初始状态：透明度为1 */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 0; /* 结束状态：透明度为0 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 标准化的淡出效果的动画 */
|
|
|
@keyframes layui-fadeout {
|
|
|
0% {
|
|
|
opacity: 1; /* 初始状态：透明度为1 */
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 0; /* 结束状态：透明度为0 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 使用layui-fadeout动画 */
|
|
|
.layui-anim-fadeout {
|
|
|
/* 设置动画名称为layui-fadeout */
|
|
|
-webkit-animation-name: layui-fadeout; /* 兼容Webkit的浏览器 */
|
|
|
animation-name: layui-fadeout; /* 设置动画名称 */
|
|
|
}
|
