├── .babelrc
├── .editorconfig
├── .gitignore
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.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
├── src
    ├── App.vue
    ├── api
    │   └── index.js
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Comments.vue
    │   ├── Loading.vue
    │   ├── MvList.vue
    │   ├── SearchInput.vue
    │   └── VideoPlayer.vue
    ├── main.js
    ├── pages
    │   ├── Index.vue
    │   └── MV.vue
    ├── router
    │   └── index.js
    ├── style
    │   ├── base.scss
    │   └── base
    │   │   ├── _buttons.scss
    │   │   ├── _function.scss
    │   │   ├── _mixins.scss
    │   │   ├── _reset.scss
    │   │   ├── _type.scss
    │   │   ├── _utilities.scss
    │   │   └── _variables.scss
    └── util
    │   └── filters.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-2"],
 3 |   "plugins": ["transform-runtime"],
 4 |   "comments": false,
 5 |   "env": {
 6 |     "test": {
 7 |       "plugins": [ "istanbul" ]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue2-MV
 2 | 
 3 | > 基于Vue2实现的网易云音乐MV的webapp。[在线地址](https://mv.mrcxh.com/)
 4 | 
 5 | ### 主页功能
 6 | - 浏览MV列表
 7 | - 搜索MV
 8 | - 观看MV
 9 | - 浏览MV评论
10 | 
11 | ### 技术栈
12 | vue2 + vue-router + webpack + ES6 + sass + rem + html5 video
13 | 
14 | ## 截图
15 | ![首页/列表](http://wx3.sinaimg.cn/mw690/6457b6bfgy1fes9q77k5oj208w0fs3zt.jpg)
16 | ![MV播放页](http://wx4.sinaimg.cn/mw690/6457b6bfgy1fes9q7u9agj208w0fsabj.jpg)
17 | 
18 | ## 安装运行（Build Setup）
19 | 
20 | ``` bash
21 | # install dependencies
22 | npm install
23 | 
24 | # serve with hot reload at localhost:5000
25 | npm run dev
26 | 
27 | # build for production with minification
28 | npm run build
29 | 
30 | ```
31 | 
32 | ## 鸣谢
33 | 
34 | 提供API的网站: [https://api.imjad.cn/](https://api.imjad.cn/) ,此接口的说明[查看](https://api.imjad.cn/cloudmusic/index.html)
35 | 
36 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/shelljs/shelljs
 2 | require('./check-versions')()
 3 | require('shelljs/global')
 4 | env.NODE_ENV = 'production'
 5 | 
 6 | var path = require('path')
 7 | var config = require('../config')
 8 | var ora = require('ora')
 9 | var webpack = require('webpack')
10 | var webpackConfig = require('./webpack.prod.conf')
11 | 
12 | console.log(
13 |   '  Tip:\n' +
14 |   '  Built files are meant to be served over an HTTP server.\n' +
15 |   '  Opening index.html over file:// won\'t work.\n'
16 | )
17 | 
18 | var spinner = ora('building for production...')
19 | spinner.start()
20 | 
21 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
22 | rm('-rf', assetsPath)
23 | mkdir('-p', assetsPath)
24 | cp('-R', 'static/*', assetsPath)
25 | 
26 | webpack(webpackConfig, function (err, stats) {
27 |   spinner.stop()
28 |   if (err) throw err
29 |   process.stdout.write(stats.toString({
30 |     colors: true,
31 |     modules: false,
32 |     children: false,
33 |     chunks: false,
34 |     chunkModules: false
35 |   }) + '\n')
36 | })
37 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var semver = require('semver')
 2 | var chalk = require('chalk')
 3 | var packageConfig = require('../package.json')
 4 | var exec = function (cmd) {
 5 |   return require('child_process')
 6 |     .execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   },
15 |   {
16 |     name: 'npm',
17 |     currentVersion: exec('npm --version'),
18 |     versionRequirement: packageConfig.engines.npm
19 |   }
20 | ]
21 | 
22 | module.exports = function () {
23 |   var warnings = []
24 |   for (var i = 0; i < versionRequirements.length; i++) {
25 |     var mod = versionRequirements[i]
26 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
27 |       warnings.push(mod.name + ': ' +
28 |         chalk.red(mod.currentVersion) + ' should be ' +
29 |         chalk.green(mod.versionRequirement)
30 |       )
31 |     }
32 |   }
33 | 
34 |   if (warnings.length) {
35 |     console.log('')
36 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
37 |     console.log()
38 |     for (var i = 0; i < warnings.length; i++) {
39 |       var warning = warnings[i]
40 |       console.log('  ' + warning)
41 |     }
42 |     console.log()
43 |     process.exit(1)
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | var config = require('../config')
 3 | if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 4 | var path = require('path')
 5 | var express = require('express')
 6 | var webpack = require('webpack')
 7 | var opn = require('opn')
 8 | var proxyMiddleware = require('http-proxy-middleware')
 9 | var webpackConfig = require('./webpack.dev.conf')
10 | 
11 | // default port where dev server listens for incoming traffic
12 | var port = process.env.PORT || config.dev.port
13 | // Define HTTP proxies to your custom API backend
14 | // https://github.com/chimurai/http-proxy-middleware
15 | var proxyTable = config.dev.proxyTable
16 | 
17 | var app = express()
18 | var compiler = webpack(webpackConfig)
19 | 
20 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
21 |   publicPath: webpackConfig.output.publicPath,
22 |   quiet: true
23 | })
24 | 
25 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
26 |   log: () => {}
27 | })
28 | // force page reload when html-webpack-plugin template changes
29 | compiler.plugin('compilation', function (compilation) {
30 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
31 |     hotMiddleware.publish({ action: 'reload' })
32 |     cb()
33 |   })
34 | })
35 | 
36 | // proxy api requests
37 | Object.keys(proxyTable).forEach(function (context) {
38 |   var options = proxyTable[context]
39 |   if (typeof options === 'string') {
40 |     options = { target: options }
41 |   }
42 |   app.use(proxyMiddleware(context, options))
43 | })
44 | 
45 | // handle fallback for HTML5 history API
46 | app.use(require('connect-history-api-fallback')())
47 | 
48 | // serve webpack bundle output
49 | app.use(devMiddleware)
50 | 
51 | // enable hot-reload and state-preserving
52 | // compilation error display
53 | app.use(hotMiddleware)
54 | 
55 | // serve pure static assets
56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
57 | app.use(staticPath, express.static('./static'))
58 | 
59 | var uri = 'http://localhost:' + port
60 | 
61 | devMiddleware.waitUntilValid(function () {
62 |   console.log('> Listening at ' + uri + '\n')
63 | })
64 | 
65 | module.exports = app.listen(port, function (err) {
66 |   if (err) {
67 |     console.log(err)
68 |     return
69 |   }
70 | 
71 |   // when env is testing, don't need open it
72 |   if (process.env.NODE_ENV !== 'testing') {
73 |     opn(uri)
74 |   }
75 | })
76 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 |   // generate loader string to be used with extract text plugin
15 |   function generateLoaders (loaders) {
16 |     var sourceLoader = loaders.map(function (loader) {
17 |       var extraParamChar
18 |       if (/\?/.test(loader)) {
19 |         loader = loader.replace(/\?/, '-loader?')
20 |         extraParamChar = '&'
21 |       } else {
22 |         loader = loader + '-loader'
23 |         extraParamChar = '?'
24 |       }
25 |       return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
26 |     }).join('!')
27 | 
28 |     // Extract CSS when that option is specified
29 |     // (which is the case during production build)
30 |     if (options.extract) {
31 |       return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
32 |     } else {
33 |       return ['vue-style-loader', sourceLoader].join('!')
34 |     }
35 |   }
36 | 
37 |   // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
38 |   return {
39 |     css: generateLoaders(['css']),
40 |     postcss: generateLoaders(['css']),
41 |     less: generateLoaders(['css', 'less']),
42 |     sass: generateLoaders(['css', 'sass?indentedSyntax']),
43 |     scss: generateLoaders(['css', 'sass']),
44 |     stylus: generateLoaders(['css', 'stylus']),
45 |     styl: generateLoaders(['css', 'stylus'])
46 |   }
47 | }
48 | 
49 | // Generate loaders for standalone style files (outside of .vue)
50 | exports.styleLoaders = function (options) {
51 |   var output = []
52 |   var loaders = exports.cssLoaders(options)
53 |   for (var extension in loaders) {
54 |     var loader = loaders[extension]
55 |     output.push({
56 |       test: new RegExp('\\.' + extension + '$'),
57 |       loader: loader
58 |     })
59 |   }
60 |   return output
61 | }
62 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var utils = require('./utils')
 4 | var projectRoot = path.resolve(__dirname, '../')
 5 | 
 6 | var env = process.env.NODE_ENV
 7 | // check env & config/index.js to decide whether to enable CSS source maps for the
 8 | // various preprocessor loaders added to vue-loader at the end of this file
 9 | var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
