├── src ├── scss │ └── common │ │ ├── base.scss │ │ ├── _index.scss │ │ ├── _variable.scss │ │ ├── _utils.scss │ │ └── _mixin.scss ├── lib │ ├── font-icon │ │ ├── fonts │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.ttf │ │ │ ├── icomoon.woff │ │ │ └── icomoon.svg │ │ ├── Read Me.txt │ │ ├── style.css │ │ ├── demo-files │ │ │ ├── demo.js │ │ │ └── demo.css │ │ ├── selection.json │ │ └── demo.html │ ├── d-audio.ts │ ├── types.ts │ ├── utils.js │ ├── d-audio.less │ └── d-audio.js ├── style.less ├── index.js └── commonjs │ └── dom.js ├── static ├── demo.png └── font-icon │ ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ └── icomoon.woff │ ├── 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 ├── .gitignore ├── .gitattributes ├── .sass-cache ├── 0a5b9e5b1e3754f604277acdac27111dd35cabde │ ├── music.scssc │ ├── print.scssc │ ├── ie.scssc │ └── screen.scssc ├── 595fac6b687c9031debfb4ea4c8b3511cc17aba3 │ └── _hacks.scssc ├── cc62a9c0446b28a796c0f758ad36f493d3b6c7e1 │ ├── music.scssc │ ├── print.scssc │ └── ie.scssc ├── e5704c795dbe374bcbb00ea9ed62bda0de02a419 │ └── _hacks.scssc ├── 3746710bfe7e0b2975954c3a0118ba047eb1860b │ ├── _columns.scssc │ ├── _filter.scssc │ ├── _flexbox.scssc │ ├── _images.scssc │ ├── _opacity.scssc │ ├── _regions.scssc │ ├── _animation.scssc │ ├── _box-shadow.scssc │ ├── _box-sizing.scssc │ ├── _font-face.scssc │ ├── _transform.scssc │ ├── _transition.scssc │ ├── _border-radius.scssc │ ├── _hyphenation.scssc │ ├── _inline-block.scssc │ ├── _text-shadow.scssc │ ├── _background-clip.scssc │ ├── _background-size.scssc │ ├── _user-interface.scssc │ ├── _background-origin.scssc │ ├── _deprecated-support.scssc │ └── _appearance.scssc ├── 66a6c63543755e256f50ddbcedde96ac95a39daf │ ├── _columns.scssc │ ├── _filter.scssc │ ├── _flexbox.scssc │ ├── _images.scssc │ ├── _opacity.scssc │ ├── _regions.scssc │ ├── _animation.scssc │ ├── _box-shadow.scssc │ ├── _box-sizing.scssc │ ├── _font-face.scssc │ ├── _transform.scssc │ ├── _transition.scssc │ ├── _border-radius.scssc │ ├── _hyphenation.scssc │ ├── _inline-block.scssc │ ├── _text-shadow.scssc │ ├── _background-clip.scssc │ ├── _background-size.scssc │ ├── _user-interface.scssc │ ├── _background-origin.scssc │ ├── _deprecated-support.scssc │ └── _appearance.scssc ├── 8f94eb898a9783786c406a84806e4fc94c68aa1c │ └── _ellipsis.scssc ├── a8471a902a24f38d6f8f510f8eebb5bd99a3e84a │ └── _ellipsis.scssc ├── b4dc5ef3282a087fe58bacd7d9b56433752b3ac9 │ ├── _support.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ └── _css3.scssc ├── e2214a8e0a0ef64109648bc4379ad363dc2c7c41 │ ├── _support.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ └── _css3.scssc ├── 1c55ff75eb871a92f011a15f99543689ca821795 │ └── _utilities.scssc ├── 36b57299b158e5748b24119f6434328cb2937743 │ ├── _stretching.scssc │ ├── _sticky-footer.scssc │ └── _grid-background.scssc ├── 3aa8e0230493eb6fd1c3680539c42b9bb329e1c6 │ ├── _stretching.scssc │ ├── _sticky-footer.scssc │ └── _grid-background.scssc ├── f20dab5b7fb1216f35d8484ebb92bc8dca57139a │ └── _utilities.scssc ├── 79db1df0af0471c2664c612e8a6fdc3832f23fae │ └── _link-colors.scssc ├── 75fcaf1b4852ceb732871195e41567cc2a7d8997 │ ├── D%058 │ │ └── qianduan │ │ │ └── Ruby23-x64 │ │ │ └── lib │ │ │ └── ruby │ │ │ └── gems │ │ │ └── 2.3.0 │ │ │ └── gems │ │ │ └── compass-core-1.0.3 │ │ │ └── stylesheets │ │ │ └── compass │ │ │ ├── css3 │ │ │ ├── _background-size.scssc │ │ │ └── _images.scssc │ │ │ ├── _reset.scssc │ │ │ └── _support.scssc │ └── C%058 │ │ └── Ruby22-x64 │ │ └── lib │ │ └── ruby │ │ └── gems │ │ └── 2.2.0 │ │ └── gems │ │ └── compass-core-1.0.3 │ │ └── stylesheets │ │ └── compass │ │ ├── _reset.scssc │ │ ├── _support.scssc │ │ └── css3 │ │ ├── _images.scssc │ │ └── _background-size.scssc └── 82117ecccce67b6509a0c6525a1b60121bc4b697 │ └── _link-colors.scssc ├── test.html ├── index.html ├── config.rb ├── package.json ├── README.md ├── webpack.config.js └── lib └── d-audio └── d-audio.css /src/scss/common/base.scss: -------------------------------------------------------------------------------- 1 | @import './_index.scss' -------------------------------------------------------------------------------- /static/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/static/demo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* -------------------------------------------------------------------------------- /src/lib/font-icon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/src/lib/font-icon/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/lib/font-icon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/src/lib/font-icon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/static/font-icon/fonts/icomoon.eot -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/static/font-icon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/static/font-icon/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/lib/font-icon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/src/lib/font-icon/fonts/icomoon.woff -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=javascript 2 | *.css linguist-language=javascript 3 | *.html linguist-language=javascript 4 | -------------------------------------------------------------------------------- /src/scss/common/_index.scss: -------------------------------------------------------------------------------- 1 | @import "node_modules/compass-mixins/lib/compass/css3"; 2 | @import './_variable'; 3 | @import './_utils'; 4 | @import './_mixin'; -------------------------------------------------------------------------------- /.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/music.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/music.scssc -------------------------------------------------------------------------------- /.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/print.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/print.scssc -------------------------------------------------------------------------------- /.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc -------------------------------------------------------------------------------- /.sass-cache/cc62a9c0446b28a796c0f758ad36f493d3b6c7e1/music.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/cc62a9c0446b28a796c0f758ad36f493d3b6c7e1/music.scssc -------------------------------------------------------------------------------- /.sass-cache/cc62a9c0446b28a796c0f758ad36f493d3b6c7e1/print.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/cc62a9c0446b28a796c0f758ad36f493d3b6c7e1/print.scssc -------------------------------------------------------------------------------- /.sass-cache/e5704c795dbe374bcbb00ea9ed62bda0de02a419/_hacks.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/e5704c795dbe374bcbb00ea9ed62bda0de02a419/_hacks.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_columns.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_columns.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_filter.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_filter.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_flexbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_flexbox.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_opacity.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_opacity.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_regions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_regions.scssc -------------------------------------------------------------------------------- /.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc -------------------------------------------------------------------------------- /.sass-cache/a8471a902a24f38d6f8f510f8eebb5bd99a3e84a/_ellipsis.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/a8471a902a24f38d6f8f510f8eebb5bd99a3e84a/_ellipsis.scssc -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc -------------------------------------------------------------------------------- /.sass-cache/e2214a8e0a0ef64109648bc4379ad363dc2c7c41/_support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/e2214a8e0a0ef64109648bc4379ad363dc2c7c41/_support.scssc -------------------------------------------------------------------------------- /.sass-cache/1c55ff75eb871a92f011a15f99543689ca821795/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/1c55ff75eb871a92f011a15f99543689ca821795/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_stretching.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_stretching.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_animation.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_box-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_box-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_box-sizing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_box-sizing.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_font-face.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_font-face.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_transform.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_transform.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_transition.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_transition.scssc -------------------------------------------------------------------------------- /.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_sticky-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_sticky-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_border-radius.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_hyphenation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_hyphenation.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_inline-block.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_inline-block.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_text-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_text-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc -------------------------------------------------------------------------------- /.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_grid-background.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/36b57299b158e5748b24119f6434328cb2937743/_grid-background.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-clip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-clip.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-size.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_user-interface.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_user-interface.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-origin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_background-origin.scssc -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_deprecated-support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_deprecated-support.scssc -------------------------------------------------------------------------------- /src/lib/d-audio.ts: -------------------------------------------------------------------------------- 1 | import './d-audio.less' 2 | import { Ioptions } from './types' 3 | import { dom } from './utils.js' 4 | import Vibrant from 'node-vibrant' 5 | class DAudio { 6 | constructor(obj: Ioptions) { 7 | } 8 | } -------------------------------------------------------------------------------- /src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export interface Ioptions { 2 | ele: string | any; 3 | imageUrl?: string; 4 | src: string; 5 | name: string; 6 | singer: string; 7 | showProgress?: boolean; 8 | initstate?: string; 9 | loop?: string; 10 | ended?: () => void; 11 | next?: () => void; 12 | } 13 | -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/D%058/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/d-audio/master/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/D%058/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | d-audio 6 | 7 | 8 | 9 |
10 |

es6 d-audio

