|
|
|
|
@ -1,29 +1,42 @@
|
|
|
|
|
/* 设置字符集为UTF-8，确保页面可以正确显示中文等字符 */
|
|
|
|
|
@charset "utf-8";
|
|
|
|
|
|
|
|
|
|
/* 导入layui框架的CSS文件，layui是一个前端UI框架 */
|
|
|
|
|
@import url(../lib/layui/css/layui.css);
|
|
|
|
|
*{
|
|
|
|
|
|
|
|
|
|
/* 全局样式重置，移除所有元素的默认外边距和内边距，并设置默认字体 */
|
|
|
|
|
* {
|
|
|
|
|
margin: 0px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
a{
|
|
|
|
|
|
|
|
|
|
/* 移除所有链接的下划线 */
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
html{
|
|
|
|
|
|
|
|
|
|
/* 设置HTML元素的宽高为100%，并隐藏水平滚动条，允许垂直滚动条 */
|
|
|
|
|
html {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow-x:hidden;
|
|
|
|
|
overflow-y:auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
body{
|
|
|
|
|
|
|
|
|
|
/* 设置body元素的宽度和最小高度，确保内容可以填满整个视口 */
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.x-body{
|
|
|
|
|
/* 容器样式，为页面内容提供内边距 */
|
|
|
|
|
.x-body {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
.x-nav{
|
|
|
|
|
|
|
|
|
|
/* 导航栏样式，设置内边距、相对定位、z-index、边框、行高和高度 */
|
|
|
|
|
.x-nav {
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
@ -32,395 +45,726 @@ body{
|
|
|
|
|
height: 39px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
xblock{
|
|
|
|
|
|
|
|
|
|
/* 错误：xblock应该是 .x-block，块级元素样式，设置显示类型、外边距、内边距、行高、边框和背景颜色 */
|
|
|
|
|
.x-block {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
/* border-left: 5px solid #009688; */
|
|
|
|
|
/* border-left: 5px solid #009688; */ /* 注释掉的边框样式 */
|
|
|
|
|
border-radius: 0 2px 2px 0;
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
}
|
|
|
|
|
.x-right{
|
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
|
|
/* 右浮动样式，用于将元素向右浮动 */
|
|
|
|
|
.x-right {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
.x-so{
|
|
|
|
|
/*text-align: center;*/
|
|
|
|
|
/*background: #f2f2f2 url() 0 0 no-repeat;*/
|
|
|
|
|
|
|
|
|
|
/* 搜索栏样式，设置下外边距 */
|
|
|
|
|
.x-so {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
/*text-align: center;*/ /* 注释掉的文本居中样式 */
|
|
|
|
|
/*background: #f2f2f2 url() 0 0 no-repeat;*/ /* 注释掉的背景样式 */
|
|
|
|
|
}
|
|
|
|
|
.x-so input.layui-input{
|
|
|
|
|
|
|
|
|
|
/* 搜索栏中的layui输入框样式，设置宽度 */
|
|
|
|
|
.x-so input.layui-input {
|
|
|
|
|
width: 150px;
|
|
|
|
|
}
|
|
|
|
|
.x-so .layui-form-label{
|
|
|
|
|
|
|
|
|
|
/* 搜索栏中的layui表单标签样式，设置显示类型为行内块级元素 */
|
|
|
|
|
.x-so .layui-form-label {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.x-so input.layui-input,.x-so input.layui-btn{
|
|
|
|
|
|
|
|
|
|
/* 搜索栏中的layui输入框和按钮样式，设置显示类型为行内块级元素 */
|
|
|
|
|
.x-so input.layui-input, .x-so input.layui-btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.x-red{
|
|
|
|
|
|
|
|
|
|
/* 红色文本样式 */
|
|
|
|
|
.x-red {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
.x-a{
|
|
|
|
|
|
|
|
|
|
/* 链接文本颜色样式 */
|
|
|
|
|
.x-a {
|
|
|
|
|
color: #1AA093;
|
|
|
|
|
}
|
|
|
|
|
.x-a:hover{
|
|
|
|
|
|
|
|
|
|
/* 链接悬停时的文本颜色样式 */
|
|
|
|
|
.x-a:hover {
|
|
|
|
|
color: #127F74;
|
|
|
|
|
}
|
|
|
|
|
.x-sort{
|
|
|
|
|
|
|
|
|
|
/* 排序操作的高度样式 */
|
|
|
|
|
.x-sort {
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.x-show{
|
|
|
|
|
|
|
|
|
|
/* 显示操作的可点击样式 */
|
|
|
|
|
.x-show {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.layui-form-switch{
|
|
|
|
|
|
|
|
|
|
/* layui表单开关的顶部外边距样式 */
|
|
|
|
|
.layui-form-switch {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* layui输入框和文本域获得焦点时的边框颜色样式 */
|
|
|
|
|
.layui-input:focus, .layui-textarea:focus {
|
|
|
|
|
border-color: #189f92!important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page{
|
|
|
|
|
/* 分页容器的样式 */
|
|
|
|
|
.page {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
/* 上外边距 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
/* 文本居中 */
|
|
|
|
|
}
|
|
|
|
|
.page a{
|
|
|
|
|
|
|
|
|
|
/* 分页链接的样式 */
|
|
|
|
|
.page a {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 显示为行内块级元素 */
|
|
|
|
|
background: #fff url(#) 0 0 no-repeat;
|
|
|
|
|
/* 背景图片，这里没有指定图片，所以不会显示 */
|
|
|
|
|
color: #888;
|
|
|
|
|
/* 文本颜色 */
|
|
|
|
|
padding: 10px;
|
|
|
|
|
/* 内边距 */
|
|
|
|
|
min-width: 15px;
|
|
|
|
|
/* 最小宽度 */
|
|
|
|
|
border: 1px solid #E2E2E2;
|
|
|
|
|
|
|
|
|
|
/* 边框样式 */
|
|
|
|
|
}
|
|
|
|
|
.page span{
|
|
|
|
|
|
|
|
|
|
/* 分页数字的样式 */
|
|
|
|
|
.page span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 显示为行内块级元素 */
|
|
|
|
|
padding: 10px;
|
|
|
|
|
/* 内边距 */
|
|
|
|
|
min-width: 15px;
|
|
|
|
|
/* 最小宽度 */
|
|
|
|
|
border: 1px solid #E2E2E2;
|
|
|
|
|
/* 边框样式 */
|
|
|
|
|
}
|
|
|
|
|
.page span.current{
|
|
|
|
|
|
|
|
|
|
/* 当前页码的样式 */
|
|
|
|
|
.page span.current {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 显示为行内块级元素 */
|
|
|
|
|
background: #009688 url(#) 0 0 no-repeat;
|
|
|
|
|
/* 背景颜色和图片 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 文本颜色 */
|
|
|
|
|
padding: 10px;
|
|
|
|
|
/* 内边距 */
|
|
|
|
|
min-width: 15px;
|
|
|
|
|
/* 最小宽度 */
|
|
|
|
|
border: 1px solid #009688;
|
|
|
|
|
/* 边框样式 */
|
|
|
|
|
}
|
|
|
|
|
.page .pagination li{
|
|
|
|
|
|
|
|
|
|
/* 分页器列表项的样式 */
|
|
|
|
|
.page .pagination li {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
/* 显示为行内块级元素 */
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
/* 右外边距 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* 文本居中 */
|
|
|
|
|
}
|
|
|
|
|
.page .pagination li.active span{
|
|
|
|
|
|
|
|
|
|
/* 激活状态下的分页器列表项的样式 */
|
|
|
|
|
.page .pagination li.active span {
|
|
|
|
|
background: #009688 url(#) 0 0 no-repeat;
|
|
|
|
|
/* 背景颜色和图片 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 文本颜色 */
|
|
|
|
|
border: 1px solid #009688;
|
|
|
|
|
|
|
|
|
|
/* 边框样式 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*登录样式*/
|
|
|
|
|
/*头部*/
|
|
|
|
|
.container{
|
|
|
|
|
/* 容器样式，通常用于页面的顶部导航 */
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 设置容器宽度为100% */
|
|
|
|
|
height: 45px;
|
|
|
|
|
/* 设置容器高度为45像素 */
|
|
|
|
|
background-color: #222;
|
|
|
|
|
/* 设置容器背景颜色为深灰色 */
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
/* 设置容器底部边框为半透明的白色 */
|
|
|
|
|
}
|
|
|
|
|
.container .logo a{
|
|
|
|
|
|
|
|
|
|
/* 容器内logo链接的样式 */
|
|
|
|
|
.container .logo a {
|
|
|
|
|
float: left;
|
|
|
|
|
/* 设置元素左浮动 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 设置文本颜色为白色 */
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
/* 设置字体大小为18像素 */
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
/* 设置左侧内边距为20像素 */
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
/* 设置行高为45像素，与容器高度一致，实现垂直居中 */
|
|
|
|
|
width: 200px;
|
|
|
|
|
/* 设置元素宽度为200像素 */
|
|
|
|
|
}
|
|
|
|
|
.container .right{
|
|
|
|
|
background-color:rgba(0,0,0,0);
|
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
|
|
/* 容器右侧内容的样式 */
|
|
|
|
|
.container .right {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
/* 设置背景颜色为透明 */
|
|
|
|
|
float: right;
|
|
|
|
|
/* 设置元素右浮动 */
|
|
|
|
|
}
|
|
|
|
|
.container .left_open{
|
|
|
|
|
|
|
|
|
|
/* 容器左侧打开按钮的样式 */
|
|
|
|
|
.container .left_open {
|
|
|
|
|
height: 45px;
|
|
|
|
|
/* 设置高度为45像素 */
|
|
|
|
|
float: left;
|
|
|
|
|
/* 设置元素左浮动 */
|
|
|
|
|
}
|
|
|
|
|
.container .left_open i{
|
|
|
|
|
|
|
|
|
|
/* 容器左侧打开按钮图标的样式 */
|
|
|
|
|
.container .left_open i {
|
|
|
|
|
display: block;
|
|
|
|
|
background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置为块级元素 */
|
|
|
|
|
background: rgba(255, 255, 255, 0.1) url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景颜色和图片，这里没有指定图片，所以不会显示 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 设置文本颜色为白色 */
|
|
|
|
|
width: 32px;
|
|
|
|
|
/* 设置宽度为32像素 */
|
|
|
|
|
height: 32px;
|
|
|
|
|
/* 设置高度为32像素 */
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
/* 设置行高为32像素，实现垂直居中 */
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
/* 设置边框圆角 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* 设置文本居中 */
|
|
|
|
|
margin-top: 7px;
|
|
|
|
|
/* 设置顶部外边距为7像素 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
}
|
|
|
|
|
.container .left_open i:hover{
|
|
|
|
|
background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat;
|
|
|
|
|
|
|
|
|
|
/* 容器左侧打开按钮图标悬停时的样式 */
|
|
|
|
|
.container .left_open i:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.3) url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置悬停时的背景颜色和图片 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container .left{
|
|
|
|
|
background-color:rgba(0,0,0,0);
|
|
|
|
|
/* 容器左侧内容的样式 */
|
|
|
|
|
.container .left {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
/* 设置背景颜色为透明 */
|
|
|
|
|
float: left;
|
|
|
|
|
|
|
|
|
|
/* 设置元素左浮动 */
|
|
|
|
|
}
|
|
|
|
|
.container .layui-nav-item{
|
|
|
|
|
|
|
|
|
|
/* 容器导航项的样式 */
|
|
|
|
|
.container .layui-nav-item {
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
/* 设置行高为45像素，与容器高度一致，实现垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
.container .layui-nav-more{
|
|
|
|
|
|
|
|
|
|
/* 容器导航项下拉三角的样式 */
|
|
|
|
|
.container .layui-nav-more {
|
|
|
|
|
top: 20px;
|
|
|
|
|
/* 设置下拉三角的顶部位置 */
|
|
|
|
|
}
|
|
|
|
|
.container .layui-nav-child{
|
|
|
|
|
|
|
|
|
|
/* 容器导航子菜单的样式 */
|
|
|
|
|
.container .layui-nav-child {
|
|
|
|
|
top: 50px;
|
|
|
|
|
/* 设置子菜单的顶部位置 */
|
|
|
|
|
}
|
|
|
|
|
.container .layui-nav-child i{
|
|
|
|
|
|
|
|
|
|
/* 容器导航子菜单项图标的样式 */
|
|
|
|
|
.container .layui-nav-child i {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
/* 设置图标右侧外边距为10像素 */
|
|
|
|
|
}
|
|
|
|
|
.layui-nav .layui-nav-item a{
|
|
|
|
|
|
|
|
|
|
/* layui导航项链接的样式 */
|
|
|
|
|
.layui-nav .layui-nav-item a {
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 设置文本颜色为白色 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
}
|
|
|
|
|
.layui-nav .layui-nav-child a{
|
|
|
|
|
|
|
|
|
|
/* layui导航子菜单链接的样式 */
|
|
|
|
|
.layui-nav .layui-nav-child a {
|
|
|
|
|
color: #333;
|
|
|
|
|
/* 设置文本颜色为深灰色 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏的样式 */
|
|
|
|
|
.left-nav {
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 绝对定位 */
|
|
|
|
|
top: 46px;
|
|
|
|
|
/* 顶部距离为46像素 */
|
|
|
|
|
bottom: 42px;
|
|
|
|
|
/* 底部距离为42像素 */
|
|
|
|
|
left: 0;
|
|
|
|
|
/* 左侧距离为0 */
|
|
|
|
|
z-index: 2;
|
|
|
|
|
/* 设置堆叠顺序为2 */
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
/* 顶部内边距为10像素 */
|
|
|
|
|
background-color: #EEEEEE;
|
|
|
|
|
/* 设置背景颜色为浅灰色 */
|
|
|
|
|
width: 220px;
|
|
|
|
|
/* 设置宽度为220像素 */
|
|
|
|
|
max-width: 220px;
|
|
|
|
|
/* 设置最大宽度为220像素 */
|
|
|
|
|
overflow: auto;
|
|
|
|
|
overflow-x:hidden;
|
|
|
|
|
/* 当内容超出时显示滚动条 */
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
/* 隐藏水平滚动条 */
|
|
|
|
|
border-right: 1px solid #e5e5e5;
|
|
|
|
|
|
|
|
|
|
/*width: 0px;*/
|
|
|
|
|
/* 设置右侧边框为浅灰色 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏列表项的样式 */
|
|
|
|
|
.left-nav #nav li {
|
|
|
|
|
border-bottom: 1px solid #e5e5e5;
|
|
|
|
|
/* 设置底部边框为浅灰色 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li:hover > a{
|
|
|
|
|
/*color: blue;*/
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏列表项悬停时的样式（注释掉的部分） */
|
|
|
|
|
.left-nav #nav li:hover > a {
|
|
|
|
|
/*color: blue;*/ /* 设置悬停时文本颜色为蓝色（注释掉） */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav .current{
|
|
|
|
|
|
|
|
|
|
/* 当前激活的左侧导航栏列表项的样式 */
|
|
|
|
|
.left-nav #nav .current {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
/* 设置背景颜色为半透明的黑色 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li a{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏列表项链接的样式 */
|
|
|
|
|
.left-nav #nav li a {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
/* 设置字体大小为14像素 */
|
|
|
|
|
padding: 10px 15px 10px 20px;
|
|
|
|
|
/* 设置内边距 */
|
|
|
|
|
display: block;
|
|
|
|
|
/* 显示为块级元素 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li a cite{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏列表项链接的标题样式 */
|
|
|
|
|
.left-nav #nav li a cite {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
/* 设置字体大小为14像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left-nav #nav li .sub-menu{
|
|
|
|
|
/* 左侧导航栏子菜单的默认样式（隐藏） */
|
|
|
|
|
.left-nav #nav li .sub-menu {
|
|
|
|
|
display: none;
|
|
|
|
|
/* 隐藏子菜单 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .opened{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏展开的子菜单样式 */
|
|
|
|
|
.left-nav #nav li .opened {
|
|
|
|
|
display: block;
|
|
|
|
|
/* 显示子菜单 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .opened:hover{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏展开的子菜单悬停时的样式（注释掉的部分） */
|
|
|
|
|
.left-nav #nav li .opened:hover {
|
|
|
|
|
/*background: #fff url() 0 0 no-repeat;*/
|
|
|
|
|
/* 设置悬停时背景颜色和图片（注释掉） */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .opened .current{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .sub-menu li:hover{
|
|
|
|
|
/*color: blue;*/
|
|
|
|
|
/*background: #fff url() 0 0 no-repeat;*/
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏展开的子菜单中当前激活的列表项样式（未设置样式） */
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏子菜单列表项悬停时的样式（注释掉的部分） */
|
|
|
|
|
.left-nav #nav li .sub-menu li:hover {
|
|
|
|
|
/*color: blue;*/ /* 设置悬停时文本颜色为蓝色（注释掉） */
|
|
|
|
|
/*background: #fff url() 0 0 no-repeat;*/
|
|
|
|
|
/* 设置悬停时背景颜色和图片（注释掉） */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .sub-menu li a{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏子菜单列表项链接的样式 */
|
|
|
|
|
.left-nav #nav li .sub-menu li a {
|
|
|
|
|
padding: 12px 15px 12px 30px;
|
|
|
|
|
/* 设置内边距 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
/* 设置字体大小为14像素 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .sub-menu li .sub-menu li a{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏更深层次的子菜单列表项链接的样式 */
|
|
|
|
|
.left-nav #nav li .sub-menu li .sub-menu li a {
|
|
|
|
|
padding-left: 45px;
|
|
|
|
|
/* 设置左侧内边距为45像素 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .sub-menu li a:hover{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏子菜单列表项链接悬停时的样式 */
|
|
|
|
|
.left-nav #nav li .sub-menu li a:hover {
|
|
|
|
|
color: #148cf1;
|
|
|
|
|
/* 设置悬停时文本颜色为蓝色 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .sub-menu li a i{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏子菜单列表项链接图标的样式 */
|
|
|
|
|
.left-nav #nav li .sub-menu li a i {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
/* 设置图标字体大小为12像素 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li a i{
|
|
|
|
|
/* 左侧导航栏列表项链接图标的样式 */
|
|
|
|
|
.left-nav #nav li a i {
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
/* 设置图标右侧外边距为10像素 */
|
|
|
|
|
line-height: 14px;
|
|
|
|
|
/* 设置图标行高为14像素 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav #nav li .nav_right{
|
|
|
|
|
|
|
|
|
|
/* 左侧导航栏列表项右侧内容的样式 */
|
|
|
|
|
.left-nav #nav li .nav_right {
|
|
|
|
|
float: right;
|
|
|
|
|
/* 设置内容浮动到右侧 */
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
/* 设置字体大小为16像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 左侧滑动按钮的样式 */
|
|
|
|
|
.x-slide_left {
|
|
|
|
|
width: 17px;
|
|
|
|
|
/* 设置宽度为17像素 */
|
|
|
|
|
height: 61px;
|
|
|
|
|
/* 设置高度为61像素 */
|
|
|
|
|
background: url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景图片，目前为空 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 绝对定位 */
|
|
|
|
|
top: 200px;
|
|
|
|
|
/* 顶部距离为200像素 */
|
|
|
|
|
left: 221px;
|
|
|
|
|
/* 左侧距离为221像素 */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
/* 设置鼠标悬停时为指针形状 */
|
|
|
|
|
z-index: 3;
|
|
|
|
|
/* 设置堆叠顺序为3 */
|
|
|
|
|
}
|
|
|
|
|
.page-content{
|
|
|
|
|
|
|
|
|
|
/* 页面内容的样式 */
|
|
|
|
|
.page-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 绝对定位 */
|
|
|
|
|
top: 46px;
|
|
|
|
|
/* 顶部距离为46像素 */
|
|
|
|
|
right: 0;
|
|
|
|
|
/* 右侧距离为0 */
|
|
|
|
|
bottom: 42px;
|
|
|
|
|
/* 底部距离为42像素 */
|
|
|
|
|
left: 221px;
|
|
|
|
|
/* 左侧距离为221像素 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 隐藏溢出的内容 */
|
|
|
|
|
z-index: 1;
|
|
|
|
|
/* 设置堆叠顺序为1 */
|
|
|
|
|
}
|
|
|
|
|
.page-content-bg{
|
|
|
|
|
|
|
|
|
|
/* 页面内容背景的样式 */
|
|
|
|
|
.page-content-bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 绝对定位 */
|
|
|
|
|
top: 46px;
|
|
|
|
|
/* 顶部距离为46像素 */
|
|
|
|
|
right: 0;
|
|
|
|
|
/* 右侧距离为0 */
|
|
|
|
|
bottom: 42px;
|
|
|
|
|
/* 底部距离为42像素 */
|
|
|
|
|
left: 221px;
|
|
|
|
|
background: rgba(0,0,0,0.5); url() 0 0 no-repeat;
|
|
|
|
|
/* 左侧距离为221像素 */
|
|
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
|
|
/* 设置半透明的黑色背景 */
|
|
|
|
|
url() 0 0 no-repeat;
|
|
|
|
|
/* 设置背景图片，目前为空 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 隐藏溢出的内容 */
|
|
|
|
|
z-index: 100;
|
|
|
|
|
/* 设置堆叠顺序为100 */
|
|
|
|
|
display: none;
|
|
|
|
|
/* 默认不显示 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-content .tab{
|
|
|
|
|
/* 页面内容中标签页的样式 */
|
|
|
|
|
.page-content .tab {
|
|
|
|
|
height: 100%;
|
|
|
|
|
/* 设置高度为100% */
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 设置宽度为100% */
|
|
|
|
|
background: #EFEEF0 url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景颜色和图片，目前为空 */
|
|
|
|
|
margin: 0px;
|
|
|
|
|
/* 移除默认外边距 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页标题的样式 */
|
|
|
|
|
.page-content .layui-tab-title {
|
|
|
|
|
/*padding-top: 5px;*/
|
|
|
|
|
/* 注释掉的顶部内边距 */
|
|
|
|
|
height: 35px;
|
|
|
|
|
/* 设置高度为35像素 */
|
|
|
|
|
background: #EFEEF0 url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景颜色和图片，目前为空 */
|
|
|
|
|
position: relative;
|
|
|
|
|
/* 相对定位 */
|
|
|
|
|
z-index: 100;
|
|
|
|
|
/* 设置堆叠顺序为100 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title li.home i{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页标题的首页图标样式 */
|
|
|
|
|
.page-content .layui-tab-title li.home i {
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
/* 设置图标右侧外边距为5像素 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title li.home .layui-tab-close{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页标题的首页关闭按钮样式 */
|
|
|
|
|
.page-content .layui-tab-title li.home .layui-tab-close {
|
|
|
|
|
display: none;
|
|
|
|
|
/* 不显示关闭按钮 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title li{
|
|
|
|
|
/* 页面内容中标签页标题列表项的样式 */
|
|
|
|
|
.page-content .layui-tab-title li {
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
/* 设置行高为35像素，确保文本垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title .layui-this:after{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中当前激活标签页标题的下划线样式 */
|
|
|
|
|
.page-content .layui-tab-title .layui-this:after {
|
|
|
|
|
height: 36px;
|
|
|
|
|
/* 设置下划线高度为36像素 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title li .layui-tab-close{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页标题的关闭按钮样式 */
|
|
|
|
|
.page-content .layui-tab-title li .layui-tab-close {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
/* 设置关闭按钮为圆形 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-title .layui-this{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中当前激活标签页标题的样式 */
|
|
|
|
|
.page-content .layui-tab-title .layui-this {
|
|
|
|
|
background: #fff url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景颜色和图片，目前为空 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-bar{
|
|
|
|
|
height:34px;
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页标题的水平滚动条样式 */
|
|
|
|
|
.page-content .layui-tab-bar {
|
|
|
|
|
height: 34px;
|
|
|
|
|
/* 设置高度为34像素 */
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
/* 设置行高为35像素，确保滚动条垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-content{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中标签页内容的样式 */
|
|
|
|
|
.page-content .layui-tab-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
/* 绝对定位 */
|
|
|
|
|
top: 36px;
|
|
|
|
|
/* 顶部距离为36像素 */
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
/* 底部距离为0像素 */
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 宽度为100% */
|
|
|
|
|
background: #fff url(#) 0 0 no-repeat;
|
|
|
|
|
/* 设置背景颜色和图片，目前为空 */
|
|
|
|
|
padding: 0px;
|
|
|
|
|
/* 移除内边距 */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/* 隐藏溢出的内容 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中单个标签页项的样式 */
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 宽度为100% */
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
/* 高度为100% */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item iframe{
|
|
|
|
|
|
|
|
|
|
/* 页面内容中单个标签页项内iframe的样式 */
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item iframe {
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 宽度为100% */
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
/* 高度为100% */
|
|
|
|
|
}
|
|
|
|
|
.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* {
|
|
|
|
|
background-color:#fff
|
|
|
|
|
/* 设置轮播图及其子项的背景颜色 */
|
|
|
|
|
.x-admin-carousel, .layui-carousel, .x-admin-carousel>[carousel-item]>* {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
/* 白色背景 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置后台管理面板中待办事项的样式 */
|
|
|
|
|
.x-admin-backlog .x-admin-backlog-body {
|
|
|
|
|
display:block;
|
|
|
|
|
padding:10px 15px;
|
|
|
|
|
background-color:#f8f8f8;
|
|
|
|
|
color:#999;
|
|
|
|
|
border-radius:2px;
|
|
|
|
|
transition:all .3s;
|
|
|
|
|
-webkit-transition:all .3s
|
|
|
|
|
display: block;
|
|
|
|
|
/* 块级显示 */
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
/* 内边距 */
|
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
|
/* 浅灰色背景 */
|
|
|
|
|
color: #999;
|
|
|
|
|
/* 深灰色文本 */
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
/* 边框圆角 */
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
/* 过渡效果，所有属性变化在0.3秒内完成 */
|
|
|
|
|
-webkit-transition: all .3s;
|
|
|
|
|
/* 兼容旧版Webkit浏览器，所有属性变化在0.3秒内完成 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 待办事项标题样式 */
|
|
|
|
|
.x-admin-backlog-body h3 {
|
|
|
|
|
padding-bottom:10px;
|
|
|
|
|
font-size:12px
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
/* 底部内边距 */
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
/* 字体大小 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 待办事项数字样式 */
|
|
|
|
|
.x-admin-backlog-body p cite {
|
|
|
|
|
font-style:normal;
|
|
|
|
|
font-size:30px;
|
|
|
|
|
font-weight:300;
|
|
|
|
|
color:#009688
|
|
|
|
|
font-style: normal;
|
|
|
|
|
/* 正常字体样式 */
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
/* 字体大小 */
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
/* 字体粗细 */
|
|
|
|
|
color: #009688;
|
|
|
|
|
/* 绿色文本 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 待办事项鼠标悬停时的样式 */
|
|
|
|
|
.x-admin-backlog-body:hover {
|
|
|
|
|
background-color:#CFCFCF;
|
|
|
|
|
color:#888
|
|
|
|
|
background-color: #CFCFCF;
|
|
|
|
|
/* 悬停时背景颜色 */
|
|
|
|
|
color: #888;
|
|
|
|
|
/* 悬停时文本颜色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 页脚样式 */
|
|
|
|
|
.welcome-footer {
|
|
|
|
|
padding: 30px 0;
|
|
|
|
|
/* 顶部和底部内边距 */
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
/* 行高 */
|
|
|
|
|
text-align: center;
|
|
|
|
|
/* 文本居中 */
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
/* 浅灰色背景 */
|
|
|
|
|
color: #666;
|
|
|
|
|
/* 深灰色文本 */
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
/* 字体粗细 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;}
|
|
|
|
|
body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;}
|
|
|
|
|
.welcome-footer a{padding: 0 5px;}
|
|
|
|
|
/* 后台管理布局页脚的样式 */
|
|
|
|
|
body .layui-layout-admin .footer-demo {
|
|
|
|
|
height: auto;
|
|
|
|
|
/* 高度自适应 */
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
/* 顶部和底部内边距 */
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
/* 行高 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 页脚链接样式 */
|
|
|
|
|
.welcome-footer a {
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
/* 左右内边距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 表格单元格样式，确保内容不会超出单元格 */
|
|
|
|
|
table th, table td {
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
/* 允许在单词内部进行断行 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer{
|
|
|
|
|
|
|
|
|
|
/* 页脚样式 */
|
|
|
|
|
.footer {
|
|
|
|
|
position: fixed;
|
|
|
|
|
/* 固定定位，相对于视口 */
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
/* 距离视口底部0像素 */
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 宽度为100% */
|
|
|
|
|
background-color: #222;
|
|
|
|
|
/* 深灰色背景 */
|
|
|
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
/* 上边框为半透明白色 */
|
|
|
|
|
line-height: 41px;
|
|
|
|
|
/* 行高为41像素 */
|
|
|
|
|
color: #fff;
|
|
|
|
|
/* 文本颜色为白色 */
|
|
|
|
|
/*padding-left: 10px;*/
|
|
|
|
|
/* 左侧内边距，已注释掉 */
|
|
|
|
|
}
|
|
|
|
|
.footer .copyright{
|
|
|
|
|
.footer .copyright {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
/* 左侧外边距为10像素 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 768px){
|
|
|
|
|
.fast-add{
|
|
|
|
|
/* 响应式设计，针对屏幕宽度小于或等于768像素的设备 */
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
|
.fast-add {
|
|
|
|
|
display: none;
|
|
|
|
|
/* 隐藏快速添加按钮 */
|
|
|
|
|
}
|
|
|
|
|
.layui-nav .to-index{
|
|
|
|
|
.layui-nav .to-index {
|
|
|
|
|
display: none;
|
|
|
|
|
/* 隐藏返回首页的导航项 */
|
|
|
|
|
}
|
|
|
|
|
.container .logo a{
|
|
|
|
|
.container .logo a {
|
|
|
|
|
width: 140px;
|
|
|
|
|
/* 调整logo宽度 */
|
|
|
|
|
}
|
|
|
|
|
.container .left_open {
|
|
|
|
|
/*float: right;*/
|
|
|
|
|
/*float: right;*/ /* 已注释掉，可能用于调整左侧菜单按钮位置 */
|
|
|
|
|
}
|
|
|
|
|
.left-nav{
|
|
|
|
|
.left-nav {
|
|
|
|
|
left: -221px;
|
|
|
|
|
/* 将左侧导航栏隐藏在视口左侧 */
|
|
|
|
|
}
|
|
|
|
|
.page-content{
|
|
|
|
|
.page-content {
|
|
|
|
|
left: 0px;
|
|
|
|
|
/* 将页面内容区域左对齐 */
|
|
|
|
|
}
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item{
|
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
.page-content .layui-tab-content .layui-tab-item {
|
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
|
/* 在iOS设备上启用硬件加速滚动 */
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
/* 启用垂直滚动条 */
|
|
|
|
|
}
|
|
|
|
|
.x-so input.layui-input{
|
|
|
|
|
.x-so input.layui-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
/* 搜索输入框宽度为100% */
|
|
|
|
|
margin: 10px;
|
|
|
|
|
/* 搜索输入框的外边距 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
