SDMS/web/css/xadmin.css

/* 定义字符集为UTF-8 */
@charset "utf-8";
/* 引入 layui CSS 库 */
@import url(../lib/layui/css/layui.css);

/* 全局通用样式：去除所有元素的外边距和内边距，并设置字体 */
* {
    margin: 0px; /* 去除所有元素的外边距 */
    padding: 0px; /* 去除所有元素的内边距 */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 设置默认字体为 Helvetica Neue */
}

/* 链接样式：去除链接的下划线 */
a {
    text-decoration: none; /* 去除链接的默认下划线 */
}

/* 设置HTML元素的宽度、高度，并禁止水平滚动条显示 */
html {
    width: 100%; /* 设置页面宽度为100% */
    height: 100%; /* 设置页面高度为100% */
    overflow-x: hidden; /* 禁止水平滚动 */
    overflow-y: auto; /* 允许垂直滚动 */
}

/* 设置body的宽度和最小高度 */
body {
    width: 100%; /* 设置body宽度为100% */
    min-height: 100%; /* 设置body最小高度为100% */
}

/* .x-body类样式：添加内边距 */
.x-body {
    padding: 20px; /* 添加20px的内边距 */
}

/* .x-nav类样式：设置导航条的内边距、位置、背景、边框等 */
.x-nav {
    padding: 0 20px; /* 设置左右内边距为20px */
    position: relative; /* 设置为相对定位 */
    z-index: 99; /* 设置层级为99 */
    border-bottom: 1px solid #e5e5e5; /* 设置底部边框为1px实线，颜色为灰色 */
    line-height: 39px; /* 设置行高为39px，使文本垂直居中 */
    height: 39px; /* 设置导航栏的高度为39px */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* .xblock类样式：设置块级元素的样式 */
xblock {
    display: block; /* 设置为块级元素 */
    margin-bottom: 10px; /* 设置下边距为10px */
    padding: 5px; /* 设置内边距为5px */
    line-height: 22px; /* 设置行高为22px */
    /* border-left: 5px solid #009688; */ /* 注释掉的代码，可能用于左边框的样式 */
    border-radius: 0 2px 2px 0; /* 设置右上、右下圆角 */
    background-color: #f2f2f2; /* 设置背景色为浅灰色 */
}

/* .x-right类样式：设置右浮动 */
.x-right {
    float: right; /* 设置元素浮动到右侧 */
}

/* .x-so类样式：可能用于搜索框或表单 */
.x-so {
    /*text-align: center;*/ /* 注释掉的代码，可能是用于文本居中 */
    /*background: #f2f2f2 url() 0 0 no-repeat;*/ /* 注释掉的代码，背景图样式 */
    margin-bottom: 20px; /* 设置下边距为20px */
}

/* .x-so input.layui-input样式：设置输入框的宽度和内边距 */
.x-so input.layui-input {
    width: 150px; /* 设置输入框的宽度为150px */
    padding-left: 25px; /* 设置左内边距为25px */
}

/* .x-so .layui-form-label样式：设置标签为行内元素 */
.x-so .layui-form-label {
    display: inline-block; /* 设置标签为行内块元素 */
}

/* .x-so input.layui-input和.x-so input.layui-btn样式：设置输入框和按钮为行内块元素 */
.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; /* 设置元素高度为30px */
}

/* .x-show类样式：设置可点击的元素 */
.x-show {
    cursor: pointer; /* 设置鼠标悬停时显示为手型指针 */
}

/* .layui-form-switch类样式：设置开关按钮的上边距 */
.layui-form-switch {
    margin-top: 0px; /* 设置上边距为0px */
}