11 |
12 |
13 | 14 | 未曾遗忘的青春 15 |
16 | 17 | -------------------------------------------------------------------------------- /src/lib/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"m(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"o(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"s(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"|(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/D%058/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"v(NOT IMPORTED) D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash}F -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/D%058/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"x(NOT IMPORTED) D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash}F -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/D%058/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"|(NOT IMPORTED) D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash}F -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /src/lib/font-icon/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?6xi1m'); 4 | src: url('fonts/icomoon.eot?6xi1m#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?6xi1m') format('truetype'), 6 | url('fonts/icomoon.woff?6xi1m') format('woff'), 7 | url('fonts/icomoon.svg?6xi1m#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-next:before { 28 | margin-left: 2px; 29 | content: "\e98c"; 30 | } 31 | .icon-play:before { 32 | content: "\e900"; 33 | } 34 | .icon-pause:before { 35 | margin-left: 4px; 36 | content: "\e901"; 37 | } 38 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | df78759f0fe6b88a633d20d26581ca4cdb829111 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"reset/utilities:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"^C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o:Sass::Tree::MixinNode: 8 | @nameI"global-reset; T: 9 | @args[:@keywords{: @splat0:@kwarg_splat0;[; 10 | 0; @ 11 | ; i;o; ;o;; i;i;o;; i;i;@;@; 12 | 0; @ 13 | ; I"8@import "reset/utilities"; 14 | 15 | @include global-reset; 16 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /src/lib/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/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 | -------------------------------------------------------------------------------- /.sass-cache/e2214a8e0a0ef64109648bc4379ad363dc2c7c41/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | df78759f0fe6b88a633d20d26581ca4cdb829111 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"reset/utilities:ET;[:@filename0: @options{:@template0:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position: 4 | @linei: @offseti: @end_poso;;i;i: 5 | @fileI"gD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash}F;i:@imported_file0o:Sass::Tree::MixinNode: 8 | @nameI"global-reset; T: 9 | @args[:@keywords{: @splat0:@kwarg_splat0;[; 10 | 0; @ 11 | ;i; o; ;o;;i;i;o;;i;i;@;@; 12 | 0; @ 13 | ; I"8@import "reset/utilities"; 14 | 15 | @include global-reset; 16 | ; T:@has_childrenT;i; o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | bbe8b1b9b6592e6ce6a7294fd0249c75049d3024 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"layout/grid-background:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i&: 5 | @fileI"_C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"layout/sticky-footer; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"layout/stretching; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 12 | 0; @ 13 | ; I"d@import "layout/grid-background"; 14 | @import "layout/sticky-footer"; 15 | @import "layout/stretching"; 16 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/e2214a8e0a0ef64109648bc4379ad363dc2c7c41/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | bbe8b1b9b6592e6ce6a7294fd0249c75049d3024 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"layout/grid-background:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i&: 5 | @fileI"hD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0o; ;I"layout/sticky-footer; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"layout/stretching; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 12 | 0; @ 13 | ; I"d@import "layout/grid-background"; 14 | @import "layout/sticky-footer"; 15 | @import "layout/stretching"; 16 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /src/lib/font-icon/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.sass-cache/cc62a9c0446b28a796c0f758ad36f493d3b6c7e1/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI"$E:/myProject/music/sass/ie.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/myProject/music; T:@real_rootI"E:/myProject/music; T:@same_name_warningso:Set: 13 | @hash{; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T;i;o; ;o;;i;i;o;;i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI",E:/project/myProject/music/sass/ie.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/project/myProject/music; T:@real_rootI"E:/project/myProject/music; T:@same_name_warningso:Set: 13 | @hash}F; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.sass-cache/0a5b9e5b1e3754f604277acdac27111dd35cabde/screen.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | e24c39d4800ce9f9b6b50e6a9d2d8c3fce9d548f 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I" /* Welcome to Compass. 4 | * In this file you should write your main styles. (or centralize your imports) 5 | * Import this file using the following HTML or equivalent: 6 | * */:ET: 7 | @type: normal;[:@filename0: @options{: 8 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i ;io: 9 | @fileI"0E:/project/myProject/music/sass/screen.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 10 | @rootI"E:/project/myProject/music; T:@real_rootI"E:/project/myProject/music; T:@same_name_warningso:Set: 11 | @hash}Fo:Sass::Tree::ImportNode :@imported_filenameI"compass/reset; T;[; 0; @ :@template0;o; ;o;;i ;i;o;;i ;i;@;@;i :@imported_file0; 0; @ ;!I"'/* Welcome to Compass. 12 | * In this file you should write your main styles. (or centralize your imports) 13 | * Import this file using the following HTML or equivalent: 14 | * */ 15 | 16 | @import "compass/reset"; 17 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /src/style.less: -------------------------------------------------------------------------------- 1 | .colortext-l (@color1, @color2) { 2 | position: relative; 3 | background: -webkit-linear-gradient(left, @color1 , @color2); /* Safari 5.1 - 6.0 */ 4 | background: -o-linear-gradient(right, @color1, @color2); /* Opera 11.1 - 12.0 */ 5 | background: -moz-linear-gradient(right, @color1, @color2); /* Firefox 3.6 - 15 */ 6 | background: linear-gradient(to right, @color1 , @color2); /* 标准的语法 */ 7 | -webkit-background-clip: text; 8 | -webkit-text-fill-color: transparent; 9 | } 10 | 11 | body,html{ 12 | margin: 0; 13 | padding: 0; 14 | height:100%; 15 | background: #000; 16 | } 17 | body{ 18 | // background: red; 19 | display: flex; 20 | width: 100%; 21 | height: 100%; 22 | align-items: center; 23 | flex-direction: column; 24 | justify-content: center; 25 | .title{ 26 | font-size: 42px; 27 | .colortext-l(rgba(50, 219, 154, 0.856), rgba(209, 163, 47, 0.808)); 28 | display: inline-block; 29 | margin-top: 0; 30 | } 31 | .disc{ 32 | font-size: 14px; 33 | color: #f1f1f1; 34 | } 35 | .github-info{ 36 | margin-top: 40px; 37 | text-align: center; 38 | display: flex; 39 | justify-content: center; 40 | span{ 41 | color: #ffffff; 42 | font: Arial,"Helvetica Neue",Helvetica,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; 43 | font-size:14px; 44 | } 45 | } 46 | .btn{ 47 | width: 320px; 48 | line-height: 40px; 49 | background: #999; 50 | cursor: pointer; 51 | color: #fff; 52 | text-align: center; 53 | margin-top: 30px; 54 | } 55 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dw/d-audio", 3 | "version": "1.0.3", 4 | "description": "d-audio", 5 | "main": "dist/d-audio.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --mode production", 9 | "dev": "webpack-dev-server --mode development --progress --colors", 10 | "watch": "webpack --progress --colors --watch", 11 | "publish": "npm publish --access=public" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://www.github.com/ifmiss/d-audio" 16 | }, 17 | "keywords": [ 18 | "audio", 19 | "d-audio", 20 | "music" 21 | ], 22 | "author": "daiwei", 23 | "license": "ISC", 24 | "devDependencies": { 25 | "atob": ">=2.1.0", 26 | "axios": "^0.18.1", 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 | "better-scroll": "^1.8.4", 32 | "compass-mixins": "^0.12.10", 33 | "css-loader": "^0.28.10", 34 | "deep-extend": ">=0.5.1", 35 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 36 | "html-webpack-plugin": "^3.0.6", 37 | "less": "^3.10.3", 38 | "less-loader": "^5.0.0", 39 | "macaddress": ">=0.2.9", 40 | "randomatic": ">=3.0.0", 41 | "style-loader": "^0.20.3", 42 | "url-loader": "^1.0.1", 43 | "url-parse": "^1.4.7", 44 | "webpack": "^4.41.1", 45 | "webpack-cli": "^3.3.9", 46 | "webpack-dev-server": "^3.8.2" 47 | }, 48 | "dependencies": { 49 | "d-utils": "^3.0.1", 50 | "node-vibrant": "^3.1.4" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.less' 2 | import 'static/font-icon/style.css' 3 | 4 | import dAudio from './lib/d-audio.js' 5 | import LogUtils from 'd-utils/lib/logUtils/index' 6 | import axios from 'axios' 7 | const getUrlById = (id) => { 8 | return `https://music.163.com/song/media/outer/url?id=${id}.mp3` 9 | } 10 | LogUtils.logInfo('d-utils'); 11 | axios.get('https://daiwei.site/netease/playlist/detail?id=2179377798').then((res) => { 12 | let music = res.data.playlist.tracks 13 | let index = Math.floor(Math.random() * music.length) 14 | axios.get('https://daiwei.site/netease/song/detail?ids=' + music[index].id).then((res) => { 15 | console.log(res) 16 | const d = new dAudio ({ 17 | ele: '#d-audio', 18 | src: getUrlById(res.data.songs[0].id), 19 | imageurl: music[index].al.picUrl + '?param=300y300', 20 | name: music[index].name, 21 | singer: music[index].ar[0].name, 22 | height: '45px', 23 | initstate: 'cricle', 24 | next: function () { 25 | index = Math.floor(Math.random() * music.length) 26 | axios.get('https://daiwei.site/netease/song/detail?ids=' + music[index].id).then((res) => { 27 | console.log(music[index].ar[0].name) 28 | const info = { 29 | src: getUrlById(res.data.songs[0].id), 30 | imageurl: music[index].al.picUrl + '?param=300y300', 31 | name: music[index].name, 32 | singer: music[index].ar[0].name 33 | } 34 | d.checkAudio(info.src, info.imageurl, info.name, info.singer) 35 | }, (err) => { 36 | console.log(err) 37 | }) 38 | } 39 | }) 40 | }) 41 | }, (err) => { 42 | console.log(err) 43 | }) -------------------------------------------------------------------------------- /static/font-icon/musicsvg/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 (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 (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 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 | -------------------------------------------------------------------------------- /src/lib/utils.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 (this.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 (this.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 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # d-audio 2 | 3 | 插件演示地址: https://d-audio.daiwei.site/
4 | 5 | ## 使用者: 6 | http://fm.zkbhj.com/#carousel-example-generic 7 | 8 | 简洁的音乐播放器插件 9 | 10 | ![](https://github.com/IFmiss/music/blob/master/es5/img/TlPtuyzEtc.gif) 11 | 12 | ## 新版本d-audio上线 13 | - 新增进度条随封面背景变化而变化 14 | 15 | ![](https://user-images.githubusercontent.com/17402583/52839950-b8cbca80-3132-11e9-8842-9ff64c4f26a9.png) 16 | 17 | ### 食用方法 18 | 安装： 1.0.2以后的版本放在@dw下 19 | ```js 20 | npm install d-audio 21 | ``` 22 | 1.0.2以后的版本 23 | ```js 24 | npm install @dw/d-audio 25 | ``` 26 | 27 | 28 | 引入 29 | 30 | ```js 31 | import dAudio from 'd-audio' 32 | const d = new dAudio ({ 33 | ele: '#d-audio', 34 | src: '地址', 35 | imageurl: '地址', 36 | name: '音乐名字', 37 | singer: '歌手名字', 38 | next: function () {}, 39 | ended: function () {} 40 | }) 41 | ``` 42 | 43 | es5安装： 44 | 如果不在es6环境下的代码，可以引入该项目根目录的lib文件夹下，引入js和css即可 45 | 46 | ```html 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | d-audio 55 | 56 | 57 |
58 | 59 | 60 | 66 | 67 | ``` 68 | 69 | ### 参数 70 | 71 | ```js 72 | // 音乐append的元素 73 | ele: '#d-audio', 74 | 75 | // 音乐封面 76 | imageurl: 'http://www.daiwei.org/sunmmer.jpg', 77 | 78 | // 音乐地址 79 | src: '', 80 | 81 | // 音乐名字 82 | name: '', 83 | 84 | // 音乐歌手 85 | singer: '', 86 | 87 | // 是否显示进度信息 88 | showprogress: true, 89 | 90 | // '' 就是默认状态， cricle则是初始化就是圆形且可以旋转 91 | initstate: '', 92 | 93 | // 是否循环 94 | loop: false, 95 | 96 | // 音乐播放结束事件，可设置播放下一首音乐 97 | ended: () => {}, 98 | 99 | // 音乐下一曲的点击事件触发，需要配合checkAudio体现切歌的效果 100 | next: () => {} 101 | ``` 102 | 103 | ### 实例化对象方法 104 | 105 | ```js 106 | // 显示loading 107 | d.showLoading() 108 | 109 | // 隐藏loading 110 | d.hideLoading() 111 | 112 | // 播放 113 | d.play() 114 | 115 | // 暂停 116 | d.pause() 117 | 118 | // 播放暂停 119 | d.playPause() 120 | 121 | // 切歌曲 播放下一首 音频地址，封面地址，名字，歌手 122 | d.checkAudio(src, imageurl, name, singer) 123 | ``` 124 | -------------------------------------------------------------------------------- /src/lib/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/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 | -------------------------------------------------------------------------------- /src/lib/font-icon/selection.json: -------------------------------------------------------------------------------- 1 | { 2 | "IcoMoonType": "selection", 3 | "icons": [ 4 | { 5 | "icon": { 6 | "paths": [ 7 | "M812.032 935.68v-423.68l-741.888 423.68v-847.36l741.888 423.68v-423.68h105.984v847.36h-105.984z" 8 | ], 9 | "isMulticolor": false, 10 | "isMulticolor2": false, 11 | "tags": [ 12 | "next" 13 | ], 14 | "defaultCode": 59788, 15 | "grid": 0, 16 | "attrs": [] 17 | }, 18 | "attrs": [], 19 | "properties": { 20 | "id": 141, 21 | "order": 6, 22 | "ligatures": "", 23 | "prevSize": 32, 24 | "code": 59788, 25 | "name": "next" 26 | }, 27 | "setIdx": 0, 28 | "setId": 2, 29 | "iconIdx": 140 30 | }, 31 | { 32 | "icon": { 33 | "paths": [ 34 | "M349.867 149.333h-14.933c-21.333 0-36.267 14.933-36.267 34.133v654.933c0 19.2 14.933 34.133 34.133 34.133h14.933c19.2 0 34.133-14.933 34.133-34.133v-654.933c2.133-19.2-12.8-34.133-32-34.133zM691.2 149.333h-14.933c-21.333 0-36.267 14.933-36.267 34.133v654.933c0 19.2 14.933 34.133 34.133 34.133h14.933c19.2 0 34.133-14.933 34.133-34.133v-654.933c2.133-19.2-12.8-34.133-32-34.133z" 35 | ], 36 | "attrs": [ 37 | {} 38 | ], 39 | "isMulticolor": false, 40 | "isMulticolor2": false, 41 | "grid": 16, 42 | "tags": [ 43 | "播放暂停" 44 | ] 45 | }, 46 | "attrs": [ 47 | {} 48 | ], 49 | "properties": { 50 | "order": 5, 51 | "id": 493, 52 | "name": "play", 53 | "prevSize": 32, 54 | "code": 59648 55 | }, 56 | "setIdx": 1, 57 | "setId": 1, 58 | "iconIdx": 0 59 | }, 60 | { 61 | "icon": { 62 | "paths": [ 63 | "M780.8 475.733l-494.933-307.2c-27.733-17.067-64 4.267-64 36.267v614.4c0 32 36.267 53.333 64 36.267l492.8-307.2c29.867-14.933 29.867-57.6 2.133-72.533z" 64 | ], 65 | "attrs": [ 66 | {} 67 | ], 68 | "isMulticolor": false, 69 | "isMulticolor2": false, 70 | "grid": 16, 71 | "tags": [ 72 | "播放" 73 | ] 74 | }, 75 | "attrs": [ 76 | {} 77 | ], 78 | "properties": { 79 | "order": 7, 80 | "id": 492, 81 | "name": "pause", 82 | "prevSize": 32, 83 | "code": 59649 84 | }, 85 | "setIdx": 1, 86 | "setId": 1, 87 | "iconIdx": 1 88 | } 89 | ], 90 | "height": 1024, 91 | "metadata": { 92 | "name": "icomoon" 93 | }, 94 | "preferences": { 95 | "showGlyphs": true, 96 | "showQuickUse": true, 97 | "showQuickUse2": true, 98 | "showSVGs": true, 99 | "fontPref": { 100 | "prefix": "icon-", 101 | "metadata": { 102 | "fontFamily": "icomoon" 103 | }, 104 | "metrics": { 105 | "emSize": 1024, 106 | "baseline": 6.25, 107 | "whitespace": 50 108 | }, 109 | "embed": false 110 | }, 111 | "imagePref": { 112 | "prefix": "icon-", 113 | "png": true, 114 | "useClassSelector": true, 115 | "color": 0, 116 | "bgColor": 16777215, 117 | "classSelector": ".icon" 118 | }, 119 | "historySize": 50, 120 | "showCodes": true, 121 | "gridSize": 16 122 | } 123 | } -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | ff2e5c1b784cd29f2321d28a68782dc7c9611f46 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"css3/border-radius:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i": 5 | @fileI"]C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"css3/inline-block; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0o; ;I"css3/opacity; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/box-shadow; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/text-shadow; T;[; 14 | 0; @ 15 | ; 0; i 16 | ;o; ;o;; i 17 | ;i;o;; i 18 | ;i ;@;@;0o; ;I"css3/columns; T;[; 19 | 0; @ 20 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/box-sizing; T;[; 21 | 0; @ 22 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/flexbox; T;[; 23 | 0; @ 24 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/images; T;[; 25 | 0; @ 26 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/background-clip; T;[; 27 | 0; @ 28 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/background-origin; T;[; 29 | 0; @ 30 | ; 0; i;o; ;o;; i;i;o;; i;i&;@;@;0o; ;I"css3/background-size; T;[; 31 | 0; @ 32 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/font-face; T;[; 33 | 0; @ 34 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transform; T;[; 35 | 0; @ 36 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transition; T;[; 37 | 0; @ 38 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/appearance; T;[; 39 | 0; @ 40 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/animation; T;[; 41 | 0; @ 42 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/regions; T;[; 43 | 0; @ 44 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/hyphenation; T;[; 45 | 0; @ 46 | ; 0; i;o; ;o;; i;i;o;; i;i ;@;@;0o; ;I"css3/filter; T;[; 47 | 0; @ 48 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/user-interface; T;[; 49 | 0; @ 50 | ; 0; i;o; ;o;; i;i;o;; i;i#;@;@;0; 51 | 0; @ 52 | ; I"<@import "css3/border-radius"; 53 | @import "css3/inline-block"; 54 | @import "css3/opacity"; 55 | @import "css3/box-shadow"; 56 | @import "css3/text-shadow"; 57 | @import "css3/columns"; 58 | @import "css3/box-sizing"; 59 | @import "css3/flexbox"; 60 | @import "css3/images"; 61 | @import "css3/background-clip"; 62 | @import "css3/background-origin"; 63 | @import "css3/background-size"; 64 | @import "css3/font-face"; 65 | @import "css3/transform"; 66 | @import "css3/transition"; 67 | @import "css3/appearance"; 68 | @import "css3/animation"; 69 | @import "css3/regions"; 70 | @import "css3/hyphenation"; 71 | @import "css3/filter"; 72 | @import "css3/user-interface"; 73 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); // 用于访问内置插件 2 | const path = require('path'); 3 | const fs = require('fs'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 6 | const outJsType = 'umd'; 7 | const getPackageJson = function () { 8 | const _packageJson = fs.readFileSync('./package.json') 9 | return JSON.parse(_packageJson) 10 | } 11 | const version = getPackageJson().version 12 | 13 | const extractSass = new ExtractTextPlugin({ 14 | filename: `d-audio/d-audio.css`, 15 | // filename: '[name].[hash].d-audio.css', 16 | disable: process.env.NODE_ENV === "development" 17 | }); 18 | 19 | const resolve = function (dir) { 20 | return path.resolve(__dirname, dir); 21 | } 22 | 23 | 24 | module.exports = { 25 | entry: { 26 | // index: './src/index.js' 27 | index: './src/lib/d-audio.js' 28 | }, 29 | output: { 30 | path: path.resolve(__dirname, 'lib'), 31 | // path: path.resolve(__dirname, 'dist'), 32 | publicPath: '', 33 | filename: `d-audio/d-audio.js`, 34 | libraryTarget: 'var', 35 | library: 'Daudio', 36 | libraryExport: 'default' 37 | }, 38 | module: { 39 | rules: [ 40 | { 41 | test: /\.css$/, 42 | use: ExtractTextPlugin.extract({ 43 | fallback:"style-loader", 44 | use:["css-loader"] 45 | }) 46 | }, 47 | { 48 | test: /\.less$/, 49 | use: ExtractTextPlugin.extract({ 50 | fallback:"style-loader", 51 | use:[ 52 | { 53 | loader: 'css-loader' 54 | }, 55 | { 56 | loader: 'less-loader' 57 | } 58 | ] 59 | }) 60 | }, 61 | { 62 | test: /\.(ttf|eot|svg|woff|woff2)$/, 63 | use: [ 64 | { 65 | loader: 'url-loader' 66 | } 67 | ] 68 | }, 69 | { 70 | test: /\.js$/, 71 | exclude: /(node_modules)/, 72 | use: { 73 | loader: 'babel-loader', 74 | options: { 75 | presets: ["env"] 76 | } 77 | } 78 | }, 79 | { 80 | test: /\.(png|jpg|gif)$/, 81 | use: [ 82 | { 83 | loader: 'url-loader', 84 | options: { 85 | limit: 8192 86 | } 87 | } 88 | ] 89 | }, 90 | ] 91 | }, 92 | plugins: [ 93 | // new HtmlWebpackPlugin ({ 94 | // filename: 'index.html', 95 | // template: 'index.html', 96 | // inject: true 97 | // }), 98 | extractSass 99 | ], 100 | devServer: { 101 | // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用： 102 | contentBase: "./", 103 | host: '0.0.0.0', 104 | // 端口号 105 | port: 1999, 106 | //当有编译器错误或警告时，在浏览器中显示全屏覆盖。默认禁用。如果您只想显示编译器错误： 107 | noInfo: true, 108 | // 配置端口号 109 | overlay: true, 110 | }, 111 | resolve: { 112 | alias: { 113 | 'src': resolve('src'), 114 | 'commonjs': resolve('src/commonjs'), 115 | 'scss': resolve('src/scss'), 116 | 'stylus': resolve('src/stylus'), 117 | 'script': resolve('src/script'), 118 | 'static': resolve('static'), 119 | } 120 | }, 121 | optimization: { 122 | splitChunks: { 123 | chunks: "all", 124 | minSize: 30000, 125 | minChunks: 3, 126 | maxAsyncRequests: 5, 127 | maxInitialRequests: 3, 128 | name: true, 129 | cacheGroups: { 130 | default: { 131 | minChunks: 2, 132 | priority: -20, 133 | reuseExistingChunk: true, 134 | }, 135 | vendors: { 136 | test: /[\\/]node_modules[\\/]/, 137 | priority: -10 138 | } 139 | } 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /.sass-cache/e2214a8e0a0ef64109648bc4379ad363dc2c7c41/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | ff2e5c1b784cd29f2321d28a68782dc7c9611f46 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"css3/border-radius:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i": 5 | @fileI"fD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0o; ;I"css3/inline-block; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0o; ;I"css3/opacity; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/box-shadow; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/text-shadow; T;[; 14 | 0; @ 15 | ; 0; i 16 | ;o; ;o;; i 17 | ;i;o;; i 18 | ;i ;@;@;0o; ;I"css3/columns; T;[; 19 | 0; @ 20 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/box-sizing; T;[; 21 | 0; @ 22 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/flexbox; T;[; 23 | 0; @ 24 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/images; T;[; 25 | 0; @ 26 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/background-clip; T;[; 27 | 0; @ 28 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/background-origin; T;[; 29 | 0; @ 30 | ; 0; i;o; ;o;; i;i;o;; i;i&;@;@;0o; ;I"css3/background-size; T;[; 31 | 0; @ 32 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/font-face; T;[; 33 | 0; @ 34 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transform; T;[; 35 | 0; @ 36 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transition; T;[; 37 | 0; @ 38 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/appearance; T;[; 39 | 0; @ 40 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/animation; T;[; 41 | 0; @ 42 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/regions; T;[; 43 | 0; @ 44 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/hyphenation; T;[; 45 | 0; @ 46 | ; 0; i;o; ;o;; i;i;o;; i;i ;@;@;0o; ;I"css3/filter; T;[; 47 | 0; @ 48 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/user-interface; T;[; 49 | 0; @ 50 | ; 0; i;o; ;o;; i;i;o;; i;i#;@;@;0; 51 | 0; @ 52 | ; I"<@import "css3/border-radius"; 53 | @import "css3/inline-block"; 54 | @import "css3/opacity"; 55 | @import "css3/box-shadow"; 56 | @import "css3/text-shadow"; 57 | @import "css3/columns"; 58 | @import "css3/box-sizing"; 59 | @import "css3/flexbox"; 60 | @import "css3/images"; 61 | @import "css3/background-clip"; 62 | @import "css3/background-origin"; 63 | @import "css3/background-size"; 64 | @import "css3/font-face"; 65 | @import "css3/transform"; 66 | @import "css3/transition"; 67 | @import "css3/appearance"; 68 | @import "css3/animation"; 69 | @import "css3/regions"; 70 | @import "css3/hyphenation"; 71 | @import "css3/filter"; 72 | @import "css3/user-interface"; 73 | ; T:@has_childrenT; i;o; ;o;; i;i;o;; i;i;@;@ -------------------------------------------------------------------------------- /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/font-icon/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IcoMoon Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Font Name: icomoon (Glyphs: 3)

13 |
14 |
15 |

Grid Size: Unknown

16 |
17 |
18 | 19 | 20 | 21 | icon-next 22 |
23 |
24 | 25 | 26 |
27 |
28 | liga: 29 | 30 |
31 |
32 |
33 |
34 |

Grid Size: 16

35 |
36 |
37 | 38 | 39 | 40 | icon-play 41 |
42 |
43 | 44 | 45 |
46 |
47 | liga: 48 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 | icon-pause 57 |
58 |
59 | 60 | 61 |
62 |
63 | liga: 64 | 65 |
66 |
67 |
68 | 69 | 70 |
71 |

Font Test Drive

72 | 77 | 79 |
  80 |
81 |
82 | 83 |
84 |

Generated by IcoMoon

85 |
86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_appearance.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 8c228e867e069d1b52ae586e30be356946cddfdf 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Appearance */:ET: 4 | @type: silent;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"hC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_appearance.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 8 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/support; T;[; 0; @ :@template0;i;o; ;o;;i;i;o;;i;i;@;@:@imported_file0o; ;[I"6/* Change the appearance for Mozilla, Webkit and possibly the future. 9 | * The appearance property is currently not present in any newer CSS specification. 10 | * 11 | * There is no official list of accepted values, but you might check these source: 12 | * 13 | * * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 14 | * * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 15 | * (search for 'appearance' within the page) */; T; 16 | ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i;i6;@;@o:Sass::Tree::MixinDefNode: 17 | @nameI"appearance; T: 18 | @args[[o:!Sass::Script::Tree::Variable ;#I"appearance; T:@underscored_nameI"appearance; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i#;@;@; @; @ 0: @splat0;[ o; ;[I"7/* There is no caniuse tracking for appearance. */; T; 19 | ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i7;@;@o:Sass::Tree::VariableNode;#I"appearance; T: 20 | @expro: Sass::Script::Tree::Funcall;#I" unquote; T;$[o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i;o;;i;i(;@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;'0;i;o; ;o;;i;i;o;;i;i);@;@; @; @ : @guarded0: @global0;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i);@;@o:Sass::Tree::MixinNode;#I"with-prefix; T;$[o: Sass::Script::Tree::Literal 21 | ;o: Sass::Script::Value::String ;I" -moz; T; @ ; 22 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i!;@;@;'0; @;,o;-;.{;/{;(0;00;[o:Sass::Tree::PropNode;#[I"-moz-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ : 23 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i+;o;;i;iG;@;@:@name_source_rangeo; ;@a;o;;i;i:;@;@:@value_source_rangeo; ;o;;i;i<;@b;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i&;@;@:@has_childrenTo;3;#I"with-prefix; T;$[o;4 24 | ;o;5 ;I" -webkit; T; @ ; 25 | ;6;70;i;o; ;o;;i;i;o;;i;i$;@;@;'0; @;,o;-;.{;/{;(0;00;[o;8;#[I"-webkit-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ ;9i;:;;;[; 0; @ ;i;o; ;o;;i;i(;o;;i;iG;@;@;T; 0; @ ;i;o; ;o;;i;i;o;;i;i%;@;@;>T; 0; @ ; I"b// Appearance 26 | @import "compass/support"; 27 | 28 | // Change the appearance for Mozilla, Webkit and possibly the future. 29 | // The appearance property is currently not present in any newer CSS specification. 30 | // 31 | // There is no official list of accepted values, but you might check these source: 32 | // 33 | // * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 34 | // * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 35 | // (search for 'appearance' within the page) 36 | @mixin appearance($appearance) { 37 | // There is no caniuse tracking for appearance. 38 | $appearance: unquote($appearance); 39 | @include with-prefix(-moz) { -moz-appearance: $appearance; } 40 | @include with-prefix(-webkit) { -webkit-appearance: $appearance; } 41 | } 42 | ; T;i;o; ;o;;i;i;o;;i;i;@;@;>T -------------------------------------------------------------------------------- /.sass-cache/66a6c63543755e256f50ddbcedde96ac95a39daf/_appearance.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 8c228e867e069d1b52ae586e30be356946cddfdf 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Appearance */:ET: 4 | @type: silent;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"qD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_appearance.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 8 | @hash}Fo:Sass::Tree::ImportNode :@imported_filenameI"compass/support; T;[; 0; @ :@template0;i;o; ;o;;i;i;o;;i;i;@;@:@imported_file0o; ;[I"6/* Change the appearance for Mozilla, Webkit and possibly the future. 9 | * The appearance property is currently not present in any newer CSS specification. 10 | * 11 | * There is no official list of accepted values, but you might check these source: 12 | * 13 | * * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 14 | * * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 15 | * (search for 'appearance' within the page) */; T; 16 | ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i;i6;@;@o:Sass::Tree::MixinDefNode: 17 | @nameI"appearance; T: 18 | @args[[o:!Sass::Script::Tree::Variable ;#I"appearance; T:@underscored_nameI"appearance; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i#;@;@; @; @ 0: @splat0;[ o; ;[I"7/* There is no caniuse tracking for appearance. */; T; 19 | ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i7;@;@o:Sass::Tree::VariableNode;#I"appearance; T: 20 | @expro: Sass::Script::Tree::Funcall;#I" unquote; T;$[o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i;o;;i;i(;@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;'0;i;o; ;o;;i;i;o;;i;i);@;@; @; @ : @guarded0: @global0;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i);@;@o:Sass::Tree::MixinNode;#I"with-prefix; T;$[o: Sass::Script::Tree::Literal 21 | ;o: Sass::Script::Value::String ;I" -moz; T; @ ; 22 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i!;@;@;'0; @;,o;-;.{;/{;(0;00;[o:Sass::Tree::PropNode;#[I"-moz-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ : 23 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i+;o;;i;iG;@;@:@name_source_rangeo; ;@a;o;;i;i:;@;@:@value_source_rangeo; ;o;;i;i<;@b;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i&;@;@:@has_childrenTo;3;#I"with-prefix; T;$[o;4 24 | ;o;5 ;I" -webkit; T; @ ; 25 | ;6;70;i;o; ;o;;i;i;o;;i;i$;@;@;'0; @;,o;-;.{;/{;(0;00;[o;8;#[I"-webkit-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ ;9i;:;;;[; 0; @ ;i;o; ;o;;i;i(;o;;i;iG;@;@;T; 0; @ ;i;o; ;o;;i;i;o;;i;i%;@;@;>T; 0; @ ; I"b// Appearance 26 | @import "compass/support"; 27 | 28 | // Change the appearance for Mozilla, Webkit and possibly the future. 29 | // The appearance property is currently not present in any newer CSS specification. 30 | // 31 | // There is no official list of accepted values, but you might check these source: 32 | // 33 | // * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 34 | // * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 35 | // (search for 'appearance' within the page) 36 | @mixin appearance($appearance) { 37 | // There is no caniuse tracking for appearance. 38 | $appearance: unquote($appearance); 39 | @include with-prefix(-moz) { -moz-appearance: $appearance; } 40 | @include with-prefix(-webkit) { -webkit-appearance: $appearance; } 41 | } 42 | ; T;>T;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /src/lib/d-audio.less: -------------------------------------------------------------------------------- 1 | @import "./font-icon/style.css"; 2 | 3 | @keyframes rotateMusicLogo { 4 | 0% { 5 | transform: rotate(0); 6 | } 7 | 50% { 8 | transform: rotate(180deg); 9 | } 10 | 100% { 11 | transform: rotate(360deg); 12 | } 13 | } 14 | @-webkit-keyframes rotateMusicLogo { 15 | 0% { 16 | transform: rotate(0); 17 | } 18 | 50% { 19 | transform: rotate(180deg); 20 | } 21 | 100% { 22 | transform: rotate(360deg); 23 | } 24 | } 25 | @-moz-keyframes rotateMusicLogo { 26 | 0% { 27 | transform: rotate(0); 28 | } 29 | 50% { 30 | transform: rotate(180deg); 31 | } 32 | 100% { 33 | transform: rotate(360deg); 34 | } 35 | } 36 | 37 | // 添加blur模糊效果 38 | // 如果不是绝对定位，父元素需要设置相对定位 39 | // @blur 为模糊的数值 40 | // @height 区域的高度 41 | // @position 为位置 默认50% 42 | .blur(@blur, @height, @position: 50%, @scale: 1.5) { 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | right: 0; 47 | height: @height; 48 | background-repeat: no-repeat; 49 | background-size: cover; 50 | background-position: @position; 51 | -webkit-filter: blur(@blur); 52 | filter: blur(@blur); 53 | -webkit-transform: scale(@scale); 54 | transform: scale(@scale); 55 | overflow: hidden; 56 | &::before{ 57 | content: ''; 58 | position: absolute; 59 | left: 0; 60 | top: 0; 61 | right: 0; 62 | bottom: 0; 63 | z-index: 1; 64 | background: rgba(0,0,0,0.1); 65 | transition: all 0.3s; 66 | } 67 | &.draken{ 68 | &::before{ 69 | background: rgba(0,0,0,0.3); 70 | } 71 | } 72 | } 73 | 74 | .blur(@blur, @height, @position: 50%, @scale: 1.5) when (@height = auto) { 75 | bottom: 0; 76 | height: unset; 77 | } 78 | 79 | .audio-content{ 80 | width: 100%; 81 | height: 100%; 82 | min-width: 240px; 83 | min-height: 50px; 84 | overflow: hidden; 85 | position: relative; 86 | transition: all 0.3s; 87 | -webkit-transform-origin: right center; 88 | -moz-transform-origin: right center; 89 | transform-origin: right center; 90 | border-radius: 6px; 91 | user-select: none; 92 | transform: translate3d(0,0,0); 93 | font-family: 'PingFangSC-Regular', Arial, Helvetica, sans-serif; 94 | &.cricle{ 95 | min-width: 50px; 96 | min-height: 50px; 97 | border-radius: 50%; 98 | .audio-detail{ 99 | visibility: hidden; 100 | opacity: 0; 101 | .right-info{ 102 | visibility: hidden; 103 | opacity: 0; 104 | } 105 | } 106 | .audio-cricle{ 107 | visibility: visible; 108 | opacity: 1; 109 | z-index: 6; 110 | min-width: 50px; 111 | min-height: 50px; 112 | } 113 | } 114 | .audio-cricle{ 115 | width: 50px; 116 | height: 50px; 117 | position: relative; 118 | visibility: hidden; 119 | overflow: hidden; 120 | transition: all 0.5s; 121 | opacity: 0; 122 | border-radius: 50%; 123 | transform: translate3d(0,0,0); 124 | -moz-animation: rotateMusicLogo 8s linear infinite; 125 | -webkit-animation: rotateMusicLogo 8s linear infinite; 126 | animation: rotateMusicLogo 8s linear infinite; 127 | -moz-animation-play-state: paused; 128 | -webkit-animation-play-state: paused; 129 | animation-play-state: paused; 130 | cursor: pointer; 131 | img{ 132 | width: 100%; 133 | height: 100%; 134 | } 135 | .d-audio-cricle-range{ 136 | position: absolute; 137 | top: 0; 138 | left: 0; 139 | bottom: 0; 140 | right: 0; 141 | border: 3px solid rgba(14, 90, 80, 0.397); 142 | border-radius: 50%; 143 | } 144 | &.active{ 145 | -moz-animation-play-state: running; 146 | -webkit-animation-play-state: running; 147 | animation-play-state: running; 148 | } 149 | } 150 | .audio-detail{ 151 | position: absolute; 152 | top: 0; 153 | left: 0; 154 | right: 0; 155 | bottom: 0; 156 | z-index: 5; 157 | display: flex; 158 | align-items: center; 159 | justify-content: center; 160 | visibility: visible; 161 | opacity: 1; 162 | border-radius: 8px; 163 | transition: all 0.5s; 164 | transform: translate3d(0,0,0); 165 | .left-config{ 166 | flex: 0 0 90px; 167 | height: 100%; 168 | overflow: hidden; 169 | display: flex; 170 | align-items: center; 171 | padding: 0 5px 0 10px; 172 | box-sizing: border-box; 173 | i{ 174 | display: block; 175 | width: 36px; 176 | height: 36px; 177 | background: rgba(0,0,0,0.2); 178 | transition: all 0.5s; 179 | border-radius: 50%; 180 | color: rgba(255,255,255,0.6); 181 | text-align: center; 182 | line-height: 36px; 183 | font-size: 22px; 184 | cursor: pointer; 185 | &.next{ 186 | width: 28px; 187 | height: 28px; 188 | margin-left: 10px; 189 | line-height: 28px; 190 | font-size: 10px; 191 | } 192 | &:hover{ 193 | background: rgba(0,0,0,0.5); 194 | } 195 | } 196 | } 197 | .right-info{ 198 | flex: 1 1 auto; 199 | height: 100%; 200 | overflow: hidden; 201 | color: #fff; 202 | display: flex; 203 | align-items: center; 204 | justify-content: center; 205 | flex-direction: column; 206 | box-sizing: border-box; 207 | padding: 0 10px 0 5px; 208 | visibility: visible; 209 | opacity: 1; 210 | transition: all 0.5s; 211 | .m-title{ 212 | font-size: 16px; 213 | padding: 1px 0; 214 | margin: 0; 215 | font-weight: 200; 216 | text-overflow: ellipsis; 217 | overflow: hidden; 218 | white-space: nowrap; 219 | width: 100%; 220 | text-align: center; 221 | } 222 | .m-singer{ 223 | font-weight: 200; 224 | padding: 1px 0; 225 | font-size: 12px; 226 | margin: 0; 227 | color: rgba(255,255,255,0.8); 228 | text-overflow: ellipsis; 229 | overflow: hidden; 230 | white-space: nowrap; 231 | width: 100%; 232 | text-align: center; 233 | } 234 | } 235 | } 236 | .audio-bg{ 237 | position: absolute; 238 | z-index: -1; 239 | top: 0; 240 | left: 0; 241 | right: 0; 242 | bottom: 0; 243 | .blur(10px, auto, center); 244 | } 245 | .audio-loading{ 246 | position: absolute; 247 | z-index: 12; 248 | top: 0; 249 | left: 0; 250 | right: 0; 251 | bottom: 0; 252 | background: rgba(0, 0, 0, 0.52); 253 | display: flex; 254 | align-items: center; 255 | justify-content: center; 256 | visibility: hidden; 257 | transition: all 0.5s; 258 | opacity: 0; 259 | svg{ 260 | width: 36px; 261 | height: 36px; 262 | } 263 | &.active{ 264 | visibility: visible; 265 | opacity: 1; 266 | } 267 | } 268 | .audio-progress{ 269 | position: absolute; 270 | left: 0; 271 | height: 1px; 272 | bottom: 0; 273 | width: 0; 274 | background-image: linear-gradient(to right, rgba(255, 56, 56, 0.1) 30%, rgba(255, 56, 56, 0.6)); 275 | transition: all 0.5s; 276 | z-index: 4; 277 | } 278 | } -------------------------------------------------------------------------------- /.sass-cache/82117ecccce67b6509a0c6525a1b60121bc4b697/_link-colors.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | f1f4c4a543c0c41b6ce55216bf55000f2be34b69 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"%/* Set all the colors for a link with one mixin call. 4 | * Order of arguments is: 5 | * 6 | * 1. normal 7 | * 2. hover 8 | * 3. active 9 | * 4. visited 10 | * 5. focus 11 | * 12 | * Those states not specified will inherit. 13 | * Mixin to an anchor link like so: 14 | * a 15 | * +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) */:ET: 16 | @type: silent;[:@filename0: @options{: 17 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i9: 18 | @fileI"~D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 19 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 20 | @hash}Fo:Sass::Tree::MixinDefNode: 21 | @nameI"link-colors; T: 22 | @args[ 23 | [o:!Sass::Script::Tree::Variable ;I" normal; T:@underscored_nameI" normal; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i ;@;@; @; @ 0[o;! ;I" 24 | hover; T;"I" 25 | hover; T;#0;i;o; ;o;;i;i";o;;i;i(;@;@; @; @ o: Sass::Script::Tree::Literal 26 | ;o:Sass::Script::Value::Bool;F; @ ;o; ;o;;i ;i%;o;;i ;i*;I"zD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/text/_ellipsis.scss; T;@;i;o; ;o;;i;i*;o;;i;i/;@;@;#0; @[o;! ;I" active; T;"I" active; T;#0;i;o; ;o;;i;i1;o;;i;i8;@;@; @; @ o;$ 27 | ;@';i;o; ;o;;i;i:;o;;i;i?;@;@;#0; @[o;! ;I" visited; T;"I" visited; T;#0;i;o; ;o;;i;iA;o;;i;iI;@;@; @; @ o;$ 28 | ;@';i;o; ;o;;i;iK;o;;i;iP;@;@;#0; @[o;! ;I" 29 | focus; T;"I" 30 | focus; T;#0;i;o; ;o;;i;iR;o;;i;iX;@;@; @; @ o;$ 31 | ;@';i;o; ;o;;i;iZ;o;;i;i_;@;@;#0; @: @splat0;[ 32 | o:Sass::Tree::PropNode;[I" 33 | color; T;o;! ;I" normal; T;"I" normal; T;#0;i;o; ;o;;i;i;o;;i;i;@;@; @; @ : 34 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i;o;;i;i;@;@:@name_source_rangeo; ;@\;o;;i;i ;@;@:@value_source_rangeo; ;o;;i;i;@];@;@u:Sass::Tree::IfNode"[o:!Sass::Script::Tree::Variable : 35 | @nameI" visited:ET:@underscored_nameI" visited;T:@css_variable_warning0: 36 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; 37 | i: @offseti : @end_poso;; 38 | i;i: 39 | @fileI"~D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss;T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 40 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@same_name_warningso:Set: 41 | @hash}F:@filename@ : @options{0[o:Sass::Tree::RuleNode: 42 | @rule[I"&:visited;T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Parent: @suffix0; 43 | i;0o:Sass::Selector::Pseudo :@syntactic_type: 44 | class;I" visited;T: @arg0:@selector0; 45 | i;0: @subject0: @sourceso;;}F; o; ; o;; 46 | i;i;o;; 47 | i;i;0;0; 48 | i;0; 49 | i; 50 | i;0:@selector_source_rangeo; ; o;; 51 | i;i 52 | ;o;; 53 | i;i;@ ;@ : 54 | @tabsi:@children[o:Sass::Tree::PropNode;[I" 55 | color;T: @valueo; ;I" visited;T;I" visited;T; 0; 56 | i; o; ; o;; 57 | i;i;o;; 58 | i;i;@ ;@ ;@ ;@;-i:@prop_syntax:new;.[;0;@; 59 | i; o; ; o;; 60 | i;i ;o;; 61 | i;i;@ ;@ :@name_source_rangeo; ; @4;o;; 62 | i;i;@ ;@ :@value_source_rangeo; ; o;; 63 | i;i;@5;@ ;@ ;0;@; 64 | i; o; ; @&;o;; 65 | i;i;@ ;@ :@has_childrenTu;-[o:!Sass::Script::Tree::Variable : 66 | @nameI" 67 | focus:ET:@underscored_nameI" 68 | focus;T:@css_variable_warning0: 69 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; 70 | i: @offseti : @end_poso;; 71 | i;i: 72 | @fileI"~D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss;T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 73 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@same_name_warningso:Set: 74 | @hash}F:@filename@ : @options{0[o:Sass::Tree::RuleNode: 75 | @rule[I" &:focus;T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Parent: @suffix0; 76 | i;0o:Sass::Selector::Pseudo :@syntactic_type: 77 | class;I" 78 | focus;T: @arg0:@selector0; 79 | i;0: @subject0: @sourceso;;}F; o; ; o;; 80 | i;i;o;; 81 | i;i ;0;0; 82 | i;0; 83 | i; 84 | i;0:@selector_source_rangeo; ; o;; 85 | i;i 86 | ;o;; 87 | i;i;@ ;@ : 88 | @tabsi:@children[o:Sass::Tree::PropNode;[I" 89 | color;T: @valueo; ;I" 90 | focus;T;I" 91 | focus;T; 0; 92 | i; o; ; o;; 93 | i;i;o;; 94 | i;i;@ ;@ ;@ ;@;-i:@prop_syntax:new;.[;0;@; 95 | i; o; ; o;; 96 | i;i ;o;; 97 | i;i;@ ;@ :@name_source_rangeo; ; @4;o;; 98 | i;i;@ ;@ :@value_source_rangeo; ; o;; 99 | i;i;@5;@ ;@ ;0;@; 100 | i; o; ; @&;o;; 101 | i;i;@ ;@ :@has_childrenTu;-[o:!Sass::Script::Tree::Variable : 102 | @nameI" 103 | hover:ET:@underscored_nameI" 104 | hover;T:@css_variable_warning0: 105 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; 106 | i: @offseti : @end_poso;; 107 | i;i: 108 | @fileI"~D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss;T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 109 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@same_name_warningso:Set: 110 | @hash}F:@filename@ : @options{0[o:Sass::Tree::RuleNode: 111 | @rule[I" &:hover;T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Parent: @suffix0; 112 | i;0o:Sass::Selector::Pseudo :@syntactic_type: 113 | class;I" 114 | hover;T: @arg0:@selector0; 115 | i;0: @subject0: @sourceso;;}F; o; ; o;; 116 | i;i;o;; 117 | i;i ;0;0; 118 | i;0; 119 | i; 120 | i;0:@selector_source_rangeo; ; o;; 121 | i;i 122 | ;o;; 123 | i;i;@ ;@ : 124 | @tabsi:@children[o:Sass::Tree::PropNode;[I" 125 | color;T: @valueo; ;I" 126 | hover;T;I" 127 | hover;T; 0; 128 | i; o; ; o;; 129 | i;i;o;; 130 | i;i;@ ;@ ;@ ;@;-i:@prop_syntax:new;.[;0;@; 131 | i; o; ; o;; 132 | i;i ;o;; 133 | i;i;@ ;@ :@name_source_rangeo; ; @4;o;; 134 | i;i;@ ;@ :@value_source_rangeo; ; o;; 135 | i;i;@5;@ ;@ ;0;@; 136 | i; o; ; @&;o;; 137 | i;i;@ ;@ :@has_childrenTu;-[o:!Sass::Script::Tree::Variable : 138 | @nameI" active:ET:@underscored_nameI" active;T:@css_variable_warning0: 139 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; 140 | i: @offseti : @end_poso;; 141 | i;i: 142 | @fileI"~D:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss;T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 143 | @rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@real_rootI"SD:/qianduan/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets;T:@same_name_warningso:Set: 144 | @hash}F:@filename@ : @options{0[o:Sass::Tree::RuleNode: 145 | @rule[I" &:active;T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Parent: @suffix0; 146 | i ;0o:Sass::Selector::Pseudo :@syntactic_type: 147 | class;I" active;T: @arg0:@selector0; 148 | i ;0: @subject0: @sourceso;;}F; o; ; o;; 149 | i;i;o;; 150 | i;i;0;0; 151 | i ;0; 152 | i ; 153 | i ;0:@selector_source_rangeo; ; o;; 154 | i ;i 155 | ;o;; 156 | i ;i;@ ;@ : 157 | @tabsi:@children[o:Sass::Tree::PropNode;[I" 158 | color;T: @valueo; ;I" active;T;I" active;T; 0; 159 | i!; o; ; o;; 160 | i!;i;o;; 161 | i!;i;@ ;@ ;@ ;@;-i:@prop_syntax:new;.[;0;@; 162 | i!; o; ; o;; 163 | i!;i ;o;; 164 | i!;i;@ ;@ :@name_source_rangeo; ; @4;o;; 165 | i!;i;@ ;@ :@value_source_rangeo; ; o;; 166 | i!;i;@5;@ ;@ ;0;@; 167 | i ; o; ; @&;o;; 168 | i ;i;@ ;@ :@has_childrenT; 0; @ ;i;o; ;o;;i;i;o;;i;ia;@;@:@has_childrenT; 0; @ :@templateI"v// Set all the colors for a link with one mixin call. 169 | // Order of arguments is: 170 | // 171 | // 1. normal 172 | // 2. hover 173 | // 3. active 174 | // 4. visited 175 | // 5. focus 176 | // 177 | // Those states not specified will inherit. 178 | // Mixin to an anchor link like so: 179 | // a 180 | // +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) 181 | 182 | @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) { 183 | color: $normal; 184 | @if $visited { 185 | &:visited { 186 | color: $visited; } } 187 | @if $focus { 188 | &:focus { 189 | color: $focus; } } 190 | @if $hover { 191 | &:hover { 192 | color: $hover; } } 193 | @if $active { 194 | &:active { 195 | color: $active; } } } 196 | ; T;.T;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /src/lib/d-audio.js: -------------------------------------------------------------------------------- 1 | import './d-audio.less' 2 | import { dom } from './utils.js' 3 | import Vibrant from 'node-vibrant' 4 | export default class Dmusic { 5 | constructor (options) { 6 | let defaultOptions = { 7 | // 音乐append的元素 8 | ele: '#d-audio', 9 | // 音乐封面 10 | imageurl: 'https://www.daiwei.site/static/logo/sunmmer.jpg', 11 | // 音乐地址 12 | src: '', 13 | // 音乐名字 14 | name: '', 15 | // 音乐歌手 16 | singer: '', 17 | // 是否显示进度信息 18 | showprogress: true, 19 | // '' 就是默认状态， cricle则是初始化就是圆形且可以旋转 20 | initstate: '', 21 | // 是否循环 22 | loop: false, 23 | // 音乐播放结束事件，可设置播放下一首音乐 24 | ended: () => {}, 25 | // 音乐下一曲的点击事件触发，需要配合checkAudio体现切歌的效果 26 | next: () => {} 27 | } 28 | if (document.getElementById('d-audio-content')) { 29 | console.error('you have already init d-auido, do not init again'); 30 | return 31 | } 32 | 33 | this.opt = Object.assign(defaultOptions, options) 34 | // 判断传进来的是DOM还是字符串 35 | if (typeof this.opt.ele === 'string') { 36 | this.opt.ele = document.querySelector(this.opt.ele) 37 | } 38 | 39 | // 初始化一些内部设置 40 | this.loading = false 41 | this.isplaying = false 42 | this.progress = 0 43 | this.height = this.opt.ele.offsetHeight || 50 44 | this.duration = 0 45 | this.currentTime = 0 46 | this.defaultimg = 'https://www.daiwei.site/static/logo/sunmmer.jpg' 47 | 48 | // 需要的元素 49 | this.dom = { 50 | cricleImage: null, 51 | playPause: null, 52 | next: null, 53 | audioTitle: null, 54 | audioSinger: null, 55 | } 56 | 57 | // 初始化audio // 拿到各个元素 58 | this.initAudio() 59 | this.initEvent() 60 | } 61 | 62 | // 初始化元素 63 | initAudio() { 64 | let d = this.dom 65 | // audio-content 66 | d.audioContent = document.createElement('div') 67 | if (this.opt.initstate === 'cricle') { 68 | d.audioContent.className = 'audio-content ' + this.opt.initstate 69 | // 这样才能形成一个圆 70 | d.audioContent.style.width = this.height + 'px' 71 | } else { 72 | d.audioContent.className = 'audio-content' 73 | } 74 | d.audioContent.setAttribute('id', 'd-audio-content') 75 | this.opt.ele.appendChild(d.audioContent) 76 | 77 | // audio-cricle 78 | d.audioCricle = document.createElement('div') 79 | d.audioCricle.className = 'audio-cricle' 80 | d.audioCricle.title = this.opt.name + ' - ' + this.opt.singer 81 | d.audioCricle.innerHTML = `` 82 | d.audioCricle.style.cssText = `width: ${this.height}px; height: ${this.height}px;` 83 | d.audioContent.appendChild(d.audioCricle) 84 | 85 | // d-audio-cricle-range 86 | d.audioCricleRange = document.createElement('div') 87 | d.audioCricleRange.className = 'd-audio-cricle-range' 88 | d.audioCricle.appendChild(d.audioCricleRange) 89 | 90 | // audio-detail 91 | d.audioDetail = document.createElement('div') 92 | d.audioDetail.className = 'audio-detail' 93 | d.audioDetail.innerHTML = `
94 | 95 | 96 |
97 |
98 |

${this.opt.name}

99 |

${this.opt.singer}

100 |
` 101 | d.audioContent.appendChild(d.audioDetail) 102 | 103 | // audio-bg 104 | d.audioBg = document.createElement('div') 105 | d.audioBg.className = 'audio-bg' 106 | d.audioBg.style.cssText = `background-image: url("${this.opt.imageurl || this.defaultimg}");background-size: cover;background-position: center;` 107 | d.audioContent.appendChild(d.audioBg) 108 | 109 | // audio-loading 110 | d.audioLoading = document.createElement('div') 111 | d.audioLoading.className = 'audio-loading' 112 | d.audioLoading.innerHTML = ` 114 | 115 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | ` 139 | d.audioContent.appendChild(d.audioLoading) 140 | 141 | // audio-progress 142 | if (this.opt.showprogress) { 143 | d.audioProgress = document.createElement('div') 144 | d.audioProgress.className = 'audio-progress' 145 | d.audioContent.appendChild(d.audioProgress) 146 | } 147 | 148 | d.audioEle = document.createElement('audio') 149 | d.audioEle.src = this.opt.src 150 | if (this.opt.loop) { 151 | d.audioEle.loop = true 152 | } 153 | d.audioContent.appendChild(d.audioEle) 154 | 155 | this.initMusicColor(this.opt.imageurl || this.defaultimg) 156 | 157 | this.initDomInfo() 158 | } 159 | 160 | // 将初始化需呀使用的元素放到this.dom中方便使用 161 | initDomInfo () { 162 | this.dom.cricleImage = document.getElementById('d-audio-cricleImage') 163 | this.dom.playPause = document.getElementById('d-audio-playPause') 164 | this.dom.next = document.getElementById('d-audio-next') 165 | this.dom.audioTitle = document.getElementById('d-audio-audioTitle') 166 | this.dom.audioSinger = document.getElementById('d-audio-audioSinger') 167 | } 168 | 169 | /** 170 | * 获取图片的颜色以设置进度条的颜色以及圆环的颜色 171 | * @param { string } 图片地址 172 | */ 173 | initMusicColor (pic) { 174 | let d = this.dom 175 | let range = document.getElementsByClassName('d-audio-cricle-range')[0] 176 | if (!this.opt.showprogress) return 177 | let color = {} 178 | // Vibrant 179 | Vibrant.from(pic).getPalette() 180 | .then((palette) => { 181 | // palette.DarkMuted 182 | color.l = `rgba(${palette.LightMuted.r}, ${palette.LightMuted.g}, ${palette.LightMuted.b}, 0.1)` 183 | color.r = `rgba(${palette.LightMuted.r}, ${palette.LightMuted.g}, ${palette.LightMuted.b}, 0.66)` 184 | color.range = `rgba(${palette.LightMuted.r}, ${palette.LightMuted.g}, ${palette.LightMuted.b}, 0.3)` 185 | range.style.border = `3px solid ${color.range}` 186 | d.audioProgress.style.background = `linear-gradient(to right, ${color.l} 30%, ${color.r})` 187 | }, err => { 188 | color.l = `rgba(255, 56, 56, 0.1)` 189 | color.r = `rgba(255, 56, 56, 0.6)` 190 | color.range = `rgba(255, 56, 56, 0.3)` 191 | range.style.border = `3px solid ${color.range}` 192 | d.audioProgress.style.background = `linear-gradient(to right, ${color.l} 30%, ${color.r})` 193 | }) 194 | } 195 | 196 | // 初始化事件 197 | initEvent () { 198 | let d = this.dom 199 | let _this = this 200 | // 状态切换 201 | d.audioCricle.onclick = () => { 202 | dom.removeClass(d.audioContent, 'cricle') 203 | } 204 | d.audioDetail.onclick = () => { 205 | dom.addClass(d.audioContent, 'cricle') 206 | // 这样才能形成一个圆 207 | d.audioContent.style.width = this.height + 'px' 208 | } 209 | 210 | // 点击播放暂停 211 | d.playPause.onclick = (e) => { 212 | e.stopPropagation() 213 | _this.playPause() 214 | } 215 | 216 | // 点击播放下一首 217 | d.next.onclick = (e) => { 218 | e.stopPropagation() 219 | _this.opt.next() 220 | } 221 | 222 | // audio的相关事件 223 | // onplaying 224 | d.audioEle.onplaying = (e) => { 225 | _this.isplaying = true 226 | // cricle + 旋转 227 | dom.addClass(d.audioCricle, 'active') 228 | // 图标变化 229 | dom.removeClass(d.playPause, 'icon-pause') 230 | dom.addClass(d.playPause, 'icon-play') 231 | this.hideLoading() 232 | } 233 | 234 | // onpause 235 | d.audioEle.onpause = (e) => { 236 | _this.isplaying = false 237 | // cricle + 旋转 238 | dom.removeClass(d.audioCricle, 'active') 239 | // 图标变化 240 | dom.removeClass(d.playPause, 'icon-play') 241 | dom.addClass(d.playPause, 'icon-pause') 242 | } 243 | 244 | // 音乐播放结束时间 245 | d.audioEle.onended = () => { 246 | dom.removeClass(d.playPause, 'icon-pause') 247 | dom.addClass(d.playPause, 'icon-play') 248 | _this.opt.next() 249 | } 250 | 251 | // 可以播放的时候触发 252 | d.audioEle.oncanplay = () => { 253 | _this.loading = false 254 | _this.duration = d.audioEle.duration 255 | } 256 | 257 | // 进度信息 258 | if (this.opt.showprogress) { 259 | d.audioEle.ontimeupdate = (e) => { 260 | _this.updateProgress(e.target.currentTime) 261 | } 262 | } 263 | 264 | // 加载事件 265 | d.audioEle.onwaiting = () => { 266 | _this.showLoading() 267 | }, 268 | 269 | d.audioEle.onerror = (e) => { 270 | console.error(e) 271 | _this.opt.next() 272 | } 273 | } 274 | 275 | /** 276 | * 切歌 277 | * src 地址 278 | * imageurl 封面 279 | * name 歌曲名称 280 | * singer 歌手 281 | */ 282 | checkAudio (src, imageurl = this.defaultimg, name, singer) { 283 | let d = this.dom 284 | 285 | d.audioEle.src = src 286 | d.cricleImage.src = imageurl 287 | d.audioBg.style.cssText = `background-image: url("${imageurl}");background-size: cover;background-position: center;` 288 | d.audioTitle.innerText = name 289 | d.audioSinger.innerText = singer 290 | d.audioCricle.title = name + ' - ' + singer 291 | // 初始化进度条颜色 292 | this.initMusicColor(imageurl) 293 | // 播放 294 | this.play() 295 | } 296 | 297 | // 播放暂停 298 | playPause () { 299 | let d = this.dom 300 | if (d.audioEle.paused) { 301 | this.play() 302 | } else { 303 | this.pause() 304 | } 305 | } 306 | 307 | // 播放 308 | play () { 309 | this.dom.audioEle.play() 310 | } 311 | 312 | // 暂停 313 | pause () { 314 | this.dom.audioEle.pause() 315 | } 316 | 317 | // 进度条变化 318 | updateProgress (currentTime) { 319 | let d = this.dom 320 | this.currentTime = currentTime 321 | this.progress = this.currentTime / this.duration 322 | d.audioProgress.style.width = this.progress * 100 + '%' 323 | } 324 | 325 | // 显示loading 326 | showLoading () { 327 | this.loading = true 328 | dom.addClass(this.dom.audioLoading, 'active') 329 | } 330 | 331 | // 隐藏loading 332 | hideLoading () { 333 | this.loading = false 334 | dom.removeClass(this.dom.audioLoading, 'active') 335 | } 336 | } 337 | -------------------------------------------------------------------------------- /lib/d-audio/d-audio.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url(data:application/vnd.ms-fontobject;base64,gAUAANwEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAABdUP1gAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIGNgAAALwAAABgY21hcOnI6bQAAAEcAAAAXGdhc3AAAAAQAAABeAAAAAhnbHlm9rhaTAAAAYAAAAEMaGVhZBE4x1UAAAKMAAAANmhoZWEHWAPIAAACxAAAACRobXR4EgACTwAAAugAAAAcbG9jYQCYAOwAAAMEAAAAEG1heHAACgAkAAADFAAAACBuYW1lmUoJ+wAAAzQAAAGGcG9zdAADAAAAAAS8AAAAIAADA4ABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOmMA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABABAAAAADAAIAAIABAABACDpAemM//3//wAAAAAAIOkA6Yz//f//AAH/4xcEFnoAAwABAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgErAFcC0wMrABAAIQAAASMiBhURFBY7ATI2NRE2JiMhIyIGFREUFjsBMjY1ETYmIwFeDxAUEw8PDhQBEw4BVQ8QFBQODw4UAhMPAysUDv1xDxQUDwKPDhQUDv1xDxQUDwKPDhQAAAABAN4AaQMNAxcADAAACQEmBhURFBY3AT4BJwMN/hEVKysVAe0WARUB5AEzDRkY/ZoYGQ0BMwsyCwAAAAABAEYAGAOWA2gABwAAJREBEQERMxEDLP0aAuZqGAGo/lgDUP5YAaj8sAAAAAEAAAAAAADWD9UFXw889QALBAAAAAAA10LBeAAAAADXQsF4AAAAAAOWA2gAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA5YAAQAAAAAAAAAAAAAAAAAAAAcEAAAAAAAAAAAAAAACAAAABAABKwQAAN4EAABGAAAAAAAKABQAHgBSAHAAhgABAAAABwAiAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==); 4 | src: url(data:application/vnd.ms-fontobject;base64,gAUAANwEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAABdUP1gAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIGNgAAALwAAABgY21hcOnI6bQAAAEcAAAAXGdhc3AAAAAQAAABeAAAAAhnbHlm9rhaTAAAAYAAAAEMaGVhZBE4x1UAAAKMAAAANmhoZWEHWAPIAAACxAAAACRobXR4EgACTwAAAugAAAAcbG9jYQCYAOwAAAMEAAAAEG1heHAACgAkAAADFAAAACBuYW1lmUoJ+wAAAzQAAAGGcG9zdAADAAAAAAS8AAAAIAADA4ABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOmMA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABABAAAAADAAIAAIABAABACDpAemM//3//wAAAAAAIOkA6Yz//f//AAH/4xcEFnoAAwABAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgErAFcC0wMrABAAIQAAASMiBhURFBY7ATI2NRE2JiMhIyIGFREUFjsBMjY1ETYmIwFeDxAUEw8PDhQBEw4BVQ8QFBQODw4UAhMPAysUDv1xDxQUDwKPDhQUDv1xDxQUDwKPDhQAAAABAN4AaQMNAxcADAAACQEmBhURFBY3AT4BJwMN/hEVKysVAe0WARUB5AEzDRkY/ZoYGQ0BMwsyCwAAAAABAEYAGAOWA2gABwAAJREBEQERMxEDLP0aAuZqGAGo/lgDUP5YAaj8sAAAAAEAAAAAAADWD9UFXw889QALBAAAAAAA10LBeAAAAADXQsF4AAAAAAOWA2gAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA5YAAQAAAAAAAAAAAAAAAAAAAAcEAAAAAAAAAAAAAAACAAAABAABKwQAAN4EAABGAAAAAAAKABQAHgBSAHAAhgABAAAABwAiAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==#iefix) format('embedded-opentype'), 5 | url(data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBjYAAAC8AAAAYGNtYXDpyOm0AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5Zva4WkwAAAGAAAABDGhlYWQROMdVAAACjAAAADZoaGVhB1gDyAAAAsQAAAAkaG10eBIAAk8AAALoAAAAHGxvY2EAmADsAAADBAAAABBtYXhwAAoAJAAAAxQAAAAgbmFtZZlKCfsAAAM0AAABhnBvc3QAAwAAAAAEvAAAACAAAwOAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpjAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg6QHpjP/9//8AAAAAACDpAOmM//3//wAB/+MXBBZ6AAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIBKwBXAtMDKwAQACEAAAEjIgYVERQWOwEyNjURNiYjISMiBhURFBY7ATI2NRE2JiMBXg8QFBMPDw4UARMOAVUPEBQUDg8OFAITDwMrFA79cQ8UFA8Cjw4UFA79cQ8UFA8Cjw4UAAAAAQDeAGkDDQMXAAwAAAkBJgYVERQWNwE+AScDDf4RFSsrFQHtFgEVAeQBMw0ZGP2aGBkNATMLMgsAAAAAAQBGABgDlgNoAAcAACURAREBETMRAyz9GgLmahgBqP5YA1D+WAGo/LAAAAABAAAAAAAA1g/VBV8PPPUACwQAAAAAANdCwXgAAAAA10LBeAAAAAADlgNoAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOWAAEAAAAAAAAAAAAAAAAAAAAHBAAAAAAAAAAAAAAAAgAAAAQAASsEAADeBAAARgAAAAAACgAUAB4AUgBwAIYAAQAAAAcAIgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), 6 | url(data:font/woff;base64,d09GRgABAAAAAAUoAAsAAAAABNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIGNmNtYXAAAAFoAAAAXAAAAFzpyOm0Z2FzcAAAAcQAAAAIAAAACAAAABBnbHlmAAABzAAAAQwAAAEM9rhaTGhlYWQAAALYAAAANgAAADYROMdVaGhlYQAAAxAAAAAkAAAAJAdYA8hobXR4AAADNAAAABwAAAAcEgACT2xvY2EAAANQAAAAEAAAABAAmADsbWF4cAAAA2AAAAAgAAAAIAAKACRuYW1lAAADgAAAAYYAAAGGmUoJ+3Bvc3QAAAUIAAAAIAAAACAAAwAAAAMDgAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6YwDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAEAIOkB6Yz//f//AAAAAAAg6QDpjP/9//8AAf/jFwQWegADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACASsAVwLTAysAEAAhAAABIyIGFREUFjsBMjY1ETYmIyEjIgYVERQWOwEyNjURNiYjAV4PEBQTDw8OFAETDgFVDxAUFA4PDhQCEw8DKxQO/XEPFBQPAo8OFBQO/XEPFBQPAo8OFAAAAAEA3gBpAw0DFwAMAAAJASYGFREUFjcBPgEnAw3+ERUrKxUB7RYBFQHkATMNGRj9mhgZDQEzCzILAAAAAAEARgAYA5YDaAAHAAAlEQERAREzEQMs/RoC5moYAaj+WANQ/lgBqPywAAAAAQAAAAAAANYP1QVfDzz1AAsEAAAAAADXQsF4AAAAANdCwXgAAAAAA5YDaAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADlgABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAAErBAAA3gQAAEYAAAAAAAoAFAAeAFIAcACGAAEAAAAHACIAAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'), 7 | url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icGxheSIgZD0iTTM0OS44NjcgODEwLjY2N2gtMTQuOTMzYy0yMS4zMzMgMC0zNi4yNjctMTQuOTMzLTM2LjI2Ny0zNC4xMzN2LTY1NC45MzNjMC0xOS4yIDE0LjkzMy0zNC4xMzMgMzQuMTMzLTM0LjEzM2gxNC45MzNjMTkuMiAwIDM0LjEzMyAxNC45MzMgMzQuMTMzIDM0LjEzM3Y2NTQuOTMzYzIuMTMzIDE5LjItMTIuOCAzNC4xMzMtMzIgMzQuMTMzek02OTEuMiA4MTAuNjY3aC0xNC45MzNjLTIxLjMzMyAwLTM2LjI2Ny0xNC45MzMtMzYuMjY3LTM0LjEzM3YtNjU0LjkzM2MwLTE5LjIgMTQuOTMzLTM0LjEzMyAzNC4xMzMtMzQuMTMzaDE0LjkzM2MxOS4yIDAgMzQuMTMzIDE0LjkzMyAzNC4xMzMgMzQuMTMzdjY1NC45MzNjMi4xMzMgMTkuMi0xMi44IDM0LjEzMy0zMiAzNC4xMzN6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTkwMTsiIGdseXBoLW5hbWU9InBhdXNlIiBkPSJNNzgwLjggNDg0LjI2N2wtNDk0LjkzMyAzMDcuMmMtMjcuNzMzIDE3LjA2Ny02NC00LjI2Ny02NC0zNi4yNjd2LTYxNC40YzAtMzIgMzYuMjY3LTUzLjMzMyA2NC0zNi4yNjdsNDkyLjggMzA3LjJjMjkuODY3IDE0LjkzMyAyOS44NjcgNTcuNiAyLjEzMyA3Mi41MzN6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4ZTk4YzsiIGdseXBoLW5hbWU9Im5leHQiIGQ9Ik04MTIuMDMyIDI0LjMydjQyMy42OGwtNzQxLjg4OC00MjMuNjh2ODQ3LjM2bDc0MS44ODgtNDIzLjY4djQyMy42OGgxMDUuOTg0di04NDcuMzZoLTEwNS45ODR6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#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-next:before { 28 | margin-left: 2px; 29 | content: "\E98C"; 30 | } 31 | .icon-play:before { 32 | content: "\E900"; 33 | } 34 | .icon-pause:before { 35 | margin-left: 4px; 36 | content: "\E901"; 37 | } 38 | @keyframes rotateMusicLogo { 39 | 0% { 40 | transform: rotate(0); 41 | } 42 | 50% { 43 | transform: rotate(180deg); 44 | } 45 | 100% { 46 | transform: rotate(360deg); 47 | } 48 | } 49 | @-webkit-keyframes rotateMusicLogo { 50 | 0% { 51 | transform: rotate(0); 52 | } 53 | 50% { 54 | transform: rotate(180deg); 55 | } 56 | 100% { 57 | transform: rotate(360deg); 58 | } 59 | } 60 | @-moz-keyframes rotateMusicLogo { 61 | 0% { 62 | transform: rotate(0); 63 | } 64 | 50% { 65 | transform: rotate(180deg); 66 | } 67 | 100% { 68 | transform: rotate(360deg); 69 | } 70 | } 71 | .audio-content { 72 | width: 100%; 73 | height: 100%; 74 | min-width: 240px; 75 | min-height: 50px; 76 | overflow: hidden; 77 | position: relative; 78 | transition: all 0.3s; 79 | -webkit-transform-origin: right center; 80 | -moz-transform-origin: right center; 81 | transform-origin: right center; 82 | border-radius: 6px; 83 | user-select: none; 84 | transform: translate3d(0, 0, 0); 85 | font-family: 'PingFangSC-Regular', Arial, Helvetica, sans-serif; 86 | } 87 | .audio-content.cricle { 88 | min-width: 50px; 89 | min-height: 50px; 90 | border-radius: 50%; 91 | } 92 | .audio-content.cricle .audio-detail { 93 | visibility: hidden; 94 | opacity: 0; 95 | } 96 | .audio-content.cricle .audio-detail .right-info { 97 | visibility: hidden; 98 | opacity: 0; 99 | } 100 | .audio-content.cricle .audio-cricle { 101 | visibility: visible; 102 | opacity: 1; 103 | z-index: 6; 104 | min-width: 50px; 105 | min-height: 50px; 106 | } 107 | .audio-content .audio-cricle { 108 | width: 50px; 109 | height: 50px; 110 | position: relative; 111 | visibility: hidden; 112 | overflow: hidden; 113 | transition: all 0.5s; 114 | opacity: 0; 115 | border-radius: 50%; 116 | transform: translate3d(0, 0, 0); 117 | -moz-animation: rotateMusicLogo 8s linear infinite; 118 | -webkit-animation: rotateMusicLogo 8s linear infinite; 119 | animation: rotateMusicLogo 8s linear infinite; 120 | -moz-animation-play-state: paused; 121 | -webkit-animation-play-state: paused; 122 | animation-play-state: paused; 123 | cursor: pointer; 124 | } 125 | .audio-content .audio-cricle img { 126 | width: 100%; 127 | height: 100%; 128 | } 129 | .audio-content .audio-cricle .d-audio-cricle-range { 130 | position: absolute; 131 | top: 0; 132 | left: 0; 133 | bottom: 0; 134 | right: 0; 135 | border: 3px solid rgba(14, 90, 80, 0.397); 136 | border-radius: 50%; 137 | } 138 | .audio-content .audio-cricle.active { 139 | -moz-animation-play-state: running; 140 | -webkit-animation-play-state: running; 141 | animation-play-state: running; 142 | } 143 | .audio-content .audio-detail { 144 | position: absolute; 145 | top: 0; 146 | left: 0; 147 | right: 0; 148 | bottom: 0; 149 | z-index: 5; 150 | display: flex; 151 | align-items: center; 152 | justify-content: center; 153 | visibility: visible; 154 | opacity: 1; 155 | border-radius: 8px; 156 | transition: all 0.5s; 157 | transform: translate3d(0, 0, 0); 158 | } 159 | .audio-content .audio-detail .left-config { 160 | flex: 0 0 90px; 161 | height: 100%; 162 | overflow: hidden; 163 | display: flex; 164 | align-items: center; 165 | padding: 0 5px 0 10px; 166 | box-sizing: border-box; 167 | } 168 | .audio-content .audio-detail .left-config i { 169 | display: block; 170 | width: 36px; 171 | height: 36px; 172 | background: rgba(0, 0, 0, 0.2); 173 | transition: all 0.5s; 174 | border-radius: 50%; 175 | color: rgba(255, 255, 255, 0.6); 176 | text-align: center; 177 | line-height: 36px; 178 | font-size: 22px; 179 | cursor: pointer; 180 | } 181 | .audio-content .audio-detail .left-config i.next { 182 | width: 28px; 183 | height: 28px; 184 | margin-left: 10px; 185 | line-height: 28px; 186 | font-size: 10px; 187 | } 188 | .audio-content .audio-detail .left-config i:hover { 189 | background: rgba(0, 0, 0, 0.5); 190 | } 191 | .audio-content .audio-detail .right-info { 192 | flex: 1 1 auto; 193 | height: 100%; 194 | overflow: hidden; 195 | color: #fff; 196 | display: flex; 197 | align-items: center; 198 | justify-content: center; 199 | flex-direction: column; 200 | box-sizing: border-box; 201 | padding: 0 10px 0 5px; 202 | visibility: visible; 203 | opacity: 1; 204 | transition: all 0.5s; 205 | } 206 | .audio-content .audio-detail .right-info .m-title { 207 | font-size: 16px; 208 | padding: 1px 0; 209 | margin: 0; 210 | font-weight: 200; 211 | text-overflow: ellipsis; 212 | overflow: hidden; 213 | white-space: nowrap; 214 | width: 100%; 215 | text-align: center; 216 | } 217 | .audio-content .audio-detail .right-info .m-singer { 218 | font-weight: 200; 219 | padding: 1px 0; 220 | font-size: 12px; 221 | margin: 0; 222 | color: rgba(255, 255, 255, 0.8); 223 | text-overflow: ellipsis; 224 | overflow: hidden; 225 | white-space: nowrap; 226 | width: 100%; 227 | text-align: center; 228 | } 229 | .audio-content .audio-bg { 230 | z-index: -1; 231 | position: absolute; 232 | top: 0; 233 | left: 0; 234 | right: 0; 235 | height: auto; 236 | background-repeat: no-repeat; 237 | background-size: cover; 238 | background-position: center; 239 | -webkit-filter: blur(10px); 240 | filter: blur(10px); 241 | -webkit-transform: scale(1.5); 242 | transform: scale(1.5); 243 | overflow: hidden; 244 | bottom: 0; 245 | height: unset; 246 | } 247 | .audio-content .audio-bg::before { 248 | content: ''; 249 | position: absolute; 250 | left: 0; 251 | top: 0; 252 | right: 0; 253 | bottom: 0; 254 | z-index: 1; 255 | background: rgba(0, 0, 0, 0.1); 256 | transition: all 0.3s; 257 | } 258 | .audio-content .audio-bg.draken::before { 259 | background: rgba(0, 0, 0, 0.3); 260 | } 261 | .audio-content .audio-loading { 262 | position: absolute; 263 | z-index: 12; 264 | top: 0; 265 | left: 0; 266 | right: 0; 267 | bottom: 0; 268 | background: rgba(0, 0, 0, 0.52); 269 | display: flex; 270 | align-items: center; 271 | justify-content: center; 272 | visibility: hidden; 273 | transition: all 0.5s; 274 | opacity: 0; 275 | } 276 | .audio-content .audio-loading svg { 277 | width: 36px; 278 | height: 36px; 279 | } 280 | .audio-content .audio-loading.active { 281 | visibility: visible; 282 | opacity: 1; 283 | } 284 | .audio-content .audio-progress { 285 | position: absolute; 286 | left: 0; 287 | height: 1px; 288 | bottom: 0; 289 | width: 0; 290 | background-image: linear-gradient(to right, rgba(255, 56, 56, 0.1) 30%, rgba(255, 56, 56, 0.6)); 291 | transition: all 0.5s; 292 | z-index: 4; 293 | } 294 | -------------------------------------------------------------------------------- /static/font-icon/demo.html: -------------------------------------------------------------------------------- 1 | 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 | --------------------------------------------------------------------------------