text/web/css/style.css

/*
 * @charset "utf-8";
 * 声明该CSS文件使用的字符编码为utf-8，确保文件中的各种字符（如中文等）能被正确解析和显示。
 */

/* 针对layui布局下的自定义头部样式 */
.layui-layout-admin.my-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #393D49;
    z-index: 2;
    /*
     * position: fixed; 将元素固定定位，使其相对于浏览器窗口固定位置，不会随页面滚动而移动。
     * top: 0; 距离浏览器窗口顶部0像素，即紧贴顶部显示。
     * left: 0; 距离浏览器窗口左侧0像素，即从最左边开始显示。
     * width: 100%; 占据整个浏览器窗口的宽度。
     * height: 60px; 设置头部高度为60像素。
     * background: #393D49; 定义头部的背景颜色为指定的深灰色（十六进制颜色值表示）。
     * z-index: 2; 设置元素的堆叠顺序，值越大越在上面，这里确保头部在一些其他元素之上显示。
     */
}

/* layui布局下头部中自定义的logo样式 */
.layui-layout-admin.my-header.my-header-logo {
    display: inline-block;
    width: auto;
    height: 30px;
    color: white;
    font-size: 18px;
    line-height: 30px;
    padding: 15px;
    vertical-align: top;
    /*
     * display: inline-block; 让元素以行内块级元素显示，既能像行内元素一样在一行排列，又能设置宽高。
     * width: auto; 宽度自动适应内容宽度。
     * height: 30px; 设置元素高度为30像素。
     * color: white; 设置文本颜色为白色，与深色背景形成对比。
     * font-size: 18px; 定义文本字号为18像素。
     * line-height: 30px; 行高与元素高度一致，使文本垂直居中。
     * padding: 15px; 在元素四周添加内边距，增加元素内部空间感。
     * vertical-align: top; 设置元素垂直对齐方式为顶部对齐，常用于行内块元素的垂直对齐调整。
     */
}

/* layui布局下头部中作为图片的logo样式 */
.layui-layout-admin.my-header img.my-header-logo {
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    padding: 10px;
    border: none;
    /*
     * 针对类名为my-header-logo的图片元素进行样式设置：
     * width: 150px; 定义图片宽度为150像素。
     * height: 40px; 设置图片高度为40像素。
     * text-align: center; 让图片内如果有文本（通常这种情况较少）在水平方向居中对齐，这里更多是一种统一的样式设置习惯。
     * line-height: 40px; 使图片在垂直方向上文本（同样通常较少）能有合适的排版，这里也是一种样式规范设定。
     * padding: 10px; 在图片四周添加内边距，影响图片在布局中的占位空间。
     * border: none; 去除图片默认的边框（如果有的话）。
     */
}

/* 以下是名为my-header-btn的类选择器样式，可能用于头部的按钮相关元素 */
/* index */
.my-header-btn {
    display: inline-block;
    width: auto;
    height: 100%;
    line-height: 60px;
    /*
     * display: inline-block; 以行内块方式显示元素，方便布局。
     * width: auto; 宽度自动根据内容自适应。
     * height: 100%; 高度与父元素（可能是头部元素）高度一致，这里应该是占满整个头部高度的垂直空间。
     * line-height: 60px; 行高与元素高度相同，便于内部文本垂直居中对齐，使按钮等内容在垂直方向上看起来更规整。
     */
}

.my-header-btn.layui-btn.layui-icon {
    margin-right: 0;
    /* 针对同时具有layui-btn和layui-icon类的元素（可能是layui框架中的按钮图标元素），将其右侧外边距设置为0，调整图标与其他元素的间距 */
}

.my-header-user-nav {
    float: right;
    /* 让该元素（可能是包含用户相关操作的导航元素）向右浮动，使其在头部靠右排列，常用于页面头部的用户信息、操作按钮等布局 */
}

.my-header-user-nav img {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 5px;
    /*
     * 对用户导航中的图片元素进行样式设置：
     * width: 40px; 设置图片宽度为40像素。
     * height: 40px; 定义图片高度为40像素，使其呈现正方形。
     * text-align: center; 水平方向文本居中对齐（通常图片内无文本，但保持样式统一）。
     * line-height: 40px; 垂直方向文本排版（同样一般无文本，但规范样式）。
     * border: none; 去除图片边框。
     * border-radius: 5px; 给图片设置圆角，使其外观更圆润，常用于头像等图片展示，增加美观度。
     */
}