/* .layui-input:focus和.layui-textarea:focus样式：设置输入框和文本框聚焦时的边框颜色 */
.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; /* 将span显示为行内块级元素 */
    padding: 10px; /* 设置内边距 */
    min-width: 15px; /* 设置最小宽度 */
    border: 1px solid #E2E2E2; /* 设置边框 */
}
.page span.current{
    display: inline-block; /* 将当前页span显示为行内块级元素 */
    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; /* 设置容器的高度 */
    background-color: #222; /* 设置背景颜色为深灰色 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 设置底部边框 */
}
.container .logo a{
    float: left; /* 将logo链接向左浮动 */
    color: #fff; /* 设置文字颜色为白色 */
    font-size: 18px; /* 设置字体大小 */
    padding-left: 20px; /* 设置左内边距 */
    line-height: 45px; /* 设置行高，使文字垂直居中 */
    width: 200px; /* 设置logo的宽度 */
}
.container .right{
    background-color:rgba(0,0,0,0); /* 设置背景为透明 */
    float: right; /* 将右侧容器向右浮动 */
}
.container .left_open{
    height: 45px; /* 设置左侧容器的高度 */
    float: left; /* 将左侧容器向左浮动 */
}
.container .left_open i{
    display: block; /* 将图标显示为块级元素 */
    background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 设置图标背景 */
    color: #fff; /* 设置图标的颜色为白色 */
    width: 32px; /* 设置图标的宽度 */
    height: 32px; /* 设置图标的高度 */
    line-height: 32px; /* 设置行高，使图标垂直居中 */
    border-radius: 3px; /* 设置圆角 */
    text-align: center; /* 设置文本居中对齐 */
    margin-top: 7px; /* 设置图标的上边距 */
    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; /* 设置导航项的行高，使文字垂直居中 */
}
.container .layui-nav-more{
    top: 20px; /* 设置更多菜单的顶部位置 */
}
.container .layui-nav-child{
    top: 50px; /* 设置子菜单的顶部位置 */
}
.container .layui-nav-child i{
    margin-right: 10px; /* 设置图标的右边距 */
}
.layui-nav .layui-nav-item a{
    color: #fff; /* 设置导航链接的文字颜色为白色 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}
.layui-nav .layui-nav-child a{
    color: #333; /* 设置子菜单链接的文字颜色为深灰色 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}

/* 左侧导航样式 */
.left-nav{
    position: absolute; /* 设置绝对定位 */
    top: 46px; /* 设置导航的顶部位置 */
    bottom: 42px; /* 设置导航的底部位置 */
    left: 0; /* 设置导航的左边位置 */
    z-index: 2; /* 设置层级 */
    padding-top: 10px; /* 设置顶部内边距 */
    background-color: #EEEEEE; /* 设置背景颜色为浅灰色 */
    width: 220px; /* 设置导航的宽度 */
    max-width: 220px; /* 设置最大宽度 */
    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{
    /* 设置鼠标悬停时的样式，可以自定义 */
}
.left-nav #nav .current{
    background-color: rgba(0, 0, 0, 0.3); /* 设置当前菜单项的背景颜色 */
}
.left-nav #nav li a{
    font-size: 14px; /* 设置链接文字的字体大小 */
    padding: 10px 15px 10px 20px; /* 设置内边距 */
    display: block; /* 将链接显示为块级元素 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}
.left-nav #nav li a cite{
    font-size: 14px; /* 设置引用文字的字体大小 */
}

/* 左侧导航子菜单样式 */
.left-nav #nav li .sub-menu{
    display: none; /* 隐藏子菜单 */
}
.left-nav #nav li .opened{
    display: block; /* 显示子菜单 */
}
.left-nav #nav li .opened:hover{
    /* 设置子菜单悬停时的样式 */
}
.left-nav #nav li .sub-menu li:hover{
    /* 设置子菜单项悬停时的样式 */
}
.left-nav #nav li .sub-menu li a{
    padding: 12px 15px 12px 30px; /* 设置子菜单项的内边距 */
    font-size: 14px; /* 设置子菜单项的字体大小 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}
.left-nav #nav li .sub-menu li .sub-menu li a{
    padding-left: 45px; /* 设置多级子菜单项的内边距 */
}
.left-nav #nav li .sub-menu li a:hover{
    color: #148cf1; /* 设置悬停时子菜单项的文字颜色 */
}
.left-nav #nav li .sub-menu li a i{
    font-size: 12px; /* 设置子菜单项图标的字体大小 */
}
.left-nav #nav li a i{
    padding-right: 10px; /* 设置图标的右边距 */
    line-height: 14px; /* 设置图标的行高 */
}
.left-nav #nav li .nav_right{
    float: right; /* 将右侧图标浮动到右侧 */
    font-size: 16px; /* 设置右侧图标的字体大小 */
}

