/* 设置字符集为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 {
    text-decoration: none;
}

/* 设置HTML元素的宽高为100%，并隐藏水平滚动条，允许垂直滚动条 */
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 设置body元素的宽度和最小高度，确保内容可以填满整个视口 */
body {
    width: 100%;
    min-height: 100%;
}

/* 容器样式，为页面内容提供内边距 */
.x-body {
    padding: 20px;
}

/* 导航栏样式，设置内边距、相对定位、z-index、边框、行高和高度 */
.x-nav {
    padding: 0 20px;
    position: relative;
    z-index: 99;
    border-bottom: 1px solid #e5e5e5;
    line-height: 39px;
    height: 39px;
    overflow: hidden;
}

/* 错误：xblock应该是 .x-block，块级元素样式，设置显示类型、外边距、内边距、行高、边框和背景颜色 */
.x-block {
    display: block;
    margin-bottom: 10px;
    padding: 5px;
    line-height: 22px;
    /* border-left: 5px solid #009688; */ /* 注释掉的边框样式 */
    border-radius: 0 2px 2px 0;
    background-color: #f2f2f2;
}

/* 右浮动样式，用于将元素向右浮动 */
.x-right {
    float: right;
}

/* 搜索栏样式，设置下外边距 */
.x-so {
    margin-bottom: 20px;
    /*text-align: center;*/ /* 注释掉的文本居中样式 */
    /*background: #f2f2f2 url() 0 0 no-repeat;*/ /* 注释掉的背景样式 */
}

/* 搜索栏中的layui输入框样式，设置宽度 */
.x-so input.layui-input {
    width: 150px;
}

/* 搜索栏中的layui表单标签样式，设置显示类型为行内块级元素 */
.x-so .layui-form-label {
    display: inline-block;
}

/* 搜索栏中的layui输入框和按钮样式，设置显示类型为行内块级元素 */
.x-so input.layui-input, .x-so input.layui-btn {
    display: inline-block;
}

/* 红色文本样式 */
.x-red {
    color: red;
}

/* 链接文本颜色样式 */
.x-a {
    color: #1AA093;
}

/* 链接悬停时的文本颜色样式 */
.x-a:hover {
    color: #127F74;
}

/* 排序操作的高度样式 */
.x-sort {
    height: 30px;
}

/* 显示操作的可点击样式 */
.x-show {
    cursor: pointer;
}

/* layui表单开关的顶部外边距样式 */
.layui-form-switch {
    margin-top: 0px;
}

/* layui输入框和文本域获得焦点时的边框颜色样式 */
.layui-input:focus, .layui-textarea:focus {
    border-color: #189f92!important;
}

/* 分页容器的样式 */
.page {
    margin-top: 20px;
    /* 上外边距 */
    text-align: center;
    /* 文本居中 */
}

/* 分页链接的样式 */
.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 {
    display: inline-block;
    /* 显示为行内块级元素 */
    padding: 10px;
    /* 内边距 */
    min-width: 15px;
    /* 最小宽度 */
    border: 1px solid #E2E2E2;
    /* 边框样式 */
}

/* 当前页码的样式 */
.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 {
    display: inline-block;
    /* 显示为行内块级元素 */
    margin-right: 5px;
    /* 右外边距 */
    text-align: center;
    /* 文本居中 */
}

/* 激活状态下的分页器列表项的样式 */
.page .pagination li.active span {
    background: #009688 url(#) 0 0 no-repeat;
    /* 背景颜色和图片 */
    color: #fff;
    /* 文本颜色 */
    border: 1px solid #009688;
    /* 边框样式 */
}


/*登录样式*/
/*头部*/
/* 容器样式，通常用于页面的顶部导航 */
.container {
    width: 100%;
    /* 设置容器宽度为100% */
    height: 45px;
    /* 设置容器高度为45像素 */
    background-color: #222;
    /* 设置容器背景颜色为深灰色 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* 设置容器底部边框为半透明的白色 */
}

/* 容器内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 .left_open {
    height: 45px;
    /* 设置高度为45像素 */
    float: left;
    /* 设置元素左浮动 */
}

