├── static └── .gitkeep ├── favicon.ico ├── src ├── assets │ ├── jt.png │ ├── logo.png │ ├── wyy1.jpg │ ├── wyy2.jpg │ ├── plant1.png │ ├── plant2.png │ ├── play │ │ ├── dz.png │ │ ├── left.png │ │ ├── stop.png │ │ ├── right.png │ │ └── start.png │ └── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.woff2 │ │ ├── iconfont.json │ │ ├── iconfont.css │ │ ├── iconfont.svg │ │ ├── iconfont.js │ │ ├── demo_index.html │ │ └── demo.css ├── components │ ├── found │ │ ├── index.vue │ │ ├── song-popup.vue │ │ ├── newsong.vue │ │ ├── search.vue │ │ ├── found.vue │ │ └── search-result.vue │ ├── test.vue │ ├── ranking │ │ └── ranking.vue │ ├── player │ │ ├── player-title.vue │ │ └── player.vue │ ├── me │ │ └── me.vue │ ├── other │ │ ├── pl.vue │ │ ├── mv.vue │ │ ├── video.vue │ │ ├── down.vue │ │ ├── geshou.vue │ │ └── gedan.vue │ └── foot │ │ └── foot.vue ├── api │ ├── api.js │ ├── foot.js │ ├── http.js │ └── playerApi.js ├── main.js ├── App.vue ├── store.js └── router │ └── index.js ├── .eslintignore ├── test ├── unit │ ├── setup.js │ ├── .eslintrc │ ├── specs │ │ └── HelloWorld.spec.js │ └── jest.conf.js └── e2e │ ├── specs │ └── test.js │ ├── custom-assertions │ └── elementCount.js │ ├── nightwatch.conf.js │ └── runner.js ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── README.md ├── .eslintrc.js ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/favicon.ico -------------------------------------------------------------------------------- /src/assets/jt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/jt.png -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/wyy1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/wyy1.jpg -------------------------------------------------------------------------------- /src/assets/wyy2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/wyy2.jpg -------------------------------------------------------------------------------- /test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | -------------------------------------------------------------------------------- /src/assets/plant1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/plant1.png -------------------------------------------------------------------------------- /src/assets/plant2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/plant2.png -------------------------------------------------------------------------------- /src/assets/play/dz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/play/dz.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/play/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/play/left.png -------------------------------------------------------------------------------- /src/assets/play/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/play/stop.png -------------------------------------------------------------------------------- /src/assets/play/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/play/right.png -------------------------------------------------------------------------------- /src/assets/play/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/play/start.png -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liyang-it/wyy/HEAD/src/assets/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/components/found/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | -------------------------------------------------------------------------------- /src/api/api.js: -------------------------------------------------------------------------------- 1 | import store from '../store' 2 | // eslint-disable-next-line no-unused-vars 3 | const api = { 4 | value: '测试value', 5 | test: () => { 6 | console.log(store) 7 | } 8 | } 9 | export default api 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | /test/e2e/reports/ 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | .vscode 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln 18 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/api/foot.js: -------------------------------------------------------------------------------- 1 | import store from '@/store' 2 | const foot = { 3 | switch1: () => { 4 | store.commit('hideGd') 5 | store.commit('setPlayerStyle', 'none') 6 | }, 7 | switch2: () => { 8 | store.commit('hideGd') 9 | store.commit('setPlayerStyle', 'none') 10 | } 11 | } 12 | export default foot 13 | -------------------------------------------------------------------------------- /test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .toEqual('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import store from './store' 6 | import router from './router' 7 | /** 引入vant css */ 8 | import 'vant/lib/index.css' 9 | // 引入阿里巴巴 图标 10 | import './assets/iconfont/iconfont.css' 11 | import './assets/iconfont/iconfont.js' 12 | Vue.config.productionTip = false 13 | /* eslint-disable no-new */ 14 | /* 所有id为app的都会引入App.vue页面 */ 15 | // state 变量 16 | // eslint-disable-next-line no-unused-vars 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | // eslint-disable-next-line no-undef 21 | store, 22 | components: { App }, 23 | template: '' 24 | }) 25 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 运行地址: [网抑云](https://liyangit.top/wyy) 2 | 3 | ## 小程序版: [柠檬酸音乐](https://github.com/liyang-it/wyy-weapp) 4 | 5 | ## Vue安装脚手架: 6 | 安装node.js后 7 | 8 | 在cmd或者vscode打开终端 9 | 10 | 选择好文件夹 11 | 12 | 安装脚手架: 13 | 14 | npm install -g vue-cli 15 | 16 | 安装 webpack(打包js的工具): npm install -g webpack 17 | 18 | 以上操作 是 只安装一次即可 19 | 20 | 创建vue项目: vue init webpack 项目名 21 | 22 | 运行项目: 先cd到项目文件夹，cd Vue项目，然后输入以下指令 npm run dev 23 | 24 | ## Git: 25 | 26 | 连接远程git库 27 | 28 | git init 初始化当前目录为git可管理状态 29 | 30 | git remote add origin git 项目地址 31 | 32 | 查看当前项目 新增了那些文件是否已提交 33 | git status 34 | 35 | 将项目的所有文件添加到缓存中: 36 | git add . 37 | 38 | 将缓存中的文件Commit到git库 39 | 40 | git commit -m "添加你的注释,一般是一些更改信息" 41 | 42 | 将代码推送到git 43 | 44 | git push origin master 或者 git push 或者 git push -f 45 | -------------------------------------------------------------------------------- /test/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | transform: { 14 | '^.+\\.js$': '/node_modules/babel-jest', 15 | '.*\\.(vue)$': '/node_modules/vue-jest' 16 | }, 17 | testPathIgnorePatterns: [ 18 | '/test/e2e' 19 | ], 20 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 21 | setupFiles: ['/test/unit/setup'], 22 | mapCoverage: true, 23 | coverageDirectory: '/test/unit/coverage', 24 | collectCoverageFrom: [ 25 | 'src/**/*.{js,vue}', 26 | '!src/main.js', 27 | '!src/router/index.js', 28 | '!**/node_modules/**' 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/api/http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | const http = { 3 | downMusic: (toUrl) => { 4 | console.log(toUrl) 5 | axios({ 6 | method: 'get', 7 | url: toUrl, 8 | responseType: 'blob', 9 | headers: {'content-type': 'audio/mpeg'}}) 10 | .then((res) => { 11 | return res 12 | }) 13 | }, 14 | sendGet: (toUrl) => { 15 | let xmt = new XMLHttpRequest() 16 | // eslint-disable-next-line no-unused-vars 17 | let response = null 18 | xmt.open('GET', 'http://47.99.165.122:3000/search/hot/detail', false) 19 | xmt.onload = function (e) { 20 | if (xmt.status === 200) { 21 | response = xmt.response 22 | console.log('sendGet方法执行结果', xmt.status) 23 | } 24 | } 25 | xmt.send() 26 | return JSON.parse(response) 27 | } 28 | } 29 | export default http 30 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // The assertion name is the filename. 3 | // Example usage: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // For more information on custom assertions see: 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | 10 | exports.assertion = function (selector, count) { 11 | this.message = 'Testing if element <' + selector + '> has count: ' + count 12 | this.expected = count 13 | this.pass = function (val) { 14 | return val === this.expected 15 | } 16 | this.value = function (res) { 17 | return res.value 18 | } 19 | this.command = function (cb) { 20 | var self = this 21 | return this.api.execute(function (selector) { 22 | return document.querySelectorAll(selector).length 23 | }, [selector], function (res) { 24 | cb.call(self, res) 25 | }) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "2240415", 3 | "name": "网抑云", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "3705476", 10 | "name": "评论", 11 | "font_class": "pinglun", 12 | "unicode": "e642", 13 | "unicode_decimal": 58946 14 | }, 15 | { 16 | "icon_id": "6504029", 17 | "name": "mv", 18 | "font_class": "mv", 19 | "unicode": "e64d", 20 | "unicode_decimal": 58957 21 | }, 22 | { 23 | "icon_id": "15369409", 24 | "name": "QQ音乐歌手", 25 | "font_class": "geshou", 26 | "unicode": "e602", 27 | "unicode_decimal": 58882 28 | }, 29 | { 30 | "icon_id": "3494848", 31 | "name": "下载", 32 | "font_class": "xiazai", 33 | "unicode": "e616", 34 | "unicode_decimal": 58902 35 | } 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 网抑云 12 | 13 | 14 |
15 | 16 | 17 | 18 | 29 | -------------------------------------------------------------------------------- /src/api/playerApi.js: -------------------------------------------------------------------------------- 1 | import store from '../store' 2 | /** 3 | * 此API player.vue found.vue 共享使用 4 | */ 5 | const playerApi = { 6 | downFileName: store.state.music.title + '-' + store.state.music.artist, 7 | showGd: () => { 8 | // 显示歌单 隐藏播放界面 9 | // store.commit('showGd') 10 | store.commit('setIsShowRouter', true) 11 | store.commit('setPlayerStyle', 'none') 12 | store.commit('setIsShowTitle', true) 13 | }, 14 | showPlay: () => { 15 | store.commit('setPlayerStyle', '') 16 | store.commit('showPlayer') 17 | store.commit('setIsShowRouter', false) 18 | store.commit('setIsShowTitle', false) 19 | // store.commit('hideGd') 20 | }, 21 | getMusicRunTime: (s) => { 22 | // s = 秒 根据秒返回音乐时间 23 | // 音乐分钟 24 | let hh = Math.floor(s / 60) + '' 25 | let ss = s % 60 + '' 26 | hh = (hh.length === 1) ? '0' + hh : hh 27 | ss = (ss.length === 1) ? '0' + ss : ss 28 | let time = hh + ':' + ss 29 | return time 30 | } 31 | } 32 | export default playerApi 33 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/test.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 46 | 57 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | 4 | const webpack = require('webpack') 5 | const DevServer = require('webpack-dev-server') 6 | 7 | const webpackConfig = require('../../build/webpack.prod.conf') 8 | const devConfigPromise = require('../../build/webpack.dev.conf') 9 | 10 | let server 11 | 12 | devConfigPromise.then(devConfig => { 13 | const devServerOptions = devConfig.devServer 14 | const compiler = webpack(webpackConfig) 15 | server = new DevServer(compiler, devServerOptions) 16 | const port = devServerOptions.port 17 | const host = devServerOptions.host 18 | return server.listen(port, host) 19 | }) 20 | .then(() => { 21 | // 2. run the nightwatch test suite against it 22 | // to run in additional browsers: 23 | // 1. add an entry in test/e2e/nightwatch.conf.js under "test_settings" 24 | // 2. add it to the --env flag below 25 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 26 | // For more information on Nightwatch's config file, see 27 | // http://nightwatchjs.org/guide#settings-file 28 | let opts = process.argv.slice(2) 29 | if (opts.indexOf('--config') === -1) { 30 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 31 | } 32 | if (opts.indexOf('--env') === -1) { 33 | opts = opts.concat(['--env', 'chrome']) 34 | } 35 | 36 | const spawn = require('cross-spawn') 37 | const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 38 | 39 | runner.on('exit', function (code) { 40 | server.close() 41 | process.exit(code) 42 | }) 43 | 44 | runner.on('error', function (err) { 45 | server.close() 46 | throw err 47 | }) 48 | }) 49 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | Vue.use(Vuex) 4 | // 使用export default 封装代码 外部全局都可以引用 5 | export default new Vuex.Store({ 6 | state: { 7 | // 定义音乐全局变量 8 | musicStatus: { 9 | startTime: '00:00', 10 | stopTime: '00:00', 11 | isStart: false, 12 | isStop: false, 13 | musicIconStyle: '', 14 | style: '', 15 | jdt: 0, 16 | maxPlayTime: 0 17 | }, 18 | musicIndex: 0, 19 | musics: {}, 20 | music: { 21 | id: null, 22 | title: null, 23 | artist: null, 24 | alName: null, 25 | pic: null, 26 | src: null, 27 | mvId: null 28 | }, 29 | is: { 30 | isShowPlayer: false, 31 | isShowGd: false, 32 | isShowQuery: true, 33 | isShowFound: true, 34 | isShowRouter: true, 35 | isShowTitle: false 36 | } 37 | }, 38 | mutations: { 39 | setIsShowFound (state, value) { 40 | state.is.isShowFound = value 41 | state.is.isShowQuery = value 42 | }, 43 | setMaxJdt (state, value) { 44 | state.musicStatus.maxPlayTime = value 45 | }, 46 | setJdt (state, value) { 47 | state.musicStatus.jdt = value 48 | }, 49 | setPlayerStyle (state, value) { 50 | state.musicStatus.style = value 51 | }, 52 | setIsStop (state, value) { 53 | state.musicStatus.isStop = value 54 | }, 55 | setIsStart (state, value) { 56 | state.musicStatus.isStart = value 57 | }, 58 | setStartTime (state, value) { 59 | state.musicStatus.startTime = value 60 | }, 61 | setStopTime (state, value) { 62 | state.musicStatus.stopTime = value 63 | }, 64 | setMusic (state, value) { 65 | state.music = value 66 | }, 67 | showPlayer (state) { 68 | state.is.isShowPlayer = true 69 | }, 70 | hidePlayer (state) { 71 | state.is.isShowPlayer = false 72 | }, 73 | showGd (state) { 74 | state.is.isShowGd = true 75 | }, 76 | hideGd (state) { 77 | state.is.isShowGd = false 78 | }, 79 | setIsShowRouter (state, value) { 80 | state.is.isShowRouter = value 81 | }, 82 | setIsShowTitle (state, value) { 83 | state.is.isShowTitle = value 84 | } 85 | }, 86 | getters: { 87 | } 88 | }) 89 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1606893779606'); /* IE9 */ 3 | src: url('iconfont.eot?t=1606893779606#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAACVwAAARyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFfIR/ATYCJAMUCwwABCAFhG0HSBsLCMgOJYWgwGBgkEtCPNDv9+tceYJpkqTafTqJRCaZ1U/1RiWRaEyHFOiyu33rP/439V5IDWI1p6I+FdqJ0hQSYmSETDTMXejcv8wOjhmvrMHybGuXyLIOHg5wPKDZLLK/hf/F8Yexy4vcTkCrEanQdrM2FHjK9H4B4YAz0OCZMMsVpKDWlQVTczyaDoU6TlBcBp68vw//YDl4gqhIoO+0s9+0ASq/Fa/bYq7/DXtJgpvhnGCzSJgFMuGs0H0AC6KzMK1ya6V1oFUtikM1Cnhd/brt/yaRfEPaVuMfHkkWREIJurodYdZjmW+FxSDxHSAu0lRDowA1bWFMxHVNpRWd+E9YAh07ZEgpSeKgSq1S1SD0ZkgdFOozRLN6fZBiwYY4onbOpMAuxLpNodjCjQ1zNwagRYcOBINrPRWVzts0aYM/zF5PUw9CUm4TFp+4UdpEEJM2oKmDJu4NqMMnXjy6E7lJu45dUjvi+OrDQcoFR+KISf59d5pHEOuOhbotPBqv6dZce+ZOlHL57SY4NXu3RyJ9EuQGrpnY/ge5HosOxdFrXLF9Vx804yvu3JnU2CjJ8sTbt/tpTt8mwbUjSY1wRECrjrddCK2Uh8hy3e3b1Hnzhjt3atWYNG/SHIgdjY1dZNlIIRx2n1fPn8GWC9eWVh++2PeRe2f3R31lp7gwYqMoyslxQ4Ke5mjysZgYLF9b8wl4tyYnwlFuldzafL/80pyXc7x1ORG5OqTM1dbSH/Dn/81f8CE8d2Dn8KTwzgPywvNyR+jyro9XJ6nHX//VtWDVqim+aeWqDZrf1681SeqB14O0NRFNtEE7OrRXJak6dNj+cf6Czzy4Fl1cZB5Rs1FZ61abHLclJDUkeV1xM/jyeh8vrGeLBSBw9QOCYfEbF/dt2dLjEnm2n9mVdVIvyXKZpLPkJY+cJ0Hue3PfcSe3TFBMVpzZpZl0pwUDlYGy2ykU3c7rss9lr3bRFIo3RxRqp7fFYH36fEz9aHOOcxrHjx7N+rDDxxudYAdojsjHMOk/7t3IkBqg6UpnMel32s/L2E6xfbSlX2tCCfD1ib7lCZuLu5nBP6HRWPLzOPPR/7o9fyoyaCqyFP4AWZXk8XchoHALv4Y38p/om9Df6/Ew2oHG+QS1gQiiyjAktVFExsxCoc0qlGpr0GpG89lt+ggwIXsB08YACLptg6jTJyTdriAy5hEUBn2CUnfAoNVu8F2yzXjg8BqBoUWmgawfRHJ63saaNhH3CzsxBqeFFuIyj1zHCA4uQGalZ6YTzRkbIwwxwtHfkC2KLMkKvJVsBnZjLBaetAu8idGL6UZRtBdnZLBF75Su562A2yJg0ESMBqR6g5A4ejwb1qkuwjO/3wnDwMmCJlSUlfnrMAQOXP2kLOkyGyCaq22Nyi6ltUN/BtlEIhb3Ygl4VqRm0MmwGFEeyV7cyYShJ0pn7BC2K5aBKrFN1enTa633uAZa6W9VBAXCkBK5IXeoTjibweK0Kaz93Q2Mw8g73Qdy9GCaAwAAAA==') format('woff2'), 5 | url('iconfont.woff?t=1606893779606') format('woff'), 6 | url('iconfont.ttf?t=1606893779606') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1606893779606#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-pinglun:before { 19 | content: "\e642"; 20 | } 21 | 22 | .icon-mv:before { 23 | content: "\e64d"; 24 | } 25 | 26 | .icon-geshou:before { 27 | content: "\e602"; 28 | } 29 | 30 | .icon-xiazai:before { 31 | content: "\e616"; 32 | } 33 | 34 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | // 关闭 vue-cli3预加载 9 | chainWebpack: config => { 10 | // 移除 prefetch 插件 11 | config.plugins.delete('prefetch') 12 | 13 | // 或者 14 | // 修改它的选项： 15 | config.plugin('prefetch').tap(options => { 16 | options[0].fileBlacklist = options[0].fileBlacklist || [] 17 | options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/) 18 | return options 19 | }) 20 | }, 21 | dev: { 22 | // Paths 23 | assetsSubDirectory: 'static', 24 | assetsPublicPath: '/', 25 | proxyTable: {}, 26 | 27 | // Various Dev Server settings 28 | host: 'localhost', // can be overwritten by process.env.HOST 29 | port: 1976, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 30 | autoOpenBrowser: false, 31 | errorOverlay: true, 32 | notifyOnErrors: true, 33 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 34 | 35 | // Use Eslint Loader? 36 | // If true, your code will be linted during bundling and 37 | // linting errors and warnings will be shown in the console. 38 | useEslint: true, 39 | // If true, eslint errors and warnings will also be shown in the error overlay 40 | // in the browser. 41 | showEslintErrorsInOverlay: false, 42 | 43 | /** 44 | * Source Maps 45 | */ 46 | 47 | // https://webpack.js.org/configuration/devtool/#development 48 | devtool: 'cheap-module-eval-source-map', 49 | 50 | // If you have problems debugging vue-files in devtools, 51 | // set this to false - it *may* help 52 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 53 | cacheBusting: true, 54 | 55 | cssSourceMap: true 56 | }, 57 | 58 | build: { 59 | // Template for index.html 60 | index: path.resolve(__dirname, '../dist/index.html'), 61 | // Paths 62 | assetsRoot: path.resolve(__dirname, '../dist'), 63 | assetsSubDirectory: 'static', 64 | assetsPublicPath: './', 65 | /** 66 | * Source Maps 67 | */ 68 | productionSourceMap: false, 69 | // https://webpack.js.org/configuration/devtool/#production 70 | devtool: '#source-map', 71 | // Gzip off by default as many popular static hosts such as 72 | // Surge or Netlify already gzip all static assets for you. 73 | // Before setting to `true`, make sure to: 74 | // npm install --save-dev compression-webpack-plugin 75 | productionGzip: true, 76 | productionGzipExtensions: ['js', 'css'], 77 | // Run the build command with an extra argument to 78 | // View the bundle analyzer report after build finishes: 79 | // `npm run build --report` 80 | // Set to `true` or `false` to always turn it on or off 81 | bundleAnalyzerReport: process.env.npm_config_report 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "y", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "y", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "unit": "jest --config test/unit/jest.conf.js --coverage", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run unit && npm run e2e", 13 | "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", 14 | "build": "node build/build.js" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.20.0", 18 | "hls.js": "^0.14.10", 19 | "sass": "^1.30.0", 20 | "vant": "^2.10.3", 21 | "vue": "^2.5.2", 22 | "vue-router": "^3.0.1", 23 | "vue-title": "0.0.1", 24 | "vuex": "^3.5.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^7.1.2", 28 | "babel-core": "^6.22.1", 29 | "babel-eslint": "^8.2.1", 30 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 31 | "babel-jest": "^21.0.2", 32 | "babel-loader": "^7.1.1", 33 | "babel-plugin-dynamic-import-node": "^1.2.0", 34 | "babel-plugin-syntax-jsx": "^6.18.0", 35 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 36 | "babel-plugin-transform-runtime": "^6.22.0", 37 | "babel-plugin-transform-vue-jsx": "^3.5.0", 38 | "babel-preset-env": "^1.3.2", 39 | "babel-preset-stage-2": "^6.22.0", 40 | "babel-register": "^6.22.0", 41 | "chalk": "^2.0.1", 42 | "chromedriver": "^2.27.2", 43 | "compression-webpack-plugin": "^1.1.12", 44 | "copy-webpack-plugin": "^4.0.1", 45 | "cross-spawn": "^5.0.1", 46 | "css-loader": "^0.28.0", 47 | "eslint": "^4.15.0", 48 | "eslint-config-standard": "^10.2.1", 49 | "eslint-friendly-formatter": "^3.0.0", 50 | "eslint-loader": "^1.7.1", 51 | "eslint-plugin-import": "^2.7.0", 52 | "eslint-plugin-node": "^5.2.0", 53 | "eslint-plugin-promise": "^3.4.0", 54 | "eslint-plugin-standard": "^3.0.1", 55 | "eslint-plugin-vue": "^4.0.0", 56 | "extract-text-webpack-plugin": "^3.0.0", 57 | "file-loader": "^1.1.4", 58 | "friendly-errors-webpack-plugin": "^1.6.1", 59 | "html-webpack-plugin": "^2.30.1", 60 | "jest": "^22.0.4", 61 | "jest-serializer-vue": "^0.3.0", 62 | "nightwatch": "^0.9.12", 63 | "node-notifier": "^5.1.2", 64 | "node-sass": "^4.13.1", 65 | "optimize-css-assets-webpack-plugin": "^3.2.0", 66 | "ora": "^1.2.0", 67 | "portfinder": "^1.0.13", 68 | "postcss-import": "^11.0.0", 69 | "postcss-loader": "^2.0.8", 70 | "postcss-url": "^7.2.1", 71 | "rimraf": "^2.6.0", 72 | "sass-loader": "^7.1.0", 73 | "selenium-server": "^3.0.1", 74 | "semver": "^5.3.0", 75 | "shelljs": "^0.7.6", 76 | "style-loader": "^2.0.0", 77 | "uglifyjs-webpack-plugin": "^1.1.1", 78 | "url-loader": "^0.5.8", 79 | "vue-jest": "^1.0.2", 80 | "vue-loader": "^13.3.0", 81 | "vue-style-loader": "^3.0.1", 82 | "vue-template-compiler": "^2.5.2", 83 | "webpack": "^3.6.0", 84 | "webpack-bundle-analyzer": "^2.9.0", 85 | "webpack-dev-server": "^2.9.1", 86 | "webpack-merge": "^4.1.0" 87 | }, 88 | "engines": { 89 | "node": ">= 6.0.0", 90 | "npm": ">= 3.0.0" 91 | }, 92 | "browserslist": [ 93 | "> 1%", 94 | "last 2 versions", 95 | "not ie <= 8" 96 | ] 97 | } 98 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | const foot = () => import('@/components/foot/foot') 4 | const found = () => import('@/components/found/found') 5 | const ranking = () => import('@/components/ranking/ranking') 6 | const me = () => import('@/components/me/me') 7 | const foundIndex = () => import('@/components/found/index') 8 | const search = () => import('@/components/found/search') 9 | const test = () => import('@/components/test') 10 | const mv = () => import('@/components/other/mv') 11 | const geshou = () => import('@/components/other/geshou') 12 | const pl = () => import('@/components/other/pl') 13 | const video = () => import('@/components/other/video') 14 | const gedan = () => import('@/components/other/gedan') 15 | const down = () => import('@/components/other/down') 16 | const searchResult = () => import('@/components/found/search-result') 17 | // const xz = () => import('@/components/other/xz') 18 | Vue.use(Router) 19 | export default new Router({ 20 | mode: 'hash', // 路由模式 21 | base: '/wyy/', 22 | scrollBehavior (to, from, savedPosition) { 23 | // 解决路由跳转后 会滚动到底部 24 | if (savedPosition) { 25 | return savedPosition 26 | } else { 27 | return { x: 0, y: 0 } 28 | } 29 | }, 30 | routes: [ 31 | { 32 | path: '/', 33 | // 配置項目啟動重定向到 found頁面 34 | redirect: 'found' 35 | }, 36 | { 37 | path: '/test', 38 | name: 'test', 39 | component: test 40 | }, 41 | { 42 | path: '/foot', 43 | name: 'foot', 44 | component: foot, 45 | children: [ 46 | { 47 | path: '/foundIndex', 48 | name: 'foundIndex', 49 | component: foundIndex, 50 | // 配置found 主页面默认显示 found页面 51 | redirect: '/found', 52 | children: [ 53 | { 54 | path: '/found', 55 | name: 'found', 56 | component: found 57 | } 58 | ] 59 | }, 60 | { 61 | path: '/ranking', 62 | name: 'ranking', 63 | component: ranking 64 | }, 65 | { 66 | path: '/me', 67 | name: 'me', 68 | component: me 69 | }, 70 | { 71 | path: '/search', 72 | name: 'search', 73 | component: search 74 | }, 75 | { 76 | path: '/mv/:music', 77 | name: 'mv', 78 | component: mv 79 | }, 80 | { 81 | path: '/geshou/:id', 82 | name: 'geshou', 83 | component: geshou 84 | }, 85 | { 86 | path: '/pl/:id', 87 | name: 'pl', 88 | component: pl 89 | }, 90 | { 91 | path: '/searchResult/:value', 92 | name: 'searchResult', 93 | component: searchResult 94 | }, 95 | { 96 | path: '/video/:id', 97 | name: 'video', 98 | component: video 99 | }, 100 | { 101 | path: '/gedan/:id', 102 | name: 'gedan', 103 | component: gedan 104 | }, 105 | { 106 | path: '/down', 107 | name: 'down', 108 | component: down 109 | } 110 | ] 111 | } 112 | ] 113 | }) 114 | -------------------------------------------------------------------------------- /src/components/ranking/ranking.vue: -------------------------------------------------------------------------------- 1 | 2 | 24 | 85 | 131 | -------------------------------------------------------------------------------- /src/components/player/player-title.vue: -------------------------------------------------------------------------------- 1 | 2 | 36 | 37 | 92 | 137 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | !function(t){var e,a,l,n,i,o,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(c&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}function h(){i||(i=!0,l())}e=function(){var t,e,a,l;(l=document.createElement("div")).innerHTML=d,d=null,(a=l.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",t=a,(e=document.body).firstChild?(l=t,(a=e.firstChild).parentNode.insertBefore(l,a)):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),e()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(l=e,n=t.document,i=!1,(o=function(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(o,50)}h()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,h())})}(window); -------------------------------------------------------------------------------- /src/components/me/me.vue: -------------------------------------------------------------------------------- 1 | 2 | 36 | 37 | 105 | 198 | -------------------------------------------------------------------------------- /src/components/other/pl.vue: -------------------------------------------------------------------------------- 1 | 2 | 31 | 32 | 128 | 182 | -------------------------------------------------------------------------------- /src/components/foot/foot.vue: -------------------------------------------------------------------------------- 1 | 31 | 98 | 197 | -------------------------------------------------------------------------------- /src/components/found/song-popup.vue: -------------------------------------------------------------------------------- 1 | 2 | 54 | 55 | 158 | 161 | -------------------------------------------------------------------------------- /src/components/other/mv.vue: -------------------------------------------------------------------------------- 1 | 2 | 41 | 42 | 128 | 195 | -------------------------------------------------------------------------------- /src/components/other/video.vue: -------------------------------------------------------------------------------- 1 | 2 | 41 | 42 | 131 | 198 | -------------------------------------------------------------------------------- /src/components/found/newsong.vue: -------------------------------------------------------------------------------- 1 | 2 | 43 | 146 | 153 | -------------------------------------------------------------------------------- /src/components/found/search.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 141 | 197 | -------------------------------------------------------------------------------- /src/components/other/down.vue: -------------------------------------------------------------------------------- 1 | 2 | 45 | 46 | 193 | 236 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 |
    21 |
  • Unicode
    • 22 |
  • Font class
    • 23 |
  • Symbol
    • 24 |
25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    评论
    36 |
    &#xe642;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    mv
    42 |
    &#xe64d;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    QQ音乐歌手
    48 |
    &#xe602;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    下载
    54 |
    &#xe616;
    55 |
    • 56 | 57 |
58 |
59 |

Unicode 引用

60 |
61 | 62 |

Unicode 是字体在网页端最原始的应用方式，特点是：

63 |
    64 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 65 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 66 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 67 |
68 |
69 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

70 |
71 |

Unicode 使用步骤如下：

72 |

第一步：拷贝项目下面生成的 @font-face

73 | 
@font-face {
 75 |   font-family: 'iconfont';
 76 |   src: url('iconfont.eot');
 77 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 78 |       url('iconfont.woff2') format('woff2'),
 79 |       url('iconfont.woff') format('woff'),
 80 |       url('iconfont.ttf') format('truetype'),
 81 |       url('iconfont.svg#iconfont') format('svg');
 82 | }
 83 |
84 |

第二步：定义使用 iconfont 的样式

85 | 
.iconfont {
 87 |   font-family: "iconfont" !important;
 88 |   font-size: 16px;
 89 |   font-style: normal;
 90 |   -webkit-font-smoothing: antialiased;
 91 |   -moz-osx-font-smoothing: grayscale;
 92 | }
 93 |
94 |

第三步：挑选相应图标并获取字体编码，应用于页面

95 | 
 96 | <span class="iconfont">&#x33;</span>
 98 |
99 |
100 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

101 |
102 |
103 |
104 |
105 |
    106 | 107 |
  • 108 | 109 |
    110 | 评论 111 |
    112 |
    .icon-pinglun 113 |
    114 |
    • 115 | 116 |
  • 117 | 118 |
    119 | mv 120 |
    121 |
    .icon-mv 122 |
    123 |
    • 124 | 125 |
  • 126 | 127 |
    128 | QQ音乐歌手 129 |
    130 |
    .icon-geshou 131 |
    132 |
    • 133 | 134 |
  • 135 | 136 |
    137 | 下载 138 |
    139 |
    .icon-xiazai 140 |
    141 |
    • 142 | 143 |
144 |
145 |

font-class 引用

146 |
147 | 148 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

149 |

与 Unicode 使用方式相比，具有如下特点：

150 |
    151 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 152 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 153 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 154 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 155 |
156 |

使用步骤如下：

157 |

第一步：引入项目下面生成的 fontclass 代码：

158 | 
<link rel="stylesheet" href="./iconfont.css">
159 |
160 |

第二步：挑选相应图标并获取类名，应用于页面：

161 | 
<span class="iconfont icon-xxx"></span>
162 |
163 |
164 |

" 165 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

166 |
167 |
168 |
169 |
170 |
    171 | 172 |
  • 173 | 176 |
    评论
    177 |
    #icon-pinglun
    178 |
    • 179 | 180 |
  • 181 | 184 |
    mv
    185 |
    #icon-mv
    186 |
    • 187 | 188 |
  • 189 | 192 |
    QQ音乐歌手
    193 |
    #icon-geshou
    194 |
    • 195 | 196 |
  • 197 | 200 |
    下载
    201 |
    #icon-xiazai
    202 |
    • 203 | 204 |
205 |
206 |

Symbol 引用

207 |
208 | 209 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 210 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

211 |
    212 |
  • 支持多色图标了，不再受单色限制。
    • 213 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 214 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 215 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 216 |
217 |

使用步骤如下：

218 |

第一步：引入项目下面生成的 symbol 代码：

219 | 
<script src="./iconfont.js"></script>
220 |
221 |

第二步：加入通用 CSS 代码（引入一次就行）：

222 | 
<style>
223 | .icon {
224 |   width: 1em;
225 |   height: 1em;
226 |   vertical-align: -0.15em;
227 |   fill: currentColor;
228 |   overflow: hidden;
229 | }
230 | </style>
231 |
232 |

第三步：挑选相应图标并获取类名，应用于页面：

233 | 
<svg class="icon" aria-hidden="true">
234 |   <use xlink:href="#icon-xxx"></use>
235 | </svg>
236 |
237 |
238 |
239 | 240 |
241 |
242 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /src/assets/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/components/other/geshou.vue: -------------------------------------------------------------------------------- 1 | 2 | 65 | 66 | 273 | 331 | -------------------------------------------------------------------------------- /src/components/other/gedan.vue: -------------------------------------------------------------------------------- 1 | 2 | 49 | 50 | 264 | 348 | -------------------------------------------------------------------------------- /src/components/player/player.vue: -------------------------------------------------------------------------------- 1 | 55 | 230 | 422 | -------------------------------------------------------------------------------- /src/components/found/found.vue: -------------------------------------------------------------------------------- 1 | 108 | 370 | 531 | -------------------------------------------------------------------------------- /src/components/found/search-result.vue: -------------------------------------------------------------------------------- 1 | 2 | 182 | 520 | 666 | --------------------------------------------------------------------------------