10 | var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
11 | var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
12 | 
13 | module.exports = {
14 |   entry: {
15 |     app: './src/main.js'
16 |   },
17 |   output: {
18 |     path: config.build.assetsRoot,
19 |     publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
20 |     filename: '[name].js'
21 |   },
22 |   resolve: {
23 |     extensions: ['', '.js', '.vue', '.json', '.scss'],
24 |     fallback: [path.join(__dirname, '../node_modules')],
25 |     alias: {
26 |       'vue$': 'vue/dist/vue.common.js',
27 |       'src': path.resolve(__dirname, '../src'),
28 |       'assets': path.resolve(__dirname, '../src/assets'),
29 |       'components': path.resolve(__dirname, '../src/components')
30 |     }
31 |   },
32 |   resolveLoader: {
33 |     fallback: [path.join(__dirname, '../node_modules')]
34 |   },
35 |   module: {
36 |     loaders: [
37 |       {
38 |         test: /\.vue$/,
39 |         loader: 'vue'
40 |       },
41 |       {
42 |         test: /\.js$/,
43 |         loader: 'babel',
44 |         include: [
45 |           path.join(projectRoot, 'src')
46 |         ],
47 |         exclude: /node_modules/
48 |       },
49 |       {
50 |         test: /\.json$/,
51 |         loader: 'json'
52 |       },
53 |       {
54 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
55 |         loader: 'url',
56 |         query: {
57 |           limit: 10000,
58 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
59 |         }
60 |       },
61 |       {
62 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
63 |         loader: 'url',
64 |         query: {
65 |           limit: 10000,
66 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
67 |         }
68 |       }
69 |     ]
70 |   },
71 |   vue: {
72 |     loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
73 |     postcss: [
74 |       require('autoprefixer')({
75 |         browsers: ['> 5%']
76 |       })
77 |     ]
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var config = require('../config')
 2 | var webpack = require('webpack')
 3 | var merge = require('webpack-merge')
 4 | var utils = require('./utils')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrors = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // eval-source-map is faster for development
19 |   devtool: '#eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.optimize.OccurrenceOrderPlugin(),
26 |     new webpack.HotModuleReplacementPlugin(),
27 |     new webpack.NoErrorsPlugin(),
28 |     // https://github.com/ampedandwired/html-webpack-plugin
29 |     new HtmlWebpackPlugin({
30 |       filename: 'index.html',
31 |       template: 'index.html',
32 |       inject: true
33 |     }),
34 |     new FriendlyErrors()
35 |   ]
36 | })
37 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var utils = require('./utils')
 4 | var webpack = require('webpack')
 5 | var merge = require('webpack-merge')
 6 | var baseWebpackConfig = require('./webpack.base.conf')
 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 9 | var env = config.build.env