/* 容器左侧打开按钮图标的样式 */
.container .left_open i {
    display: block;
    /* 设置为块级元素 */
    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 {
    background-color: rgba(0, 0, 0, 0);
    /* 设置背景颜色为透明 */
    float: left;
    /* 设置元素左浮动 */
}

/* 容器导航项的样式 */
.container .layui-nav-item {
    line-height: 45px;
    /* 设置行高为45像素，与容器高度一致，实现垂直居中 */
}

/* 容器导航项下拉三角的样式 */
.container .layui-nav-more {
    top: 20px;
    /* 设置下拉三角的顶部位置 */
}

/* 容器导航子菜单的样式 */
.container .layui-nav-child {
    top: 50px;
    /* 设置子菜单的顶部位置 */
}

/* 容器导航子菜单项图标的样式 */
.container .layui-nav-child i {
    margin-right: 10px;
    /* 设置图标右侧外边距为10像素 */
}

/* layui导航项链接的样式 */
.layui-nav .layui-nav-item a {
    color: #fff;
    /* 设置文本颜色为白色 */
    cursor: pointer;
    /* 设置鼠标悬停时为指针形状 */
}

/* layui导航子菜单链接的样式 */
.layui-nav .layui-nav-child a {
    color: #333;
    /* 设置文本颜色为深灰色 */
    cursor: pointer;
    /* 设置鼠标悬停时为指针形状 */
}

/* 左侧导航栏的样式 */
.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;
    /* 隐藏水平滚动条 */
    border-right: 1px solid #e5e5e5;
    /* 设置右侧边框为浅灰色 */
}

/* 左侧导航栏列表项的样式 */
.left-nav #nav li {
    border-bottom: 1px solid #e5e5e5;
    /* 设置底部边框为浅灰色 */
}

/* 左侧导航栏列表项悬停时的样式（注释掉的部分） */
.left-nav #nav li:hover > a {
    /*color: blue;*/ /* 设置悬停时文本颜色为蓝色（注释掉） */
}

/* 当前激活的左侧导航栏列表项的样式 */
.left-nav #nav .current {
    background-color: rgba(0, 0, 0, 0.3);
    /* 设置背景颜色为半透明的黑色 */
}

/* 左侧导航栏列表项链接的样式 */
.left-nav #nav li a {
    font-size: 14px;
    /* 设置字体大小为14像素 */
    padding: 10px 15px 10px 20px;
    /* 设置内边距 */
    display: block;
    /* 显示为块级元素 */
    cursor: pointer;
    /* 设置鼠标悬停时为指针形状 */
}

/* 左侧导航栏列表项链接的标题样式 */
.left-nav #nav li a cite {
    font-size: 14px;
    /* 设置字体大小为14像素 */
}

/* 左侧导航栏子菜单的默认样式（隐藏） */
.left-nav #nav li .sub-menu {
    display: none;
    /* 隐藏子菜单 */
}

/* 左侧导航栏展开的子菜单样式 */
.left-nav #nav li .opened {
    display: block;
    /* 显示子菜单 */
}

/* 左侧导航栏展开的子菜单悬停时的样式（注释掉的部分） */
.left-nav #nav li .opened:hover {
    /*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 {
    padding: 12px 15px 12px 30px;
    /* 设置内边距 */
    font-size: 14px;
    /* 设置字体大小为14像素 */
    cursor: pointer;
    /* 设置鼠标悬停时为指针形状 */
}

/* 左侧导航栏更深层次的子菜单列表项链接的样式 */
.left-nav #nav li .sub-menu li .sub-menu li a {
    padding-left: 45px;
    /* 设置左侧内边距为45像素 */
}

/* 左侧导航栏子菜单列表项链接悬停时的样式 */
.left-nav #nav li .sub-menu li a:hover {
    color: #148cf1;
    /* 设置悬停时文本颜色为蓝色 */
}

/* 左侧导航栏子菜单列表项链接图标的样式 */
.left-nav #nav li .sub-menu li a i {
    font-size: 12px;
    /* 设置图标字体大小为12像素 */
}
/* 左侧导航栏列表项链接图标的样式 */
.left-nav #nav li a i {
    padding-right: 10px;
    /* 设置图标右侧外边距为10像素 */
    line-height: 14px;
    /* 设置图标行高为14像素 */
}

/* 左侧导航栏列表项右侧内容的样式 */
.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 {
    position: absolute;
    /* 绝对定位 */
    top: 46px;
    /* 顶部距离为46像素 */
    right: 0;
    /* 右侧距离为0 */
    bottom: 42px;
    /* 底部距离为42像素 */
    left: 221px;
    /* 左侧距离为221像素 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    z-index: 1;
    /* 设置堆叠顺序为1 */
}