.my-header-user-nav.layui-nav-item a.name {
    padding-left: 5px!important;
    /* 针对用户导航中类名为layui-nav-item下的a元素且类名为name的元素（可能是显示用户名之类的文本元素），强制设置左侧内边距为5像素，调整文本与其他元素的间距 */
}

.my-header ul.layui-nav {
    display: inline-block;
    vertical-align: top;
    border-radius: 0;
    /*
     * 针对头部中具有layui-nav类的ul列表元素进行样式设置：
     * display: inline-block; 以行内块方式显示列表，便于与其他元素在同一行排列布局。
     * vertical-align: top; 垂直对齐方式为顶部对齐，调整列表与其他行内块元素在垂直方向上的对齐情况。
     * border-radius: 0; 去除列表默认的边框圆角效果（如果有），使其外观更规整。
     */
}

.my-header ul.layui-nav li a {
    max-height: 60px;
    /* 限制头部导航列表中每个列表项（li）内链接（a）元素的最大高度为60像素，可能是为了保证整体头部布局的一致性和美观性 */
}

/* 侧边栏样式 */
.my-side {
    position: fixed;
    top: 60px;
    bottom: 0;
    width: 200px;
    z-index: 2;
    overflow-x: hidden;
    /*
     * position: fixed; 固定定位侧边栏，使其在页面滚动时位置固定。
     * top: 60px; 距离浏览器窗口顶部60像素，刚好在头部下方显示。
     * bottom: 0; 距离浏览器窗口底部0像素，使其占满页面垂直方向剩余空间。
     * width: 200px; 设置侧边栏宽度为200像素。
     * z-index: 2; 定义堆叠顺序，确保在合适的层级显示，可能在主体内容之上等情况。
     * overflow-x: hidden; 隐藏水平方向的溢出内容，防止侧边栏内容超出宽度时出现滚动条等情况。
     */
}

.my-side.layui-nav {
    border-radius: 0;
    min-height: 100%;
    /*
     * 针对侧边栏内的layui-nav类元素（通常是导航相关），去除边框圆角效果，并设置最小高度为100%，使其占满侧边栏的垂直空间，保证内容完整显示。
     */
}

.my-side ul.layui-nav li a i,.layui-nav.layui-nav-child a i,.layui-nav.layui-nav-item a i,.layui-tab-card >.layui-tab-title li span i {
    margin-right: 5px;
    /* 对侧边栏导航、子导航、普通导航项以及选项卡标题中的图标元素（i标签）统一设置右侧外边距为5像素，调整图标与文本的间距，使布局更美观 */
}

.my-side ul.layui-nav li dl dd a i {
    margin-left: 15px;
    /* 针对侧边栏导航中dl列表下dd元素内的图标元素（i标签），设置左侧外边距为15像素，调整图标在这些特定元素内的位置布局 */
}

/* 页面主体内容区域样式 */
.my-body {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 200px;
    right: 0;
    z-index: 1;
    overflow: hidden;
    /*
     * position: fixed; 固定定位主体内容区域，使其位置固定。
     * top: 60px; 位于头部下方60像素处开始显示。
     * bottom: 0; 占满页面底部剩余垂直空间。
     * left: 200px; 距离浏览器窗口左侧200像素，即从侧边栏右侧开始显示。
     * right: 0; 占满页面右侧剩余水平空间。
     * z-index: 1; 设置堆叠顺序，通常在头部、侧边栏等元素之后显示。
     * overflow: hidden; 隐藏超出该区域的内容，避免出现滚动条等情况，可能后续会通过内部元素的滚动设置来处理内容过多的情况。
     */
}

.body {
    padding: 10px;
    /* 给类名为body的元素设置内边距为10像素，在元素内部四周增加一定空间，方便内容排版，避免内容紧贴边界 */
}

.frame-main {
    margin-top: -210px;
    top: 50%;
    position: relative;
    height: 433px;
    background-color: #edededbf;
    backdrop-filter: blur(20px);
    /*
     * margin-top: -210px; 将元素向上移动一定距离，这里结合top: 50%可以使其在垂直方向上居中显示（具体根据父元素等情况综合来看）。
     * top: 50%; 垂直方向上位于父元素（或相对定位的参考元素）的中间位置。
     * position: relative; 设置相对定位，方便基于自身原本位置进行一些偏移等布局调整。
     * height: 433px; 定义元素高度为433像素。
     * background-color: #edededbf; 设置背景颜色为带一定透明度的灰色（通过rgba形式表示颜色和透明度）。
     * backdrop-filter: blur(20px); 给元素添加背景模糊效果，模糊程度为20像素，常用于营造出一种毛玻璃等特殊视觉效果。
     */
}