/* 左侧滑动按钮样式 */
.x-slide_left {
    width: 17px; /* 设置滑动按钮的宽度 */
    height: 61px; /* 设置滑动按钮的高度 */
    background: url(#) 0 0 no-repeat; /* 设置滑动按钮的背景 */
    position: absolute; /* 设置绝对定位 */
    top: 200px; /* 设置滑动按钮的顶部位置 */
    left: 221px; /* 设置滑动按钮的左边位置 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}
.x-slide_left:hover{
    background: url(#) 0 0 no-repeat; /* 设置滑动按钮悬停时的背景 */
}
.x-slide_left .slide_icon{
    width: 17px; /* 设置滑动按钮图标的宽度 */
    height: 30px; /* 设置滑动按钮图标的高度 */
    background: url(#) no-repeat center center; /* 设置图标的背景 */
    position: absolute; /* 设置绝对定位 */
    top: 50%; /* 设置图标的位置为垂直居中 */
    left: 0; /* 设置图标的左边位置 */
    margin-top: -15px; /* 设置图标的上外边距，使其垂直居中 */
}

/* 右侧内容区域样式 */
.right-content {
    padding: 20px; /* 设置内容区域的内边距 */
    margin-left: 240px; /* 设置左侧导航的右边距，使右侧内容不与左侧导航重叠 */
    background-color: #f4f4f4; /* 设置内容区域的背景颜色 */
    min-height: 100vh; /* 设置内容区域的最小高度为100vh，确保填满屏幕 */
}

/* 输入框样式 */
.input-container input {
    width: 100%; /* 设置输入框的宽度为100% */
    padding: 10px; /* 设置内边距 */
    margin: 5px 0; /* 设置上下外边距 */
    border: 1px solid #ccc; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
    font-size: 14px; /* 设置字体大小 */
}

/* 按钮样式 */
.button {
    display: inline-block; /* 将按钮显示为行内块级元素 */
    padding: 10px 20px; /* 设置按钮的内边距 */
    background-color: #009688; /* 设置按钮的背景颜色 */
    color: #fff; /* 设置按钮的文字颜色 */
    font-size: 14px; /* 设置字体大小 */
    border-radius: 5px; /* 设置按钮的圆角 */
    cursor: pointer; /* 设置鼠标样式为手指 */
    text-align: center; /* 设置文字居中对齐 */
}
.button:hover {
    background-color: #00796b; /* 设置鼠标悬停时按钮的背景颜色 */
}

/* 弹出框样式 */
.modal {
    display: none; /* 隐藏弹出框 */
    position: fixed; /* 设置固定定位 */
    top: 0; /* 设置弹出框的顶部位置 */
    left: 0; /* 设置弹出框的左边位置 */
    width: 100%; /* 设置弹出框的宽度为100% */
    height: 100%; /* 设置弹出框的高度为100% */
    background-color: rgba(0, 0, 0, 0.5); /* 设置半透明的背景颜色 */
    z-index: 1000; /* 设置层级 */
    justify-content: center; /* 设置弹出框内容居中对齐 */
    align-items: center; /* 设置弹出框内容垂直居中 */
}

.modal .modal-content {
    background-color: #fff; /* 设置弹出框内容的背景颜色 */
    padding: 20px; /* 设置弹出框内容的内边距 */
    border-radius: 5px; /* 设置圆角边框 */
    width: 50%; /* 设置弹出框内容的宽度 */
    max-width: 600px; /* 设置弹出框内容的最大宽度 */
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute; /* 设置绝对定位 */
    top: 10px; /* 设置关闭按钮的顶部位置 */
    right: 10px; /* 设置关闭按钮的右边位置 */
    font-size: 20px; /* 设置字体大小 */
    color: #333; /* 设置文字颜色 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}
.close-btn:hover {
    color: #ff0000; /* 设置关闭按钮悬停时的文字颜色 */
}

/* 提示信息样式 */
.tip-message {
    padding: 10px 20px; /* 设置提示信息的内边距 */
    margin: 10px 0; /* 设置上下外边距 */
    border: 1px solid #ccc; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
    background-color: #f9f9f9; /* 设置背景颜色 */
    font-size: 14px; /* 设置字体大小 */
    color: #333; /* 设置文字颜色 */
}
.tip-message.success {
    border-color: #4caf50; /* 设置成功提示的边框颜色 */
    background-color: #dff0d8; /* 设置成功提示的背景颜色 */
    color: #4caf50; /* 设置成功提示的文字颜色 */
}
.tip-message.error {
    border-color: #f44336; /* 设置错误提示的边框颜色 */
    background-color: #f2dede; /* 设置错误提示的背景颜色 */
    color: #f44336; /* 设置错误提示的文字颜色 */
}

/* 侧边栏样式 */
.sidebar {
    position: fixed; /* 设置固定定位 */
    top: 0; /* 设置顶部位置 */
    right: 0; /* 设置右侧位置 */
    width: 250px; /* 设置宽度 */
    height: 100vh; /* 设置高度为100vh，确保填满屏幕 */
    background-color: #2c3e50; /* 设置背景颜色为深色 */
    color: #fff; /* 设置文字颜色为白色 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 设置垂直布局 */
    justify-content: space-between; /* 设置内容间距 */
}

.sidebar .sidebar-header {
    padding: 20px; /* 设置头部的内边距 */
    font-size: 20px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体加粗 */
}

.sidebar .sidebar-menu {
    list-style: none; /* 去除默认的列表样式 */
    padding: 0; /* 去除内边距 */
    margin: 0; /* 去除外边距 */
}

.sidebar .sidebar-menu li {
    padding: 15px 20px; /* 设置列表项的内边距 */
    cursor: pointer; /* 设置鼠标样式为手指 */
}

.sidebar .sidebar-menu li:hover {
    background-color: #34495e; /* 设置悬停时的背景颜色 */
}

.sidebar .sidebar-footer {
    padding: 20px; /* 设置底部的内边距 */
    font-size: 14px; /* 设置字体大小 */
    text-align: center; /* 设置文本居中对齐 */
}
/* 页面内容的样式 */
.page-content{
    position: absolute; /* 设置绝对定位 */
    top: 46px; /* 页面内容距离顶部46px */
    right: 0; /* 页面内容右边对齐 */
    bottom: 42px; /* 页面内容底部距离42px */
    left: 221px; /* 页面内容左边距离221px */
    overflow: hidden; /* 隐藏溢出的内容 */
    z-index: 1; /* 设置堆叠顺序，保证页面内容处于最前面 */
}

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

/* 标签页容器样式 */
.page-content .tab{
    height: 100%; /* 高度占满父容器 */
    width: 100%; /* 宽度占满父容器 */
    background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景色和背景图片 */
    margin: 0px; /* 去除默认外边距 */
}

/* 标签页标题样式 */
.page-content .layui-tab-title{
    /*padding-top: 5px;*/ /* 被注释掉的内边距设置 */
    height: 35px; /* 设置高度为35px */
    background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景色和背景图片 */
    position: relative; /* 设置相对定位 */
    z-index: 100; /* 使标签标题位于内容上层 */
}

/* 标签页标题项中的 "首页" 样式 */
.page-content .layui-tab-title li.home i{
    padding-right: 5px; /* 给图标增加右内边距 */
}

/* 隐藏标签页标题项的关闭按钮 */
.page-content .layui-tab-title li.home .layui-tab-close{
    display: none; /* 关闭按钮默认隐藏 */
}

/* 标签页标题项的高度和行高 */
.page-content .layui-tab-title li{
    line-height: 35px; /* 设置行高，使内容垂直居中 */
}

/* 设置激活标签页的样式 */
.page-content .layui-tab-title .layui-this:after{
    height: 36px; /* 激活状态下标签项下方的伪元素高度 */
}

/* 标签页标题项的关闭按钮圆角设置 */
.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; /* 标签栏的高度为34px */
    line-height: 35px; /* 标签栏内容垂直居中 */
}

/* 标签内容容器 */
.page-content .layui-tab-content{
    position: absolute; /* 设置绝对定位 */
    top: 36px; /* 内容距离顶部36px */
    bottom: 0px; /* 内容底部对齐 */
    width: 100%; /* 宽度占满父容器 */
    background: #fff url(#) 0 0 no-repeat; /* 背景色和背景图片 */
    padding: 0px; /* 去除内边距 */
    overflow: hidden; /* 隐藏溢出的内容 */
}

/* 标签页内容项样式 */
.page-content .layui-tab-content .layui-tab-item{
    width: 100%; /* 宽度占满父容器 */
    height: 100%; /* 高度占满父容器 */
}

/* 标签页内容项中的 iframe 样式 */
.page-content .layui-tab-content .layui-tab-item iframe{
    width: 100%; /* iframe 宽度占满父容器 */
    height: 100%; /* iframe 高度占满父容器 */
}

/* 轮播图的背景色 */
.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; /* 为 Webkit 浏览器添加过渡效果 */
}

/* 待办事项标题样式 */
.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; /* 上下内边距为30px */
    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; /* 上下内边距为15px */
    line-height: 26px; /* 行高 */
}

