├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── screenshots ├── Screenshot1.png ├── Screenshot2.png ├── Screenshot3.png ├── Screenshot4.png ├── Screenshot5.png ├── Screenshot6.png ├── Screenshot7.png └── Screenshot8.png ├── src ├── App.vue ├── api │ ├── apiConfig.js │ ├── getAlbum.js │ ├── getBanner.js │ ├── getLyric.js │ ├── getMVComment.js │ ├── getMVDetail.js │ ├── getMVSimi.js │ ├── getMusicListDetail.js │ ├── getRecommendMV.js │ ├── getRecommendMusicList.js │ ├── getRecommendPrivate.js │ ├── getSearch.js │ ├── getSingerAlbum.js │ ├── getSingerDesc.js │ ├── getSingerMV.js │ ├── getSingerMusic.js │ └── getTopMV.js ├── assets │ └── logo.png ├── base │ ├── Bubble │ │ └── bubble.vue │ ├── Popup │ │ └── Popup.vue │ ├── loading │ │ ├── loading.gif │ │ └── loading.vue │ ├── myVideo │ │ └── myVideo.vue │ ├── progress-circle │ │ └── progress-circle.vue │ ├── progress │ │ └── progress.vue │ └── songList.vue ├── common │ ├── css │ │ ├── base.css │ │ └── index.css │ └── js │ │ ├── Lyric.js │ │ └── mixin.js ├── components │ ├── MVList │ │ └── MVList.vue │ ├── MusicList │ │ └── MusicList.vue │ ├── MyHeader │ │ └── MyHeader.vue │ ├── albumList │ │ └── albumList.vue │ ├── commentList │ │ └── commentList.vue │ ├── playList │ │ └── playList.vue │ ├── player │ │ ├── cd.png │ │ ├── player.vue │ │ └── triger.png │ ├── playerList │ │ └── playerList.vue │ ├── recommendMV │ │ └── recommendMv.vue │ ├── recommendMusic │ │ └── recommendMusic.vue │ ├── recommendPrivate │ │ └── recommendPrivate.vue │ ├── scroll │ │ └── scroll.vue │ ├── singerList │ │ └── singerList.vue │ └── slider │ │ └── slider.vue ├── logo.png ├── main.js ├── page │ ├── MVDetailPage │ │ └── MVDetailPage.vue │ ├── albumDetailPage │ │ └── albumDetailPage.vue │ ├── broadcastPage │ │ └── broadcastPage.vue │ ├── index │ │ └── index.vue │ ├── musicListDetailPage │ │ └── musicListDetailPage.vue │ ├── musicPage │ │ └── musicPage.vue │ ├── myMusic │ │ └── myMusic.vue │ ├── search │ │ └── search.vue │ ├── singerDetail │ │ └── singerDetail.vue │ ├── topicPage │ │ └── topicPage.vue │ └── videoPage │ │ └── videoPage.vue ├── router │ └── index.js └── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutation-types.js │ ├── mutations.js │ └── state.js └── static ├── .gitkeep ├── MUI ├── css │ └── mui.min.css ├── fonts │ └── mui.ttf └── js │ └── mui.min.js ├── css └── normalize.css ├── font-icon ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff └── style.css ├── js └── init.js └── swiper ├── swiper-4.1.0.min.css └── swiper-4.1.0.min.js /.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 | } 13 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/vue-2.5.2-FFCC33.svg) ![](https://img.shields.io/badge/vue_router-3.0.1-279B61.svg)  ![](https://img.shields.io/badge/vuex-3.0.1-008AB8.svg) ![](https://img.shields.io/badge/better_scroll-1.8.0-95CAE4.svg) 2 | ![](https://img.shields.io/badge/webpack-3.6.0-A3E496.svg) ![](https://img.shields.io/badge/node->=6.0.0-95CAE4.svg) 3 | ![](https://img.shields.io/badge/npm->=3.0.0-CC6699.svg) 4 | 5 | 6 | # 技术栈 7 | 8 | > vue2.0 + vue-router + webpack + vuex + axios 9 | 10 | > better-scroll (移动端滚动插件) 11 | 12 | > fastclick (解决移动端click事件300ms延迟) 13 | 14 | > vue-lazyload (图片懒加载) 15 | 16 | > 后端采用基于node的网易云api接口 17 | 18 | > 目前主要完成音乐播放和视频的播放, 搜索功能正在开发中. 19 | 20 | 21 | 22 | # pc端浏览地址 23 | > 如果觉得还可以，请star，你们的star是我前进的动力。 24 | 25 | > 本项目正在不断更新中, 后续将添加更多的功能, 敬请期待. 26 | 27 | > http://111.231.54.71:3000 28 | 29 | # 更新历程 30 | 31 | ### 2 月 25 日更新 32 | 添加播放器歌曲列表 33 | ### 2 月 26 日更新 34 | 添加歌手详情信息页面 35 | ### 2 月 27 日更新 36 | 完善搜索页面逻辑 37 | 38 | # 项目截图 39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | cloudmusic 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloudmusic", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "huangda", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.17.1", 15 | "better-scroll": "^1.8.0", 16 | "fastclick": "^1.0.6", 17 | "iscroll": "^5.2.0", 18 | "lyric-parser": "^1.0.1", 19 | "vue": "^2.5.2", 20 | "vue-iscroll-view": "^1.0.3", 21 | "vue-lazyload": "^1.1.4", 22 | "vue-router": "^3.0.1", 23 | "vue-video": "^0.1.7", 24 | "vuex": "^3.0.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-loader": "^7.1.1", 32 | "babel-plugin-syntax-jsx": "^6.18.0", 33 | "babel-plugin-transform-runtime": "^6.22.0", 34 | "babel-plugin-transform-vue-jsx": "^3.5.0", 35 | "babel-preset-env": "^1.3.2", 36 | "babel-preset-stage-2": "^6.22.0", 37 | "chalk": "^2.0.1", 38 | "copy-webpack-plugin": "^4.0.1", 39 | "css-loader": "^0.28.0", 40 | "eslint": "^4.15.0", 41 | "eslint-config-standard": "^10.2.1", 42 | "eslint-friendly-formatter": "^3.0.0", 43 | "eslint-loader": "^1.7.1", 44 | "eslint-plugin-import": "^2.7.0", 45 | "eslint-plugin-node": "^5.2.0", 46 | "eslint-plugin-promise": "^3.4.0", 47 | "eslint-plugin-standard": "^3.0.1", 48 | "eslint-plugin-vue": "^4.0.0", 49 | "extract-text-webpack-plugin": "^3.0.0", 50 | "file-loader": "^1.1.4", 51 | "friendly-errors-webpack-plugin": "^1.6.1", 52 | "html-webpack-plugin": "^2.30.1", 53 | "node-notifier": "^5.1.2", 54 | "node-sass": "^4.7.2", 55 | "optimize-css-assets-webpack-plugin": "^3.2.0", 56 | "ora": "^1.2.0", 57 | "portfinder": "^1.0.13", 58 | "postcss-import": "^11.0.0", 59 | "postcss-loader": "^2.0.8", 60 | "postcss-url": "^7.2.1", 61 | "rimraf": "^2.6.0", 62 | "sass-loader": "^6.0.6", 63 | "scss-loader": "^0.0.1", 64 | "semver": "^5.3.0", 65 | "shelljs": "^0.7.6", 66 | "uglifyjs-webpack-plugin": "^1.1.1", 67 | "url-loader": "^0.5.8", 68 | "vue-loader": "^13.3.0", 69 | "vue-style-loader": "^3.0.1", 70 | "vue-template-compiler": "^2.5.2", 71 | "webpack": "^3.6.0", 72 | "webpack-bundle-analyzer": "^2.9.0", 73 | "webpack-dev-server": "^2.9.1", 74 | "webpack-merge": "^4.1.0" 75 | }, 76 | "engines": { 77 | "node": ">= 6.0.0", 78 | "npm": ">= 3.0.0" 79 | }, 80 | "browserslist": [ 81 | "> 1%", 82 | "last 2 versions", 83 | "not ie <= 8" 84 | ] 85 | } 86 | -------------------------------------------------------------------------------- /screenshots/Screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot1.png -------------------------------------------------------------------------------- /screenshots/Screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot2.png -------------------------------------------------------------------------------- /screenshots/Screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot3.png -------------------------------------------------------------------------------- /screenshots/Screenshot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot4.png -------------------------------------------------------------------------------- /screenshots/Screenshot5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot5.png -------------------------------------------------------------------------------- /screenshots/Screenshot6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot6.png -------------------------------------------------------------------------------- /screenshots/Screenshot7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot7.png -------------------------------------------------------------------------------- /screenshots/Screenshot8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/screenshots/Screenshot8.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 47 | 48 | 74 | -------------------------------------------------------------------------------- /src/api/apiConfig.js: -------------------------------------------------------------------------------- 1 | 2 | let url = 'http://111.231.54.71:3000' 3 | let apiConfig = { 4 | recommendBannerPath: url + '/banner', 5 | recommendMusicListPath: url + '/personalized', 6 | recommendMVPath: url + '/personalized/mv', 7 | recommendPrivatePath: url + '/personalized/privatecontent', 8 | musicListDetailPath: url + '/playlist/detail', 9 | AlbumDetailPath: url + '/album', 10 | lyricPath: url + '/lyric', 11 | topMV: url + '/top/mv', 12 | MVDetail: url + '/mv', 13 | MVSimi: url + '/simi/mv', 14 | MVComment: url + '/comment/mv', 15 | search: url + '/search', 16 | singerMV: url + '/artist/mv', 17 | singerAlbum: url + '/artist/album', 18 | singerMusic: url + '/artists', 19 | singerDesc: url + '/artist/desc' 20 | } 21 | export default apiConfig 22 | -------------------------------------------------------------------------------- /src/api/getAlbum.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getAlbumDetail (id, callback) { 5 | let url = apiConfig.AlbumDetailPath + '?id=' + id 6 | axios.get(url).then((response) => { 7 | callback(response.data) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getAlbumDetail 14 | -------------------------------------------------------------------------------- /src/api/getBanner.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig.js' 3 | 4 | function getBanner (callback) { 5 | let url = apiConfig.recommendBannerPath 6 | axios.get(url).then((response) => { 7 | callback(response.data.banners) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getBanner 14 | -------------------------------------------------------------------------------- /src/api/getLyric.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig.js' 3 | 4 | function getLyric (id, callback) { 5 | let url = apiConfig.lyricPath + '?id=' + id 6 | axios.get(url).then((response) => { 7 | callback(response.data) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getLyric 14 | -------------------------------------------------------------------------------- /src/api/getMVComment.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMVComment (id, limit, offset) { 5 | let url = apiConfig.MVComment + `?id=${id}&limit=${limit}&offset=${offset}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getMVComment 14 | -------------------------------------------------------------------------------- /src/api/getMVDetail.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMVDetail (id) { 5 | let url = apiConfig.MVDetail + `?mvid=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getMVDetail 14 | -------------------------------------------------------------------------------- /src/api/getMVSimi.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMVSimi (id) { 5 | let url = apiConfig.MVSimi + `?mvid=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data.mvs) 9 | }) 10 | }) 11 | } 12 | 13 | export default getMVSimi 14 | -------------------------------------------------------------------------------- /src/api/getMusicListDetail.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMusicListDetail (id, callback) { 5 | let url = apiConfig.musicListDetailPath + '?id=' + id 6 | axios.get(url).then((response) => { 7 | callback(response.data.result) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getMusicListDetail 14 | -------------------------------------------------------------------------------- /src/api/getRecommendMV.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMV (callback) { 5 | let url = apiConfig.recommendMVPath 6 | axios.get(url).then((response) => { 7 | callback(response.data.result) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getMV 14 | -------------------------------------------------------------------------------- /src/api/getRecommendMusicList.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getMusic (callback) { 5 | let url = apiConfig.recommendMusicListPath 6 | axios.get(url).then((response) => { 7 | callback(response.data.result) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getMusic 14 | -------------------------------------------------------------------------------- /src/api/getRecommendPrivate.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getPrivateContent (callback) { 5 | let url = apiConfig.recommendPrivatePath 6 | axios.get(url).then((response) => { 7 | callback(response.data.result) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getPrivateContent 14 | -------------------------------------------------------------------------------- /src/api/getSearch.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getSearch (keywords, type, limit, offset, callback) { 5 | let url = apiConfig.search + `?keywords=${keywords}&type=${type}&limit=${limit}&offset=${offset}` 6 | axios.get(url).then((data) => { 7 | callback(data.data) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getSearch 14 | -------------------------------------------------------------------------------- /src/api/getSingerAlbum.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getSingerAlbum (id) { 5 | let url = apiConfig.singerAlbum + `?id=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getSingerAlbum 14 | -------------------------------------------------------------------------------- /src/api/getSingerDesc.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getSingerDesc (id) { 5 | let url = apiConfig.singerDesc + `?id=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getSingerDesc 14 | -------------------------------------------------------------------------------- /src/api/getSingerMV.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getSingerMV (id) { 5 | let url = apiConfig.singerMV + `?id=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getSingerMV 14 | -------------------------------------------------------------------------------- /src/api/getSingerMusic.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getSingerMusic (id) { 5 | let url = apiConfig.singerMusic + `?id=${id}` 6 | return new Promise((resolve) => { 7 | axios.get(url).then((data) => { 8 | resolve(data.data) 9 | }) 10 | }) 11 | } 12 | 13 | export default getSingerMusic 14 | -------------------------------------------------------------------------------- /src/api/getTopMV.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import apiConfig from './apiConfig' 3 | 4 | function getTopMV (limit, offset, callback) { 5 | let url = apiConfig.topMV + `?limit=${limit}&offset=${offset}` 6 | axios.get(url).then((data) => { 7 | callback(data.data) 8 | }).catch((err) => { 9 | callback(err) 10 | }) 11 | } 12 | 13 | export default getTopMV 14 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/src/assets/logo.png -------------------------------------------------------------------------------- /src/base/Bubble/bubble.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 134 | 137 | -------------------------------------------------------------------------------- /src/base/Popup/Popup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 27 | -------------------------------------------------------------------------------- /src/base/loading/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/src/base/loading/loading.gif -------------------------------------------------------------------------------- /src/base/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 25 | -------------------------------------------------------------------------------- /src/base/myVideo/myVideo.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 130 | 131 | 206 | -------------------------------------------------------------------------------- /src/base/progress-circle/progress-circle.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 36 | -------------------------------------------------------------------------------- /src/base/progress/progress.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 98 | 99 | 146 | -------------------------------------------------------------------------------- /src/base/songList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/common/css/base.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | width: 100%; 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | -------------------------------------------------------------------------------- /src/common/css/index.css: -------------------------------------------------------------------------------- 1 | .ripple { 2 | position: relative; 3 | overflow: hidden; 4 | } 5 | .ripple:after { 6 | content: ""; 7 | display: block; 8 | position: absolute; 9 | width: 100%; 10 | height: 100%; 11 | top: 0; 12 | left: 0; 13 | pointer-events: none; 14 | background-image: radial-gradient(circle, #666 10%, transparent 10.01%); 15 | background-repeat: no-repeat; 16 | background-position: 50%; 17 | transform: scale(10, 10); 18 | opacity: 0; 19 | transition: transform .3s, opacity .5s; 20 | } 21 | .ripple:active:after { 22 | transform: scale(0, 0); 23 | opacity: .3; 24 | transition: 0s; 25 | } 26 | -------------------------------------------------------------------------------- /src/common/js/Lyric.js: -------------------------------------------------------------------------------- 1 | const timeExp = /\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g 2 | 3 | const STATE_PAUSE = 0 4 | const STATE_PLAYING = 1 5 | 6 | const tagRegMap = { 7 | title: 'ti', 8 | artist: 'ar', 9 | album: 'al', 10 | offset: 'offset', 11 | by: 'by' 12 | } 13 | 14 | function noop () { 15 | } 16 | 17 | export default class Lyric { 18 | constructor (lrc, hanlder = noop) { 19 | this.lrc = lrc 20 | this.tags = {} 21 | this.lines = [] 22 | this.handler = hanlder 23 | this.state = STATE_PAUSE 24 | this.curLine = 0 25 | 26 | this._init() 27 | } 28 | 29 | _init () { 30 | this._initTag() 31 | 32 | this._initLines() 33 | } 34 | 35 | _initTag () { 36 | for (let tag in tagRegMap) { 37 | const matches = this.lrc.match(new RegExp(`\\[${tagRegMap[tag]}:([^\\]]*)]`, 'i')) 38 | this.tags[tag] = (matches && matches[1]) || '' 39 | } 40 | } 41 | 42 | _initLines () { 43 | const lines = this.lrc.split('\n') 44 | for (let i = 0; i < lines.length; i++) { 45 | const line = lines[i] 46 | let result = timeExp.exec(line) 47 | if (result) { 48 | const txt = line.replace(timeExp, '').trim() 49 | if (txt) { 50 | this.lines.push({ 51 | time: result[1] * 60 * 1000 + result[2] * 1000 + parseInt(result[3] || 0), 52 | txt 53 | }) 54 | } 55 | } 56 | } 57 | 58 | this.lines.sort((a, b) => { 59 | return a.time - b.time 60 | }) 61 | } 62 | 63 | _findCurNum (time) { 64 | for (let i = 0; i < this.lines.length; i++) { 65 | if (time <= this.lines[i].time) { 66 | return i 67 | } 68 | } 69 | return this.lines.length - 1 70 | } 71 | 72 | _callHandler (i) { 73 | if (i < 0) { 74 | return 75 | } 76 | this.handler({ 77 | txt: this.lines[i].txt, 78 | lineNum: i 79 | }) 80 | } 81 | 82 | _playRest () { 83 | let line = this.lines[this.curNum] 84 | let delay = line.time - (+new Date() - this.startStamp) 85 | 86 | this.timer = setTimeout(() => { 87 | this._callHandler(this.curNum++) 88 | if (this.curNum < this.lines.length && this.state === STATE_PLAYING) { 89 | this._playRest() 90 | } 91 | }, delay) 92 | } 93 | 94 | play (startTime = 0, skipLast) { 95 | if (!this.lines.length) { 96 | return 97 | } 98 | this.state = STATE_PLAYING 99 | 100 | this.curNum = this._findCurNum(startTime) 101 | this.startStamp = +new Date() - startTime 102 | 103 | if (!skipLast) { 104 | this._callHandler(this.curNum - 1) 105 | } 106 | 107 | if (this.curNum < this.lines.length) { 108 | clearTimeout(this.timer) 109 | this._playRest() 110 | } 111 | } 112 | 113 | togglePlay () { 114 | var now = +new Date() 115 | if (this.state === STATE_PLAYING) { 116 | this.stop() 117 | this.pauseStamp = now 118 | } else { 119 | this.state = STATE_PLAYING 120 | this.play((this.pauseStamp || now) - (this.startStamp || now), true) 121 | this.pauseStamp = 0 122 | } 123 | } 124 | 125 | stop () { 126 | this.state = STATE_PAUSE 127 | clearTimeout(this.timer) 128 | } 129 | 130 | seek (offset) { 131 | this.play(offset) 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/common/js/mixin.js: -------------------------------------------------------------------------------- 1 | import {mapGetters} from 'vuex' 2 | export const playListMixin = { 3 | computed: { 4 | ...mapGetters([ 5 | 'playerPlayList' 6 | ]) 7 | }, 8 | mounted () { 9 | this.handlePlayList(this.playerPlayList) 10 | }, 11 | activated () { 12 | this.handlePlayList(this.playerPlayList) 13 | }, 14 | watch: { 15 | playerPlayList (newVal) { 16 | this.handlePlayList(newVal) 17 | } 18 | }, 19 | methods: { 20 | handlePlayList () { 21 | throw new Error('component must implement handlePlayerPlayList method') 22 | } 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/components/MVList/MVList.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 43 | 44 | 79 | -------------------------------------------------------------------------------- /src/components/MusicList/MusicList.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 50 | 51 | 90 | -------------------------------------------------------------------------------- /src/components/MyHeader/MyHeader.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | 36 | 83 | -------------------------------------------------------------------------------- /src/components/albumList/albumList.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | 79 | -------------------------------------------------------------------------------- /src/components/commentList/commentList.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 45 | 46 | 100 | -------------------------------------------------------------------------------- /src/components/playList/playList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 38 | 39 | 78 | -------------------------------------------------------------------------------- /src/components/player/cd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/src/components/player/cd.png -------------------------------------------------------------------------------- /src/components/player/triger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/src/components/player/triger.png -------------------------------------------------------------------------------- /src/components/playerList/playerList.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 153 | 154 | 254 | -------------------------------------------------------------------------------- /src/components/recommendMV/recommendMv.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 45 | 46 | 100 | -------------------------------------------------------------------------------- /src/components/recommendMusic/recommendMusic.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 43 | 44 | 99 | -------------------------------------------------------------------------------- /src/components/recommendPrivate/recommendPrivate.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 41 | 42 | 103 | -------------------------------------------------------------------------------- /src/components/scroll/scroll.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 180 | 181 | 213 | -------------------------------------------------------------------------------- /src/components/singerList/singerList.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | 73 | -------------------------------------------------------------------------------- /src/components/slider/slider.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 45 | 46 | 64 | -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/src/logo.png -------------------------------------------------------------------------------- /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 router from './router' 6 | // import '@/../static/MUI/css/mui.min.css' 7 | import store from './store/index.js' 8 | import '@/../static/swiper/swiper-4.1.0.min.css' 9 | import '@/../static/css/normalize.css' 10 | import '@/common/css/base.css' 11 | import '@/../static/font-icon/style.css' 12 | import IScroll from 'iscroll' 13 | import IScrollView from 'vue-iscroll-view' 14 | import init from '@/../static/js/init.js' 15 | import FastClick from 'fastclick' 16 | import VueLazyLoad from 'vue-lazyload' 17 | import logo from './logo.png' 18 | 19 | FastClick.attach(document.body) 20 | init() 21 | 22 | Vue.use(VueLazyLoad, { 23 | loading: logo 24 | }) 25 | 26 | Vue.use(IScrollView, IScroll) 27 | Vue.config.productionTip = false 28 | 29 | Vue.filter('time', function (value) { 30 | let dateNow = new Date() 31 | let second = Math.floor((dateNow.getTime() - value) / 1000) 32 | let minute = Math.floor(second / 60) 33 | let hour = Math.floor(second / 3600) 34 | if (second < 60) { 35 | return `${second}秒前` 36 | } else if (minute < 60) { 37 | return `${minute}分钟前` 38 | } else if (hour < 24) { 39 | return `${hour}小时前` 40 | } else { 41 | let subDate = new Date(value) 42 | let year = subDate.getFullYear() 43 | let month = subDate.getMonth() + 1 44 | let day = subDate.getDate() 45 | if (year === dateNow.getFullYear()) { 46 | return `${month}月${day}日` 47 | } else { 48 | return `${year}年${month}月${day}日` 49 | } 50 | } 51 | }) 52 | 53 | Vue.filter('count', function (value) { 54 | if (value > 100000) { 55 | let num = Math.floor(value / 10000) 56 | return `${num}万` 57 | } else { 58 | return value 59 | } 60 | }) 61 | 62 | /* eslint-disable no-new */ 63 | new Vue({ 64 | el: '#app', 65 | router, 66 | store, 67 | components: { App }, 68 | template: '' 69 | }) 70 | -------------------------------------------------------------------------------- /src/page/MVDetailPage/MVDetailPage.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 178 | 179 | 298 | -------------------------------------------------------------------------------- /src/page/albumDetailPage/albumDetailPage.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 137 | 138 | 308 | -------------------------------------------------------------------------------- /src/page/broadcastPage/broadcastPage.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /src/page/index/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 50 | 51 | 122 | -------------------------------------------------------------------------------- /src/page/musicListDetailPage/musicListDetailPage.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 156 | 157 | 330 | -------------------------------------------------------------------------------- /src/page/musicPage/musicPage.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 90 | 91 | 145 | -------------------------------------------------------------------------------- /src/page/myMusic/myMusic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/page/search/search.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 175 | 176 | 266 | -------------------------------------------------------------------------------- /src/page/singerDetail/singerDetail.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 192 | 193 | 305 | -------------------------------------------------------------------------------- /src/page/topicPage/topicPage.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/page/videoPage/videoPage.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 113 | 114 | 167 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | import indexPage from '@/page/index/index' 5 | import topicPage from '@/page/topicPage/topicPage' 6 | import myMusic from '@/page/myMusic/myMusic' 7 | import musicPage from '@/page/musicPage/musicPage' 8 | import videoPage from '@/page/videoPage/videoPage' 9 | import broadcast from '@/page/broadcastPage/broadcastPage' 10 | 11 | Vue.use(Router) 12 | 13 | export default new Router({ 14 | routes: [ 15 | { 16 | path: '/index', 17 | component: indexPage, 18 | redirect: '/index/music', 19 | children: [ 20 | { 21 | path: 'music', 22 | component: musicPage, 23 | meta: { 24 | tab: 1 25 | } 26 | }, 27 | { 28 | path: 'video', 29 | component: videoPage, 30 | meta: { 31 | tab: 2 32 | } 33 | }, 34 | { 35 | path: 'broadcast', 36 | component: broadcast, 37 | meta: { 38 | tab: 3 39 | } 40 | } 41 | ] 42 | }, 43 | { 44 | path: '/myMusic', 45 | component: myMusic 46 | }, 47 | { 48 | path: '/topic', 49 | component: topicPage 50 | }, 51 | { 52 | path: '*', 53 | redirect: '/index/music' 54 | } 55 | ] 56 | }) 57 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import getRecommendMusicList from '@/api/getRecommendMusicList' 2 | import getRecommendPrivate from '@/api/getRecommendPrivate' 3 | import getRecommendMV from '@/api/getRecommendMV' 4 | import getTopMV from '@/api/getTopMV' 5 | import getBanner from '@/api/getBanner' 6 | import getMusicListDetail from '@/api/getMusicListDetail' 7 | import getAlbumDetail from '@/api/getAlbum' 8 | 9 | import * as types from './mutation-types' 10 | 11 | const actions = { 12 | getRecommendMusicList ({commit, state}) { 13 | getRecommendMusicList((data) => { 14 | commit(types.SET_RECOMMEND_MUSICLIST, data) 15 | }) 16 | }, 17 | getRecommendBanner ({commit, state}) { 18 | getBanner((data) => { 19 | commit(types.SET_RECOMMEND_BANNER, data) 20 | }) 21 | }, 22 | getRecommendPrivate ({commit, state}) { 23 | getRecommendPrivate((data) => { 24 | commit(types.SET_RECOMMEND_PRIVATE, data) 25 | }) 26 | }, 27 | getRecommendMV ({commit, state}) { 28 | getRecommendMV((data) => { 29 | commit(types.SET_RECOMMEND_MV, data) 30 | }) 31 | }, 32 | getTopMV ({commit, state}, {limit, offset}) { 33 | getTopMV(limit, offset, (data) => { 34 | commit(types.SET_TOP_MV, data) 35 | }) 36 | }, 37 | showMusicListDetail ({commit, state}, obj) { 38 | commit(types.SET_MUSICLISTDETAIL_SHOW, true) 39 | commit(types.SET_MUSICLISTDETAIL_COPYWRITE, obj.copywriter) 40 | commit(types.SET_MUSICLISTDETAIL_SHOWLIST, []) 41 | getMusicListDetail(obj.id, (result) => { 42 | commit(types.SET_MUSICLISTDETAIL_SHOWLIST, result) 43 | }) 44 | }, 45 | showAlbumDetail ({commit, state}, obj) { 46 | commit(types.SET_ALBUMDETAIL_SHOW, true) 47 | commit(types.SET_ALBUMDETAIL_SHOWLIST, []) 48 | getAlbumDetail(obj.id, (result) => { 49 | if (result.code === 200) { 50 | for (let i = 0; i < result.songs.length; i++) { 51 | result.songs[i].duration = result.songs[i].dt 52 | result.songs[i].album = result.album 53 | result.songs[i].artists = result.songs[i].ar 54 | result.songs[i].alias = result.songs[i].alia 55 | } 56 | commit(types.SET_ALBUMDETAIL_SHOWLIST, result) 57 | } 58 | }) 59 | }, 60 | hideAlbumDetail ({commit}) { 61 | commit(types.SET_ALBUMDETAIL_SHOW, false) 62 | }, 63 | hideMusicListDetail ({commit}) { 64 | commit(types.SET_MUSICLISTDETAIL_SHOW, false) 65 | }, 66 | selectPlay ({commit, state}, {list, index}) { 67 | commit(types.SET_PLAYER_PLAYLIST, list) 68 | commit(types.SET_PLAYER_CURRENTINDEX, index) 69 | commit(types.SET_PLAYER_STATE, true) 70 | commit(types.SET_PLAYER_FULLSCREEN, true) 71 | }, 72 | randomPlay ({commit, state}, list) { 73 | let index = Math.floor(Math.random() * list.length) 74 | commit(types.SET_PLAYER_PLAYLIST, list) 75 | commit(types.SET_PLAYER_CURRENTINDEX, index) 76 | commit(types.SET_PLAYER_STATE, true) 77 | commit(types.SET_PLAYER_FULLSCREEN, true) 78 | commit(types.SET_PLAYER_MODE, 'random') 79 | }, 80 | showMVDetailPage ({commit, state}, id) { 81 | commit(types.SET_MVDETAIL_SHOW, true) 82 | commit(types.SET_MVDETAIL_MVID, id) 83 | }, 84 | closeMVDetailPage ({commit}) { 85 | commit(types.SET_MVDETAIL_SHOW, false) 86 | }, 87 | showSearchPage ({commit}) { 88 | commit(types.SET_SEARCH_SHOW, true) 89 | }, 90 | hideSearchPage ({commit}) { 91 | commit(types.SET_SEARCH_SHOW, false) 92 | }, 93 | showSingerPage ({commit}, artist) { 94 | commit(types.SET_SINGER_ARTIST, artist) 95 | commit(types.SET_SINGER_SHOW, true) 96 | }, 97 | hideSingerPage ({commit}) { 98 | commit(types.SET_SINGER_SHOW, false) 99 | }, 100 | deleteSong ({commit, state}, song) { 101 | let index = -1 102 | let playList = state.player.PlayList 103 | let currentIndex = state.player.CurrentIndex 104 | for (let i = 0; i < playList.length; i++) { 105 | if (song.id === playList[i].id) { 106 | index = i 107 | playList.splice(i, 1) 108 | } 109 | } 110 | if (index === -1) { 111 | return 112 | } 113 | if (currentIndex > index || currentIndex === playList.length) { 114 | currentIndex-- 115 | } 116 | commit(types.SET_PLAYER_PLAYLIST, playList) 117 | commit(types.SET_PLAYER_CURRENTINDEX, currentIndex) 118 | if (!playList.length) { 119 | commit(types.SET_PLAYER_STATE, false) 120 | } else { 121 | commit(types.SET_PLAYER_STATE, true) 122 | } 123 | }, 124 | addSong ({commit, state}, song) { 125 | let playList = state.player.PlayList 126 | getAlbumDetail(song.album.id, (result) => { 127 | song.album = result.album 128 | commit(types.SET_PLAYER_STATE, true) 129 | commit(types.SET_PLAYER_FULLSCREEN, true) 130 | for (let i = 0; i < playList.length; i++) { 131 | if (playList[i].id === song.id) { 132 | commit(types.SET_PLAYER_CURRENTINDEX, i) 133 | return 134 | } 135 | } 136 | playList.push(song) 137 | commit(types.SET_PLAYER_PLAYLIST, playList) 138 | commit(types.SET_PLAYER_CURRENTINDEX, playList.length - 1) 139 | }) 140 | }, 141 | deleteSongList ({commit}) { 142 | commit(types.SET_PLAYER_PLAYLIST, []) 143 | commit(types.SET_PLAYER_CURRENTINDEX, -1) 144 | commit(types.SET_PLAYER_STATE, false) 145 | } 146 | } 147 | 148 | export default actions 149 | -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | const getters = { 2 | recommendMusicList (state) { 3 | if (state.recommendMusicList.length > 6) { 4 | return state.recommendMusicList.slice(0, 6) 5 | } else { 6 | return state.recommendMusicList 7 | } 8 | }, 9 | recommendPrivate (state) { 10 | return state.recommendPrivate 11 | }, 12 | recommendMV (state) { 13 | return state.recommendMV 14 | }, 15 | recommendBanner (state) { 16 | return state.recommendBanner 17 | }, 18 | topMV (state) { 19 | return state.topMV.data 20 | }, 21 | playerState (state) { 22 | return state.player.Play 23 | }, 24 | playerMode (state) { 25 | return state.player.Mode 26 | }, 27 | playerPlayList (state) { 28 | return state.player.PlayList 29 | }, 30 | playerCurrentIndex (state) { 31 | return state.player.CurrentIndex 32 | }, 33 | playerFullScreen (state) { 34 | return state.player.FullScreen 35 | }, 36 | playerCurrentSong (state) { 37 | return state.player.PlayList[state.player.CurrentIndex] 38 | }, 39 | albumDetail (state) { 40 | return state.albumDetail 41 | }, 42 | musicListDetail (state) { 43 | return state.musicListDetail 44 | }, 45 | MVDetailShow (state) { 46 | return state.MVDetail.show 47 | }, 48 | MVDetailId (state) { 49 | return state.MVDetail.MVId 50 | }, 51 | searchShow (state) { 52 | return state.searchShow 53 | }, 54 | singerArtist (state) { 55 | return state.singer.artist 56 | }, 57 | singerShow (state) { 58 | return state.singer.show 59 | }, 60 | singerList (state) { 61 | return state.singer.list 62 | } 63 | } 64 | export default getters 65 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import getters from './getters' 2 | import state from './state' 3 | import actions from './actions' 4 | import mutations from './mutations' 5 | 6 | import Vue from 'vue' 7 | import Vuex from 'vuex' 8 | Vue.use(Vuex) 9 | 10 | export default new Vuex.Store({ 11 | state, 12 | actions, 13 | mutations, 14 | getters 15 | }) 16 | -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const SET_RECOMMEND_MUSICLIST = 'SET_RECOMMEND_MUSICLIST' 2 | 3 | export const SET_RECOMMEND_PRIVATE = 'SET_RECOMMEND_PRIVATE' 4 | 5 | export const SET_RECOMMEND_MV = 'SET_RECOMMEND_MV' 6 | 7 | export const SET_RECOMMEND_BANNER = 'SET_RECOMMEND_BANNER' 8 | 9 | export const SET_TOP_MV = 'SET_TOP_MV' 10 | 11 | export const SET_MUSICLISTDETAIL_SHOWLIST = 'SET_MUSICLISTDETAIL_SHOWLIST' 12 | 13 | export const SET_MUSICLISTDETAIL_SHOW = 'SET_MUSICLISTDETAIL_SHOW' 14 | 15 | export const SET_MUSICLISTDETAIL_COPYWRITE = 'SET_MUSICLISTDETAIL_COPYWRITE' 16 | 17 | export const SET_ALBUMDETAIL_SHOWLIST = 'SET_ALBUMDETAIL_SHOWLIST' 18 | 19 | export const SET_ALBUMDETAIL_SHOW = 'SET_ALBUMDETAIL_SHOW' 20 | 21 | export const SET_PLAYER_STATE = 'SET_PLAYER_STATE' 22 | 23 | export const SET_PLAYER_FULLSCREEN = 'SET_PLAYER_FULLSCREEN' 24 | 25 | export const SET_PLAYER_PLAYLIST = 'SET_PLAYER_PLAYLIST' 26 | 27 | export const SET_PLAYER_MODE = 'SET_PLAYER_MODE' 28 | 29 | export const SET_PLAYER_CURRENTINDEX = 'SET_PLAYER_CURRENTINDEX' 30 | 31 | export const SET_MVDETAIL_MVID = 'SET_MVDETAIL_MVID' 32 | 33 | export const SET_MVDETAIL_SHOW = 'SET_MVDETAIL_SHOW' 34 | 35 | export const SET_SEARCH_SHOW = 'SET_SEARCH_SHOW' 36 | 37 | export const SET_SINGER_ARTIST = 'SET_SINGER_ARTIST' 38 | 39 | export const SET_SINGER_SHOW = 'SET_SINGER_SHOW' 40 | 41 | export const SET_SINGER_LIST = 'SET_SINGER_LIST' 42 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' 2 | const mutations = { 3 | [types.SET_RECOMMEND_MUSICLIST] (state, data) { 4 | state.recommendMusicList = data 5 | }, 6 | [types.SET_RECOMMEND_PRIVATE] (state, data) { 7 | state.recommendPrivate = data 8 | }, 9 | [types.SET_RECOMMEND_BANNER] (state, data) { 10 | state.recommendBanner = data 11 | }, 12 | [types.SET_RECOMMEND_MV] (state, data) { 13 | state.recommendMV = data 14 | }, 15 | [types.SET_TOP_MV] (state, data) { 16 | state.topMV = data 17 | }, 18 | [types.SET_ALBUMDETAIL_SHOW] (state, data) { 19 | state.albumDetail.show = data 20 | }, 21 | [types.SET_ALBUMDETAIL_SHOWLIST] (state, data) { 22 | console.log(data) 23 | state.albumDetail.showList = Object.assign({}, data) 24 | }, 25 | [types.SET_MUSICLISTDETAIL_SHOW] (state, data) { 26 | state.musicListDetail.show = data 27 | }, 28 | [types.SET_MUSICLISTDETAIL_SHOWLIST] (state, data) { 29 | state.musicListDetail.showList = Object.assign({}, data) 30 | }, 31 | [types.SET_MUSICLISTDETAIL_COPYWRITE] (state, data) { 32 | state.musicListDetail.copywriter = data 33 | }, 34 | [types.SET_PLAYER_STATE] (state, data) { 35 | state.player.Play = data 36 | }, 37 | [types.SET_PLAYER_PLAYLIST] (state, data) { 38 | state.player.PlayList = Object.assign([], data) 39 | }, 40 | [types.SET_PLAYER_FULLSCREEN] (state, data) { 41 | state.player.FullScreen = data 42 | }, 43 | [types.SET_PLAYER_MODE] (state, data) { 44 | state.player.Mode = data 45 | }, 46 | [types.SET_PLAYER_CURRENTINDEX] (state, data) { 47 | state.player.CurrentIndex = data 48 | }, 49 | [types.SET_MVDETAIL_MVID] (state, data) { 50 | state.MVDetail.MVId = data 51 | }, 52 | [types.SET_MVDETAIL_SHOW] (state, data) { 53 | state.MVDetail.show = data 54 | }, 55 | [types.SET_SEARCH_SHOW] (state, data) { 56 | state.searchShow = data 57 | }, 58 | [types.SET_SINGER_ARTIST] (state, data) { 59 | state.singer.artist = data 60 | }, 61 | [types.SET_SINGER_SHOW] (state, data) { 62 | state.singer.show = data 63 | }, 64 | [types.SET_SINGER_LIST] (state, data) { 65 | state.singer.list = data 66 | } 67 | } 68 | export default mutations 69 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | recommendMusicList: [], 3 | recommendPrivate: [], 4 | recommendBanner: [], 5 | recommendMV: [], 6 | topMV: [], 7 | musicListDetail: { 8 | showList: {}, 9 | copywriter: '', 10 | show: false 11 | }, 12 | albumDetail: { 13 | showList: {}, 14 | show: false 15 | }, 16 | MVDetail: { 17 | show: false, 18 | MVId: '' 19 | }, 20 | player: { 21 | Play: false, 22 | FullScreen: false, 23 | PlayList: [], 24 | Mode: 'sequence', 25 | CurrentIndex: -1 26 | }, 27 | searchShow: false, 28 | singer: { 29 | artist: {}, 30 | list: [], 31 | show: false 32 | } 33 | } 34 | export default state 35 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/static/.gitkeep -------------------------------------------------------------------------------- /static/MUI/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/static/MUI/fonts/mui.ttf -------------------------------------------------------------------------------- /static/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family: monospace, monospace; /* 1 */ 92 | font-size: 1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color: transparent; /* 1 */ 105 | -webkit-text-decoration-skip: objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family: monospace, monospace; /* 1 */ 146 | font-size: 1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display: inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display: none; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style: none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family: sans-serif; /* 1 */ 246 | font-size: 100%; /* 1 */ 247 | line-height: 1.15; /* 1 */ 248 | margin: 0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow: visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type='button'], /* 1 */ 279 | [type='reset'], 280 | [type='submit'] { 281 | -webkit-appearance: button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type='button']::-moz-focus-inner, 290 | [type='reset']::-moz-focus-inner, 291 | [type='submit']::-moz-focus-inner { 292 | border-style: none; 293 | padding: 0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type='button']:-moz-focusring, 302 | [type='reset']:-moz-focusring, 303 | [type='submit']:-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding: 0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing: border-box; /* 1 */ 324 | color: inherit; /* 2 */ 325 | display: table; /* 1 */ 326 | max-width: 100%; /* 1 */ 327 | padding: 0; /* 3 */ 328 | white-space: normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display: inline-block; /* 1 */ 338 | vertical-align: baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow: auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type='checkbox'], 355 | [type='radio'] { 356 | box-sizing: border-box; /* 1 */ 357 | padding: 0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type='number']::-webkit-inner-spin-button, 365 | [type='number']::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type='search'] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | outline-offset: -2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type='search']::-webkit-search-cancel-button, 384 | [type='search']::-webkit-search-decoration { 385 | -webkit-appearance: none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance: button; /* 1 */ 395 | font: inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display: block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display: list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display: inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display: none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display: none; 447 | } 448 | -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/static/font-icon/fonts/icomoon.eot -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/static/font-icon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /static/font-icon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangda7502002/vue-music/cf02a7657607c55a652b37b28fa28b951c45cbea/static/font-icon/fonts/icomoon.woff -------------------------------------------------------------------------------- /static/font-icon/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?g6to1x'); 4 | src: url('fonts/icomoon.eot?g6to1x#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?g6to1x') format('truetype'), 6 | url('fonts/icomoon.woff?g6to1x') format('woff'), 7 | url('fonts/icomoon.svg?g6to1x#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-imgsetting:before { 28 | content: "\e939"; 29 | } 30 | .icon-canclefullscreen:before { 31 | content: "\e932"; 32 | } 33 | .icon-fullscreen:before { 34 | content: "\e933"; 35 | } 36 | .icon-github:before { 37 | content: "\e936"; 38 | } 39 | .icon-clown:before { 40 | content: "\e934"; 41 | } 42 | .icon-smile:before { 43 | content: "\e935"; 44 | } 45 | .icon-works:before { 46 | content: "\e937"; 47 | } 48 | .icon-about:before { 49 | content: "\e938"; 50 | } 51 | .icon-erji:before { 52 | content: "\e931"; 53 | } 54 | .icon-date:before { 55 | content: "\e92e"; 56 | } 57 | .icon-rank-list:before { 58 | content: "\e92f"; 59 | } 60 | .icon-fm:before { 61 | content: "\e930"; 62 | } 63 | .icon-list-circle-small:before { 64 | content: "\e92a"; 65 | } 66 | .icon-download:before { 67 | content: "\e92b"; 68 | } 69 | .icon-like:before { 70 | content: "\e92c"; 71 | } 72 | .icon-msg:before { 73 | content: "\e92d"; 74 | } 75 | .icon-playdetail:before { 76 | content: "\e925"; 77 | } 78 | .icon-pause-detail:before { 79 | content: "\e926"; 80 | } 81 | .icon-prevdetail:before { 82 | content: "\e927"; 83 | } 84 | .icon-nextdetail:before { 85 | content: "\e928"; 86 | } 87 | .icon-music-shunxu:before { 88 | content: "\e929"; 89 | } 90 | .icon-back:before { 91 | content: "\e924"; 92 | } 93 | .icon-edit-paper:before { 94 | content: "\e900"; 95 | } 96 | .icon-edit:before { 97 | content: "\e91b"; 98 | } 99 | .icon-delete:before { 100 | content: "\e923"; 101 | } 102 | .icon-add-project:before { 103 | content: "\e913"; 104 | } 105 | .icon-add:before { 106 | content: "\e921"; 107 | } 108 | .icon-list-music:before { 109 | content: "\e91d"; 110 | } 111 | .icon-night:before { 112 | content: "\e91e"; 113 | } 114 | .icon-day:before { 115 | content: "\e91f"; 116 | } 117 | .icon-community:before { 118 | content: "\e920"; 119 | } 120 | .icon-wangyi:before { 121 | content: "\e90e"; 122 | } 123 | .icon-share:before { 124 | content: "\e90f"; 125 | } 126 | .icon-play:before { 127 | content: "\e910"; 128 | } 129 | .icon-list-circle:before { 130 | content: "\e911"; 131 | } 132 | .icon-setting:before { 133 | content: "\e914"; 134 | } 135 | .icon-theme:before { 136 | content: "\e915"; 137 | } 138 | .icon-friend:before { 139 | content: "\e916"; 140 | } 141 | .icon-set-time:before { 142 | content: "\e917"; 143 | } 144 | .icon-lock:before { 145 | content: "\e918"; 146 | } 147 | .icon-car:before { 148 | content: "\e919"; 149 | } 150 | .icon-cloud:before { 151 | content: "\e91a"; 152 | } 153 | .icon-exit:before { 154 | content: "\e91c"; 155 | } 156 | .icon-place:before { 157 | content: "\e909"; 158 | } 159 | .icon-SHARE2:before { 160 | content: "\e90a"; 161 | } 162 | .icon-zuijinplay:before { 163 | content: "\e90b"; 164 | } 165 | .icon-diantai:before { 166 | content: "\e90c"; 167 | } 168 | .icon-collect:before { 169 | content: "\e90d"; 170 | } 171 | .icon-coin:before { 172 | content: "\e908"; 173 | } 174 | .icon-market:before { 175 | content: "\e901"; 176 | } 177 | .icon-menu:before { 178 | content: "\e902"; 179 | } 180 | .icon-message:before { 181 | content: "\e903"; 182 | } 183 | .icon-music:before { 184 | content: "\e904"; 185 | } 186 | .icon-search:before { 187 | content: "\e905"; 188 | } 189 | .icon-vip:before { 190 | content: "\e906"; 191 | } 192 | .icon-wangyiyun:before { 193 | content: "\e907"; 194 | } 195 | .icon-close:before { 196 | content: "\e912"; 197 | } 198 | .icon-down:before { 199 | content: "\e922"; 200 | } 201 | .icon-left:before { 202 | content: "\e940"; 203 | } 204 | .icon-pause:before { 205 | content: "\e955"; 206 | } 207 | .icon-right:before { 208 | content: "\e963"; 209 | } 210 | .icon-up:before { 211 | content: "\e978"; 212 | } 213 | .icon-music-danqu1:before { 214 | content: "\e94a"; 215 | } 216 | .icon-music-random:before { 217 | content: "\e94b"; 218 | } 219 | .icon-volume-medium:before { 220 | content: "\ea27"; 221 | } 222 | -------------------------------------------------------------------------------- /static/js/init.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function setFontSize () { 4 | var desW = window.innerWidth; 5 | var demoW = 1082; 6 | if (desW > 640) { 7 | desW = 640; 8 | document.documentElement.style.width = desW + 'px'; 9 | }else if (desW < 320) { 10 | desW = 320; 11 | document.documentElement.style.width = desW + 'px'; 12 | } 13 | var rate = desW / demoW; 14 | document.documentElement.style.fontSize = 100 * rate + 'px'; 15 | document.documentElement.style.width = desW + 'px'; 16 | document.documentElement.style.margin = '0px auto '; 17 | } 18 | 19 | function init () { 20 | window.addEventListener('resize',() => { 21 | setFontSize() 22 | }) 23 | setFontSize() 24 | } 25 | 26 | export default init 27 | -------------------------------------------------------------------------------- /static/swiper/swiper-4.1.0.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Swiper 4.1.0 3 | * Most modern mobile touch slider and framework with hardware accelerated transitions 4 | * http://www.idangero.us/swiper/ 5 | * 6 | * Copyright 2014-2018 Vladimir Kharlampidi 7 | * 8 | * Released under the MIT License 9 | * 10 | * Released on: January 13, 2018 11 | */ 12 | .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E')}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E')}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E')}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E')}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} 13 | --------------------------------------------------------------------------------