├── src ├── scss │ └── common │ │ ├── base.scss │ │ ├── _index.scss │ │ ├── _variable.scss │ │ ├── _utils.scss │ │ └── _mixin.scss ├── commonjs │ ├── data.js │ ├── dom.js │ ├── storage.js │ └── utils.js ├── style.scss ├── index.js └── lib │ ├── d-loading.scss │ ├── d-loading.js │ └── type.js ├── static ├── demo.png └── font-icon │ ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg │ ├── Read Me.txt │ ├── demo-files │ ├── demo.js │ └── demo.css │ ├── musicsvg │ ├── search.svg │ ├── menu.svg │ ├── community.svg │ ├── message.svg │ ├── music.svg │ ├── market.svg │ ├── vip.svg │ └── wangyiyun.svg │ ├── font.css │ ├── style.css │ └── demo.html ├── .gitattributes ├── .gitignore ├── README.md ├── index.html ├── lib ├── index.css └── index.js ├── package.json └── webpack.config.js /src/scss/common/base.scss: -------------------------------------------------------------------------------- 1 | @import './_index.scss' -------------------------------------------------------------------------------- /static/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-loading/master/static/demo.png -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-loading/master/static/font-icon/fonts/icomoon.eot -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-loading/master/static/font-icon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=javascript 2 | *.css linguist-language=javascript 3 | *.html linguist-language=javascript -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-loading/master/static/font-icon/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/scss/common/_index.scss: -------------------------------------------------------------------------------- 1 | @import "node_modules/compass-mixins/lib/compass/css3"; 2 | @import './_variable'; 3 | @import './_utils'; 4 | @import './_mixin'; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln -------------------------------------------------------------------------------- /src/commonjs/data.js: -------------------------------------------------------------------------------- 1 | // 数据交互相关方法 2 | // 比如图片加载 ajax请求的封装等等 3 | export const data = { 4 | // 图片加载的一个promise path 是图片的地址 5 | preloadImage (path) { 6 | return new Promise((resolve, reject) => { 7 | let image = new Image(); 8 | image.onload = resolve; 9 | image.onerror = reject; 10 | image.src = path; 11 | }); 12 | } 13 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # d-loading 2 | 3 | 4 | 一个通用的loading效果 5 | ### 使用方式 6 | 引入 7 | 
 8 | npm install @dw/d-loading
 9 |
10 | 11 | 调用 12 | 
13 | import Loading from '@dw/d-loading'
14 | import '@dw/d-loading/lib/index.css'
15 | 
16 | let dloading = new Loading(document.body)
17 | dloading.showLoading()
18 | 
19 | dloading.hideLoading()
20 | 
21 | dloading.removeLoading()
22 |
23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | d-loading 6 | 7 | 8 |
9 |

d-loading