/* 页脚链接样式 */
.welcome-footer a {
    padding: 0 5px; /* 链接左右内边距 */
}

/* 表格单元格中的文本换行 */
table th, table td {
    word-break: break-all; /* 强制单词换行 */
}

/* 固定底部的页脚 */
.footer {
    position: fixed; /* 固定定位 */
    bottom: 0px; /* 底部对齐 */
    width: 100%; /* 宽度占满屏幕 */
    background-color: #222; /* 背景色为深灰色 */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 上边框 */
    line-height: 41px; /* 行高 */
    color: #fff; /* 字体颜色为白色 */
}

/* 页脚中的版权信息样式 */
.footer .copyright {
    margin-left: 10px; /* 左边距为10px */
}

/* 响应式设计，适配屏幕宽度小于768px时的样式 */
@media screen and (max-width: 768px){
    /* 快速添加按钮隐藏 */
    .fast-add{
        display: none;
    }

    /* “回到首页”菜单项隐藏 */
    .layui-nav .to-index{
        display: none;
    }

    /* logo 的宽度设置 */
    .container .logo a{
        width: 140px; /* 设置 logo 宽度为140px */
    }

    /* 左侧菜单按钮隐藏 */
    .container .left_open {
        /*float: right;*/ /* 注释掉浮动设置 */
    }

    /* 左侧导航栏隐藏 */
    .left-nav{
        left: -221px; /* 隐藏左侧导航栏 */
    }

    /* 页面内容的左边距为0 */
    .page-content{
        left: 0px;
    }

    /* 标签页内容项支持触控滚动 */
    .page-content .layui-tab-content .layui-tab-item{
        -webkit-overflow-scrolling: touch; /* 支持触控滚动 */
        overflow-y: scroll; /* 垂直滚动 */
    }

        /* 搜索框宽度调整 */
        .x-so input.layui-input{
            width: 100%; /* 搜索框宽度调整为占满父容器 */
            padding: 10px; /* 增加内边距，使输入框更大 */
            box-sizing: border-box; /* 确保内边距不影响宽度 */
        }

    /* 调整顶部导航栏样式 */
    .layui-header .layui-logo {
        padding-left: 10px; /* 给 logo 左边加点内边距 */
    }

    /* 调整顶部导航菜单项 */
    .layui-nav {
        text-align: center; /* 菜单项居中 */
    }

    /* 隐藏右上角的用户头像和相关菜单 */
    .layui-header .layui-nav .user-avatar {
        display: none; /* 隐藏用户头像 */
    }

    /* 调整左侧导航栏菜单 */
    .layui-nav-tree {
        padding-left: 10px; /* 增加左侧的内边距 */
    }

    /* 调整左侧导航栏菜单项 */
    .layui-nav-tree li a {
        font-size: 14px; /* 调整菜单项字体大小 */
        padding: 12px 15px; /* 增加内边距 */
    }

    /* 隐藏左侧导航栏的“展开”按钮 */
    .layui-nav-item > a:after {
        display: none; /* 隐藏展开按钮 */
    }

    /* 左侧导航栏激活项的背景色 */
    .layui-nav-item.layui-this > a {
        background-color: #009688; /* 激活项背景色 */
        color: #fff; /* 激活项文字颜色为白色 */
    }

    /* 调整右侧操作按钮 */
    .layui-btn.layui-btn-sm {
        padding: 6px 12px; /* 缩小按钮内边距 */
    }

    /* 页面内容容器，增加响应式设计 */
    .page-content {
        padding: 10px; /* 增加内边距，避免内容紧贴边缘 */
    }

    /* 隐藏顶部导航栏 */
    .top-nav {
        display: none; /* 隐藏顶部导航栏 */
    }

    /* 调整页脚的样式 */
    .footer {
        text-align: center; /* 页脚内容居中 */
        padding: 15px 0; /* 增加上下内边距 */
        font-size: 14px; /* 设置字体大小 */
    }
}

