diff --git a/web/css/file.css b/web/css/file.css index 650d02d..b23eadd 100644 --- a/web/css/file.css +++ b/web/css/file.css @@ -1,54 +1,198 @@ -.progress{ - margin-top:2px; +/* +.progress类用于定义一个具有特定样式的进度条容器元素。以下是对该类中各个样式属性的详细注释： +*/ +.progress { + /* + 设置元素的上外边距为2像素，使该元素与上方元素在垂直方向上保持一定的间隔距离，增加页面布局的层次感。 + */ + margin-top: 2px; + /* + 定义元素的宽度为200像素，确定了进度条在水平方向上所占据的空间大小。 + */ width: 200px; + /* + 设置元素的高度为14像素，规定了进度条在垂直方向上的尺寸。 + */ height: 14px; + /* + 设置元素的下外边距为10像素，让该元素与下方元素在垂直方向上隔开一定距离，避免布局显得过于紧凑。 + */ margin-bottom: 10px; + /* + 将溢出的内容隐藏起来，防止内部元素超出该容器的范围而显示异常，确保进度条的外观整洁、规范。 + */ overflow: hidden; + /* + 设置元素的背景颜色为#f5f5f5，这是一种浅灰色，通常用于给元素提供一个较为柔和、中性的背景色调，符合常见的页面设计风格。 + */ background-color: #f5f5f5; + /* + 给元素添加圆角效果，这里将四个角的半径都设置为4像素，使元素看起来更加圆润、美观，避免生硬的直角边框，提升视觉效果。 + */ border-radius: 4px; - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); - box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + /* + 以下是针对WebKit浏览器（如Chrome、Safari等）添加的内部阴影效果，用于在元素内部营造出一种立体感。 + inset关键字表示这是内部阴影，0 1px 2px表示阴影在水平方向不偏移、垂直方向偏移1像素、模糊半径为2像素，rgba(0,0,0,.1)表示阴影的颜色为黑色且透明度为0.1，整体效果是给元素内部添加一个淡淡的阴影，增强层次感。 + */ + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0,.1); + /* + 与上面的-webkit-box-shadow类似，这是标准的CSS盒阴影属性，用于在不支持WebKit前缀的浏览器中也能实现相同的内部阴影效果，确保在不同浏览器下的视觉一致性。 + */ + box-shadow: inset 0 1px 2px rgba(0, 0, 0,.1); } -.progress-bar{ + +/* +.progress-bar类用于定义进度条内部的填充部分（表示进度的可视化部分）的样式，以下是对该类各样式属性的详细解释： +*/ +.progress-bar { + /* + 设置进度条填充部分的背景颜色为rgb(92, 184, 92)，这是一种绿色调，通常用于表示进度的增长、完成等积极的含义，符合常见的进度条颜色使用习惯。 + */ background-color: rgb(92, 184, 92); + /* + 使用线性渐变来为背景添加一种纹理效果，使进度条看起来更有质感。 + linear-gradient函数用于创建线性渐变，45deg表示渐变的方向是从左下角到右上角呈45度角，后面跟着一系列的颜色停止点及透明度设置。 + 例如rgba(255, 255, 255, 0.14902) 25%, transparent 25%表示在渐变的25%位置处使用具有一定透明度的白色，然后在25%位置切换到透明色，以此类推，通过这样的设置形成一种斜向的条纹纹理效果，增强视觉上的丰富度。 + */ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent); + /* + 定义背景图像（这里就是上面设置的线性渐变纹理）的尺寸大小为40px 40px，即宽度和高度都为40像素，控制纹理的疏密程度等外观效果。 + */ background-size: 40px 40px; + /* + 给进度条填充部分添加一个下边框的内部阴影效果，使进度条看起来有一定的凹陷感，增强立体感。 + rgba(0, 0, 0, 0.14902)表示阴影颜色为黑色且具有一定透明度，0px -1px 0px 0px表示阴影在水平方向不偏移、垂直方向向上偏移1px、模糊半径为0px、扩展半径为0px，inset表示这是内部阴影，整体效果是在进度条填充部分的底部添加一条很细的阴影线。 + */ box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset; + /* + 设置元素的盒模型计算方式为 border-box，意味着元素的宽度和高度包含了边框（border）和内边距（padding）的尺寸，这样在设置元素的尺寸以及添加边框、内边距时，不会导致元素整体尺寸超出预期，方便进行布局控制。 + */ box-sizing: border-box; + /* + 设置元素内文本的颜色为白色（rgb(255, 255, 255)），通常进度条填充部分上可能会显示进度相关的文字信息（比如百分比等），这里将文字颜色设置为白色，使其在背景颜色上能够清晰显示。 + */ color: rgb(255, 255, 255); + /* + 将元素设置为块级元素，使其在页面布局中独占一行，并且可以设置宽度、高度、内外边距等属性，像一个独立的矩形区域一样进行布局排版，符合进度条填充部分作为一个独立的可视化组件的布局需求。 + */ display: block; + /* + 使元素向左浮动，让多个进度条（如果存在多个的情况）可以在同一行内水平排列，实现多个进度条并列展示的布局效果，常用于同时展示多个任务或阶段的进度情况。 + */ float: left; + /* + 设置元素内文本的字体大小为12像素，控制进度条上显示文字的大小，确保文字在进度条填充部分内的显示比例合适，清晰可读。 + */ font-size: 12px; - height: 20px; + /* + 设置元素的行高为20像素，行高通常会影响文本在垂直方向上的对齐方式以及元素的整体高度感受，这里设置合适的行高可以让文本在进度条填充部分内垂直居中显示，视觉效果更美观。 + */ line-height: 20px; + /* + 设置文本在元素内的水平对齐方式为居中对齐，使得进度条上显示的文字（如进度百分比等）能够在水平方向上处于进度条填充部分的中间位置，看起来更加整齐、规范。 + */ text-align: center; + /* + 设置过渡效果的延迟时间为0秒，即当触发过渡相关的变化（比如进度条宽度改变等情况）时，立即开始过渡动画，没有延迟。 + */ transition-delay: 0s; + /* + 设置过渡效果的持续时间为0.6秒，规定了从初始状态到目标状态（比如进度条宽度变化等过渡情况）整个过渡动画所花费的时间长度，通过合适的时长设置可以让过渡效果看起来更加自然流畅。 + */ transition-duration: 0.6s; + /* + 指定过渡效果应用的CSS属性为宽度（width），意味着只有当元素的宽度发生变化时，才会触发设置好的过渡动画效果，比如进度条宽度随进度增加而增长时会有平滑的过渡动画展示。 + */ transition-property: width; + /* + 设置过渡效果的时间函数为ease，这是一种常见的缓动函数，它使得过渡动画在开始时较慢，中间加速，结尾时再变慢，让过渡效果更加自然、柔和，符合人眼观察物体运动变化的习惯，提升视觉体验。 + */ transition-timing-function: ease; + /* + 设置元素的初始宽度为266.188像素，这个宽度值可能是根据具体的页面布局需求或者默认进度情况来设定的，后续可以通过JavaScript等方式根据实际进度动态改变该宽度值来展示进度变化效果。 + */ width: 266.188px; } +/* +.file类用于定义一个类似文件上传按钮或链接的样式，具有特定的外观和交互效果，以下是对该类各属性的注释： +*/ .file { + /* + 将元素设置为相对定位，相对定位的元素会相对于其原本在文档流中的位置进行定位调整，方便后续通过top、right、bottom、left等属性对其内部绝对定位的子元素（如下面的input元素）进行精准定位，同时又不会脱离文档流影响整体布局。 + */ position: relative; + /* + 将元素设置为内联块级元素，它既有内联元素的特点（可以与其他内联元素在同一行显示），又具备块级元素的一些特性（可以设置宽度、高度、内外边距等属性），这样可以方便地在文本流中按照需求排列，并且呈现出类似按钮或链接的外观样式。 + */ display: inline-block; + /* + 设置元素的背景颜色为#337ab7，这是一种蓝色调，常用于表示可操作、交互的元素背景色，给用户传达一种可以点击、进行操作的视觉暗示。 + */ background-color: #337ab7; + /* + 给元素添加圆角效果，将四个角的半径都设置为4像素，使其外观更加圆润、美观，符合现代网页设计中对于按钮等元素的常见样式风格，避免生硬的直角边框。 + */ border-radius: 4px; + /* + 设置元素的内边距，上下内边距为8像素，左右内边距为12像素，通过合适的内边距设置可以让元素内部的文本（如按钮上的文字说明等）与边框之间有一定的空白空间，看起来更加舒适、美观，也便于用户点击操作。 + */ padding: 8px 12px; + /* + 将溢出的内容隐藏起来，防止内部元素（比如可能存在的一些特殊样式的子元素等）超出该元素的范围而显示异常，确保元素外观的完整性和规范性。 + */ overflow: hidden; + /* + 设置元素内文本的颜色为白色（#FFFFFF），使得文本在背景颜色上能够清晰显示，提高可读性，符合常见的按钮或链接文本颜色与背景色搭配习惯，让用户能够轻易识别元素上的文字内容。 + */ color: #FFFFFF; + /* + 清除元素的文本装饰（比如默认的下划线等），如果该元素用于模拟按钮等交互功能，通常不需要文本有下划线等装饰，使其外观更简洁、干净，符合操作按钮的视觉风格。 + */ text-decoration: none; + /* + 设置文本的缩进为0，确保文本在元素内按照正常的对齐方式从左边开始显示，没有额外的缩进效果，保持文本显示的规范性。 + */ text-indent: 0; + /* + 设置元素的行高为20像素，与上面类似，合适的行高可以让文本在垂直方向上处于合适的位置，视觉效果更美观，并且方便用户查看和点击操作。 + */ line-height: 20px; } + +/* +.file类下的input子元素的样式定义，通常用于隐藏实际的文件选择输入框，通过其他样式和交互设计来模拟一个更美观、易用的文件上传操作界面，以下是对该子元素样式属性的注释： +*/ .file input { + /* + 将元素设置为绝对定位，绝对定位的元素会脱离文档流，根据最近的已定位祖先元素（这里就是上面设置为相对定位的.file元素）来进行定位，通过下面设置的right和top属性，可以将其精准定位到.file元素的右上角位置，方便实现隐藏式的文件选择功能（因为它覆盖在可视区域之外）。 + */ position: absolute; + /* + 设置元素的字体大小为100px，这个较大的字体大小可能是为了确保在某些特殊情况下（比如不同浏览器对文件选择输入框默认样式的处理差异等）能够完全覆盖住原有的输入框外观，实现更好的隐藏效果，具体使用场景和原因可能因整体页面设计需求而定。 + */ font-size: 100px; + /* + 将元素定位到其相对定位的父元素（.file元素）的右上角，right: 0表示距离父元素右侧边界为0像素，top: 0表示距离父元素顶部边界为0像素，这样就将其放置在了父元素的右上角位置，超出了可视范围，达到隐藏的目的。 + */ right: 0; top: 0; + /* + 设置元素的透明度为0，使其完全透明不可见，进一步隐藏实际的文件选择输入框，让用户只能通过模拟的按钮或链接外观（即.file元素呈现的样式）来触发文件选择操作，提升用户体验和页面美观度。 + */ opacity: 0; } + +/* +.file类元素在鼠标悬停时的样式变化，通过改变背景颜色来提供一种交互反馈效果，让用户知道该元素是可以进行操作的，以下是对应的注释： +*/ .file:hover { + /* + 当鼠标悬停在.file元素上时，改变其背景颜色为#598FBE，这是一种比原来稍深一点的蓝色调，通过这种颜色变化给用户一个视觉提示，表明该元素处于可交互状态，增强用户操作的直观性和交互性。 + */ background: #598FBE; + /* + 再次强调清除文本装饰（比如悬停时也不出现下划线等），保持元素外观的简洁性和一致性，符合操作按钮在不同状态下的视觉规范。 + */ text-decoration: none; } \ No newline at end of file diff --git a/web/css/layui.css b/web/css/layui.css index 57f0502..17fb6a9 100644 --- a/web/css/layui.css +++ b/web/css/layui.css @@ -1,2 +1,415 @@ -/** layui-v2.5.6 MIT License By https://www.layui.com */ - .layui-inline,img{display:inline-block;vertical-align:middle}h1,h2,h3,h4,h5,h6{font-weight:400}.layui-edge,.layui-header,.layui-inline,.layui-main{position:relative}.layui-body,.layui-edge,.layui-elip{overflow:hidden}.layui-btn,.layui-edge,.layui-inline,img{vertical-align:middle}.layui-btn,.layui-disabled,.layui-icon,.layui-unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.layui-elip,.layui-form-checkbox span,.layui-form-pane .layui-form-label{text-overflow:ellipsis;white-space:nowrap}.layui-breadcrumb,.layui-tree-btnGroup{visibility:hidden}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,a:hover{outline:0}img{border:none}li{list-style:none}table{border-collapse:collapse;border-spacing:0}h4,h5,h6{font-size:100%}button,input,optgroup,option,select,textarea{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;outline:0}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}body{line-height:24px;font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif}hr{height:1px;margin:10px 0;border:0;clear:both}a{color:#333;text-decoration:none}a:hover{color:#777}a cite{font-style:normal;*cursor:pointer}.layui-border-box,.layui-border-box *{box-sizing:border-box}.layui-box,.layui-box *{box-sizing:content-box}.layui-clear{clear:both;*zoom:1}.layui-clear:after{content:'\20';clear:both;*zoom:1;display:block;height:0}.layui-inline{*display:inline;*zoom:1}.layui-edge{display:inline-block;width:0;height:0;border-width:6px;border-style:dashed;border-color:transparent}.layui-edge-top{top:-4px;border-bottom-color:#999;border-bottom-style:solid}.layui-edge-right{border-left-color:#999;border-left-style:solid}.layui-edge-bottom{top:2px;border-top-color:#999;border-top-style:solid}.layui-edge-left{border-right-color:#999;border-right-style:solid}.layui-disabled,.layui-disabled:hover{color:#9a9a9a!important;cursor:not-allowed!important}.layui-circle{border-radius:100%}.layui-show{display:block!important}.layui-hide{display:none!important}@font-face{font-family:layui-icon;src:url(../font/iconfont.eot?v=256);src:url(../font/iconfont.eot?v=256#iefix) format('embedded-opentype'),url(../font/iconfont.woff2?v=256) format('woff2'),url(../font/iconfont.woff?v=256) format('woff'),url(../font/iconfont.ttf?v=256) format('truetype'),url(../font/iconfont.svg?v=256#layui-icon) format('svg')}.layui-icon{font-family:layui-icon!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-icon-reply-fill:before{content:"\e611"}.layui-icon-set-fill:before{content:"\e614"}.layui-icon-menu-fill:before{content:"\e60f"}.layui-icon-search:before{content:"\e615"}.layui-icon-share:before{content:"\e641"}.layui-icon-set-sm:before{content:"\e620"}.layui-icon-engine:before{content:"\e628"}.layui-icon-close:before{content:"\1006"}.layui-icon-close-fill:before{content:"\1007"}.layui-icon-chart-screen:before{content:"\e629"}.layui-icon-star:before{content:"\e600"}.layui-icon-circle-dot:before{content:"\e617"}.layui-icon-chat:before{content:"\e606"}.layui-icon-release:before{content:"\e609"}.layui-icon-list:before{content:"\e60a"}.layui-icon-chart:before{content:"\e62c"}.layui-icon-ok-circle:before{content:"\1005"}.layui-icon-layim-theme:before{content:"\e61b"}.layui-icon-table:before{content:"\e62d"}.layui-icon-right:before{content:"\e602"}.layui-icon-left:before{content:"\e603"}.layui-icon-cart-simple:before{content:"\e698"}.layui-icon-face-cry:before{content:"\e69c"}.layui-icon-face-smile:before{content:"\e6af"}.layui-icon-survey:before{content:"\e6b2"}.layui-icon-tree:before{content:"\e62e"}.layui-icon-ie:before{content:"\e7bb"}.layui-icon-upload-circle:before{content:"\e62f"}.layui-icon-add-circle:before{content:"\e61f"}.layui-icon-download-circle:before{content:"\e601"}.layui-icon-templeate-1:before{content:"\e630"}.layui-icon-util:before{content:"\e631"}.layui-icon-face-surprised:before{content:"\e664"}.layui-icon-edit:before{content:"\e642"}.layui-icon-speaker:before{content:"\e645"}.layui-icon-down:before{content:"\e61a"}.layui-icon-file:before{content:"\e621"}.layui-icon-layouts:before{content:"\e632"}.layui-icon-rate-half:before{content:"\e6c9"}.layui-icon-add-circle-fine:before{content:"\e608"}.layui-icon-prev-circle:before{content:"\e633"}.layui-icon-read:before{content:"\e705"}.layui-icon-404:before{content:"\e61c"}.layui-icon-carousel:before{content:"\e634"}.layui-icon-help:before{content:"\e607"}.layui-icon-code-circle:before{content:"\e635"}.layui-icon-windows:before{content:"\e67f"}.layui-icon-water:before{content:"\e636"}.layui-icon-username:before{content:"\e66f"}.layui-icon-find-fill:before{content:"\e670"}.layui-icon-about:before{content:"\e60b"}.layui-icon-location:before{content:"\e715"}.layui-icon-up:before{content:"\e619"}.layui-icon-pause:before{content:"\e651"}.layui-icon-date:before{content:"\e637"}.layui-icon-layim-uploadfile:before{content:"\e61d"}.layui-icon-delete:before{content:"\e640"}.layui-icon-play:before{content:"\e652"}.layui-icon-top:before{content:"\e604"}.layui-icon-firefox:before{content:"\e686"}.layui-icon-friends:before{content:"\e612"}.layui-icon-refresh-3:before{content:"\e9aa"}.layui-icon-ok:before{content:"\e605"}.layui-icon-layer:before{content:"\e638"}.layui-icon-face-smile-fine:before{content:"\e60c"}.layui-icon-dollar:before{content:"\e659"}.layui-icon-group:before{content:"\e613"}.layui-icon-layim-download:before{content:"\e61e"}.layui-icon-picture-fine:before{content:"\e60d"}.layui-icon-link:before{content:"\e64c"}.layui-icon-diamond:before{content:"\e735"}.layui-icon-log:before{content:"\e60e"}.layui-icon-key:before{content:"\e683"}.layui-icon-rate-solid:before{content:"\e67a"}.layui-icon-fonts-del:before{content:"\e64f"}.layui-icon-unlink:before{content:"\e64d"}.layui-icon-fonts-clear:before{content:"\e639"}.layui-icon-triangle-r:before{content:"\e623"}.layui-icon-circle:before{content:"\e63f"}.layui-icon-radio:before{content:"\e643"}.layui-icon-align-center:before{content:"\e647"}.layui-icon-align-right:before{content:"\e648"}.layui-icon-align-left:before{content:"\e649"}.layui-icon-loading-1:before{content:"\e63e"}.layui-icon-return:before{content:"\e65c"}.layui-icon-fonts-strong:before{content:"\e62b"}.layui-icon-upload:before{content:"\e67c"}.layui-icon-dialogue:before{content:"\e63a"}.layui-icon-video:before{content:"\e6ed"}.layui-icon-headset:before{content:"\e6fc"}.layui-icon-cellphone-fine:before{content:"\e63b"}.layui-icon-add-1:before{content:"\e654"}.layui-icon-face-smile-b:before{content:"\e650"}.layui-icon-fonts-html:before{content:"\e64b"}.layui-icon-screen-full:before{content:"\e622"}.layui-icon-form:before{content:"\e63c"}.layui-icon-cart:before{content:"\e657"}.layui-icon-camera-fill:before{content:"\e65d"}.layui-icon-tabs:before{content:"\e62a"}.layui-icon-heart-fill:before{content:"\e68f"}.layui-icon-fonts-code:before{content:"\e64e"}.layui-icon-ios:before{content:"\e680"}.layui-icon-at:before{content:"\e687"}.layui-icon-fire:before{content:"\e756"}.layui-icon-set:before{content:"\e716"}.layui-icon-fonts-u:before{content:"\e646"}.layui-icon-triangle-d:before{content:"\e625"}.layui-icon-tips:before{content:"\e702"}.layui-icon-picture:before{content:"\e64a"}.layui-icon-more-vertical:before{content:"\e671"}.layui-icon-bluetooth:before{content:"\e689"}.layui-icon-flag:before{content:"\e66c"}.layui-icon-loading:before{content:"\e63d"}.layui-icon-fonts-i:before{content:"\e644"}.layui-icon-refresh-1:before{content:"\e666"}.layui-icon-rmb:before{content:"\e65e"}.layui-icon-addition:before{content:"\e624"}.layui-icon-home:before{content:"\e68e"}.layui-icon-time:before{content:"\e68d"}.layui-icon-user:before{content:"\e770"}.layui-icon-notice:before{content:"\e667"}.layui-icon-chrome:before{content:"\e68a"}.layui-icon-edge:before{content:"\e68b"}.layui-icon-login-weibo:before{content:"\e675"}.layui-icon-voice:before{content:"\e688"}.layui-icon-upload-drag:before{content:"\e681"}.layui-icon-login-qq:before{content:"\e676"}.layui-icon-snowflake:before{content:"\e6b1"}.layui-icon-heart:before{content:"\e68c"}.layui-icon-logout:before{content:"\e682"}.layui-icon-file-b:before{content:"\e655"}.layui-icon-template:before{content:"\e663"}.layui-icon-transfer:before{content:"\e691"}.layui-icon-auz:before{content:"\e672"}.layui-icon-console:before{content:"\e665"}.layui-icon-app:before{content:"\e653"}.layui-icon-prev:before{content:"\e65a"}.layui-icon-website:before{content:"\e7ae"}.layui-icon-next:before{content:"\e65b"}.layui-icon-component:before{content:"\e857"}.layui-icon-android:before{content:"\e684"}.layui-icon-more:before{content:"\e65f"}.layui-icon-login-wechat:before{content:"\e677"}.layui-icon-shrink-right:before{content:"\e668"}.layui-icon-spread-left:before{content:"\e66b"}.layui-icon-camera:before{content:"\e660"}.layui-icon-note:before{content:"\e66e"}.layui-icon-refresh:before{content:"\e669"}.layui-icon-female:before{content:"\e661"}.layui-icon-male:before{content:"\e662"}.layui-icon-screen-restore:before{content:"\e758"}.layui-icon-password:before{content:"\e673"}.layui-icon-senior:before{content:"\e674"}.layui-icon-theme:before{content:"\e66a"}.layui-icon-tread:before{content:"\e6c5"}.layui-icon-praise:before{content:"\e6c6"}.layui-icon-star-fill:before{content:"\e658"}.layui-icon-rate:before{content:"\e67b"}.layui-icon-template-1:before{content:"\e656"}.layui-icon-vercode:before{content:"\e679"}.layui-icon-service:before{content:"\e626"}.layui-icon-cellphone:before{content:"\e678"}.layui-icon-print:before{content:"\e66d"}.layui-icon-cols:before{content:"\e610"}.layui-icon-wifi:before{content:"\e7e0"}.layui-icon-export:before{content:"\e67d"}.layui-icon-rss:before{content:"\e808"}.layui-icon-slider:before{content:"\e714"}.layui-icon-email:before{content:"\e618"}.layui-icon-subtraction:before{content:"\e67e"}.layui-icon-mike:before{content:"\e6dc"}.layui-icon-light:before{content:"\e748"}.layui-icon-gift:before{content:"\e627"}.layui-icon-mute:before{content:"\e685"}.layui-icon-reduce-circle:before{content:"\e616"}.layui-icon-music:before{content:"\e690"}.layui-main{width:1140px;margin:0 auto}.layui-header{z-index:1000;height:60px}.layui-header a:hover{transition:all .5s;-webkit-transition:all .5s}.layui-side{position:fixed;left:0;top:0;bottom:0;z-index:999;width:200px;overflow-x:hidden}.layui-side-scroll{position:relative;width:220px;height:100%;overflow-x:hidden}.layui-body{position:absolute;left:200px;right:0;top:0;bottom:0;z-index:998;width:auto;overflow-y:auto;box-sizing:border-box}.layui-layout-body{overflow:hidden}.layui-layout-admin .layui-header{background-color:#23262E}.layui-layout-admin .layui-side{top:60px;width:200px;overflow-x:hidden}.layui-layout-admin .layui-body{position:fixed;top:60px;bottom:44px}.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}.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}.layui-layout-left{position:absolute!important;left:200px;top:0}.layui-layout-right{position:absolute!important;right:0;top:0}.layui-container{position:relative;margin:0 auto;padding:0 15px;box-sizing:border-box}.layui-fluid{position:relative;margin:0 auto;padding:0 15px}.layui-row:after,.layui-row:before{content:'';display:block;clear:both}.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}.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}.layui-col-xs1{width:8.33333333%}.layui-col-xs2{width:16.66666667%}.layui-col-xs3{width:25%}.layui-col-xs4{width:33.33333333%}.layui-col-xs5{width:41.66666667%}.layui-col-xs6{width:50%}.layui-col-xs7{width:58.33333333%}.layui-col-xs8{width:66.66666667%}.layui-col-xs9{width:75%}.layui-col-xs10{width:83.33333333%}.layui-col-xs11{width:91.66666667%}.layui-col-xs12{width:100%}.layui-col-xs-offset1{margin-left:8.33333333%}.layui-col-xs-offset2{margin-left:16.66666667%}.layui-col-xs-offset3{margin-left:25%}.layui-col-xs-offset4{margin-left:33.33333333%}.layui-col-xs-offset5{margin-left:41.66666667%}.layui-col-xs-offset6{margin-left:50%}.layui-col-xs-offset7{margin-left:58.33333333%}.layui-col-xs-offset8{margin-left:66.66666667%}.layui-col-xs-offset9{margin-left:75%}.layui-col-xs-offset10{margin-left:83.33333333%}.layui-col-xs-offset11{margin-left:91.66666667%}.layui-col-xs-offset12{margin-left:100%}@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}}@media screen and (min-width:768px){.layui-container{width: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}.layui-col-sm1{width:8.33333333%}.layui-col-sm2{width:16.66666667%}.layui-col-sm3{width:25%}.layui-col-sm4{width:33.33333333%}.layui-col-sm5{width:41.66666667%}.layui-col-sm6{width:50%}.layui-col-sm7{width:58.33333333%}.layui-col-sm8{width:66.66666667%}.layui-col-sm9{width:75%}.layui-col-sm10{width:83.33333333%}.layui-col-sm11{width:91.66666667%}.layui-col-sm12{width:100%}.layui-col-sm-offset1{margin-left:8.33333333%}.layui-col-sm-offset2{margin-left:16.66666667%}.layui-col-sm-offset3{margin-left:25%}.layui-col-sm-offset4{margin-left:33.33333333%}.layui-col-sm-offset5{margin-left:41.66666667%}.layui-col-sm-offset6{margin-left:50%}.layui-col-sm-offset7{margin-left:58.33333333%}.layui-col-sm-offset8{margin-left:66.66666667%}.layui-col-sm-offset9{margin-left:75%}.layui-col-sm-offset10{margin-left:83.33333333%}.layui-col-sm-offset11{margin-left:91.66666667%}.layui-col-sm-offset12{margin-left:100%}}@media screen and (min-width:992px){.layui-container{width: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}.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}.layui-col-md1{width:8.33333333%}.layui-col-md2{width:16.66666667%}.layui-col-md3{width:25%}.layui-col-md4{width:33.33333333%}.layui-col-md5{width:41.66666667%}.layui-col-md6{width:50%}.layui-col-md7{width:58.33333333%}.layui-col-md8{width:66.66666667%}.layui-col-md9{width:75%}.layui-col-md10{width:83.33333333%}.layui-col-md11{width:91.66666667%}.layui-col-md12{width:100%}.layui-col-md-offset1{margin-left:8.33333333%}.layui-col-md-offset2{margin-left:16.66666667%}.layui-col-md-offset3{margin-left:25%}.layui-col-md-offset4{margin-left:33.33333333%}.layui-col-md-offset5{margin-left:41.66666667%}.layui-col-md-offset6{margin-left:50%}.layui-col-md-offset7{margin-left:58.33333333%}.layui-col-md-offset8{margin-left:66.66666667%}.layui-col-md-offset9{margin-left:75%}.layui-col-md-offset10{margin-left:83.33333333%}.layui-col-md-offset11{margin-left:91.66666667%}.layui-col-md-offset12{margin-left:100%}}@media screen and (min-width:1200px){.layui-container{width:1170px}.layui-hide-lg{display:none!important}.layui-show-lg-block{display:block!important}.layui-show-lg-inline{display:inline!important}.layui-show-lg-inline-block{display:inline-block!important}.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{width:8.33333333%}.layui-col-lg2{width:16.66666667%}.layui-col-lg3{width:25%}.layui-col-lg4{width:33.33333333%}.layui-col-lg5{width:41.66666667%}.layui-col-lg6{width:50%}.layui-col-lg7{width:58.33333333%}.layui-col-lg8{width:66.66666667%}.layui-col-lg9{width:75%}.layui-col-lg10{width:83.33333333%}.layui-col-lg11{width:91.66666667%}.layui-col-lg12{width:100%}.layui-col-lg-offset1{margin-left:8.33333333%}.layui-col-lg-offset2{margin-left:16.66666667%}.layui-col-lg-offset3{margin-left:25%}.layui-col-lg-offset4{margin-left:33.33333333%}.layui-col-lg-offset5{margin-left:41.66666667%}.layui-col-lg-offset6{margin-left:50%}.layui-col-lg-offset7{margin-left:58.33333333%}.layui-col-lg-offset8{margin-left:66.66666667%}.layui-col-lg-offset9{margin-left:75%}.layui-col-lg-offset10{margin-left:83.33333333%}.layui-col-lg-offset11{margin-left:91.66666667%}.layui-col-lg-offset12{margin-left:100%}}.layui-col-space1{margin:-.5px}.layui-col-space1>*{padding:.5px}.layui-col-space2{margin:-1px}.layui-col-space2>*{padding:1px}.layui-col-space4{margin:-2px}.layui-col-space4>*{padding:2px}.layui-col-space5{margin:-2.5px}.layui-col-space5>*{padding:2.5px}.layui-col-space6{margin:-3px}.layui-col-space6>*{padding:3px}.layui-col-space8{margin:-4px}.layui-col-space8>*{padding:4px}.layui-col-space10{margin:-5px}.layui-col-space10>*{padding:5px}.layui-col-space12{margin:-6px}.layui-col-space12>*{padding:6px}.layui-col-space14{margin:-7px}.layui-col-space14>*{padding:7px}.layui-col-space15{margin:-7.5px}.layui-col-space15>*{padding:7.5px}.layui-col-space16{margin:-8px}.layui-col-space16>*{padding:8px}.layui-col-space18{margin:-9px}.layui-col-space18>*{padding:9px}.layui-col-space20{margin:-10px}.layui-col-space20>*{padding:10px}.layui-col-space22{margin:-11px}.layui-col-space22>*{padding:11px}.layui-col-space24{margin:-12px}.layui-col-space24>*{padding:12px}.layui-col-space25{margin:-12.5px}.layui-col-space25>*{padding:12.5px}.layui-col-space26{margin:-13px}.layui-col-space26>*{padding:13px}.layui-col-space28{margin:-14px}.layui-col-space28>*{padding:14px}.layui-col-space30{margin:-15px}.layui-col-space30>*{padding:15px}.layui-btn,.layui-input,.layui-select,.layui-textarea,.layui-upload-button{outline:0;-webkit-appearance:none;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box}.layui-elem-quote{margin-bottom:10px;padding:15px;line-height:22px;border-left:5px solid #009688;border-radius:0 2px 2px 0;background-color:#f2f2f2}.layui-quote-nm{border-style:solid;border-width:1px 1px 1px 5px;background:0 0}.layui-elem-field{margin-bottom:10px;padding:0;border-width:1px;border-style:solid}.layui-elem-field legend{margin-left:20px;padding:0 10px;font-size:20px;font-weight:300}.layui-field-title{margin:10px 0 20px;border-width:1px 0 0}.layui-field-box{padding:10px 15px}.layui-field-title .layui-field-box{padding:10px 0}.layui-progress{position:relative;height:6px;border-radius:20px;background-color:#e2e2e2}.layui-progress-bar{position:absolute;left:0;top:0;width:0;max-width:100%;height:6px;border-radius:20px;text-align:right;background-color:#5FB878;transition:all .3s;-webkit-transition:all .3s}.layui-progress-big,.layui-progress-big .layui-progress-bar{height:18px;line-height:18px}.layui-progress-text{position:relative;top:-20px;line-height:18px;font-size:12px;color:#666}.layui-progress-big .layui-progress-text{position:static;padding:0 10px;color:#fff}.layui-collapse{border-width:1px;border-style:solid;border-radius:2px}.layui-colla-content,.layui-colla-item{border-top-width:1px;border-top-style:solid}.layui-colla-item:first-child{border-top:none}.layui-colla-title{position:relative;height:42px;line-height:42px;padding:0 15px 0 35px;color:#333;background-color:#f2f2f2;cursor:pointer;font-size:14px;overflow:hidden}.layui-colla-content{display:none;padding:10px 15px;line-height:22px;color:#666}.layui-colla-icon{position:absolute;left:15px;top:0;font-size:14px}.layui-card{margin-bottom:15px;border-radius:2px;background-color:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.layui-card:last-child{margin-bottom:0}.layui-card-header{position:relative;height:42px;line-height:42px;padding:0 15px;border-bottom:1px solid #f6f6f6;color:#333;border-radius:2px 2px 0 0;font-size:14px}.layui-bg-black,.layui-bg-blue,.layui-bg-cyan,.layui-bg-green,.layui-bg-orange,.layui-bg-red{color:#fff!important}.layui-card-body{position:relative;padding:10px 15px;line-height:24px}.layui-card-body[pad15]{padding:15px}.layui-card-body[pad20]{padding:20px}.layui-card-body .layui-table{margin:5px 0}.layui-card .layui-tab{margin:0}.layui-panel-window{position:relative;padding:15px;border-radius:0;border-top:5px solid #E6E6E6;background-color:#fff}.layui-auxiliar-moving{position:fixed;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background:0 0;z-index:9999999999}.layui-form-label,.layui-form-mid,.layui-form-select,.layui-input-block,.layui-input-inline,.layui-textarea{position:relative}.layui-bg-red{background-color:#FF5722!important}.layui-bg-orange{background-color:#FFB800!important}.layui-bg-green{background-color:#009688!important}.layui-bg-cyan{background-color:#2F4056!important}.layui-bg-blue{background-color:#1E9FFF!important}.layui-bg-black{background-color:#393D49!important}.layui-bg-gray{background-color:#eee!important;color:#666!important}.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}.layui-timeline-item:before,hr{background-color:#e6e6e6}.layui-text{line-height:22px;font-size:14px;color:#666}.layui-text h1,.layui-text h2,.layui-text h3{font-weight:500;color:#333}.layui-text h1{font-size:30px}.layui-text h2{font-size:24px}.layui-text h3{font-size: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}.layui-text ul li{margin-top:5px;list-style-type:disc}.layui-text em,.layui-word-aux{color:#999!important;padding:0 5px!important}.layui-btn{display:inline-block;height:38px;line-height:38px;padding:0 18px;background-color:#009688;color:#fff;white-space:nowrap;text-align:center;font-size:14px;border:none;border-radius:2px;cursor:pointer}.layui-btn:hover{opacity:.8;filter:alpha(opacity=80);color:#fff}.layui-btn:active{opacity:1;filter:alpha(opacity=100)}.layui-btn+.layui-btn{margin-left:10px}.layui-btn-container{font-size:0}.layui-btn-container .layui-btn{margin-right:10px;margin-bottom:10px}.layui-btn-container .layui-btn+.layui-btn{margin-left:0}.layui-table .layui-btn-container .layui-btn{margin-bottom:9px}.layui-btn-radius{border-radius:100px}.layui-btn .layui-icon{margin-right:3px;font-size:18px;vertical-align:bottom;vertical-align:middle\9}.layui-btn-primary{border:1px solid #C9C9C9;background-color:#fff;color:#555}.layui-btn-primary:hover{border-color:#009688;color:#333}.layui-btn-normal{background-color:#1E9FFF}.layui-btn-warm{background-color:#FFB800}.layui-btn-danger{background-color:#FF5722}.layui-btn-checked{background-color:#5FB878}.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}.layui-btn-lg{height:44px;line-height:44px;padding:0 25px;font-size:16px}.layui-btn-sm{height:30px;line-height:30px;padding:0 10px;font-size:12px}.layui-btn-sm i{font-size:16px!important}.layui-btn-xs{height:22px;line-height:22px;padding:0 5px;font-size:12px}.layui-btn-xs i{font-size:14px!important}.layui-btn-group{display:inline-block;vertical-align:middle;font-size:0}.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}.layui-btn-group .layui-btn-primary{border-left:none}.layui-btn-group .layui-btn-primary:hover{border-color:#C9C9C9;color:#009688}.layui-btn-group .layui-btn:first-child{border-left:none;border-radius:2px 0 0 2px}.layui-btn-group .layui-btn-primary:first-child{border-left:1px solid #c9c9c9}.layui-btn-group .layui-btn:last-child{border-radius:0 2px 2px 0}.layui-btn-group .layui-btn+.layui-btn{margin-left:0}.layui-btn-group+.layui-btn-group{margin-left:10px}.layui-btn-fluid{width:100%}.layui-input,.layui-select,.layui-textarea{height:38px;line-height:1.3;line-height:38px\9;border-width:1px;border-style:solid;background-color:#fff;border-radius:2px}.layui-input::-webkit-input-placeholder,.layui-select::-webkit-input-placeholder,.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-input,.layui-textarea{display:block;width:100%;padding-left:10px}.layui-input:hover,.layui-textarea:hover{border-color:#D2D2D2!important}.layui-input:focus,.layui-textarea:focus{border-color:#C9C9C9!important}.layui-textarea{min-height:100px;height:auto;line-height:20px;padding:6px 10px;resize:vertical}.layui-select{padding:0 10px}.layui-form input[type=checkbox],.layui-form input[type=radio],.layui-form select{display:none}.layui-form [lay-ignore]{display:initial}.layui-form-item{margin-bottom:15px;clear:both;*zoom:1}.layui-form-item:after{content:'\20';clear:both;*zoom:1;display:block;height:0}.layui-form-label{float:left;display:block;padding:9px 15px;width:80px;font-weight:400;line-height:20px;text-align:right}.layui-form-label-col{display:block;float:none;padding:9px 0;line-height:20px;text-align:left}.layui-form-item .layui-inline{margin-bottom:5px;margin-right:10px}.layui-input-block{margin-left:110px;min-height:36px}.layui-input-inline{display:inline-block;vertical-align:middle}.layui-form-item .layui-input-inline{float:left;width:190px;margin-right:10px}.layui-form-text .layui-input-inline{width:auto}.layui-form-mid{float:left;display:block;padding:9px 0!important;line-height:20px;margin-right:10px}.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus{border-color:#FF5722!important}.layui-form-select .layui-input{padding-right:30px;cursor:pointer}.layui-form-select .layui-edge{position:absolute;right:10px;top:50%;margin-top:-3px;cursor:pointer;border-width:6px;border-top-color:#c2c2c2;border-top-style:solid;transition:all .3s;-webkit-transition:all .3s}.layui-form-select dl{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box}.layui-form-select dl dd,.layui-form-select dl dt{padding:0 10px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-form-select dl dt{font-size:12px;color:#999}.layui-form-select dl dd{cursor:pointer}.layui-form-select dl dd:hover{background-color:#f2f2f2;-webkit-transition:.5s all;transition:.5s all}.layui-form-select .layui-select-group dd{padding-left:20px}.layui-form-select dl dd.layui-select-tips{padding-left: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;-webkit-transform:rotate(180deg);transform:rotate(180deg);margin-top:-3px\9}:root .layui-form-selected .layui-edge{margin-top:-9px\0/IE9}.layui-form-selectup dl{top:auto;bottom:42px}.layui-select-none{margin:5px 0;text-align:center;color:#999}.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;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:#d2d2d2;color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:#c2c2c2}.layui-form-checkbox i{position:absolute;right:0;top:0;width:30px;height:28px;border:1px solid #d2d2d2;border-left:none;border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:#c2c2c2;color:#c2c2c2}.layui-form-checked,.layui-form-checked:hover{border-color:#5FB878}.layui-form-checked span,.layui-form-checked:hover span{background-color:#5FB878}.layui-form-checked i,.layui-form-checked:hover i{color:#5FB878}.layui-form-item .layui-form-checkbox{margin-top:4px}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid #d2d2d2;font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:#5FB878;color:#fff}.layui-form-checked[lay-skin=primary] i{border-color:#5FB878!important;background-color:#5FB878;color:#fff}.layui-checkbox-disbaled[lay-skin=primary] span{background:0 0!important;color:#c2c2c2}.layui-checkbox-disbaled[lay-skin=primary]:hover i{border-color:#d2d2d2}.layui-form-item .layui-form-checkbox[lay-skin=primary]{margin-top:10px}.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 5px;margin-top:8px;border:1px solid #d2d2d2;border-radius:20px;cursor:pointer;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-switch i{position:absolute;left:5px;top:3px;width:16px;height:16px;border-radius:20px;background-color:#d2d2d2;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-switch em{position:relative;top:0;width:25px;margin-left:21px;padding:0!important;text-align:center!important;color:#999!important;font-style:normal!important;font-size: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;background-color:#fff}.layui-form-onswitch em{margin-left:5px;margin-right:21px;color:#fff!important}.layui-checkbox-disbaled span{background-color:#e2e2e2!important}.layui-checkbox-disbaled:hover i{color:#fff!important}[lay-radio]{display:none}.layui-form-radio,.layui-form-radio *{display:inline-block;vertical-align:middle}.layui-form-radio{line-height:28px;margin:6px 10px 0 0;padding-right:10px;cursor:pointer;font-size:0}.layui-form-radio *{font-size:14px}.layui-form-radio>i{margin-right:8px;font-size:22px;color:#777777}.layui-form-radio>i:hover,.layui-form-radioed>i{color:#2b3a49}.layui-radio-disbaled>i{color:#e2e2e2!important}.layui-form-pane .layui-form-label{width:110px;padding:8px 15px;height:38px;line-height:20px;border-width:1px;border-style:solid;border-radius:2px 0 0 2px;text-align:center;background-color:#FBFBFB;overflow:hidden;box-sizing:border-box}.layui-form-pane .layui-input-inline{margin-left:-1px}.layui-form-pane .layui-input-block{margin-left:110px;left:-1px}.layui-form-pane .layui-input{border-radius:0 2px 2px 0}.layui-form-pane .layui-form-text .layui-form-label{float:none;width:100%;border-radius:2px;box-sizing:border-box;text-align:left}.layui-form-pane .layui-form-text .layui-input-inline{display:block;margin:0;top:-1px;clear:both}.layui-form-pane .layui-form-text .layui-input-block{margin:0;left:0;top:-1px}.layui-form-pane .layui-form-text .layui-textarea{min-height:100px;border-radius:0 0 2px 2px}.layui-form-pane .layui-form-checkbox{margin:4px 0 4px 10px}.layui-form-pane .layui-form-radio,.layui-form-pane .layui-form-switch{margin-top:6px;margin-left:10px}.layui-form-pane .layui-form-item[pane]{position:relative;border-width:1px;border-style:solid}.layui-form-pane .layui-form-item[pane] .layui-form-label{position:absolute;left:0;top:0;height:100%;border-width:0 1px 0 0}.layui-form-pane .layui-form-item[pane] .layui-input-inline{margin-left:110px}@media screen and (max-width:450px){.layui-form-item .layui-form-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-form-item .layui-inline{display:block;margin-right:0;margin-bottom:20px;clear:both}.layui-form-item .layui-inline:after{content:'\20';clear:both;display:block;height:0}.layui-form-item .layui-input-inline{display:block;float:none;left:-3px;width:auto;margin:0 0 10px 112px}.layui-form-item .layui-input-inline+.layui-form-mid{margin-left:110px;top:-5px;padding:0}.layui-form-item .layui-form-checkbox{margin-right:5px;margin-bottom:5px}}.layui-layedit{border-width:1px;border-style:solid;border-radius:2px}.layui-layedit-tool{padding:3px 5px;border-bottom-width:1px;border-bottom-style:solid;font-size:0}.layedit-tool-fixed{position:fixed;top:0;border-top:1px solid #e2e2e2}.layui-layedit-tool .layedit-tool-mid,.layui-layedit-tool .layui-icon{display:inline-block;vertical-align:middle;text-align:center;font-size:14px}.layui-layedit-tool .layui-icon{position:relative;width:32px;height:30px;line-height:30px;margin:3px 5px;color:#777;cursor:pointer;border-radius:2px}.layui-layedit-tool .layui-icon:hover{color:#393D49}.layui-layedit-tool .layui-icon:active{color:#000}.layui-layedit-tool .layedit-tool-active{background-color:#e2e2e2;color:#000}.layui-layedit-tool .layui-disabled,.layui-layedit-tool .layui-disabled:hover{color:#d2d2d2;cursor:not-allowed}.layui-layedit-tool .layedit-tool-mid{width:1px;height:18px;margin:0 10px;background-color:#d2d2d2}.layedit-tool-html{width:50px!important;font-size:30px!important}.layedit-tool-b,.layedit-tool-code,.layedit-tool-help{font-size:16px!important}.layedit-tool-d,.layedit-tool-face,.layedit-tool-image,.layedit-tool-unlink{font-size:18px!important}.layedit-tool-image input{position:absolute;font-size:0;left:0;top:0;width:100%;height:100%;opacity:.01;filter:Alpha(opacity=1);cursor:pointer}.layui-layedit-iframe iframe{display:block;width:100%}#LAY_layedit_code{overflow:hidden}.layui-laypage{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;margin:10px 0;font-size:0}.layui-laypage>a:first-child,.layui-laypage>a:first-child em{border-radius:2px 0 0 2px}.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}.layui-laypage>:last-child{margin-right:0!important}.layui-laypage a,.layui-laypage button,.layui-laypage input,.layui-laypage select,.layui-laypage span{border:1px solid #e2e2e2}.layui-laypage a,.layui-laypage span{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;padding:0 15px;height:28px;line-height:28px;margin:0 -1px 5px 0;background-color:#fff;color:#333;font-size:12px}.layui-flow-more a *,.layui-laypage input,.layui-table-view select[lay-ignore]{display:inline-block}.layui-laypage a:hover{color:#009688}.layui-laypage em{font-style:normal}.layui-laypage .layui-laypage-spr{color:#999;font-weight:700}.layui-laypage a{text-decoration:none}.layui-laypage .layui-laypage-curr{position:relative}.layui-laypage .layui-laypage-curr em{position:relative;color:#fff}.layui-laypage .layui-laypage-curr .layui-laypage-em{position:absolute;left:-1px;top:-1px;padding:1px;width:100%;height:100%;background-color:#009688}.layui-laypage-em{border-radius:2px}.layui-laypage-next em,.layui-laypage-prev em{font-family:Sim sun;font-size:16px}.layui-laypage .layui-laypage-count,.layui-laypage .layui-laypage-limits,.layui-laypage .layui-laypage-refresh,.layui-laypage .layui-laypage-skip{margin-left:10px;margin-right: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;cursor:pointer}.layui-laypage select{height:22px;padding:3px;border-radius:2px;cursor:pointer}.layui-laypage .layui-laypage-skip{height:30px;line-height:30px;color:#999}.layui-laypage button,.layui-laypage input{height:30px;line-height:30px;border-radius:2px;vertical-align:top;background-color:#fff;box-sizing:border-box}.layui-laypage input{width:40px;margin:0 10px;padding:0 3px;text-align:center}.layui-laypage input:focus,.layui-laypage select:focus{border-color:#009688!important}.layui-laypage button{margin-left:10px;padding:0 10px;cursor:pointer}.layui-table,.layui-table-view{margin:10px 0}.layui-flow-more{margin:10px 0;text-align:center;color:#999;font-size:14px}.layui-flow-more a{height:32px;line-height:32px}.layui-flow-more a *{vertical-align:top}.layui-flow-more a cite{padding:0 20px;border-radius:3px;background-color:#eee;color:#333;font-style:normal}.layui-flow-more a cite:hover{opacity:.8}.layui-flow-more a i{font-size:30px;color:#737383}.layui-table{width:100%;background-color:#fff;color:#666}.layui-table tr{transition:all .3s;-webkit-transition:all .3s}.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;border-style:solid;border-color:#e6e6e6}.layui-table td,.layui-table th{position:relative;padding:9px 15px;min-height:20px;line-height:20px;font-size:14px}.layui-table[lay-skin=line] td,.layui-table[lay-skin=line] th{border-width:0 0 1px}.layui-table[lay-skin=row] td,.layui-table[lay-skin=row] th{border-width:0 1px 0 0}.layui-table[lay-skin=nob] td,.layui-table[lay-skin=nob] th{border:none}.layui-table img{max-width:100px}.layui-table[lay-size=lg] td,.layui-table[lay-size=lg] th{padding:15px 30px}.layui-table-view .layui-table[lay-size=lg] .layui-table-cell{height:40px;line-height:40px}.layui-table[lay-size=sm] td,.layui-table[lay-size=sm] th{font-size:12px;padding:5px 10px}.layui-table-view .layui-table[lay-size=sm] .layui-table-cell{height:20px;line-height:20px}.layui-table[lay-data]{display:none}.layui-table-box{position:relative;overflow:hidden}.layui-table-view .layui-table{position:relative;width:auto;margin:0}.layui-table-view .layui-table[lay-skin=line]{border-width:0 1px 0 0}.layui-table-view .layui-table[lay-skin=row]{border-width:0 0 1px}.layui-table-view .layui-table td,.layui-table-view .layui-table th{padding:5px 0;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-table-view .layui-table td[data-edit=text]{cursor:text}.layui-table-view .layui-form-checkbox[lay-skin=primary] i{width:18px;height:18px}.layui-table-view .layui-form-radio{line-height:0;padding:0}.layui-table-view .layui-form-radio>i{margin:0;font-size:20px}.layui-table-init{position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;z-index:110}.layui-table-init .layui-icon{position:absolute;left:50%;top:50%;margin:-15px 0 0 -15px;font-size:30px;color:#c2c2c2}.layui-table-header{border-width:0 0 1px;overflow:hidden}.layui-table-header .layui-table{margin-bottom:-1px}.layui-table-tool .layui-inline[lay-event]{position:relative;width:26px;height:26px;padding:5px;line-height:16px;margin-right:10px;text-align:center;color:#333;border:1px solid #ccc;cursor:pointer;-webkit-transition:.5s all;transition:.5s all}.layui-table-tool .layui-inline[lay-event]:hover{border:1px solid #999}.layui-table-tool-temp{padding-right:120px}.layui-table-tool-self{position:absolute;right:17px;top:10px}.layui-table-tool .layui-table-tool-self .layui-inline[lay-event]{margin:0 0 0 10px}.layui-table-tool-panel{position:absolute;top:29px;left:-1px;padding:5px 0;min-width:150px;min-height:40px;border:1px solid #d2d2d2;text-align:left;overflow-y:auto;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12)}.layui-table-cell,.layui-table-tool-panel li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layui-table-tool-panel li{padding:0 10px;line-height:30px;-webkit-transition:.5s all;transition:.5s all}.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary]{width:100%;padding-left:28px}.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-self .layui-table-tool-panel{left:auto;right:-1px}.layui-table-col-set{position:absolute;right:0;top:0;width:20px;height:100%;border-width:0 0 0 1px;background-color:#fff}.layui-table-sort{width:10px;height:20px;margin-left:5px;cursor:pointer!important}.layui-table-sort .layui-edge{position:absolute;left:5px;border-width:5px}.layui-table-sort .layui-table-sort-asc{top: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;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;line-height:28px;padding:0 15px;position:relative;box-sizing:border-box}.layui-table-cell .layui-form-checkbox[lay-skin=primary]{top:-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;margin-bottom:-1px}.layui-table-body .layui-none{line-height:26px;padding:15px;text-align:center;color:#999}.layui-table-fixed{position:absolute;left:0;top:0;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;border-width:0 0 0 1px;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;top:0;height:100%;width:50px}.layui-table-tool{position:relative;z-index:890;width:100%;min-height:50px;line-height:30px;padding:10px 15px;border-width:0 0 1px}.layui-table-tool .layui-btn-container{margin-bottom:-10px}.layui-table-page,.layui-table-total{border-width:1px 0 0;margin-bottom:-1px;overflow:hidden}.layui-table-page{position:relative;width:100%;padding:7px 7px 0;height:41px;font-size:12px;white-space:nowrap}.layui-table-page>div{height:26px}.layui-table-page .layui-laypage{margin:0}.layui-table-page .layui-laypage a,.layui-table-page .layui-laypage span{height:26px;line-height:26px;margin-bottom:10px;border:none;background:0 0}.layui-table-page .layui-laypage a,.layui-table-page .layui-laypage span.layui-laypage-curr{padding:0 12px}.layui-table-page .layui-laypage span{margin-left:0;padding:0}.layui-table-page .layui-laypage .layui-laypage-prev{margin-left:-7px!important}.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{left:0;top:0;padding:0}.layui-table-page .layui-laypage button,.layui-table-page .layui-laypage input{height:26px;line-height:26px}.layui-table-page .layui-laypage input{width:40px}.layui-table-page .layui-laypage button{padding:0 10px}.layui-table-page select{height:18px}.layui-table-patch .layui-table-cell{padding:0;width:30px}.layui-table-edit{position:absolute;left:0;top:0;width:100%;height:100%;padding:0 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;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;height:26px;line-height:26px}.layui-table-view .layui-form-checkbox i{height:26px}.layui-table-grid .layui-table-cell{overflow:visible}.layui-table-grid-down{position:absolute;top:0;right:0;width:26px;height:100%;padding:5px 0;border-width:0 0 0 1px;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;max-height:150px;padding:8px 15px;font-size:14px;overflow-y:scroll;background-color:#fff;color:#666}.layui-table-tips-c{position:absolute;right:-3px;top:-13px;width:20px;height:20px;padding: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}.layui-upload-file{display:none!important;opacity:.01;filter:Alpha(opacity=1)}.layui-upload-drag,.layui-upload-form,.layui-upload-wrap{display:inline-block}.layui-upload-list{margin:10px 0}.layui-upload-choose{padding:0 10px;color:#999}.layui-upload-drag{position:relative;padding:30px;border:1px dashed #e2e2e2;background-color:#fff;text-align:center;cursor:pointer;color:#999}.layui-upload-drag .layui-icon{font-size:50px;color:#009688}.layui-upload-drag[lay-over]{border-color:#009688}.layui-upload-iframe{position:absolute;width:0;height: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;width:100%;height:100%;opacity:.01;filter:Alpha(opacity=1);cursor:pointer}.layui-transfer-active,.layui-transfer-box{display:inline-block;vertical-align:middle}.layui-transfer-box,.layui-transfer-header,.layui-transfer-search{border-width:0;border-style:solid;border-color:#e6e6e6}.layui-transfer-box{position:relative;border-width:1px;width:200px;height:360px;border-radius:2px;background-color:#fff}.layui-transfer-box .layui-form-checkbox{width:100%;margin:0!important}.layui-transfer-header{height:38px;line-height:38px;padding:0 10px;border-bottom-width:1px}.layui-transfer-search{position:relative;padding:10px;border-bottom-width:1px}.layui-transfer-search .layui-input{height:32px;padding-left:30px;font-size:12px}.layui-transfer-search .layui-icon-search{position:absolute;left:20px;top:50%;margin-top:-8px;color:#666}.layui-transfer-active{margin:0 15px}.layui-transfer-active .layui-btn{display:block;margin:0;padding:0 15px;background-color:#5FB878;border-color:#5FB878;color:#fff}.layui-transfer-active .layui-btn-disabled{background-color:#FBFBFB;border-color:#e6e6e6;color:#C9C9C9}.layui-transfer-active .layui-btn:first-child{margin-bottom:15px}.layui-transfer-active .layui-btn .layui-icon{margin:0;font-size:14px!important}.layui-transfer-data{padding:5px 0;overflow:auto}.layui-transfer-data li{height:32px;line-height:32px;padding:0 10px}.layui-transfer-data li:hover{background-color:#f2f2f2;transition:.5s all}.layui-transfer-data .layui-none{padding:15px 10px;text-align:center;color:#999}.layui-nav{position:relative;padding:0 20px;background-color:#393D49;color:#fff;border-radius:2px;font-size:0;box-sizing:border-box}.layui-nav *{font-size:14px}.layui-nav .layui-nav-item{position:relative;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;line-height:60px}.layui-nav .layui-nav-item a{display:block;padding:0 20px;color:#fff;color:rgba(255,255,255,.7);transition:all .3s;-webkit-transition:all .3s}.layui-nav .layui-this:after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed:after{position:absolute;left:0;top:0;width:0;height:5px;background-color:#5FB878;transition:all .2s;-webkit-transition:all .2s}.layui-nav-bar{z-index:1000}.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{color:#fff}.layui-nav .layui-this:after{content:'';top:auto;bottom:0;width:100%}.layui-nav-img{width:30px;height:30px;margin-right:10px;border-radius:50%}.layui-nav .layui-nav-more{content:'';width:0;height:0;border-style:solid dashed dashed;border-color:#fff transparent transparent;overflow:hidden;cursor:pointer;transition:all .2s;-webkit-transition:all .2s;position:absolute;top:50%;right:3px;margin-top:-3px;border-width: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;min-width:100%;line-height:36px;padding:5px 0;box-shadow:0 2px 4px rgba(0,0,0,.12);border:1px solid #d2d2d2;background-color:#fff;z-index:100;border-radius:2px;white-space:nowrap}.layui-nav .layui-nav-child a{color:#333}.layui-nav .layui-nav-child a:hover{background-color:#f2f2f2;color:#000}.layui-nav-child dd{position:relative}.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;padding:0}.layui-nav-tree .layui-nav-item{display:block;width:100%;line-height:45px}.layui-nav-tree .layui-nav-item a{position:relative;height:45px;line-height: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-bar{width:5px;height:0;background-color:#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}.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;top:0;border:none;box-shadow:none}.layui-nav-tree .layui-nav-child a{height:40px;line-height:40px;color:#fff;color:rgba(255,255,255,.7)}.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}.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;bottom:0;left:0;overflow-x:hidden;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-bg-blue .layui-nav-title a:hover{background-color:#007DDB!important}.layui-breadcrumb{font-size:0}.layui-breadcrumb>*{font-size:14px}.layui-breadcrumb a{color:#999!important}.layui-breadcrumb a:hover{color:#5FB878!important}.layui-breadcrumb a cite{color:#666;font-style:normal}.layui-breadcrumb span[lay-separator]{margin:0 10px;color:#999}.layui-tab{margin:10px 0;text-align:left!important}.layui-tab[overflow]>.layui-tab-title{overflow:hidden}.layui-tab-title{position:relative;left:0;height:40px;white-space:nowrap;font-size:0;border-bottom-width:1px;border-bottom-style:solid;transition:all .2s;-webkit-transition:all .2s}.layui-tab-title li{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;font-size:14px;transition:all .2s;-webkit-transition:all .2s;position:relative;line-height:40px;min-width:65px;padding:0 15px;text-align:center;cursor:pointer}.layui-tab-title li a{display:block}.layui-tab-title .layui-this{color:#000}.layui-tab-title .layui-this:after{position:absolute;left:0;top:0;content:'';width:100%;height:41px;border-width:1px;border-style:solid;border-bottom-color:#fff;border-radius:2px 2px 0 0;box-sizing:border-box;pointer-events:none}.layui-tab-bar{position:absolute;right:0;top:0;z-index:10;width:30px;height:39px;line-height:39px;border-width:1px;border-style:solid;border-radius:2px;text-align:center;background-color:#fff;cursor:pointer}.layui-tab-bar .layui-icon{position:relative;display:inline-block;top:3px;transition:all .3s;-webkit-transition:all .3s}.layui-tab-item{display:none}.layui-tab-more{padding-right: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;-webkit-transform:rotate(180deg);transform:rotate(180deg)}:root .layui-tab-more .layui-tab-bar .layui-icon{top:-2px\0/IE9}.layui-tab-content{padding:10px}.layui-tab-title li .layui-tab-close{position:relative;display:inline-block;width:18px;height:18px;line-height:20px;margin-left:8px;top:1px;text-align:center;font-size:14px;color:#c2c2c2;transition:all .2s;-webkit-transition:all .2s}.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}.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-this:after{top:-1px}.layui-tab-card{border-width:1px;border-style:solid;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1)}.layui-tab-card>.layui-tab-title{background-color:#f2f2f2}.layui-tab-card>.layui-tab-title li{margin-right:-1px;margin-left:-1px}.layui-tab-card>.layui-tab-title .layui-this{background-color:#fff}.layui-tab-card>.layui-tab-title .layui-this:after{border-top:none;border-width:1px;border-bottom-color:#fff}.layui-tab-card>.layui-tab-title .layui-tab-bar{height:40px;line-height:40px;border-radius:0;border-top:none;border-right:none}.layui-tab-card>.layui-tab-more .layui-this{background:0 0;color:#5FB878}.layui-tab-card>.layui-tab-more .layui-this:after{border:none}.layui-timeline{padding-left:5px}.layui-timeline-item{position:relative;padding-bottom:20px}.layui-timeline-axis{position:absolute;left:-5px;top:0;z-index:10;width:20px;height:20px;line-height:20px;background-color:#fff;color:#5FB878;border-radius:50%;text-align:center;cursor:pointer}.layui-timeline-axis:hover{color:#FF5722}.layui-timeline-item:before{content:'';position:absolute;left:5px;top:0;z-index:0;width:1px;height:100%}.layui-timeline-item:last-child:before{display:none}.layui-timeline-item:first-child:before{display:block}.layui-timeline-content{padding-left:25px}.layui-timeline-title{position:relative;margin-bottom:10px}.layui-badge,.layui-badge-dot,.layui-badge-rim{position:relative;display:inline-block;padding:0 6px;font-size:12px;text-align:center;background-color:#FF5722;color:#fff;border-radius:2px}.layui-badge{height:18px;line-height:18px}.layui-badge-dot{width:8px;height:8px;padding:0;border-radius:50%}.layui-badge-rim{height:18px;line-height:18px;border-width:1px;border-style:solid;background-color:#fff;color:#666}.layui-btn .layui-badge,.layui-btn .layui-badge-dot{margin-left:5px}.layui-nav .layui-badge,.layui-nav .layui-badge-dot{position:absolute;top:50%;margin:-8px 6px 0}.layui-tab-title .layui-badge,.layui-tab-title .layui-badge-dot{left:5px;top:-2px}.layui-carousel{position:relative;left:0;top:0;background-color:#f8f8f8}.layui-carousel>[carousel-item]{position:relative;width:100%;height:100%;overflow:hidden}.layui-carousel>[carousel-item]:before{position:absolute;content:'\e63d';left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:#c2c2c2;font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-carousel>[carousel-item]>*{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s}.layui-carousel-updown>*{-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}.layui-carousel-arrow{display:none\9;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:rgba(0,0,0,.2);color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}.layui-carousel-arrow[lay-type=add]{left:auto!important;right:10px}.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add]{right:20px}.layui-carousel[lay-arrow=always] .layui-carousel-arrow{opacity:1;left:20px}.layui-carousel[lay-arrow=none] .layui-carousel-arrow{display:none}.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover{background-color:rgba(0,0,0,.35)}.layui-carousel:hover .layui-carousel-arrow{display:block\9;opacity:1;left:20px}.layui-carousel-ind{position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}.layui-carousel[lay-indicator=outside]{margin-bottom:30px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind{top:10px}.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul{background-color:rgba(0,0,0,.5)}.layui-carousel[lay-indicator=none] .layui-carousel-ind{display:none}.layui-carousel-ind ul{display:inline-block;padding:5px;background-color:rgba(0,0,0,.2);border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li{display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:#e2e2e2;background-color:rgba(255,255,255,.5);border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}.layui-carousel-ind li:hover{background-color:rgba(255,255,255,.7)}.layui-carousel-ind li.layui-this{background-color:#fff}.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this{display:block}.layui-carousel>[carousel-item]>.layui-this{left:0}.layui-carousel>[carousel-item]>.layui-carousel-prev{left:-100%}.layui-carousel>[carousel-item]>.layui-carousel-next{left:100%}.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right{left:0}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left{left:-100%}.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right{left:100%}.layui-carousel[lay-anim=updown] .layui-carousel-arrow{left:50%!important;top:20px;margin:0 0 0 -18px}.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>*{left:0!important}.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add]{top:auto!important;bottom:20px}.layui-carousel[lay-anim=updown] .layui-carousel-ind{position:absolute;top:50%;right:20px;width:auto;height:auto}.layui-carousel[lay-anim=updown] .layui-carousel-ind ul{padding:3px 5px}.layui-carousel[lay-anim=updown] .layui-carousel-ind li{display:block;margin:6px 0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this{top:0}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next{top:100%}.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}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left{top:-100%}.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right{top:100%}.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev{opacity: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{opacity:1}.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}.layui-fixbar{position:fixed;right:15px;bottom:15px;z-index:999999}.layui-fixbar li{width:50px;height:50px;line-height:50px;margin-bottom:1px;text-align:center;cursor:pointer;font-size:30px;background-color:#9F9F9F;color:#fff;border-radius:2px;opacity:.95}.layui-fixbar li:hover{opacity:.85}.layui-fixbar li:active{opacity:1}.layui-fixbar .layui-fixbar-top{display:none;font-size:40px}body .layui-util-face{border:none;background:0 0}body .layui-util-face .layui-layer-content{padding:0;background-color:#fff;color:#666;box-shadow:none}.layui-util-face .layui-layer-TipsG{display:none}.layui-util-face ul{position:relative;width:372px;padding:10px;border:1px solid #D9D9D9;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.2)}.layui-util-face ul li{cursor:pointer;float:left;border:1px solid #e8e8e8;height:22px;width:26px;overflow:hidden;margin:-1px 0 0 -1px;padding:4px 2px;text-align:center}.layui-util-face ul li:hover{position:relative;z-index:2;border:1px solid #eb7350;background:#fff9ec}.layui-code{position:relative;margin:10px 0;padding:15px;line-height:20px;border:1px solid #ddd;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New;font-size:12px}.layui-rate,.layui-rate *{display:inline-block;vertical-align:middle}.layui-rate{padding:10px 5px 10px 0;font-size:0}.layui-rate li i.layui-icon{font-size:20px;color:#FFB800;margin-right:5px;transition:all .3s;-webkit-transition:all .3s}.layui-rate li i:hover{cursor:pointer;transform:scale(1.12);-webkit-transform:scale(1.12)}.layui-rate[readonly] li i:hover{cursor:default;transform:scale(1)}.layui-colorpicker{width:26px;height:26px;border:1px solid #e6e6e6;padding:5px;border-radius:2px;line-height:24px;display:inline-block;cursor:pointer;transition:all .3s;-webkit-transition:all .3s}.layui-colorpicker:hover{border-color:#d2d2d2}.layui-colorpicker.layui-colorpicker-lg{width:34px;height:34px;line-height:32px}.layui-colorpicker.layui-colorpicker-sm{width:24px;height:24px;line-height:22px}.layui-colorpicker.layui-colorpicker-xs{width:22px;height:22px;line-height:20px}.layui-colorpicker-trigger-bgcolor{display:block;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);border-radius:2px}.layui-colorpicker-trigger-span{display:block;height:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.15);border-radius:2px;text-align:center}.layui-colorpicker-trigger-i{display:inline-block;color:#FFF;font-size:12px}.layui-colorpicker-trigger-i.layui-icon-close{color:#999}.layui-colorpicker-main{position:absolute;z-index:66666666;width:280px;padding:7px;background:#FFF;border:1px solid #d2d2d2;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12)}.layui-colorpicker-main-wrapper{height:180px;position:relative}.layui-colorpicker-basis{width:260px;height:100%;position:relative}.layui-colorpicker-basis-white{width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(90deg,#FFF,hsla(0,0%,100%,0))}.layui-colorpicker-basis-black{width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(0deg,#000,transparent)}.layui-colorpicker-basis-cursor{width:10px;height:10px;border:1px solid #FFF;border-radius:50%;position:absolute;top:-3px;right:-3px;cursor:pointer}.layui-colorpicker-side{position:absolute;top:0;right:0;width:12px;height:100%;background:linear-gradient(red,#FF0,#0F0,#0FF,#00F,#F0F,red)}.layui-colorpicker-side-slider{width:100%;height:5px;box-shadow:0 0 1px #888;box-sizing:border-box;background:#FFF;border-radius:1px;border:1px solid #f0f0f0;cursor:pointer;position:absolute;left:0}.layui-colorpicker-main-alpha{display:none;height:12px;margin-top:7px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.layui-colorpicker-alpha-bgcolor{height:100%;position:relative}.layui-colorpicker-alpha-slider{width:5px;height:100%;box-shadow:0 0 1px #888;box-sizing:border-box;background:#FFF;border-radius:1px;border:1px solid #f0f0f0;cursor:pointer;position:absolute;top:0}.layui-colorpicker-main-pre{padding-top:7px;font-size:0}.layui-colorpicker-pre{width:20px;height:20px;border-radius:2px;display:inline-block;margin-left:6px;margin-bottom: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==)}.layui-colorpicker-pre.layui-this{box-shadow:0 0 3px 2px rgba(0,0,0,.15)}.layui-colorpicker-pre>div{height:100%;border-radius:2px}.layui-colorpicker-main-input{text-align:right;padding-top:7px}.layui-colorpicker-main-input .layui-btn-container .layui-btn{margin:0 0 0 10px}.layui-colorpicker-main-input div.layui-inline{float:left;margin-right:10px;font-size:14px}.layui-colorpicker-main-input input.layui-input{width:150px;height:30px;color:#666}.layui-slider{height:4px;background:#e2e2e2;border-radius:3px;position:relative;cursor:pointer}.layui-slider-bar{border-radius:3px;position:absolute;height:100%}.layui-slider-step{position:absolute;top:0;width:4px;height:4px;border-radius:50%;background:#FFF;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.layui-slider-wrap{width:36px;height:36px;position:absolute;top:-16px;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10;text-align:center}.layui-slider-wrap-btn{width:12px;height:12px;border-radius:50%;background:#FFF;display:inline-block;vertical-align:middle;cursor:pointer;transition:.3s}.layui-slider-wrap:after{content:"";height:100%;display:inline-block;vertical-align:middle}.layui-slider-wrap-btn.layui-slider-hover,.layui-slider-wrap-btn:hover{transform:scale(1.2)}.layui-slider-wrap-btn.layui-disabled:hover{transform:scale(1)!important}.layui-slider-tips{position:absolute;top:-42px;z-index:66666666;white-space:nowrap;display:none;-webkit-transform:translateX(-50%);transform:translateX(-50%);color:#FFF;background:#000;border-radius:3px;height:25px;line-height:25px;padding:0 10px}.layui-slider-tips:after{content:'';position:absolute;bottom:-12px;left:50%;margin-left:-6px;width:0;height:0;border-width:6px;border-style:solid;border-color:#000 transparent transparent}.layui-slider-input{width:70px;height:32px;border:1px solid #e6e6e6;border-radius:3px;font-size:16px;line-height:32px;position:absolute;right:0;top:-15px}.layui-slider-input-btn{display:none;position:absolute;top:0;right:0;width:20px;height:100%;border-left:1px solid #d2d2d2}.layui-slider-input-btn i{cursor:pointer;position:absolute;right:0;bottom:0;width:20px;height:50%;font-size:12px;line-height:16px;text-align:center;color:#999}.layui-slider-input-btn i:first-child{top:0;border-bottom:1px solid #d2d2d2}.layui-slider-input-txt{height:100%;font-size:14px}.layui-slider-input-txt input{height:100%;border:none}.layui-slider-input-btn i:hover{color:#009688}.layui-slider-vertical{width:4px;margin-left:34px}.layui-slider-vertical .layui-slider-bar{width:4px}.layui-slider-vertical .layui-slider-step{top:auto;left:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.layui-slider-vertical .layui-slider-wrap{top:auto;left:-16px;-webkit-transform:translateY(50%);transform:translateY(50%)}.layui-slider-vertical .layui-slider-tips{top:auto;left:2px}@media \0screen{.layui-slider-wrap-btn{margin-left:-20px}.layui-slider-vertical .layui-slider-wrap-btn{margin-left:0;margin-bottom:-20px}.layui-slider-vertical .layui-slider-tips{margin-left:-8px}.layui-slider>span{margin-left:8px}}.layui-tree{line-height:22px}.layui-tree .layui-form-checkbox{margin:0!important}.layui-tree-set{width:100%;position:relative}.layui-tree-pack{display:none;padding-left:20px;position:relative}.layui-tree-iconClick,.layui-tree-main{display:inline-block;vertical-align:middle}.layui-tree-line .layui-tree-pack{padding-left:27px}.layui-tree-line .layui-tree-set .layui-tree-set:after{content:'';position:absolute;top:14px;left:-9px;width:17px;height:0;border-top:1px dotted #c0c4cc}.layui-tree-entry{position:relative;padding:3px 0;height:20px;white-space:nowrap}.layui-tree-entry:hover{background-color:#eee}.layui-tree-line .layui-tree-entry:hover{background-color:rgba(0,0,0,0)}.layui-tree-line .layui-tree-entry:hover .layui-tree-txt{color:#999;text-decoration:underline;transition:.3s}.layui-tree-main{cursor:pointer;padding-right:10px}.layui-tree-line .layui-tree-set:before{content:'';position:absolute;top:0;left:-9px;width:0;height:100%;border-left:1px dotted #c0c4cc}.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before{height:13px}.layui-tree-line .layui-tree-set.layui-tree-setHide:before{height:0}.layui-tree-iconClick{position:relative;height:20px;line-height:20px;margin:0 10px;color:#c0c4cc}.layui-tree-icon{height:12px;line-height:12px;width:12px;text-align:center;border:1px solid #c0c4cc}.layui-tree-iconClick .layui-icon{font-size:18px}.layui-tree-icon .layui-icon{font-size:12px;color:#666}.layui-tree-iconArrow{padding:0 5px}.layui-tree-iconArrow:after{content:'';position:absolute;left:4px;top:3px;z-index:100;width:0;height:0;border-width:5px;border-style:solid;border-color:transparent transparent transparent #c0c4cc;transition:.5s}.layui-tree-btnGroup,.layui-tree-editInput{position:relative;vertical-align:middle;display:inline-block}.layui-tree-spread>.layui-tree-entry>.layui-tree-iconClick>.layui-tree-iconArrow:after{transform:rotate(90deg) translate(3px,4px)}.layui-tree-txt{display:inline-block;vertical-align:middle;color:#555}.layui-tree-search{margin-bottom:15px;color:#666}.layui-tree-btnGroup .layui-icon{display:inline-block;vertical-align:middle;padding:0 2px;cursor:pointer}.layui-tree-btnGroup .layui-icon:hover{color:#999;transition:.3s}.layui-tree-entry:hover .layui-tree-btnGroup{visibility:visible}.layui-tree-editInput{height:20px;line-height:20px;padding:0 3px;border:none;background-color:rgba(0,0,0,.05)}.layui-tree-emptyText{text-align:center;color:#999}.layui-anim{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-anim.layui-icon{display:inline-block}.layui-anim-loop{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.layui-trans,.layui-trans a{transition:all .3s;-webkit-transition:all .3s}@-webkit-keyframes layui-rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@keyframes layui-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.layui-anim-rotate{-webkit-animation-name:layui-rotate;animation-name:layui-rotate;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes layui-up{from{-webkit-transform:translate3d(0,100%,0);opacity:.3}to{-webkit-transform:translate3d(0,0,0);opacity:1}}@keyframes layui-up{from{transform:translate3d(0,100%,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}.layui-anim-up{-webkit-animation-name:layui-up;animation-name:layui-up}@-webkit-keyframes layui-upbit{from{-webkit-transform:translate3d(0,30px,0);opacity:.3}to{-webkit-transform:translate3d(0,0,0);opacity:1}}@keyframes layui-upbit{from{transform:translate3d(0,30px,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}.layui-anim-upbit{-webkit-animation-name:layui-upbit;animation-name:layui-upbit}@-webkit-keyframes layui-scale{0%{opacity:.3;-webkit-transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1)}}@keyframes layui-scale{0%{opacity:.3;-ms-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-ms-transform:scale(1);transform:scale(1)}}.layui-anim-scale{-webkit-animation-name:layui-scale;animation-name:layui-scale}@-webkit-keyframes layui-scale-spring{0%{opacity:.5;-webkit-transform:scale(.5)}80%{opacity:.8;-webkit-transform:scale(1.1)}100%{opacity:1;-webkit-transform:scale(1)}}@keyframes layui-scale-spring{0%{opacity:.5;transform:scale(.5)}80%{opacity:.8;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.layui-anim-scaleSpring{-webkit-animation-name:layui-scale-spring;animation-name:layui-scale-spring}@-webkit-keyframes layui-fadein{0%{opacity:0}100%{opacity:1}}@keyframes layui-fadein{0%{opacity:0}100%{opacity:1}}.layui-anim-fadein{-webkit-animation-name:layui-fadein;animation-name:layui-fadein}@-webkit-keyframes layui-fadeout{0%{opacity:1}100%{opacity:0}}@keyframes layui-fadeout{0%{opacity:1}100%{opacity:0}}.layui-anim-fadeout{-webkit-animation-name:layui-fadeout;animation-name:layui-fadeout} \ No newline at end of file +/* 整体样式重置，去除一些默认样式 */ +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标签点击和悬停时的默认轮廓 */ +a:active,a:hover{ + outline:0; +} +/* 图片无边框 */ +img{ + border:none; +} +/* 列表项无默认样式 */ +li{ + list-style:none; +} +/* 表格边框合并等样式设置 */ +table{ + border-collapse:collapse; + border-spacing:0; +} +/* h4到h6标签字号保持默认大小 */ +h4,h5,h6{ + font-size:100%; +} +/* 表单元素继承字体相关样式并去除默认轮廓 */ +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; + white-space:-pre-wrap; + white-space:-o-pre-wrap; + word-wrap:break-word; +} +/* 页面主体文字样式 */ +body{ + line-height:24px; + font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; +} +/* 水平分割线样式 */ +hr{ + height:1px; + margin:10px 0; + border:0; + clear:both; +} +/* 链接默认颜色及去除下划线 */ +a{ + color:#333; + text-decoration:none; +} +/* 链接悬停时颜色变化 */ +a:hover{ + color:#777; +} +/* 让cite标签内文字样式正常，模拟可点击效果 */ +a cite{ + font-style:normal; + *cursor:pointer; +} +/* 使设置了该类的元素及其内部元素盒模型为 border-box */ +.layui-border-box,.layui-border-box *{ + box-sizing:border-box; +} +/* 使设置了该类的元素及其内部元素盒模型为 content-box */ +.layui-box,.layui-box *{ + box-sizing:content-box; +} +/* 清除浮动并添加 zoom 属性兼容低版本IE */ +.layui-clear{ + clear:both; + *zoom:1; +} +.layui-clear:after{ + content:'\20'; + clear:both; + *zoom:1; + display:block; + height:0; +} +/* 让内联元素在低版本IE下能正常显示及添加 zoom 属性兼容 */ +.layui-inline{ + *display:inline; + *zoom:1; +} +/* 用于创建三角形的通用样式，初始为透明边框 */ +.layui-edge{ + display:inline-block; + width:0; + height:0; + border-width:6px; + border-style:dashed; + border-color:transparent; +} +/* 顶部三角形样式，设置底部边框颜色和样式来呈现 */ +.layui-edge-top{ + top:-4px; + border-bottom-color:#999; + border-bottom-style:solid; +} +/* 右侧三角形样式，设置左侧边框颜色和样式来呈现 */ +.layui-edge-right{ + border-left-color:#999; + border-left-style:solid; +} +/* 底部三角形样式，设置顶部边框颜色和样式来呈现 */ +.layui-edge-bottom{ + top:2px; + border-top-color:#999; + border-top-style:solid; +} +/* 左侧三角形样式，设置右侧边框颜色和样式来呈现 */ +.layui-edge-left{ + border-right-color:#999; + border-right-style:solid; +} +/* 禁用状态的通用样式，颜色变灰且鼠标指针变为不允许状态 */ +.layui-disabled,.layui-disabled:hover{ + color:#9a9a9a!important; + cursor:not-allowed!important; +} +/* 圆形样式，设置边框圆角为100% */ +.layui-circle{ + border-radius:100%; +} +/* 显示元素 */ +.layui-show{ + display:block!important; +} +/* 隐藏元素 */ +.layui-hide{ + display:none!important; +} +/* 定义图标字体，设置不同格式的字体文件路径 */ +@font-face{ + font-family:layui-icon; + src:url(../font/iconfont.eot?v=256); + src:url(../font/iconfont.eot?v=256#iefix) format('embedded-opentype'), + url(../font/iconfont.woff2?v=256) format('woff2'), + url(../font/iconfont.woff?v=256) format('woff'), + url(../font/iconfont.ttf?v=256) format('truetype'), + url(../font/iconfont.svg?v=256#layui-icon) format('svg'); +} +/* 图标样式设置，指定字体、字号、样式及抗锯齿等 */ +.layui-icon{ + font-family:layui-icon!important; + font-size:16px; + font-style:normal; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; +} +/* 具体每个图标的内容定义，通过:before伪元素设置对应图标编码 */ +.layui-icon-reply-fill:before{ + content:"\e611"; +} +.layui-icon-set-fill:before{ + content:"\e614"; +} +/* 此处省略众多单个图标的样式定义代码 */ +/* 主体内容区域宽度及水平居中 */ +.layui-main{ + width:1140px; + margin:0 auto; +} +/* 头部区域样式，设置层级和高度等 */ +.layui-header{ + z-index:1000; + height:60px; +} +/* 头部链接悬停时的过渡效果 */ +.layui-header a:hover{ + transition:all.5s; + -webkit-transition:all.5s; +} +/* 侧边栏固定定位及基本样式 */ +.layui-side{ + position:fixed; + left:0; + top:0; + bottom:0; + z-index:999; + width:200px; + overflow-x:hidden; +} +/* 侧边栏滚动区域样式 */ +.layui-side-scroll{ + position:relative; + width:220px; + height:100%; + overflow-x:hidden; +} +/* 主体内容区域定位及滚动等样式 */ +.layui-body{ + position:absolute; + left:200px; + right:0; + top:0; + bottom:0; + z-index:998; + width:auto; + overflow-y:auto; + box-sizing:border-box; +} +/* 布局主体的整体样式，处理溢出隐藏 */ +.layui-layout-body{ + overflow:hidden; +} +/* 管理后台布局下头部背景色设置 */ +.layui-layout-admin.layui-header{ + background-color:#23262E; +} +/* 管理后台布局下侧边栏的位置及宽度等样式调整 */ +.layui-layout-admin.layui-side{ + top:60px; + width:200px; + overflow-x:hidden; +} +/* 管理后台布局下主体内容区域的定位及高度设置 */ +.layui-layout-admin.layui-body{ + position:fixed; + top:60px; + bottom:44px; +} +/* 管理后台布局下主体内容宽度自适应及左右边距设置 */ +.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区域样式 */ +.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-left{ + position:absolute!important; + left:200px; + top:0; +} +/* 右侧布局相关样式 */ +.layui-layout-right{ + position:absolute!important; + right:0; + top:0; +} +/* 容器通用样式，相对定位及内边距设置 */ +.layui-container{ + position:relative; + margin:0 auto; + padding:0 15px; + box-sizing:border-box; +} +/* 流体容器样式，相对定位及内边距设置 */ +.layui-fluid{ + position:relative; + margin:0 auto; + padding:0 15px; +} +/* 行样式，清除浮动相关设置 */ +.layui-row:after,.layui-row:before{ + content:''; + display:block; + clear:both; +} +/* 列通用样式，相对定位及盒模型设置 */ +.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; +} +/* 超小屏幕下的列宽度设置及左浮动 */ +.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; +} +.layui-col-xs1{ + width:8.33333333%; +} +/* 此处省略众多不同屏幕尺寸下各列宽度及偏移量等样式定义代码 */ +/* 按钮通用样式，设置基本外观、颜色、光标样式等 */ +.layui-btn{ + display:inline-block; + height:38px; + line-height:38px; + padding:0 18px; + background-color:#009688; + color:#fff; + white-space:nowrap; + text-align:center; + font-size:14px; + border:none; + border-radius:2px; + cursor:pointer; +} +/* 按钮悬停时透明度变化 */ +.layui-btn:hover{ + opacity:.8; + filter:alpha(opacity=80); + color:#fff; +} +/* 按钮按下时恢复透明度 */ +.layui-btn:active{ + opacity:1; + filter:alpha(opacity=100); +} +/* 按钮间距设置 */ +.layui-btn+.layui-btn{ + margin-left:10px; +} +/* 按钮容器样式，字体大小设为0方便排版 */ +.layui-btn-container{ + font-size:0; +} +/* 按钮容器内按钮的间距等样式 */ +.layui-btn-container.layui-btn{ + margin-right:10px; + margin-bottom:10px; +} +/* 按钮容器内相邻按钮的间距调整 */ +.layui-btn-container.layui-btn+.layui-btn{ + margin-left:0; +} +/* 表格内按钮容器中按钮的底部间距调整 */ +.layui-table.layui-btn-container.layui-btn{ + margin-bottom:9px; +} +/* 圆角较大的按钮样式 */ +.layui-btn-radius{ + border-radius:100px; +} +/* 按钮内图标样式及间距设置 */ +.layui-btn.layui-icon{ + margin-right:3px; + font-size:18px; + vertical-align:bottom; + vertical-align:middle\9; +} +/* 不同类型按钮的特定样式，如基础按钮、主要按钮、警告按钮等 */ +.layui-btn-primary{ + border:1px solid #C9C9C9; + background-color:#fff; + color:#555; +} +.layui-btn-primary:hover{ + border-color:#009688; + color:#333; +} +/* 此处省略众多其他按钮类型的样式定义代码 */ + +/* 输入框、选择框、文本域通用样式，设置高度、边框等 */ +.layui-input,.layui-select,.layui-textarea{ + height:38px; + line-height:1.3; + line-height:38px\9; + border-width:1px; + border-style:solid; + background-color:#fff; + border-radius:2px; +} +/* 输入框等的占位符样式 */ +.layui-input::-webkit-input-placeholder,.layui-select::-webkit-input-placeholder,.layui-textarea::-webkit-input-placeholder{ + line-height:1.3; +} +/* 输入框和文本域的宽度及内边距设置 */ +.layui-input,.layui-textarea{ + display:block; + width:100%; + padding-left:10px; +} +/* 输入框等鼠标悬停时边框颜色变化 */ +.layui-input:hover,.layui-textarea:hover{ + border-color:#D2D2D2!important; +} +/* 输入框等获得焦点时边框颜色变化 */ +.layui-input:focus,.layui-textarea:focus{ + border-color:#C9C9C9!important; +} +/* 文本域的最小高度、自动高度及垂直方向可调整设置 */ +.layui-textarea{ + min-height:100px; + height:auto; + line-height:20px; + padding:6px 10px; + resize:vertical; +} +/* 选择框的内边距设置 */ +.layui-select{ + padding:0 10px; +} \ No newline at end of file diff --git a/web/css/layui.mobile.css b/web/css/layui.mobile.css index 7835392..f8bb7fe 100644 --- a/web/css/layui.mobile.css +++ b/web/css/layui.mobile.css @@ -1,2 +1,518 @@ -/** layui-v2.5.6 MIT License By https://www.layui.com */ - blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,td,textarea,th,ul{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{font:12px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,Arial,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0)}a{text-decoration:none;background:0 0}a:active,a:hover{outline:0}table{border-collapse:collapse;border-spacing:0}li{list-style:none}b,strong{font-weight:700}h1,h2,h3,h4,h5,h6{font-weight:500}address,cite,dfn,em,var{font-style:normal}dfn{font-style:italic}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}img{border:0;vertical-align:bottom}.layui-inline,input,label{vertical-align:middle}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:0}button,select{text-transform:none}select{-webkit-appearance:none;border:none}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}@font-face{font-family:layui-icon;src:url(../font/iconfont.eot?v=1.0.7);src:url(../font/iconfont.eot?v=1.0.7#iefix) format('embedded-opentype'),url(../font/iconfont.woff?v=1.0.7) format('woff'),url(../font/iconfont.ttf?v=1.0.7) format('truetype'),url(../font/iconfont.svg?v=1.0.7#iconfont) format('svg')}.layui-icon{font-family:layui-icon!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-box,.layui-box *{-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.layui-border-box,.layui-border-box *{-webkit-box-sizing:border-box!important;-moz-box-sizing:border-box!important;box-sizing:border-box!important}.layui-inline{position:relative;display:inline-block;*display:inline;*zoom:1}.layui-edge,.layui-upload-iframe{position:absolute;width:0;height:0}.layui-edge{border-style:dashed;border-color:transparent;overflow:hidden}.layui-elip{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.layui-disabled,.layui-disabled:active{background-color:#d2d2d2!important;color:#fff!important;cursor:not-allowed!important}.layui-circle{border-radius:100%}.layui-show{display:block!important}.layui-hide{display:none!important}.layui-upload-iframe{border:0;visibility:hidden}.layui-upload-enter{border:1px solid #009E94;background-color:#009E94;color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1)}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}@-webkit-keyframes layui-m-anim-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes layui-m-anim-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.layui-m-anim-left{-webkit-animation-name:layui-m-anim-left;animation-name:layui-m-anim-left}@-webkit-keyframes layui-m-anim-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes layui-m-anim-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.layui-m-anim-right{-webkit-animation-name:layui-m-anim-right;animation-name:layui-m-anim-right}@-webkit-keyframes layui-m-anim-lout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes layui-m-anim-lout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.layui-m-anim-lout{-webkit-animation-name:layui-m-anim-lout;animation-name:layui-m-anim-lout}@-webkit-keyframes layui-m-anim-rout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes layui-m-anim-rout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.layui-m-anim-rout{-webkit-animation-name:layui-m-anim-rout;animation-name:layui-m-anim-rout}.layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} \ No newline at end of file +/** + * layui-v2.5.6 MIT License By https://www.layui.com + * 这是Layui框架版本2.5.6的相关代码声明，表明采用MIT许可协议，版权归属于https://www.layui.com网站 + */ + +/* 全局元素样式重置 */ +blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, td, textarea, th, ul { + margin: 0; + padding: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /* 清除元素默认内外边距，移动端点击时去除高亮显示效果 */ +} + +html { + font: 12px 'Helvetica Neue', 'PingFang SC', STHeitiSC-Light, Helvetica, Arial, sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + /* 设置html的字体族、字号，并进行文本大小适配调整 */ +} + +a, button, input { + -webkit-tap-highlight-color: rgba(255, 0, 0, 0); + /* 去除点击时的默认高亮效果 */ +} + +a { + text-decoration: none; + background: 0 0; + /* 去除链接默认下划线和背景 */ +} + +a:active, a:hover { + outline: 0; + /* 去除链接激活、悬停时的轮廓线 */ +} + +table { + border-collapse: collapse; + border-spacing: 0; + /* 让表格边框合并，单元格间距设为0 */ +} + +li { + list-style: none; + /* 去除列表默认的项目符号样式 */ +} + +b, strong { + font-weight: 700; + /* 设置加粗文本元素的字体粗细 */ +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 500; + /* 设置各级标题的字体粗细 */ +} + +address, cite, dfn, em, var { + font-style: normal; + /* 规范这些元素的字体样式 */ +} + +dfn { + font-style: italic; + /* 特别设置dfn元素为斜体样式 */ +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + /* 设置上下标元素的字号、行高、相对位置和垂直对齐方式 */ +} + +img { + border: 0; + vertical-align: bottom; + /* 去除图片边框，设置垂直对齐方式为底部对齐 */ +} + +.layui-inline, input, label { + vertical-align: middle; + /* 让相关元素垂直居中对齐 */ +} + +/* 表单元素相关样式 */ +button, input, optgroup, select, textarea { + color: inherit; + font: inherit; + margin: 0; + outline: 0; + /* 表单元素继承颜色、字体，去除默认外边距和轮廓 */ +} + +button, select { + text-transform: none; + /* 保持表单元素文本原始大小写状态 */ +} + +select { + -webkit-appearance: none; + border: none; + /* 去除select下拉框默认样式和边框 */ +} + +input { + line-height: normal; + /* 保证输入框文本行高正常 */ +} + +input[type=checkbox], input[type=radio] { + box-sizing: border-box; + padding: 0; + /* 针对复选框、单选框设置盒模型和内边距 */ +} + +input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { + height: auto; + /* 控制数字输入框的增减按钮样式 */ +} + +input[type=search] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + /* 设置搜索输入框的外观和盒模型 */ +} + +input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { + -webkit-appearance: none; + /* 去除搜索输入框相关按钮的默认样式 */ +} + +/* 字体图标相关样式 */ +@font-face { + font-family: layui-icon; + src: url(../font/iconfont.eot?v=1.0.7); + src: url(../font/iconfont.eot?v=1.0.7#iefix) format('embedded-opentype'), + url(../font/iconfont.woff?v=1.0.7) format('woff'), + url(../font/iconfont.ttf?v=1.0.7) format('truetype'), + url(../font/iconfont.svg?v=1.0.7#iconfont) format('svg'); + /* 定义layui-icon字体图标，指定不同格式的字体文件路径 */ +} + +.layui-icon { + font-family: layui-icon!important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* 设置使用layui-icon字体图标的元素的字号、样式等属性 */ +} + +/* 盒模型及布局相关样式 */ +.layui-box,.layui-box * { + -webkit-box-sizing: content-box!important; + -moz-box-sizing: content-box!important; + box-sizing: content-box!important; + /* 设置类及其后代元素采用内容盒模型 */ +} + +.layui-border-box,.layui-border-box * { + -webkit-box-sizing: border-box!important; + -moz-box-sizing: border-box!important; + box-sizing: border-box!important; + /* 设置类及其后代元素采用边框盒模型 */ +} + +.layui-inline { + position: relative; + display: inline-block; + *display: inline; + *zoom: 1; + /* 让元素以行内块方式显示（解决部分浏览器兼容问题） */ +} + +.layui-edge,.layui-upload-iframe { + position: absolute; + width: 0; + height: 0; + /* 用于一些需要绝对定位且宽高为0的元素（可能用于绘制边界等用途） */ +} + +.layui-elip { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + /* 文本溢出时显示省略号的样式设置 */ +} + +.layui-unselect { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + /* 禁止元素被用户选择，在不同浏览器下设置相应属性 */ +} + +.layui-disabled,.layui-disabled:active { + background-color: #d2d2d2!important; + color: #fff!important; + cursor: not-allowed!important; + /* 设置禁用状态元素的背景色、颜色和鼠标指针样式 */ +} + +.layui-circle { + border-radius: 100%; + /* 让元素呈现圆形样式 */ +} + +.layui-show { + display: block!important; + /* 用于显示元素的类 */ +} + +.layui-hide { + display: none!important; + /* 用于隐藏元素的类 */ +} + +.layui-upload-iframe { + border: 0; + visibility: hidden; + /* 可能用于上传相关的隐藏iframe的样式设置 */ +} + +.layui-upload-enter { + border: 1px solid #009E94; + background-color: #009E94; + color: #fff; + -webkit-transform: scale(1.1); + transform: scale(1.1); + /* 可能用于上传相关的特定元素样式（比如鼠标悬停等交互态） */ +} + +/* 动画相关样式 */ +@-webkit-keyframes layui-m-anim-scale { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes layui-m-anim-scale { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.layui-m-anim-scale { + animation-name: layui-m-anim-scale; + -webkit-animation-name: layui-m-anim-scale; + /* 定义元素淡入并放大显示的动画效果类 */ +} + +@-webkit-keyframes layui-m-anim-up { + 0% { + opacity: 0; + -webkit-transform: translateY(800px); + transform: translateY(800px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes layui-m-anim-up { + 0% { + opacity: 0; + -webkit-transform: translateY(800px); + transform: translateY(800px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.layui-m-anim-up { + -webkit-animation-name: layui-m-anim-up; + animation-name: layui-m-anim-up; + /* 定义元素从下方移入的动画效果类 */ +} + +@-webkit-keyframes layui-m-anim-left { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes layui-m-anim-left { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.layui-m-anim-left { + -webkit-animation-name: layui-m-anim-left; + animation-name: layui-m-anim-left; + /* 定义元素从左侧移入的动画效果类 */ +} + +@-webkit-keyframes layui-m-anim-right { + 0% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes layui-m-anim-right { + 0% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.layui-m-anim-right { + -webkit-animation-name: layui-m-anim-right; + animation-name: layui-m-anim-right; + /* 定义元素从右侧移入的动画效果类 */ +} + +@-webkit-keyframes layui-m-anim-lout { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} + +@keyframes layui-m-anim-lout { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } +} + +.layui-m-anim-lout { + -webkit-animation-name: layui-m-anim-lout; + animation-name: layui-m-anim-lout; + /* 定义元素向左侧移出的动画效果类 */ +} + +@-webkit-keyframes layui-m-anim-rout { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} + +@keyframes layui-m-anim-rout { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } +} + +.layui-m-anim-rout { + -webkit-animation-name: layui-m-anim-rout; + animation-name: layui-m-anim-rout; + /* 定义元素向右侧移出的动画效果类 */ +} + +/* 弹层（Layer）相关样式 */ +.layui-m-layer { + position: relative; + z-index: 19891014; + /* 弹层的外层容器，设置相对定位和较高的z-index值 */ +} + +.layui-m-layer * { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + /* 弹层内部元素采用内容盒模型 */ +} + +.layui-m-layermain,.layui-m-layershade { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + /* 弹层主体容器和遮罩层采用固定定位铺满整个页面 */ +} + +.layui-m-layershade { + background-color: rgba(0, 0, 0,.7); + pointer-events: auto; + /* 遮罩层设置背景颜色及透明度，允许触发事件 */ +} + +.layui-m-layermain { + display: table; + font-family: Helvetica, arial, sans-serif; + pointer-events: none; + /* 弹层主体容器以表格形式布局，设置字体族，禁止触发事件 */ +} + +.layui-m-layermain.layui-m-layersection { + display: table-cell; + vertical-align: middle; + text-align: center; + /* 用于让弹层内容在垂直方向居中显示 */ +} + +.layui-m-layerchild { + position: relative; + display: inline-block; + text-align: left; + background-color: #fff; + font-size: 14px; + border-radius: 5px; + box-shadow: 0 0 8px rgba(0, 0, 0,.1); + pointer-events: auto; + -webkit-overflow-scrolling: touch; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration:.2s; + animation-duration:.2s; + /* 弹层子元素的通用样式，如布局、背景、边框、阴影等，以及动画相关设置 */ +} + +.layui-m-layer0.layui-m-layerchild { + width: 90%; + max-width: 640px; + /* 特定类型（layui-m-layer0）弹层子元素的宽度设置 */ +} + +.layui-m-layer1.layui-m-layerchild { + border: none; + border-radius: 0; + /* 另一种类型（layui-m-layer1）弹层子元素的边框等样式设置 */ +} + +.layui-m-layer2.layui-m-layerchild { + width: auto; + max-width: 260px; + min-width: 40px; + border: none; + background: 0 0; + box-shadow: none; + color: #fff; + /* 又一种类型（layui-m-layer2）弹层子元素的样式设置，常用于加载等提示弹层 */ +} + +.layui-m-layerchild h3 { + padding: 0 10px; + height: 60px; + line-height: 60px; + font-size: 16px; + font-weight: 400; + border-radius: 5px 5px 0 0; + text-align: center; + /* 弹层标题部分的样式设置，如内边距、高度、行高、字号等 */ +} + +.layui-m-layerbtn span,.layui-m-layerchild h3 { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + /* 弹层按钮文本和标题文本溢出时的处理样式 */ +} + +.layui-m-layercont { + padding: 50px 30px; + line-height: 22px; + text \ No newline at end of file diff --git a/web/css/login.css b/web/css/login.css index eff01b5..c2f9907 100644 --- a/web/css/login.css +++ b/web/css/login.css @@ -1,11 +1,19 @@ -@charset "utf-8"; +/* + * @charset "utf-8"; + * 声明该CSS文件使用的字符编码为utf-8，确保能正确解析文件中的各种字符，包括中文等特殊字符。 + */ body { background: url("../images/bg.jpg"); + /* 设置页面背景图片的路径，这里图片位于相对于当前CSS文件的images文件夹下，文件名为bg.jpg */ background-position: center; + /* 让背景图片在水平和垂直方向都居中显示 */ background-size: cover; + /* 使背景图片自适应铺满整个页面可视区域，可能会根据页面尺寸拉伸或缩放图片以完全覆盖 */ padding-bottom: 0px; + /* 将body元素底部的内边距设置为0像素，控制页面底部空白区域大小等布局效果 */ } + .layadmin-user-login-icon { position: absolute; left: 1px; @@ -14,7 +22,22 @@ body { line-height: 36px; text-align: center; color: #d2d2d2; + /* + * 以下是对该类选择器样式的详细解释： + * position: absolute; 将元素设置为绝对定位，它会相对于最近的已定位祖先元素（如果没有则相对于html元素）来确定位置。 + * left: 1px; 元素距离左侧边界1像素的距离。 + * top: 1px; 元素距离顶部边界1像素的距离。 + * width: 38px; 设置元素的宽度为38像素。 + * line-height: 36px; 定义行高为36像素，影响文本在垂直方向上的排版。 + * text-align: center; 让元素内部的文本在水平方向居中对齐。 + * color: #d2d2d2; 设置文本的颜色为指定的灰色（十六进制颜色值表示）。 + */ } -.login-main .layui-input { + +.login-main.layui-input { padding-left: 38px; + /* + * 选择类名为login-main下的所有拥有layui-input类的元素，给它们设置左侧内边距为38像素， + * 可能是为了给这些输入框等元素预留一定的空间，比如放置图标之类的元素。 + */ } \ No newline at end of file diff --git a/web/css/style.css b/web/css/style.css index 5744426..38ae1dd 100644 --- a/web/css/style.css +++ b/web/css/style.css @@ -1,6 +1,10 @@ -@charset "utf-8"; +/* + * @charset "utf-8"; + * 声明该CSS文件使用的字符编码为utf-8，确保文件中的各种字符（如中文等）能被正确解析和显示。 + */ -.layui-layout-admin .my-header { +/* 针对layui布局下的自定义头部样式 */ +.layui-layout-admin.my-header { position: fixed; top: 0; left: 0; @@ -8,9 +12,19 @@ height: 60px; background: #393D49; z-index: 2; -} - -.layui-layout-admin .my-header .my-header-logo { + /* + * 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; @@ -19,31 +33,60 @@ line-height: 30px; padding: 15px; vertical-align: top; -} - -.layui-layout-admin .my-header img.my-header-logo { + /* + * 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 { +.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 { @@ -53,22 +96,40 @@ 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; +.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; @@ -76,21 +137,35 @@ 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 { +.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 { +.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; @@ -99,10 +174,20 @@ 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 { @@ -112,19 +197,30 @@ 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 { +.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 { +.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 { +.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 { @@ -132,447 +228,94 @@ height: 100%; border: none; outline: none; + /* + * 针对主体内容区域内的iframe元素（通常用于嵌入其他页面等），设置宽度和高度都为100%，使其占满父元素空间，并且去除边框和默认的轮廓线，使其外观更简洁，无缝融入页面布局。 + */ } -.layui-layout-admin .my-footer { +/* 页面底部样式 */ +.layui-layout-admin.my-footer { height: 40px; padding: 2px 0; + /* 设置底部元素的高度为40像素，并在垂直方向上添加2像素的内边距（上下内边距），用于放置底部相关的版权信息、提示文字等内容 */ } -.layui-layout-admin .my-footer p { +.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 */ +/* 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 { +.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 { +.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 { +.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 */ - - +/* 登录页面相关样式 */ .login-box { position: fixed; top: 0; bottom: 0; left: 0; - right: 0; - margin: auto; - width: 320px; - height: 241px; - max-height: 300px; -} - -.login-body .login-box h3 { - color: #444; - font-size: 22px; - font-weight: 100; - text-align: center; -} - -.login-box .layui-input[type='number'] { - display: inline-block; - width: 50%; - vertical-align: top; -} - -.login-box img { - display: inline-block; - width: 46%; - height: 38px; - border: none; - vertical-align: top; - cursor: pointer; - margin-left: 4%; -} - -.login-box button.btn-reset { - width: 95px; -} - -.login-box button.btn-submit { - width: 190px; -} - -.login-main { - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 350px; - margin: 0 auto; -} - -.login-main header { - - height: 35px; - line-height: 35px; - font-size: 30px; - font-weight: 100; - text-align: center; - padding-top: 58px; -} - -.login-main header, .login-main form, .login-main form .layui-input-inline { - margin-bottom: 15px; -} - -.login-main form .layui-input-inline, .login-main form .layui-input-inline input, .login-main form .layui-input-inline button { - width: 100%; -} - -.login-main form .login-btn { - margin-bottom: 5px; -} - -/* demo */ -.site-demo-button div { - margin: 20px 30px 10px; -} - -.site-demo-button .layui-btn { - margin: 0 7px 10px 0; -} - -/* check */ -input[type='checkbox'] { - vertical-align: middle; -} - -.my-checkbox { - -webkit-appearance: none; - position: relative; - width: 20px; - height: 20px; - background-color: #FFFFFF; - border: solid 2px #28B779; - border-radius: 2px; - background-clip: padding-box; - display: inline-block; - cursor: pointer; -} - -.my-checkbox:checked { - background-color: #28B779; - border: solid 0 #28B779; -} - -.my-checkbox:checked:before { - position: absolute; - display: inline-block; - right: 50%; - bottom: 50%; - -webkit-transform: translate(50%, 50%); - -ms-transform: translate(50%, 50%); - transform: translate(50%, 50%); - font-family: "Microsoft Yahei"; - content: "√"; - color: #FFFFFF; - font-size: 16px; - font-weight: 600; -} - -/* dblclick css */ -.dblclick-tab tr td { - height: 30px; - line-height: 30px; - padding: 0 6px; - border-radius: 2px; - cursor: pointer; -} - -.dblclick-tab tr td:hover { - color: black; - background: white; -} - -.dblclick-tab tr td i { - position: relative; - top: 2px; - display: inline-block; - margin-right: 5px; -} - -/* tips 404 */ -.my-page-box { - font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif; - text-align: center; - padding: 20px; - background-color: white; -} - -.my-page-box i { - font-size: 100px; -} - -.my-page-box h2, .my-page-box h3, .my-page-box h4, .my-page-box h5 { - font-size: 80px; -} - -.my-page-box p.msg { - color: #dce2ec; - font-size: 20px; - margin-top: 20px; -} - -.my-page-box p.text { - color: #666; - font-size: 16px; - margin-top: 20px; -} - -.my-page-box .my-btn-box { - margin-top: 20px; - margin-bottom: 20px; -} - -/* tree table */ -.my-tree-table-box .tree-table-tree-box { - width: 20%; - min-height: 200px; - display: inline-block; - vertical-align: top; - overflow-y: auto; - overflow-x: auto; -} - -.my-tree-table-box .tree-table-table-box { - display: inline-block; - vertical-align: top; - width: 79%; - margin-left: 1%; -} - -/* skin0 */ -html .skin-0 .dblclick-tips-box .layui-layer-content { - background-color: #009688; -} - -html .skin-0 .dblclick-tips-box i.layui-layer-TipsB { - border-right-color: #009688; -} - -/* skin1 */ -html .skin-1 .my-header .my-header-logo, -html .skin-1 .layui-nav .layui-nav-item a, -html .skin-1 .layui-nav .layui-nav-item a:hover { - color: #444; -} - -html .skin-1 .my-header, -html .skin-1 .layui-nav, -html .skin-1 .layui-nav-child { - background: white; -} - -html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a { - color: white; -} - -html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this, -html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a, -html .skin-1 .layui-nav-tree .layui-nav-item > a:hover, -html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a, -html .skin-1 .layui-tab-title li .layui-tab-close:hover, -html .skin-1 .dblclick-tips-box .layui-layer-content { - color: white !important; - background-color: #666 !important; -} - -html .skin-1 .dblclick-tips-box i.layui-layer-TipsB { - border-right-color: #666; -} - -html .skin-1 .layui-nav .layui-nav-itemed > a { - background: #444 !important; -} - -html .skin-1 .layui-nav .layui-nav-more { - border-color: #444 transparent transparent; -} - -html .skin-1 .layui-nav .layui-nav-mored { - border-color: transparent transparent #444; -} - -/* skin2 */ -html .skin-2 .my-header .my-header-logo, -html .skin-2 .layui-nav .layui-nav-item a, -html .skin-2 .layui-nav .layui-nav-item a:hover { - color: white; -} - -html .skin-2 .my-header, -html .skin-2 .layui-nav, -html .skin-2 .layui-nav-child { - background-color: #01AAED; -} - -html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a { - color: white; -} - -html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this, -html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a, -html .skin-2 .layui-nav-tree .layui-nav-item > a:hover, -html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a, -html .skin-2 .layui-tab-title li .layui-tab-close:hover, -html .skin-2 .dblclick-tips-box .layui-layer-content { - color: white !important; - background-color: #00C0F7 !important; -} - -html .skin-2 .dblclick-tips-box i.layui-layer-TipsB { - border-right-color: #00C0F7; -} - -html .skin-2 .layui-nav .layui-nav-itemed > a { - background-color: #1684af !important; -} - -/* skin0-2 */ -html .skin-2 .layui-nav .layui-nav-more, -html .skin-1 .layui-nav-tree .layui-nav-more, -html .skin-2 .layui-nav-tree .layui-nav-more { - border-color: white transparent transparent; -} - -html .skin-2 .layui-nav .layui-nav-mored, -html .skin-1 .layui-nav-itemed .layui-nav-more, -html .skin-2 .layui-nav-itemed .layui-nav-more { - border-color: transparent transparent white; -} - -/* tools */ -.fl { - float: left; -} - -.fr { - float: right; -} - -.none { - display: none; -} - -.block { - display: block; -} - -.tc { - text-align: center; -} - -.max-auto { - max-height: 450px; - overflow-y: auto; -} - -/* layui css cover */ -html body .layui-nav .layui-nav-bar { - opacity: 0 !important; - overflow: hidden !important; -} - -.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after { - background-color: transparent; -} - -.my-body .layui-tab-card > .layui-tab-title li { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.layui-layer-tips .layui-layer-content { - padding: 5px; -} - -.tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted black; - position: relative; - left: 12%; - top: -10px; -} - -.tooltip .tooltiptext { - width: 138px; - background-color: #dad5d545; - color: #ff4545; - text-align: center; - border-radius: 6px; - padding: 5px 0; - position: absolute; - z-index: 1; -} - -.page-active-li { - background-color: #00FF00; -} - -.page-li { - float: left; - border: 1px solid #e2e2e2; - display: inline-block; - vertical-align: middle; - padding: 0 15px; - height: 28px; - line-height: 28px; - margin: 0px 2px 5px -3px; - background-color: #fff; - color: #333; - font-size: 12px; - } - -.page-li:hover { - color: #009688; -} - - -/* media */ - - -@media screen and ( max-width: 450px) { - .my-header ul.my-header-user-nav li a.pay { - display: none; - } -} - + right:0; +} \ No newline at end of file diff --git a/web/error.jsp b/web/error.jsp index b89b3a7..413d43b 100644 --- a/web/error.jsp +++ b/web/error.jsp @@ -1,11 +1,19 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + + - + + + + + + + ERROR @@ -13,17 +21,20 @@ body{ margin:0;padding:0; font-family: PingFang SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; + /* 设置页面主体的外边距和内边距为0，定义字体族，优先使用苹方字体，其次是微软雅黑、文泉驿微米黑等无衬线字体 */ } a, button.submit { color:#6E7173; text-decoration:none; - -webkit-transition:all .1s ease-in; - -moz-transition:all .1s ease-in; - -o-transition:all .1s ease-in; - transition:all .1s ease-in; + -webkit-transition:all.1s ease-in; + -moz-transition:all.1s ease-in; + -o-transition:all.1s ease-in; + transition:all.1s ease-in; + /* 设置链接和特定按钮的文本颜色为灰色，去除下划线，并且定义了在不同浏览器下过渡效果的属性，当元素状态改变时（如鼠标悬停等）会在0.1秒内平滑过渡样式变化 */ } a:hover, a:active { color:#6E7173; + /* 当鼠标悬停或者激活（比如点击按住时）链接元素时，保持文本颜色为灰色 */ } .body404{ position: absolute; @@ -31,9 +42,11 @@ width: 100%; background:#fff; background-size: auto 100%; + /* 定义一个类名为body404的元素，设置其绝对定位，占满整个页面的高度和宽度，背景颜色为白色，背景图片尺寸自适应高度为100%（这里没看到背景图片相关设置，可能后续会添加或者有遗漏情况） */ } - .body-about .body404{ + .body-about.body404{ background:#fff; + /* 当父元素有body-about类时，其内部的body404元素背景颜色设置为白色，可能用于特定页面布局区分样式 */ } .site-name404 { margin: 0 auto; @@ -47,21 +60,25 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 60s infinite linear; + /* 定义一个类名为site-name404的元素，使其水平居中，文本居中对齐，设置字间距、字体大小、行高、字体粗细等样式属性，文本颜色通过渐变背景和裁剪、填充等设置来实现渐变文字效果，并且添加了一个名为hue的动画，持续60秒，无限循环，线性播放 */ } .site-name404 h1{ margin: 0 0 10px; font-size:50px; line-height:1.2; + /* 针对site-name404内部的h1元素设置外边距、字体大小和行高样式 */ } .title404 span{ font-size: 15px; width: 2px; + /* 设置类名为title404内部的span元素的字体大小和宽度样式 */ } .title404 p{ font-size: 20px; line-height:1.5; margin:0; color:#7b8993; + /* 设置类名为title404内部的p元素的字体大小、行高、外边距和文本颜色样式 */ } .info404{ position: absolute; @@ -69,13 +86,16 @@ text-align: center; width: 100%; margin-top: -160px; + /* 定义一个类名为info404的元素，绝对定位在页面垂直居中的位置（通过top: 50%和负的外边距来实现精准居中），文本居中对齐，宽度占满整个页面 */ } - .body-about .info404{ + .body-about.info404{ margin-top: -180px; + /* 当父元素有body-about类时，其内部的info404元素调整上边距，用于特定页面布局下的垂直位置微调 */ } #footer404{ margin-top:30px; font-size:10px; + /* 设置id为footer404的元素，距离上方元素有30px的外边距，字体大小为10px */ } .index404 { margin-top: 24px; @@ -98,9 +118,11 @@ border-radius: 25px; background-color: #fff; color: #7b8993; + /* 定义类名为index404的元素样式，设置上边距、显示为行内块元素、禁止文本换行、鼠标指针变为手型、字间距、字体大小等诸多样式属性，包括边框、行高、文本对齐、高度、内边距、圆角、背景颜色和文本颜色等，用于呈现一个特定外观和交互效果的按钮样式 */ } .icon-about{ padding: 10px 0 25px; + /* 定义类名为icon-about的元素的内边距样式，用于布局调整 */ } .icon-about a{ font-size: 20px; @@ -109,6 +131,7 @@ background-color: #000; border-radius: 100%; padding: 6px; + /* 定义类名为icon-about内部的链接元素样式，设置字体大小、外边距、文本颜色、背景颜色、边框圆角和内边距，用于呈现特定外观的图标样式（可能是社交媒体图标之类的元素） */ } @-webkit-keyframes hue { from { @@ -118,21 +141,27 @@ to { -webkit-filter: hue-rotate(-360deg); } + /* 定义名为hue的动画关键帧，从初始状态（色相旋转0度）到结束状态（色相旋转-360度），用于实现文本颜色渐变的动画效果 */ } +
Time Out
+

I have no secret of success but hard work.

+
Go back +
- + + \ No newline at end of file diff --git a/web/filterLogin.jsp b/web/filterLogin.jsp index 9bbdda1..9e44a5f 100644 --- a/web/filterLogin.jsp +++ b/web/filterLogin.jsp @@ -1,16 +1,28 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + TITLE + <% - if (session.getAttribute("student")==null && session.getAttribute("teacher")==null && session.getAttribute("admin")==null) { + // 以下是一段嵌入在JSP页面中的Java代码片段，用于判断当前会话（session）中是否存在某些特定属性。 + // session.getAttribute("student")==null：检查名为"student"的会话属性是否不存在（值为null）。 + // session.getAttribute("teacher")==null：检查名为"teacher"的会话属性是否不存在（值为null）。 + // session.getAttribute("admin")==null：检查名为"admin"的会话属性是否不存在（值为null）。 + // 整体逻辑是，只有当这三个属性在会话中都不存在时，才会执行后续的转发操作。 + if (session.getAttribute("student") == null && session.getAttribute("teacher") == null && session.getAttribute("admin") == null) { %> - + + <% } %> - + \ No newline at end of file diff --git a/web/footer.jsp b/web/footer.jsp index cc3ae71..cc23887 100644 --- a/web/footer.jsp +++ b/web/footer.jsp @@ -1,7 +1,10 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> +
- + © yoyling.com - 学生信息管理系统 -
- + + \ No newline at end of file diff --git a/web/forget.jsp b/web/forget.jsp index 0af2b24..c4bba82 100644 --- a/web/forget.jsp +++ b/web/forget.jsp @@ -1,65 +1,116 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + + + + + 忘记密码 + + + + - +
+
© 2018-2019.YOYLING.COM
+ + +
© 2018-2019.YOYLING.COM
+ + @@ -112,6 +142,9 @@ } } } + // 定义函数 a，用于处理登录按钮的点击事件（原本可能是绑定在按钮的 click 事件上，现在通过 onclick 属性调用） + // 首先获取所有角色单选按钮，确定选中的角色值，然后获取用户名、密码、验证码输入框的值，进行非空验证 + // 如果输入框有值为空则直接返回不进行后续操作，如果都有值，则根据选中的角色设置表单的 action 属性，指向对应的登录 Servlet 并提交表单 \ No newline at end of file diff --git a/web/message.jsp b/web/message.jsp index 996949a..ebe1608 100644 --- a/web/message.jsp +++ b/web/message.jsp @@ -1,57 +1,67 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + <%@ page import="java.io.*,java.util.*,javax.servlet.*,javax.servlet.http.*" %> + <%@ page import="java.rmi.ServerException" %> + <%@ page import="java.nio.charset.Charset" %> <%@ page import="java.nio.charset.StandardCharsets" %> + + <% - //定义上传文件的最大字节 + //定义上传文件的最大字节数，这里设置的数值是 102400 * 102400 字节（不过这个数值看起来可能过大，也许是示例或特殊需求，通常会根据实际情况合理设置大小限制） int MAX_SIZE = 102400 * 102400; - //创建根路径的保存变量 + //创建根路径的保存变量，后续用于拼接出文件上传后的保存路径，初始时只是声明，还未赋值具体内容 String rootPath; - //声明文件读入类 + //声明文件读入类，用于从请求流中读取上传的数据，初始化为 null，后续会在合适的逻辑中进行实例化 DataInputStream in = null; + //声明文件输出流类，用于将上传的数据写入到服务器端的文件中，初始化为 null，后续会在合适的逻辑中进行实例化 FileOutputStream fileOut = null; - //取得互联网程序的绝对地址 + //取得互联网程序（即当前 Servlet 上下文对应的应用程序）的绝对地址，例如获取到类似项目部署在服务器上的根目录路径 String realPath = request.getSession().getServletContext().getRealPath("/"); + //对获取到的绝对路径进行处理，截取掉其中 "\out" 及之后的部分，可能是为了获取到项目更合适的基础路径（具体取决于项目结构和需求） realPath = realPath.substring(0, realPath.indexOf("\\out")); // out.print(realPath); - //创建文件的保存目录 + // 创建文件的保存目录，将处理后的路径与 "\web\upload\" 拼接起来，形成文件最终要保存的目录路径，这里假设项目中有这样一个用于存放上传文件的目录结构 rootPath = realPath + "\\web\\upload\\"; - //取得客户端上传的数据类型 + //取得客户端上传的数据类型，例如判断是否是 "multipart/form-data" 这种常见的文件上传类型的数据格式 String contentType = request.getContentType(); try { + // 判断客户端上传的数据类型是否是 "multipart/form-data"，如果是则进行文件上传相关的处理逻辑 if (contentType.indexOf("multipart/form-data") >= 0) { - //读入上传数据 + // 读入上传数据，通过从请求输入流创建 DataInputStream 对象，以便按字节读取客户端上传的数据 in = new DataInputStream(request.getInputStream()); + // 获取上传数据的总长度（字节数），用于后续循环读取数据以及判断是否超过设定的最大字节限制 int formDataLength = request.getContentLength(); + // 检查上传的数据长度是否超过了预先定义的最大字节数，如果超过则输出提示信息并终止当前方法执行（直接返回） if (formDataLength > MAX_SIZE) { out.print("上传的字节不可以超过" + MAX_SIZE + "字节"); return; } - //保存上传文件的数据 + // 保存上传文件的数据，创建一个字节数组，大小为上传数据的总长度，用于存放从请求中读取到的字节数据 byte dataBytes[] = new byte[formDataLength]; int byteRead = 0; int totalBytesRead = 0; - //上传的数据保存在byte数组里面 + // 上传的数据保存在 byte 数组里面，通过循环从输入流中读取数据，每次读取一部分字节，直到读取完所有上传的数据 while (totalBytesRead < formDataLength) { byteRead = in.read(dataBytes, totalBytesRead, formDataLength); totalBytesRead += byteRead; } - //根据byte数组创建字符串 + // 根据 byte 数组创建字符串，使用指定的 UTF-8 编码将字节数组转换为字符串，方便后续对上传数据内容进行字符串相关的操作（比如提取文件名等信息） String file = new String(dataBytes, StandardCharsets.UTF_8); - //取得上传数据的文件名 + // 取得上传数据的文件名，通过对转换后的字符串进行一系列的截取操作，从包含文件名信息的字符串中提取出真正的文件名（处理了包含文件名的特定格式字符串） String saveFile = file.substring(file.indexOf("filename=\"") + 10); saveFile = saveFile.substring(0, saveFile.indexOf("\n")); saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\"")); int lastIndex = contentType.lastIndexOf("="); - //取得数据的分隔字符串 + // 取得数据的分隔字符串，从上传数据的类型字符串（例如 "multipart/form-data; boundary=----WebKitFormBoundaryxxx"）中提取出用于分隔不同部分的边界字符串（boundary） String boundary = contentType.substring(lastIndex + 1, contentType.length()); - //创建保存路径的文件名 + // 创建保存路径的文件名，将前面确定的文件保存目录路径与提取出的文件名拼接起来，形成完整的文件保存路径（包含文件名和目录） String fileName = rootPath + saveFile; int pos; pos = file.indexOf("filename = \""); @@ -59,30 +69,33 @@ pos = file.indexOf("\n", pos) + 1; pos = file.indexOf("\n", pos) + 1; int boundaryLocation = file.indexOf(boundary, pos) - 4; - //取得文件数据的开始的位置 + // 取得文件数据的开始的位置，通过对文件内容字符串进行一系列操作，先获取相关子字符串，再计算其字节长度来确定文件数据在整个上传数据中的起始位置 int startPos = ((file.substring(0, pos)).getBytes()).length; int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length; File checkFile = new File(fileName); + // 检查要保存的文件是否已经存在，如果存在则输出提示信息并终止当前方法执行（直接返回） if (checkFile.exists()) { out.println("