10 | 原生loading组件，开袋即食 11 |
12 | 13 | 未曾遗忘的青春 14 |
15 |
16 | loading 1 17 | loading 2 18 |
19 | 20 | -------------------------------------------------------------------------------- /static/font-icon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import '~scss/common/_index.scss'; 2 | body,html{ 3 | margin: 0; 4 | padding: 0; 5 | height:100%; 6 | background: #111010; 7 | } 8 | body{ 9 | // background: red; 10 | @include display-flex; 11 | width: 100%; 12 | height: 100%; 13 | @include align-items(center); 14 | @include justify-content(center); 15 | @include flex-direction(column); 16 | .title{ 17 | font-size: 42px; 18 | @include colortext-l(#B32FC3, #D1A22F); 19 | @include inline-block; 20 | margin-top: 0; 21 | } 22 | .disc{ 23 | font-size: 14px; 24 | color: #f1f1f1; 25 | } 26 | .github-info{ 27 | margin-top: 40px; 28 | text-align: center; 29 | @include display-flex; 30 | @include justify-content(center); 31 | span{ 32 | color: $color_auto; 33 | font: $font_auto; 34 | font-size:14px; 35 | } 36 | } 37 | } 38 | 39 | .loading-config{ 40 | display: flex; 41 | align-items: center; 42 | margin-top: 40px; 43 | span{ 44 | display: block; 45 | width: 90px; 46 | line-height: 30px; 47 | text-align: center; 48 | border: 2px solid #aaa; 49 | color: #fff; 50 | margin: 0 10px; 51 | cursor: pointer; 52 | } 53 | } -------------------------------------------------------------------------------- /static/font-icon/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/community.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/message.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/font-icon/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?4apvsq'); 4 | src: url('fonts/icomoon.eot?4apvsq#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?4apvsq') format('truetype'), 6 | url('fonts/icomoon.woff?4apvsq') format('woff'), 7 | url('fonts/icomoon.svg?4apvsq#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-coin:before { 28 | content: "\e908"; 29 | } 30 | .icon-music:before { 31 | content: "\e904"; 32 | } 33 | .icon-community:before { 34 | content: "\e900"; 35 | } 36 | .icon-market:before { 37 | content: "\e901"; 38 | } 39 | .icon-menu:before { 40 | content: "\e902"; 41 | } 42 | .icon-message:before { 43 | content: "\e903"; 44 | } 45 | .icon-search:before { 46 | content: "\e905"; 47 | } 48 | .icon-vip:before { 49 | content: "\e906"; 50 | } 51 | .icon-wangyiyun:before { 52 | content: "\e907"; 53 | } 54 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.scss' 2 | import DLoaing from './lib/d-loading' 3 | 4 | document.getElementsByClassName('loading1')[0].onclick = () => { 5 | // 初始化 此时元素下已存在loading组件 但是还没显示 需要调用showLoading方法 6 | let loading = new DLoaing({ 7 | ele: document.body, 8 | effect: 'fade', 9 | backgroundColor: 'rgba(255,255,255,0.3)', 10 | type: 'circle', 11 | mainColor: '#ff5591', 12 | auxiliaryColor: '#ffa6c7', 13 | otherAuxiliaryColor: '#f3b0ff', 14 | // loading删除之前 15 | beforeLoadingRemoved: function () { 16 | console.log('dom此时还未删除') 17 | }, 18 | // loading结束事件 （此时dom已删除） 19 | loadingRemoved: function () { 20 | console.log('dom已删除') 21 | } 22 | }) 23 | 24 | loading.showLoading() 25 | 26 | setTimeout(function () { 27 | loading.removeLoading() 28 | }, 2000) 29 | } 30 | 31 | document.getElementsByClassName('loading2')[0].onclick = () => { 32 | // 初始化 此时元素下已存在loading组件 但是还没显示 需要调用showLoading方法 33 | let loading = new DLoaing({ 34 | ele: document.body, 35 | effect: 'fade', 36 | backgroundColor: 'rgba(255,255,255,0.3)', 37 | type: 'defalut', 38 | mainColor: '#ff5591', 39 | auxiliaryColor: '#ffa6c7', 40 | otherAuxiliaryColor: '#f3b0ff', 41 | // loading删除之前 42 | beforeLoadingRemoved: function () { 43 | console.log('dom此时还未删除') 44 | }, 45 | // loading结束事件 （此时dom已删除） 46 | loadingRemoved: function () { 47 | console.log('dom已删除') 48 | } 49 | }) 50 | 51 | loading.showLoading() 52 | 53 | setTimeout(function () { 54 | loading.removeLoading() 55 | }, 2000) 56 | } -------------------------------------------------------------------------------- /static/font-icon/musicsvg/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/d-loading.scss: -------------------------------------------------------------------------------- 1 | .d-loading { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | z-index: 9999; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | opacity: 0; 12 | visibility: hidden; 13 | background: transparent; 14 | &.fix-loading { 15 | position: fixed; 16 | } 17 | &.fade { 18 | transition:all 0.3s; 19 | } 20 | &.show{ 21 | opacity: 1; 22 | visibility: visible; 23 | &.fade { 24 | transition:all 0.3s; 25 | } 26 | } 27 | .d-loading-content { 28 | width: 200px; 29 | height: 200px; 30 | display: flex; 31 | align-items: center; 32 | justify-content: space-around; 33 | flex-direction: column; 34 | border-radius: 4px; 35 | position: relative; 36 | overflow: hidden; 37 | padding: 10px 3px; 38 | box-sizing: border-box; 39 | .d-loading-svg { 40 | width: auto; 41 | height: auto; 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | svg{ 46 | width: 100%; 47 | height: 100%; 48 | &.default{ 49 | width: 40%; 50 | height: 40%; 51 | } 52 | &.circle{ 53 | width: 40%; 54 | height: 40%; 55 | } 56 | } 57 | } 58 | .d-loading-name { 59 | width: 100%; 60 | margin: 0; 61 | padding: 2px 5px; 62 | text-align: center; 63 | text-overflow: ellipsis; 64 | overflow: hidden; 65 | white-space: nowrap; 66 | color: #f1f1f1; 67 | font-size: 14px; 68 | box-sizing: border-box; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /lib/index.css: -------------------------------------------------------------------------------- 1 | .d-loading { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | z-index: 9999; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | opacity: 0; 12 | visibility: hidden; 13 | background: transparent; } 14 | .d-loading.fix-loading { 15 | position: fixed; } 16 | .d-loading.fade { 17 | transition: all 0.3s; } 18 | .d-loading.show { 19 | opacity: 1; 20 | visibility: visible; } 21 | .d-loading.show.fade { 22 | transition: all 0.3s; } 23 | .d-loading .d-loading-content { 24 | width: 200px; 25 | height: 200px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: space-around; 29 | flex-direction: column; 30 | border-radius: 4px; 31 | position: relative; 32 | overflow: hidden; 33 | padding: 10px 3px; 34 | box-sizing: border-box; } 35 | .d-loading .d-loading-content .d-loading-svg { 36 | width: auto; 37 | height: auto; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; } 41 | .d-loading .d-loading-content .d-loading-svg svg { 42 | width: 100%; 43 | height: 100%; } 44 | .d-loading .d-loading-content .d-loading-svg svg.default { 45 | width: 40%; 46 | height: 40%; } 47 | .d-loading .d-loading-content .d-loading-svg svg.circle { 48 | width: 40%; 49 | height: 40%; } 50 | .d-loading .d-loading-content .d-loading-name { 51 | width: 100%; 52 | margin: 0; 53 | padding: 2px 5px; 54 | text-align: center; 55 | text-overflow: ellipsis; 56 | overflow: hidden; 57 | white-space: nowrap; 58 | color: #f1f1f1; 59 | font-size: 14px; 60 | box-sizing: border-box; } 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dw/d-loading", 3 | "version": "1.0.6", 4 | "description": "d-loading", 5 | "main": "/lib/index.js", 6 | "dependencies": { 7 | "hoek": "^5.0.3" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ifmiss/d-loading.js.git" 12 | }, 13 | "scripts": { 14 | "test": "echo \"Error: no test specified\" && exit 1", 15 | "build": "webpack --mode production", 16 | "dev": "webpack-dev-server --mode development --progress --colors", 17 | "watch": "webpack --progress --colors --watch" 18 | }, 19 | "keywords": [ 20 | "loading", 21 | "d-loading" 22 | ], 23 | "author": "daiwei", 24 | "license": "ISC", 25 | "devDependencies": { 26 | "atob": ">=2.1.0", 27 | "babel-core": "^6.26.0", 28 | "babel-loader": "^7.1.4", 29 | "babel-polyfill": "^6.26.0", 30 | "babel-preset-env": "^1.6.1", 31 | "babel-preset-latest": "^6.24.1", 32 | "better-scroll": "^1.8.4", 33 | "compass-mixins": "^0.12.10", 34 | "cryptiles": ">=4.1.2", 35 | "css-loader": "^0.28.10", 36 | "deep-extend": ">=0.5.1", 37 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 38 | "html-webpack-plugin": "^3.0.6", 39 | "macaddress": ">=0.2.9", 40 | "node-sass": "^4.11.0", 41 | "randomatic": ">=3.0.0", 42 | "sass-loader": "^6.0.7", 43 | "style-loader": "^0.20.3", 44 | "stylus": "^0.54.5", 45 | "stylus-loader": "^3.0.2", 46 | "url-loader": "^1.0.1", 47 | "url-parse": ">=1.4.3", 48 | "webpack": "^4.1.1", 49 | "webpack-cli": "^2.0.12", 50 | "webpack-dev-server": "^3.1.1" 51 | }, 52 | "bugs": { 53 | "url": "https://github.com/ifmiss/d-loading.js/issues" 54 | }, 55 | "homepage": "https://github.com/ifmiss/d-loading.js#readme", 56 | "directories": { 57 | "lib": "lib" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/market.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/common/_variable.scss: -------------------------------------------------------------------------------- 1 | $text_color_default: #aaa; 2 | 3 | // 文字颜色 4 | $color_primary: #0099FF; 5 | $color_primary_deep: #0033FF; 6 | 7 | $color_danger: #FF0066; 8 | $color_danger_deep: #CC3366; 9 | 10 | $color_warning: #FFCC66; 11 | $color_warning_deep: #FFCC33; 12 | 13 | $color_success: #33CC99; 14 | $color_success_deep: #339966; 15 | 16 | $color_auto: #ffffff; 17 | $color_default: #f1f1f1; 18 | $color_split: #D8D8D8; 19 | 20 | // 字体 21 | $font-auto: Arial,"Helvetica Neue",Helvetica,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; 22 | 23 | 24 | // 文字颜色 25 | // 标题和重要内容颜色 26 | $text_main: #444444; 27 | 28 | // 比text_main 稍微低一点的颜色 29 | $text_main_s: #666666; 30 | 31 | // 比text_auto 一般低一点的颜色 32 | $text_main_l: #888888; 33 | 34 | // 比text_auto 大于一般低的颜色 35 | $text_main_m: #999999; 36 | 37 | // 比text_auto 最低的颜色 38 | $text_main_x: #a1a1a1; 39 | 40 | // 白色 41 | $text_auto: #ffffff; 42 | 43 | // 通常用于无法选中点击的效果 44 | $text_default: #e1e1e1; 45 | 46 | // 主色调颜色 47 | $text_primary: #2EB253; 48 | 49 | // 警告提示文字颜色 50 | $text_danger: #2EB253; 51 | 52 | // 错误提示文字颜色 53 | $text_warning: #2EB253; 54 | 55 | // 成功的文字颜色 56 | $text_success: #2EB253; 57 | 58 | 59 | // 字体 60 | // @font-face { 61 | // font-family: 'robotothin'; 62 | // src: url("./../../../statfonts/roboto-thin/roboto-thin.eot");/* IE9 Compat Modes */ 63 | // src: url("./../../../statfonts/roboto-thin/roboto-thin.eot?iefix") format("embedded-opentype"), /* IE6 - IE8 */ 64 | // url("./../../../statfonts/roboto-thin/roboto-thin.woff") format("woff"), /* chorme,firefox */ 65 | // url("./../../../statfonts/roboto-thin/roboto-thin.ttf") format("truetype"), /* chorme,firefox,oprea,saf */ 66 | // url("./../../../statfonts/roboto-thin/roboto-thin.svg#robotothin") format("svg"); 67 | // font-weight: normal; 68 | // font-style: normal; 69 | // } -------------------------------------------------------------------------------- /src/commonjs/dom.js: -------------------------------------------------------------------------------- 1 | export const dom = { 2 | // 判断元素是否有某一个className 3 | // el 被判断的元素 4 | // className class 的名称 5 | hasClass (el, className) { 6 | let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') 7 | return reg.test(el.className) 8 | }, 9 | 10 | // 给一个元素添加className 11 | // el 要添加的元素 12 | // className class 的名称 13 | addClass (el, className) { 14 | if (dom.hasClass(el, className)) { 15 | return 16 | } 17 | 18 | let newClass = el.className.split(' ') 19 | newClass.push(className) 20 | el.className = newClass.join(' ') 21 | }, 22 | 23 | // 给一个元素删除className 24 | // el 要删除的元素 25 | // className class 的名称 26 | removeClass (el, className) { 27 | if (dom.hasClass(el, className)) { 28 | let newClass = el.className.split(' ') 29 | newClass.forEach((value, index, array) => { 30 | if (value === className) { 31 | newClass.splice(index, 1) 32 | } 33 | }) 34 | el.className = newClass.join(' ') 35 | } 36 | }, 37 | 38 | // 获取 、添加属性 39 | // el 要获取添加的元素 40 | // dataname 属性的名字 41 | // setValue 不存在则是获取的操作 存在就是设置的操作 其值就是设置的值 42 | getData (el, dataname, setValue) { 43 | if(setValue) { 44 | el.setAttribute(dataname, setValue) 45 | } else { 46 | el.getAttribute(dataname) 47 | } 48 | }, 49 | 50 | // 在页面中插入一个css的样式 51 | // url 样式文件的地址 52 | addCss (url) { 53 | let linkElm = document.createElement('link'); 54 | linkElm.setAttribute('rel', 'stylesheet'); 55 | linkElm.setAttribute('type', 'text/css'); 56 | linkElm.setAttribute('href', url); 57 | document.head.appendChild(linkElm); 58 | }, 59 | 60 | // 在页面中插入一个js的样式 61 | // src 为js的地址 62 | addJs (src) { 63 | let script = document.createElement("script"); 64 | script.type = "text/script"; 65 | script.src = src; 66 | document.getElementsByTagName("html")[0].appendChild(script); 67 | }, 68 | 69 | // 获取滚动条的宽度 70 | getScrollWidth () { 71 | let noScroll, //没有scroll时候的 clientWidth 72 | scroll, //有scroll时候的 clientWidth 73 | oDiv = document.createElement('div'); //创建一个div 之后再删除 74 | oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; 75 | noScroll = document.body.appendChild(oDiv).clientWidth; 76 | oDiv.style.overflowY = 'scroll'; 77 | scroll = oDiv.clientWidth; 78 | document.body.removeChild(oDiv); 79 | return noScroll - scroll; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /static/font-icon/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 32px; 151 | } 152 | .fs2 { 153 | font-size: 32px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/vip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/common/_utils.scss: -------------------------------------------------------------------------------- 1 | @import './_variable.scss'; 2 | // 浮动 3 | .right{ 4 | float: right; 5 | } 6 | 7 | .left{ 8 | float: left; 9 | } 10 | 11 | .center{ 12 | margin: 0 auto; 13 | float: none; 14 | } 15 | 16 | // 清除浮动 17 | .clear-both{ 18 | clear: both; 19 | height:1px; 20 | margin-top:-1px; 21 | overflow:hidden; 22 | &:before{ 23 | display:none; 24 | } 25 | &:after{ 26 | display:none; 27 | } 28 | } 29 | 30 | .border-box{ 31 | @include box-sizing(border-box); 32 | } 33 | 34 | .content-wrap{ 35 | @include box-sizing(content-wrap); 36 | } 37 | 38 | .block_area{ 39 | margin: 0 auto; 40 | position: relative; 41 | font-size: 14px; 42 | } 43 | 44 | // inline-block对齐 或者文本对齐 45 | .text-left{ 46 | text-align:left; 47 | } 48 | 49 | .text-right{ 50 | text-align:right; 51 | } 52 | 53 | .text-center{ 54 | text-align:center; 55 | } 56 | 57 | .text-bold{ 58 | font-weight:bold; 59 | } 60 | 61 | .activeB{ 62 | display: block; 63 | } 64 | 65 | .activeF{ 66 | display: flex; 67 | } 68 | 69 | .activeN{ 70 | display:none; 71 | } 72 | 73 | 74 | @for $i from 0 through 30 { 75 | .padding-top-#{$i}{ 76 | padding-top: $i * 1px; 77 | } 78 | .padding-left-#{$i}{ 79 | padding-left: $i * 1px; 80 | } 81 | .padding-right-#{$i}{ 82 | padding-right: $i * 1px; 83 | } 84 | .padding-bottom-#{$i}{ 85 | padding-bottom: $i * 1px; 86 | } 87 | .padding-#{$i}{ 88 | padding: $i * 1px; 89 | } 90 | 91 | //-------------------- 92 | 93 | .margin-top-#{$i}{ 94 | margin-top: $i * 1px; 95 | } 96 | .margin-left-#{$i}{ 97 | margin-left: $i * 1px; 98 | } 99 | .margin-right-#{$i}{ 100 | margin-right: $i * 1px; 101 | } 102 | .margin-bottom-#{$i}{ 103 | margin-bottom: $i * 1px; 104 | } 105 | .margin-#{$i}{ 106 | padding: $i * 1px; 107 | } 108 | 109 | 110 | // ------------------- 111 | 112 | .text-indent-#{$i}{ 113 | text-indent: $i * 1px; 114 | } 115 | 116 | .border-r-#{$i}{ 117 | @include border-radius($i * 1px) 118 | } 119 | 120 | .m-padding-top-#{$i}{ 121 | padding-top: px75rem($i); 122 | } 123 | .m-padding-left-#{$i}{ 124 | padding-left: px75rem($i); 125 | } 126 | .m-padding-right-#{$i}{ 127 | padding-right: px75rem($i); 128 | } 129 | .m-padding-bottom-#{$i}{ 130 | padding-bottom: px75rem($i); 131 | } 132 | .m-padding-#{$i}{ 133 | padding: px75rem($i); 134 | } 135 | 136 | //-------------------- 137 | 138 | .m-margin-top-#{$i}{ 139 | margin-top: px75rem($i); 140 | } 141 | .m-margin-left-#{$i}{ 142 | margin-left: px75rem($i); 143 | } 144 | .m-margin-right-#{$i}{ 145 | margin-right: px75rem($i); 146 | } 147 | .m-margin-bottom-#{$i}{ 148 | margin-bottom: px75rem($i); 149 | } 150 | .m-margin-#{$i}{ 151 | padding: px75rem($i); 152 | } 153 | 154 | 155 | // ------------------- 156 | 157 | .m-text-indent-#{$i}{ 158 | text-indent: px75rem($i); 159 | } 160 | 161 | .m-border-r-#{$i}{ 162 | @include border-radius(px75rem($i)) 163 | } 164 | } 165 | 166 | @for $i from 10 through 50 { 167 | @if ($i % 2 == 0) { 168 | .m-size-#{$i}{ 169 | font-size: px75rem($i); 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); // 用于访问内置插件 2 | const path = require('path'); 3 | 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 6 | 7 | const extractSass = new ExtractTextPlugin({ 8 | filename: "[name].css", 9 | disable: process.env.NODE_ENV === "development" 10 | }); 11 | 12 | const resolve = function (dir) { 13 | return path.resolve(__dirname, dir); 14 | } 15 | 16 | module.exports = { 17 | entry: { 18 | // index: './src/index.js', 19 | index: './src/lib/d-loading.js', 20 | }, 21 | output: { 22 | path: path.resolve(__dirname, 'lib'), 23 | publicPath: '', 24 | filename: '[name].js', 25 | libraryTarget: 'umd' 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.css$/, 31 | use: ExtractTextPlugin.extract({ 32 | fallback:"style-loader", 33 | use:["css-loader"] 34 | }) 35 | }, 36 | { 37 | test: /\.scss$/, 38 | use: ExtractTextPlugin.extract({ 39 | fallback:"style-loader", 40 | use:[ 41 | { 42 | loader: 'css-loader' 43 | }, 44 | { 45 | loader: 'sass-loader' 46 | } 47 | // { 48 | // loader: 'sass-resources-loader', 49 | // options: { 50 | // resources: path.resolve(__dirname, 'src/scss/base.scss') 51 | // } 52 | // } 53 | ] 54 | }) 55 | }, 56 | { 57 | test: /\.styl$/, 58 | use: ExtractTextPlugin.extract({ 59 | fallback:"style-loader", 60 | use:["css-loader","stylus-loader"] 61 | }) 62 | }, 63 | { 64 | test: /\.(ttf|eot|svg|woff|woff2)$/, 65 | use: [ 66 | { 67 | loader: 'url-loader' 68 | } 69 | ] 70 | }, 71 | { 72 | test: /\.js$/, 73 | exclude: /(node_modules)/, 74 | use: { 75 | loader: 'babel-loader', 76 | options: { 77 | presets: ["env"] 78 | } 79 | } 80 | }, 81 | { 82 | test: /\.(png|jpg|gif)$/, 83 | use: [ 84 | { 85 | loader: 'url-loader', 86 | options: { 87 | limit: 8192 88 | } 89 | } 90 | ] 91 | }, 92 | ] 93 | }, 94 | plugins: [ 95 | // new HtmlWebpackPlugin ({ 96 | // filename: 'index.html', 97 | // template: 'index.html', 98 | // inject: true 99 | // }), 100 | extractSass 101 | ], 102 | devServer: { 103 | // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用： 104 | contentBase: "./", 105 | // 端口号 106 | port: 1996, 107 | //当有编译器错误或警告时，在浏览器中显示全屏覆盖。默认禁用。如果您只想显示编译器错误： 108 | noInfo: true, 109 | // 配置端口号 110 | overlay: true, 111 | }, 112 | resolve: { 113 | alias: { 114 | 'src': resolve('src'), 115 | 'commonjs': resolve('src/commonjs'), 116 | 'scss': resolve('src/scss'), 117 | 'stylus': resolve('src/stylus'), 118 | 'script': resolve('src/script'), 119 | 'static': resolve('static'), 120 | } 121 | }, 122 | optimization: { 123 | splitChunks: { 124 | chunks: "all", 125 | minSize: 30000, 126 | minChunks: 3, 127 | maxAsyncRequests: 5, 128 | maxInitialRequests: 3, 129 | name: true, 130 | cacheGroups: { 131 | default: { 132 | minChunks: 2, 133 | priority: -20, 134 | reuseExistingChunk: true, 135 | }, 136 | vendors: { 137 | test: /[\\/]node_modules[\\/]/, 138 | priority: -10 139 | } 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/commonjs/storage.js: -------------------------------------------------------------------------------- 1 | export const storage = { 2 | // 设置Cookie 3 | // name: 为cookie的名字 4 | // value: 为对应的值 5 | // exp: 为过期时间 单位为毫秒 默认设置为2个小时的过期时间 6 | setCookie (name, value, exp = 60 * 60 * 2 * 1000) { 7 | let date = new Date() 8 | date.setTime(date.getTime() + exp) 9 | document.cookie = `${name}=${escape(value)};expires=${date.toGMTString()}` 10 | }, 11 | // 获取Cookie 12 | // name: 为cookie的名字 13 | getCookie (name) { 14 | if (name) { 15 | let reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`) 16 | let arr = document.cookie.match(reg) 17 | if (arr) { 18 | // return arr[2] 19 | return arr[2] 20 | } else { 21 | return null 22 | } 23 | } else { 24 | let getAllCookies = [] 25 | if (document.cookie !== '') { 26 | let arrCookie = document.cookie.split('; ') 27 | for (let k in arrCookie) { 28 | getAllCookies.push({ 29 | name: `${unescape(arrCookie[k].split('=')[0])}`, 30 | value: `${unescape(arrCookie[k].split('=')[1])}` 31 | }) 32 | } 33 | return getAllCookies 34 | } else { 35 | return null 36 | } 37 | } 38 | }, 39 | // 删除 Cookie 40 | // name: 为cookie的名字 41 | deleteCookie (name) { 42 | let date = new Date() 43 | date.setTime(date.getTime() - 1) // 设置过期了 44 | if (name) { 45 | let cookieInfo = Storage.getCookie(name) 46 | if (cookieInfo !== null) { 47 | document.cookie = `${name}=${cookieInfo};expires=${date.toGMTString()}` 48 | } 49 | } else { 50 | let getAllCookies = Storage.getCookie() 51 | for (let k in getAllCookies) { 52 | document.cookie = `${getAllCookies[k].name}=${getAllCookies[k].value};expires=${date.toGMTString()}` 53 | } 54 | } 55 | }, 56 | 57 | // 本地存储 58 | // 是否支持本地存储 59 | isLStorage () { 60 | return window.localStorage ? true : false 61 | }, 62 | 63 | // 是否有对应的本地存储内容 64 | hasLStorage () { 65 | if(this.isLStorage) { 66 | return !(window.localStorage.getItem(storage_name) === null) 67 | } else { 68 | return false 69 | } 70 | }, 71 | 72 | // 设置本地存储 73 | setLStorage (key, value) { 74 | if (this.lStorage) { 75 | window.localStorage.setItem(key, value) 76 | } else { 77 | return false 78 | } 79 | }, 80 | 81 | // 获取本地存储 82 | getLStorage (key) { 83 | if (this.lStorage) { 84 | return window.localStorage.getItem(key) 85 | } else { 86 | return false 87 | } 88 | }, 89 | 90 | // 清除单个本地存储 91 | rmLStorage (key) { 92 | if (this.lStorage) { 93 | window.localStorage.removeItem(key) 94 | } else { 95 | return false 96 | } 97 | }, 98 | 99 | // 清除所有本地存储 100 | clearLStorage () { 101 | if (this.lStorage) { 102 | window.localStorage.clear() 103 | } else { 104 | return false 105 | } 106 | }, 107 | 108 | // 数据存储本地 相当于下载一个文件 该文件是需要存储的数据 的方法 109 | // name 相对路径的文件名称 如 ./test.txt 110 | // data 要存储的数据 111 | saveDataAsFile (name, data) { 112 | let fake_click = (obj) => { 113 | let ev = document.createEvent("MouseEvents") 114 | ev.initMouseEvent( 115 | "click", true, false, window, 0, 0, 0, 0, 0 116 | , false, false, false, false, 0, null 117 | ) 118 | obj.dispatchEvent(ev) 119 | } 120 | 121 | let urlObject = window.URL || window.webkitURL || window 122 | let export_blob = new Blob([data]) 123 | let save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") 124 | 125 | save_link.href = urlObject.createObjectURL(export_blob) 126 | save_link.download = name 127 | fake_click(save_link) 128 | }, 129 | } -------------------------------------------------------------------------------- /static/font-icon/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?mstbet'); 4 | src: url('fonts/icomoon.eot?mstbet#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?mstbet') format('truetype'), 6 | url('fonts/icomoon.woff?mstbet') format('woff'), 7 | url('fonts/icomoon.svg?mstbet#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-playdetail:before { 28 | content: "\e925"; 29 | } 30 | .icon-pause-detail:before { 31 | content: "\e926"; 32 | } 33 | .icon-prevdetail:before { 34 | content: "\e927"; 35 | } 36 | .icon-nextdetail:before { 37 | content: "\e928"; 38 | } 39 | .icon-music-shunxu:before { 40 | content: "\e929"; 41 | } 42 | .icon-back:before { 43 | content: "\e924"; 44 | } 45 | .icon-edit-paper:before { 46 | content: "\e900"; 47 | } 48 | .icon-edit:before { 49 | content: "\e91b"; 50 | } 51 | .icon-delete:before { 52 | content: "\e923"; 53 | } 54 | .icon-add-project:before { 55 | content: "\e913"; 56 | } 57 | .icon-add:before { 58 | content: "\e921"; 59 | } 60 | .icon-list-music:before { 61 | content: "\e91d"; 62 | } 63 | .icon-night:before { 64 | content: "\e91e"; 65 | } 66 | .icon-day:before { 67 | content: "\e91f"; 68 | } 69 | .icon-community:before { 70 | content: "\e920"; 71 | } 72 | .icon-wangyi:before { 73 | content: "\e90e"; 74 | } 75 | .icon-share:before { 76 | content: "\e90f"; 77 | } 78 | .icon-play:before { 79 | content: "\e910"; 80 | } 81 | .icon-list-circle:before { 82 | content: "\e911"; 83 | } 84 | .icon-setting:before { 85 | content: "\e914"; 86 | } 87 | .icon-theme:before { 88 | content: "\e915"; 89 | } 90 | .icon-friend:before { 91 | content: "\e916"; 92 | } 93 | .icon-set-time:before { 94 | content: "\e917"; 95 | } 96 | .icon-lock:before { 97 | content: "\e918"; 98 | } 99 | .icon-car:before { 100 | content: "\e919"; 101 | } 102 | .icon-cloud:before { 103 | content: "\e91a"; 104 | } 105 | .icon-exit:before { 106 | content: "\e91c"; 107 | } 108 | .icon-place:before { 109 | content: "\e909"; 110 | } 111 | .icon-SHARE2:before { 112 | content: "\e90a"; 113 | } 114 | .icon-zuijinplay:before { 115 | content: "\e90b"; 116 | } 117 | .icon-diantai:before { 118 | content: "\e90c"; 119 | } 120 | .icon-collect:before { 121 | content: "\e90d"; 122 | } 123 | .icon-coin:before { 124 | content: "\e908"; 125 | } 126 | .icon-market:before { 127 | content: "\e901"; 128 | } 129 | .icon-menu:before { 130 | content: "\e902"; 131 | } 132 | .icon-message:before { 133 | content: "\e903"; 134 | } 135 | .icon-music:before { 136 | content: "\e904"; 137 | } 138 | .icon-search:before { 139 | content: "\e905"; 140 | } 141 | .icon-vip:before { 142 | content: "\e906"; 143 | } 144 | .icon-wangyiyun:before { 145 | content: "\e907"; 146 | } 147 | .icon-close:before { 148 | content: "\e912"; 149 | } 150 | .icon-down:before { 151 | content: "\e922"; 152 | } 153 | .icon-left:before { 154 | content: "\e940"; 155 | } 156 | .icon-pause:before { 157 | content: "\e955"; 158 | } 159 | .icon-right:before { 160 | content: "\e963"; 161 | } 162 | .icon-up:before { 163 | content: "\e978"; 164 | } 165 | .icon-music-danqu1:before { 166 | content: "\e94a"; 167 | } 168 | .icon-music-random:before { 169 | content: "\e94b"; 170 | } 171 | .icon-volume-medium:before { 172 | content: "\ea27"; 173 | } 174 | -------------------------------------------------------------------------------- /static/font-icon/musicsvg/wangyiyun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/d-loading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * loading组件 3 | */ 4 | // 这是loading的类型 5 | import { type } from './type.js' 6 | // 引入dom的操作 7 | import {dom} from './../commonjs/dom' 8 | 9 | // 引入样式 10 | import './d-loading.scss' 11 | 12 | class Dloading { 13 | constructor(options) { 14 | // 默认配置 15 | let defaultOptions = { 16 | // dom对象或者 元素的id字符 17 | ele: 'loading', 18 | // 提示的名字 19 | name: '请稍等...', 20 | // 类型 loading 的类型 21 | type: 'default', 22 | // 背景色（整体的背景色） 23 | backgroundColor: 'transparent', 24 | // 主色调 25 | mainColor: '#aaa', 26 | // 辅色 27 | auxiliaryColor: '#aaa', 28 | // 其他辅色（具体看loading的svg使用几种颜色控制， 这里最多三种） 29 | otherAuxiliaryColor: '#aaa', 30 | 31 | // loading进入的类型 none 或者 fade 的效果 （无效果 和 渐变） 32 | effect: 'none', 33 | 34 | // loading中间区域的背景色 35 | contentBackgroundColor: 'rgba(0,0,0,0.7)', 36 | // loading中间区域的宽度 37 | contentWidth: '100px', 38 | // loading中间的高度 39 | contentHeight: '100px', 40 | 41 | // timer 时长 42 | // timer: 3000, 43 | 44 | // 事件 45 | // 删除loading之前执行的代码 46 | beforeLoadingRemoved: () => {}, 47 | // 删除loading之后执行的代码 48 | loadingRemoved: () => {} 49 | } 50 | 51 | if (!options.ele) options.ele = options 52 | 53 | // 拿到数据 54 | this.options = Object.assign({}, defaultOptions, options) 55 | 56 | // 判断元素 如果给的是string则 通过getElementById查找到元素 57 | if (typeof this.options.ele === 'string') { 58 | this.options.ele = document.getElementById(this.options.ele) 59 | } 60 | 61 | // 判断元素是否是body 62 | this.options._isbody = (this.options.ele === document.body) 63 | 64 | this._initLoadingEle() 65 | } 66 | 67 | // 这时候需要给元素添加loading的组件，需要存放到ele之中，此时不显示loading 68 | _initLoadingEle () { 69 | this.elements = {} 70 | // 初始化大的遮罩层 71 | this.elements.dLoading = document.createElement('div') 72 | this.elements.dLoading.className = 'd-loading ' + (this.options._isbody ? 'fix-loading ' : ' ') + this.options.effect 73 | this.elements.dLoading.style.backgroundColor = this.options.backgroundColor 74 | this.options.ele.appendChild(this.elements.dLoading) 75 | 76 | // 初始化中间层 77 | this.elements.contentLoading = document.createElement('div') 78 | this.elements.contentLoading.className = 'd-loading-content' 79 | this.elements.contentLoading.style.cssText = `width: ${this.options.contentWidth}; 80 | height: ${this.options.contentHeight}; 81 | background-color: ${this.options.contentBackgroundColor}` 82 | this.elements.dLoading.appendChild(this.elements.contentLoading) 83 | 84 | // loading 的svg 85 | let svg = type(this.options.type, this.options.mainColor, this.options.auxiliaryColor, this.options.otherAuxiliaryColor) 86 | this.elements.loadingSvg = document.createElement('div') 87 | this.elements.loadingSvg.className = 'd-loading-svg' 88 | this.elements.loadingSvg.innerHTML = svg 89 | this.elements.contentLoading.appendChild(this.elements.loadingSvg) 90 | 91 | // loading 的提示信息 92 | // 如果name没有内容或者有些type不适合有name我们则不显示name 93 | if (this.options.name === '') return 94 | this.elements.loadingName = document.createElement('p') 95 | this.elements.loadingName.className = 'd-loading-name' 96 | this.elements.loadingName.innerText = this.options.name 97 | this.elements.contentLoading.appendChild(this.elements.loadingName) 98 | } 99 | 100 | showLoading (timer) { 101 | const _this = this 102 | dom.addClass(this.elements.dLoading, 'show') 103 | if (timer) { 104 | this.t = setTimeout(function () { 105 | _this.removeLoading() 106 | }, timer) 107 | } 108 | } 109 | 110 | hideLoading () { 111 | dom.removeClass(this.elements.dLoading, 'show') 112 | } 113 | 114 | removeLoading () { 115 | let _this = this 116 | this.options.beforeLoadingRemoved() 117 | this.hideLoading() 118 | clearTimeout(this.t) 119 | let nt = setTimeout(function () { 120 | _this.options.ele.removeChild(_this.elements.dLoading) 121 | _this.options.loadingRemoved() 122 | clearTimeout(nt) 123 | }, 300) 124 | } 125 | } 126 | 127 | export default Dloading -------------------------------------------------------------------------------- /src/scss/common/_mixin.scss: -------------------------------------------------------------------------------- 1 | //移动端通用样式 1rem 相当于100px算的 也就是 宽度 / 7.5的比例 2 | @function px75rem($px){ 3 | $rem : 100px; 4 | @return ($px * 1px / $rem) + rem; 5 | } 6 | 7 | // 多少行限制超出省略 8 | @mixin lineclamp($height, $count, $isrem: false) { 9 | @if($isrem == false) { 10 | height: px75rem($height); 11 | line-height: px75rem($height / $count); 12 | } @else { 13 | height: $height; 14 | line-height: $height / $count; 15 | } 16 | overflow:hidden; 17 | text-overflow:ellipsis; 18 | display:-webkit-box; 19 | -webkit-box-orient:vertical; 20 | -webkit-line-clamp: $count; 21 | word-wrap: break-word; 22 | } 23 | 24 | @mixin textoneline ($height: auto) { 25 | height: $height; 26 | @if($height == auto) { 27 | line-height: initial; 28 | } else { 29 | line-height:$height; 30 | } 31 | @include ellipsis(); 32 | } 33 | 34 | 35 | @mixin colortext-l ($color1, $color2) { 36 | position: relative; 37 | @include background(linear-gradient(to bottom right, $color1, $color2)); 38 | -webkit-background-clip: text; 39 | -webkit-text-fill-color: transparent; 40 | } 41 | 42 | // 计算属性 43 | @mixin ccalc($pro, $all, $reduce) { 44 | #{$pro}: calc(#{$all} - #{$reduce}); 45 | } 46 | 47 | // footer header content充满body 48 | @mixin fixfooter($headerH, $footerH) { 49 | body,html{ 50 | min-height: unset!important; 51 | height: 100%!important; 52 | } 53 | .custom_header{ 54 | height: $headerH; 55 | @include box-sizing(border-box); 56 | position: relative; 57 | } 58 | .custom_footer{ 59 | height: $footerH; 60 | @include box-sizing(border-box); 61 | position: relative; 62 | } 63 | .custom_content{ 64 | position: relative; 65 | background-color: #f0f0f0; 66 | min-height: calc(100% - #{$headerH} - #{$footerH}); 67 | } 68 | } 69 | 70 | @mixin fixfooterflex () { 71 | html{ 72 | height: 100%; 73 | } 74 | 75 | body{ 76 | display: flex; 77 | flex-direction: column; 78 | min-height: 100%; 79 | // font-family: "Hiragino Sans GB","Century Gothic",system, Arial, Verdana, Tahoma,"微软雅黑"; 80 | font-family: $font; 81 | position: relative; 82 | width: 100%; 83 | overflow-x: hidden; 84 | } 85 | 86 | header{ 87 | /* 我们希望 header 采用固定的高度，只占用必须的空间 */ 88 | /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ 89 | flex: 0 0 auto; 90 | } 91 | 92 | .main_content{ 93 | /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间 94 | 而其他元素该属性值为0，因此不会得到多余的空间*/ 95 | /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ 96 | flex: 1 1 auto; 97 | background-color: $color_bg; 98 | position:relative; 99 | } 100 | 101 | footer{ 102 | /* 和 header 一样，footer 也采用固定高度*/ 103 | /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ 104 | flex: 0 0 auto; 105 | } 106 | } 107 | 108 | @mixin colorplaceholder($color) { 109 | ::-webkit-input-placeholder { /* WebKit browsers */ 110 | color: $color; 111 | } 112 | :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 113 | color: $color; 114 | opacity: 1; 115 | } 116 | ::-moz-placeholder { /* Mozilla Firefox 19+ */ 117 | color: $color; 118 | opacity: 1; 119 | } 120 | :-ms-input-placeholder { /* Internet Explorer 10+ */ 121 | color: $color; 122 | } 123 | } 124 | 125 | // 字体文字颜色的mixin 126 | @mixin colortext($color, $name) { 127 | .color-#{$name}{ 128 | color: $color; 129 | } 130 | } 131 | 132 | // hr 线条和颜色 133 | @mixin hr($color, $name) { 134 | .hr-#{$name}{ 135 | width: 100%; 136 | height: 1px; 137 | background: $color; 138 | font-size: 0; 139 | margin: 0 auto; 140 | } 141 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { 142 | @include translate(0, 1 / 2 * 100'px'); 143 | } 144 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) { 145 | @include translate(0, 1 / 2 * 100'px'); 146 | } 147 | } 148 | 149 | // fixed布局铺面全屏 150 | @mixin fixedfull() { 151 | position: fixed; 152 | right: 0; 153 | top: 0; 154 | left: 0; 155 | bottom: 0; 156 | } 157 | 158 | // 不同背景图片使用不同的尺寸 159 | @mixin bgimage($url, $type: png, $hasmedia: false){ 160 | @if($hasmedia == true){ 161 | @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { 162 | background-image: url($url + "@2x." + $type) 163 | } 164 | @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) { 165 | background-image: url($url + "@3x." + $type) 166 | } 167 | } 168 | background-image: url($url + "." + $type) 169 | } 170 | 171 | -------------------------------------------------------------------------------- /src/lib/type.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Loading 的类型 3 | */ 4 | 5 | /** 6 | * 默认loading 7 | * @param {mainColor} // svg loading的主色 8 | * @param {auxiliaryColor} // svg loading 的辅助色 9 | * 10 | * @return {function} // 返回一个dom文本 11 | */ 12 | function defaultLoadingEle (mainColor, auxiliaryColor) { 13 | return ` 14 | 63 | ` 64 | } 65 | 66 | /** 67 | * 圆形loading 68 | * @param {mainColor} // svg loading的主色 69 | * @param {auxiliaryColor} // svg loading 的辅助色 70 | * @param {otherAuxiliaryColor} // svg loading 的其他辅助色 71 | * @return {function} // 返回一个dom文本 72 | */ 73 | 74 | // 橙黄色 mainColor:#f32424; auxiliaryColor: #f97b11; otherAuxiliaryColor:#ffc600; 75 | // 粉色 mainColor:#ff5591; auxiliaryColor: #ffa6c7; otherAuxiliaryColor:#ffedf7; 76 | function circleLoadingEle (mainColor, auxiliaryColor, otherAuxiliaryColor) { 77 | return ` 79 | 80 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | ` 104 | } 105 | 106 | /** 107 | * @param {type} // svg loading的类型 108 | * @param {mainColor} // svg loading的主色 109 | * @param {auxiliaryColor} // svg loading 的辅助色 110 | * @param {otherAuxiliaryColor} // svg loading 的其他辅助色 有些svg可能会用到 111 | * 112 | * @return {function} // 返回一个方法执行返回的一个dom文本 113 | */ 114 | export const type = (type, mainColor, auxiliaryColor, otherAuxiliaryColor) => { 115 | switch (type) { 116 | case 'circle': 117 | return circleLoadingEle(mainColor, auxiliaryColor, otherAuxiliaryColor) 118 | default: 119 | return defaultLoadingEle(mainColor, auxiliaryColor) 120 | } 121 | } -------------------------------------------------------------------------------- /src/commonjs/utils.js: -------------------------------------------------------------------------------- 1 | // 浏览器相关方法 2 | export const utils = { 3 | // 设备信息 4 | deviceVersion () { 5 | const u = navigator.userAgent 6 | const app = navigator.appVersion 7 | return { // 移动终端浏览器版本信息 8 | userAgent: u, 9 | appVersion: app, 10 | trident: u.includes('Trident'), // IE内核 11 | presto: u.includes('Presto'), // opera内核 12 | webKit: u.includes('AppleWebKit'), // 苹果、谷歌内核 13 | gecko: u.includes('Gecko') && !u.includes('KHTML'), // 火狐内核 14 | mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), // 是否为移动终端 15 | ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端 16 | android: u.includes('Android') || u.includes('Linux'), // android终端或者uc浏览器 17 | iPhone: u.includes('iPhone') || u.includes('Mac'), // 是否为iPhone或者QQHD浏览器 18 | iPad: u.includes('iPad'), // 是否iPad 19 | webApp: !u.includes('Safari'), // 是否web应该程序，没有头部与底部, 20 | language: (navigator.browserLanguage || navigator.language).toLowerCase(), // 浏览器语言 21 | plugins: navigator.plugins, // 返回一个类似数组的对象，成员是浏览器安装的插件，比如Flash、ActiveX等 22 | platform: navigator.platform, // 属性返回用户的操作系统信息 23 | isOnline: navigator.onLine, // 返回一个布尔值，表示用户当前在线还是离线 24 | geolocation: navigator.geolocation // 返回一个Geolocation对象，包含用户地理位置的信息。 25 | } 26 | }, 27 | 28 | // 设置console 带有自定义美化的功能 29 | // text： 内容; 30 | // isOneLine： 是否一行显示（1行相当于3行log的高度 所以不能换行）; 31 | // author：用户名称 ； 32 | setConsole (options) { 33 | let defaultV = { 34 | text: 'this is console!', 35 | isOneLine: 1, 36 | author: '未曾遗忘的青春' 37 | } 38 | let newValue = Object.assign(defaultV, options) 39 | if (newValue.isOneLine) { 40 | console.log('') 41 | console.log(`%c${newValue.text} --- ${newValue.author}`, `background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzM5OTk5Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjY2NjOTkiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzk5Y2NmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjY2NjY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY5OWNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background-size: 100%;background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #66cccc), color-stop(20%, #339999), color-stop(40%, #cccc99), color-stop(60%, #99ccff), color-stop(80%, #ccccff), color-stop(100%, #ff99cc));background-image: -moz-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: -webkit-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: linear-gradient(to right, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);padding:20px 40px;color:#fff;font-size:12px;`) 42 | console.log('') 43 | } else { 44 | console.log(`%c${newValue.text} --- ${newValue.author}`, `background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzM5OTk5Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjY2NjOTkiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzk5Y2NmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjY2NjY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY5OWNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background-size: 100%;background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #66cccc), color-stop(20%, #339999), color-stop(40%, #cccc99), color-stop(60%, #99ccff), color-stop(80%, #ccccff), color-stop(100%, #ff99cc));background-image: -moz-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: -webkit-linear-gradient(left, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);background-image: linear-gradient(to right, #66cccc 0%, #339999 20%, #cccc99 40%, #99ccff 60%, #ccccff 80%, #ff99cc 100%);padding:0;color:#fff;font-size:12px;`) 45 | } 46 | }, 47 | 48 | // 移动端rem的设计 49 | initRem () { 50 | let _self = {} 51 | let _pdfwidth = 750 52 | let _minScreenWidth = 320 53 | let _maxScreenWidth = 515 54 | let _minScreenWidthP = _minScreenWidth / _pdfwidth 55 | let _maxScreenWidthP = _maxScreenWidth / _pdfwidth 56 | _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' 57 | _self.Html = document.getElementsByTagName('html')[0] 58 | _self.widthProportion = function () { 59 | let p = Number(((document.body && document.body.clientWidth) || _self.Html.offsetWidth) / _pdfwidth).toFixed(4) 60 | let betterInfo = (p = p > _maxScreenWidthP ? 0.6867 : p) < _minScreenWidthP ? 0.4267 : p 61 | return betterInfo 62 | } 63 | _self.changePage = function () { 64 | _self.Html.setAttribute('style', 'font-size:' + _self.widthProportion() * 100 + 'px') 65 | } 66 | _self.changePage() 67 | if (!document.addEventListener) return 68 | window.addEventListener(_self.resizeEvt, _self.changePage, false) 69 | document.addEventListener('DOMContentLoaded', _self.changePage, false) 70 | }, 71 | 72 | 73 | // 判断数据类型格式 74 | initType () { 75 | this.dataType = {} 76 | let type = (o) => { 77 | let s = Object.prototype.toString.call(o); 78 | return s.match(/\[object (.*?)\]/)[1].toLowerCase(); 79 | } 80 | 81 | const _self = this; 82 | ['Null', 83 | 'Undefined', 84 | 'Object', 85 | 'Array', 86 | 'String', 87 | 'Number', 88 | 'Boolean', 89 | 'Function', 90 | 'RegExp' 91 | ].forEach(function (t) { 92 | _self.dataType['is' + t] = function (o) { 93 | return type(o) === t.toLowerCase(); 94 | }; 95 | }); 96 | }, 97 | 98 | // 从数组中获取num 个随机不重复的元素 99 | // arr 需要取出的数组 100 | // num 取出数组的数量 101 | getRandomEleFromArr (arr, num) { 102 | let test_arr = new Set(arr); 103 | let newArr = Array.from(test_arr) 104 | 105 | let result_arr = new Array(); 106 | for(let i = 0;i < num; i++) { 107 | if(newArr.length > 0){ 108 | let index = Math.floor(Math.random() * newArr.length); 109 | result_arr.push(newArr[index]); 110 | newArr.splice(index,1); 111 | }else{ 112 | console.error(`数组中没有超过${num}个不同的元素哦`) 113 | break 114 | } 115 | } 116 | return result_arr; 117 | }, 118 | 119 | // 浏览器的notification 提示 120 | notification (options) { 121 | const _self = this 122 | const defaultV = { 123 | title: '未曾遗忘的青春', 124 | body: 'Hello World !!!', 125 | icon: 'http://www.daiwei.org/index/images/logo/dw1.png' 126 | } 127 | let newOpt = Object.assign(defaultV, options) 128 | return new Promise((resolve, reject) => { 129 | if(window.Notification && Notification.permission !== "denied") { 130 | Notification.requestPermission(function(status) { 131 | let n = new Notification( newOpt.title, { 132 | body: newOpt.body, 133 | icon: newOpt.icon, 134 | }); 135 | n.onshow = function() { 136 | _self.setConsole({ 137 | text: 'this is an notification test!', 138 | isOneLine: 0, 139 | author: '未曾遗忘的青春' 140 | }); 141 | }; 142 | n.onclick = function() { 143 | resolve() 144 | }; 145 | }); 146 | }else{ 147 | reject() 148 | } 149 | }) 150 | }, 151 | 152 | // 返回rgba随机色 参数为透明度 153 | randomColor (opacity = 1) { 154 | let r = Math.floor(Math.random() * 256) 155 | let g = Math.floor(Math.random() * 256) 156 | let b = Math.floor(Math.random() * 256) 157 | return `rgba(${r},${g},${b},${opacity})` 158 | }, 159 | 160 | // outline 提现布局框架 by Addy Osmani 161 | showLayoutFramework() { 162 | [].forEach.call( document.querySelectorAll("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }); 163 | }, 164 | 165 | // 返回浏览器url的参数 返回一个对象 166 | getUrlParam (url) { 167 | let _arr = url.search.slice(1).split('&') 168 | let _obj = {} 169 | for (let i = 0; i < _arr.length; i++) { 170 | _obj[_arr[i].split('=')[0]] = _arr[i].split('=')[1] 171 | } 172 | return _obj 173 | }, 174 | 175 | // 返回一个字符串的长度，汉字算2个字符长度 176 | strLength (str) { 177 | let a = 0; 178 | for (let i = 0; i < str.length; i++ ) { 179 | let count = str.charCodeAt(i) > 255 ? 2 : 1 180 | a += count 181 | } 182 | return a; 183 | }, 184 | 185 | // extendDeep 深拷贝 186 | extendDeep (newinfo, options) { 187 | const _self = this 188 | for (var k in options) { 189 | if (options.hasOwnProperty(k)) { 190 | if (typeof options[k] === 'object') { 191 | _self.extendDeep(newinfo[k], options[k]) 192 | } else { 193 | newinfo[k] = options[k]; 194 | } 195 | } 196 | } 197 | return newinfo; 198 | } 199 | } 200 | 201 | // 初始化判断数据类型格式 202 | utils.initType() 203 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(window,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=t.dom={hasClass:function(e,t){return new RegExp("(^|\\s)"+t+"(\\s|$)").test(e.className)},addClass:function(e,t){if(!i.hasClass(e,t)){var n=e.className.split(" ");n.push(t),e.className=n.join(" ")}},removeClass:function(e,t){if(i.hasClass(e,t)){var n=e.className.split(" ");n.forEach(function(e,i,o){e===t&&n.splice(i,1)}),e.className=n.join(" ")}},getData:function(e,t,n){n?e.setAttribute(t,n):e.getAttribute(t)},addCss:function(e){var t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href",e),document.head.appendChild(t)},addJs:function(e){var t=document.createElement("script");t.type="text/script",t.src=e,document.getElementsByTagName("html")[0].appendChild(t)},getScrollWidth:function(){var e,t,n=document.createElement("div");return n.style.cssText="position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;",e=document.body.appendChild(n).clientWidth,n.style.overflowY="scroll",t=n.clientWidth,document.body.removeChild(n),e-t}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.type=function(e,t,n,i){switch(e){case"circle":return function(e,t,n){return'\n \x3c!--#4886CD为深色值 #9DBFE4为中间值 可以随意修改--\x3e \n \n \n \n \n \x3c!--蓝到浅蓝渐变--\x3e\n \n \x3c!--右半圆环--\x3e\n \n \n \x3c!--浅蓝到白色渐变--\x3e\n \n \x3c!--左半圆环--\x3e\n \n \n '}(t,n,i);default:return function(e,t){return'\n \n '}(t)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n 2 | 3 | 4 | 5 | IcoMoon Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Font Name: icomoon (Glyphs: 49)

13 |
14 |
15 |

Grid Size: Unknown

16 |
17 |
18 | 19 | 20 | 21 | icon-playdetail 22 |
23 |
24 | 25 | 26 |
27 |
28 | liga: 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | icon-pause-detail 38 |
39 |
40 | 41 | 42 |
43 |
44 | liga: 45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | icon-prevdetail 54 |
55 |
56 | 57 | 58 |
59 |
60 | liga: 61 | 62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | icon-nextdetail 70 |
71 |
72 | 73 | 74 |
75 |
76 | liga: 77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | icon-music-shunxu 86 |
87 |
88 | 89 | 90 |
91 |
92 | liga: 93 | 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | icon-back 102 |
103 |
104 | 105 | 106 |
107 |
108 | liga: 109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | 117 | icon-edit-paper 118 |
119 |
120 | 121 | 122 |
123 |
124 | liga: 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 | icon-edit 134 |
135 |
136 | 137 | 138 |
139 |
140 | liga: 141 | 142 |
143 |
144 |
145 |
146 | 147 | 148 | 149 | icon-delete 150 |
151 |
152 | 153 | 154 |
155 |
156 | liga: 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 | 165 | icon-add-project 166 |
167 |
168 | 169 | 170 |
171 |
172 | liga: 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 | 181 | icon-add 182 |
183 |
184 | 185 | 186 |
187 |
188 | liga: 189 | 190 |
191 |
192 |
193 |
194 | 195 | 196 | 197 | icon-list-music 198 |
199 |
200 | 201 | 202 |
203 |
204 | liga: 205 | 206 |
207 |
208 |
209 |
210 | 211 | 212 | 213 | icon-night 214 |
215 |
216 | 217 | 218 |
219 |
220 | liga: 221 | 222 |
223 |
224 |
225 |
226 | 227 | 228 | 229 | icon-day 230 |
231 |
232 | 233 | 234 |
235 |
236 | liga: 237 | 238 |
239 |
240 |
241 |
242 | 243 | 244 | 245 | icon-community 246 |
247 |
248 | 249 | 250 |
251 |
252 | liga: 253 | 254 |
255 |
256 |
257 |
258 | 259 | 260 | 261 | icon-wangyi 262 |
263 |
264 | 265 | 266 |
267 |
268 | liga: 269 | 270 |
271 |
272 |
273 |
274 | 275 | 276 | 277 | icon-share 278 |
279 |
280 | 281 | 282 |
283 |
284 | liga: 285 | 286 |
287 |
288 |
289 |
290 | 291 | 292 | 293 | icon-play 294 |
295 |
296 | 297 | 298 |
299 |
300 | liga: 301 | 302 |
303 |
304 |
305 |
306 | 307 | 308 | 309 | icon-list-circle 310 |
311 |
312 | 313 | 314 |
315 |
316 | liga: 317 | 318 |
319 |
320 |
321 |
322 | 323 | 324 | 325 | icon-setting 326 |
327 |
328 | 329 | 330 |
331 |
332 | liga: 333 | 334 |
335 |
336 |
337 |
338 | 339 | 340 | 341 | icon-theme 342 |
343 |
344 | 345 | 346 |
347 |
348 | liga: 349 | 350 |
351 |
352 |
353 |
354 | 355 | 356 | 357 | icon-friend 358 |
359 |
360 | 361 | 362 |
363 |
364 | liga: 365 | 366 |
367 |
368 |
369 |
370 | 371 | 372 | 373 | icon-set-time 374 |
375 |
376 | 377 | 378 |
379 |
380 | liga: 381 | 382 |
383 |
384 |
385 |
386 | 387 | 388 | 389 | icon-lock 390 |
391 |
392 | 393 | 394 |
395 |
396 | liga: 397 | 398 |
399 |
400 |
401 |
402 | 403 | 404 | 405 | icon-car 406 |
407 |
408 | 409 | 410 |
411 |
412 | liga: 413 | 414 |
415 |
416 |
417 |
418 | 419 | 420 | 421 | icon-cloud 422 |
423 |
424 | 425 | 426 |
427 |
428 | liga: 429 | 430 |
431 |
432 |
433 |
434 | 435 | 436 | 437 | icon-exit 438 |
439 |
440 | 441 | 442 |
443 |
444 | liga: 445 | 446 |
447 |
448 |
449 |
450 | 451 | 452 | 453 | icon-place 454 |
455 |
456 | 457 | 458 |
459 |
460 | liga: 461 | 462 |
463 |
464 |
465 |
466 | 467 | 468 | 469 | icon-SHARE2 470 |
471 |
472 | 473 | 474 |
475 |
476 | liga: 477 | 478 |
479 |
480 |
481 |
482 | 483 | 484 | 485 | icon-zuijinplay 486 |
487 |
488 | 489 | 490 |
491 |
492 | liga: 493 | 494 |
495 |
496 |
497 |
498 | 499 | 500 | 501 | icon-diantai 502 |
503 |
504 | 505 | 506 |
507 |
508 | liga: 509 | 510 |
511 |
512 |
513 |
514 | 515 | 516 | 517 | icon-collect 518 |
519 |
520 | 521 | 522 |
523 |
524 | liga: 525 | 526 |
527 |
528 |
529 |
530 | 531 | 532 | 533 | icon-coin 534 |
535 |
536 | 537 | 538 |
539 |
540 | liga: 541 | 542 |
543 |
544 |
545 |
546 | 547 | 548 | 549 | icon-market 550 |
551 |
552 | 553 | 554 |
555 |
556 | liga: 557 | 558 |
559 |
560 |
561 |
562 | 563 | 564 | 565 | icon-menu 566 |
567 |
568 | 569 | 570 |
571 |
572 | liga: 573 | 574 |
575 |
576 |
577 |
578 | 579 | 580 | 581 | icon-message 582 |
583 |
584 | 585 | 586 |
587 |
588 | liga: 589 | 590 |
591 |
592 |
593 |
594 | 595 | 596 | 597 | icon-music 598 |
599 |
600 | 601 | 602 |
603 |
604 | liga: 605 | 606 |
607 |
608 |
609 |
610 | 611 | 612 | 613 | icon-search 614 |
615 |
616 | 617 | 618 |
619 |
620 | liga: 621 | 622 |
623 |
624 |
625 |
626 | 627 | 628 | 629 | icon-vip 630 |
631 |
632 | 633 | 634 |
635 |
636 | liga: 637 | 638 |
639 |
640 |
641 |
642 | 643 | 644 | 645 | icon-wangyiyun 646 |
647 |
648 | 649 | 650 |
651 |
652 | liga: 653 | 654 |
655 |
656 |
657 |
658 | 659 | 660 | 661 | icon-close 662 |
663 |
664 | 665 | 666 |
667 |
668 | liga: 669 | 670 |
671 |
672 |
673 |
674 | 675 | 676 | 677 | icon-down 678 |
679 |
680 | 681 | 682 |
683 |
684 | liga: 685 | 686 |
687 |
688 |
689 |
690 | 691 | 692 | 693 | icon-left 694 |
695 |
696 | 697 | 698 |
699 |
700 | liga: 701 | 702 |
703 |
704 |
705 |
706 | 707 | 708 | 709 | icon-pause 710 |
711 |
712 | 713 | 714 |
715 |
716 | liga: 717 | 718 |
719 |
720 |
721 |
722 | 723 | 724 | 725 | icon-right 726 |
727 |
728 | 729 | 730 |
731 |
732 | liga: 733 | 734 |
735 |
736 |
737 |
738 | 739 | 740 | 741 | icon-up 742 |
743 |
744 | 745 | 746 |
747 |
748 | liga: 749 | 750 |
751 |
752 |
753 |
754 | 755 | 756 | 757 | icon-music-danqu1 758 |
759 |
760 | 761 | 762 |
763 |
764 | liga: 765 | 766 |
767 |
768 |
769 |
770 | 771 | 772 | 773 | icon-music-random 774 |
775 |
776 | 777 | 778 |
779 |
780 | liga: 781 | 782 |
783 |
784 |
785 |
786 |

Grid Size: 16

787 |
788 |
789 | 790 | 791 | 792 | icon-volume-medium 793 |
794 |
795 | 796 | 797 |
798 |
799 | liga: 800 | 801 |
802 |
803 |
804 | 805 | 806 |
807 |

Font Test Drive

808 | 813 | 815 |
  816 |
817 |
818 | 819 |
820 |

Generated by IcoMoon

821 |
822 | 823 | 824 | 825 | 826 | -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | --------------------------------------------------------------------------------