/* 响应式设计，适配屏幕宽度小于480px时的样式 */
@media screen and (max-width: 480px){
    /* 调整搜索框的字体和内边距 */
    .x-so input.layui-input {
        padding: 8px; /* 缩小内边距 */
        font-size: 14px; /* 缩小字体 */
    }

    /* 调整顶部导航栏的样式 */
    .layui-header {
        padding: 10px 0; /* 上下内边距为10px */
    }

    /* 修改左侧菜单为垂直布局 */
    .layui-nav-tree {
        display: block; /* 设置为块级元素，垂直显示 */
    }

    /* 左侧导航栏菜单项的宽度和字体 */
    .layui-nav-tree li a {
        padding: 10px 15px; /* 增加内边距 */
        font-size: 16px; /* 增大字体大小 */
    }

    /* 隐藏其他不必要的页面元素 */
    .layui-footer {
        display: none; /* 隐藏页脚 */
    }

    /* 调整页面内容区域 */
    .page-content {
        margin-left: 0; /* 取消左侧空隙 */
        margin-right: 0; /* 取消右侧空隙 */
        padding: 5px; /* 减少内边距 */
    }

    /* 调整页面标题栏 */
    .page-content .layui-tab-title {
        font-size: 14px; /* 缩小字体大小 */
        height: 30px; /* 减小标题栏高度 */
    }

    /* 调整标签页内容区域 */
    .page-content .layui-tab-content {
        padding: 0 5px; /* 缩小内边距 */
    }

    /* 标签内容区域的 iframe */
    .page-content .layui-tab-content iframe {
        height: 100vh; /* 设置 iframe 高度为屏幕高度 */
    }

    /* 修复滚动条样式 */
    .page-content .layui-tab-content .layui-tab-item {
        overflow-y: auto; /* 允许纵向滚动 */
    }

    /* 调整快速操作按钮 */
    .x-admin-carousel .carousel-item {
        padding: 0 5px; /* 缩小内边距 */
    }
}

/* 调整弹出层样式 */
.layui-layer {
    max-width: 80%; /* 限制弹出层的最大宽度 */
    width: 400px; /* 设置弹出层的固定宽度 */
}

/* 调整按钮样式 */
.layui-btn {
    font-size: 14px; /* 设置按钮字体大小 */
    padding: 6px 12px; /* 调整按钮内边距 */
}

/* 禁用按钮样式 */
.layui-btn-disabled {
    background-color: #ccc; /* 禁用按钮背景色 */
    cursor: not-allowed; /* 禁用按钮时改变光标 */
}