" + saveFile + "文件已经存在.

"); return; } - //检查上传文件的目录是否存在 + // 检查上传文件的目录是否存在，如果不存在则创建该目录（包括上级目录等，会递归创建），确保文件保存的目录是存在的 File fileDir = new File(rootPath); if (!fileDir.exists()) { fileDir.mkdirs(); } - //创建文件的输出类 + // 创建文件的输出类，通过指定文件保存路径实例化 FileOutputStream，用于将上传的数据写入到对应的文件中 fileOut = new FileOutputStream(fileName); - //保存文件的数据 + // 保存文件的数据，将之前读取到的字节数组中对应文件数据部分写入到文件输出流中，实现文件在服务器端的保存 fileOut.write(dataBytes, startPos, (endPos - startPos)); fileOut.close(); out.print("文件上传成功"); } else { + // 如果上传的数据类型不是 "multipart/form-data"，则输出提示信息，告知用户需要上传该类型的文件 String content = request.getContentType(); out.print("上传的文件类型是" + content + "类型的，请上传目录mutipart/form-data类型的文件"); } } catch (Exception ex) { + // 如果在文件上传过程中出现任何异常，捕获异常并抛出一个 ServerException，将原始异常的消息传递进去，方便在更上层进行统一的异常处理和日志记录等操作 throw new ServerException(ex.getMessage()); } %> diff --git a/web/register.jsp b/web/register.jsp index c58ce25..c70da9e 100644 --- a/web/register.jsp +++ b/web/register.jsp @@ -1,30 +1,45 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + + + + + + 注册页 + + + + +
@@ -39,6 +55,7 @@
+
@@ -46,47 +63,62 @@
+ + +
+

立即登录

${msg}
- 忘记密码？

+ 忘记密码？ +

+ + +
© 2018-2019.YOYLING.COM
+ + + + diff --git a/web/upload2.jsp b/web/upload2.jsp index 37c4c0b..8339628 100644 --- a/web/upload2.jsp +++ b/web/upload2.jsp @@ -1,16 +1,28 @@ <%@ page contentType="text/html;charset=UTF-8" language="java" %> + + 文件上传 +

文件上传

+
+ + 选择一个文件: + +

+
\ No newline at end of file