10 | 
11 | var webpackConfig = merge(baseWebpackConfig, {
12 |   module: {
13 |     loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
14 |   },
15 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
16 |   output: {
17 |     path: config.build.assetsRoot,
18 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
19 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
20 |   },
21 |   vue: {
22 |     loaders: utils.cssLoaders({
23 |       sourceMap: config.build.productionSourceMap,
24 |       extract: true
25 |     })
26 |   },
27 |   plugins: [
28 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
29 |     new webpack.DefinePlugin({
30 |       'process.env': env
31 |     }),
32 |     new webpack.optimize.UglifyJsPlugin({
33 |       compress: {
34 |         warnings: false
35 |       }
36 |     }),
37 |     new webpack.optimize.OccurrenceOrderPlugin(),
38 |     // extract css into its own file
39 |     new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
40 |     // generate dist index.html with correct asset hash for caching.
41 |     // you can customize output by editing /index.html
42 |     // see https://github.com/ampedandwired/html-webpack-plugin
43 |     new HtmlWebpackPlugin({
44 |       filename: config.build.index,
45 |       template: 'index.html',
46 |       inject: true,
47 |       minify: {
48 |         removeComments: true,
49 |         collapseWhitespace: true,
50 |         removeAttributeQuotes: true
51 |         // more options:
52 |         // https://github.com/kangax/html-minifier#options-quick-reference
53 |       },
54 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
55 |       chunksSortMode: 'dependency'
56 |     }),
57 |     // split vendor js into its own file
58 |     new webpack.optimize.CommonsChunkPlugin({
59 |       name: 'vendor',
60 |       minChunks: function (module, count) {
61 |         // any required modules inside node_modules are extracted to vendor
62 |         return (
63 |           module.resource &&
64 |           /\.js$/.test(module.resource) &&
65 |           module.resource.indexOf(
66 |             path.join(__dirname, '../node_modules')
67 |           ) === 0
68 |         )
69 |       }
70 |     }),
71 |     // extract webpack runtime and module manifest to its own file in order to
72 |     // prevent vendor hash from being updated whenever app bundle is updated
73 |     new webpack.optimize.CommonsChunkPlugin({
74 |       name: 'manifest',
75 |       chunks: ['vendor']
76 |     })
77 |   ]
78 | })
79 | 
80 | if (config.build.productionGzip) {
81 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
82 | 
83 |   webpackConfig.plugins.push(
84 |     new CompressionWebpackPlugin({
85 |       asset: '[path].gz[query]',
86 |       algorithm: 'gzip',
87 |       test: new RegExp(
88 |         '\\.(' +
89 |         config.build.productionGzipExtensions.join('|') +
90 |         ')$'
91 |       ),
92 |       threshold: 10240,
93 |       minRatio: 0.8
94 |     })
95 |   )
96 | }
97 | 
98 | module.exports = webpackConfig
99 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css']
18 |   },
19 |   dev: {
20 |     env: require('./dev.env'),
21 |     port: 5000,
22 |     assetsSubDirectory: 'static',
23 |     assetsPublicPath: '/',
24 |     proxyTable: {},
25 |     // CSS Sourcemaps off by default because relative paths are "buggy"
26 |     // with this option, according to the CSS-Loader README
27 |     // (https://github.com/webpack/css-loader#sourcemaps)
28 |     // In our experience, they generally work as expected,
29 |     // just be aware of this issue when enabling this option.
30 |     cssSourceMap: false
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
 6 |     <title>网易云音乐MV</title>
 7 |     <script>!function(d){function e(){var c=a.getBoundingClientRect().width;1===b&&(480<c&&(c=480),a.style.width=c+"px",a.style.margin="0 auto");a.style.fontSize=c/10+"px"}var a=d.document.documentElement,b=d.devicePixelRatio,f,b=2<b?3:1<b?2:1;a.setAttribute("data-dpr",b);d.addEventListener("resize",function(){clearTimeout(f);f=setTimeout(e,200)},!1);e()}(window);</script>
 8 |   </head>
 9 |   <body ontouchstart="">
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Vue2-MV",
 3 |   "version": "0.1.2",
 4 |   "description": "A Vue.js project",
 5 |   "author": "safaring",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "build": "node build/build.js"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.15.3",
13 |     "vue": "^2.1.0",
14 |     "vue-infinite-scroll": "^2.0.0",
15 |     "vue-router": "^2.2.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^6.4.0",
19 |     "babel-core": "^6.0.0",
20 |     "babel-loader": "^6.0.0",
21 |     "babel-plugin-transform-runtime": "^6.0.0",
22 |     "babel-preset-es2015": "^6.0.0",
23 |     "babel-preset-stage-2": "^6.0.0",
24 |     "babel-register": "^6.0.0",
25 |     "chalk": "^1.1.3",
26 |     "connect-history-api-fallback": "^1.1.0",
27 |     "css-loader": "^0.25.0",
28 |     "eventsource-polyfill": "^0.9.6",
29 |     "express": "^4.13.3",
30 |     "extract-text-webpack-plugin": "^1.0.1",
31 |     "file-loader": "^0.9.0",
32 |     "friendly-errors-webpack-plugin": "^1.1.2",
33 |     "function-bind": "^1.0.2",
34 |     "html-webpack-plugin": "^2.8.1",
35 |     "http-proxy-middleware": "^0.17.2",
36 |     "json-loader": "^0.5.4",
37 |     "node-sass": "^4.5.0",
38 |     "opn": "^4.0.2",
39 |     "ora": "^0.3.0",
40 |     "sass-loader": "^6.0.3",
41 |     "semver": "^5.3.0",
42 |     "shelljs": "^0.7.4",
43 |     "url-loader": "^0.5.7",
44 |     "vue-loader": "^10.0.0",
45 |     "vue-style-loader": "^1.0.0",
46 |     "vue-template-compiler": "^2.1.0",
47 |     "webpack": "^1.13.2",
48 |     "webpack-dev-middleware": "^1.8.3",
49 |     "webpack-hot-middleware": "^2.12.2",
50 |     "webpack-merge": "^0.14.1"
51 |   },
52 |   "engines": {
53 |     "node": ">= 4.0.0",
54 |     "npm": ">= 3.0.0"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <!-- <transition name="router-slide" mode="out-in"> -->
 4 |       <keep-alive>
 5 |         <router-view v-if="$route.meta.keepAlive"></router-view>
 6 |       </keep-alive>
 7 |       <router-view v-if="!$route.meta.keepAlive"></router-view>
 8 |     <!-- </transition> -->
 9 |   </div>
10 | </template>
11 | 
12 | <style lang="scss">
13 | @import 'src/style/base';
14 | 
15 | // .router-slide-enter-active, .router-slide-leave-active {
16 | //     transition: all .2s ease;
17 | // }
18 | // .router-slide-enter {
19 | //     transform: translate3d(1rem, 0, 0);
20 | //     opacity: .9;
21 | // }
22 | 
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	https://api.imjad.cn/cloudmusic/index.html
 3 | */
 4 | const baseUrl = 'https://api.imjad.cn/cloudmusic/'
 5 | 
 6 | export default {
 7 | 	getMv (id) {
 8 | 	  return baseUrl+'?type=mv&id='+id
 9 | 	},
10 | 	getMvList (key,offset) {
11 | 	  return baseUrl+'?type=search&search_type=1004&s='+key+'&offset='+offset
12 | 	},
13 | 	getMvComments (id) {
14 | 	  return baseUrl+'?type=comments&id='+id
15 | 	}
16 | }


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/safaring/Vue2-MV/132c7efb0528b4d7750ff195c45017b37b3e719c/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Comments.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="comment">
  3 |     <div class="comments" v-if="commentShow">
  4 |       <h3>精彩评论</h3>
  5 |       <ul>
  6 |         <li v-for="comment in comments">
  7 |           <img :src="comment.user.avatarUrl | userCover">
  8 |           <div class="cm-container">
  9 |             <div class="cm-name">
 10 |               <h4 class="pull-left">{{ comment.user.nickname }}</h4>
 11 |               <span class="pull-right">{{ comment.time | timeToDate }}</span>
 12 |             </div>
 13 |             <p class="cm-content">{{ comment.content }}</p>
 14 |           </div>
 15 |         </li>
 16 |       </ul>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import api from '../api'
 23 | 
 24 | export default {
 25 |   name: 'comment',
 26 |   props: ['mid'],
 27 |   data () {
 28 |     return {
 29 |       commentShow: false,
 30 |       comments: []
 31 |     }
 32 |   },
 33 |   beforeMount() {
 34 |     this.fetchData()
 35 |   },
 36 |   methods: {
 37 |     fetchData() {
 38 |       this.comments = []
 39 | 
 40 |       this.$http.get(api.getMvComments(this.mid)).then(response => {
 41 | 
 42 |         this.comments = response.data.comments
 43 | 
 44 |         if(this.comments.length > 0){
 45 |           this.commentShow = true
 46 |         }
 47 | 
 48 |         console.warn(response)
 49 |       }, response => {
 50 |         console.log('error')
 51 |       })
 52 |     }
 53 |   }
 54 | }
 55 | </script>
 56 | 
 57 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 58 | <style lang="scss" scoped>
 59 | @import "src/style/base/mixins";
 60 | 
 61 | .comments {
 62 |   margin: 0 2%;
 63 |   padding: .4rem 0;
 64 |   h3 {
 65 |     font-size: 13px;
 66 |     font-weight: normal;
 67 |     margin-bottom: .3rem;
 68 |   }
 69 |   li {
 70 |     position: relative;
 71 |     padding: .3rem 0 0 .9rem;
 72 |     img {
 73 |       position: absolute;
 74 |       top: .3rem;
 75 |       left: 0;
 76 |       width: .9rem;
 77 |       height: .9rem;
 78 |       border-radius: 50%;
 79 |     }
 80 |     .cm-container {
 81 |       margin: 0 2% 0 3%;
 82 |     }
 83 |     .cm-name {
 84 |       overflow: hidden;
 85 |       font-size: 12px;
 86 |       margin-bottom: .2rem;
 87 |       h4 {
 88 |         font-weight: normal;
 89 |         color: #666;
 90 |       }
 91 |       span {
 92 |         color: #999;
 93 |       }
 94 |     }
 95 |     .cm-content {
 96 |       font-size: 13px;
 97 |       line-height: 1.6;
 98 |       padding-bottom: .3rem;
 99 |     }
100 |   }
101 | }
102 | @include dpr-border(cm-content,#e9e9e9,bottom)
103 | </style>
104 | 


--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading" v-if="loading">
 3 |     <div :class="{'m-loading':1,'m-loading-dark':theme=='dark','m-loading-light':theme=='light'}" :style="{fontSize: size}"> 
 4 |       <span></span>
 5 |       <span></span>
 6 |       <span></span>
 7 |       <span></span>
 8 |       <span></span>
 9 |       <span></span>
10 |       <span></span>
11 |       <span></span>
12 |       <span></span>
13 |       <span></span>
14 |       <span></span>
15 |       <span></span>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'loading',
23 |   props: ['loading','theme','size']
24 | }
25 | </script>
26 | 
27 | <!-- Add "scoped" attribute to limit CSS to this component only -->
28 | <style lang="scss" scoped>
29 | .loading {
30 |   text-align: center;
31 |   padding: .3rem 0;
32 | }
33 | .m-loading {
34 |     position: relative;
35 |     display: inline-block;
36 |     width: 2.3125em;
37 |     height: 2.3125em;
38 |     vertical-align: middle;
39 |     font-size: .3rem;
40 |     span {
41 |       position: absolute;
42 |       will-change: background-color;
43 |       left: 1.10938em;
44 |       bottom: 0;
45 |       width: .09375em;
46 |       height: .5em;
47 |       border-radius: .2em;
48 |       background-color: transparent;
49 |       transform-origin: center -.65625em;
50 |       -webkit-backface-visibility: hidden;
51 |       @for $i from 1 to 13 {
52 |         &:nth-child(#{$i}) {
53 |           animation-delay: #{($i - 1)/10}s;
54 |           transform: rotate(#{($i - 1)*30}deg)
55 |         }
56 |       }
57 |   }
58 | }
59 | 
60 | .m-loading-dark span {
61 |     animation: loading-fade-dark 1.1s infinite linear
62 | }
63 | 
64 | @keyframes loading-fade-dark {
65 |     0% {
66 |         background-color: rgba(0,0,0,.6)
67 |     }
68 | 
69 |     100% {
70 |         background-color: rgba(0,0,0,0)
71 |     }
72 | }
73 | 
74 | .m-loading-light span {
75 |     animation: loading-fade-light 1.1s infinite linear
76 | }
77 | 
78 | @keyframes loading-fade-light {
79 |     0% {
80 |         background-color: rgba(255,255,255,.6)
81 |     }
82 | 
83 |     100% {
84 |         background-color: rgba(255,255,255,0)
85 |     }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/components/MvList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="list">
  3 |     <ul class="mvlist" v-infinite-scroll="fetchData" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
  4 |       <li v-for="mv in mvList">
  5 |         <router-link :to="{ name: 'mv', params: { id: mv.id, poster: mv.cover, mvName: mv.name }}">
  6 |           <div class="cover" :style="mv.cover | listCover"></div>
  7 |           <h4>{{ mv.name }}</h4>
  8 |           <p>{{ mv.artistName }}</p>
  9 |           <span>{{ mv.playCount | numberConversion }}</span>
 10 |         </router-link>
 11 |       </li>
 12 |     </ul>
 13 |     <loading :loading="loading" :theme="'dark'"></loading>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import api from '../api'
 19 | import Loading from '../components/Loading'
 20 | import infiniteScroll from 'vue-infinite-scroll'
 21 | 
 22 | export default {
 23 |   name: 'list',
 24 |   props: ['searchKeyword'],
 25 |   data () {
 26 |     return {
 27 |       mvList: [],
 28 |       offset: 0,
 29 |       busy: false,
 30 |       loading: false, 
 31 |       sKey: this.searchKeyword//组件内部不能直接修改prop的值
 32 |     }
 33 |   },
 34 |   beforeMount(){
 35 |     this.$root.$on('change-skey', val => {
 36 |       this.sKey = val
 37 |       console.log('---'+this.sKey)
 38 |       this.mvList = []
 39 |       this.offset = 0
 40 |       this.fetchData()
 41 |     })
 42 | 
 43 |     this.$root.$options.router.afterEach(route => {//通过router的变化，设置组件的infinite-scroll-disabled
 44 |       if(route.name == 'index'){
 45 |         this.busy = false
 46 |       }else {
 47 |         this.busy = true;
 48 |       }
 49 |     })
 50 |   },
 51 |   methods: {
 52 |     fetchData() {
 53 |       this.busy = true
 54 |       this.loading = true
 55 |       
 56 |       this.$http.get(api.getMvList(this.sKey,this.offset)).then(response => {
 57 |         if(response.data.result.mvs != undefined){
 58 |           this.mvList = this.mvList.concat(response.data.result.mvs)
 59 |           this.offset = this.mvList.length
 60 | 
 61 |           this.busy = false
 62 |           this.loading = false
 63 |         }else {
 64 |           this.loading = false
 65 |         }
 66 |            
 67 |       }, response => {
 68 |         console.log('error')
 69 |         this.busy = false
 70 |         this.loading = false
 71 |       })
 72 |     }
 73 |   },
 74 |   components: {
 75 |     Loading
 76 |   },
 77 |   directives: {
 78 |     infiniteScroll
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 84 | <style lang="scss" scoped>
 85 | @import "src/style/base/variables";
 86 | @import "src/style/base/mixins";
 87 | 
 88 | 
 89 | .list {
 90 |   padding: .3rem 0 .8rem;
 91 | }
 92 | 
 93 | .mvlist {
 94 |   margin: 0 2%;
 95 |   li {
 96 |     position: relative;
 97 |     display: inline-block;
 98 |     width: 49%;
 99 |     margin: .2rem 0;
100 |     &:nth-child(2n+1) {
101 |       margin-right: 2%;
102 |     }
103 |     .cover {
104 |       width: 100%;
105 |       height: 2.4rem;
106 |       background-position: center;
107 |       background-repeat: no-repeat;
108 |       background-size: 100%;
109 |     }
110 |     h4 {
111 |       color: $gray-darker;
112 |       font-weight: normal;
113 |       font-size: 14px;
114 |       @include line-clamp(1);
115 |     }
116 |     p {
117 |       font-size: 12px;
118 |       color: #999;
119 |     }
120 |     span {
121 |       position: absolute;
122 |       top: 5px;
123 |       right: 10px;
124 |       color: #fff;
125 |       font-size: 12px;
126 |     }
127 |   }
128 | }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/components/SearchInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="search">
 3 |     <div class="search-wrapper">
 4 |       <form @submit.prevent="submit" action="">
 5 |         <input type="search" placeholder="搜索" v-model="searchKeyword" @keyup.enter="hideKeyboard($event)">
 6 |       </form>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'search',
14 |   data () {
15 |     return {
16 |       searchKeyword: ''
17 |     }
18 |   },
19 |   methods: {
20 |     submit: function(){
21 |       this.$root.$emit('change-skey',this.searchKeyword)
22 |     },
23 |     hideKeyboard: function(ev){
24 |       ev.target.blur();
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <!-- Add "scoped" attribute to limit CSS to this component only -->
31 | <style lang="scss" scoped>
32 | .search-wrapper {
33 |   padding: .25rem .3rem;
34 |   background-color: #eee;
35 |   input {
36 |     border: 0;
37 |     width: 100%;
38 |     height: .9rem;
39 |     border-radius: 20px;
40 |     padding: 0 15px;
41 |     text-align: center;
42 |     &:focus {
43 |       text-align: left;
44 |     }
45 |   }
46 | }
47 | 
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/components/VideoPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="videoplayer">
  3 |     <div id="player" @click="showControls">
  4 |       <div class="controls" v-show="controlShow">
  5 |         <a href="javascript:;" class="switch play" @click.stop="play" v-show="!isPlay"></a>
  6 |         <a href="javascript:;" class="switch pause" @click.stop="play" v-show="isPlay && !loading"></a>
  7 |         <div class="v-loading">
  8 |           <loading :loading="loading" :theme="'light'" :size="'.45rem'"></loading>
  9 |         </div>
 10 |         <a href="javascript:;" v-show="isPlayShow" class="full" @click.stop="setFullScreen"></a>
 11 |         <div class="progress" ref="progress" v-show="isPlayShow">
 12 |           <span class="offset" :style="{width: videoProgress}"></span>
 13 |           <a href="javascript:;" ref="drager" :style="{left: videoProgress}" class="drager"></a>
 14 |         </div>
 15 |         <div class="timer" v-show="isPlayShow">
 16 |           <span class="current">{{ currentTime }}</span> /
 17 |           <span class="total">{{ duration }}</span>
 18 |         </div>
 19 |       </div>
 20 |       <div class="cover" :style="video.poster | listCover" v-if="coverShow"></div>
 21 |       <video id="video" ref="video" v-if="isPlayShow" webkit-playsinline playsinline>
 22 |         <source :type="video.type" :src="video.source" />
 23 |       </video>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import api from '../api'
 30 | import Loading from '../components/Loading'
 31 | 
 32 | export default {
 33 |   name: 'videoplayer',
 34 |   props: ['videoPoster','videoSource','videoType'],
 35 |   data () {
 36 |     return {
 37 |       isPlay: false,
 38 |       isPlayShow: false,
 39 |       controlShow: true,
 40 |       coverShow: true,
 41 |       loading: false,
 42 |       currentTime: '00:00',
 43 |       duration: '00:00',
 44 |       videoProgress: 0,
 45 |       dragerX: 0,
 46 |       $video: undefined,
 47 |       $drager: undefined,
 48 |       $progress: undefined,
 49 |       controlShowTimer: undefined,
 50 |       video: {
 51 |         type: this.videoType,
 52 |         source: this.videoSource,
 53 |         poster: this.videoPoster
 54 |       }
 55 |     }
 56 |   },
 57 |   components: {
 58 |     Loading
 59 |   },
 60 |   beforeMount(){
 61 |     this.$root.$on('change-poster', (val)=>{
 62 |       if(this.videoPoster == ''){
 63 |         this.video.poster = val;
 64 |       }
 65 |     })
 66 | 
 67 |     this.$root.$on('change-source', (val)=>{
 68 |       if(this.videoSource == ''){
 69 |         this.video.source = val;
 70 |       }
 71 |     })
 72 |   },
 73 |   methods: {
 74 |     countMinutes(num) {
 75 |       return this.formatConversion(parseInt((num/60)))+':'+this.formatConversion(parseInt(num%60));
 76 |     },
 77 |     formatConversion(num) {
 78 |       if(num < 10){
 79 |         return '0'+num.toString();
 80 |       }
 81 |       return num;
 82 |     },
 83 |     init() {
 84 |       this.$video = this.$refs.video
 85 |       this.$video.play()
 86 |       this.loading = true
 87 | 
 88 |       this.$video.addEventListener('loadedmetadata',()=>{//当视频的元数据(时长、尺寸)已加载时
 89 |         this.duration = this.countMinutes(this.$video.duration);
 90 |         this.currentTime = this.countMinutes(this.$video.currentTime);
 91 |       })
 92 | 
 93 |       this.$video.addEventListener('canplay',()=>{//当浏览器能够开始播放视频时
 94 |         this.controlShow = false
 95 |         this.loading = false
 96 |       })
 97 | 
 98 |       this.$video.addEventListener('timeupdate',()=>{//当目前的播放位置已更改时
 99 |         this.currentTime = this.countMinutes(this.$video.currentTime);
100 |         this.videoProgress = (this.$video.currentTime/this.$video.duration).toFixed(4)*100 + '%';
101 |       })
102 | 
103 |       this.$video.addEventListener('waiting',()=>{//当视频由于需要缓冲下一帧而停止
104 |         this.controlShow = true
105 |         this.loading = true
106 |       })
107 | 
108 |       this.$video.addEventListener('pause',()=>{//当视频已暂停时
109 |         this.controlShow = true
110 |         this.isPlay = false
111 |       })
112 | 
113 |       this.$video.addEventListener('play',()=>{//当视频已开始或不再暂停时
114 |         this.controlShow = false
115 |         this.isPlay = true
116 |       })
117 | 
118 |       this.$video.addEventListener('ended',()=>{//当目前的播放列表已结束时
119 |         this.controlShow = true
120 |         this.isPlay = false
121 |       })
122 | 
123 |       this.pressMove()
124 |     },
125 |     play() {
126 |       if(this.isPlay == false){
127 |         this.isPlay = true
128 |         
129 |         if(this.isPlayShow == false){
130 |           this.isPlayShow = true
131 |           this.coverShow = false
132 |           setTimeout(() => {
133 |             this.init();
134 |           },0)
135 |         }else {
136 |           this.$video.play()
137 |           this.controlShow = false
138 |         }
139 | 
140 |       }else {
141 |         clearTimeout(this.controlShowTimer)
142 |         this.controlShow = true
143 |         this.$refs.video.pause()
144 |         this.isPlay = false
145 |       }
146 |     },
147 |     pressMove() {//拖动更改视频进度
148 |       this.$drager = this.$refs.drager
149 |       this.$progress = this.$refs.progress
150 | 
151 |       this.$drager.addEventListener('touchstart',(event)=>{
152 |         clearTimeout(this.controlShowTimer)
153 |         this.dragerX = event.targetTouches[0].clientX
154 |       })
155 | 
156 |       this.$drager.addEventListener('touchmove',(event)=>{
157 |         this.$video.pause()
158 |         if(event.targetTouches[0].clientX < 0){
159 |           this.videoProgress = 0
160 |         }else if(event.targetTouches[0].clientX > this.$progress.offsetWidth){
161 |           this.videoProgress = '100%'
162 |         }else {
163 |           var dragerTime = (event.targetTouches[0].clientX/this.$progress.offsetWidth).toFixed(4)
164 |           this.videoProgress = dragerTime*100 + '%'
165 |           this.currentTime = this.countMinutes(dragerTime*this.$video.duration)
166 |         }
167 |         
168 |       })
169 | 
170 |       this.$drager.addEventListener('touchend',(event)=>{
171 |         var dragerTime = (event.changedTouches[0].clientX/this.$progress.offsetWidth).toFixed(4)*this.$video.duration
172 |         this.currentTime = this.countMinutes(dragerTime)
173 |         this.$video.currentTime = dragerTime.toFixed(0)
174 |         this.$video.play()
175 |       })
176 | 
177 |     },
178 |     showControls() {
179 |       clearTimeout(this.controlShowTimer)
180 |       if(this.isPlay == true && !this.loading){
181 |         if(this.controlShow == false){
182 |           this.controlShow = true
183 |           this.controlShowTimer = setTimeout(() => {
184 |             this.controlShow = false
185 |           },3000)
186 |         }else {
187 |           this.controlShow = false
188 |         }
189 |       } 
190 |     },
191 |     setFullScreen() {
192 |       if(this.$video.webkitEnterFullscreen != undefined){
193 |         this.$video.webkitEnterFullscreen()
194 |       }
195 |     }
196 |   }
197 | }
198 | </script>
199 | 
200 | <!-- Add "scoped" attribute to limit CSS to this component only -->
201 | <style lang="scss" scoped>
202 | @import "src/style/base/variables";
203 | @import "src/style/base/mixins";
204 | 
205 | %size {
206 |   width: 100%;
207 |   height: 5.5rem;
208 | }
209 | 
210 | #player {
211 |   position: fixed;
212 |   background-color: #000;
213 |   z-index: $zindex-player;
214 |   top: 0;
215 |   left: 0;
216 |   @extend %size;
217 |   .full {
218 |     position: absolute;
219 |     bottom: .3rem;
220 |     right: .32rem;
221 |     &:after {
222 |       @include arrow(right,1px,rgba(255,255,255,.75),.2666rem);
223 |     }
224 |     &:before {
225 |       @include arrow(left,1px,rgba(255,255,255,.75),.2666rem);
226 |     }
227 |   }
228 |   .timer {
229 |     position: absolute;
230 |     bottom: .3rem;
231 |     left: .3466rem;
232 |     color: rgba(255,255,255,.75);
233 |     font-size: .3733rem;
234 |     line-height: 1;
235 |   }
236 |   .progress {
237 |     position: absolute;
238 |     left: 0;
239 |     bottom: 0;
240 |     width: 9.64rem;
241 |     height: 1px;
242 |     &:before {
243 |       content:"";
244 |       position: absolute;
245 |       left: 0;
246 |       top: 0;
247 |       width: 10rem;
248 |       height: 1px;
249 |       background-color: rgba(255,255,255,.75);
250 |     }
251 |     .offset {
252 |       position: absolute;
253 |       left: 0;
254 |       top: 0;
255 |       width: 0;
256 |       height: 2px;
257 |       background-color: rgba(193,13,12,.75);
258 |       border-radius: 1px;
259 |     }
260 |     .drager {
261 |       position: absolute;
262 |       width: .36rem;
263 |       height: .36rem;
264 |       border-radius: 50%;
265 |       background-color: rgba(193,13,12,1);
266 |       bottom: -.18rem;
267 |       left: 0;
268 |     }
269 |   }
270 |   .cover {
271 |     position: absolute;
272 |     top: 0;
273 |     left: 0;
274 |     @extend %size;
275 |     background-position: center;
276 |     background-repeat: no-repeat;
277 |     background-size: cover;
278 |   }
279 |   .controls {
280 |     position: absolute;
281 |     top: 0;
282 |     left: 0;
283 |     z-index: 2;
284 |     @extend %size;
285 |     .v-loading {
286 |       position: absolute;
287 |       top: 50%;
288 |       left: 50%;
289 |       transform: translate(-50%,-50%);
290 |     }
291 |     .switch {
292 |       position: absolute;
293 |       left: 50%;
294 |       top: 50%;
295 |       margin: -.8rem 0 0 -.8rem;
296 |       width: 1.6rem;
297 |       height: 1.6rem;
298 |       background-color: rgba(0,0,0,.4);
299 |       border: 1px solid #fff;
300 |       border-radius: 50%;
301 |       &:active {
302 |         box-shadow: 2px 2px 6px rgba(255,255,255,.4), -2px -2px 6px rgba(255,255,255,.4);
303 |       }
304 |       &.play {
305 |         &:before {
306 |           content: '';
307 |           position: absolute;
308 |           left: 50%;
309 |           top: 50%;
310 |           margin: -.26rem 0 0 -.15rem;
311 |           font-size: 0;
312 |           line-height: 0;
313 |           width: 0;
314 |           height: 0;
315 |           border: 0 dashed transparent;
316 |           border-width: .3rem .5rem;
317 |           border-left-style: solid;
318 |           border-left-color: #fff;
319 |         }
320 |       }
321 |       &.pause {
322 |         &:before {
323 |           content: '';
324 |           position: absolute;
325 |           left: 50%;
326 |           top: 50%;
327 |           width: .4rem;
328 |           height: .6rem;
329 |           margin: -.3rem 0 0 -.2rem;
330 |           border: .1rem solid #fff;
331 |           border-width: 0 .1rem 0;
332 |         }
333 |       }
334 |     }
335 |   }
336 | }
337 | 
338 | #video {
339 |   @extend %size;
340 | }
341 | </style>
342 | 


--------------------------------------------------------------------------------
/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 * as filters from './util/filters'
 7 | 
 8 | import axios from 'axios'
 9 | 
10 | Vue.prototype.$http = axios
11 | 
12 | // register global utility filters.
13 | Object.keys(filters).forEach(key => {
14 |   Vue.filter(key, filters[key])
15 | })
16 | 
17 | new Vue({
18 |   el: '#app',
19 |   template: '<App/>',
20 |   components: { App },
21 |   router
22 | })
23 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index">
 3 |     <div class="search-index">
 4 |       <search-input></search-input>
 5 |     </div>
 6 |     <mv-list :search-keyword="searchKeyword"></mv-list>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import MvList from '../components/MvList'
12 | import SearchInput from '../components/SearchInput'
13 | 
14 | export default {
15 |   name: 'index',
16 |   components: {
17 |     SearchInput,
18 |     MvList
19 |   },
20 |   data () {
21 |     return {
22 |       searchKeyword: 'taylor'
23 |     }
24 |   },
25 |   activated() {
26 |     document.title = '网易云音乐MV'
27 |   }
28 | }
29 | </script>
30 | 
31 | <!-- Add "scoped" attribute to limit CSS to this component only -->
32 | <style lang="scss" scoped>
33 | .index {
34 |   padding-top: 1.4rem;
35 | }
36 | .search-index {
37 |   width: 100%;
38 |   position: fixed;
39 |   z-index: 2;
40 |   top: 0;
41 |   left: 0;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/pages/MV.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mv">
  3 |     <video-player :video-poster="this.$route.params.poster?this.$route.params.poster:video.poster" :video-source="video.source" :video-type="video.type"></video-player>
  4 |     <div class="player-detail">
  5 |       <h3>{{ this.$route.params.mvName?this.$route.params.mvName:mvDetail.name }}</h3>
  6 |       <div class="pd-s1">
  7 |         <a href="javascript:;" class="pull-left">歌手：{{ mvDetail.artistName }}</a>
  8 |         <span class="pull-right">播放：{{ mvDetail.playCount | numberConversion }}</span>
  9 |       </div>
 10 |       <p class="pd-time">发行：{{ mvDetail.publishTime }}</p>
 11 |       <p class="pd-intro">{{ mvDetail.desc }}</p>
 12 |     </div>
 13 |     <comments :mid="this.$route.params.id"></comments>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import api from '../api'
 19 | import VideoPlayer from '../components/VideoPlayer'
 20 | const Comments = resolve => require(['../components/Comments'], resolve)//异步加载评论模块
 21 | 
 22 | export default {
 23 |   name: 'mv',
 24 |   components: {
 25 |     VideoPlayer,
 26 |     Comments
 27 |   },
 28 |   data () {
 29 |     return {
 30 |       mvDetail: [],
 31 |       video: {
 32 |         type: 'video/mp4',
 33 |         source: '',
 34 |         poster: ''
 35 |       }
 36 |     }
 37 |   },
 38 |   beforeMount() {
 39 |     this.fetchData()
 40 |   },
 41 |   methods: {
 42 |     fetchData() {
 43 |       this.mvDetail = []
 44 | 
 45 |       this.$http.get(api.getMv(this.$route.params.id)).then(response => {
 46 | 
 47 |         let data = response.data.data
 48 | 
 49 |         this.mvDetail = data
 50 | 
 51 |         this.video.poster = data.cover
 52 |         this.mvDetail.name = data.name
 53 | 
 54 |         this.$root.$emit('change-poster',this.video.poster)
 55 | 
 56 |         document.title = data.name
 57 | 
 58 |         if(data.brs[480] != undefined){
 59 |           this.video.source = data.brs[480];//'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
 60 |         }else {
 61 |           this.video.source = data.brs[240];
 62 |         }
 63 | 
 64 |         this.$root.$emit('change-source',this.video.source)
 65 | 
 66 |         //console.warn(response)
 67 |       }, response => {
 68 |         console.log('error')
 69 |       })
 70 |     }
 71 |   }
 72 | }
 73 | </script>
 74 | 
 75 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 76 | <style lang="scss" scoped>
 77 | @import "src/style/base/variables";
 78 | @import "src/style/base/mixins";
 79 | 
 80 | %size {
 81 |   width: 100%;
 82 |   height: 5.5rem;
 83 | }
 84 | 
 85 | .mv {
 86 |   padding-top: 5.5rem;
 87 | }
 88 | 
 89 | .player-detail {
 90 |   margin: 0 2%;
 91 |   padding: .4rem 0;
 92 |   font-size: 13px;
 93 |   h3 {
 94 |     font-weight: normal;
 95 |     font-size: 18px;
 96 |     line-height: 1.2;
 97 |   }
 98 |   .pd-s1 {
 99 |     overflow: hidden;
100 |     margin: .3rem 0;
101 |     span {
102 |       color: #999;
103 |     }
104 |   }
105 |   .pd-time {
106 |     color: #999;
107 |   }
108 |   .pd-intro {
109 |     margin-top: .3rem;
110 |     color: $gray-light;
111 |     line-height: 1.8;
112 |   }
113 | }
114 | 
115 | @include dpr-border(player-detail,#ddd,bottom)
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | import Index from '../pages/Index'
 7 | import MV from '../pages/MV'
 8 | 
 9 | //const Mplayer = resolve => require(['../components/Mplayer'], resolve)
10 | 
11 | export default new Router({
12 |   //mode: 'history',
13 |   scrollBehavior (to, from, savedPosition) {
14 |     if (savedPosition) {
15 |       return savedPosition
16 |     } else {
17 |       return { x: 0, y: 0 }
18 |     }
19 |   },
20 |   routes: [
21 |     { path: '/', component: Index, name: 'index', meta: {keepAlive: true} },
22 |     { path: '/mv/:id', component: MV, name: 'mv', meta: {keepAlive: false} }
23 |   ]
24 | })
25 | 


--------------------------------------------------------------------------------
/src/style/base.scss:
--------------------------------------------------------------------------------
 1 | // Core variables and mixins
 2 | @import 'base/variables';
 3 | @import 'base/mixins';
 4 | @import 'base/function';
 5 | 
 6 | // Reset
 7 | @import 'base/reset';
 8 | 
 9 | // Core CSS
10 | @import 'base/type';
11 | @import 'base/buttons';
12 | 
13 | // Components
14 | 
15 | // Utility classes
16 | @import 'base/utilities';
17 | 
18 | 


--------------------------------------------------------------------------------
/src/style/base/_buttons.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Buttons
 3 | // --------------------------------------------------
 4 | 
 5 | 
 6 | // Base styles
 7 | // --------------------------------------------------
 8 | 
 9 | .btn {
10 |     font-size: 18px;
11 |     line-height: pxToRem(84px);
12 | 
13 |     display: inline-block;
14 | 
15 |     width: 100%;
16 |     height: pxToRem(84px);
17 | 
18 |     text-align: center;
19 |     white-space: nowrap;
20 | 
21 |     color: #490308;
22 |     border-radius: 5px;
23 |     background: -webkit-linear-gradient(top, #ffe500, #ffb200);
24 |     background:         linear-gradient(top, #ffe500, #ffb200);
25 | }
26 | 
27 | .btn:active {
28 |     background: #fc0;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/style/base/_function.scss:
--------------------------------------------------------------------------------
1 | 
2 | //px转rem 默认为iPhone6的设计稿(375px/10)
3 | @function pxToRem($px) {
4 |     @return $px/75px*1rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/style/base/_mixins.scss:
--------------------------------------------------------------------------------
  1 | // Mixins
  2 | // --------------------------------------------------
  3 | 
  4 | //多行文字截断
  5 | @mixin line-clamp($lines) {
  6 |     display: -webkit-box;
  7 |     overflow: hidden;
  8 | 
  9 |     text-overflow: ellipsis;
 10 | 
 11 |     -webkit-line-clamp: $lines; //显示的行数
 12 |     -webkit-box-orient: vertical;
 13 | }
 14 | 
 15 | 
 16 | //箭头>
 17 | @mixin arrow($direciton:right,$borderWidth:1px,$color:#ddd,$size:8px) {
 18 |     display: inline-block;
 19 | 
 20 |     width: $size;
 21 |     height: $size;
 22 | 
 23 |     content: '';
 24 |     vertical-align: middle;
 25 | 
 26 |     border: $borderWidth solid $color;
 27 |     border-top: none;
 28 |     border-left: none;
 29 |     @if $direciton == 'left' {
 30 |         -webkit-transform: rotate(135deg);
 31 |                 transform: rotate(135deg);
 32 |     } @else if $direciton == 'right' {
 33 |         -webkit-transform: rotate(-45deg);
 34 |                 transform: rotate(-45deg);
 35 |     } @else if $direciton == 'top' {
 36 |         -webkit-transform: rotate(-135deg);
 37 |                 transform: rotate(-135deg);
 38 |     } @else if $direciton == 'bottom' {
 39 |         -webkit-transform: rotate(45deg);
 40 |                 transform: rotate(45deg);
 41 |     }
 42 | }
 43 | 
 44 | //渐变border
 45 | @mixin gradient-border($r,$g,$b,$width: 1px,$postion:bottom) {
 46 |     background-image: -webkit-linear-gradient(left, rgba($r,$g,$b,0), rgba($r,$g,$b,1), rgba($r,$g,$b,0));//采用rgba，兼容iOS
 47 |     background-image:         linear-gradient(to right, rgba($r,$g,$b,0), rgba($r,$g,$b,1), rgba($r,$g,$b,0));
 48 |     background-repeat: no-repeat;
 49 |     background-size: 100% 1px;
 50 |     @if $postion == 'top' {
 51 |         background-position: 100% 0;
 52 |     } @else if $postion == 'bottom' {
 53 |         background-position: 0 100%;
 54 |     }
 55 | }
 56 | 
 57 | //三角形
 58 | @mixin triangle($direciton,$color,$width: 6px) {
 59 |     font-size: 0;
 60 |     line-height: 0;
 61 | 
 62 |     display: inline-block;
 63 | 
 64 |     width: 0;
 65 |     height: 0;
 66 | 
 67 |     vertical-align: -2px;
 68 | 
 69 |     border: 0 dashed transparent;
 70 |     border-width: $width;
 71 |     @if $direciton == 'left' {
 72 |         border-right-style: solid;
 73 |         border-right-color: $color;
 74 |     } @else if $direciton == 'right' {
 75 |         border-left-style: solid;
 76 |         border-left-color: $color;
 77 |     } @else if $direciton == 'top' {
 78 |         border-bottom-style: solid;
 79 |         border-bottom-color: $color;
 80 |     } @else if $direciton == 'bottom' {
 81 |         border-top-style: solid;
 82 |         border-top-color: $color;
 83 |     } @else if $direciton == 'left-top' {
 84 |         //◤左上角 
 85 |         border-top-style: solid;
 86 |         border-top-color: $color;
 87 |         border-left-width: 0;
 88 |     } @else if $direciton == 'left-bottom' {
 89 |         //◣左下角
 90 |         border-bottom-style: solid;
 91 |         border-bottom-color: $color;
 92 |         border-left-width: 0;
 93 |     } @else if $direciton == 'right-top' {
 94 |         //◥右上角
 95 |         border-top-style: solid;
 96 |         border-top-color: $color;
 97 |         border-right-width: 0;
 98 |     } @else if $direciton == 'right-bottom' {
 99 |         border-right-width: 0;
100 |         //◢右下角
101 |         border-bottom-style: solid;
102 |         border-bottom-color: $color;
103 |     }
104 | }
105 | 
106 | //根据dpr缩放border，解决retina屏幕1px border问题
107 | @mixin dpr-border($class, $color, $position:all, $radius:0) {
108 |     %border {
109 |         @if $position == 'all' {
110 |             border: 1px solid $color;
111 |         } @else if $position == 'right' {
112 |             border-right:  1px solid $color;
113 |         } @else if $position == 'left' {
114 |             border-left:  1px solid $color;
115 |         } @else if $position == 'top' {
116 |             border-top:  1px solid $color;
117 |         } @else if $position == 'bottom' {
118 |             border-bottom:  1px solid $color;
119 |         }
120 |     }
121 |     .#{$class} {
122 |         @extend %border;
123 |         border-radius: $radius;
124 |         position: relative;
125 |     }
126 |     $dpr: (2, 3);
127 |     @each $value in $dpr {
128 |         [data-dpr^='#{$value}'] .#{$class} {
129 |             border: none;
130 |             $rValue: 1/$value;
131 |             &:before{
132 |                 content: ' ';
133 |                 position: absolute;
134 |                 left: 0;
135 |                 top: 0;
136 |                 width: 100%*$value;
137 |                 height: 100%*$value;
138 |                 @extend %border;
139 |                 border-radius: $radius;
140 |                 -webkit-transform: scale($rValue) translate(-50% * ($value - 1),-50% * ($value - 1));
141 |                         transform: scale($rValue) translate(-50% * ($value - 1),-50% * ($value - 1));
142 |             }
143 |         }
144 |     }
145 |     
146 | }
147 | 


--------------------------------------------------------------------------------
/src/style/base/_reset.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | * {
 3 |     -webkit-box-sizing: border-box;
 4 |             box-sizing: border-box;
 5 |     margin: 0;
 6 |     padding: 0;
 7 | 
 8 |     outline: none;
 9 | 
10 |     -webkit-tap-highlight-color: rgba(0,0,0,0);//去除点击高亮
11 |     -webkit-tap-highlight-color: transparent;
12 |     -webkit-touch-callout: none;//iOS下禁用系统默认菜单
13 | }
14 | 
15 | html,
16 | body {
17 |     height: 100%;
18 | }
19 | 
20 | html {
21 |     -webkit-text-size-adjust: 100%; //防止iPhone在坚屏转向横屏时放大文字
22 | }
23 | 
24 | body {
25 |     font-family: $font-family-base;
26 |     font-size: $font-size-base;
27 |     line-height: $line-height-base;
28 | 
29 |     color: $text-color;
30 |     background: $body-color;
31 | 
32 |     -webkit-overflow-scrolling: touch;
33 | }
34 | 
35 | *:before,
36 | *:after {
37 |     -webkit-box-sizing: border-box;
38 |             box-sizing: border-box;
39 | }
40 | 
41 | a img {
42 |     border: 0;
43 | }
44 | 
45 | a {
46 |     text-decoration: none;
47 |     color: $link-color;
48 | }
49 | 
50 | ul {
51 |     list-style: none;
52 | }
53 | 
54 | // Forms
55 | // ==========================================================================
56 | 
57 | input,
58 | textarea {
59 |     -webkit-user-select: text;
60 | 
61 |     -webkit-appearance: none;//去除默认样式
62 | }
63 | 
64 | button,
65 | input,
66 | optgroup,
67 | select,
68 | textarea {
69 |     font: inherit; // 2
70 | 
71 |     color: inherit; // 1
72 | }
73 | 
74 | button:focus,
75 | input:focus {
76 |     outline: 0;
77 | }
78 | 
79 | 
80 | // Tables
81 | // ==========================================================================
82 | 
83 | //
84 | // Remove most spacing between table cells.
85 | //
86 | 
87 | table {
88 |     border-spacing: 0;
89 |     border-collapse: collapse;
90 | }
91 | 
92 | td,
93 | th {
94 |     padding: 0;
95 | }
96 | 


--------------------------------------------------------------------------------
/src/style/base/_type.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Typography
 3 | // --------------------------------------------------
 4 | 
 5 | // Alignment
 6 | .text-left {
 7 |     text-align: left;
 8 | }
 9 | .text-right {
10 |     text-align: right;
11 | }
12 | .text-center {
13 |     text-align: center;
14 | }
15 | .text-justify {
16 |     text-align: justify;
17 | }
18 | .text-nowrap {
19 |     white-space: nowrap;
20 | }
21 | 
22 | // Transformation
23 | .text-lowercase {
24 |     text-transform: lowercase;
25 | }
26 | .text-uppercase {
27 |     text-transform: uppercase;
28 | }
29 | .text-capitalize {
30 |     text-transform: capitalize;
31 | }
32 | 
33 | //单行文字超出显示省略号(需设置宽高)
34 | .text-overflow {
35 |     overflow: hidden;
36 | 
37 |     white-space: nowrap;
38 |     text-overflow: ellipsis;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/style/base/_utilities.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Utility classes
 3 | // --------------------------------------------------
 4 | 
 5 | 
 6 | // Floats
 7 | // -------------------------
 8 | 
 9 | .pull-right {
10 |     float: right !important;
11 | }
12 | .pull-left {
13 |     float: left !important;
14 | }
15 | 
16 | // Toggling content
17 | // -------------------------
18 | 
19 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
20 | .hide {
21 |     display: none !important;
22 | }
23 | .show {
24 |     display: block !important;
25 | }
26 | .invisible {
27 |     visibility: hidden;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/style/base/_variables.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // Variables
  3 | // --------------------------------------------------
  4 | 
  5 | //== Colors
  6 | 
  7 | $gray-base:              #000 !default;
  8 | $gray-darker:            lighten($gray-base, 13.5%) !default; // #222
  9 | $gray-dark:              lighten($gray-base, 20%) !default;   // #333
 10 | $gray:                   lighten($gray-base, 33.5%) !default; // #555
 11 | $gray-light:             lighten($gray-base, 46.7%) !default; // #777
 12 | $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 13 | 
 14 | $brand-primary:         #4183c4 !default; 
 15 | $brand-success:         #5cb85c !default;
 16 | $brand-info:            #5bc0de !default;
 17 | $brand-warning:         #f0ad4e !default;
 18 | $brand-danger:          #d9534f !default;
 19 | 
 20 | 
 21 | //== Scaffolding
 22 | //
 23 | //## Settings for some of the most global styles.
 24 | 
 25 | //** Background color for `<body>`.
 26 | $body-color:               #fff !default;
 27 | //** Global text color on `<body>`.
 28 | $text-color:            $gray-dark !default;
 29 | 
 30 | //** Global textual link color.
 31 | $link-color:            $brand-primary !default;
 32 | //** Link hover color set via `darken()` function.
 33 | $link-hover-color:      darken($link-color, 15%) !default;
 34 | //** Link hover decoration.
 35 | $link-hover-decoration: underline !default;
 36 | 
 37 | 
 38 | //== Typography
 39 | //
 40 | //## Font, line-height, and color for body text, headings, and more.
 41 | 
 42 | $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 43 | //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 44 | $font-family-base:        $font-family-sans-serif !default;
 45 | 
 46 | $font-size-base:          14px !default;
 47 | $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 48 | $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 49 | 
 50 | $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 51 | $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 52 | $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 53 | $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 54 | $font-size-h5:            $font-size-base !default;
 55 | $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 56 | 
 57 | //** Unit-less `line-height` for use in components like buttons.
 58 | $line-height-base:        1.4 !default; 
 59 | 
 60 | 
 61 | 
 62 | 
 63 | //== Components
 64 | //
 65 | 
 66 | $border-radius-base:        3px !default;
 67 | $border-radius-large:       5px !default;
 68 | $border-radius-small:       2px !default;
 69 | 
 70 | 
 71 | //== Buttons
 72 | //
 73 | //## For each of Bootstrap's buttons, define text, background and border color.
 74 | 
 75 | $btn-font-weight:                normal !default;
 76 | 
 77 | $btn-default-color:              #333 !default;
 78 | $btn-default-bg:                 #fff !default;
 79 | $btn-default-border:             #ddd !default;
 80 | 
 81 | $btn-primary-color:              #fff !default;
 82 | $btn-primary-bg:                 $brand-primary !default;
 83 | $btn-primary-border:             darken($btn-primary-bg, 2%) !default;
 84 | 
 85 | $btn-success-color:              #fff !default;
 86 | $btn-success-bg:                 $brand-success !default;
 87 | $btn-success-border:             darken($btn-success-bg, 2%) !default;
 88 | 
 89 | $btn-info-color:                 #fff !default;
 90 | $btn-info-bg:                    $brand-info !default;
 91 | $btn-info-border:                darken($btn-info-bg, 2%) !default;
 92 | 
 93 | $btn-warning-color:              #fff !default;
 94 | $btn-warning-bg:                 $brand-warning !default;
 95 | $btn-warning-border:             darken($btn-warning-bg, 2%) !default;
 96 | 
 97 | $btn-danger-color:               #fff !default;
 98 | $btn-danger-bg:                  $brand-danger !default;
 99 | $btn-danger-border:              darken($btn-danger-bg, 2%) !default;
100 | 
101 | $btn-link-disabled-color:        $gray-light !default;
102 | 
103 | 
104 | 
105 | //-- Z-index master list
106 | //
107 | // Warning: Avoid customizing these values. They're used for a bird's eye view
108 | // of components dependent on the z-axis and are designed to all work together.
109 | //
110 | // Note: These variables are not generated into the Customizer.
111 | 
112 | $zindex-player:			   1000 !default;
113 | $zindex-mask:			   1010 !default;
114 | $zindex-modal:             1020 !default;
115 | $zindex-toast:             1030 !default;
116 | 
117 | 


--------------------------------------------------------------------------------
/src/util/filters.js:
--------------------------------------------------------------------------------
 1 | export function listCover (url) {
 2 |   return 'background-image:url('+url+'?param=300y180)'
 3 | }
 4 | 
 5 | export function playerCover (url) {
 6 |   return 'background-image:url('+url+'?param=480y263)'
 7 | }
 8 | 
 9 | export function userCover (url) {
10 |   return url+'?param=50*50'
11 | }
12 | 
13 | export function numberConversion (num) {
14 |   var n = parseInt(num/10000)
15 |   if(n == 0){
16 |   	return num
17 |   }else {
18 |   	return n+'万'
19 |   }
20 | }
21 | 
22 | export function timeToDate (time) {
23 |   var unixTimestamp = new Date( time ) ;
24 |   return unixTimestamp.toLocaleString();
25 | }
26 | 
27 | Date.prototype.toLocaleString = function() {
28 |   if(this.getFullYear() == (new Date()).getFullYear()){
29 |   	return (this.getMonth() + 1) + "月" + this.getDate() + "日"
30 |   }else {
31 |   	return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日"
32 |   }
33 | };
34 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/safaring/Vue2-MV/132c7efb0528b4d7750ff195c45017b37b3e719c/static/.gitkeep


--------------------------------------------------------------------------------