[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    [\"env\", { \"modules\": false }],\n    \"stage-2\"\n  ],\n  \"plugins\": [\"transform-runtime\"],\n  \"comments\": false,\n  \"env\": {\n    \"test\": {\n      \"presets\": [\"env\", \"stage-2\"],\n      \"plugins\": [ \"istanbul\" ]\n    }\n  }\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules/\ndist/\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.idea/\n.history\n.vscode\npackage-lock.json\n"
  },
  {
    "path": ".postcssrc.js",
    "content": "// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n  \"plugins\": {\n    // to edit target browsers: use \"browserlist\" field in package.json\n    \"autoprefixer\": {}\n  }\n}\n"
  },
  {
    "path": "README.md",
    "content": "# vue版网易云音乐\n\n> api：ap使用的是一个开源的nodejs封装的网易云音乐api，[地址](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85)\n\n> [预览地址](http://39.108.14.248/music)（国外的服务器，估计有点慢）\n\n## 使用步骤\n\n``` bash\n# 下载\ngit clone git@github.com:tgxhx/vue-music.git\n\n# 安装依赖\nnpm install\n\n# 运行开发环境\nnpm run dev\n\n# 构建生产环境\nnpm run build\n\n```\n\n## 技术栈\n + vue2：基础框架\n + vue-router2：路由跳转\n + vuex：全局数据管理\n + es6：采用部分es6特性，大大简化了写法\n + webpack：vue-cli基于webpack，修改了部分配置\n + axios：基于Promise的http库，用来请求数据\n + scss：写起css来十分方便，需要安装sass-loader，另外使用自定义其中的自定义函数配合rem来适配移动端设备简直不要太方便\n + flex：弹性布局，在移动端兼容性较好，写各种布局非常方便\n + [vue-material](https://github.com/vuematerial/vue-material)：一个Android上material design风格的组件库\n\n## 说明\n1. 这个项目大小组件大概二十几个，目前还未完工，以后还会继续更新，目标是还原整个网易云音乐（虽然不知道什么时候能填完坑o(╯□╰)o）。\n2. 关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，/root/index/recommed，大概这样，[点击查看](https://github.com/tgxhx/vue-music/blob/e43c4975e42b93b6ccf5d8609687879a589d4d8f/src/router/index.js)。\n3. 关于体会，写到这个项目也算是对vue全家桶比较熟了，体会就是，不论是简单的复杂的项目，只要分割成一个个组件再拼起来，也没什么难的，组件之间通信又有vuex，也是非常简单的，总之就是熟能生巧。\n4. 关于难点，对于自己来说，audio标签以前没有接触过，有点麻烦，不过还算有[相关文档](http://caibaojian.com/html5-audio.html)；歌词滚动，参考[这里](http://www.brafox.com/post/2015/HTML5/js%E8%A7%A3%E6%9E%90lrc%E6%AD%8C%E8%AF%8D-%E5%88%B6%E4%BD%9C%E6%BB%9A%E5%8A%A8%E6%AD%8C%E8%AF%8D.html)，部分歌曲还是有点问题，待解决;播放器背景图，这个当时考虑了很久，因为网易云音乐的播放器背景图就是当前歌曲的专辑图，还是模糊效果，最后实现方式是在当前组件的二级div设置当前歌曲的背景图，大小覆盖父元素，为防止第一次播放或者切歌的时候没有图，在组件的根元素也设置一张背景默认图，具体可以[点击查看](https://github.com/tgxhx/vue-music/blob/771218f2929de6b64a34c62597777a4fc0b6ed6e/src/components/Player.vue)；当前歌曲在播放列表中的索引获取，通过es5中数组的findIndex方法，找到当前歌曲的id在数组中的位置，具体可以[点击查看](https://github.com/tgxhx/vue-music/blob/e43c4975e42b93b6ccf5d8609687879a589d4d8f/src/components/PlayList.vue)。\n5. 关于打包后的资源路径，比如要放在二级目录www.xxx.com/music，那么修改config/index.js中的assetsPublicPath: '/music/'即可。\n6. 关于移动设备适配，我使用的是js动态设置html元素font-size的方式，页面元素使用rem，这样可达到在不同设备下显示内容基本一样的效果，具体可以[点击](https://segmentfault.com/a/1190000008721148)，使用方式比如width:100px;可以写成width:pr(100)。\n7. 关于图标，使用的是淘宝的iconfont字体图标方案，相比于使用图片图标有许多优势，比如任意缩放、改变颜色、响应式适配设备等等，具体可以参考[这篇文章](https://www.w3cplus.com/css3/icon-fonts.html)。\n\n\n## 功能\n- [x] 首页歌单推荐\n- [x] 歌单详情\n- [x] 播放器\n- [x] 播放暂停\n- [x] 播放模式切歌（顺序和随机）\n- [ ] 歌词滚动（待修改）\n- [x] 歌曲拖动\n- [x] 播放器底部背景\n- [x] 播放底栏\n- [x] 底栏歌词同步\n- [x] 播放列表\n- [x] 歌曲评论\n- [x] 搜索推荐\n- [x] 搜索分类\n\n## 部分截图\n![](http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlyxi2mrj20ad0icn43.jpg)![](http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlz0lmr2j20ac0idmzv.jpg)\n![](http://wx2.sinaimg.cn/large/7b9a6229ly1fhwlz4rv98j20ac0ic78c.jpg)![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlz76gf8j20ac0idq4u.jpg)\n![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzckmt6j20ac0idtdf.jpg)![](http://wx2.sinaimg.cn/mw690/7b9a6229ly1fhwlzevul9j20ac0ic76k.jpg)\n![](http://wx3.sinaimg.cn/mw690/7b9a6229ly1fhwlzgb1uvj20ad0id0tp.jpg)![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzlcu5ej20ac0idq6w.jpg)\n"
  },
  {
    "path": "build/build.js",
    "content": "require('./check-versions')()\n\nprocess.env.NODE_ENV = 'production'\n\nvar ora = require('ora')\nvar rm = require('rimraf')\nvar path = require('path')\nvar chalk = require('chalk')\nvar webpack = require('webpack')\nvar config = require('../config')\nvar webpackConfig = require('./webpack.prod.conf')\n\nvar spinner = ora('building for production...')\nspinner.start()\n\nrm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {\n  if (err) throw err\n  webpack(webpackConfig, function (err, stats) {\n    spinner.stop()\n    if (err) throw err\n    process.stdout.write(stats.toString({\n      colors: true,\n      modules: false,\n      children: false,\n      chunks: false,\n      chunkModules: false\n    }) + '\\n\\n')\n\n    console.log(chalk.cyan('  Build complete.\\n'))\n    console.log(chalk.yellow(\n      '  Tip: built files are meant to be served over an HTTP server.\\n' +\n      '  Opening index.html over file:// won\\'t work.\\n'\n    ))\n  })\n})\n"
  },
  {
    "path": "build/check-versions.js",
    "content": "var chalk = require('chalk')\nvar semver = require('semver')\nvar packageConfig = require('../package.json')\nvar shell = require('shelljs')\nfunction exec (cmd) {\n  return require('child_process').execSync(cmd).toString().trim()\n}\n\nvar versionRequirements = [\n  {\n    name: 'node',\n    currentVersion: semver.clean(process.version),\n    versionRequirement: packageConfig.engines.node\n  },\n]\n\nif (shell.which('npm')) {\n  versionRequirements.push({\n    name: 'npm',\n    currentVersion: exec('npm --version'),\n    versionRequirement: packageConfig.engines.npm\n  })\n}\n\nmodule.exports = function () {\n  var warnings = []\n  for (var i = 0; i < versionRequirements.length; i++) {\n    var mod = versionRequirements[i]\n    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {\n      warnings.push(mod.name + ': ' +\n        chalk.red(mod.currentVersion) + ' should be ' +\n        chalk.green(mod.versionRequirement)\n      )\n    }\n  }\n\n  if (warnings.length) {\n    console.log('')\n    console.log(chalk.yellow('To use this template, you must update following to modules:'))\n    console.log()\n    for (var i = 0; i < warnings.length; i++) {\n      var warning = warnings[i]\n      console.log('  ' + warning)\n    }\n    console.log()\n    process.exit(1)\n  }\n}\n"
  },
  {
    "path": "build/dev-client.js",
    "content": "/* eslint-disable */\nrequire('eventsource-polyfill')\nvar hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')\n\nhotClient.subscribe(function (event) {\n  if (event.action === 'reload') {\n    window.location.reload()\n  }\n})\n"
  },
  {
    "path": "build/dev-server.js",
    "content": "require('./check-versions')()\n\nvar config = require('../config')\nif (!process.env.NODE_ENV) {\n  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)\n}\n\nvar opn = require('opn')\nvar path = require('path')\nvar express = require('express')\nvar webpack = require('webpack')\nvar proxyMiddleware = require('http-proxy-middleware')\nvar webpackConfig = require('./webpack.dev.conf')\n\n// default port where dev server listens for incoming traffic\nvar port = process.env.PORT || config.dev.port\n// automatically open browser, if not set will be false\nvar autoOpenBrowser = !!config.dev.autoOpenBrowser\n// Define HTTP proxies to your custom API backend\n// https://github.com/chimurai/http-proxy-middleware\nvar proxyTable = config.dev.proxyTable\n\nvar app = express()\nvar compiler = webpack(webpackConfig)\n\nvar devMiddleware = require('webpack-dev-middleware')(compiler, {\n  publicPath: webpackConfig.output.publicPath,\n  quiet: true\n})\n\nvar hotMiddleware = require('webpack-hot-middleware')(compiler, {\n  log: () => {}\n})\n// force page reload when html-webpack-plugin template changes\ncompiler.plugin('compilation', function (compilation) {\n  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {\n    hotMiddleware.publish({ action: 'reload' })\n    cb()\n  })\n})\n\n// proxy api requests\nObject.keys(proxyTable).forEach(function (context) {\n  var options = proxyTable[context]\n  if (typeof options === 'string') {\n    options = { target: options }\n  }\n  app.use(proxyMiddleware(options.filter || context, options))\n})\n\n// handle fallback for HTML5 history API\napp.use(require('connect-history-api-fallback')())\n\n// serve webpack bundle output\napp.use(devMiddleware)\n\n// enable hot-reload and state-preserving\n// compilation error display\napp.use(hotMiddleware)\n\n// serve pure static assets\nvar staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)\napp.use(staticPath, express.static('./static'))\n\nvar uri = 'http://localhost:' + port\n\nvar _resolve\nvar readyPromise = new Promise(resolve => {\n  _resolve = resolve\n})\n\nconsole.log('> Starting dev server...')\ndevMiddleware.waitUntilValid(() => {\n  console.log('> Listening at ' + uri + '\\n')\n  // when env is testing, don't need open it\n  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {\n    opn(uri)\n  }\n  _resolve()\n})\n\nvar server = app.listen(port)\n\nmodule.exports = {\n  ready: readyPromise,\n  close: () => {\n    server.close()\n  }\n}\n"
  },
  {
    "path": "build/utils.js",
    "content": "var path = require('path')\nvar config = require('../config')\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\n\nexports.assetsPath = function (_path) {\n  var assetsSubDirectory = process.env.NODE_ENV === 'production'\n    ? config.build.assetsSubDirectory\n    : config.dev.assetsSubDirectory\n  return path.posix.join(assetsSubDirectory, _path)\n}\n\nexports.cssLoaders = function (options) {\n  options = options || {}\n\n  var cssLoader = {\n    loader: 'css-loader',\n    options: {\n      minimize: process.env.NODE_ENV === 'production',\n      sourceMap: options.sourceMap\n    }\n  }\n\n  // generate loader string to be used with extract text plugin\n  function generateLoaders (loader, loaderOptions) {\n    var loaders = [cssLoader]\n    if (loader) {\n      loaders.push({\n        loader: loader + '-loader',\n        options: Object.assign({}, loaderOptions, {\n          sourceMap: options.sourceMap\n        })\n      })\n    }\n\n    // Extract CSS when that option is specified\n    // (which is the case during production build)\n    if (options.extract) {\n      return ExtractTextPlugin.extract({\n        use: loaders,\n        fallback: 'vue-style-loader'\n      })\n    } else {\n      return ['vue-style-loader'].concat(loaders)\n    }\n  }\n\n  // https://vue-loader.vuejs.org/en/configurations/extract-css.html\n  return {\n    css: generateLoaders(),\n    postcss: generateLoaders(),\n    less: generateLoaders('less'),\n    sass: generateLoaders('sass', { indentedSyntax: true }),\n    scss: generateLoaders('sass'),\n    stylus: generateLoaders('stylus'),\n    styl: generateLoaders('stylus')\n  }\n}\n\n// Generate loaders for standalone style files (outside of .vue)\nexports.styleLoaders = function (options) {\n  var output = []\n  var loaders = exports.cssLoaders(options)\n  for (var extension in loaders) {\n    var loader = loaders[extension]\n    output.push({\n      test: new RegExp('\\\\.' + extension + '$'),\n      use: loader\n    })\n  }\n  return output\n}\n"
  },
  {
    "path": "build/vue-loader.conf.js",
    "content": "var utils = require('./utils')\nvar config = require('../config')\nvar isProduction = process.env.NODE_ENV === 'production'\n\nmodule.exports = {\n  loaders: utils.cssLoaders({\n    sourceMap: isProduction\n      ? config.build.productionSourceMap\n      : config.dev.cssSourceMap,\n    extract: isProduction\n  })\n}\n"
  },
  {
    "path": "build/webpack.base.conf.js",
    "content": "var path = require('path')\nvar utils = require('./utils')\nvar config = require('../config')\nvar vueLoaderConfig = require('./vue-loader.conf')\n\nfunction resolve (dir) {\n  return path.join(__dirname, '..', dir)\n}\n\nmodule.exports = {\n  entry: {\n    app: './src/main.js'\n  },\n  output: {\n    path: config.build.assetsRoot,\n    filename: '[name].js',\n    publicPath: process.env.NODE_ENV === 'production'\n      ? config.build.assetsPublicPath\n      : config.dev.assetsPublicPath\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js',\n      '@': resolve('src'),\n      'assets': resolve('src/assets')\n    }\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: vueLoaderConfig\n      },\n      {\n        test: /\\.js$/,\n        exclude: resolve('/node_modules/'),\n        use: {\n          loader: 'babel-loader',\n          query: {\n            presets: ['es2015']\n          }\n        }\n        // include: [resolve('src'), resolve('test')]\n      },\n      {\n        test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,\n        loader: 'url-loader',\n        options: {\n          limit: 10000,\n          name: utils.assetsPath('img/[name].[hash:7].[ext]')\n        }\n      },\n      {\n        test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,\n        loader: 'url-loader',\n        options: {\n          limit: 10000,\n          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')\n        }\n      },\n      {\n        test: /\\.s[a|c]ss$/,\n        loader: 'style-loader!css-loader!sass-loader'\n      }\n    ]\n  }\n}\n"
  },
  {
    "path": "build/webpack.dev.conf.js",
    "content": "var utils = require('./utils')\nvar webpack = require('webpack')\nvar config = require('../config')\nvar merge = require('webpack-merge')\nvar baseWebpackConfig = require('./webpack.base.conf')\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')\n\n// add hot-reload related code to entry chunks\nObject.keys(baseWebpackConfig.entry).forEach(function (name) {\n  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])\n})\n\nmodule.exports = merge(baseWebpackConfig, {\n  module: {\n    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })\n  },\n  // cheap-module-eval-source-map is faster for development\n  devtool: '#cheap-module-eval-source-map',\n  plugins: [\n    new webpack.DefinePlugin({\n      'process.env': config.dev.env\n    }),\n    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NoEmitOnErrorsPlugin(),\n    // https://github.com/ampedandwired/html-webpack-plugin\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      template: 'index.html',\n      inject: true\n    }),\n    new FriendlyErrorsPlugin()\n  ]\n})\n"
  },
  {
    "path": "build/webpack.prod.conf.js",
    "content": "var path = require('path')\nvar utils = require('./utils')\nvar webpack = require('webpack')\nvar config = require('../config')\nvar merge = require('webpack-merge')\nvar baseWebpackConfig = require('./webpack.base.conf')\nvar CopyWebpackPlugin = require('copy-webpack-plugin')\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\nvar OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')\nvar UglifyJsPlugin = require('uglifyjs-webpack-plugin')\n\nvar env = config.build.env\n\nvar webpackConfig = merge(baseWebpackConfig, {\n  module: {\n    rules: utils.styleLoaders({\n      sourceMap: config.build.productionSourceMap,\n      extract: true\n    })\n  },\n  devtool: config.build.productionSourceMap ? '#source-map' : false,\n  output: {\n    path: config.build.assetsRoot,\n    filename: utils.assetsPath('js/[name].[chunkhash].js'),\n    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')\n  },\n  plugins: [\n    // http://vuejs.github.io/vue-loader/en/workflow/production.html\n    new webpack.DefinePlugin({\n      'process.env': env\n    }),\n    /* new webpack.optimize.UglifyJsPlugin({\n      compress: {\n        warnings: false\n      },\n      sourceMap: true\n    }), */\n    new UglifyJsPlugin({\n        test: /\\.js($|\\?)/i\n    }),\n    // extract css into its own file\n    new ExtractTextPlugin({\n      filename: utils.assetsPath('css/[name].[contenthash].css')\n    }),\n    // Compress extracted CSS. We are using this plugin so that possible\n    // duplicated CSS from different components can be deduped.\n    new OptimizeCSSPlugin({\n      cssProcessorOptions: {\n        safe: true\n      }\n    }),\n    // generate dist index.html with correct asset hash for caching.\n    // you can customize output by editing /index.html\n    // see https://github.com/ampedandwired/html-webpack-plugin\n    new HtmlWebpackPlugin({\n      filename: config.build.index,\n      template: 'index.html',\n      inject: true,\n      minify: {\n        removeComments: true,\n        collapseWhitespace: true,\n        removeAttributeQuotes: true\n        // more options:\n        // https://github.com/kangax/html-minifier#options-quick-reference\n      },\n      // necessary to consistently work with multiple chunks via CommonsChunkPlugin\n      chunksSortMode: 'dependency'\n    }),\n    // split vendor js into its own file\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'vendor',\n      minChunks: function (module, count) {\n        // any required modules inside node_modules are extracted to vendor\n        return (\n          module.resource &&\n          /\\.js$/.test(module.resource) &&\n          module.resource.indexOf(\n            path.join(__dirname, '../node_modules')\n          ) === 0\n        )\n      }\n    }),\n    // extract webpack runtime and module manifest to its own file in order to\n    // prevent vendor hash from being updated whenever app bundle is updated\n    new webpack.optimize.CommonsChunkPlugin({\n      name: 'manifest',\n      chunks: ['vendor']\n    }),\n    // copy custom static assets\n    new CopyWebpackPlugin([\n      {\n        from: path.resolve(__dirname, '../static'),\n        to: config.build.assetsSubDirectory,\n        ignore: ['.*']\n      }\n    ])\n  ]\n})\n\nif (config.build.productionGzip) {\n  var CompressionWebpackPlugin = require('compression-webpack-plugin')\n\n  webpackConfig.plugins.push(\n    new CompressionWebpackPlugin({\n      asset: '[path].gz[query]',\n      algorithm: 'gzip',\n      test: new RegExp(\n        '\\\\.(' +\n        config.build.productionGzipExtensions.join('|') +\n        ')$'\n      ),\n      threshold: 10240,\n      minRatio: 0.8\n    })\n  )\n}\n\nif (config.build.bundleAnalyzerReport) {\n  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin\n  webpackConfig.plugins.push(new BundleAnalyzerPlugin())\n}\n\nmodule.exports = webpackConfig\n"
  },
  {
    "path": "config/dev.env.js",
    "content": "var merge = require('webpack-merge')\nvar prodEnv = require('./prod.env')\n\nmodule.exports = merge(prodEnv, {\n  NODE_ENV: '\"development\"'\n})\n"
  },
  {
    "path": "config/index.js",
    "content": "// see http://vuejs-templates.github.io/webpack for documentation.\nvar path = require('path')\n\nmodule.exports = {\n  build: {\n    env: require('./prod.env'),\n    index: path.resolve(__dirname, '../dist/index.html'),\n    assetsRoot: path.resolve(__dirname, '../dist'),\n    assetsSubDirectory: 'static',\n    assetsPublicPath: '/music/',\n    productionSourceMap: true,\n    // Gzip off by default as many popular static hosts such as\n    // Surge or Netlify already gzip all static assets for you.\n    // Before setting to `true`, make sure to:\n    // npm install --save-dev compression-webpack-plugin\n    productionGzip: false,\n    productionGzipExtensions: ['js', 'css'],\n    // Run the build command with an extra argument to\n    // View the bundle analyzer report after build finishes:\n    // `npm run build --report`\n    // Set to `true` or `false` to always turn it on or off\n    bundleAnalyzerReport: process.env.npm_config_report\n  },\n  dev: {\n    env: require('./dev.env'),\n    port: 8080,\n    autoOpenBrowser: true,\n    assetsSubDirectory: 'static',\n    assetsPublicPath: '/',\n    proxyTable: {},\n    // CSS Sourcemaps off by default because relative paths are \"buggy\"\n    // with this option, according to the CSS-Loader README\n    // (https://github.com/webpack/css-loader#sourcemaps)\n    // In our experience, they generally work as expected,\n    // just be aware of this issue when enabling this option.\n    cssSourceMap: false\n  }\n}\n"
  },
  {
    "path": "config/prod.env.js",
    "content": "module.exports = {\n  NODE_ENV: '\"production\"'\n}\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n    <title>vue-music</title>\n    <script>\n      !function (n) {\n        var e = n.document,\n          t = e.documentElement,\n          i = 750,\n          d = i / 100,\n          o = \"orientationchange\" in n ? \"orientationchange\" : \"resize\",\n          a = function () {\n            var n = t.clientWidth || 320;\n            n > 750 && (n = 750);\n            t.style.fontSize = n / d + \"px\"\n          };\n        e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener(\"DOMContentLoaded\", a, !1))\n      }(window);\n    </script>\n    <!--<link rel=\"stylesheet\" href=\"//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic\">-->\n    <!--<link rel=\"stylesheet\" href=\"//fonts.googleapis.com/icon?family=Material+Icons\">-->\n    <link rel=\"stylesheet\" href=\"//at.alicdn.com/t/font_2d9gf9alx3v26gvi.css\">\n    <link rel=\"stylesheet\" href=\"./static/iconfont/material-icons.css\">\n    <style>\n      body {\n        font-size:.32rem;\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <!-- built files will be auto injected -->\n  </body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vue-music\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A Vue.js project\",\n  \"author\": \"tgxh2020 <tgxh2020@gmail.com>\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"node build/dev-server.js\",\n    \"start\": \"node build/dev-server.js\",\n    \"build\": \"node build/build.js\"\n  },\n  \"dependencies\": {\n    \"animate.css\": \"^3.5.2\",\n    \"axios\": \"^0.16.2\",\n    \"better-scroll\": \"^0.2.4\",\n    \"grade-js\": \"^1.0.10\",\n    \"muse-ui\": \"^2.0.3\",\n    \"node-sass\": \"^4.7.2\",\n    \"sass-loader\": \"^6.0.5\",\n    \"vue\": \"2.4.4\",\n    \"vue-awesome-swiper\": \"^2.4.2\",\n    \"vue-material\": \"^0.7.1\",\n    \"vue-router\": \"^2.3.1\",\n    \"vuex\": \"^2.3.1\"\n  },\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.7.2\",\n    \"babel-core\": \"^6.22.1\",\n    \"babel-generator\": \"^6.26.0\",\n    \"babel-loader\": \"^6.2.10\",\n    \"babel-plugin-transform-runtime\": \"^6.22.0\",\n    \"babel-preset-env\": \"^1.3.2\",\n    \"babel-preset-es2015\": \"^6.24.1\",\n    \"babel-preset-stage-2\": \"^6.22.0\",\n    \"babel-register\": \"^6.22.0\",\n    \"chalk\": \"^1.1.3\",\n    \"connect-history-api-fallback\": \"^1.3.0\",\n    \"copy-webpack-plugin\": \"^4.0.1\",\n    \"css-loader\": \"^0.28.0\",\n    \"eventsource-polyfill\": \"^0.9.6\",\n    \"express\": \"^4.14.1\",\n    \"extract-text-webpack-plugin\": \"^2.0.0\",\n    \"file-loader\": \"^0.11.1\",\n    \"friendly-errors-webpack-plugin\": \"^1.1.3\",\n    \"html-webpack-plugin\": \"^2.28.0\",\n    \"http-proxy-middleware\": \"^0.17.3\",\n    \"opn\": \"^4.0.2\",\n    \"optimize-css-assets-webpack-plugin\": \"^1.3.0\",\n    \"ora\": \"^1.2.0\",\n    \"rimraf\": \"^2.6.0\",\n    \"semver\": \"^5.3.0\",\n    \"shelljs\": \"^0.7.6\",\n    \"uglifyjs-webpack-plugin\": \"^1.1.0\",\n    \"url-loader\": \"^0.5.8\",\n    \"vue-loader\": \"^12.1.0\",\n    \"vue-style-loader\": \"^3.0.1\",\n    \"vue-template-compiler\": \"2.4.4\",\n    \"webpack\": \"^2.6.1\",\n    \"webpack-bundle-analyzer\": \"^2.2.1\",\n    \"webpack-dev-middleware\": \"^1.10.0\",\n    \"webpack-hot-middleware\": \"^2.18.0\",\n    \"webpack-merge\": \"^4.1.0\"\n  },\n  \"engines\": {\n    \"node\": \">= 4.0.0\",\n    \"npm\": \">= 3.0.0\"\n  },\n  \"browserslist\": [\n    \"> 1%\",\n    \"last 2 versions\",\n    \"not ie <= 8\"\n  ]\n}\n"
  },
  {
    "path": "screen/1.txt",
    "content": "http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlyxi2mrj20ad0icn43.jpg\nhttp://wx4.sinaimg.cn/large/7b9a6229ly1fhwlz0lmr2j20ac0idmzv.jpg\nhttp://wx2.sinaimg.cn/large/7b9a6229ly1fhwlz4rv98j20ac0ic78c.jpg\nhttp://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlz76gf8j20ac0idq4u.jpg\nhttp://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzckmt6j20ac0idtdf.jpg\nhttp://wx2.sinaimg.cn/mw690/7b9a6229ly1fhwlzevul9j20ac0ic76k.jpg\nhttp://wx3.sinaimg.cn/mw690/7b9a6229ly1fhwlzgb1uvj20ad0id0tp.jpg\nhttp://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzlcu5ej20ac0idq6w.jpg\n"
  },
  {
    "path": "src/App.vue",
    "content": "<template>\n  <div id=\"app\">\n    <router-view></router-view>\n    <player></player>\n    <audio-nav></audio-nav>\n    <play-list></play-list>\n    <cover></cover>\n    <comment></comment>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import AudioNav from './components/AudiioNav'\n  import Player from './components/Player'\n  import PlayList from './components/PlayList.vue'\n  import Cover from './components/Cover.vue'\n  import Comment from './components/Comment.vue'\n\n  export default {\n    data() {\n      return {}\n    },\n    components: {\n      AudioNav,Player,PlayList,Cover,Comment\n    }\n  }\n</script>\n\n<style>\n  #app {\n  }\n</style>\n"
  },
  {
    "path": "src/assets/css/base.scss",
    "content": "@mixin ell() {\n  overflow: hidden;\n  -ms-text-overflow: ellipsis;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n$baseColor: #d33a31;\n\n@function pr($px, $base-font-size: 50px) {\n  @if (unitless($px)) {\n    //@warn \"Assuming #{$px} to be in pixels, attempting to convert it into pixels for you\";\n    @return pr($px + 0px); // That may fail.\n  } @else if (unit($px) == rem) {\n    @return $px;\n  }\n  @return ($px / $base-font-size) * 1rem;\n}\n\n\n@font-face {\n  font-family: 'iconfont';  /* project id 311056 */\n  src: url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.eot');\n  src: url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.eot?#iefix') format('embedded-opentype'),\n  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.woff') format('woff'),\n  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.ttf') format('truetype'),\n  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.svg#iconfont') format('svg');\n}\n\n@mixin wh($w) {\n  width:$w;\n  height:$w;\n}\n\n@mixin ava($w) {\n  width:$w;\n  height:$w;\n  img {\n    width:100%;\n    height:100%;\n  }\n}\n\n@mixin dfcc() {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n@mixin overhide($n) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: $n;\n  -webkit-box-orient: vertical;\n}\n\n//1px\n@mixin _prefixDpr($selector, $position: 'top', $pseudo: 'before', $dpr: '2') {\n  @media only screen and (-webkit-min-device-pixel-ratio:$dpr) {\n    @if $dpr == '1.5' {\n      #{$selector}:#{$pseudo} {\n        -webkit-transform: scaleY(.7);\n        transform: scaleY(.7);\n        @if $position == 'top' {\n          -webkit-transform-origin: left top;\n        } @else if $position == 'bottom' {\n          -webkit-transform-origin: left bottom;\n        }\n      }\n    } @else if $dpr == '2' {\n      #{$selector}:#{$pseudo} {\n        -webkit-transform: scaleY(.5);\n        transform: scaleY(.5);\n        @if $position == 'top' {\n          -webkit-transform-origin: left top;\n        } @else if $position == 'bottom' {\n          -webkit-transform-origin: left bottom;\n        }\n      }\n    } @else if $dpr == '3' {\n      #{$selector}:#{$pseudo} {\n        -webkit-transform: scaleY(.3);\n        transform: scaleY(.3);\n        @if $position == 'top' {\n          -webkit-transform-origin: left top;\n        } @else if $position == 'bottom' {\n          -webkit-transform-origin: left bottom;\n        }\n      }\n    }\n  }\n}\n\n@mixin onepx($selector, $position: 'top',$pseudo: 'before', $color: #666) {\n  #{$selector}:#{$pseudo} {\n    content: ' ';\n    display: block;\n    border-top: 1px solid $color;\n    position: absolute;\n    left: 0;\n    right: 0;\n  }\n  #{$selector} {\n    position: relative;\n    &:#{$pseudo} {\n      @if #{$position} == 'top'{\n        top: 0;\n      } @else if #{$position} == 'bottom' {\n        bottom: 0;\n      }\n    }\n  }\n  @include _prefixDpr($selector, $position, $pseudo, '1.5');\n  @include _prefixDpr($selector, $position, $pseudo, '2');\n  @include _prefixDpr($selector, $position, $pseudo, '3');\n\n}\n\n"
  },
  {
    "path": "src/assets/css/common.css",
    "content": ".icon {\n  width: 1em; height: 1em;\n  vertical-align: -0.15em;\n  fill: currentColor;\n  overflow: hidden;\n}\n\nul:not(.md-list)>li+li {\n  margin-top:0 !important;\n}\n"
  },
  {
    "path": "src/assets/css/reset.css",
    "content": "/* http://meyerweb.com/eric/tools/css/reset/\n   v2.0 | 20110126\n   License: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n  display: block;\n}\n\nbody {\n  line-height:1;\n  font-size:0.32rem;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"WenQuanYi Micro Hei\", \"Microsoft Yahei\", sans-serif;\n}\n\nol, ul {\n  list-style: none;\n}\n\na {\n  text-decoration: none;\n}\n\nblockquote, q {\n  quotes: none;\n}\n\nblockquote:before, blockquote:after,\nq:before, q:after {\n  content: '';\n  content: none;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n.clearfix:after, .clearfix:before {\n  display: table;\n  content: ''\n}\n.clearfix:after {\n  clear: both;\n}\n.clearfix {\n  *zoom: 1;\n}\n\n.fl {\n  float: left;\n}\n.fr {\n  float: right;\n}\n"
  },
  {
    "path": "src/assets/js/api.js",
    "content": "import axios from 'axios'\n\nconst url = 'http://localhost:3000'\n\nexport default url\n"
  },
  {
    "path": "src/assets/js/filters.js",
    "content": "/**\n * Created by 12 on 2017/6/11.\n */\n\nconst filters = {\n  //歌单播放数\n  playCount(value) {\n    if (value < 10000) {\n      return value\n    } else {\n      value = value + ''\n      return value.slice(0, value.length - 4)\n    }\n  }\n}\n\nexport default filters\n\n"
  },
  {
    "path": "src/assets/js/setStyle.js",
    "content": "/**\n * Created by 12 on 2017/6/11.\n */\nfunction setStyle(obj,json) {\n  for (var i in json) {\n    obj.style[i] = json[i]\n  }\n}\n"
  },
  {
    "path": "src/assets/login/login.json",
    "content": "{\n  \"loginType\": 1,\n  \"code\": 200,\n  \"account\": {\n    \"id\": 46909653,\n    \"userName\": \"0_wo460520803@163.com\",\n    \"type\": 0,\n    \"status\": 0,\n    \"whitelistAuthority\": 0,\n    \"createTime\": 0,\n    \"salt\": \"\",\n    \"tokenVersion\": 0,\n    \"ban\": 0,\n    \"baoyueVersion\": -2,\n    \"donateVersion\": 0,\n    \"vipType\": 0,\n    \"viptypeVersion\": 0,\n    \"anonimousUser\": false\n  }\n}\n"
  },
  {
    "path": "src/components/AudiioNav.vue",
    "content": "<template>\n  <div class=\"audio-nav\" v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">\n    <div class=\"music-wrap\" @click=\"showPlayer\">\n      <div class=\"music-img\">\n        <img :src=\"curPlayMusic.detail.al.picUrl\" alt=\"\">\n      </div>\n      <div class=\"music-con\">\n        <p class=\"music-name\" v-if=\"curPlayMusic\">{{curPlayMusic.detail.name}}</p>\n        <p class=\"music-lyric\">{{curLyric}}</p>\n      </div>\n    </div>\n    <div class=\"music-btn\">\n      <div class=\"nav-btn-play\">\n        <i class=\"iconfont icon-ttpodicon\" v-if=\"!playing\" @click=\"play\"></i>\n        <i class=\"iconfont icon-zanting\" v-else @click=\"pause\"></i>\n      </div>\n      <div class=\"nav-btn-list\">\n        <i class=\"iconfont icon-liebiao\" @click=\"showPlayList\"></i>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {\n      }\n    },\n    computed: {\n      ...mapState([\n        'curPlayMusic', 'playing','curLyric'\n      ])\n    },\n    mounted() {\n      this.$nextTick(() => {\n      })\n    },\n    methods: {\n      play() {\n        //audio标签在其他组件中，故手动获取dom操作\n        document.getElementById('music').play()\n        this.$store.dispatch('switchPlaying', true)\n      },\n      pause() {\n        document.getElementById('music').pause()\n        this.$store.dispatch('switchPlaying', false)\n      },\n      //显示播放器\n      showPlayer() {\n        this.$store.state.showPlayer = true\n      },\n      //显示播放列表\n      showPlayList() {\n        this.$store.dispatch('showPlayList', true)\n      }\n    },\n    filters: {},\n    watch: {\n      url(val, old) {\n        if (val == null) {\n          alert('播放失败，该歌曲需要收费')\n        }\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .audio-nav {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: fixed;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    height: pr(45);\n    box-shadow: 0 -2px 8px #ccc;\n    padding: pr(6);\n    background-color: #fff;\n    z-index: 1000;\n    .music-wrap {\n      display: flex;\n      flex:1;\n      .music-img {\n        width: pr(33);\n        img {\n          @include wh(100%);\n        }\n      }\n      .music-con {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        margin-left: pr(10);\n        p {\n          &:first-of-type {\n            font-size: pr(12);\n          }\n          &:nth-of-type(2) {\n            margin-top: pr(5);\n            font-size: pr(10);\n            color: #666;\n            height:pr(10);\n            @include ell;\n          }\n        }\n      }\n    }\n    .music-btn {\n      display: flex;\n      align-items: center;\n      .nav-btn-play {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        @include wh(pr(24));\n        border: 1px solid #666;\n        border-radius: 50%;\n        i {\n          font-size: pr(12);\n        }\n      }\n      .nav-btn-list {\n        margin-left: pr(15);\n        i {\n          font-size: pr(18);\n        }\n      }\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/components/Comment.vue",
    "content": "<template>\n  <div\n    class=\"comment\"\n    :class=\"{show: showComment}\"\n    v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">\n    <md-toolbar class=\"md-dense\" :class=\"{show: showComment}\">\n      <md-button class=\"md-icon-button\">\n        <md-icon @click.native=\"hideComment\">arrow_back</md-icon>\n      </md-button>\n      <h2 class=\"md-title\" style=\"flex: 1\">评论<span v-if=\"total\">({{total}})</span></h2>\n      <md-button class=\"md-icon-button\">\n      </md-button>\n    </md-toolbar>\n    <div class=\"comment-wrap\" ref=\"comment\">\n      <div class=\"music-info\">\n        <div class=\"music-pic\">\n          <img :src=\"curPlayMusic.detail.al.picUrl\" alt=\"\" v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">\n        </div>\n        <div class=\"music-name\">\n          <p\n            v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">{{curPlayMusic.detail.name}}</p>\n          <p>\n            <span\n              v-for=\"(item,index) in curPlayMusic.detail.ar\"\n            >{{item.name}}\n            <span v-if=\"index !== curPlayMusic.detail.ar.length - 1\">/\n            </span>\n          </span>\n          </p>\n        </div>\n      </div>\n      <div class=\"wonderful-comments\" v-show=\"!showLoading\">\n        <div class=\"comment-title\">\n          精彩评论\n        </div>\n        <ul class=\"comment-content\">\n          <li v-for=\"(item,index) in hotComments\">\n            <div class=\"comment-avatar\">\n              <div><img :src=\"item.user.avatarUrl\" alt=\"\"></div>\n            </div>\n            <div class=\"comment-body\">\n              <div class=\"comment-body-title\">\n                <p>{{item.user.nickname}} <br/><span>2017年7月7日</span></p>\n                <p>{{item.likedCount}} <i class=\"iconfont icon-dianzan\"></i></p>\n              </div>\n              <div class=\"comment-body-content\">\n                <p>{{item.content}}</p>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </div>\n      <div class=\"recent-comments\" v-show=\"!showLoading\">\n        <div class=\"comment-title\">\n          最新评论\n        </div>\n        <ul class=\"comment-content\">\n          <li v-for=\"(item,index) in comments\">\n            <div class=\"comment-avatar\">\n              <div><img :src=\"item.user.avatarUrl\" alt=\"\"></div>\n            </div>\n            <div class=\"comment-body\">\n              <div class=\"comment-body-title\">\n                <p>{{item.user.nickname}} <br/><span>2017年7月7日</span></p>\n                <p>{{item.likedCount}} <i class=\"iconfont icon-dianzan\"></i></p>\n              </div>\n              <div class=\"comment-body-content\">\n                <p>{{item.content}}</p>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </div>\n      <div class=\"comment-loading\" v-show=\"showLoading\">\n        <md-spinner :md-size=\"40\" md-indeterminate></md-spinner>\n      </div>\n      <div class=\"comment-b-loading\" v-show=\"bottomLoading\">\n        <md-spinner :md-size=\"30\" md-indeterminate></md-spinner>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../assets/js/api'\n\n  export default {\n    data() {\n      return {\n        hotComments: [],\n        comments: [],\n        showLoading: false,\n        bottomLoading: false,\n        offset: 1,\n        total: ''  //评论总数\n      }\n    },\n    computed: {\n      ...mapState([\n        'commentId', 'showComment', 'curPlayMusic'\n      ])\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n      //热门评论\n      fetHotComment(id) {\n        axios.get(`${url}/comment/music?id=${id}&limit=0`).then(res => {\n          this.hotComments = res.data.hotComments\n          this.showLoading = false //获取评论后隐藏loading\n          this.total = res.data.total\n        })\n      },\n      //获取更多评论\n      fetComment(id, offset) {\n        axios.get(`${url}/comment/music?id=${id}&limit=20&offset=${offset}`).then(res => {\n          this.comments = res.data.comments\n          this.bottomLoading = false\n        })\n      },\n      changeId() {\n        this.$store.dispatch('commentId', 23212)\n      },\n      //隐藏评论组件\n      hideComment() {\n        this.$store.state.showComment = false\n      }\n    },\n    filters: {},\n    watch: {\n      //监听评论id，改变时重新获取新歌曲评论\n      commentId(val, old) {\n        this.$store.state.showComment = true\n        this.showLoading = true\n        this.fetHotComment(val)\n        this.fetComment(val,1)\n      },\n      offset(val, old) {\n        this.fetComment(commentId, val)\n      },\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .comment {\n    position: fixed;\n    left: 0;\n    bottom: -2000px;\n    right: 0;\n    background-color: #fff;\n    z-index: 1004;\n    transform: translate(0, 100%);\n    &.show {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      transform: translate(0, 0);\n    }\n    .md-toolbar {\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n    }\n\n    .comment-wrap {\n      height:100%;\n      padding-top:pr(48);\n      overflow-y: auto;\n    }\n\n    .music-info {\n      display: flex;\n      align-items: center;\n      height: pr(81);\n      padding: 0 pr(8);\n      .music-pic {\n        @include wh(pr(65));\n        img {\n        }\n      }\n      .music-name {\n        flex: 1;\n        margin-left: pr(10);\n        p {\n          &:nth-child(2) {\n            margin-top: pr(6);\n            font-size: pr(12);\n            color: #626262;\n          }\n        }\n      }\n    }\n    .comment-title {\n      display: flex;\n      align-items: center;\n      height: pr(24);\n      padding-left: pr(10);\n      color: #626262;\n      font-size: pr(12);\n      background-color: #f0f0f0;\n    }\n    .comment-content {\n      li {\n        display: flex;\n        padding-top: pr(10);\n      }\n      .comment-avatar {\n        display: flex;\n        justify-content: center;\n        width: pr(46);\n        div {\n          @include wh(pr(28));\n          border-radius: 50%;\n          overflow: hidden;\n        }\n      }\n      .comment-body {\n        flex: 1;\n        .comment-body-title {\n          display: flex;\n          justify-content: space-between;\n          padding-right: pr(10);\n          p {\n            &:nth-of-type(1) {\n              color: #616262;\n              font-size: pr(12);\n              line-height: 1.3;\n              span {\n                color: #acacac;\n                font-size: pr(10);\n              }\n            }\n            &:nth-of-type(2) {\n              margin-top: pr(3);\n              color: #616261;\n              font-size: pr(12);\n            }\n          }\n        }\n        .comment-body-content {\n          padding: pr(10);\n          padding-left: 0;\n          border-bottom: 1px solid #e0e0e0;\n          p {\n            font-size: pr(14);\n            line-height: 1.5;\n            color: #333;\n          }\n        }\n      }\n    }\n    .comment-loading {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-40%, -50%);\n    }\n    .comment-b-loading {\n      display: flex;\n      height:pr(40);\n      justify-content: center;\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/components/Cover.vue",
    "content": "<template>\n  <div class=\"bg-cover\" :class=\"{hide:!showCover}\" @touchmove.prevent @click=\"hideCover\">\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    computed: {\n      ...mapState([\n        'showCover'  //控制是否添加hide class，隐藏或显示\n      ])\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n      hideCover() {\n        this.$store.dispatch('showPlayList', false)\n      }\n    },\n    filters: {},\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .bg-cover {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    opacity: 1;\n    z-index:1002;\n    background-color: rgba(0, 0, 0, .5);\n    transition: all .5s;\n    &.hide {\n      position: static;\n      opacity: 0;\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/components/Header.vue",
    "content": "<template>\n    <div>\n\n    </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    mounted() {\n      this.(() => {\n\n      })\n    },\n    methods: {},\n    filters: {},\n    computed: {\n      ...mapState([])\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/common';\n\n</style>\n"
  },
  {
    "path": "src/components/Hello.vue",
    "content": "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <h2>Essential Links</h2>\n    <ul>\n      <li><a href=\"https://vuejs.org\" target=\"_blank\">Core Docs</a></li>\n      <li><a href=\"https://forum.vuejs.org\" target=\"_blank\">Forum</a></li>\n      <li><a href=\"https://gitter.im/vuejs/vue\" target=\"_blank\">Gitter Chat</a></li>\n      <li><a href=\"https://twitter.com/vuejs\" target=\"_blank\">Twitter</a></li>\n      <br>\n      <li><a href=\"http://vuejs-templates.github.io/webpack/\" target=\"_blank\">Docs for This Template</a></li>\n    </ul>\n    <h2>Ecosystem</h2>\n    <ul>\n      <li><a href=\"http://router.vuejs.org/\" target=\"_blank\">vue-router</a></li>\n      <li><a href=\"http://vuex.vuejs.org/\" target=\"_blank\">vuex</a></li>\n      <li><a href=\"http://vue-loader.vuejs.org/\" target=\"_blank\">vue-loader</a></li>\n      <li><a href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\">awesome-vue</a></li>\n    </ul>\n  </div>\n</template>\n\n<script>\n  import {mapState} from 'vuex'\n  import axios from 'axios'\n\n\n  export default {\n    name: 'hello',\n    data () {\n      return {\n        msg: 'Welcome to Your Vue.js App'\n      }\n    },\n    mounted() {\n      this.$nextTick(() => {\n        console.log(this.url)\n        this.getTest()\n      })\n    },\n    methods: {\n      getTest() {\n        axios.get(`${this.url}/lyric?id=347230`).then(res => {\n          console.log(1)\n        })\n      }\n    },\n    computed: {\n      ...mapState([\n        'url'\n      ])\n    }\n  }\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n  h1, h2 {\n    font-weight: normal;\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n  }\n\n  li {\n    display: inline-block;\n    margin: 0 10px;\n  }\n\n  a {\n    color: #42b983;\n  }\n</style>\n"
  },
  {
    "path": "src/components/ListTitle.vue",
    "content": "<template>\n  <h3 class=\"list-title\">{{title}} <i class=\"iconfont icon-jiantou\"></i></h3>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  export default {\n    props: ['title']\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .list-title {\n    margin:pr(13) 0;\n    border-left:pr(3) solid $baseColor;\n    text-indent: pr(10);\n    font-size:pr(14);\n    .iconfont {\n      position: relative;\n      top:pr(-1);\n      height:100%;\n      font-size:pr(12);\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/components/PlayList.vue",
    "content": "<template>\n  <div class=\"play-list\" :class=\"{showlist:showPlayList}\">\n    <div class=\"play-list-title\">\n      播放列表（{{playList.length}}）{{curMusicIndex}}\n    </div>\n    <div class=\"play-list-content\">\n      <ul>\n        <li class=\"play-list-item\" v-for=\"(item,index) in playList\" :key=\"index\">\n          <div\n            class=\"song-name\"\n            :class=\"{current: item.id === curId}\"\n            @click=\"playMusicFromList(item.id)\">\n            <i class=\"iconfont icon-iconfonthuodonggonggao\"></i>{{item.name}} -\n            <span v-for=\"(value,i) in item.artist\">{{value.name}}\n              <span v-if=\"i !== item.artist.length - 1\"> / </span>\n            </span>\n          </div>\n          <div class=\"song-del\"><i class=\"iconfont icon-shanchu\"></i></div>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState,mapGetters} from 'vuex'\n  import url from '../assets/js/api'\n\n  export default {\n    data() {\n      return {}\n    },\n    computed: {\n      ...mapState([\n        'showPlayList', 'playList','curPlayMusic','curMusicIndex'\n      ]),\n      ...mapGetters([\n        'curId'\n      ]),\n      //当前播放歌曲在播放列表中的索引\n      curMusicIndexComputed() {\n        if (this.playList.length > 0) {\n          return this.playList.findIndex((ele) => {\n            return ele.id === this.curId\n          })\n        } else {\n          return 0\n        }\n      }\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.$store.dispatch('curMusicIndex', this.curMusicIndexComputed)\n      })\n    },\n    methods: {\n      hideCover() {\n        this.$store.dispatch('showPlayList', false)\n      },\n      //点击获取歌曲播放信息\n      playMusicFromList(id) {\n        function getUrl() {\n          return axios.get(`${url}/music/url?id=${id}`)\n        }\n\n        function getDetail() {\n          return axios.get(`${url}/song/detail?ids=${id}`)\n        }\n\n        function getLyric() {\n          return axios.get(`${url}/lyric?id=${id}`)\n        }\n        axios.all([getUrl(), getDetail(), getLyric()])\n          .then(axios.spread((res1, res2, res3) => {\n            const arr = [res1, res2, res3]\n            this.$store.dispatch('curPlayMusic', arr)\n            this.$store.dispatch('switchPlaying', true)\n          }))\n      }\n    },\n    filters: {},\n    watch: {\n      //监听当前歌曲在播放列表中的索引，改变就重新获取歌曲信息\n      curMusicIndex(val, old) {\n        this.playMusicFromList(this.playList[val].id)\n        console.log(this.playList[val].id)\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .play-list {\n    position: fixed;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    height: pr(394);\n    background-color: #fff;\n    z-index: 1003;\n    transform: translate(0, 100%);\n    &.showlist {\n      transition: all .3s;\n      transform: translate(0, 0);\n    }\n    .play-list-title {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 0 pr(10);\n      height: pr(40);\n      font-size: pr(14);\n      border-bottom: 1px solid #e0e0e0;\n    }\n    .play-list-content {\n      height:pr(354);\n      overflow-y: auto;\n      ul {\n      }\n      .play-list-item {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        height: pr(42);\n        padding: 0 pr(10);\n        border-bottom: 1px solid #e0e0e0;\n        .song-name {\n          flex: 1;\n          font-size: pr(14);\n          line-height: 1.5;\n          margin-right: pr(10);\n          @include ell;\n          .iconfont {\n            display: none;\n          }\n          &.current {\n            color:$baseColor;\n            .iconfont {\n              display: inline;\n              margin-top:pr(2);\n              margin-right:pr(5);\n              font-size:pr(14);\n            }\n            span {\n              color:$baseColor;\n            }\n          }\n          span {\n            color: #909090;\n            font-size: pr(10);\n          }\n        }\n        .song-del {\n          .iconfont {\n            font-size: pr(18);\n          }\n        }\n      }\n    }\n  }\n\n\n</style>\n"
  },
  {
    "path": "src/components/Player.vue",
    "content": "<template>\n  <div class=\"player animated fadeIn\"\n       :class=\"{show: showPlayer}\"\n       @touchmove=\"moveProgress\">\n    <audio :src=\"curPlayMusic.url\"\n           id=\"music\"\n           autoplay=\"autoplay\"\n           ref=\"audio\"\n           @timeupdate=\"timeProgress\"\n           @ended=\"ended\"\n           @play=\"startPlay\"></audio>\n    <div class=\"player-wrap\">\n      <md-toolbar class=\"md-dense player-header\">\n        <md-button class=\"md-icon-button\">\n          <md-icon @click.native=\"back\">arrow_back</md-icon>\n        </md-button>\n        <h2 class=\"md-title\" style=\"flex: 1\" v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">\n          {{curPlayMusic.detail.name}}<br/>\n          <span\n            v-for=\"(item,index) in curPlayMusic.detail.ar\" v-if=\"curPlayMusic\">{{item.name}}\n            <span v-if=\"index !== curPlayMusic.detail.ar.length - 1\">/ </span>\n          </span></h2>\n        <md-button class=\"md-icon-button\">\n          <md-icon>share</md-icon>\n        </md-button>\n      </md-toolbar>\n      <div class=\"player-panel1\" v-show=\"showPanel\" @click=\"showPanelF\">\n        <div class=\"player-line\"></div>\n        <div class=\"player-needle\"><img src=\"../assets/images/player-needle.png\" alt=\"\"></div>\n        <div class=\"record-cover\">\n          <div class=\"record-bg rotate-bg animated slideInRight\">\n            <div class=\"music-bg\">\n              <!--判断curPlayMusic不为空-->\n              <img :src=\"curPlayMusic.detail.al.picUrl\" alt=\"\" v-if=\"JSON.stringify(curPlayMusic) !== '{}'\">\n            </div>\n          </div>\n        </div>\n        <div class=\"player-bar\">\n          <div class=\"bar-item\"><i class=\"iconfont icon-like\"></i></div>\n          <div class=\"bar-item\"><i class=\"iconfont icon-download\"></i></div>\n          <div class=\"bar-item\" @click.stop=\"openComment(curPlayMusic.detail.id)\"\n               v-if=\"JSON.stringify(curPlayMusic) !== '{}'\"><i class=\"iconfont icon-pinglun\"></i><span\n            class=\"comment-total\">{{11111 | commentTotalFormat}}</span></div>\n          <div class=\"bar-item\"><i class=\"iconfont icon-more1170511easyiconnet\"></i></div>\n        </div>\n      </div>\n      <div class=\"player-panel2\" v-show=\"!showPanel\" @click=\"showPanelF\">\n        <ul ref=\"lyric_wrap\" class=\"lyric-wrap\" v-if=\"lyric\" :style=\"`transform: translateY(${marginTop}px)`\">\n          <li v-for=\"(value,key) in lyric\">{{value}}</li>\n        </ul>\n        <ul v-else class=\"lyric-wrap\">\n          <li>暂无歌词</li>\n        </ul>\n      </div>\n      <div class=\"player-ctrl\">\n        <div class=\"progress\">\n          <span>{{currentTime | timeFormat}}</span>\n          <div class=\"progress-bar\" ref=\"progress\" @click.stop=\"touchProgress\"\n               @touchend.stop=\"moveProgressEnd\">\n            <div class=\"cur-progress\" :style=\"`width:${curProgress}`\"></div>\n            <div class=\"idot\" :style=\"`left:${curIdot}`\" @touchstart.stop=\"isMove = true\"></div>\n          </div>\n          <span>{{allTime | timeFormat}}</span>\n        </div>\n        <div class=\"player-conctrl\">\n          <div class=\"play-mode\" @click=\"switchMode\">\n            <i class=\"iconfont\"\n               :class=\"{\n              'icon-shunxubofang': mode === 1,\n              'icon-suijibofang': mode === 2,\n              'icon-danquxunhuan': mode === 3}\n            \"></i>\n          </div>\n          <div class=\"prev\" @click=\"prevMusic\"><i class=\"iconfont icon-shangyishou1\"></i></div>\n          <div class=\"ctrl\">\n            <i class=\"iconfont icon-iconfontplay\" v-if=\"!playing\" @click=\"play\"></i>\n            <i class=\"iconfont icon-zanting\" v-else @click=\"pause\"></i>\n          </div>\n          <div class=\"next\" @click=\"nextMusic\"><i class=\"iconfont icon-xiayishou1\"></i></div>\n          <div class=\"play-list-btn\"><i class=\"iconfont icon-liebiao\" @click=\"showPlayList\"></i></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"player-bg\" :style=\"`backgroundImage:url(${curPlayMusic.detail.al.picUrl || bg})`\"\n         v-if=\"JSON.stringify(curPlayMusic) !== '{}'\"></div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import {mapGetters} from 'vuex'\n\n\n  export default {\n    data() {\n      return {\n        curProgress: '0',\n        timer: null,\n        currentTime: 0,\n        allTime: 0,\n        curIdot: 0,\n        parsed: {}, //临时哈希表，保存播放进度和偏移位置\n        marginTop: 0,\n        showPanel: true,\n        mode: 1,  //播放模式，1-顺序，2-随机，3-循环\n        bg: '../assets/images/bg.jpg',\n        isMove: false  //\n      }\n    },\n    computed: {\n      ...mapState([\n        'playing', 'showPlayer', 'curPlayMusic', 'curMusicIndex', 'playList'\n      ]),\n      /*...mapGetters([\n       'lyric'\n       ]),*/\n      lyric() {\n        if (this.curPlayMusic.lrc !== undefined) {\n          return this.parseLrc(this.curPlayMusic.lrc.lyric) || null\n        } else {\n//          debugger\n          return false\n        }\n      },\n      //随机播放随机id\n      randomId() {\n        let length = this.playList.length\n        let id\n        do {\n          id = Math.round(Math.random() * length)\n        } while (id === this.curMusicIndex)\n        return id\n      }\n    },\n    mounted() {\n      this.$nextTick(() => {\n      })\n    },\n    methods: {\n      //播放\n      play() {\n        this.$refs.audio.play()\n//        this.timeProgress()\n        this.$store.dispatch('switchPlaying', true)\n//        console.log(this.$store.state.playing)\n      },\n//      暂停\n      pause() {\n        this.$refs.audio.pause()\n//        clearInterval(this.timer)\n        this.$store.dispatch('switchPlaying', false)\n//        console.log(this.$store.state.playing)\n      },\n      //audio的timeupdate事件触发\n      timeProgress() {\n        //拖动时不执行\n        if (this.isMove) return\n        /*this.timer = setInterval(() => {*/\n//        const audioid = document.getElementById('music')\n        const audioid = this.$refs.audio\n        var cur = (audioid.currentTime / audioid.duration) * this.$refs.progress.offsetWidth\n        this.curProgress = cur + 'px'\n        this.curIdot = (cur - 13) + 'px'\n        this.currentTime = audioid.currentTime\n        this.allTime = audioid.duration\n        /*}, 1000)*/\n        this.updateLyric(audioid)\n      },\n      //歌词滚动\n      updateLyric(audioid) {\n        let text_temp;\n        let data = this.parsed\n        if (!data) return;\n        let currentTime = Math.round(audioid.currentTime)\n        let lrc = data[currentTime];\n        if (!lrc)return;\n        let text = lrc.text\n        if (text != text_temp) {\n//          locationLrc(lrc);\n          document.querySelectorAll('.lyric-wrap .on').forEach((v, i) => {\n            v.classList.remove('on')\n          })\n          let num = document.querySelector('.lyric-wrap').querySelectorAll('li:nth-child(' + (lrc.index + 1) + ')')[0]\n          num.classList.add('on')\n          this.$store.dispatch('showCurLyric', num.innerText)\n          let top = Math.min(0, -lrc.top);\n          this.marginTop = top\n          /*console.log(this.marginTop)\n           console.log(lrc.index + 1)*/\n          text_temp = text;\n        }\n      },\n      //audio触发play事件，开始播放\n      startPlay() {\n        if (this.lyric.length <= 0) {\n          return\n        }\n//        console.log('start')\n        this.$store.dispatch('switchPlaying', true)\n        this.setParsed()\n      },\n      //audio触发ended事件，播放完毕\n      ended() {\n        this.$store.dispatch('switchPlaying', false)\n        this.nextMusic()\n      },\n      //保存歌词索引内容偏移位置\n      setParsed() {\n        let i = 0\n        if (this.lyric.length <= 0) {\n          return\n        }\n\n        //用数组保存lyric的键并排序\n        var arr = []\n        for (let k in this.lyric) {\n          /*this.parsed[k] = {\n           index: i++,\n           text: this.lyric[k],\n           top: (i * 30) * 0.9\n           }*/\n          arr.push(parseInt(k))\n        }\n        //循环数组来为parsed赋值\n        arr.sort((a, b) => a - b).forEach((v, i) => {\n          this.parsed[v] = {\n            index: i++,\n            text: this.lyric[v],\n            top: (i * 30) * 1\n          }\n        })\n        /*console.log(arr.sort((a, b) => a - b))\n         console.log(this.parsed)*/\n\n//        console.log(this.parsed)\n      },\n      //隐藏播放器\n      back() {\n        this.$store.state.showPlayer = false\n      },\n      //解析歌词\n      parseLrc(lrc) {\n        var lyrics = lrc.split(\"\\n\");\n        var lrcObj = {};\n        for (var i = 0; i < lyrics.length; i++) {\n          var lyric = decodeURIComponent(lyrics[i]);\n          var timeReg = /\\[\\d*:\\d*((\\.|\\:)\\d*)*\\]/g;\n          var timeRegExpArr = lyric.match(timeReg);\n          if (!timeRegExpArr)continue;\n          var clause = lyric.replace(timeReg, '');\n          for (var k = 0, h = timeRegExpArr.length; k < h; k++) {\n            var t = timeRegExpArr[k];\n            var min = Number(String(t.match(/\\[\\d*/i)).slice(1)),\n              sec = Number(String(t.match(/\\:\\d*/i)).slice(1));\n            var time = min * 60 + sec;\n            lrcObj[time] = clause;\n          }\n        }\n        return lrcObj;\n      },\n      //切换两个面板\n      showPanelF() {\n        this.showPanel = !this.showPanel\n      },\n      //显示播放列表\n      showPlayList() {\n        this.$store.dispatch('showPlayList', true)\n      },\n      //打开评论\n      openComment(id) {\n        this.$store.dispatch('commentId', id)\n        this.$store.state.showComment = true\n      },\n      //下一首\n      nextMusic() {\n        if (this.mode === 1) {\n          this.$store.dispatch('curMusicIndex', this.curMusicIndex + 1)\n        } else if (this.mode === 2) {\n          this.$store.dispatch('curMusicIndex', this.randomId)\n        }\n      },\n      //上一首\n      prevMusic() {\n        if (this.mode === 1) {\n          !this.curMusicIndex\n            ? this.$store.dispatch('curMusicIndex', 0)\n            : this.$store.dispatch('curMusicIndex', this.curMusicIndex - 1)\n        } else if (this.mode === 2) {\n          this.$store.dispatch('curMusicIndex', this.randomId)\n        }\n      },\n      //切换播放模式\n      switchMode() {\n        this.mode < 3 ? this.mode++ : this.mode = 1\n      },\n      //拖动进度条\n      moveProgress(e) {\n        if (this.isMove) {\n          const pro = this.$refs.progress\n          const curWidth = (e.touches[0].clientX - pro.offsetLeft)\n          this.curProgress = curWidth - 5 + 'px'\n          this.curIdot = curWidth - 5 + 'px'\n          console.log(curTime)\n        }\n      },\n      //拖动进度条完毕\n      moveProgressEnd(e) {\n        this.isMove = false\n        const pro = this.$refs.progress\n        const curTime = (e.changedTouches[0].clientX - pro.offsetLeft) * pro.offsetWidth / this.allTime\n        this.$refs.audio.currentTime = curTime\n      },\n      //点击进度条更改播放进度\n      touchProgress(e) {\n        const curTime = (e.clientX - this.$refs.progress.offsetLeft) * this.$refs.progress.offsetWidth / this.allTime\n        console.log(curTime)\n        this.$refs.audio.currentTime = curTime\n      }\n    },\n    filters: {\n      //播放时间格式化\n      timeFormat(value) {\n        let min = parseInt(value / 60)\n        let sec = parseInt(value % 60)\n        min = min < 10 ? '0' + min : min\n        sec = sec < 10 ? '0' + sec : sec\n        return min + ':' + sec\n      },\n      //评论总数大于999时显示999+\n      commentTotalFormat(value) {\n        if (parseInt(value) >= 1000) {\n          return '999+'\n        } else {\n          return value\n        }\n      }\n    },\n    watch: {}\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .player {\n    position: fixed;\n    left: 0;\n    bottom: -2000px;\n    right: 0;background: url('../assets/images/bg.jpg');\n    background-color: #fff;\n    z-index: 1001;\n    &.show {\n      top: 0;\n      bottom: 0;\n    }\n    &.animated {\n      -webkit-animation-duration: .1s;\n      -moz-animation-duration: .1s;\n      -o-animation-duration: .1s;\n      animation-duration: .1s;\n    }\n    .player-wrap {\n      z-index: 1002;\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .player-header {\n    height: pr(56);\n    background-color: transparent !important;\n    h2 {\n      line-height: 1.1;\n      font-size: pr(16) !important;\n      span {\n        color: #ccc;\n        font-size: pr(12);\n      }\n    }\n  }\n\n  .player-panel1 {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: pr(56);\n    bottom: pr(110);\n    /*display: none;*/\n    .player-line {\n      height: 1px;\n      background-image: -webkit-linear-gradient(\n          to right,\n          rgba(0, 0, 0, 0),\n          rgba(255, 255, 255, .3),\n          rgba(0, 0, 0, 0)\n      );\n      background-image: linear-gradient(\n          to right,\n          rgba(0, 0, 0, 0),\n          rgba(255, 255, 255, .3),\n          rgba(0, 0, 0, 0)\n      );\n    }\n\n    .player-needle {\n      position: absolute;\n      z-index: 1;\n      top: -1px;\n      left: 46%;\n      height: pr(140);\n      img {\n        height: 100%;\n      }\n    }\n\n    .record-cover {\n      @include wh(pr(250));\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      left: 50%;\n      top: pr(80);\n      border-radius: 50%;\n      transform: translate(-50%, 0);\n      background-color: rgba(255, 255, 255, .2);\n      .record-bg {\n        @include wh(pr(246));\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-image: url(\"../assets/images/record-bg.png\");\n        background-size: 100% 100%;\n        &.rotate-bg {\n          animation: rotatebg 20s linear infinite;\n        }\n        @keyframes rotatebg {\n          0% {\n            transform: rotate(0deg);\n          }\n          50% {\n            transform: rotate(180deg);\n          }\n          100% {\n            transform: rotate(360deg);\n          }\n        }\n        .music-bg {\n          @include wh(pr(168));\n          border-radius: 50%;\n          overflow: hidden;\n          img {\n            @include wh(100%);\n          }\n        }\n      }\n    }\n\n    .player-bar {\n      position: absolute;\n      left: 50%;\n      bottom: pr(10);\n      transform: translate(-50%, 0);\n      display: flex;\n      width: 70%;\n      justify-content: space-around;\n      color: #fff;\n      .bar-item:nth-child(3) {\n        position: relative;\n        .comment-total {\n          position: absolute;\n          top: pr(-5);\n          right: pr(-12);\n          font-size: pr(8);\n          width: pr(21.5);\n          height: pr(10);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: rgba(0, 0, 0, .1);\n        }\n      }\n      .iconfont {\n        font-size: pr(18);\n        &:nth-child(2) {\n          font-size: pr(20);\n        }\n      }\n    }\n  }\n\n  .player-panel2 {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: pr(56);\n    bottom: pr(110);\n    color: #fff;\n    overflow: hidden;\n    ul {\n      padding-top: 65%;\n      transition: all .8s;\n      li {\n        font-size: pr(14);\n        /*padding: 5px 0;*/\n        line-height: 30px;\n        text-align: center;\n        color: #ccc;\n        &.on {\n          color: #fff;\n        }\n      }\n    }\n  }\n\n  .player-ctrl {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    height: pr(110);\n    color: #fff;\n    background-color: transparent;\n    .progress {\n      display: flex;\n      align-items: center;\n      padding: 0 pr(19);\n      margin-top: pr(15);\n      span {\n        font-size: pr(8);\n      }\n      .progress-bar {\n        flex: 1;\n        margin: 0 pr(5);\n        height: pr(2);\n        background-color: #9f9f9f;\n        .cur-progress {\n          width: 50%;\n          height: 100%;\n          background-color: $baseColor;\n        }\n        .idot {\n          position: relative;\n          @include wh(13px);\n          border-radius: 50%;\n          background-color: #fff;\n          top: pr(-8);\n        }\n      }\n    }\n    .player-conctrl {\n      margin-top: pr(22);\n      padding: 0 pr(15);\n      display: flex;\n      align-items: center;\n      justify-content: space-around;\n      > div i {\n        font-size: pr(20);\n      }\n      .ctrl {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        @include wh(pr(40));\n        border: 1px solid #fff;\n        border-radius: 50%;\n        i {\n          margin-top: pr(3);\n          margin-left: pr(3);\n          font-size: pr(18);\n          &.icon-zanting {\n            margin-top: 0;\n            margin-left: 0;\n          }\n        }\n      }\n      .play-list-btn {\n\n      }\n    }\n  }\n\n  .player-bg {\n    position: absolute;\n    left: -30%;\n    top: -30%;\n    width: 180%;\n    height: 180%;\n    z-index: 1001;\n    background-image: url(\"http://p1.music.126.net/y1JN20Yevr4e8j75QeWtQA==/1771313232347170.jpg\");\n    background-repeat: no-repeat;\n    background-size: 100% 100%;\n    filter: blur(70px) brightness(70%);\n  }\n</style>\n"
  },
  {
    "path": "src/components/Root.vue",
    "content": "<template>\n  <div class=\"root\">\n    <md-toolbar class=\"md-dense root\">\n      <md-button class=\"md-icon-button\">\n        <md-icon>menu</md-icon>\n      </md-button>\n      <h2 class=\"md-title\" style=\"flex: 1\">\n        <i class=\"iconfont\"\n           :class=\"{\n              'icon-yinyue': i === 0,\n              'icon-wangyiyunyinlezizhi': i === 1,\n              'icon-shejiao': i === 2,\n              'active': i === cur\n            }\"\n           @click=\"switchTab(i)\"\n           v-for=\"(n,i) in 3\"></i>\n      </h2>\n      <md-button class=\"md-icon-button\">\n        <router-link to=\"/search\">\n          <md-icon>search</md-icon>\n        </router-link>\n      </md-button>\n    </md-toolbar>\n    <transition :name=\"transitionName\">\n      <keep-alive :include=\"/Test/\">\n        <router-view class=\"root-child-view\"></router-view>\n      </keep-alive>\n    </transition>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {\n        cur: 1,\n        transitionName: ''\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n      //切换标签，当前高亮\n      switchTab(index) {\n        this.cur = index\n        switch (index) {\n          case 0:\n            this.$router.push({path: '/root/home'})\n            break\n          case 1:\n            this.$router.push({path: '/root/index'})\n            break\n        }\n      }\n    },\n    filters: {},\n    watch: {\n      //路由切换动画\n      $route(to,from) {\n        const arr = ['home','index','social']\n        const toIndex = arr.indexOf(to.path.split('/')[3])\n        const fromIndex = arr.indexOf(from.path.split('/')[3])\n        this.transitionName = toIndex < fromIndex ? 'root-slide-right':'root-slide-left'\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .md-toolbar.root {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 1000;\n    a {\n      color: rgba(255, 255, 255, .87) !important;\n    }\n    .md-title {\n      display: flex;\n      justify-content: center;\n      .iconfont {\n        color: #e58983;\n        &.active {\n          color: #fff;\n        }\n        &:not(:last-of-type) {\n          margin-right: pr(15);\n        }\n        &:nth-of-type(1) {\n          font-size: pr(20);\n        }\n        &:nth-of-type(2) {\n          font-size: pr(26);\n        }\n        &:nth-of-type(3) {\n          font-size: pr(24);\n        }\n      }\n    }\n  }\n\n  .root-child-view {\n    transition: all .3s cubic-bezier(.55, 0, .1, 1);\n    overflow: auto;\n  }\n\n  .root-slide-left-enter, .root-slide-right-leave-active {\n    opacity: 0;\n    -webkit-transform: translate(7.5rem, 0);\n    transform: translate(7.5rem, 0);\n    transition-delay: .3s;\n    -webkit-transition-delay: .3s;\n  }\n\n  .root-slide-left-leave-active, .root-slide-right-enter {\n    opacity: 0;\n    -webkit-transform: translate(-7.5rem, 0);\n    transform: translate(-7.5rem, 0);\n    transition-delay: .3s;\n    -webkit-transition-delay: .3s;\n  }\n  .root-slide-enter-active {\n    -webkit-transition: all .3s ease;\n    transition: all .3s ease;\n  }\n  .root-slide-leave-active {\n    -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n</style>\n"
  },
  {
    "path": "src/main.js",
    "content": "// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\nimport router from './router'\nimport store from './store'\nimport VueMaterial from 'vue-material'\nimport 'vue-material/dist/vue-material.css'\nimport VueAwesomeSwiper from 'vue-awesome-swiper'\n\nVue.use(VueAwesomeSwiper)\n\nVue.use(VueMaterial)\nVue.material.registerTheme({\n  default: {\n    primary: {\n      color: 'red',\n      hue: 700\n    }\n  }\n})\n\nimport './assets/css/reset.css'\nimport './assets/css/common.css'\nimport 'animate.css'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n  el: '#app',\n  router,\n  store,\n  template: '<App/>',\n  components: { App }\n})\n"
  },
  {
    "path": "src/page/Index/Index.vue",
    "content": "<template>\n  <div class=\"index\">\n    <md-button-toggle md-single class=\"index\">\n      <md-button class=\"md-toggle\"  @click.native=\"indexTab('recommend')\">个性推荐</md-button>\n      <md-button @click.native=\"indexTab('songlist')\">歌单</md-button>\n      <md-button @click.native=\"indexTab('radio')\">主播电台</md-button>\n      <md-button @click.native=\"indexTab('top')\">排行榜</md-button>\n    </md-button-toggle>\n    <transition :name=\"transitionName\">\n      <keep-alive>\n        <router-view class=\"index-child-view\"></router-view>\n      </keep-alive>\n    </transition>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n//  import Recommend from 'Recommend.vue'\n\n  export default {\n    data() {\n      return {\n        transitionName: ''\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n//      切换顶部标签\n      indexTab(tab) {\n        this.$router.push({path: `/root/index/${tab}`})\n      }\n    },\n    components: {\n//      Recommend\n    },\n    filters: {},\n    watch: {\n      $route(to, from) {\n//        获取path的最后路由，比较在arr中的索引位置，\n        const arr = ['recommend','songlist','radio','top']\n        const toIndex = arr.indexOf(to.path.split('/').pop())\n        const fromIndex = arr.indexOf(from.path.split('/').pop())\n        this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'\n        console.log(this.transitionName)\n//      取到路由的最后\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n  .index-tab {\n    display: flex;\n    li {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 0 !important;\n      height: pr(35);\n      flex: 1;\n      a:not(.md-button) {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: pr(14);\n        color: #666;\n        border-bottom: 2px solid #fff;\n        &:hover {\n          color: $baseColor;\n          text-decoration: none;\n          border-bottom-color: $baseColor;\n        }\n      }\n    }\n  }\n\n  .md-button-toggle.index {\n    position: fixed;\n    top:pr(48);\n    left:0;\n    right:0;\n    z-index:1000;\n  }\n  .md-theme-default.md-button-toggle {\n    display: flex;\n    .md-button {\n      flex: 1;\n      border-bottom: 3px solid #fff;\n      background-color: #fff;\n    }\n    .md-toggle {\n      color: $baseColor;\n      background-color: #fff !important;\n      border-bottom: 3px solid $baseColor;\n    }\n  }\n\n  /* 上面是为了保证滑动的时候不出现抖动情况 */\n  .index-child-view {\n    position: absolute;\n    left:0;\n    top: pr(84);\n    /*height: 100%;*/\n    width: 100%;\n    transition: all .3s cubic-bezier(.55,0,.1,1);\n    background-color: #fff;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  /* 当child-view的内容过多时会撑开child-view使得内部能够滚动 */\n  .slide-left-enter, .slide-right-leave-active {\n    opacity: 0;\n    -webkit-transform: translate(7.5rem, 0);\n    transform: translate(7.5rem, 0);\n    transition-delay: .3s;\n    -webkit-transition-delay: .3s;\n  }\n  .slide-left-leave-active, .slide-right-enter {\n    opacity: 0;\n    -webkit-transform: translate(-7.5rem, 0);\n    transform: translate(-7.5rem, 0);\n    transition-delay: .3s;\n    -webkit-transition-delay: .3s;\n  }\n  .slide-enter-active {\n    -webkit-transition: all .3s ease;\n    transition: all .3s ease;\n  }\n  .slide-leave-active {\n    -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n\n</style>\n"
  },
  {
    "path": "src/page/Index/Radio.vue",
    "content": "<template>\n    <div>\n      radio\n    </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {},\n    filters: {},\n    computed: {\n      ...mapState([])\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/page/Index/Recommend.vue",
    "content": "<template>\n  <div>\n    <swiper :options=\"swiperOption\">\n      <swiper-slide v-for=\"(item,index) in banners\" :key=\"index\">\n        <img :src=\"item.pic\" alt=\"\">\n      </swiper-slide>\n      <div class=\"swiper-pagination\" slot=\"pagination\"></div>\n    </swiper>\n    <div class=\"today-recommend\">\n      <div class=\"recommend-item animated pulse\">\n        <div class=\"circle-b\">\n          <div class=\"circle-t\">\n            <i class=\"iconfont icon-501\"></i>\n          </div>\n        </div>\n        <div class=\"item-name\">私人FM</div>\n      </div>\n      <div class=\"recommend-item animated pulse\">\n        <div class=\"circle-b\">\n          <i class=\"iconfont icon-rili\"></i>\n        </div>\n        <div class=\"item-name\">每日歌曲推荐</div>\n      </div>\n      <div class=\"recommend-item animated pulse\">\n        <div class=\"circle-b\">\n          <div class=\"circle-t\">\n            <i class=\"iconfont icon-paixing\"></i>\n          </div>\n        </div>\n        <div class=\"item-name\">云音乐热歌榜</div>\n      </div>\n    </div>\n    <div class=\"reco-list\">\n      <list-title :title=\"'推荐歌单'\"></list-title>\n      <ul class=\"recl-list3\">\n        <li class=\"reco-list-item3\" v-for=\"(item,index) in recommendList\" @click=\"toSongListDetail(item.id, item)\">\n          <div><img :src=\"item.picUrl\" alt=\"\"></div>\n          <p>{{item.name }}</p>\n        </li>\n      </ul>\n    </div>\n    <div class=\"reco-list\">\n      <list-title :title=\"'独家放送'\"></list-title>\n      <ul class=\"recl-list2\">\n        <li class=\"reco-list-item2\" v-for=\"(item,index) in dujiaList\">\n          <div>\n            <img :src=\"item.sPicUrl\" alt=\"\" v-if=\"index < 2\">\n            <img :src=\"item.picUrl\" alt=\"\" v-else>\n          </div>\n          <p>{{item.name }}</p>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n  import ListTitle from '@/components/ListTitle'\n\n\n  export default {\n    data() {\n      return {\n        swiperOption: {\n          pagination: '.swiper-pagination',\n          paginationClickable: true,\n          autoplay: 3000,\n          loop: true\n        },\n        banners: [],\n        recommendList: [],\n        dujiaList: []\n      }\n    },\n    computed: {\n      ...mapState([\n        'url'\n      ])\n    },\n    created() {\n      this.fetchBanner()\n      this.fetchRecommendList()\n      this.fetchDujia()\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n      //获取banner图\n      fetchBanner() {\n        axios.get(`${url}/banner`).then(res => {\n          this.banners = res.data.banners\n        })\n      },\n      //获取推荐歌单\n      fetchRecommendList() {\n        axios.get(`${url}/personalized`).then(res => {\n          this.recommendList = res.data.result\n        })\n      },\n      //独家放送\n      fetchDujia() {\n        axios.get(`${url}/personalized/privatecontent`).then(res => {\n          this.dujiaList = res.data.result\n          this.dujiaList = this.dujiaList.reverse()\n        })\n      },\n      //点击获取歌单详情\n      toSongListDetail(id, obj) {\n        this.$router.push({path: '/playlistdetail/' + id})\n        this.$store.dispatch('curPlaylistDetail',obj)\n      }\n    },\n    filters: {},\n    components: {\n      ListTitle\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n  .swiper-container {\n    height: pr(146);\n    .swiper-slide {\n      img {\n        @include wh(100%);\n        background-repeat: no-repeat;\n        background-size: 100% 100%;\n      }\n    }\n    .swiper-pagination-bullet {\n      background-color: #fff;\n      opacity: .5;\n    }\n    .swiper-pagination-bullet-active {\n      background: $baseColor;\n      opacity: 1;\n    }\n  }\n\n  .today-recommend {\n    display: flex;\n    align-items: center;\n    height: pr(93);\n    border-bottom: 1px solid #eee;\n\n    .recommend-item {\n      @include dfcc;\n      flex-direction: column;\n      flex: 1;\n      .circle-b {\n        @include dfcc;\n        @include wh(pr(95/2));\n        border-radius: 50%;\n        border: 1px solid $baseColor;\n        .iconfont {\n          font-size: pr(24);\n          color: $baseColor;\n        }\n      }\n    }\n    .item-name {\n      margin-top: pr(8);\n      font-size: pr(12);\n    }\n  }\n\n  .reco-list {\n    .recl-list3 {\n      display: flex;\n      flex-wrap: wrap;\n      .reco-list-item3 {\n        width: pr(248/2);\n        margin-bottom: pr(10);\n        margin-right: pr(1);\n        &:nth-child(3n) {\n          margin-right: 0;\n        }\n        div {\n          height: pr(248/2);\n          img {\n            @include wh(100%)\n          }\n        }\n        p {\n          padding: pr(5);\n          font-size: pr(12);\n          line-height: 1.6;\n          @include overhide(2)\n        }\n      }\n    }\n    .recl-list2 {\n      display: flex;\n      flex-wrap: wrap;\n      .reco-list-item2 {\n        width: pr(374/2);\n        margin-bottom: pr(10);\n        margin-right: pr(1);\n        &:nth-child(2n) {\n          margin-right: 0;\n        }\n        &:nth-child(3n) {\n          width: 100%;\n        }\n        div {\n          height: pr(248/2);\n          img {\n            @include wh(100%)\n          }\n        }\n        p {\n          padding: pr(5);\n          font-size: pr(12);\n          line-height: 1.6;\n          @include overhide(2)\n        }\n      }\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/page/Index/SongList.vue",
    "content": "<template>\n  <div>\n    songlist\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {\n\n      }\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n\n    },\n    filters: {\n\n    },\n    computed: {\n      ...mapState([\n\n      ])\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/page/Index/Top.vue",
    "content": "<template>\n    <div>\n      top\n    </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {},\n    filters: {},\n    computed: {\n      ...mapState([])\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/page/PlayListDetail.vue",
    "content": "<template>\n  <div id=\"playlist_detail\" ref=\"playlistdetail\"><!-- v-if=\"JSON.stringify(playlist) !== '{}'\"-->\n    <div>\n      <md-toolbar class=\"md-dense songlist\">\n        <md-button class=\"md-icon-button\">\n          <md-icon @click.native=\"back\">arrow_back</md-icon>\n        </md-button>\n        <h2 class=\"md-title\" style=\"flex: 1\">歌单</h2>\n        <md-button class=\"md-icon-button\">\n          <!--<md-icon @click.native=\"toHome\">search</md-icon>-->\n        </md-button>\n      </md-toolbar>\n      <div class=\"songlist-bg-wrap gradient-wrap\">\n        <div class=\"songlist-info\">\n          <div class=\"songlist-img\">\n            <img class=\"gradient-img\" :src=\"curPlaylistDetail.picUrl || playlist.creator.backgroundUrl\" alt=\"\">\n            <div class=\"play-views\" v-if=\"playlist.playCount\"><i\n              class=\"iconfont icon-erjiline\"></i>{{playlist.playCount | playCount}}万\n            </div>\n          </div>\n          <div class=\"songlist-title\">\n            <h3>{{curPlaylistDetail.name || playlist.name}}</h3>\n            <div class=\"songlist-avatar\">\n              <div class=\"songlist-avatar-img\">\n                <img :src=\"playlist.creator.avatarUrl\" alt=\"\" v-if=\"JSON.stringify(playlist) !== '{}'\">\n                <img src=\"../assets/images/playlist-avatar.png\" alt=\"\" v-else>\n              </div>\n              <span v-if=\"JSON.stringify(playlist) !== '{}'\">{{playlist.creator.nickname}} </span><i\n              class=\"iconfont icon-jiantou\"></i>\n            </div>\n          </div>\n        </div>\n        <div class=\"songlist-operating\">\n          <div class=\"songlist-op-item\"><i\n            class=\"iconfont icon-wenjianjia\"></i><span>{{playlist.subscribedCount || '收藏'}}</span>\n          </div>\n          <div class=\"songlist-op-item\"><i\n            class=\"iconfont icon-pinglun\"></i><span>{{playlist.commentCount || '评论'}}</span>\n          </div>\n          <div class=\"songlist-op-item\"><i\n            class=\"iconfont icon-icglobaltitlebar48iconfontshare\"></i><span>{{playlist.shareCount || '分享'}}</span></div>\n          <div class=\"songlist-op-item\"><i class=\"iconfont icon-download\"></i><span>下载</span></div>\n        </div>\n        <div class=\"songlist-bg\" ref=\"songlist_bg\"\n             :style=\"`backgroundImage: url(${this.curPlaylistDetail.picUrl});`\"></div>\n      </div>\n      <div class=\"song-list\">\n        <div class=\"play-bar\">\n          <div class=\"play-bar-btn\"><i\n            class=\"iconfont icon-iconfont31\"></i>播放全部<span\n            v-if=\"JSON.stringify(playlist) !== '{}'\">(共{{playlist.tracks.length}}首)</span></div>\n        </div>\n        <div class=\"song-item\" v-for=\"(item,index) in playlist.tracks\">\n          <div class=\"song-index\">{{index + 1}}</div>\n          <div class=\"song-info\" @click=\"playMusic(item.id)\">\n            <p class=\"song-name\">{{item.name}}<span class=\"song-desc\" v-show=\"item.alia[0]\">{{item.alia[0]}}</span></p>\n            <p class=\"song-singer\"><span v-for=\"(itemname,index) in item.ar\">{{itemname.name}}/</span> - {{item.al.name}}\n            </p>\n          </div>\n          <div class=\"song-option\">\n            <i class=\"iconfont icon-more1170511easyiconnet\"></i>\n          </div>\n        </div>\n      </div>\n      <div class=\"playlist-loading\" v-if=\"loading\">\n        <md-spinner :md-size=\"40\" md-indeterminate></md-spinner>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../assets/js/api'\n  import Grade from 'grade-js'\n  import filters from '../assets/js/filters'\n\n  export default {\n    data() {\n      return {\n        playlist: {},\n        playListPanel: [], //存放播放列表\n        loading: true\n      }\n    },\n    computed: {\n      ...mapState([\n        'curPlaylistDetail'\n      ]),\n    },\n    created() {\n      this.fetchSongList()\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n//      歌单详情\n      fetchSongList() {\n        axios.get(`${url}/playlist/detail?id=${this.$route.params.id}`).then(res => {\n          //获取完毕隐藏loading\n          this.loading = false\n          this.playlist = res.data.playlist\n          let songObj\n          //添加当前歌单到播放列表面板\n          this.playlist.tracks.forEach((val) => {\n            songObj = {\n              id: val.id,\n              name: val.name,\n              artist: val.ar\n            }\n            this.playListPanel.push(songObj);\n          })\n//          console.log(this.playListPanel)\n        }).catch(err => {\n          console.error(err)\n        })\n      },\n      back() {\n        this.$router.go(-1)\n      },\n      playMusic(id) {\n        this.$store.state.showPlayer = true\n        function getUrl() {\n          return axios.get(`${url}/music/url?id=${id}`)\n        }\n\n        function getDetail() {\n          return axios.get(`${url}/song/detail?ids=${id}`)\n        }\n\n        function getLyric() {\n          return axios.get(`${url}/lyric?id=${id}`)\n        }\n        //获取歌曲信息，并统一存入vuex中\n        axios.all([getUrl(), getDetail(), getLyric()])\n          .then(axios.spread((res1, res2, res3) => {\n            const arr = [res1, res2, res3]\n            this.$store.dispatch('curPlayMusic', arr)\n            this.$store.dispatch('switchPlaying', true)\n            this.$store.dispatch('playList', this.playListPanel)\n//            console.log(this.playListPanel)\n          }))\n      },\n    },\n    //歌单播放次数过滤器\n    filters: filters,\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../assets/css/base';\n\n  .md-toolbar.songlist {\n    position: fixed;\n    left: 0;\n    top: 0;\n    right: 0;\n    background-color: rgba(255, 255, 255, 0.05);\n    z-index: 1;\n    h2 {\n      font-size: pr(14);\n    }\n  }\n\n  .songlist-bg-wrap {\n    position: relative;\n    height: pr(220);\n    background-color: rgba(64, 46, 32, 0.58);\n    padding: pr(50) pr(20) pr(10);\n    color: #fff;\n    overflow: hidden;\n    .songlist-info {\n      display: flex;\n      .songlist-img {\n        position: relative;\n        @include wh(pr(116));\n        img {\n          @include wh(100%)\n        }\n        .play-views {\n          display: flex;\n          align-items: center;\n          position: absolute;\n          right: pr(5);\n          top: pr(5);\n          font-size: pr(10);\n          i {\n            margin-right: pr(3);\n            font-size: pr(10);\n          }\n        }\n      }\n      .songlist-title {\n        flex: 1;\n        margin-left: pr(20);\n        padding-top: pr(10);\n        h3 {\n          line-height: 1.4;\n          font-size: pr(14);\n        }\n        .songlist-avatar {\n          display: flex;\n          align-items: center;\n          margin-top: pr(25);\n          .songlist-avatar-img {\n            overflow: hidden;\n            border-radius: 50%;\n            @include ava(pr(24))\n          }\n          span {\n            margin-left: pr(10);\n            font-size: pr(12);\n          }\n          .iconfont {\n            font-size: pr(10);\n          }\n        }\n      }\n    }\n    .songlist-operating {\n      display: flex;\n      align-items: center;\n      margin-top: pr(5);\n      height: pr(48);\n      .songlist-op-item {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        flex: 1;\n        i {\n          font-size: pr(16);\n        }\n        span {\n          margin-top: pr(3);\n          font-size: pr(12);\n        }\n      }\n    }\n    .songlist-bg {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      z-index: -1;\n      background-size: 100% 100%;\n      background-repeat: no-repeat;\n      filter: blur(35px)\n    }\n  }\n\n  .song-list {\n    $border_b: #e6e6e6;\n    $c888: #888;\n    .play-bar {\n      display: flex;\n      height: pr(46);\n      padding: 0 pr(15);\n      align-items: center;\n      border-bottom: 1px solid $border_b;\n      .play-bar-btn {\n        font-size: pr(14);\n        .iconfont {\n          font-size: pr(18);\n          margin-right: pr(10);\n        }\n        span {\n          margin-left: pr(5);\n          font-size: pr(12);\n          color: $c888;\n        }\n      }\n    }\n    .song-item {\n      display: flex;\n      height: pr(50);\n      border-bottom: 1px solid $border_b;\n      .song-index {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: pr(45);\n      }\n      .song-info {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        flex: 1;\n        overflow: hidden;\n        .song-name {\n          line-height: 1.2;\n          font-size: pr(14);\n          @include ell;\n          .song-desc {\n            color: $c888;\n            font-size: pr(12);\n          }\n        }\n        .song-singer {\n          line-height: 1.2;\n          margin-top: pr(3);\n          color: $c888;\n          font-size: pr(10);\n          @include ell;\n        }\n      }\n      .song-option {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: pr(45);\n        color: $c888;\n      }\n    }\n  }\n\n  .playlist-loading {\n    text-align: center;\n    margin-top:pr(80);\n  }\n</style>\n"
  },
  {
    "path": "src/page/home/Home.vue",
    "content": "<template>\n    <div>\n      home\n    </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {},\n    filters: {},\n    computed: {\n      ...mapState([])\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/page/search/Album.vue",
    "content": "<template>\n  <ul id=\"search-albums\">\n    <list-item :item=\"album\" v-for=\"(album,index) in albums\" :key=\"index\"></list-item>\n  </ul>\n</template>\n\n<script type=\"text/ecmascript-6\"  >\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n  import ListItem from './ListItem'\n\n  export default {\n    data() {\n      return {\n        word: '',\n        albums: []\n      }\n    },\n    props: {\n      searchKey: {\n        type: String,\n        required: true\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.getAlbum(this.searchKey)\n      })\n    },\n    methods: {\n      //专辑组件\n      getAlbum(key) {\n        axios.get(`${url}/search?keywords=${key}&type=10`).then(res => {\n          this.albums = res.data.result.albums\n        })\n      }\n    },\n    filters: {},\n    components: {ListItem},\n    watch: {\n      searchKey(val, old) {\n        this.getAlbum(val)\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/page/search/Artist.vue",
    "content": "<template>\n  <ul id=\"search-artist\"\n      @touchstart=\"touchStart\"\n      @touchmove=\"touchMove\">\n    <li class=\"search-artist-item\" v-for=\"(item,index) in artists\">\n      <div class=\"s-artist-avatar\">\n        <img :src=\"item.picUrl\" alt=\"\">\n      </div>\n      <div class=\"s-artist-name\">\n        {{item.name}}<span v-if=\"item.alias.length > 0\">（{{item.alias[0]}}）</span>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n\n  export default {\n    data() {\n      return {\n        word: '',\n        artists: []\n      }\n    },\n    props: {\n      searchKey: {\n        type: String,\n        required: true\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.getArtist(this.searchKey)\n      })\n    },\n    methods: {\n      //艺术家信息\n      getArtist(key) {\n        axios.get(`${url}/search?keywords=${key}&type=100`).then(res => {\n          this.artists = res.data.result.artists\n        })\n      }\n    },\n    filters: {},\n    watch: {\n      searchKey(val, old) {\n        this.getArtist(val)\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n  .search-artist-item {\n    display: flex;\n    align-items: center;\n    padding: pr(3) pr(6);\n    border-bottom: 1px solid #e0e0e0;\n    .s-artist-avatar {\n      @include ava(pr(50))\n    }\n    .s-artist-name {\n      flex: 1;\n      padding-left: pr(10);\n      font-size: pr(14);\n      span {\n        color: #888;\n      }\n    }\n  }\n\n</style>\n"
  },
  {
    "path": "src/page/search/ListItem.vue",
    "content": "<template>\n  <li class=\"search-album-item\">\n    <div class=\"s-album-avatar\">\n      <img :src=\"item.picUrl\" alt=\"\">\n    </div>\n    <div class=\"s-album-avatar-bg\">\n      <img src=\"../../assets/images/search-artist-bg.png\" alt=\"\">\n    </div>\n    <div class=\"s-album-name\">\n      <p>{{item.name}}</p>\n      <p>{{item.name || null}}</p>\n    </div>\n  </li>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n\n  export default {\n    data() {\n      return {}\n    },\n    props: {\n      item: {\n        type: Object,\n        required: true\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n\n      })\n    },\n    methods: {\n\n    },\n    filters: {},\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/base';\n\n    .search-album-item {\n      display: flex;\n      align-items: center;\n      padding: pr(3) pr(6);\n      border-bottom: 1px solid #e0e0e0;\n      .s-album-avatar {\n        @include ava(pr(50))\n      }\n      .s-album-avatar-bg {\n        height: pr(46);\n        img {\n          height: 100%;\n        }\n      }\n      .s-album-name {\n        flex: 1;\n        overflow: hidden;\n        padding-left: pr(10);\n        p {\n          @include ell;\n          line-height:1.2;\n          &:first-of-type {\n            font-size: pr(14);\n          }\n          &:nth-of-type(2) {\n            margin-top: pr(8);\n            font-size: pr(10);\n            color: #666;\n          }\n        }\n      }\n    }\n</style>\n"
  },
  {
    "path": "src/page/search/Search.vue",
    "content": "<template>\n  <div id=\"search\">\n    <md-toolbar class=\"md-dense search\">\n      <md-button class=\"md-icon-button\">\n        <md-icon @click.native=\"back\">arrow_back</md-icon>\n      </md-button>\n      <input type=\"text\"\n             placeholder=\"搜索音乐、歌手、歌词、用户\"\n             @keydown=\"searchData\"\n             @focus=\"showSuggest = searchKey !== '' ? true: false\"\n             v-model=\"searchKey\">\n      <i class=\"iconfont icon-search\" @click=\"toChild\"></i>\n    </md-toolbar>\n    <div class=\"hot-search\" :style=\"{height:windowHeight + 'px'}\">\n      <p>热门搜索</p>\n      <ul class=\"hot-search-list\">\n        <li v-for=\"(item,index) in hotSearch\" @click=\"searchHotKey(item)\">{{item}}</li>\n      </ul>\n    </div>\n    <md-button-toggle md-single class=\"search-button-toggle\" v-if=\"showSearchType\">\n      <md-button class=\"md-toggle\" @click.native=\"searchTab('song')\">单曲</md-button>\n      <md-button @click.native=\"searchTab('artist')\">歌手</md-button>\n      <md-button @click.native=\"searchTab('album')\">专辑</md-button>\n      <md-button @click.native=\"searchTab('list')\">歌单</md-button>\n    </md-button-toggle>\n    <div class=\"search-suggest\" v-show=\"showSuggest\">\n      <div class=\"search-key\" @click=\"toChild\">搜索“{{searchKey}}”</div>\n      <ul v-if=\"suggestSongs.length !== 0\">\n        <li v-for=\"(item,index) in suggestSongs\"\n            @click=\"playMusicFromSearch(item.id)\"><i\n          class=\"iconfont icon-sousuo\"></i>{{item.name}} - {{item.artists[0].name}}\n        </li>\n      </ul>\n    </div>\n    <transition :name=\"transitionName\">\n      <keep-alive>\n        <router-view\n          class=\"search-child-view\"\n          :search-key=\"searchKeyProps\"\n        ></router-view>\n        <!--通过props传递搜索词给搜索结果组件-->\n      </keep-alive>\n    </transition>\n  </div>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n\n  export default {\n    data() {\n      return {\n        transitionName: '',\n        showSuggest: false,\n        searchKey: '',\n        searchKeyProps: '',\n        suggestSongs: [],\n        searching: false,\n        showSearchType: false,\n        hotSearch: ['跨界歌王', '老大', '暧昧', '告白气球', '演员', '薛之谦', '因你', '张碧晨', '杨宗纬', '凉凉'],\n        windowHeight: 0\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.windowHeight = document.documentElement.clientHeight\n      })\n    },\n    methods: {\n      searchTab(tab) {\n        this.$router.replace({path: `/search/${tab}`})\n      },\n      //按键的时候搜索显示推荐内容\n      searchData(e) {\n        if (e.keyCode === 13) {\n          this.toChild()\n        } else {\n          axios.get(`${url}/search/suggest?keywords=${this.searchKey}`).then(res => {\n            this.showSuggest = true\n            if (res.data.code === 200) {\n              this.suggestSongs = res.data.result.songs\n            } else if (res.data.code === 400) {\n              this.suggestSongs = []\n              this.showSuggest = false\n            }\n          })\n        }\n      },\n      //下拉搜索推荐点击播放\n      playMusicFromSearch(id) {\n        function getUrl() {\n          return axios.get(`${url}/music/url?id=${id}`)\n        }\n\n        function getDetail() {\n          return axios.get(`${url}/song/detail?ids=${id}`)\n        }\n\n        function getLyric() {\n          return axios.get(`${url}/lyric?id=${id}`)\n        }\n\n        axios.all([getUrl(), getDetail(), getLyric()])\n          .then(axios.spread((res1, res2, res3) => {\n            const arr = [res1, res2, res3]\n            this.$store.dispatch('curPlayMusic', arr)\n            this.$store.state.showPlayer = true\n          }))\n      },\n      //跳转到歌曲搜索结果页，由于通过props传递了搜索词，song组件会加载时就获取信息\n      toChild() {\n        this.$router.push({path: '/search/song'})\n        this.searchKeyProps = this.searchKey\n        this.showSuggest = false\n        this.showSearchType = true\n      },\n      //点击伪热搜词也会跳转到结果页\n      searchHotKey(key) {\n        this.searchKey = key\n        this.toChild()\n      },\n      back() {\n        this.$router.go(-1)\n      }\n    },\n    filters: {},\n    watch: {\n      $route(to, from) {\n        const arr = ['song', 'artist', 'album', 'list']\n        const toIndex = arr.indexOf(to.path.split('/').pop())\n        const fromIndex = arr.indexOf(from.path.split('/').pop())\n        this.transitionName = toIndex < fromIndex ? 'search-slide-right' : 'search-slide-left'\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n  #search {\n    > ul {\n      min-height:pr(400);\n    }\n    .md-toolbar {\n      position: fixed;\n      left: 0;\n      top: 0;\n      right: 0;\n      z-index: 1000;\n      input {\n        flex: 1;\n        margin-right: pr(5);\n        height: pr(30);\n        background-color: transparent;\n        border: none;\n        padding-bottom: 0;\n        border-bottom: 1px solid #fff;\n        color: #fff;\n        &::-webkit-input-placeholder {\n          color: #e07770;\n        }\n        &:focus {\n          outline: none;\n        }\n      }\n      .iconfont {\n        display: inline-block;\n        font-size: pr(20)\n      }\n    }\n    .hot-search {\n      box-sizing: border-box;\n      padding: pr(100) pr(10);\n      p {\n        font-size: pr(12);\n        color: #666;\n        margin-bottom: pr(11);\n      }\n      .hot-search-list {\n        display: flex;\n        flex-wrap: wrap;\n        li {\n          padding: pr(7) pr(11);\n          margin: pr(0) pr(8) pr(8) 0;\n          border: 1px solid #dcdcdc;\n          border-radius: pr(25);\n          font-size: pr(14);\n        }\n      }\n    }\n    .md-button-toggle.search-button-toggle {\n      position: fixed;\n      top: pr(48);\n      left: 0;\n      right: 0;\n      display: flex;\n      z-index: 1000;\n      .md-button {\n        flex: 1;\n        font-size: pr(13);\n        border-bottom: 3px solid #fff;\n        background-color: #fff;\n      }\n      .md-toggle {\n        color: $baseColor;\n        background-color: #fff !important;\n        border-bottom: 3px solid $baseColor;\n      }\n    }\n\n    .search-suggest {\n      position: fixed;\n      z-index: 1001;\n      top: pr(48);\n      left: pr(15);\n      right: pr(33);\n      background-color: #f3f3f3;\n      box-shadow: 3px 3px 10px #ccc, -1px 3px 10px #ccc;\n      transition: all .3s;\n      .search-key {\n        padding: pr(15) pr(13);\n        color: #679dc5;\n      }\n      ul {\n        li {\n          padding: pr(15) pr(13);\n          border-top: 1px solid #e5e5e5;\n          color: #666;\n          font-size: pr(14);\n          @include ell;\n          .iconfont {\n            margin-right: pr(8);\n          }\n        }\n      }\n    }\n\n    .search-child-view {\n      position: absolute;\n      top: pr(86.4);\n      left: 0;\n      width: 100%;\n      transition: all .3s cubic-bezier(.55, 0, .1, 1);\n      background-color: #f2f4f5;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n    .search-slide-left-enter, .search-slide-right-leave-active {\n      opacity: 0;\n      -webkit-transform: translate(7.5rem, 0);\n      transform: translate(7.5rem, 0);\n      transition-delay: .3s;\n      -webkit-transition-delay: .3s;\n    }\n    .search-slide-left-leave-active, .search-slide-right-enter {\n      opacity: 0;\n      -webkit-transform: translate(-7.5rem, 0);\n      transform: translate(-7.5rem, 0);\n      transition-delay: .3s;\n      -webkit-transition-delay: .3s;\n    }\n    .search-slide-enter-active {\n      -webkit-transition: all .3s ease;\n      transition: all .3s ease;\n    }\n    .search-slide-leave-active {\n      -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n    }\n  }\n</style>\n"
  },
  {
    "path": "src/page/search/Song.vue",
    "content": "<template>\n    <ul id=\"search-song\">\n      <li class=\"search-song-item\" v-for=\"(item,index) in songs\">\n        <div class=\"search-song-info\" @click=\"playMusicFromSearch(item.id)\">\n          <p class=\"search-song-name\">{{item.name}}</p>\n          <p class=\"search-song-artist\"><span v-for=\"(v,i) in item.artists\">{{v.name}}<span v-show=\"i !== item.artists.length - 1\">/</span></span> - {{item.album.name}}</p>\n        </div>\n        <div class=\"search-song-btn\">\n          <i class=\"iconfont icon-more1170511easyiconnet\"></i>\n        </div>\n      </li>\n    </ul>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n\n  export default {\n    data() {\n      return {\n        word: '',\n        songs: []\n      }\n    },\n    props:{\n      searchKey: {\n        type: String,\n        required: true\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.getSong(this.searchKey)\n      })\n    },\n    methods: {\n      //点击播放\n      getSong(key) {\n        axios.get(`${url}/search?keywords=${key}`).then(res => {\n          this.songs = res.data.result.songs\n        })\n      },\n      playMusicFromSearch(id) {\n        function getUrl() {\n          return axios.get(`${url}/music/url?id=${id}`)\n        }\n\n        function getDetail() {\n          return axios.get(`${url}/song/detail?ids=${id}`)\n        }\n\n        function getLyric() {\n          return axios.get(`${url}/lyric?id=${id}`)\n        }\n        axios.all([getUrl(), getDetail(), getLyric()])\n          .then(axios.spread((res1, res2, res3) => {\n            const arr = [res1, res2, res3]\n            this.$store.dispatch('curPlayMusic', arr)\n            this.$store.state.showPlayer = true\n          }))\n      }\n    },\n    filters: {\n      //高亮搜索词\n      lightWord(value) {\n        console.log(this.searchKey)\n        const length = this.searchKey.length\n        const index = value.indexOf(this.searchKey)\n        return value.substr(index, 2)\n      }\n    },\n    watch: {\n      searchKey(val, old) {\n        this.word = val\n        this.getSong(val)\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n    @import '../../assets/css/base';\n\n    #search-song {\n      .search-song-item {\n        display: flex;\n        align-items: center;\n        padding:pr(15) pr(7);\n        border-bottom:1px solid #dee0e1;\n        .search-song-info {\n          flex:1;\n        }\n        .search-song-name {\n          font-size:pr(14);\n          @include ell;\n        }\n        .search-song-artist {\n          margin-top:pr(10);\n          font-size:pr(12);\n          @include ell;\n        }\n        .iconfont {\n          color:#888;\n        }\n      }\n    }\n</style>\n"
  },
  {
    "path": "src/page/search/list.vue",
    "content": "<template>\n  <ul id=\"search-list\">\n    <li class=\"search-album-item\"\n        v-for=\"(item,index) in list\"\n        @click=\"toSongListDetail(item.id, item)\">\n      <div class=\"s-album-avatar\">\n        <img :src=\"item.coverImgUrl\" alt=\"\">\n      </div>\n      <div class=\"s-album-name\">\n        <p>{{item.name}}</p>\n        <p>{{item.trackCount}}首 by {{item.creator.nickname}} 播放 {{item.playCount | playCount}}次</p>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<script type=\"text/ecmascript-6\">\n  import axios from 'axios'\n  import {mapState} from 'vuex'\n  import url from '../../assets/js/api'\n\n  export default {\n    data() {\n      return {\n        word: '',\n        list:[]\n      }\n    },\n    props: {\n      searchKey: {\n        type: String,\n        required: true\n      }\n    },\n    computed: {\n      ...mapState([])\n    },\n    mounted() {\n      this.$nextTick(() => {\n        this.getList(this.searchKey)\n      })\n    },\n    methods: {\n      //获取歌单信息\n      getList(key) {\n        axios.get(`${url}/search?keywords=${key}&type=1000`).then(res => {\n          this.list = res.data.result.playlists\n        })\n      },\n      //跳转到歌单详情页\n      toSongListDetail(id, obj) {\n        this.$router.push({path: '/playlistdetail/' + id})\n        this.$store.dispatch('curPlaylistDetail',obj)\n      }\n    },\n    filters: {\n      playCount(value) {\n        if (value < 100000) {\n            return value\n        } else {\n          return (value / 10000).toFixed(1)  + '万'\n        }\n      }\n    },\n    watch: {\n      searchKey(val, old) {\n        this.getList(val)\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" type=\"text/scss\">\n  @import '../../assets/css/base';\n\n</style>\n"
  },
  {
    "path": "src/router/index.js",
    "content": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport Root from '@/components/Root'\n\nimport Index from '../page/index/Index'\nimport Recommend from '../page/index/Recommend'\nimport SongList from '../page/index/SongList'\nimport Radio from '../page/index/Radio'\nimport Top from '../page/index/Top'\n\nimport Home from '../page/home/Home'\nimport PlayListDetail from '../page/PlayListDetail'\nimport Search from '../page/search/Search'\nimport Song from '../page/search/Song'\nimport Artist from '../page/search/Artist'\nimport Album from '../page/search/Album'\nimport List from '../page/search/list.vue'\n\n\nVue.use(Router)\n\nexport default new Router({\n  routes: [\n    {\n      path: '/',\n      redirect: '/root/index'\n    },\n    {\n      path: '/root',\n      name: 'Root',\n      component: Root,\n      children: [\n        {\n          path: 'index',\n          name: 'Test',\n          component: Index,\n          redirect: 'index/recommend',\n          children: [\n            {\n              path: 'recommend',\n              name: 'recommend',\n              component: Recommend\n            },\n            {\n              path: 'songlist',\n              component: SongList\n            },\n            {\n              path: 'radio',\n              component: Radio\n            },\n            {\n              path: 'top',\n              component: Top\n            }\n          ]\n        },\n        {\n          path: 'home',\n          component: Home\n        },\n      ]\n    },\n    {\n      path: '/playlistdetail/:id',\n      component: PlayListDetail\n    },\n    {\n      path: '/search',\n      component: Search,\n      redirect: '',\n      children: [\n        {\n          path: 'song',\n          component: Song\n        },\n        {\n          path: 'artist',\n          component: Artist\n        },\n        {\n          path: 'album',\n          component: Album\n        },\n        {\n          path: 'list',\n          component: List\n        }\n      ]\n    }\n  ]\n})\n"
  },
  {
    "path": "src/store/actions.js",
    "content": "/**\n * Created by 12 on 2017/6/8.\n */\nimport * as types from './mutation-type'\n\nexport default {\n  curPlaylistDetail({commit}, obj) {\n    commit(types.CUR_PLAYLIST_INFO, obj)\n  },\n  curPlayMusic({commit}, arr) {\n    commit(types.CUR_PLAY_MUSIC, arr)\n  },\n  switchPlaying({commit}, status) {\n    commit(types.SWITCH_PLAYING, status)\n  },\n  showCurLyric({commit}, lyric) {\n    commit(types.SHOW_CUR_LYRIC, lyric)\n  },\n  showPlayList({commit}, status) {\n    commit(types.SHOW_PLAY_LIST, status)\n  },\n  playList({commit}, arr) {\n    commit(types.PLAY_LIST, arr)\n  },\n  commentId({commit}, id) {\n    commit(types.COMMENT_ID, id)\n  },\n  curMusicIndex({commit}, index) {\n    commit(types.CUR_MUSIC_INDEX, index)\n  }\n}\n"
  },
  {
    "path": "src/store/getters.js",
    "content": "/**\n * Created by 12 on 2017/6/14.\n */\n\nexport default {\n  curId(state) {\n    return state.curPlayMusic.detail ? state.curPlayMusic.detail.id : null\n  }\n}\n"
  },
  {
    "path": "src/store/index.js",
    "content": "import Vue from 'vue'\nimport Vuex from 'vuex'\nimport mutations from './mutations'\nimport actions from './actions'\nimport getters from './getters'\n\nVue.use(Vuex)\n\nconst state = {\n  curPlaylistDetail: {},\n  curPlayMusic: {},\n  playing: false,\n  showPlayer: false,\n  curLyric: '',\n  showPlayList: false,\n  playList: [],\n  showCover: false,\n  commentId: null,\n  showComment: false,\n  curMusicIndex: 0\n}\n\nexport default new Vuex.Store({\n  state,\n  mutations,\n  actions,\n  getters\n})\n"
  },
  {
    "path": "src/store/mutation-type.js",
    "content": "//歌单页当前歌单上面图片标题信息\nexport const CUR_PLAYLIST_INFO= 'CUR_PLAYLIST_INFO'\n//当前播放的歌曲信息:歌名,歌手，专辑，歌词，url，封面\nexport const CUR_PLAY_MUSIC= 'CUR_PLAY_MUSIC'\n//切换播放状态\nexport const SWITCH_PLAYING = 'SWITCH_PLAYING'\n//播放导航显示的歌词\nexport const SHOW_CUR_LYRIC = 'SHOW_CUR_LYRIC'\n//控制显示播放列表\nexport const SHOW_PLAY_LIST = 'SHOW_PLAY_LIST'\n//存储播放列表\nexport const PLAY_LIST = 'PLAY_LIST'\n//当前歌曲评论id\nexport const COMMENT_ID = 'COMMENT_ID'\n//当前歌曲在播放列表的索引\nexport const CUR_MUSIC_INDEX = 'CUR_MUSIC_INDEX'\n"
  },
  {
    "path": "src/store/mutations.js",
    "content": "/**\n * Created by 12 on 2017/6/8.\n */\nimport * as types from './mutation-type'\n\nexport default {\n  [types.CUR_PLAYLIST_INFO](state, obj) {\n    state.curPlaylistDetail = obj\n  },\n  [types.CUR_PLAY_MUSIC](state, arr) {\n    const obj = {\n      url: arr[0].data.data[0].url,\n      detail: arr[1].data.songs[0],\n      lrc: arr[2].data.lrc\n    }\n    state.curPlayMusic = obj\n  },\n  [types.SWITCH_PLAYING](state, status) {\n    state.playing = status\n  },\n  [types.SHOW_CUR_LYRIC](state, lyric) {\n    state.curLyric = lyric\n  },\n  [types.SHOW_PLAY_LIST](state, status) {\n    state.showPlayList = status\n    state.showCover = status\n  },\n  [types.PLAY_LIST](state, arr) {\n    state.playList = arr\n  },\n  [types.COMMENT_ID](state, id) {\n    state.commentId = id\n  },\n  [types.CUR_MUSIC_INDEX](state, index) {\n    state.curMusicIndex = index\n  }\n}\n"
  },
  {
    "path": "static/.gitkeep",
    "content": ""
  },
  {
    "path": "static/iconfont/MaterialIcons-Regular.ijmap",
    "content": "{\"icons\":{\"e84d\":{\"name\":\"3d Rotation\"},\"eb3b\":{\"name\":\"Ac Unit\"},\"e190\":{\"name\":\"Access Alarm\"},\"e191\":{\"name\":\"Access Alarms\"},\"e192\":{\"name\":\"Access Time\"},\"e84e\":{\"name\":\"Accessibility\"},\"e914\":{\"name\":\"Accessible\"},\"e84f\":{\"name\":\"Account Balance\"},\"e850\":{\"name\":\"Account Balance Wallet\"},\"e851\":{\"name\":\"Account Box\"},\"e853\":{\"name\":\"Account Circle\"},\"e60e\":{\"name\":\"Adb\"},\"e145\":{\"name\":\"Add\"},\"e439\":{\"name\":\"Add A Photo\"},\"e193\":{\"name\":\"Add Alarm\"},\"e003\":{\"name\":\"Add Alert\"},\"e146\":{\"name\":\"Add Box\"},\"e147\":{\"name\":\"Add Circle\"},\"e148\":{\"name\":\"Add Circle Outline\"},\"e567\":{\"name\":\"Add Location\"},\"e854\":{\"name\":\"Add Shopping Cart\"},\"e39d\":{\"name\":\"Add To Photos\"},\"e05c\":{\"name\":\"Add To Queue\"},\"e39e\":{\"name\":\"Adjust\"},\"e630\":{\"name\":\"Airline Seat Flat\"},\"e631\":{\"name\":\"Airline Seat Flat Angled\"},\"e632\":{\"name\":\"Airline Seat Individual Suite\"},\"e633\":{\"name\":\"Airline Seat Legroom Extra\"},\"e634\":{\"name\":\"Airline Seat Legroom Normal\"},\"e635\":{\"name\":\"Airline Seat Legroom Reduced\"},\"e636\":{\"name\":\"Airline Seat Recline Extra\"},\"e637\":{\"name\":\"Airline Seat Recline Normal\"},\"e195\":{\"name\":\"Airplanemode Active\"},\"e194\":{\"name\":\"Airplanemode Inactive\"},\"e055\":{\"name\":\"Airplay\"},\"eb3c\":{\"name\":\"Airport Shuttle\"},\"e855\":{\"name\":\"Alarm\"},\"e856\":{\"name\":\"Alarm Add\"},\"e857\":{\"name\":\"Alarm Off\"},\"e858\":{\"name\":\"Alarm On\"},\"e019\":{\"name\":\"Album\"},\"eb3d\":{\"name\":\"All Inclusive\"},\"e90b\":{\"name\":\"All Out\"},\"e859\":{\"name\":\"Android\"},\"e85a\":{\"name\":\"Announcement\"},\"e5c3\":{\"name\":\"Apps\"},\"e149\":{\"name\":\"Archive\"},\"e5c4\":{\"name\":\"Arrow Back\"},\"e5db\":{\"name\":\"Arrow Downward\"},\"e5c5\":{\"name\":\"Arrow Drop Down\"},\"e5c6\":{\"name\":\"Arrow Drop Down Circle\"},\"e5c7\":{\"name\":\"Arrow Drop Up\"},\"e5c8\":{\"name\":\"Arrow Forward\"},\"e5d8\":{\"name\":\"Arrow Upward\"},\"e060\":{\"name\":\"Art Track\"},\"e85b\":{\"name\":\"Aspect Ratio\"},\"e85c\":{\"name\":\"Assessment\"},\"e85d\":{\"name\":\"Assignment\"},\"e85e\":{\"name\":\"Assignment Ind\"},\"e85f\":{\"name\":\"Assignment Late\"},\"e860\":{\"name\":\"Assignment Return\"},\"e861\":{\"name\":\"Assignment Returned\"},\"e862\":{\"name\":\"Assignment Turned In\"},\"e39f\":{\"name\":\"Assistant\"},\"e3a0\":{\"name\":\"Assistant Photo\"},\"e226\":{\"name\":\"Attach File\"},\"e227\":{\"name\":\"Attach Money\"},\"e2bc\":{\"name\":\"Attachment\"},\"e3a1\":{\"name\":\"Audiotrack\"},\"e863\":{\"name\":\"Autorenew\"},\"e01b\":{\"name\":\"Av Timer\"},\"e14a\":{\"name\":\"Backspace\"},\"e864\":{\"name\":\"Backup\"},\"e19c\":{\"name\":\"Battery Alert\"},\"e1a3\":{\"name\":\"Battery Charging Full\"},\"e1a4\":{\"name\":\"Battery Full\"},\"e1a5\":{\"name\":\"Battery Std\"},\"e1a6\":{\"name\":\"Battery Unknown\"},\"eb3e\":{\"name\":\"Beach Access\"},\"e52d\":{\"name\":\"Beenhere\"},\"e14b\":{\"name\":\"Block\"},\"e1a7\":{\"name\":\"Bluetooth\"},\"e60f\":{\"name\":\"Bluetooth Audio\"},\"e1a8\":{\"name\":\"Bluetooth Connected\"},\"e1a9\":{\"name\":\"Bluetooth Disabled\"},\"e1aa\":{\"name\":\"Bluetooth Searching\"},\"e3a2\":{\"name\":\"Blur Circular\"},\"e3a3\":{\"name\":\"Blur Linear\"},\"e3a4\":{\"name\":\"Blur Off\"},\"e3a5\":{\"name\":\"Blur On\"},\"e865\":{\"name\":\"Book\"},\"e866\":{\"name\":\"Bookmark\"},\"e867\":{\"name\":\"Bookmark Border\"},\"e228\":{\"name\":\"Border All\"},\"e229\":{\"name\":\"Border Bottom\"},\"e22a\":{\"name\":\"Border Clear\"},\"e22b\":{\"name\":\"Border Color\"},\"e22c\":{\"name\":\"Border Horizontal\"},\"e22d\":{\"name\":\"Border Inner\"},\"e22e\":{\"name\":\"Border Left\"},\"e22f\":{\"name\":\"Border Outer\"},\"e230\":{\"name\":\"Border Right\"},\"e231\":{\"name\":\"Border Style\"},\"e232\":{\"name\":\"Border Top\"},\"e233\":{\"name\":\"Border Vertical\"},\"e06b\":{\"name\":\"Branding Watermark\"},\"e3a6\":{\"name\":\"Brightness 1\"},\"e3a7\":{\"name\":\"Brightness 2\"},\"e3a8\":{\"name\":\"Brightness 3\"},\"e3a9\":{\"name\":\"Brightness 4\"},\"e3aa\":{\"name\":\"Brightness 5\"},\"e3ab\":{\"name\":\"Brightness 6\"},\"e3ac\":{\"name\":\"Brightness 7\"},\"e1ab\":{\"name\":\"Brightness Auto\"},\"e1ac\":{\"name\":\"Brightness High\"},\"e1ad\":{\"name\":\"Brightness Low\"},\"e1ae\":{\"name\":\"Brightness Medium\"},\"e3ad\":{\"name\":\"Broken Image\"},\"e3ae\":{\"name\":\"Brush\"},\"e6dd\":{\"name\":\"Bubble Chart\"},\"e868\":{\"name\":\"Bug Report\"},\"e869\":{\"name\":\"Build\"},\"e43c\":{\"name\":\"Burst Mode\"},\"e0af\":{\"name\":\"Business\"},\"eb3f\":{\"name\":\"Business Center\"},\"e86a\":{\"name\":\"Cached\"},\"e7e9\":{\"name\":\"Cake\"},\"e0b0\":{\"name\":\"Call\"},\"e0b1\":{\"name\":\"Call End\"},\"e0b2\":{\"name\":\"Call Made\"},\"e0b3\":{\"name\":\"Call Merge\"},\"e0b4\":{\"name\":\"Call Missed\"},\"e0e4\":{\"name\":\"Call Missed Outgoing\"},\"e0b5\":{\"name\":\"Call Received\"},\"e0b6\":{\"name\":\"Call Split\"},\"e06c\":{\"name\":\"Call To Action\"},\"e3af\":{\"name\":\"Camera\"},\"e3b0\":{\"name\":\"Camera Alt\"},\"e8fc\":{\"name\":\"Camera Enhance\"},\"e3b1\":{\"name\":\"Camera Front\"},\"e3b2\":{\"name\":\"Camera Rear\"},\"e3b3\":{\"name\":\"Camera Roll\"},\"e5c9\":{\"name\":\"Cancel\"},\"e8f6\":{\"name\":\"Card Giftcard\"},\"e8f7\":{\"name\":\"Card Membership\"},\"e8f8\":{\"name\":\"Card Travel\"},\"eb40\":{\"name\":\"Casino\"},\"e307\":{\"name\":\"Cast\"},\"e308\":{\"name\":\"Cast Connected\"},\"e3b4\":{\"name\":\"Center Focus Strong\"},\"e3b5\":{\"name\":\"Center Focus Weak\"},\"e86b\":{\"name\":\"Change History\"},\"e0b7\":{\"name\":\"Chat\"},\"e0ca\":{\"name\":\"Chat Bubble\"},\"e0cb\":{\"name\":\"Chat Bubble Outline\"},\"e5ca\":{\"name\":\"Check\"},\"e834\":{\"name\":\"Check Box\"},\"e835\":{\"name\":\"Check Box Outline Blank\"},\"e86c\":{\"name\":\"Check Circle\"},\"e5cb\":{\"name\":\"Chevron Left\"},\"e5cc\":{\"name\":\"Chevron Right\"},\"eb41\":{\"name\":\"Child Care\"},\"eb42\":{\"name\":\"Child Friendly\"},\"e86d\":{\"name\":\"Chrome Reader Mode\"},\"e86e\":{\"name\":\"Class\"},\"e14c\":{\"name\":\"Clear\"},\"e0b8\":{\"name\":\"Clear All\"},\"e5cd\":{\"name\":\"Close\"},\"e01c\":{\"name\":\"Closed Caption\"},\"e2bd\":{\"name\":\"Cloud\"},\"e2be\":{\"name\":\"Cloud Circle\"},\"e2bf\":{\"name\":\"Cloud Done\"},\"e2c0\":{\"name\":\"Cloud Download\"},\"e2c1\":{\"name\":\"Cloud Off\"},\"e2c2\":{\"name\":\"Cloud Queue\"},\"e2c3\":{\"name\":\"Cloud Upload\"},\"e86f\":{\"name\":\"Code\"},\"e3b6\":{\"name\":\"Collections\"},\"e431\":{\"name\":\"Collections Bookmark\"},\"e3b7\":{\"name\":\"Color Lens\"},\"e3b8\":{\"name\":\"Colorize\"},\"e0b9\":{\"name\":\"Comment\"},\"e3b9\":{\"name\":\"Compare\"},\"e915\":{\"name\":\"Compare Arrows\"},\"e30a\":{\"name\":\"Computer\"},\"e638\":{\"name\":\"Confirmation Number\"},\"e0d0\":{\"name\":\"Contact Mail\"},\"e0cf\":{\"name\":\"Contact Phone\"},\"e0ba\":{\"name\":\"Contacts\"},\"e14d\":{\"name\":\"Content Copy\"},\"e14e\":{\"name\":\"Content Cut\"},\"e14f\":{\"name\":\"Content Paste\"},\"e3ba\":{\"name\":\"Control Point\"},\"e3bb\":{\"name\":\"Control Point Duplicate\"},\"e90c\":{\"name\":\"Copyright\"},\"e150\":{\"name\":\"Create\"},\"e2cc\":{\"name\":\"Create New Folder\"},\"e870\":{\"name\":\"Credit Card\"},\"e3be\":{\"name\":\"Crop\"},\"e3bc\":{\"name\":\"Crop 16 9\"},\"e3bd\":{\"name\":\"Crop 3 2\"},\"e3bf\":{\"name\":\"Crop 5 4\"},\"e3c0\":{\"name\":\"Crop 7 5\"},\"e3c1\":{\"name\":\"Crop Din\"},\"e3c2\":{\"name\":\"Crop Free\"},\"e3c3\":{\"name\":\"Crop Landscape\"},\"e3c4\":{\"name\":\"Crop Original\"},\"e3c5\":{\"name\":\"Crop Portrait\"},\"e437\":{\"name\":\"Crop Rotate\"},\"e3c6\":{\"name\":\"Crop Square\"},\"e871\":{\"name\":\"Dashboard\"},\"e1af\":{\"name\":\"Data Usage\"},\"e916\":{\"name\":\"Date Range\"},\"e3c7\":{\"name\":\"Dehaze\"},\"e872\":{\"name\":\"Delete\"},\"e92b\":{\"name\":\"Delete Forever\"},\"e16c\":{\"name\":\"Delete Sweep\"},\"e873\":{\"name\":\"Description\"},\"e30b\":{\"name\":\"Desktop Mac\"},\"e30c\":{\"name\":\"Desktop Windows\"},\"e3c8\":{\"name\":\"Details\"},\"e30d\":{\"name\":\"Developer Board\"},\"e1b0\":{\"name\":\"Developer Mode\"},\"e335\":{\"name\":\"Device Hub\"},\"e1b1\":{\"name\":\"Devices\"},\"e337\":{\"name\":\"Devices Other\"},\"e0bb\":{\"name\":\"Dialer Sip\"},\"e0bc\":{\"name\":\"Dialpad\"},\"e52e\":{\"name\":\"Directions\"},\"e52f\":{\"name\":\"Directions Bike\"},\"e532\":{\"name\":\"Directions Boat\"},\"e530\":{\"name\":\"Directions Bus\"},\"e531\":{\"name\":\"Directions Car\"},\"e534\":{\"name\":\"Directions Railway\"},\"e566\":{\"name\":\"Directions Run\"},\"e533\":{\"name\":\"Directions Subway\"},\"e535\":{\"name\":\"Directions Transit\"},\"e536\":{\"name\":\"Directions Walk\"},\"e610\":{\"name\":\"Disc Full\"},\"e875\":{\"name\":\"Dns\"},\"e612\":{\"name\":\"Do Not Disturb\"},\"e611\":{\"name\":\"Do Not Disturb Alt\"},\"e643\":{\"name\":\"Do Not Disturb Off\"},\"e644\":{\"name\":\"Do Not Disturb On\"},\"e30e\":{\"name\":\"Dock\"},\"e7ee\":{\"name\":\"Domain\"},\"e876\":{\"name\":\"Done\"},\"e877\":{\"name\":\"Done All\"},\"e917\":{\"name\":\"Donut Large\"},\"e918\":{\"name\":\"Donut Small\"},\"e151\":{\"name\":\"Drafts\"},\"e25d\":{\"name\":\"Drag Handle\"},\"e613\":{\"name\":\"Drive Eta\"},\"e1b2\":{\"name\":\"Dvr\"},\"e3c9\":{\"name\":\"Edit\"},\"e568\":{\"name\":\"Edit Location\"},\"e8fb\":{\"name\":\"Eject\"},\"e0be\":{\"name\":\"Email\"},\"e63f\":{\"name\":\"Enhanced Encryption\"},\"e01d\":{\"name\":\"Equalizer\"},\"e000\":{\"name\":\"Error\"},\"e001\":{\"name\":\"Error Outline\"},\"e926\":{\"name\":\"Euro Symbol\"},\"e56d\":{\"name\":\"Ev Station\"},\"e878\":{\"name\":\"Event\"},\"e614\":{\"name\":\"Event Available\"},\"e615\":{\"name\":\"Event Busy\"},\"e616\":{\"name\":\"Event Note\"},\"e903\":{\"name\":\"Event Seat\"},\"e879\":{\"name\":\"Exit To App\"},\"e5ce\":{\"name\":\"Expand Less\"},\"e5cf\":{\"name\":\"Expand More\"},\"e01e\":{\"name\":\"Explicit\"},\"e87a\":{\"name\":\"Explore\"},\"e3ca\":{\"name\":\"Exposure\"},\"e3cb\":{\"name\":\"Exposure Neg 1\"},\"e3cc\":{\"name\":\"Exposure Neg 2\"},\"e3cd\":{\"name\":\"Exposure Plus 1\"},\"e3ce\":{\"name\":\"Exposure Plus 2\"},\"e3cf\":{\"name\":\"Exposure Zero\"},\"e87b\":{\"name\":\"Extension\"},\"e87c\":{\"name\":\"Face\"},\"e01f\":{\"name\":\"Fast Forward\"},\"e020\":{\"name\":\"Fast Rewind\"},\"e87d\":{\"name\":\"Favorite\"},\"e87e\":{\"name\":\"Favorite Border\"},\"e06d\":{\"name\":\"Featured Play List\"},\"e06e\":{\"name\":\"Featured Video\"},\"e87f\":{\"name\":\"Feedback\"},\"e05d\":{\"name\":\"Fiber Dvr\"},\"e061\":{\"name\":\"Fiber Manual Record\"},\"e05e\":{\"name\":\"Fiber New\"},\"e06a\":{\"name\":\"Fiber Pin\"},\"e062\":{\"name\":\"Fiber Smart Record\"},\"e2c4\":{\"name\":\"File Download\"},\"e2c6\":{\"name\":\"File Upload\"},\"e3d3\":{\"name\":\"Filter\"},\"e3d0\":{\"name\":\"Filter 1\"},\"e3d1\":{\"name\":\"Filter 2\"},\"e3d2\":{\"name\":\"Filter 3\"},\"e3d4\":{\"name\":\"Filter 4\"},\"e3d5\":{\"name\":\"Filter 5\"},\"e3d6\":{\"name\":\"Filter 6\"},\"e3d7\":{\"name\":\"Filter 7\"},\"e3d8\":{\"name\":\"Filter 8\"},\"e3d9\":{\"name\":\"Filter 9\"},\"e3da\":{\"name\":\"Filter 9 Plus\"},\"e3db\":{\"name\":\"Filter B And W\"},\"e3dc\":{\"name\":\"Filter Center Focus\"},\"e3dd\":{\"name\":\"Filter Drama\"},\"e3de\":{\"name\":\"Filter Frames\"},\"e3df\":{\"name\":\"Filter Hdr\"},\"e152\":{\"name\":\"Filter List\"},\"e3e0\":{\"name\":\"Filter None\"},\"e3e2\":{\"name\":\"Filter Tilt Shift\"},\"e3e3\":{\"name\":\"Filter Vintage\"},\"e880\":{\"name\":\"Find In Page\"},\"e881\":{\"name\":\"Find Replace\"},\"e90d\":{\"name\":\"Fingerprint\"},\"e5dc\":{\"name\":\"First Page\"},\"eb43\":{\"name\":\"Fitness Center\"},\"e153\":{\"name\":\"Flag\"},\"e3e4\":{\"name\":\"Flare\"},\"e3e5\":{\"name\":\"Flash Auto\"},\"e3e6\":{\"name\":\"Flash Off\"},\"e3e7\":{\"name\":\"Flash On\"},\"e539\":{\"name\":\"Flight\"},\"e904\":{\"name\":\"Flight Land\"},\"e905\":{\"name\":\"Flight Takeoff\"},\"e3e8\":{\"name\":\"Flip\"},\"e882\":{\"name\":\"Flip To Back\"},\"e883\":{\"name\":\"Flip To Front\"},\"e2c7\":{\"name\":\"Folder\"},\"e2c8\":{\"name\":\"Folder Open\"},\"e2c9\":{\"name\":\"Folder Shared\"},\"e617\":{\"name\":\"Folder Special\"},\"e167\":{\"name\":\"Font Download\"},\"e234\":{\"name\":\"Format Align Center\"},\"e235\":{\"name\":\"Format Align Justify\"},\"e236\":{\"name\":\"Format Align Left\"},\"e237\":{\"name\":\"Format Align Right\"},\"e238\":{\"name\":\"Format Bold\"},\"e239\":{\"name\":\"Format Clear\"},\"e23a\":{\"name\":\"Format Color Fill\"},\"e23b\":{\"name\":\"Format Color Reset\"},\"e23c\":{\"name\":\"Format Color Text\"},\"e23d\":{\"name\":\"Format Indent Decrease\"},\"e23e\":{\"name\":\"Format Indent Increase\"},\"e23f\":{\"name\":\"Format Italic\"},\"e240\":{\"name\":\"Format Line Spacing\"},\"e241\":{\"name\":\"Format List Bulleted\"},\"e242\":{\"name\":\"Format List Numbered\"},\"e243\":{\"name\":\"Format Paint\"},\"e244\":{\"name\":\"Format Quote\"},\"e25e\":{\"name\":\"Format Shapes\"},\"e245\":{\"name\":\"Format Size\"},\"e246\":{\"name\":\"Format Strikethrough\"},\"e247\":{\"name\":\"Format Textdirection L To R\"},\"e248\":{\"name\":\"Format Textdirection R To L\"},\"e249\":{\"name\":\"Format Underlined\"},\"e0bf\":{\"name\":\"Forum\"},\"e154\":{\"name\":\"Forward\"},\"e056\":{\"name\":\"Forward 10\"},\"e057\":{\"name\":\"Forward 30\"},\"e058\":{\"name\":\"Forward 5\"},\"eb44\":{\"name\":\"Free Breakfast\"},\"e5d0\":{\"name\":\"Fullscreen\"},\"e5d1\":{\"name\":\"Fullscreen Exit\"},\"e24a\":{\"name\":\"Functions\"},\"e927\":{\"name\":\"G Translate\"},\"e30f\":{\"name\":\"Gamepad\"},\"e021\":{\"name\":\"Games\"},\"e90e\":{\"name\":\"Gavel\"},\"e155\":{\"name\":\"Gesture\"},\"e884\":{\"name\":\"Get App\"},\"e908\":{\"name\":\"Gif\"},\"eb45\":{\"name\":\"Golf Course\"},\"e1b3\":{\"name\":\"Gps Fixed\"},\"e1b4\":{\"name\":\"Gps Not Fixed\"},\"e1b5\":{\"name\":\"Gps Off\"},\"e885\":{\"name\":\"Grade\"},\"e3e9\":{\"name\":\"Gradient\"},\"e3ea\":{\"name\":\"Grain\"},\"e1b8\":{\"name\":\"Graphic Eq\"},\"e3eb\":{\"name\":\"Grid Off\"},\"e3ec\":{\"name\":\"Grid On\"},\"e7ef\":{\"name\":\"Group\"},\"e7f0\":{\"name\":\"Group Add\"},\"e886\":{\"name\":\"Group Work\"},\"e052\":{\"name\":\"Hd\"},\"e3ed\":{\"name\":\"Hdr Off\"},\"e3ee\":{\"name\":\"Hdr On\"},\"e3f1\":{\"name\":\"Hdr Strong\"},\"e3f2\":{\"name\":\"Hdr Weak\"},\"e310\":{\"name\":\"Headset\"},\"e311\":{\"name\":\"Headset Mic\"},\"e3f3\":{\"name\":\"Healing\"},\"e023\":{\"name\":\"Hearing\"},\"e887\":{\"name\":\"Help\"},\"e8fd\":{\"name\":\"Help Outline\"},\"e024\":{\"name\":\"High Quality\"},\"e25f\":{\"name\":\"Highlight\"},\"e888\":{\"name\":\"Highlight Off\"},\"e889\":{\"name\":\"History\"},\"e88a\":{\"name\":\"Home\"},\"eb46\":{\"name\":\"Hot Tub\"},\"e53a\":{\"name\":\"Hotel\"},\"e88b\":{\"name\":\"Hourglass Empty\"},\"e88c\":{\"name\":\"Hourglass Full\"},\"e902\":{\"name\":\"Http\"},\"e88d\":{\"name\":\"Https\"},\"e3f4\":{\"name\":\"Image\"},\"e3f5\":{\"name\":\"Image Aspect Ratio\"},\"e0e0\":{\"name\":\"Import Contacts\"},\"e0c3\":{\"name\":\"Import Export\"},\"e912\":{\"name\":\"Important Devices\"},\"e156\":{\"name\":\"Inbox\"},\"e909\":{\"name\":\"Indeterminate Check Box\"},\"e88e\":{\"name\":\"Info\"},\"e88f\":{\"name\":\"Info Outline\"},\"e890\":{\"name\":\"Input\"},\"e24b\":{\"name\":\"Insert Chart\"},\"e24c\":{\"name\":\"Insert Comment\"},\"e24d\":{\"name\":\"Insert Drive File\"},\"e24e\":{\"name\":\"Insert Emoticon\"},\"e24f\":{\"name\":\"Insert Invitation\"},\"e250\":{\"name\":\"Insert Link\"},\"e251\":{\"name\":\"Insert Photo\"},\"e891\":{\"name\":\"Invert Colors\"},\"e0c4\":{\"name\":\"Invert Colors Off\"},\"e3f6\":{\"name\":\"Iso\"},\"e312\":{\"name\":\"Keyboard\"},\"e313\":{\"name\":\"Keyboard Arrow Down\"},\"e314\":{\"name\":\"Keyboard Arrow Left\"},\"e315\":{\"name\":\"Keyboard Arrow Right\"},\"e316\":{\"name\":\"Keyboard Arrow Up\"},\"e317\":{\"name\":\"Keyboard Backspace\"},\"e318\":{\"name\":\"Keyboard Capslock\"},\"e31a\":{\"name\":\"Keyboard Hide\"},\"e31b\":{\"name\":\"Keyboard Return\"},\"e31c\":{\"name\":\"Keyboard Tab\"},\"e31d\":{\"name\":\"Keyboard Voice\"},\"eb47\":{\"name\":\"Kitchen\"},\"e892\":{\"name\":\"Label\"},\"e893\":{\"name\":\"Label Outline\"},\"e3f7\":{\"name\":\"Landscape\"},\"e894\":{\"name\":\"Language\"},\"e31e\":{\"name\":\"Laptop\"},\"e31f\":{\"name\":\"Laptop Chromebook\"},\"e320\":{\"name\":\"Laptop Mac\"},\"e321\":{\"name\":\"Laptop Windows\"},\"e5dd\":{\"name\":\"Last Page\"},\"e895\":{\"name\":\"Launch\"},\"e53b\":{\"name\":\"Layers\"},\"e53c\":{\"name\":\"Layers Clear\"},\"e3f8\":{\"name\":\"Leak Add\"},\"e3f9\":{\"name\":\"Leak Remove\"},\"e3fa\":{\"name\":\"Lens\"},\"e02e\":{\"name\":\"Library Add\"},\"e02f\":{\"name\":\"Library Books\"},\"e030\":{\"name\":\"Library Music\"},\"e90f\":{\"name\":\"Lightbulb Outline\"},\"e919\":{\"name\":\"Line Style\"},\"e91a\":{\"name\":\"Line Weight\"},\"e260\":{\"name\":\"Linear Scale\"},\"e157\":{\"name\":\"Link\"},\"e438\":{\"name\":\"Linked Camera\"},\"e896\":{\"name\":\"List\"},\"e0c6\":{\"name\":\"Live Help\"},\"e639\":{\"name\":\"Live Tv\"},\"e53f\":{\"name\":\"Local Activity\"},\"e53d\":{\"name\":\"Local Airport\"},\"e53e\":{\"name\":\"Local Atm\"},\"e540\":{\"name\":\"Local Bar\"},\"e541\":{\"name\":\"Local Cafe\"},\"e542\":{\"name\":\"Local Car Wash\"},\"e543\":{\"name\":\"Local Convenience Store\"},\"e556\":{\"name\":\"Local Dining\"},\"e544\":{\"name\":\"Local Drink\"},\"e545\":{\"name\":\"Local Florist\"},\"e546\":{\"name\":\"Local Gas Station\"},\"e547\":{\"name\":\"Local Grocery Store\"},\"e548\":{\"name\":\"Local Hospital\"},\"e549\":{\"name\":\"Local Hotel\"},\"e54a\":{\"name\":\"Local Laundry Service\"},\"e54b\":{\"name\":\"Local Library\"},\"e54c\":{\"name\":\"Local Mall\"},\"e54d\":{\"name\":\"Local Movies\"},\"e54e\":{\"name\":\"Local Offer\"},\"e54f\":{\"name\":\"Local Parking\"},\"e550\":{\"name\":\"Local Pharmacy\"},\"e551\":{\"name\":\"Local Phone\"},\"e552\":{\"name\":\"Local Pizza\"},\"e553\":{\"name\":\"Local Play\"},\"e554\":{\"name\":\"Local Post Office\"},\"e555\":{\"name\":\"Local Printshop\"},\"e557\":{\"name\":\"Local See\"},\"e558\":{\"name\":\"Local Shipping\"},\"e559\":{\"name\":\"Local Taxi\"},\"e7f1\":{\"name\":\"Location City\"},\"e1b6\":{\"name\":\"Location Disabled\"},\"e0c7\":{\"name\":\"Location Off\"},\"e0c8\":{\"name\":\"Location On\"},\"e1b7\":{\"name\":\"Location Searching\"},\"e897\":{\"name\":\"Lock\"},\"e898\":{\"name\":\"Lock Open\"},\"e899\":{\"name\":\"Lock Outline\"},\"e3fc\":{\"name\":\"Looks\"},\"e3fb\":{\"name\":\"Looks 3\"},\"e3fd\":{\"name\":\"Looks 4\"},\"e3fe\":{\"name\":\"Looks 5\"},\"e3ff\":{\"name\":\"Looks 6\"},\"e400\":{\"name\":\"Looks One\"},\"e401\":{\"name\":\"Looks Two\"},\"e028\":{\"name\":\"Loop\"},\"e402\":{\"name\":\"Loupe\"},\"e16d\":{\"name\":\"Low Priority\"},\"e89a\":{\"name\":\"Loyalty\"},\"e158\":{\"name\":\"Mail\"},\"e0e1\":{\"name\":\"Mail Outline\"},\"e55b\":{\"name\":\"Map\"},\"e159\":{\"name\":\"Markunread\"},\"e89b\":{\"name\":\"Markunread Mailbox\"},\"e322\":{\"name\":\"Memory\"},\"e5d2\":{\"name\":\"Menu\"},\"e252\":{\"name\":\"Merge Type\"},\"e0c9\":{\"name\":\"Message\"},\"e029\":{\"name\":\"Mic\"},\"e02a\":{\"name\":\"Mic None\"},\"e02b\":{\"name\":\"Mic Off\"},\"e618\":{\"name\":\"Mms\"},\"e253\":{\"name\":\"Mode Comment\"},\"e254\":{\"name\":\"Mode Edit\"},\"e263\":{\"name\":\"Monetization On\"},\"e25c\":{\"name\":\"Money Off\"},\"e403\":{\"name\":\"Monochrome Photos\"},\"e7f2\":{\"name\":\"Mood\"},\"e7f3\":{\"name\":\"Mood Bad\"},\"e619\":{\"name\":\"More\"},\"e5d3\":{\"name\":\"More Horiz\"},\"e5d4\":{\"name\":\"More Vert\"},\"e91b\":{\"name\":\"Motorcycle\"},\"e323\":{\"name\":\"Mouse\"},\"e168\":{\"name\":\"Move To Inbox\"},\"e02c\":{\"name\":\"Movie\"},\"e404\":{\"name\":\"Movie Creation\"},\"e43a\":{\"name\":\"Movie Filter\"},\"e6df\":{\"name\":\"Multiline Chart\"},\"e405\":{\"name\":\"Music Note\"},\"e063\":{\"name\":\"Music Video\"},\"e55c\":{\"name\":\"My Location\"},\"e406\":{\"name\":\"Nature\"},\"e407\":{\"name\":\"Nature People\"},\"e408\":{\"name\":\"Navigate Before\"},\"e409\":{\"name\":\"Navigate Next\"},\"e55d\":{\"name\":\"Navigation\"},\"e569\":{\"name\":\"Near Me\"},\"e1b9\":{\"name\":\"Network Cell\"},\"e640\":{\"name\":\"Network Check\"},\"e61a\":{\"name\":\"Network Locked\"},\"e1ba\":{\"name\":\"Network Wifi\"},\"e031\":{\"name\":\"New Releases\"},\"e16a\":{\"name\":\"Next Week\"},\"e1bb\":{\"name\":\"Nfc\"},\"e641\":{\"name\":\"No Encryption\"},\"e0cc\":{\"name\":\"No Sim\"},\"e033\":{\"name\":\"Not Interested\"},\"e06f\":{\"name\":\"Note\"},\"e89c\":{\"name\":\"Note Add\"},\"e7f4\":{\"name\":\"Notifications\"},\"e7f7\":{\"name\":\"Notifications Active\"},\"e7f5\":{\"name\":\"Notifications None\"},\"e7f6\":{\"name\":\"Notifications Off\"},\"e7f8\":{\"name\":\"Notifications Paused\"},\"e90a\":{\"name\":\"Offline Pin\"},\"e63a\":{\"name\":\"Ondemand Video\"},\"e91c\":{\"name\":\"Opacity\"},\"e89d\":{\"name\":\"Open In Browser\"},\"e89e\":{\"name\":\"Open In New\"},\"e89f\":{\"name\":\"Open With\"},\"e7f9\":{\"name\":\"Pages\"},\"e8a0\":{\"name\":\"Pageview\"},\"e40a\":{\"name\":\"Palette\"},\"e925\":{\"name\":\"Pan Tool\"},\"e40b\":{\"name\":\"Panorama\"},\"e40c\":{\"name\":\"Panorama Fish Eye\"},\"e40d\":{\"name\":\"Panorama Horizontal\"},\"e40e\":{\"name\":\"Panorama Vertical\"},\"e40f\":{\"name\":\"Panorama Wide Angle\"},\"e7fa\":{\"name\":\"Party Mode\"},\"e034\":{\"name\":\"Pause\"},\"e035\":{\"name\":\"Pause Circle Filled\"},\"e036\":{\"name\":\"Pause Circle Outline\"},\"e8a1\":{\"name\":\"Payment\"},\"e7fb\":{\"name\":\"People\"},\"e7fc\":{\"name\":\"People Outline\"},\"e8a2\":{\"name\":\"Perm Camera Mic\"},\"e8a3\":{\"name\":\"Perm Contact Calendar\"},\"e8a4\":{\"name\":\"Perm Data Setting\"},\"e8a5\":{\"name\":\"Perm Device Information\"},\"e8a6\":{\"name\":\"Perm Identity\"},\"e8a7\":{\"name\":\"Perm Media\"},\"e8a8\":{\"name\":\"Perm Phone Msg\"},\"e8a9\":{\"name\":\"Perm Scan Wifi\"},\"e7fd\":{\"name\":\"Person\"},\"e7fe\":{\"name\":\"Person Add\"},\"e7ff\":{\"name\":\"Person Outline\"},\"e55a\":{\"name\":\"Person Pin\"},\"e56a\":{\"name\":\"Person Pin Circle\"},\"e63b\":{\"name\":\"Personal Video\"},\"e91d\":{\"name\":\"Pets\"},\"e0cd\":{\"name\":\"Phone\"},\"e324\":{\"name\":\"Phone Android\"},\"e61b\":{\"name\":\"Phone Bluetooth Speaker\"},\"e61c\":{\"name\":\"Phone Forwarded\"},\"e61d\":{\"name\":\"Phone In Talk\"},\"e325\":{\"name\":\"Phone Iphone\"},\"e61e\":{\"name\":\"Phone Locked\"},\"e61f\":{\"name\":\"Phone Missed\"},\"e620\":{\"name\":\"Phone Paused\"},\"e326\":{\"name\":\"Phonelink\"},\"e0db\":{\"name\":\"Phonelink Erase\"},\"e0dc\":{\"name\":\"Phonelink Lock\"},\"e327\":{\"name\":\"Phonelink Off\"},\"e0dd\":{\"name\":\"Phonelink Ring\"},\"e0de\":{\"name\":\"Phonelink Setup\"},\"e410\":{\"name\":\"Photo\"},\"e411\":{\"name\":\"Photo Album\"},\"e412\":{\"name\":\"Photo Camera\"},\"e43b\":{\"name\":\"Photo Filter\"},\"e413\":{\"name\":\"Photo Library\"},\"e432\":{\"name\":\"Photo Size Select Actual\"},\"e433\":{\"name\":\"Photo Size Select Large\"},\"e434\":{\"name\":\"Photo Size Select Small\"},\"e415\":{\"name\":\"Picture As Pdf\"},\"e8aa\":{\"name\":\"Picture In Picture\"},\"e911\":{\"name\":\"Picture In Picture Alt\"},\"e6c4\":{\"name\":\"Pie Chart\"},\"e6c5\":{\"name\":\"Pie Chart Outlined\"},\"e55e\":{\"name\":\"Pin Drop\"},\"e55f\":{\"name\":\"Place\"},\"e037\":{\"name\":\"Play Arrow\"},\"e038\":{\"name\":\"Play Circle Filled\"},\"e039\":{\"name\":\"Play Circle Outline\"},\"e906\":{\"name\":\"Play For Work\"},\"e03b\":{\"name\":\"Playlist Add\"},\"e065\":{\"name\":\"Playlist Add Check\"},\"e05f\":{\"name\":\"Playlist Play\"},\"e800\":{\"name\":\"Plus One\"},\"e801\":{\"name\":\"Poll\"},\"e8ab\":{\"name\":\"Polymer\"},\"eb48\":{\"name\":\"Pool\"},\"e0ce\":{\"name\":\"Portable Wifi Off\"},\"e416\":{\"name\":\"Portrait\"},\"e63c\":{\"name\":\"Power\"},\"e336\":{\"name\":\"Power Input\"},\"e8ac\":{\"name\":\"Power Settings New\"},\"e91e\":{\"name\":\"Pregnant Woman\"},\"e0df\":{\"name\":\"Present To All\"},\"e8ad\":{\"name\":\"Print\"},\"e645\":{\"name\":\"Priority High\"},\"e80b\":{\"name\":\"Public\"},\"e255\":{\"name\":\"Publish\"},\"e8ae\":{\"name\":\"Query Builder\"},\"e8af\":{\"name\":\"Question Answer\"},\"e03c\":{\"name\":\"Queue\"},\"e03d\":{\"name\":\"Queue Music\"},\"e066\":{\"name\":\"Queue Play Next\"},\"e03e\":{\"name\":\"Radio\"},\"e837\":{\"name\":\"Radio Button Checked\"},\"e836\":{\"name\":\"Radio Button Unchecked\"},\"e560\":{\"name\":\"Rate Review\"},\"e8b0\":{\"name\":\"Receipt\"},\"e03f\":{\"name\":\"Recent Actors\"},\"e91f\":{\"name\":\"Record Voice Over\"},\"e8b1\":{\"name\":\"Redeem\"},\"e15a\":{\"name\":\"Redo\"},\"e5d5\":{\"name\":\"Refresh\"},\"e15b\":{\"name\":\"Remove\"},\"e15c\":{\"name\":\"Remove Circle\"},\"e15d\":{\"name\":\"Remove Circle Outline\"},\"e067\":{\"name\":\"Remove From Queue\"},\"e417\":{\"name\":\"Remove Red Eye\"},\"e928\":{\"name\":\"Remove Shopping Cart\"},\"e8fe\":{\"name\":\"Reorder\"},\"e040\":{\"name\":\"Repeat\"},\"e041\":{\"name\":\"Repeat One\"},\"e042\":{\"name\":\"Replay\"},\"e059\":{\"name\":\"Replay 10\"},\"e05a\":{\"name\":\"Replay 30\"},\"e05b\":{\"name\":\"Replay 5\"},\"e15e\":{\"name\":\"Reply\"},\"e15f\":{\"name\":\"Reply All\"},\"e160\":{\"name\":\"Report\"},\"e8b2\":{\"name\":\"Report Problem\"},\"e56c\":{\"name\":\"Restaurant\"},\"e561\":{\"name\":\"Restaurant Menu\"},\"e8b3\":{\"name\":\"Restore\"},\"e929\":{\"name\":\"Restore Page\"},\"e0d1\":{\"name\":\"Ring Volume\"},\"e8b4\":{\"name\":\"Room\"},\"eb49\":{\"name\":\"Room Service\"},\"e418\":{\"name\":\"Rotate 90 Degrees Ccw\"},\"e419\":{\"name\":\"Rotate Left\"},\"e41a\":{\"name\":\"Rotate Right\"},\"e920\":{\"name\":\"Rounded Corner\"},\"e328\":{\"name\":\"Router\"},\"e921\":{\"name\":\"Rowing\"},\"e0e5\":{\"name\":\"Rss Feed\"},\"e642\":{\"name\":\"Rv Hookup\"},\"e562\":{\"name\":\"Satellite\"},\"e161\":{\"name\":\"Save\"},\"e329\":{\"name\":\"Scanner\"},\"e8b5\":{\"name\":\"Schedule\"},\"e80c\":{\"name\":\"School\"},\"e1be\":{\"name\":\"Screen Lock Landscape\"},\"e1bf\":{\"name\":\"Screen Lock Portrait\"},\"e1c0\":{\"name\":\"Screen Lock Rotation\"},\"e1c1\":{\"name\":\"Screen Rotation\"},\"e0e2\":{\"name\":\"Screen Share\"},\"e623\":{\"name\":\"Sd Card\"},\"e1c2\":{\"name\":\"Sd Storage\"},\"e8b6\":{\"name\":\"Search\"},\"e32a\":{\"name\":\"Security\"},\"e162\":{\"name\":\"Select All\"},\"e163\":{\"name\":\"Send\"},\"e811\":{\"name\":\"Sentiment Dissatisfied\"},\"e812\":{\"name\":\"Sentiment Neutral\"},\"e813\":{\"name\":\"Sentiment Satisfied\"},\"e814\":{\"name\":\"Sentiment Very Dissatisfied\"},\"e815\":{\"name\":\"Sentiment Very Satisfied\"},\"e8b8\":{\"name\":\"Settings\"},\"e8b9\":{\"name\":\"Settings Applications\"},\"e8ba\":{\"name\":\"Settings Backup Restore\"},\"e8bb\":{\"name\":\"Settings Bluetooth\"},\"e8bd\":{\"name\":\"Settings Brightness\"},\"e8bc\":{\"name\":\"Settings Cell\"},\"e8be\":{\"name\":\"Settings Ethernet\"},\"e8bf\":{\"name\":\"Settings Input Antenna\"},\"e8c0\":{\"name\":\"Settings Input Component\"},\"e8c1\":{\"name\":\"Settings Input Composite\"},\"e8c2\":{\"name\":\"Settings Input Hdmi\"},\"e8c3\":{\"name\":\"Settings Input Svideo\"},\"e8c4\":{\"name\":\"Settings Overscan\"},\"e8c5\":{\"name\":\"Settings Phone\"},\"e8c6\":{\"name\":\"Settings Power\"},\"e8c7\":{\"name\":\"Settings Remote\"},\"e1c3\":{\"name\":\"Settings System Daydream\"},\"e8c8\":{\"name\":\"Settings Voice\"},\"e80d\":{\"name\":\"Share\"},\"e8c9\":{\"name\":\"Shop\"},\"e8ca\":{\"name\":\"Shop Two\"},\"e8cb\":{\"name\":\"Shopping Basket\"},\"e8cc\":{\"name\":\"Shopping Cart\"},\"e261\":{\"name\":\"Short Text\"},\"e6e1\":{\"name\":\"Show Chart\"},\"e043\":{\"name\":\"Shuffle\"},\"e1c8\":{\"name\":\"Signal Cellular 4 Bar\"},\"e1cd\":{\"name\":\"Signal Cellular Connected No Internet 4 Bar\"},\"e1ce\":{\"name\":\"Signal Cellular No Sim\"},\"e1cf\":{\"name\":\"Signal Cellular Null\"},\"e1d0\":{\"name\":\"Signal Cellular Off\"},\"e1d8\":{\"name\":\"Signal Wifi 4 Bar\"},\"e1d9\":{\"name\":\"Signal Wifi 4 Bar Lock\"},\"e1da\":{\"name\":\"Signal Wifi Off\"},\"e32b\":{\"name\":\"Sim Card\"},\"e624\":{\"name\":\"Sim Card Alert\"},\"e044\":{\"name\":\"Skip Next\"},\"e045\":{\"name\":\"Skip Previous\"},\"e41b\":{\"name\":\"Slideshow\"},\"e068\":{\"name\":\"Slow Motion Video\"},\"e32c\":{\"name\":\"Smartphone\"},\"eb4a\":{\"name\":\"Smoke Free\"},\"eb4b\":{\"name\":\"Smoking Rooms\"},\"e625\":{\"name\":\"Sms\"},\"e626\":{\"name\":\"Sms Failed\"},\"e046\":{\"name\":\"Snooze\"},\"e164\":{\"name\":\"Sort\"},\"e053\":{\"name\":\"Sort By Alpha\"},\"eb4c\":{\"name\":\"Spa\"},\"e256\":{\"name\":\"Space Bar\"},\"e32d\":{\"name\":\"Speaker\"},\"e32e\":{\"name\":\"Speaker Group\"},\"e8cd\":{\"name\":\"Speaker Notes\"},\"e92a\":{\"name\":\"Speaker Notes Off\"},\"e0d2\":{\"name\":\"Speaker Phone\"},\"e8ce\":{\"name\":\"Spellcheck\"},\"e838\":{\"name\":\"Star\"},\"e83a\":{\"name\":\"Star Border\"},\"e839\":{\"name\":\"Star Half\"},\"e8d0\":{\"name\":\"Stars\"},\"e0d3\":{\"name\":\"Stay Current Landscape\"},\"e0d4\":{\"name\":\"Stay Current Portrait\"},\"e0d5\":{\"name\":\"Stay Primary Landscape\"},\"e0d6\":{\"name\":\"Stay Primary Portrait\"},\"e047\":{\"name\":\"Stop\"},\"e0e3\":{\"name\":\"Stop Screen Share\"},\"e1db\":{\"name\":\"Storage\"},\"e8d1\":{\"name\":\"Store\"},\"e563\":{\"name\":\"Store Mall Directory\"},\"e41c\":{\"name\":\"Straighten\"},\"e56e\":{\"name\":\"Streetview\"},\"e257\":{\"name\":\"Strikethrough S\"},\"e41d\":{\"name\":\"Style\"},\"e5d9\":{\"name\":\"Subdirectory Arrow Left\"},\"e5da\":{\"name\":\"Subdirectory Arrow Right\"},\"e8d2\":{\"name\":\"Subject\"},\"e064\":{\"name\":\"Subscriptions\"},\"e048\":{\"name\":\"Subtitles\"},\"e56f\":{\"name\":\"Subway\"},\"e8d3\":{\"name\":\"Supervisor Account\"},\"e049\":{\"name\":\"Surround Sound\"},\"e0d7\":{\"name\":\"Swap Calls\"},\"e8d4\":{\"name\":\"Swap Horiz\"},\"e8d5\":{\"name\":\"Swap Vert\"},\"e8d6\":{\"name\":\"Swap Vertical Circle\"},\"e41e\":{\"name\":\"Switch Camera\"},\"e41f\":{\"name\":\"Switch Video\"},\"e627\":{\"name\":\"Sync\"},\"e628\":{\"name\":\"Sync Disabled\"},\"e629\":{\"name\":\"Sync Problem\"},\"e62a\":{\"name\":\"System Update\"},\"e8d7\":{\"name\":\"System Update Alt\"},\"e8d8\":{\"name\":\"Tab\"},\"e8d9\":{\"name\":\"Tab Unselected\"},\"e32f\":{\"name\":\"Tablet\"},\"e330\":{\"name\":\"Tablet Android\"},\"e331\":{\"name\":\"Tablet Mac\"},\"e420\":{\"name\":\"Tag Faces\"},\"e62b\":{\"name\":\"Tap And Play\"},\"e564\":{\"name\":\"Terrain\"},\"e262\":{\"name\":\"Text Fields\"},\"e165\":{\"name\":\"Text Format\"},\"e0d8\":{\"name\":\"Textsms\"},\"e421\":{\"name\":\"Texture\"},\"e8da\":{\"name\":\"Theaters\"},\"e8db\":{\"name\":\"Thumb Down\"},\"e8dc\":{\"name\":\"Thumb Up\"},\"e8dd\":{\"name\":\"Thumbs Up Down\"},\"e62c\":{\"name\":\"Time To Leave\"},\"e422\":{\"name\":\"Timelapse\"},\"e922\":{\"name\":\"Timeline\"},\"e425\":{\"name\":\"Timer\"},\"e423\":{\"name\":\"Timer 10\"},\"e424\":{\"name\":\"Timer 3\"},\"e426\":{\"name\":\"Timer Off\"},\"e264\":{\"name\":\"Title\"},\"e8de\":{\"name\":\"Toc\"},\"e8df\":{\"name\":\"Today\"},\"e8e0\":{\"name\":\"Toll\"},\"e427\":{\"name\":\"Tonality\"},\"e913\":{\"name\":\"Touch App\"},\"e332\":{\"name\":\"Toys\"},\"e8e1\":{\"name\":\"Track Changes\"},\"e565\":{\"name\":\"Traffic\"},\"e570\":{\"name\":\"Train\"},\"e571\":{\"name\":\"Tram\"},\"e572\":{\"name\":\"Transfer Within A Station\"},\"e428\":{\"name\":\"Transform\"},\"e8e2\":{\"name\":\"Translate\"},\"e8e3\":{\"name\":\"Trending Down\"},\"e8e4\":{\"name\":\"Trending Flat\"},\"e8e5\":{\"name\":\"Trending Up\"},\"e429\":{\"name\":\"Tune\"},\"e8e6\":{\"name\":\"Turned In\"},\"e8e7\":{\"name\":\"Turned In Not\"},\"e333\":{\"name\":\"Tv\"},\"e169\":{\"name\":\"Unarchive\"},\"e166\":{\"name\":\"Undo\"},\"e5d6\":{\"name\":\"Unfold Less\"},\"e5d7\":{\"name\":\"Unfold More\"},\"e923\":{\"name\":\"Update\"},\"e1e0\":{\"name\":\"Usb\"},\"e8e8\":{\"name\":\"Verified User\"},\"e258\":{\"name\":\"Vertical Align Bottom\"},\"e259\":{\"name\":\"Vertical Align Center\"},\"e25a\":{\"name\":\"Vertical Align Top\"},\"e62d\":{\"name\":\"Vibration\"},\"e070\":{\"name\":\"Video Call\"},\"e071\":{\"name\":\"Video Label\"},\"e04a\":{\"name\":\"Video Library\"},\"e04b\":{\"name\":\"Videocam\"},\"e04c\":{\"name\":\"Videocam Off\"},\"e338\":{\"name\":\"Videogame Asset\"},\"e8e9\":{\"name\":\"View Agenda\"},\"e8ea\":{\"name\":\"View Array\"},\"e8eb\":{\"name\":\"View Carousel\"},\"e8ec\":{\"name\":\"View Column\"},\"e42a\":{\"name\":\"View Comfy\"},\"e42b\":{\"name\":\"View Compact\"},\"e8ed\":{\"name\":\"View Day\"},\"e8ee\":{\"name\":\"View Headline\"},\"e8ef\":{\"name\":\"View List\"},\"e8f0\":{\"name\":\"View Module\"},\"e8f1\":{\"name\":\"View Quilt\"},\"e8f2\":{\"name\":\"View Stream\"},\"e8f3\":{\"name\":\"View Week\"},\"e435\":{\"name\":\"Vignette\"},\"e8f4\":{\"name\":\"Visibility\"},\"e8f5\":{\"name\":\"Visibility Off\"},\"e62e\":{\"name\":\"Voice Chat\"},\"e0d9\":{\"name\":\"Voicemail\"},\"e04d\":{\"name\":\"Volume Down\"},\"e04e\":{\"name\":\"Volume Mute\"},\"e04f\":{\"name\":\"Volume Off\"},\"e050\":{\"name\":\"Volume Up\"},\"e0da\":{\"name\":\"Vpn Key\"},\"e62f\":{\"name\":\"Vpn Lock\"},\"e1bc\":{\"name\":\"Wallpaper\"},\"e002\":{\"name\":\"Warning\"},\"e334\":{\"name\":\"Watch\"},\"e924\":{\"name\":\"Watch Later\"},\"e42c\":{\"name\":\"Wb Auto\"},\"e42d\":{\"name\":\"Wb Cloudy\"},\"e42e\":{\"name\":\"Wb Incandescent\"},\"e436\":{\"name\":\"Wb Iridescent\"},\"e430\":{\"name\":\"Wb Sunny\"},\"e63d\":{\"name\":\"Wc\"},\"e051\":{\"name\":\"Web\"},\"e069\":{\"name\":\"Web Asset\"},\"e16b\":{\"name\":\"Weekend\"},\"e80e\":{\"name\":\"Whatshot\"},\"e1bd\":{\"name\":\"Widgets\"},\"e63e\":{\"name\":\"Wifi\"},\"e1e1\":{\"name\":\"Wifi Lock\"},\"e1e2\":{\"name\":\"Wifi Tethering\"},\"e8f9\":{\"name\":\"Work\"},\"e25b\":{\"name\":\"Wrap Text\"},\"e8fa\":{\"name\":\"Youtube Searched For\"},\"e8ff\":{\"name\":\"Zoom In\"},\"e900\":{\"name\":\"Zoom Out\"},\"e56b\":{\"name\":\"Zoom Out Map\"}}}"
  },
  {
    "path": "static/iconfont/README.md",
    "content": "The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:\n\n```html\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n      rel=\"stylesheet\">\n```\n\nRead more in our full usage guide:\nhttp://google.github.io/material-design-icons/#icon-font-for-the-web\n"
  },
  {
    "path": "static/iconfont/codepoints",
    "content": "3d_rotation e84d\nac_unit eb3b\naccess_alarm e190\naccess_alarms e191\naccess_time e192\naccessibility e84e\naccessible e914\naccount_balance e84f\naccount_balance_wallet e850\naccount_box e851\naccount_circle e853\nadb e60e\nadd e145\nadd_a_photo e439\nadd_alarm e193\nadd_alert e003\nadd_box e146\nadd_circle e147\nadd_circle_outline e148\nadd_location e567\nadd_shopping_cart e854\nadd_to_photos e39d\nadd_to_queue e05c\nadjust e39e\nairline_seat_flat e630\nairline_seat_flat_angled e631\nairline_seat_individual_suite e632\nairline_seat_legroom_extra e633\nairline_seat_legroom_normal e634\nairline_seat_legroom_reduced e635\nairline_seat_recline_extra e636\nairline_seat_recline_normal e637\nairplanemode_active e195\nairplanemode_inactive e194\nairplay e055\nairport_shuttle eb3c\nalarm e855\nalarm_add e856\nalarm_off e857\nalarm_on e858\nalbum e019\nall_inclusive eb3d\nall_out e90b\nandroid e859\nannouncement e85a\napps e5c3\narchive e149\narrow_back e5c4\narrow_downward e5db\narrow_drop_down e5c5\narrow_drop_down_circle e5c6\narrow_drop_up e5c7\narrow_forward e5c8\narrow_upward e5d8\nart_track e060\naspect_ratio e85b\nassessment e85c\nassignment e85d\nassignment_ind e85e\nassignment_late e85f\nassignment_return e860\nassignment_returned e861\nassignment_turned_in e862\nassistant e39f\nassistant_photo e3a0\nattach_file e226\nattach_money e227\nattachment e2bc\naudiotrack e3a1\nautorenew e863\nav_timer e01b\nbackspace e14a\nbackup e864\nbattery_alert e19c\nbattery_charging_full e1a3\nbattery_full e1a4\nbattery_std e1a5\nbattery_unknown e1a6\nbeach_access eb3e\nbeenhere e52d\nblock e14b\nbluetooth e1a7\nbluetooth_audio e60f\nbluetooth_connected e1a8\nbluetooth_disabled e1a9\nbluetooth_searching e1aa\nblur_circular e3a2\nblur_linear e3a3\nblur_off e3a4\nblur_on e3a5\nbook e865\nbookmark e866\nbookmark_border e867\nborder_all e228\nborder_bottom e229\nborder_clear e22a\nborder_color e22b\nborder_horizontal e22c\nborder_inner e22d\nborder_left e22e\nborder_outer e22f\nborder_right e230\nborder_style e231\nborder_top e232\nborder_vertical e233\nbranding_watermark e06b\nbrightness_1 e3a6\nbrightness_2 e3a7\nbrightness_3 e3a8\nbrightness_4 e3a9\nbrightness_5 e3aa\nbrightness_6 e3ab\nbrightness_7 e3ac\nbrightness_auto e1ab\nbrightness_high e1ac\nbrightness_low e1ad\nbrightness_medium e1ae\nbroken_image e3ad\nbrush e3ae\nbubble_chart e6dd\nbug_report e868\nbuild e869\nburst_mode e43c\nbusiness e0af\nbusiness_center eb3f\ncached e86a\ncake e7e9\ncall e0b0\ncall_end e0b1\ncall_made e0b2\ncall_merge e0b3\ncall_missed e0b4\ncall_missed_outgoing e0e4\ncall_received e0b5\ncall_split e0b6\ncall_to_action e06c\ncamera e3af\ncamera_alt e3b0\ncamera_enhance e8fc\ncamera_front e3b1\ncamera_rear e3b2\ncamera_roll e3b3\ncancel e5c9\ncard_giftcard e8f6\ncard_membership e8f7\ncard_travel e8f8\ncasino eb40\ncast e307\ncast_connected e308\ncenter_focus_strong e3b4\ncenter_focus_weak e3b5\nchange_history e86b\nchat e0b7\nchat_bubble e0ca\nchat_bubble_outline e0cb\ncheck e5ca\ncheck_box e834\ncheck_box_outline_blank e835\ncheck_circle e86c\nchevron_left e5cb\nchevron_right e5cc\nchild_care eb41\nchild_friendly eb42\nchrome_reader_mode e86d\nclass e86e\nclear e14c\nclear_all e0b8\nclose e5cd\nclosed_caption e01c\ncloud e2bd\ncloud_circle e2be\ncloud_done e2bf\ncloud_download e2c0\ncloud_off e2c1\ncloud_queue e2c2\ncloud_upload e2c3\ncode e86f\ncollections e3b6\ncollections_bookmark e431\ncolor_lens e3b7\ncolorize e3b8\ncomment e0b9\ncompare e3b9\ncompare_arrows e915\ncomputer e30a\nconfirmation_number e638\ncontact_mail e0d0\ncontact_phone e0cf\ncontacts e0ba\ncontent_copy e14d\ncontent_cut e14e\ncontent_paste e14f\ncontrol_point e3ba\ncontrol_point_duplicate e3bb\ncopyright e90c\ncreate e150\ncreate_new_folder e2cc\ncredit_card e870\ncrop e3be\ncrop_16_9 e3bc\ncrop_3_2 e3bd\ncrop_5_4 e3bf\ncrop_7_5 e3c0\ncrop_din e3c1\ncrop_free e3c2\ncrop_landscape e3c3\ncrop_original e3c4\ncrop_portrait e3c5\ncrop_rotate e437\ncrop_square e3c6\ndashboard e871\ndata_usage e1af\ndate_range e916\ndehaze e3c7\ndelete e872\ndelete_forever e92b\ndelete_sweep e16c\ndescription e873\ndesktop_mac e30b\ndesktop_windows e30c\ndetails e3c8\ndeveloper_board e30d\ndeveloper_mode e1b0\ndevice_hub e335\ndevices e1b1\ndevices_other e337\ndialer_sip e0bb\ndialpad e0bc\ndirections e52e\ndirections_bike e52f\ndirections_boat e532\ndirections_bus e530\ndirections_car e531\ndirections_railway e534\ndirections_run e566\ndirections_subway e533\ndirections_transit e535\ndirections_walk e536\ndisc_full e610\ndns e875\ndo_not_disturb e612\ndo_not_disturb_alt e611\ndo_not_disturb_off e643\ndo_not_disturb_on e644\ndock e30e\ndomain e7ee\ndone e876\ndone_all e877\ndonut_large e917\ndonut_small e918\ndrafts e151\ndrag_handle e25d\ndrive_eta e613\ndvr e1b2\nedit e3c9\nedit_location e568\neject e8fb\nemail e0be\nenhanced_encryption e63f\nequalizer e01d\nerror e000\nerror_outline e001\neuro_symbol e926\nev_station e56d\nevent e878\nevent_available e614\nevent_busy e615\nevent_note e616\nevent_seat e903\nexit_to_app e879\nexpand_less e5ce\nexpand_more e5cf\nexplicit e01e\nexplore e87a\nexposure e3ca\nexposure_neg_1 e3cb\nexposure_neg_2 e3cc\nexposure_plus_1 e3cd\nexposure_plus_2 e3ce\nexposure_zero e3cf\nextension e87b\nface e87c\nfast_forward e01f\nfast_rewind e020\nfavorite e87d\nfavorite_border e87e\nfeatured_play_list e06d\nfeatured_video e06e\nfeedback e87f\nfiber_dvr e05d\nfiber_manual_record e061\nfiber_new e05e\nfiber_pin e06a\nfiber_smart_record e062\nfile_download e2c4\nfile_upload e2c6\nfilter e3d3\nfilter_1 e3d0\nfilter_2 e3d1\nfilter_3 e3d2\nfilter_4 e3d4\nfilter_5 e3d5\nfilter_6 e3d6\nfilter_7 e3d7\nfilter_8 e3d8\nfilter_9 e3d9\nfilter_9_plus e3da\nfilter_b_and_w e3db\nfilter_center_focus e3dc\nfilter_drama e3dd\nfilter_frames e3de\nfilter_hdr e3df\nfilter_list e152\nfilter_none e3e0\nfilter_tilt_shift e3e2\nfilter_vintage e3e3\nfind_in_page e880\nfind_replace e881\nfingerprint e90d\nfirst_page e5dc\nfitness_center eb43\nflag e153\nflare e3e4\nflash_auto e3e5\nflash_off e3e6\nflash_on e3e7\nflight e539\nflight_land e904\nflight_takeoff e905\nflip e3e8\nflip_to_back e882\nflip_to_front e883\nfolder e2c7\nfolder_open e2c8\nfolder_shared e2c9\nfolder_special e617\nfont_download e167\nformat_align_center e234\nformat_align_justify e235\nformat_align_left e236\nformat_align_right e237\nformat_bold e238\nformat_clear e239\nformat_color_fill e23a\nformat_color_reset e23b\nformat_color_text e23c\nformat_indent_decrease e23d\nformat_indent_increase e23e\nformat_italic e23f\nformat_line_spacing e240\nformat_list_bulleted e241\nformat_list_numbered e242\nformat_paint e243\nformat_quote e244\nformat_shapes e25e\nformat_size e245\nformat_strikethrough e246\nformat_textdirection_l_to_r e247\nformat_textdirection_r_to_l e248\nformat_underlined e249\nforum e0bf\nforward e154\nforward_10 e056\nforward_30 e057\nforward_5 e058\nfree_breakfast eb44\nfullscreen e5d0\nfullscreen_exit e5d1\nfunctions e24a\ng_translate e927\ngamepad e30f\ngames e021\ngavel e90e\ngesture e155\nget_app e884\ngif e908\ngolf_course eb45\ngps_fixed e1b3\ngps_not_fixed e1b4\ngps_off e1b5\ngrade e885\ngradient e3e9\ngrain e3ea\ngraphic_eq e1b8\ngrid_off e3eb\ngrid_on e3ec\ngroup e7ef\ngroup_add e7f0\ngroup_work e886\nhd e052\nhdr_off e3ed\nhdr_on e3ee\nhdr_strong e3f1\nhdr_weak e3f2\nheadset e310\nheadset_mic e311\nhealing e3f3\nhearing e023\nhelp e887\nhelp_outline e8fd\nhigh_quality e024\nhighlight e25f\nhighlight_off e888\nhistory e889\nhome e88a\nhot_tub eb46\nhotel e53a\nhourglass_empty e88b\nhourglass_full e88c\nhttp e902\nhttps e88d\nimage e3f4\nimage_aspect_ratio e3f5\nimport_contacts e0e0\nimport_export e0c3\nimportant_devices e912\ninbox e156\nindeterminate_check_box e909\ninfo e88e\ninfo_outline e88f\ninput e890\ninsert_chart e24b\ninsert_comment e24c\ninsert_drive_file e24d\ninsert_emoticon e24e\ninsert_invitation e24f\ninsert_link e250\ninsert_photo e251\ninvert_colors e891\ninvert_colors_off e0c4\niso e3f6\nkeyboard e312\nkeyboard_arrow_down e313\nkeyboard_arrow_left e314\nkeyboard_arrow_right e315\nkeyboard_arrow_up e316\nkeyboard_backspace e317\nkeyboard_capslock e318\nkeyboard_hide e31a\nkeyboard_return e31b\nkeyboard_tab e31c\nkeyboard_voice e31d\nkitchen eb47\nlabel e892\nlabel_outline e893\nlandscape e3f7\nlanguage e894\nlaptop e31e\nlaptop_chromebook e31f\nlaptop_mac e320\nlaptop_windows e321\nlast_page e5dd\nlaunch e895\nlayers e53b\nlayers_clear e53c\nleak_add e3f8\nleak_remove e3f9\nlens e3fa\nlibrary_add e02e\nlibrary_books e02f\nlibrary_music e030\nlightbulb_outline e90f\nline_style e919\nline_weight e91a\nlinear_scale e260\nlink e157\nlinked_camera e438\nlist e896\nlive_help e0c6\nlive_tv e639\nlocal_activity e53f\nlocal_airport e53d\nlocal_atm e53e\nlocal_bar e540\nlocal_cafe e541\nlocal_car_wash e542\nlocal_convenience_store e543\nlocal_dining e556\nlocal_drink e544\nlocal_florist e545\nlocal_gas_station e546\nlocal_grocery_store e547\nlocal_hospital e548\nlocal_hotel e549\nlocal_laundry_service e54a\nlocal_library e54b\nlocal_mall e54c\nlocal_movies e54d\nlocal_offer e54e\nlocal_parking e54f\nlocal_pharmacy e550\nlocal_phone e551\nlocal_pizza e552\nlocal_play e553\nlocal_post_office e554\nlocal_printshop e555\nlocal_see e557\nlocal_shipping e558\nlocal_taxi e559\nlocation_city e7f1\nlocation_disabled e1b6\nlocation_off e0c7\nlocation_on e0c8\nlocation_searching e1b7\nlock e897\nlock_open e898\nlock_outline e899\nlooks e3fc\nlooks_3 e3fb\nlooks_4 e3fd\nlooks_5 e3fe\nlooks_6 e3ff\nlooks_one e400\nlooks_two e401\nloop e028\nloupe e402\nlow_priority e16d\nloyalty e89a\nmail e158\nmail_outline e0e1\nmap e55b\nmarkunread e159\nmarkunread_mailbox e89b\nmemory e322\nmenu e5d2\nmerge_type e252\nmessage e0c9\nmic e029\nmic_none e02a\nmic_off e02b\nmms e618\nmode_comment e253\nmode_edit e254\nmonetization_on e263\nmoney_off e25c\nmonochrome_photos e403\nmood e7f2\nmood_bad e7f3\nmore e619\nmore_horiz e5d3\nmore_vert e5d4\nmotorcycle e91b\nmouse e323\nmove_to_inbox e168\nmovie e02c\nmovie_creation e404\nmovie_filter e43a\nmultiline_chart e6df\nmusic_note e405\nmusic_video e063\nmy_location e55c\nnature e406\nnature_people e407\nnavigate_before e408\nnavigate_next e409\nnavigation e55d\nnear_me e569\nnetwork_cell e1b9\nnetwork_check e640\nnetwork_locked e61a\nnetwork_wifi e1ba\nnew_releases e031\nnext_week e16a\nnfc e1bb\nno_encryption e641\nno_sim e0cc\nnot_interested e033\nnote e06f\nnote_add e89c\nnotifications e7f4\nnotifications_active e7f7\nnotifications_none e7f5\nnotifications_off e7f6\nnotifications_paused e7f8\noffline_pin e90a\nondemand_video e63a\nopacity e91c\nopen_in_browser e89d\nopen_in_new e89e\nopen_with e89f\npages e7f9\npageview e8a0\npalette e40a\npan_tool e925\npanorama e40b\npanorama_fish_eye e40c\npanorama_horizontal e40d\npanorama_vertical e40e\npanorama_wide_angle e40f\nparty_mode e7fa\npause e034\npause_circle_filled e035\npause_circle_outline e036\npayment e8a1\npeople e7fb\npeople_outline e7fc\nperm_camera_mic e8a2\nperm_contact_calendar e8a3\nperm_data_setting e8a4\nperm_device_information e8a5\nperm_identity e8a6\nperm_media e8a7\nperm_phone_msg e8a8\nperm_scan_wifi e8a9\nperson e7fd\nperson_add e7fe\nperson_outline e7ff\nperson_pin e55a\nperson_pin_circle e56a\npersonal_video e63b\npets e91d\nphone e0cd\nphone_android e324\nphone_bluetooth_speaker e61b\nphone_forwarded e61c\nphone_in_talk e61d\nphone_iphone e325\nphone_locked e61e\nphone_missed e61f\nphone_paused e620\nphonelink e326\nphonelink_erase e0db\nphonelink_lock e0dc\nphonelink_off e327\nphonelink_ring e0dd\nphonelink_setup e0de\nphoto e410\nphoto_album e411\nphoto_camera e412\nphoto_filter e43b\nphoto_library e413\nphoto_size_select_actual e432\nphoto_size_select_large e433\nphoto_size_select_small e434\npicture_as_pdf e415\npicture_in_picture e8aa\npicture_in_picture_alt e911\npie_chart e6c4\npie_chart_outlined e6c5\npin_drop e55e\nplace e55f\nplay_arrow e037\nplay_circle_filled e038\nplay_circle_outline e039\nplay_for_work e906\nplaylist_add e03b\nplaylist_add_check e065\nplaylist_play e05f\nplus_one e800\npoll e801\npolymer e8ab\npool eb48\nportable_wifi_off e0ce\nportrait e416\npower e63c\npower_input e336\npower_settings_new e8ac\npregnant_woman e91e\npresent_to_all e0df\nprint e8ad\npriority_high e645\npublic e80b\npublish e255\nquery_builder e8ae\nquestion_answer e8af\nqueue e03c\nqueue_music e03d\nqueue_play_next e066\nradio e03e\nradio_button_checked e837\nradio_button_unchecked e836\nrate_review e560\nreceipt e8b0\nrecent_actors e03f\nrecord_voice_over e91f\nredeem e8b1\nredo e15a\nrefresh e5d5\nremove e15b\nremove_circle e15c\nremove_circle_outline e15d\nremove_from_queue e067\nremove_red_eye e417\nremove_shopping_cart e928\nreorder e8fe\nrepeat e040\nrepeat_one e041\nreplay e042\nreplay_10 e059\nreplay_30 e05a\nreplay_5 e05b\nreply e15e\nreply_all e15f\nreport e160\nreport_problem e8b2\nrestaurant e56c\nrestaurant_menu e561\nrestore e8b3\nrestore_page e929\nring_volume e0d1\nroom e8b4\nroom_service eb49\nrotate_90_degrees_ccw e418\nrotate_left e419\nrotate_right e41a\nrounded_corner e920\nrouter e328\nrowing e921\nrss_feed e0e5\nrv_hookup e642\nsatellite e562\nsave e161\nscanner e329\nschedule e8b5\nschool e80c\nscreen_lock_landscape e1be\nscreen_lock_portrait e1bf\nscreen_lock_rotation e1c0\nscreen_rotation e1c1\nscreen_share e0e2\nsd_card e623\nsd_storage e1c2\nsearch e8b6\nsecurity e32a\nselect_all e162\nsend e163\nsentiment_dissatisfied e811\nsentiment_neutral e812\nsentiment_satisfied e813\nsentiment_very_dissatisfied e814\nsentiment_very_satisfied e815\nsettings e8b8\nsettings_applications e8b9\nsettings_backup_restore e8ba\nsettings_bluetooth e8bb\nsettings_brightness e8bd\nsettings_cell e8bc\nsettings_ethernet e8be\nsettings_input_antenna e8bf\nsettings_input_component e8c0\nsettings_input_composite e8c1\nsettings_input_hdmi e8c2\nsettings_input_svideo e8c3\nsettings_overscan e8c4\nsettings_phone e8c5\nsettings_power e8c6\nsettings_remote e8c7\nsettings_system_daydream e1c3\nsettings_voice e8c8\nshare e80d\nshop e8c9\nshop_two e8ca\nshopping_basket e8cb\nshopping_cart e8cc\nshort_text e261\nshow_chart e6e1\nshuffle e043\nsignal_cellular_4_bar e1c8\nsignal_cellular_connected_no_internet_4_bar e1cd\nsignal_cellular_no_sim e1ce\nsignal_cellular_null e1cf\nsignal_cellular_off e1d0\nsignal_wifi_4_bar e1d8\nsignal_wifi_4_bar_lock e1d9\nsignal_wifi_off e1da\nsim_card e32b\nsim_card_alert e624\nskip_next e044\nskip_previous e045\nslideshow e41b\nslow_motion_video e068\nsmartphone e32c\nsmoke_free eb4a\nsmoking_rooms eb4b\nsms e625\nsms_failed e626\nsnooze e046\nsort e164\nsort_by_alpha e053\nspa eb4c\nspace_bar e256\nspeaker e32d\nspeaker_group e32e\nspeaker_notes e8cd\nspeaker_notes_off e92a\nspeaker_phone e0d2\nspellcheck e8ce\nstar e838\nstar_border e83a\nstar_half e839\nstars e8d0\nstay_current_landscape e0d3\nstay_current_portrait e0d4\nstay_primary_landscape e0d5\nstay_primary_portrait e0d6\nstop e047\nstop_screen_share e0e3\nstorage e1db\nstore e8d1\nstore_mall_directory e563\nstraighten e41c\nstreetview e56e\nstrikethrough_s e257\nstyle e41d\nsubdirectory_arrow_left e5d9\nsubdirectory_arrow_right e5da\nsubject e8d2\nsubscriptions e064\nsubtitles e048\nsubway e56f\nsupervisor_account e8d3\nsurround_sound e049\nswap_calls e0d7\nswap_horiz e8d4\nswap_vert e8d5\nswap_vertical_circle e8d6\nswitch_camera e41e\nswitch_video e41f\nsync e627\nsync_disabled e628\nsync_problem e629\nsystem_update e62a\nsystem_update_alt e8d7\ntab e8d8\ntab_unselected e8d9\ntablet e32f\ntablet_android e330\ntablet_mac e331\ntag_faces e420\ntap_and_play e62b\nterrain e564\ntext_fields e262\ntext_format e165\ntextsms e0d8\ntexture e421\ntheaters e8da\nthumb_down e8db\nthumb_up e8dc\nthumbs_up_down e8dd\ntime_to_leave e62c\ntimelapse e422\ntimeline e922\ntimer e425\ntimer_10 e423\ntimer_3 e424\ntimer_off e426\ntitle e264\ntoc e8de\ntoday e8df\ntoll e8e0\ntonality e427\ntouch_app e913\ntoys e332\ntrack_changes e8e1\ntraffic e565\ntrain e570\ntram e571\ntransfer_within_a_station e572\ntransform e428\ntranslate e8e2\ntrending_down e8e3\ntrending_flat e8e4\ntrending_up e8e5\ntune e429\nturned_in e8e6\nturned_in_not e8e7\ntv e333\nunarchive e169\nundo e166\nunfold_less e5d6\nunfold_more e5d7\nupdate e923\nusb e1e0\nverified_user e8e8\nvertical_align_bottom e258\nvertical_align_center e259\nvertical_align_top e25a\nvibration e62d\nvideo_call e070\nvideo_label e071\nvideo_library e04a\nvideocam e04b\nvideocam_off e04c\nvideogame_asset e338\nview_agenda e8e9\nview_array e8ea\nview_carousel e8eb\nview_column e8ec\nview_comfy e42a\nview_compact e42b\nview_day e8ed\nview_headline e8ee\nview_list e8ef\nview_module e8f0\nview_quilt e8f1\nview_stream e8f2\nview_week e8f3\nvignette e435\nvisibility e8f4\nvisibility_off e8f5\nvoice_chat e62e\nvoicemail e0d9\nvolume_down e04d\nvolume_mute e04e\nvolume_off e04f\nvolume_up e050\nvpn_key e0da\nvpn_lock e62f\nwallpaper e1bc\nwarning e002\nwatch e334\nwatch_later e924\nwb_auto e42c\nwb_cloudy e42d\nwb_incandescent e42e\nwb_iridescent e436\nwb_sunny e430\nwc e63d\nweb e051\nweb_asset e069\nweekend e16b\nwhatshot e80e\nwidgets e1bd\nwifi e63e\nwifi_lock e1e1\nwifi_tethering e1e2\nwork e8f9\nwrap_text e25b\nyoutube_searched_for e8fa\nzoom_in e8ff\nzoom_out e900\nzoom_out_map e56b\n"
  },
  {
    "path": "static/iconfont/material-icons.css",
    "content": "@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */\n  src: local('Material Icons'),\n       local('MaterialIcons-Regular'),\n       url(MaterialIcons-Regular.woff2) format('woff2'),\n       url(MaterialIcons-Regular.woff) format('woff'),\n       url(MaterialIcons-Regular.ttf) format('truetype');\n}\n\n.material-icons {\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;  /* Preferred icon size */\n  display: inline-block;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n}\n"
  }
]