.my-body.layui-tab,.my-body.layui-tab.layui-tab-content {
    margin: 0;
    padding: 0;
    /* 去除主体内容区域内选项卡（layui-tab）及其内容区域（layui-tab-content）的默认外边距和内边距，方便进行自定义的布局和样式调整 */
}

.my-body.layui-tab.layui-tab-title li:first-child > i {
    display: none;
    /* 隐藏主体内容区域内选项卡标题（layui-tab-title）中第一个列表项（li）内的图标元素（i标签），可能是根据设计需求对首个选项卡的图标进行特殊处理 */
}

.my-body.layui-tab,.my-body.layui-tab.layui-tab-content,.my-body.layui-tab.layui-tab-item {
    height: 100%;
    /* 让主体内容区域内的选项卡、选项卡内容以及每个选项卡对应的具体内容项（layui-tab-item）都占满所在父元素的垂直空间，保证内容完整显示且布局合理 */
}

.my-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    /*
     * 针对主体内容区域内的iframe元素（通常用于嵌入其他页面等），设置宽度和高度都为100%，使其占满父元素空间，并且去除边框和默认的轮廓线，使其外观更简洁，无缝融入页面布局。
     */
}

/* 页面底部样式 */
.layui-layout-admin.my-footer {
    height: 40px;
    padding: 2px 0;
    /* 设置底部元素的高度为40像素，并在垂直方向上添加2像素的内边距（上下内边距），用于放置底部相关的版权信息、提示文字等内容 */
}

.layui-layout-admin.my-footer p {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    /*
     * 针对底部元素内的p段落元素进行样式设置：
     * height: 20px; 定义段落高度为20像素。
     * line-height: 20px; 行高与段落高度一致，使文本垂直居中对齐。
     * font-size: 12px; 设置文本字号为12像素，通常用于显示较小的版权、说明等文字信息。
     * text-align: center; 让文本在水平方向居中对齐，使底部内容排版更整齐美观。
     */
}

.my-btn-box {
    height: 38px;
    margin-bottom: 10px;
    /* 定义一个类名为my-btn-box的元素样式，设置高度为38像素，并在底部添加10像素的外边距，可能用于按钮组等元素的整体样式控制，方便布局和外观调整 */
}

.my-pay-box > div p {
    text-align: center;
    margin-bottom: 10px;
    /* 针对类名为my-pay-box下的div元素内的p元素，设置文本水平居中对齐，并在底部添加10像素的外边距，常用于支付相关信息、提示等文本的排版布局 */
}

/* welcome页面相关样式 */
.my-index-main button.layui-icon {
    width: 100%;
    font-size: 20px;
    /* 针对类名为my-index-main下的button元素且具有layui-icon类（可能是layui框架中的图标按钮元素），设置宽度为100%占满父元素宽度，字号为20像素，用于调整按钮图标大小和外观显示效果 */
}

.my-index-main.my-nav-btn {
    background: #efefef;
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
    /*
     * 对类名为my-index-main下的my-nav-btn类元素（可能是导航相关按钮元素）进行样式设置：
     * background: #efefef; 设置背景颜色为浅灰色（十六进制颜色值表示）。
     * cursor: pointer; 当鼠标悬停在元素上时，鼠标指针变为手型，提示用户可点击操作。
     * border-radius: 2px; 给按钮添加2像素的圆角效果，使其外观更圆润。
     * overflow: hidden; 隐藏超出元素范围的内容，防止因内容过多等情况出现显示异常。
     */
}

.my-index-main.my-nav-text:first-child {
    height: 24px;
    line-height: 25px;
    font-size: 16px;
    font-weight: bold;
    /* 针对类名为my-index-main下的my-nav-text类的第一个元素（可能是导航相关文本元素）进行样式设置：
     * height: 24px; 定义元素高度为24像素。
     * line-height: 25px; 行高稍大于元素高度，使文本垂直方向有合适的排版效果。
     * font-size: 16px; 设置文本字号为16像素。
     * font-weight: bold; 将文本加粗显示，突出重要性，常用于导航栏标题等文本。
     */
}

.my-index-main.my-nav-text:last-child {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    /* 针对类名为my-index-main下的my-nav-text类的最后一个元素（可能是导航相关的辅助说明文本元素）进行样式设置：
     * height: 20px; 定义元素高度为20像素。
     * line-height: 20px; 行高与元素高度一致，使文本垂直居中对齐。
     * font-size: 12px; 设置文本字号为12像素，用于显示较小的辅助说明文字。
     */
}

/* 登录页面相关样式 */
.login-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
}