/* 页面内容背景的样式 */
.page-content-bg {
    position: absolute;
    /* 绝对定位 */
    top: 46px;
    /* 顶部距离为46像素 */
    right: 0;
    /* 右侧距离为0 */
    bottom: 42px;
    /* 底部距离为42像素 */
    left: 221px;
    /* 左侧距离为221像素 */
    background: rgba(0,0,0,0.5);
    /* 设置半透明的黑色背景 */
url() 0 0 no-repeat;
    /* 设置背景图片，目前为空 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    z-index: 100;
    /* 设置堆叠顺序为100 */
    display: none;
    /* 默认不显示 */
}

/* 页面内容中标签页的样式 */
.page-content .tab {
    height: 100%;
    /* 设置高度为100% */
    width: 100%;
    /* 设置宽度为100% */
    background: #EFEEF0 url(#) 0 0 no-repeat;
    /* 设置背景颜色和图片，目前为空 */
    margin: 0px;
    /* 移除默认外边距 */
}

/* 页面内容中标签页标题的样式 */
.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 {
    padding-right: 5px;
    /* 设置图标右侧外边距为5像素 */
}

/* 页面内容中标签页标题的首页关闭按钮样式 */
.page-content .layui-tab-title li.home .layui-tab-close {
    display: none;
    /* 不显示关闭按钮 */
}
/* 页面内容中标签页标题列表项的样式 */
.page-content .layui-tab-title li {
    line-height: 35px;
    /* 设置行高为35像素，确保文本垂直居中 */
}

/* 页面内容中当前激活标签页标题的下划线样式 */
.page-content .layui-tab-title .layui-this:after {
    height: 36px;
    /* 设置下划线高度为36像素 */
}

/* 页面内容中标签页标题的关闭按钮样式 */
.page-content .layui-tab-title li .layui-tab-close {
    border-radius: 50%;
    /* 设置关闭按钮为圆形 */
}

/* 页面内容中当前激活标签页标题的样式 */
.page-content .layui-tab-title .layui-this {
    background: #fff url(#) 0 0 no-repeat;
    /* 设置背景颜色和图片，目前为空 */
}

/* 页面内容中标签页标题的水平滚动条样式 */
.page-content .layui-tab-bar {
    height: 34px;
    /* 设置高度为34像素 */
    line-height: 35px;
    /* 设置行高为35像素，确保滚动条垂直居中 */
}

/* 页面内容中标签页内容的样式 */
.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 {
    width: 100%;
    /* 宽度为100% */
    height: 100%;
    /* 高度为100% */
}

/* 页面内容中单个标签页项内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-backlog .x-admin-backlog-body {
    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;
    /* 字体大小 */
}

/* 待办事项数字样式 */
.x-admin-backlog-body p cite {
    font-style: normal;
    /* 正常字体样式 */
    font-size: 30px;
    /* 字体大小 */
    font-weight: 300;
    /* 字体粗细 */
    color: #009688;
    /* 绿色文本 */
}

/* 待办事项鼠标悬停时的样式 */
.x-admin-backlog-body:hover {
    background-color: #CFCFCF;
    /* 悬停时背景颜色 */
    color: #888;
    /* 悬停时文本颜色 */
}

/* 页脚样式 */
.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;
    /* 左右内边距 */
}

/* 表格单元格样式，确保内容不会超出单元格 */
table th, table td {
    word-break: break-all;
    /* 允许在单词内部进行断行 */
}


/* 页脚样式 */
.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 {
    margin-left: 10px;
    /* 左侧外边距为10像素 */
}

/* 响应式设计，针对屏幕宽度小于或等于768像素的设备 */
@media screen and (max-width: 768px) {
    .fast-add {
        display: none;
        /* 隐藏快速添加按钮 */
    }
    .layui-nav .to-index {
        display: none;
        /* 隐藏返回首页的导航项 */
    }
    .container .logo a {
        width: 140px;
        /* 调整logo宽度 */
    }
    .container .left_open {
        /*float: right;*/ /* 已注释掉，可能用于调整左侧菜单按钮位置 */
    }
    .left-nav {
        left: -221px;
        /* 将左侧导航栏隐藏在视口左侧 */
    }
    .page-content {
        left: 0px;
        /* 将页面内容区域左对齐 */
    }
    .page-content .layui-tab-content .layui-tab-item {
        -webkit-overflow-scrolling: touch;
        /* 在iOS设备上启用硬件加速滚动 */
        overflow-y: scroll;
        /* 启用垂直滚动条 */
    }
    .x-so input.layui-input {
        width: 100%;
        /* 搜索输入框宽度为100% */
        margin: 10px;
        /* 搜索输入框的外边距 */
    }
}