diff --git a/web/static/js/lay-module/layarea/layarea.js b/web/static/js/lay-module/layarea/layarea.js index d62e384..74a86b0 100644 --- a/web/static/js/lay-module/layarea/layarea.js +++ b/web/static/js/lay-module/layarea/layarea.js @@ -3818,6 +3818,7 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) { Class.prototype.config = { elem: '', + // 元素选择器或 DOM 元素的初始值为空字符串 data: { province: '', city: '', @@ -3826,17 +3827,25 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) { cityCode: 0, countyCode: 0, }, + // 一个包含地区相关信息的对象，初始值都为空字符串或 0 change: function(result){} + // 一个函数，用于处理某些结果 }; - + Class.prototype.index = 0; - + // 定义一个索引属性，初始值为 0 + Class.prototype.render = function () { let that = this, options = that.config; + // 在这个方法中，定义了一个局部变量 that 指向当前实例， + // 并将当前实例的 config 属性赋值给 options options.elem = $(options.elem); + // 将配置中的 elem 转换为 jQuery 对象 options.bindAction = $(options.bindAction); - + // 将配置中的 bindAction 转换为 jQuery 对象 + that.events(); + // 调用当前实例的 events 方法 }; Class.prototype.events = function () { @@ -4006,26 +4015,37 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) { return result; } - function getCode(type, name, parentCode = 0){ + function getCode(type, name, parentCode = 0) { + // 定义一个函数 getCode，接收三个参数：type（类型）、name（名称）和可选参数 parentCode（父级代码，默认为 0） let code = ''; + // 初始化代码变量为空字符串 let list = areaList[type + "_list"] || {}; + // 根据传入的类型获取对应的列表，如果不存在则初始化为一个空对象 let result = {}; + // 创建一个空对象用于存储筛选后的结果 Object.keys(list).map(function (_code) { - if(parentCode){ - if(_code.indexOf(parentCode) === 0){ + // 遍历列表的键（代码） + if (parentCode) { + // 如果传入了父级代码 + if (_code.indexOf(parentCode) === 0) { + // 如果当前代码以父级代码开头 result[_code] = list[_code]; + // 将当前代码和对应的值添加到结果对象中 } - }else{ + } else { result[_code] = list[_code]; + // 如果没有传入父级代码，直接将当前代码和对应的值添加到结果对象中 } }); - layui.each(result, function(_code, _name){ - if(_name === name){ + layui.each(result, function (_code, _name) { + // 遍历结果对象 + if (_name === name) { code = _code; + // 如果当前名称与传入的名称相等，将当前代码赋值给 code 变量 } }); - return code; + // 返回找到的代码 } }; diff --git a/web/static/js/lay-module/step-lay/step.css b/web/static/js/lay-module/step-lay/step.css index cc5e2ce..b78e012 100644 --- a/web/static/js/lay-module/step-lay/step.css +++ b/web/static/js/lay-module/step-lay/step.css @@ -1,79 +1,133 @@ +/* 设置一个名为.lay-step 的类选择器 */ .lay-step { + /* 将字体大小设置为 0，去除元素内的默认字体大小影响 */ font-size: 0; + /* 设置宽度为 400px，或者在容器允许的情况下最大宽度为 100% */ width: 400px; margin: 0 auto; max-width: 100%; + /* 设置左内边距为 200px */ padding-left: 200px; } +/* 设置一个名为.step-item 的类选择器 */ .step-item { + /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */ display: inline-block; + /* 设置行高为 26px */ line-height: 26px; + /* 设置元素为相对定位，为子元素的绝对定位提供参考 */ position: relative; + /* 设置字体大小为 14px */ font-size: 14px; } +/* 设置一个名为.step-item-tail 的类选择器 */ .step-item-tail { + /* 设置宽度为 100%，即占满父元素宽度 */ width: 100%; + /* 设置左右内边距为 10px */ padding: 0 10px; + /* 设置元素为绝对定位，相对于父元素定位 */ position: absolute; + /* 设置左偏移为 0，即与父元素左边对齐 */ left: 0; + /* 设置上偏移为 13px */ top: 13px; } +/* 设置一个名为.step-item-tail i 的类选择器 */ .step-item-tail i { + /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */ display: inline-block; + /* 设置宽度为 100%，即占满父元素宽度 */ width: 100%; + /* 设置高度为 1px */ height: 1px; + /* 垂直对齐方式为顶部对齐 */ vertical-align: top; + /* 设置背景颜色为 #c2c2c2 */ background: #c2c2c2; + /* 设置元素为相对定位，为可能的子元素绝对定位提供参考 */ position: relative; } -.step-item-tail .step-item-tail-done { +/* 设置一个名为.step-item-tail.step-item-tail-done 的类选择器 */ +.step-item-tail.step-item-tail-done { + /* 设置背景颜色为 #009688 */ background: #009688; } +/* 设置一个名为.step-item-head 的类选择器 */ .step-item-head { + /* 设置元素为相对定位，为子元素的绝对定位提供参考 */ position: relative; + /* 将元素设置为内联块级元素，可在同一行显示并允许设置宽度、高度等属性 */ display: inline-block; + /* 设置高度为 26px */ height: 26px; + /* 设置宽度为 26px */ width: 26px; + /* 设置文本居中对齐 */ text-align: center; + /* 垂直对齐方式为顶部对齐 */ vertical-align: top; + /* 设置文本颜色为 #009688 */ color: #009688; + /* 设置边框为 1px 宽的实线，颜色为 #009688 */ border: 1px solid #009688; + /* 设置边框圆角为 50%，使元素呈现圆形 */ border-radius: 50%; + /* 设置背景颜色为白色 */ background: #ffffff; } +/* 设置一个名为.step-item-head.step-item-head-active 的类选择器 */ .step-item-head.step-item-head-active { + /* 设置背景颜色为 #009688 */ background: #009688; + /* 设置文本颜色为白色 */ color: #ffffff; } +/* 设置一个名为.step-item-main 的类选择器 */ .step-item-main { + /* 将元素设置为块级元素，独占一行 */ display: block; + /* 设置元素为相对定位，为子元素的绝对定位提供参考 */ position: relative; + /* 设置左外边距为 -50%，用于调整元素位置 */ margin-left: -50%; + /* 设置右外边距为 50%，用于调整元素位置 */ margin-right: 50%; + /* 设置左内边距为 26px */ padding-left: 26px; + /* 设置文本居中对齐 */ text-align: center; } +/* 设置一个名为.step-item-main-title 的类选择器 */ .step-item-main-title { + /* 设置字体加粗 */ font-weight: bolder; + /* 设置文本颜色为 #555555 */ color: #555555; } +/* 设置一个名为.step-item-main-desc 的类选择器 */ .step-item-main-desc { + /* 设置文本颜色为 #aaaaaa */ color: #aaaaaa; } +/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时 */ .lay-step + [carousel-item]:before { + /* 不显示任何内容 */ display: none; } +/* 设置一个选择器组合，当.lay-step 后面紧跟着 [carousel-item] 元素时，选择 [carousel-item] 的子元素 */ .lay-step + [carousel-item] > * { + /* 设置背景颜色为透明 */ background-color: transparent; } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/animated.less b/web/static/lib/font-awesome-4.7.0/less/animated.less index 66ad52a..402c2ac 100644 --- a/web/static/lib/font-awesome-4.7.0/less/animated.less +++ b/web/static/lib/font-awesome-4.7.0/less/animated.less @@ -1,34 +1,46 @@ // Animated Icons // -------------------------- -.@{fa-css-prefix}-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} - -.@{fa-css-prefix}-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} - -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 这个选择器用于为特定的元素设置旋转动画效果。 */ + .@{fa-css-prefix}-spin { + /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 2 秒，无限循环，线性过渡。 */ + -webkit-animation: fa-spin 2s infinite linear; + /* 标准的 CSS 动画属性，设置同样的动画效果。 */ + animation: fa-spin 2s infinite linear; } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + + .@{fa-css-prefix}-pulse { + /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 1 秒，无限循环，分为 8 步过渡。 */ + -webkit-animation: fa-spin 1s infinite steps(8); + /* 标准的 CSS 动画属性，设置同样的动画效果。 */ + animation: fa-spin 1s infinite steps(8); } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + + /* 定义一个名为'fa-spin'的关键帧动画，用于在 WebKit 浏览器内核中实现旋转效果。 */ + @-webkit-keyframes fa-spin { + /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */ + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } -} + + /* 定义一个名为'fa-spin'的关键帧动画，用于在标准的 CSS 环境中实现旋转效果。 */ + @keyframes fa-spin { + /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */ + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/bordered-pulled.less b/web/static/lib/font-awesome-4.7.0/less/bordered-pulled.less index f1c8ad7..a6eb7d8 100644 --- a/web/static/lib/font-awesome-4.7.0/less/bordered-pulled.less +++ b/web/static/lib/font-awesome-4.7.0/less/bordered-pulled.less @@ -1,25 +1,39 @@ // Bordered & Pulled // ------------------------- -.@{fa-css-prefix}-border { - padding: .2em .25em .15em; - border: solid .08em @fa-border-color; - border-radius: .1em; -} - -.@{fa-css-prefix}-pull-left { float: left; } -.@{fa-css-prefix}-pull-right { float: right; } - -.@{fa-css-prefix} { - &.@{fa-css-prefix}-pull-left { margin-right: .3em; } - &.@{fa-css-prefix}-pull-right { margin-left: .3em; } -} - -/* Deprecated as of 4.4.0 */ -.pull-right { float: right; } -.pull-left { float: left; } - -.@{fa-css-prefix} { - &.pull-left { margin-right: .3em; } - &.pull-right { margin-left: .3em; } -} +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 此选择器用于设置特定元素的边框样式。 */ + .@{fa-css-prefix}-border { + /* 设置内边距为.2em.25em.15em。 */ + padding:.2em.25em.15em; + /* 设置边框为实线，宽度为.08em，颜色为 @fa-border-color 变量所代表的颜色。 */ + border: solid.08em @fa-border-color; + /* 设置边框圆角半径为.1em。 */ + border-radius:.1em; + } + + /* 以下两个选择器分别用于设置向左和向右浮动。 */ + .@{fa-css-prefix}-pull-left { float: left; } + .@{fa-css-prefix}-pull-right { float: right; } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 此选择器用于在特定元素具有特定类名时设置边距。 */ + .@{fa-css-prefix} { + /* 当特定元素同时具有.@{fa-css-prefix}-pull-left 类名时，设置右外边距为.3em。 */ + &.@{fa-css-prefix}-pull-left { margin-right:.3em; } + /* 当特定元素同时具有.@{fa-css-prefix}-pull-right 类名时，设置左外边距为.3em。 */ + &.@{fa-css-prefix}-pull-right { margin-left:.3em; } + } + + /* 以下两个选择器在 4.4.0 版本后被弃用，分别用于设置向右和向左浮动。 */ + .pull-right { float: right; } + .pull-left { float: left; } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 此选择器用于在特定元素具有弃用的类名时设置边距。 */ + .@{fa-css-prefix} { + /* 当特定元素同时具有.pull-left 类名时，设置右外边距为.3em。 */ + &.pull-left { margin-right:.3em; } + /* 当特定元素同时具有.pull-right 类名时，设置左外边距为.3em。 */ + &.pull-right { margin-left:.3em; } + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/core.less b/web/static/lib/font-awesome-4.7.0/less/core.less index c577ac8..72f9fa6 100644 --- a/web/static/lib/font-awesome-4.7.0/less/core.less +++ b/web/static/lib/font-awesome-4.7.0/less/core.less @@ -1,12 +1,20 @@ // Base Class Definition // ------------------------- +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 */ .@{fa-css-prefix} { + /* 将元素显示为内联块级元素。 */ display: inline-block; - font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration - font-size: inherit; // can't have font-size inherit on line above, so need to override - text-rendering: auto; // optimizelegibility throws things off #1094 + /* 设置字体为'FontAwesome'，字体大小为 @fa-font-size-base 除以 @fa-line-height-base， + 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。 */ + font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; + /* 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。 */ + font-size: inherit; + /* 设置文本渲染方式为自动，这样可以优化文本的显示效果。 + 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。 */ + text-rendering: auto; + /* 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。 */ -webkit-font-smoothing: antialiased; + /* 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。 */ -moz-osx-font-smoothing: grayscale; - -} +} \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/larger.less b/web/static/lib/font-awesome-4.7.0/less/larger.less index c9d6467..21d0e78 100644 --- a/web/static/lib/font-awesome-4.7.0/less/larger.less +++ b/web/static/lib/font-awesome-4.7.0/less/larger.less @@ -10,4 +10,4 @@ .@{fa-css-prefix}-2x { font-size: 2em; } .@{fa-css-prefix}-3x { font-size: 3em; } .@{fa-css-prefix}-4x { font-size: 4em; } -.@{fa-css-prefix}-5x { font-size: 5em; } +.@{fa-css-prefix}-5x { font-size: 5em; } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/list.less b/web/static/lib/font-awesome-4.7.0/less/list.less index 0b44038..28bc332 100644 --- a/web/static/lib/font-awesome-4.7.0/less/list.less +++ b/web/static/lib/font-awesome-4.7.0/less/list.less @@ -1,19 +1,34 @@ // List Icons // ------------------------- -.@{fa-css-prefix}-ul { - padding-left: 0; - margin-left: @fa-li-width; - list-style-type: none; - > li { position: relative; } -} -.@{fa-css-prefix}-li { - position: absolute; - left: -@fa-li-width; - width: @fa-li-width; - top: (2em / 14); - text-align: center; - &.@{fa-css-prefix}-lg { - left: (-@fa-li-width + (4em / 14)); +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 此选择器用于设置无序列表的样式。 */ + .@{fa-css-prefix}-ul { + /* 清除无序列表的左内边距。 */ + padding-left: 0; + /* 设置左外边距为 @fa-li-width 变量所代表的值。 */ + margin-left: @fa-li-width; + /* 清除列表的默认样式类型。 */ + list-style-type: none; + /* 选择无序列表中的直接子元素 li，设置其为相对定位。 */ + > li { position: relative; } + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix} 会在编译时被替换为具体的内容。 + 此选择器用于设置列表项的样式。 */ + .@{fa-css-prefix}-li { + /* 将列表项设置为绝对定位。 */ + position: absolute; + /* 设置左外边距为负的 @fa-li-width 变量所代表的值，使列表项图标向左偏移。 */ + left: -@fa-li-width; + /* 设置宽度为 @fa-li-width 变量所代表的值。 */ + width: @fa-li-width; + /* 设置上外边距为 (2em / 14)，用于微调位置。 */ + top: (2em / 14); + /* 将文本居中对齐。 */ + text-align: center; + /* 当列表项同时具有.@{fa-css-prefix}-lg 类名时，调整左外边距。 */ + &.@{fa-css-prefix}-lg { + left: (-@fa-li-width + (4em / 14)); + } } -} diff --git a/web/static/lib/font-awesome-4.7.0/less/mixins.less b/web/static/lib/font-awesome-4.7.0/less/mixins.less index beef231..e293866 100644 --- a/web/static/lib/font-awesome-4.7.0/less/mixins.less +++ b/web/static/lib/font-awesome-4.7.0/less/mixins.less @@ -1,60 +1,90 @@ // Mixins // -------------------------- +// 定义一个名为.fa-icon 的混合器（mixin） .fa-icon() { + // 将元素显示为内联块级元素 display: inline-block; - font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration - font-size: inherit; // can't have font-size inherit on line above, so need to override - text-rendering: auto; // optimizelegibility throws things off #1094 + // 设置字体为'FontAwesome'，字体大小为 @fa-font-size-base 除以 @fa-line-height-base， + // 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。 + font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; + // 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。 + font-size: inherit; + // 设置文本渲染方式为自动，这样可以优化文本的显示效果。 + // 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。 + text-rendering: auto; + // 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。 -webkit-font-smoothing: antialiased; + // 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。 -moz-osx-font-smoothing: grayscale; - } +// 定义一个名为.fa-icon-rotate 的混合器，接收两个参数 @degrees（旋转角度）和 @rotation（用于 IE 的旋转值） .fa-icon-rotate(@degrees, @rotation) { + // 在 Internet Explorer 中设置旋转角度 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; + // 在 WebKit 浏览器内核中设置旋转角度 -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - transform: rotate(@degrees); + // 在 Internet Explorer 中设置旋转角度 + -ms-transform: rotate(@degrees); + // 在标准 CSS 环境中设置旋转角度 + transform: rotate(@degrees); } +// 定义一个名为.fa-icon-flip 的混合器，接收三个参数 @horiz（水平缩放值）、@vert（垂直缩放值）和 @rotation（用于 IE 的旋转值） .fa-icon-flip(@horiz, @vert, @rotation) { + // 在 Internet Explorer 中设置翻转效果 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)"; + // 在 WebKit 浏览器内核中设置缩放效果以实现翻转 -webkit-transform: scale(@horiz, @vert); - -ms-transform: scale(@horiz, @vert); - transform: scale(@horiz, @vert); + // 在 Internet Explorer 中设置缩放效果以实现翻转 + -ms-transform: scale(@horiz, @vert); + // 在标准 CSS 环境中设置缩放效果以实现翻转 + transform: scale(@horiz, @vert); } - -// Only display content to screen readers. A la Bootstrap 4. +// 仅将内容显示给屏幕阅读器。类似于 Bootstrap 4 的做法。 // -// See: http://a11yproject.com/posts/how-to-hide-content/ - +// 参考：http://a11yproject.com/posts/how-to-hide-content/ .sr-only() { + // 将元素设置为绝对定位 position: absolute; + // 设置宽度为 1 像素 width: 1px; + // 设置高度为 1 像素 height: 1px; + // 清除内边距 padding: 0; + // 设置外边距为 -1 像素 margin: -1px; + // 设置内容溢出时隐藏 overflow: hidden; + // 使用裁剪矩形将内容隐藏 clip: rect(0,0,0,0); + // 清除边框 border: 0; } -// Use in conjunction with .sr-only to only display content when it's focused. +// 与.sr-only 结合使用，仅在元素获得焦点时显示内容。 // -// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// 对于“跳转到主要内容”链接很有用；参考 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // -// Credit: HTML5 Boilerplate - +// 来源：HTML5 Boilerplate .sr-only-focusable() { + // 当元素处于激活状态或获得焦点时应用以下样式 &:active, &:focus { + // 将元素设置为静态定位 position: static; + // 设置宽度为自动 width: auto; + // 设置高度为自动 height: auto; + // 清除外边距 margin: 0; + // 使内容溢出时可见 overflow: visible; + // 清除裁剪矩形 clip: auto; } -} +} \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/rotated-flipped.less b/web/static/lib/font-awesome-4.7.0/less/rotated-flipped.less index f6ba814..55d0e1d 100644 --- a/web/static/lib/font-awesome-4.7.0/less/rotated-flipped.less +++ b/web/static/lib/font-awesome-4.7.0/less/rotated-flipped.less @@ -1,20 +1,50 @@ // Rotated & Flipped Icons // ------------------------- -.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } -.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } -.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } - -.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } -.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } - -// Hook for IE8-9 -// ------------------------- - -:root .@{fa-css-prefix}-rotate-90, -:root .@{fa-css-prefix}-rotate-180, -:root .@{fa-css-prefix}-rotate-270, -:root .@{fa-css-prefix}-flip-horizontal, -:root .@{fa-css-prefix}-flip-vertical { - filter: none; -} +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-rotate-90 会在编译时被替换为具体的内容。 + 此选择器用于设置元素旋转 90 度。 */ + .@{fa-css-prefix}-rotate-90 { + /* 调用.fa-icon-rotate 混合器，传入参数 90deg 和 1，实现旋转效果。 */ + .fa-icon-rotate(90deg, 1); + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-rotate-180 会在编译时被替换为具体的内容。 + 此选择器用于设置元素旋转 180 度。 */ + .@{fa-css-prefix}-rotate-180 { + /* 调用.fa-icon-rotate 混合器，传入参数 180deg 和 2，实现旋转效果。 */ + .fa-icon-rotate(180deg, 2); + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-rotate-270 会在编译时被替换为具体的内容。 + 此选择器用于设置元素旋转 270 度。 */ + .@{fa-css-prefix}-rotate-270 { + /* 调用.fa-icon-rotate 混合器，传入参数 270deg 和 3，实现旋转效果。 */ + .fa-icon-rotate(270deg, 3); + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-flip-horizontal 会在编译时被替换为具体的内容。 + 此选择器用于设置元素水平翻转。 */ + .@{fa-css-prefix}-flip-horizontal { + /* 调用.fa-icon-flip 混合器，传入参数 -1、1 和 0，实现水平翻转效果。 */ + .fa-icon-flip(-1, 1, 0); + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-flip-vertical 会在编译时被替换为具体的内容。 + 此选择器用于设置元素垂直翻转。 */ + .@{fa-css-prefix}-flip-vertical { + /* 调用.fa-icon-flip 混合器，传入参数 1、-1 和 2，实现垂直翻转效果。 */ + .fa-icon-flip(1, -1, 2); + } + + // Hook for IE8-9 + // ------------------------- + + /* 在根元素下设置过滤器为 none，避免在现代浏览器中使用过时的过滤器。这里是一个动态的 CSS 选择器， + :root.@{fa-css-prefix}-rotate-90 等会在编译时被替换为具体的内容。 */ + :root.@{fa-css-prefix}-rotate-90, + :root.@{fa-css-prefix}-rotate-180, + :root.@{fa-css-prefix}-rotate-270, + :root.@{fa-css-prefix}-flip-horizontal, + :root.@{fa-css-prefix}-flip-vertical { + filter: none; + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/less/stacked.less b/web/static/lib/font-awesome-4.7.0/less/stacked.less index fc53fb0..e1eb7a6 100644 --- a/web/static/lib/font-awesome-4.7.0/less/stacked.less +++ b/web/static/lib/font-awesome-4.7.0/less/stacked.less @@ -1,20 +1,53 @@ // Stacked Icons // ------------------------- -.@{fa-css-prefix}-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.@{fa-css-prefix}-stack-1x { line-height: inherit; } -.@{fa-css-prefix}-stack-2x { font-size: 2em; } -.@{fa-css-prefix}-inverse { color: @fa-inverse; } +/* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-stack 会在编译时被替换为具体的内容。 + 此选择器用于设置堆叠容器的样式。 */ + .@{fa-css-prefix}-stack { + /* 将元素设置为相对定位。 */ + position: relative; + /* 将元素显示为内联块级元素。 */ + display: inline-block; + /* 设置宽度为 2em。 */ + width: 2em; + /* 设置高度为 2em。 */ + height: 2em; + /* 设置行高为 2em。 */ + line-height: 2em; + /* 将元素垂直对齐方式设置为中间对齐。 */ + vertical-align: middle; + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-stack-1x 和.@{fa-css-prefix}-stack-2x + 会在编译时被替换为具体的内容。这两个选择器用于设置堆叠元素的样式。 */ + .@{fa-css-prefix}-stack-1x,.@{fa-css-prefix}-stack-2x { + /* 将元素设置为绝对定位。 */ + position: absolute; + /* 设置元素的左边位置为 0。 */ + left: 0; + /* 设置元素宽度为 100%。 */ + width: 100%; + /* 将文本居中对齐。 */ + text-align: center; + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-stack-1x 会在编译时被替换为具体的内容。 + 此选择器用于设置堆叠元素中尺寸为 1x 的元素的行高。 */ + .@{fa-css-prefix}-stack-1x { + /* 继承父元素的行高。 */ + line-height: inherit; + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-stack-2x 会在编译时被替换为具体的内容。 + 此选择器用于设置堆叠元素中尺寸为 2x 的元素的字体大小。 */ + .@{fa-css-prefix}-stack-2x { + /* 设置字体大小为 2em。 */ + font-size: 2em; + } + + /* 这里是一个动态的 CSS 选择器，@{fa-css-prefix}-inverse 会在编译时被替换为具体的内容。 + 此选择器用于设置具有反向样式的元素的文本颜色。 */ + .@{fa-css-prefix}-inverse { + /* 设置文本颜色为 @fa-inverse 变量所代表的颜色。 */ + color: @fa-inverse; + } diff --git a/web/static/lib/font-awesome-4.7.0/scss/_animated.scss b/web/static/lib/font-awesome-4.7.0/scss/_animated.scss index 8a020db..d5b627d 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_animated.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_animated.scss @@ -1,34 +1,46 @@ // Spinning Icons // -------------------------- - -.#{$fa-css-prefix}-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} - -.#{$fa-css-prefix}-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} - -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); +/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix} 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀的元素的旋转动画。 */ + .#{$fa-css-prefix}-spin { + /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 2 秒，无限循环，线性过渡。 */ + -webkit-animation: fa-spin 2s infinite linear; + /* 标准的 CSS 动画属性，设置同样的动画效果。 */ + animation: fa-spin 2s infinite linear; } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + + /* 同样使用插值语法的选择器，用于设置具有特定前缀的元素的脉冲动画。 */ + .#{$fa-css-prefix}-pulse { + /* 使用 WebKit 浏览器内核的动画属性，设置一个名为'fa-spin'的动画，持续时间为 1 秒，无限循环，分为 8 步过渡。 */ + -webkit-animation: fa-spin 1s infinite steps(8); + /* 标准的 CSS 动画属性，设置同样的动画效果。 */ + animation: fa-spin 1s infinite steps(8); } -} - -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + + /* 定义一个名为'fa-spin'的关键帧动画，用于在 WebKit 浏览器内核中实现旋转效果。 */ + @-webkit-keyframes fa-spin { + /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */ + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} + + /* 定义一个名为'fa-spin'的关键帧动画，用于在标准的 CSS 环境中实现旋转效果。 */ + @keyframes fa-spin { + /* 在动画的 0% 状态下，设置元素的旋转角度为 0 度。 */ + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + /* 在动画的 100% 状态下，设置元素的旋转角度为 359 度，实现旋转效果。 */ + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_bordered-pulled.scss b/web/static/lib/font-awesome-4.7.0/scss/_bordered-pulled.scss index d4b85a0..a08ae89 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_bordered-pulled.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_bordered-pulled.scss @@ -1,25 +1,37 @@ // Bordered & Pulled // ------------------------- -.#{$fa-css-prefix}-border { - padding: .2em .25em .15em; - border: solid .08em $fa-border-color; - border-radius: .1em; -} - -.#{$fa-css-prefix}-pull-left { float: left; } -.#{$fa-css-prefix}-pull-right { float: right; } - -.#{$fa-css-prefix} { - &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } - &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } -} - -/* Deprecated as of 4.4.0 */ -.pull-right { float: right; } -.pull-left { float: left; } - -.#{$fa-css-prefix} { - &.pull-left { margin-right: .3em; } - &.pull-right { margin-left: .3em; } -} +/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix} 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀的元素的边框样式。 */ + .#{$fa-css-prefix}-border { + /* 设置内边距为.2em.25em.15em。 */ + padding:.2em.25em.15em; + /* 设置边框为实线，宽度为.08em，颜色为变量 $fa-border-color 所代表的颜色。 */ + border: solid.08em $fa-border-color; + /* 设置边框圆角半径为.1em。 */ + border-radius:.1em; + } + + /* 以下两个选择器使用插值语法，分别用于设置向左和向右浮动。 */ + .#{$fa-css-prefix}-pull-left { float: left; } + .#{$fa-css-prefix}-pull-right { float: right; } + + /* 这里使用插值语法的选择器，用于在具有特定前缀的元素上应用样式。 */ + .#{$fa-css-prefix} { + /* 当具有特定前缀的元素同时具有.#{$fa-css-prefix}-pull-left 类名时，设置右外边距为.3em。 */ + &.#{$fa-css-prefix}-pull-left { margin-right:.3em; } + /* 当具有特定前缀的元素同时具有.#{$fa-css-prefix}-pull-right 类名时，设置左外边距为.3em。 */ + &.#{$fa-css-prefix}-pull-right { margin-left:.3em; } + } + + /* 以下两个选择器在 4.4.0 版本后被弃用，分别用于设置向右和向左浮动。 */ + .pull-right { float: right; } + .pull-left { float: left; } + + /* 这里使用插值语法的选择器，用于在具有特定前缀的元素上应用样式，针对弃用的类名。 */ + .#{$fa-css-prefix} { + /* 当具有特定前缀的元素同时具有.pull-left 类名时，设置右外边距为.3em。 */ + &.pull-left { margin-right:.3em; } + /* 当具有特定前缀的元素同时具有.pull-right 类名时，设置左外边距为.3em。 */ + &.pull-right { margin-left:.3em; } + } diff --git a/web/static/lib/font-awesome-4.7.0/scss/_core.scss b/web/static/lib/font-awesome-4.7.0/scss/_core.scss index 7425ef8..f56ccd8 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_core.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_core.scss @@ -1,12 +1,21 @@ // Base Class Definition // ------------------------- -.#{$fa-css-prefix} { - display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration - font-size: inherit; // can't have font-size inherit on line above, so need to override - text-rendering: auto; // optimizelegibility throws things off #1094 - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -} +/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix} 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀的元素的基本样式。 */ + .#{$fa-css-prefix} { + /* 将元素显示为内联块级元素。 */ + display: inline-block; + /* 设置字体为'FontAwesome'，字体大小为变量 #{$fa-font-size-base} 除以变量 #{$fa-line-height-base}， + 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。 */ + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; + /* 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。 */ + font-size: inherit; + /* 设置文本渲染方式为自动，这样可以优化文本的显示效果。 + 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。 */ + text-rendering: auto; + /* 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。 */ + -webkit-font-smoothing: antialiased; + /* 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。 */ + -moz-osx-font-smoothing: grayscale; + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_larger.scss b/web/static/lib/font-awesome-4.7.0/scss/_larger.scss index 41e9a81..ba74b50 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_larger.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_larger.scss @@ -2,12 +2,34 @@ // ------------------------- /* makes the font 33% larger relative to the icon container */ -.#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); - vertical-align: -15%; -} -.#{$fa-css-prefix}-2x { font-size: 2em; } -.#{$fa-css-prefix}-3x { font-size: 3em; } -.#{$fa-css-prefix}-4x { font-size: 4em; } -.#{$fa-css-prefix}-5x { font-size: 5em; } +/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix}-lg 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀且较大尺寸的元素样式。 */ + .#{$fa-css-prefix}-lg { + /* 设置字体大小为 4em 的三分之一。 */ + font-size: (4em / 3); + /* 设置行高为 3em 的四分之一。 */ + line-height: (3em / 4); + /* 将元素垂直对齐方式设置为 -15%，用于微调位置。 */ + vertical-align: -15%; + } + + /* 以下几个选择器使用插值语法，分别用于设置不同倍数的字体大小。 */ + .#{$fa-css-prefix}-2x { + /* 设置字体大小为 2 倍。 */ + font-size: 2em; + } + + .#{$fa-css-prefix}-3x { + /* 设置字体大小为 3 倍。 */ + font-size: 3em; + } + + .#{$fa-css-prefix}-4x { + /* 设置字体大小为 4 倍。 */ + font-size: 4em; + } + + .#{$fa-css-prefix}-5x { + /* 设置字体大小为 5 倍。 */ + font-size: 5em; + } diff --git a/web/static/lib/font-awesome-4.7.0/scss/_list.scss b/web/static/lib/font-awesome-4.7.0/scss/_list.scss index 7d1e4d5..b4c5a7a 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_list.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_list.scss @@ -1,19 +1,34 @@ // List Icons // ------------------------- -.#{$fa-css-prefix}-ul { - padding-left: 0; - margin-left: $fa-li-width; - list-style-type: none; - > li { position: relative; } -} -.#{$fa-css-prefix}-li { - position: absolute; - left: -$fa-li-width; - width: $fa-li-width; - top: (2em / 14); - text-align: center; - &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); +/* 这里使用了 Sass 的插值语法，#{$fa-css-prefix}-ul 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀的无序列表的样式。 */ + .#{$fa-css-prefix}-ul { + /* 清除无序列表的左内边距。 */ + padding-left: 0; + /* 设置左外边距为变量 $fa-li-width 所代表的值。 */ + margin-left: $fa-li-width; + /* 清除列表的默认样式类型。 */ + list-style-type: none; + /* 选择无序列表中的直接子元素 li，设置其为相对定位。 */ + > li { position: relative; } } -} + + /* 这里使用了 Sass 的插值语法，#{$fa-css-prefix}-li 会在编译时被替换为具体的值。 + 这个选择器用于设置具有特定前缀的列表项的样式。 */ + .#{$fa-css-prefix}-li { + /* 将列表项设置为绝对定位。 */ + position: absolute; + /* 设置左外边距为负的变量 $fa-li-width 所代表的值，使列表项图标向左偏移。 */ + left: -$fa-li-width; + /* 设置宽度为变量 $fa-li-width 所代表的值。 */ + width: $fa-li-width; + /* 设置上外边距为 (2em / 14)，用于微调位置。 */ + top: (2em / 14); + /* 将文本居中对齐。 */ + text-align: center; + /* 当列表项同时具有.#{$fa-css-prefix}-lg 类名时，调整左外边距。 */ + &.#{$fa-css-prefix}-lg { + left: -$fa-li-width + (4em / 14); + } + } \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_mixins.scss b/web/static/lib/font-awesome-4.7.0/scss/_mixins.scss index c3bbd57..e346342 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_mixins.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_mixins.scss @@ -1,60 +1,90 @@ // Mixins // -------------------------- +// 定义一个名为 fa-icon 的混合器（mixin） @mixin fa-icon() { + // 将元素显示为内联块级元素 display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration - font-size: inherit; // can't have font-size inherit on line above, so need to override - text-rendering: auto; // optimizelegibility throws things off #1094 + // 设置字体为'FontAwesome'，字体大小为变量 #{$fa-font-size-base} 除以变量 #{$fa-line-height-base}， + // 字体粗细、风格和变体为 normal，通过缩短字体声明的方式设置。 + font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; + // 设置字体大小继承父元素的字体大小。因为上一行的字体声明不能同时包含继承，所以这里单独设置。 + font-size: inherit; + // 设置文本渲染方式为自动，这样可以优化文本的显示效果。 + // 注意：'optimizelegibility'可能会导致一些问题，如 #1094 所描述的情况。 + text-rendering: auto; + // 在 WebKit 浏览器内核中使用抗锯齿效果以提高字体的显示质量。 -webkit-font-smoothing: antialiased; + // 在 Mozilla 浏览器内核中使用灰度平滑效果以提高字体的显示质量。 -moz-osx-font-smoothing: grayscale; - } +// 定义一个名为 fa-icon-rotate 的混合器，接收两个参数 $degrees（旋转角度）和 $rotation（用于 IE 的旋转值） @mixin fa-icon-rotate($degrees, $rotation) { + // 在 Internet Explorer 中设置旋转角度 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; + // 在 WebKit 浏览器内核中设置旋转角度 -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); - transform: rotate($degrees); + // 在 Internet Explorer 中设置旋转角度 + -ms-transform: rotate($degrees); + // 在标准 CSS 环境中设置旋转角度 + transform: rotate($degrees); } +// 定义一个名为 fa-icon-flip 的混合器，接收三个参数 $horiz（水平缩放值）、$vert（垂直缩放值）和 $rotation（用于 IE 的旋转值） @mixin fa-icon-flip($horiz, $vert, $rotation) { + // 在 Internet Explorer 中设置翻转效果 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; + // 在 WebKit 浏览器内核中设置缩放效果以实现翻转 -webkit-transform: scale($horiz, $vert); - -ms-transform: scale($horiz, $vert); - transform: scale($horiz, $vert); + // 在 Internet Explorer 中设置缩放效果以实现翻转 + -ms-transform: scale($horiz, $vert); + // 在标准 CSS 环境中设置缩放效果以实现翻转 + transform: scale($horiz, $vert); } - -// Only display content to screen readers. A la Bootstrap 4. +// 仅将内容显示给屏幕阅读器。类似于 Bootstrap 4 的做法。 // -// See: http://a11yproject.com/posts/how-to-hide-content/ - +// 参考：http://a11yproject.com/posts/how-to-hide-content/ @mixin sr-only { + // 将元素设置为绝对定位 position: absolute; + // 设置宽度为 1 像素 width: 1px; + // 设置高度为 1 像素 height: 1px; + // 清除内边距 padding: 0; + // 设置外边距为 -1 像素 margin: -1px; + // 设置内容溢出时隐藏 overflow: hidden; + // 使用裁剪矩形将内容隐藏 clip: rect(0,0,0,0); + // 清除边框 border: 0; } -// Use in conjunction with .sr-only to only display content when it's focused. +// 与.sr-only 结合使用，仅在元素获得焦点时显示内容。 // -// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// 对于“跳转到主要内容”链接很有用；参考 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // -// Credit: HTML5 Boilerplate - +// 来源：HTML5 Boilerplate @mixin sr-only-focusable { + // 当元素处于激活状态或获得焦点时应用以下样式 &:active, &:focus { + // 将元素设置为静态定位 position: static; + // 设置宽度为自动 width: auto; + // 设置高度为自动 height: auto; + // 清除外边距 margin: 0; + // 使内容溢出时可见 overflow: visible; + // 清除裁剪矩形 clip: auto; } -} +} \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_path.scss b/web/static/lib/font-awesome-4.7.0/scss/_path.scss index bb457c2..57a243c 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_path.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_path.scss @@ -1,15 +1,25 @@ /* FONT PATH * -------------------------- */ -@font-face { + @font-face { + /* 定义字体的名称为'FontAwesome'。 */ font-family: 'FontAwesome'; + /* 加载字体文件，首先尝试加载.eot 格式的字体文件，并包含版本号。 */ src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); + /* 针对 Internet Explorer 的修复，使用.iefix 和版本号，格式为'embedded-opentype'。 */ src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), + /* 加载.woff2 格式的字体文件，并包含版本号。 */ url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), + /* 加载.woff 格式的字体文件，并包含版本号。 */ url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), + /* 加载.ttf 格式的字体文件，并包含版本号。 */ url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), + /* 加载.svg 格式的字体文件，并包含版本号和特定的标识符。 */ url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); -// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts + /* 这一行是在开发字体时使用的，加载.opentype 格式的字体文件。 */ + // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); + /* 设置字体的粗细为正常。 */ font-weight: normal; + /* 设置字体的样式为正常。 */ font-style: normal; -} +} \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_rotated-flipped.scss b/web/static/lib/font-awesome-4.7.0/scss/_rotated-flipped.scss index a3558fd..7d84b75 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_rotated-flipped.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_rotated-flipped.scss @@ -1,20 +1,44 @@ // Rotated & Flipped Icons // ------------------------- -.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } -.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } -.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } +/* 使用 Sass 的插值语法创建选择器，用于设置元素旋转 90 度。 */ +.#{$fa-css-prefix}-rotate-90 { + /* 调用名为 fa-icon-rotate 的混合器，并传入参数 90 度和 1。 */ + @include fa-icon-rotate(90deg, 1); +} -.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } -.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } +/* 使用 Sass 的插值语法创建选择器，用于设置元素旋转 180 度。 */ +.#{$fa-css-prefix}-rotate-180 { + /* 调用名为 fa-icon-rotate 的混合器，并传入参数 180 度和 2。 */ + @include fa-icon-rotate(180deg, 2); +} + +/* 使用 Sass 的插值语法创建选择器，用于设置元素旋转 270 度。 */ +.#{$fa-css-prefix}-rotate-270 { + /* 调用名为 fa-icon-rotate 的混合器，并传入参数 270 度和 3。 */ + @include fa-icon-rotate(270deg, 3); +} + +/* 使用 Sass 的插值语法创建选择器，用于设置元素水平翻转。 */ +.#{$fa-css-prefix}-flip-horizontal { + /* 调用名为 fa-icon-flip 的混合器，并传入参数 -1、1 和 0。 */ + @include fa-icon-flip(-1, 1, 0); +} + +/* 使用 Sass 的插值语法创建选择器，用于设置元素垂直翻转。 */ +.#{$fa-css-prefix}-flip-vertical { + /* 调用名为 fa-icon-flip 的混合器，并传入参数 1、-1 和 2。 */ + @include fa-icon-flip(1, -1, 2); +} // Hook for IE8-9 // ------------------------- -:root .#{$fa-css-prefix}-rotate-90, -:root .#{$fa-css-prefix}-rotate-180, -:root .#{$fa-css-prefix}-rotate-270, -:root .#{$fa-css-prefix}-flip-horizontal, -:root .#{$fa-css-prefix}-flip-vertical { +/* 在根元素下，针对特定选择器设置过滤器为 none，用于处理旧版本的 Internet Explorer。 */ +:root.#{$fa-css-prefix}-rotate-90, +:root.#{$fa-css-prefix}-rotate-180, +:root.#{$fa-css-prefix}-rotate-270, +:root.#{$fa-css-prefix}-flip-horizontal, +:root.#{$fa-css-prefix}-flip-vertical { filter: none; -} +} \ No newline at end of file diff --git a/web/static/lib/font-awesome-4.7.0/scss/_stacked.scss b/web/static/lib/font-awesome-4.7.0/scss/_stacked.scss index aef7403..587b04e 100644 --- a/web/static/lib/font-awesome-4.7.0/scss/_stacked.scss +++ b/web/static/lib/font-awesome-4.7.0/scss/_stacked.scss @@ -1,20 +1,48 @@ // Stacked Icons // ------------------------- +/* 使用 Sass 的插值语法创建选择器，用于设置堆叠容器的样式。 */ .#{$fa-css-prefix}-stack { + /* 将元素设置为相对定位。 */ position: relative; + /* 将元素显示为内联块级元素。 */ display: inline-block; + /* 设置宽度为 2em。 */ width: 2em; + /* 设置高度为 2em。 */ height: 2em; + /* 设置行高为 2em。 */ line-height: 2em; + /* 将元素垂直对齐方式设置为中间对齐。 */ vertical-align: middle; } -.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { + +/* 使用 Sass 的插值语法创建选择器，用于设置堆叠元素的样式。 */ +.#{$fa-css-prefix}-stack-1x,.#{$fa-css-prefix}-stack-2x { + /* 将元素设置为绝对定位。 */ position: absolute; + /* 将元素的左边位置设置为 0。 */ left: 0; + /* 设置元素宽度为 100%。 */ width: 100%; + /* 将文本居中对齐。 */ text-align: center; } -.#{$fa-css-prefix}-stack-1x { line-height: inherit; } -.#{$fa-css-prefix}-stack-2x { font-size: 2em; } -.#{$fa-css-prefix}-inverse { color: $fa-inverse; } + +/* 使用 Sass 的插值语法创建选择器，用于设置堆叠元素中尺寸为 1x 的元素的行高。 */ +.#{$fa-css-prefix}-stack-1x { + /* 继承父元素的行高。 */ + line-height: inherit; +} + +/* 使用 Sass 的插值语法创建选择器，用于设置堆叠元素中尺寸为 2x 的元素的字体大小。 */ +.#{$fa-css-prefix}-stack-2x { + /* 设置字体大小为 2em。 */ + font-size: 2em; +} + +/* 使用 Sass 的插值语法创建选择器，用于设置具有反向样式的元素的文本颜色。 */ +.#{$fa-css-prefix}-inverse { + /* 设置文本颜色为变量 $fa-inverse 所代表的颜色。 */ + color: $fa-inverse; +} diff --git a/web/static/lib/jq-module/jquery.particleground.min.js b/web/static/lib/jq-module/jquery.particleground.min.js index dac720c..dae4d31 100644 --- a/web/static/lib/jq-module/jquery.particleground.min.js +++ b/web/static/lib/jq-module/jquery.particleground.min.js @@ -33,6 +33,7 @@ */ !function (a) { function b(b, d) { + // 定义插件的主要构造函数，接受一个 DOM 元素和配置对象作为参数 function e() { if (w) { $canvas = a(''), v.prepend($canvas), p = $canvas[0], q = p.getContext("2d"), f(); @@ -50,10 +51,12 @@ } } + // 设置 canvas 的大小和绘图上下文的样式 function f() { p.width = v.width(), p.height = v.height(), q.fillStyle = d.dotColor, q.strokeStyle = d.lineColor, q.lineWidth = d.lineWidth } + // 动画循环函数，绘制粒子和连接线条 function g() { if (w) { s = a(window).width(), t = a(window).height(), q.clearRect(0, 0, p.width, p.height); @@ -63,6 +66,7 @@ } } + // 当窗口大小变化时，调整粒子数量和位置 function h() { for (f(), i = x.length - 1; i >= 0; i--) (x[i].position.x > v.width() || x[i].position.y > v.height()) && x.splice(i, 1); var a = Math.round(p.width * p.height / d.density); @@ -73,14 +77,17 @@ for (i = x.length - 1; i >= 0; i--) x[i].setStackPos(i) } + // 暂停动画 function j() { E = !0 } + // 恢复动画 function k() { E = !1, g() } + // 粒子构造函数 function l() { switch (this.stackPos, this.active = !0, this.layer = Math.ceil(3 * Math.random()), this.parallaxOffsetX = 0, this.parallaxOffsetY = 0, this.position = {x: Math.ceil(Math.random() * p.width), y: Math.ceil(Math.random() * p.height)}, this.speed = {}, d.directionX) { case"left": @@ -104,27 +111,34 @@ } } + // 获取或设置配置选项 function m(a, b) { return b ? void(d[a] = b) : d[a] } + // 销毁插件 function n() { v.find(".pg-canvas").remove(), o("onDestroy"), v.removeData("plugin_" + c) } + // 调用配置中的特定回调函数 function o(a) { void 0 !== d[a] && d[a].call(u) } var p, q, r, s, t, u = b, v = a(b), w = !!document.createElement("canvas").getContext, x = [], y = 0, z = 0, A = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i), B = !!window.DeviceOrientationEvent, C = 0, D = 0, E = !1; return d = a.extend({}, a.fn[c].defaults, d), l.prototype.draw = function () { + // 开始绘制一个圆形粒子 q.beginPath(), q.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, d.particleRadius / 2, 0, 2 * Math.PI, !0), q.closePath(), q.fill(), q.beginPath(); for (var a = x.length - 1; a > this.stackPos; a--) { var b = x[a], c = this.position.x - b.position.x, e = this.position.y - b.position.y, f = Math.sqrt(c * c + e * e).toFixed(2); + // 如果两个粒子距离小于配置的接近度，绘制连接线条 f < d.proximity && (q.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY), d.curvedLines ? q.quadraticCurveTo(Math.max(b.position.x, b.position.x), Math.min(b.position.y, b.position.y), b.position.x + b.parallaxOffsetX, b.position.y + b.parallaxOffsetY) : q.lineTo(b.position.x + b.parallaxOffsetX, b.position.y + b.parallaxOffsetY)) } + //绘制线条 q.stroke(), q.closePath() }, l.prototype.updatePosition = function () { + // 如果启用视差效果 if (d.parallax) { if (B && !A) { var a = (s - 0) / 60; @@ -132,6 +146,7 @@ var b = (t - 0) / 60; pointerY = (D - -30) * b + 0 } else pointerX = y, pointerY = z; + // 计算视差目标 X 和 Y 坐标，并逐渐更新偏移量 this.parallaxTargX = (pointerX - s / 2) / (d.parallaxMultiplier * this.layer), this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10, this.parallaxTargY = (pointerY - t / 2) / (d.parallaxMultiplier * this.layer), this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10 } switch (d.directionX) { @@ -154,6 +169,7 @@ default: (this.position.y + this.speed.y + this.parallaxOffsetY > v.height() || this.position.y + this.speed.y + this.parallaxOffsetY < 0) && (this.speed.y = -this.speed.y) } + // 更新粒子的位置 this.position.x += this.speed.x, this.position.y += this.speed.y }, l.prototype.setStackPos = function (a) { this.stackPos = a @@ -161,6 +177,7 @@ } var c = "particleground"; + // 定义 jQuery 插件 a.fn[c] = function (d) { if ("string" == typeof arguments[0]) { var e, f = arguments[0], g = Array.prototype.slice.call(arguments, 1); @@ -184,6 +201,7 @@ */ function () { for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"]; + // 如果浏览器不支持 requestAnimationFrame，定义一个兼容的函数 window.requestAnimationFrame || (window.requestAnimationFrame = function (b) { var c = (new Date).getTime(), d = Math.max(0, 16 - (c - a)), e = window.setTimeout(function () { b(c + d) diff --git a/web/static/lib/layui-v2.5.5/font/iconfont.svg b/web/static/lib/layui-v2.5.5/font/iconfont.svg index f407df7..f7590e0 100644 --- a/web/static/lib/layui-v2.5.5/font/iconfont.svg +++ b/web/static/lib/layui-v2.5.5/font/iconfont.svg @@ -4,20 +4,24 @@ 2013-9-30: Created. --> - -Created by iconfont - - - - - + + + Created by iconfont + + + + + + + + + diff --git a/web/templates/src/src_customer.html b/web/templates/src/src_customer.html index dd9acf1..2dfac00 100644 --- a/web/templates/src/src_customer.html +++ b/web/templates/src/src_customer.html @@ -14,42 +14,51 @@
+ 搜索信息
+
+
+
+ +
+
-
- -
+
+ +
+
- -
+
+ +
+ - + +
@@ -60,31 +69,30 @@ table = layui.table; table.render({ - elem: '#currentTable_customer', - url: "{{ url_for('api_src_customer') }}", - toolbar: '#toolbarDemo', - defaultToolbar: ['filter', 'exports', 'print', { - title: '提示', - layEvent: 'LAYTABLE_TIPS', - icon: 'layui-icon-tips' - }], - cols: [[ - {field: 'id', width: 80, title: 'ID', sort: true}, - {field: 'cus_name', width: 250, title: '厂商名'}, - {field: 'cus_home', width: 250, title: '厂商主页'}, - {field: 'cus_number', width: 130, title: '资产数'}, - {field: 'cus_number_port', width: 130, title: '端口数'}, - {field: 'cus_number_vul', width: 130, title: '待扫描资产'}, - {field: 'cus_number_task', width: 130, title: '待探测任务'}, - {field: 'cus_time', width: 300, title: '添加时间'}, - {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} - ]], - limits: [10, 15, 20, 25, 50, 100], - limit: 20, - page: true, - skin: 'line' - }); - + elem: '#currentTable_customer', + url: "{{ url_for('api_src_customer') }}", + toolbar: '#toolbarDemo', + defaultToolbar: ['filter', 'exports', 'print', { + title: '提示', + layEvent: 'LAYTABLE_TIPS', + icon: 'layui-icon-tips' + }], + cols: [[ + {field: 'id', width: 80, title: 'ID', sort: true}, + {field: 'cus_name', width: 250, title: '厂商名'}, + {field: 'cus_home', width: 250, title: '厂商主页'}, + {field: 'cus_number', width: 130, title: '资产数'}, + {field: 'cus_number_port', width: 130, title: '端口数'}, + {field: 'cus_number_vul', width: 130, title: '待扫描资产'}, + {field: 'cus_number_task', width: 130, title: '待探测任务'}, + {field: 'cus_time', width: 300, title: '添加时间'}, + {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"} + ]], + limits: [10, 15, 20, 25, 50, 100], + limit: 20, + page: true, + skin: 'line' +}); // 监听搜索操作 form.on('submit(data-search-btn)', function (data) { var result = JSON.stringify(data.field); @@ -123,32 +131,39 @@ }); - table.on('tool(currentTableFilter)', function (obj) { - var data = obj.data; - if (obj.event === 'delete') { - layer.confirm('确定删除该厂商吗?一旦删除则会删除全部相关联资产数据', function (index) { - $.ajax({ - url: "{{ url_for('api_src_customer') }}", - data: JSON.stringify(data), - contentType: 'application/json;charset=UTF-8', - dataType: 'json', - type: 'delete', - success: function (result) { - if (result.status_code == 200) { - layer.alert('删除厂商成功!', {title: '提示', icon: 1}) - obj.del(); - layer.close(index); - } else { - layer.alert(result.msg, {title: '提示', icon: 2}) - } - }, - error: function (e) { - layer.alert(JSON.stringify(e), {title: '提示', icon: 2}) - } - }) - }); - } + table.on('tool(currentTableFilter)', function(obj) { + var data = obj.data; + // 如果触发的事件是'delete'（可能是表格中的删除操作） + if (obj.event === 'delete') { + // 弹出确认框，询问用户是否确定删除该厂商及相关联资产数据 + layer.confirm('确定删除该厂商吗?一旦删除则会删除全部相关联资产数据', function(index) { + // 发起 AJAX 请求 + $.ajax({ + url: "{{ url_for('api_src_customer') }}", + data: JSON.stringify(data), + contentType: 'application/json;charset=UTF-8', + dataType: 'json', + type: 'delete', + success: function(result) { + // 如果服务器返回状态码为 200，表示删除成功 + if (result.status_code == 200) { + layer.alert('删除厂商成功!', { title: '提示', icon: 1 }); + // 删除表格中的当前行 + obj.del(); + layer.close(index); + } else { + // 如果服务器返回其他状态码，弹出错误提示信息 + layer.alert(result.msg, { title: '提示', icon: 2 }); + } + }, + error: function(e) { + // 如果请求发生错误，弹出错误提示信息 + layer.alert(JSON.stringify(e), { title: '提示', icon: 2 }); + } + }); }); + } +}); }); diff --git a/web/templates/src/src_customer_add.html b/web/templates/src/src_customer_add.html index 08503e3..40cfa7b 100644 --- a/web/templates/src/src_customer_add.html +++ b/web/templates/src/src_customer_add.html @@ -1,38 +1,51 @@ + + 添加厂商 + + + + - + + + /* 设置页面背景颜色为白色 */ + background-color: #ffffff; + } +
+
- + + + 添加重复厂商名会失败
+
- + +
+
+
diff --git a/web/templates/src/src_ports.html b/web/templates/src/src_ports.html index 73a31df..8f6239d 100644 --- a/web/templates/src/src_ports.html +++ b/web/templates/src/src_ports.html @@ -14,48 +14,68 @@
+ 搜索信息
+
+
+
+ +
+
+
+ +
+
+
+ +
+
-
- -
+
+ +
+
+
+ +
+ -
+
diff --git a/web/templates/src/src_task.html b/web/templates/src/src_task.html index a51dec9..678999d 100644 --- a/web/templates/src/src_task.html +++ b/web/templates/src/src_task.html @@ -1,56 +1,71 @@ - - - 资产任务管理 - - - - - - + + + + + 资产任务管理 + + + + + + + + + + +
+ 搜索信息
+
+
+
+ +
+
-
- -
+
+ +
+
+
+ +
+ -
+ - +
diff --git a/web/templates/src/src_task_add.html b/web/templates/src/src_task_add.html index 34b3ab9..a9dfb43 100644 --- a/web/templates/src/src_task_add.html +++ b/web/templates/src/src_task_add.html @@ -1,19 +1,27 @@ - - - 添加任务 - - - - - - - + + + + + 添加任务 + + + + + + + + + + + +
diff --git a/web/templates/src/src_urls.html b/web/templates/src/src_urls.html index 1043649..fb575ef 100644 --- a/web/templates/src/src_urls.html +++ b/web/templates/src/src_urls.html @@ -1,58 +1,84 @@ - - - 资产管理 - - - - - - + + + + + 资产管理 + + + + + + + + + + +
+ 搜索信息
+
+
+
+ +
+
+
+ +
+
+
+ +
+
-
- -
+
+ +
+
diff --git a/web/templates/src/src_vul.html b/web/templates/src/src_vul.html index 04366d2..1b1f84f 100644 --- a/web/templates/src/src_vul.html +++ b/web/templates/src/src_vul.html @@ -1,32 +1,46 @@ - - - web漏洞管理 - - - - - - + + + + + web 漏洞管理 + + + + + + + + + + +
+ 搜索信息
+
+
+
+ +
+
-
- -
+
+ +
+
@@ -47,9 +62,10 @@