Repository: tgxhx/vue-music
Branch: master
Commit: 51fb6c4d80f8
Files: 62
Total size: 150.8 KB

Directory structure:
gitextract_afk0_ghf/

├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build/
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config/
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
├── screen/
│   └── 1.txt
├── src/
│   ├── App.vue
│   ├── assets/
│   │   ├── css/
│   │   │   ├── base.scss
│   │   │   ├── common.css
│   │   │   └── reset.css
│   │   ├── js/
│   │   │   ├── api.js
│   │   │   ├── filters.js
│   │   │   └── setStyle.js
│   │   └── login/
│   │       └── login.json
│   ├── components/
│   │   ├── AudiioNav.vue
│   │   ├── Comment.vue
│   │   ├── Cover.vue
│   │   ├── Header.vue
│   │   ├── Hello.vue
│   │   ├── ListTitle.vue
│   │   ├── PlayList.vue
│   │   ├── Player.vue
│   │   └── Root.vue
│   ├── main.js
│   ├── page/
│   │   ├── Index/
│   │   │   ├── Index.vue
│   │   │   ├── Radio.vue
│   │   │   ├── Recommend.vue
│   │   │   ├── SongList.vue
│   │   │   └── Top.vue
│   │   ├── PlayListDetail.vue
│   │   ├── home/
│   │   │   └── Home.vue
│   │   └── search/
│   │       ├── Album.vue
│   │       ├── Artist.vue
│   │       ├── ListItem.vue
│   │       ├── Search.vue
│   │       ├── Song.vue
│   │       └── list.vue
│   ├── router/
│   │   └── index.js
│   └── store/
│       ├── actions.js
│       ├── getters.js
│       ├── index.js
│       ├── mutation-type.js
│       └── mutations.js
└── static/
    ├── .gitkeep
    └── iconfont/
        ├── MaterialIcons-Regular.ijmap
        ├── README.md
        ├── codepoints
        └── material-icons.css

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}


================================================
FILE: .editorconfig
================================================
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.idea/
.history
.vscode
package-lock.json


================================================
FILE: .postcssrc.js
================================================
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}


================================================
FILE: README.md
================================================
# vue版网易云音乐

> api：ap使用的是一个开源的nodejs封装的网易云音乐api，[地址](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85)

> [预览地址](http://39.108.14.248/music)（国外的服务器，估计有点慢）

## 使用步骤

``` bash
# 下载
git clone git@github.com:tgxhx/vue-music.git

# 安装依赖
npm install

# 运行开发环境
npm run dev

# 构建生产环境
npm run build

```

## 技术栈
 + vue2：基础框架
 + vue-router2：路由跳转
 + vuex：全局数据管理
 + es6：采用部分es6特性，大大简化了写法
 + webpack：vue-cli基于webpack，修改了部分配置
 + axios：基于Promise的http库，用来请求数据
 + scss：写起css来十分方便，需要安装sass-loader，另外使用自定义其中的自定义函数配合rem来适配移动端设备简直不要太方便
 + flex：弹性布局，在移动端兼容性较好，写各种布局非常方便
 + [vue-material](https://github.com/vuematerial/vue-material)：一个Android上material design风格的组件库

## 说明
1. 这个项目大小组件大概二十几个，目前还未完工，以后还会继续更新，目标是还原整个网易云音乐（虽然不知道什么时候能填完坑o(╯□╰)o）。
2. 关于路由，刚开始设计路由的时候想了很多，由于一开始的目标就是网易云音乐的所有内容，所以设计了三级路由，/root/index/recommed，大概这样，[点击查看](https://github.com/tgxhx/vue-music/blob/e43c4975e42b93b6ccf5d8609687879a589d4d8f/src/router/index.js)。
3. 关于体会，写到这个项目也算是对vue全家桶比较熟了，体会就是，不论是简单的复杂的项目，只要分割成一个个组件再拼起来，也没什么难的，组件之间通信又有vuex，也是非常简单的，总之就是熟能生巧。
4. 关于难点，对于自己来说，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)。
5. 关于打包后的资源路径，比如要放在二级目录www.xxx.com/music，那么修改config/index.js中的assetsPublicPath: '/music/'即可。
6. 关于移动设备适配，我使用的是js动态设置html元素font-size的方式，页面元素使用rem，这样可达到在不同设备下显示内容基本一样的效果，具体可以[点击](https://segmentfault.com/a/1190000008721148)，使用方式比如width:100px;可以写成width:pr(100)。
7. 关于图标，使用的是淘宝的iconfont字体图标方案，相比于使用图片图标有许多优势，比如任意缩放、改变颜色、响应式适配设备等等，具体可以参考[这篇文章](https://www.w3cplus.com/css3/icon-fonts.html)。


## 功能
- [x] 首页歌单推荐
- [x] 歌单详情
- [x] 播放器
- [x] 播放暂停
- [x] 播放模式切歌（顺序和随机）
- [ ] 歌词滚动（待修改）
- [x] 歌曲拖动
- [x] 播放器底部背景
- [x] 播放底栏
- [x] 底栏歌词同步
- [x] 播放列表
- [x] 歌曲评论
- [x] 搜索推荐
- [x] 搜索分类

## 部分截图
![](http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlyxi2mrj20ad0icn43.jpg)![](http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlz0lmr2j20ac0idmzv.jpg)
![](http://wx2.sinaimg.cn/large/7b9a6229ly1fhwlz4rv98j20ac0ic78c.jpg)![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlz76gf8j20ac0idq4u.jpg)
![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzckmt6j20ac0idtdf.jpg)![](http://wx2.sinaimg.cn/mw690/7b9a6229ly1fhwlzevul9j20ac0ic76k.jpg)
![](http://wx3.sinaimg.cn/mw690/7b9a6229ly1fhwlzgb1uvj20ad0id0tp.jpg)![](http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzlcu5ej20ac0idq6w.jpg)


================================================
FILE: build/build.js
================================================
require('./check-versions')()

process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})


================================================
FILE: build/check-versions.js
================================================
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
var shell = require('shelljs')
function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  var warnings = []
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()
    for (var i = 0; i < warnings.length; i++) {
      var warning = warnings[i]
      console.log('  ' + warning)
    }
    console.log()
    process.exit(1)
  }
}


================================================
FILE: build/dev-client.js
================================================
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})


================================================
FILE: build/dev-server.js
================================================
require('./check-versions')()

var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable

var app = express()
var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

var uri = 'http://localhost:' + port

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}


================================================
FILE: build/utils.js
================================================
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
}


================================================
FILE: build/vue-loader.conf.js
================================================
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  })
}


================================================
FILE: build/webpack.base.conf.js
================================================
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        exclude: resolve('/node_modules/'),
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
        }
        // include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.s[a|c]ss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
}


================================================
FILE: build/webpack.dev.conf.js
================================================
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})


================================================
FILE: build/webpack.prod.conf.js
================================================
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')

var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    /* new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }), */
    new UglifyJsPlugin({
        test: /\.js($|\?)/i
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig


================================================
FILE: config/dev.env.js
================================================
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})


================================================
FILE: config/index.js
================================================
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/music/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}


================================================
FILE: config/prod.env.js
================================================
module.exports = {
  NODE_ENV: '"production"'
}


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>vue-music</title>
    <script>
      !function (n) {
        var e = n.document,
          t = e.documentElement,
          i = 750,
          d = i / 100,
          o = "orientationchange" in n ? "orientationchange" : "resize",
          a = function () {
            var n = t.clientWidth || 320;
            n > 750 && (n = 750);
            t.style.fontSize = n / d + "px"
          };
        e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
      }(window);
    </script>
    <!--<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">-->
    <!--<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2d9gf9alx3v26gvi.css">
    <link rel="stylesheet" href="./static/iconfont/material-icons.css">
    <style>
      body {
        font-size:.32rem;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "vue-music",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "tgxh2020 <tgxh2020@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "axios": "^0.16.2",
    "better-scroll": "^0.2.4",
    "grade-js": "^1.0.10",
    "muse-ui": "^2.0.3",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.5",
    "vue": "2.4.4",
    "vue-awesome-swiper": "^2.4.2",
    "vue-material": "^0.7.1",
    "vue-router": "^2.3.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-generator": "^6.26.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "2.4.4",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}


================================================
FILE: screen/1.txt
================================================
http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlyxi2mrj20ad0icn43.jpg
http://wx4.sinaimg.cn/large/7b9a6229ly1fhwlz0lmr2j20ac0idmzv.jpg
http://wx2.sinaimg.cn/large/7b9a6229ly1fhwlz4rv98j20ac0ic78c.jpg
http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlz76gf8j20ac0idq4u.jpg
http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzckmt6j20ac0idtdf.jpg
http://wx2.sinaimg.cn/mw690/7b9a6229ly1fhwlzevul9j20ac0ic76k.jpg
http://wx3.sinaimg.cn/mw690/7b9a6229ly1fhwlzgb1uvj20ad0id0tp.jpg
http://wx1.sinaimg.cn/mw690/7b9a6229ly1fhwlzlcu5ej20ac0idq6w.jpg


================================================
FILE: src/App.vue
================================================
<template>
  <div id="app">
    <router-view></router-view>
    <player></player>
    <audio-nav></audio-nav>
    <play-list></play-list>
    <cover></cover>
    <comment></comment>
  </div>
</template>

<script type="text/ecmascript-6">
  import AudioNav from './components/AudiioNav'
  import Player from './components/Player'
  import PlayList from './components/PlayList.vue'
  import Cover from './components/Cover.vue'
  import Comment from './components/Comment.vue'

  export default {
    data() {
      return {}
    },
    components: {
      AudioNav,Player,PlayList,Cover,Comment
    }
  }
</script>

<style>
  #app {
  }
</style>


================================================
FILE: src/assets/css/base.scss
================================================
@mixin ell() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

$baseColor: #d33a31;

@function pr($px, $base-font-size: 50px) {
  @if (unitless($px)) {
    //@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return pr($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}


@font-face {
  font-family: 'iconfont';  /* project id 311056 */
  src: url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.eot');
  src: url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.woff') format('woff'),
  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_e3r3kwh70n8hyqfr.svg#iconfont') format('svg');
}

@mixin wh($w) {
  width:$w;
  height:$w;
}

@mixin ava($w) {
  width:$w;
  height:$w;
  img {
    width:100%;
    height:100%;
  }
}

@mixin dfcc() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin overhide($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}

//1px
@mixin _prefixDpr($selector, $position: 'top', $pseudo: 'before', $dpr: '2') {
  @media only screen and (-webkit-min-device-pixel-ratio:$dpr) {
    @if $dpr == '1.5' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.7);
        transform: scaleY(.7);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '2' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    } @else if $dpr == '3' {
      #{$selector}:#{$pseudo} {
        -webkit-transform: scaleY(.3);
        transform: scaleY(.3);
        @if $position == 'top' {
          -webkit-transform-origin: left top;
        } @else if $position == 'bottom' {
          -webkit-transform-origin: left bottom;
        }
      }
    }
  }
}

@mixin onepx($selector, $position: 'top',$pseudo: 'before', $color: #666) {
  #{$selector}:#{$pseudo} {
    content: ' ';
    display: block;
    border-top: 1px solid $color;
    position: absolute;
    left: 0;
    right: 0;
  }
  #{$selector} {
    position: relative;
    &:#{$pseudo} {
      @if #{$position} == 'top'{
        top: 0;
      } @else if #{$position} == 'bottom' {
        bottom: 0;
      }
    }
  }
  @include _prefixDpr($selector, $position, $pseudo, '1.5');
  @include _prefixDpr($selector, $position, $pseudo, '2');
  @include _prefixDpr($selector, $position, $pseudo, '3');

}



================================================
FILE: src/assets/css/common.css
================================================
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

ul:not(.md-list)>li+li {
  margin-top:0 !important;
}


================================================
FILE: src/assets/css/reset.css
================================================
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height:1;
  font-size:0.32rem;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix:after, .clearfix:before {
  display: table;
  content: ''
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.fl {
  float: left;
}
.fr {
  float: right;
}


================================================
FILE: src/assets/js/api.js
================================================
import axios from 'axios'

const url = 'http://localhost:3000'

export default url


================================================
FILE: src/assets/js/filters.js
================================================
/**
 * Created by 12 on 2017/6/11.
 */

const filters = {
  //歌单播放数
  playCount(value) {
    if (value < 10000) {
      return value
    } else {
      value = value + ''
      return value.slice(0, value.length - 4)
    }
  }
}

export default filters



================================================
FILE: src/assets/js/setStyle.js
================================================
/**
 * Created by 12 on 2017/6/11.
 */
function setStyle(obj,json) {
  for (var i in json) {
    obj.style[i] = json[i]
  }
}


================================================
FILE: src/assets/login/login.json
================================================
{
  "loginType": 1,
  "code": 200,
  "account": {
    "id": 46909653,
    "userName": "0_wo460520803@163.com",
    "type": 0,
    "status": 0,
    "whitelistAuthority": 0,
    "createTime": 0,
    "salt": "",
    "tokenVersion": 0,
    "ban": 0,
    "baoyueVersion": -2,
    "donateVersion": 0,
    "vipType": 0,
    "viptypeVersion": 0,
    "anonimousUser": false
  }
}


================================================
FILE: src/components/AudiioNav.vue
================================================
<template>
  <div class="audio-nav" v-if="JSON.stringify(curPlayMusic) !== '{}'">
    <div class="music-wrap" @click="showPlayer">
      <div class="music-img">
        <img :src="curPlayMusic.detail.al.picUrl" alt="">
      </div>
      <div class="music-con">
        <p class="music-name" v-if="curPlayMusic">{{curPlayMusic.detail.name}}</p>
        <p class="music-lyric">{{curLyric}}</p>
      </div>
    </div>
    <div class="music-btn">
      <div class="nav-btn-play">
        <i class="iconfont icon-ttpodicon" v-if="!playing" @click="play"></i>
        <i class="iconfont icon-zanting" v-else @click="pause"></i>
      </div>
      <div class="nav-btn-list">
        <i class="iconfont icon-liebiao" @click="showPlayList"></i>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {
      }
    },
    computed: {
      ...mapState([
        'curPlayMusic', 'playing','curLyric'
      ])
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {
      play() {
        //audio标签在其他组件中，故手动获取dom操作
        document.getElementById('music').play()
        this.$store.dispatch('switchPlaying', true)
      },
      pause() {
        document.getElementById('music').pause()
        this.$store.dispatch('switchPlaying', false)
      },
      //显示播放器
      showPlayer() {
        this.$store.state.showPlayer = true
      },
      //显示播放列表
      showPlayList() {
        this.$store.dispatch('showPlayList', true)
      }
    },
    filters: {},
    watch: {
      url(val, old) {
        if (val == null) {
          alert('播放失败，该歌曲需要收费')
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .audio-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: pr(45);
    box-shadow: 0 -2px 8px #ccc;
    padding: pr(6);
    background-color: #fff;
    z-index: 1000;
    .music-wrap {
      display: flex;
      flex:1;
      .music-img {
        width: pr(33);
        img {
          @include wh(100%);
        }
      }
      .music-con {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: pr(10);
        p {
          &:first-of-type {
            font-size: pr(12);
          }
          &:nth-of-type(2) {
            margin-top: pr(5);
            font-size: pr(10);
            color: #666;
            height:pr(10);
            @include ell;
          }
        }
      }
    }
    .music-btn {
      display: flex;
      align-items: center;
      .nav-btn-play {
        display: flex;
        justify-content: center;
        align-items: center;
        @include wh(pr(24));
        border: 1px solid #666;
        border-radius: 50%;
        i {
          font-size: pr(12);
        }
      }
      .nav-btn-list {
        margin-left: pr(15);
        i {
          font-size: pr(18);
        }
      }
    }
  }
</style>


================================================
FILE: src/components/Comment.vue
================================================
<template>
  <div
    class="comment"
    :class="{show: showComment}"
    v-if="JSON.stringify(curPlayMusic) !== '{}'">
    <md-toolbar class="md-dense" :class="{show: showComment}">
      <md-button class="md-icon-button">
        <md-icon @click.native="hideComment">arrow_back</md-icon>
      </md-button>
      <h2 class="md-title" style="flex: 1">评论<span v-if="total">({{total}})</span></h2>
      <md-button class="md-icon-button">
      </md-button>
    </md-toolbar>
    <div class="comment-wrap" ref="comment">
      <div class="music-info">
        <div class="music-pic">
          <img :src="curPlayMusic.detail.al.picUrl" alt="" v-if="JSON.stringify(curPlayMusic) !== '{}'">
        </div>
        <div class="music-name">
          <p
            v-if="JSON.stringify(curPlayMusic) !== '{}'">{{curPlayMusic.detail.name}}</p>
          <p>
            <span
              v-for="(item,index) in curPlayMusic.detail.ar"
            >{{item.name}}
            <span v-if="index !== curPlayMusic.detail.ar.length - 1">/
            </span>
          </span>
          </p>
        </div>
      </div>
      <div class="wonderful-comments" v-show="!showLoading">
        <div class="comment-title">
          精彩评论
        </div>
        <ul class="comment-content">
          <li v-for="(item,index) in hotComments">
            <div class="comment-avatar">
              <div><img :src="item.user.avatarUrl" alt=""></div>
            </div>
            <div class="comment-body">
              <div class="comment-body-title">
                <p>{{item.user.nickname}} <br/><span>2017年7月7日</span></p>
                <p>{{item.likedCount}} <i class="iconfont icon-dianzan"></i></p>
              </div>
              <div class="comment-body-content">
                <p>{{item.content}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="recent-comments" v-show="!showLoading">
        <div class="comment-title">
          最新评论
        </div>
        <ul class="comment-content">
          <li v-for="(item,index) in comments">
            <div class="comment-avatar">
              <div><img :src="item.user.avatarUrl" alt=""></div>
            </div>
            <div class="comment-body">
              <div class="comment-body-title">
                <p>{{item.user.nickname}} <br/><span>2017年7月7日</span></p>
                <p>{{item.likedCount}} <i class="iconfont icon-dianzan"></i></p>
              </div>
              <div class="comment-body-content">
                <p>{{item.content}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="comment-loading" v-show="showLoading">
        <md-spinner :md-size="40" md-indeterminate></md-spinner>
      </div>
      <div class="comment-b-loading" v-show="bottomLoading">
        <md-spinner :md-size="30" md-indeterminate></md-spinner>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../assets/js/api'

  export default {
    data() {
      return {
        hotComments: [],
        comments: [],
        showLoading: false,
        bottomLoading: false,
        offset: 1,
        total: ''  //评论总数
      }
    },
    computed: {
      ...mapState([
        'commentId', 'showComment', 'curPlayMusic'
      ])
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      //热门评论
      fetHotComment(id) {
        axios.get(`${url}/comment/music?id=${id}&limit=0`).then(res => {
          this.hotComments = res.data.hotComments
          this.showLoading = false //获取评论后隐藏loading
          this.total = res.data.total
        })
      },
      //获取更多评论
      fetComment(id, offset) {
        axios.get(`${url}/comment/music?id=${id}&limit=20&offset=${offset}`).then(res => {
          this.comments = res.data.comments
          this.bottomLoading = false
        })
      },
      changeId() {
        this.$store.dispatch('commentId', 23212)
      },
      //隐藏评论组件
      hideComment() {
        this.$store.state.showComment = false
      }
    },
    filters: {},
    watch: {
      //监听评论id，改变时重新获取新歌曲评论
      commentId(val, old) {
        this.$store.state.showComment = true
        this.showLoading = true
        this.fetHotComment(val)
        this.fetComment(val,1)
      },
      offset(val, old) {
        this.fetComment(commentId, val)
      },
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .comment {
    position: fixed;
    left: 0;
    bottom: -2000px;
    right: 0;
    background-color: #fff;
    z-index: 1004;
    transform: translate(0, 100%);
    &.show {
      position: fixed;
      top: 0;
      bottom: 0;
      transform: translate(0, 0);
    }
    .md-toolbar {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
    }

    .comment-wrap {
      height:100%;
      padding-top:pr(48);
      overflow-y: auto;
    }

    .music-info {
      display: flex;
      align-items: center;
      height: pr(81);
      padding: 0 pr(8);
      .music-pic {
        @include wh(pr(65));
        img {
        }
      }
      .music-name {
        flex: 1;
        margin-left: pr(10);
        p {
          &:nth-child(2) {
            margin-top: pr(6);
            font-size: pr(12);
            color: #626262;
          }
        }
      }
    }
    .comment-title {
      display: flex;
      align-items: center;
      height: pr(24);
      padding-left: pr(10);
      color: #626262;
      font-size: pr(12);
      background-color: #f0f0f0;
    }
    .comment-content {
      li {
        display: flex;
        padding-top: pr(10);
      }
      .comment-avatar {
        display: flex;
        justify-content: center;
        width: pr(46);
        div {
          @include wh(pr(28));
          border-radius: 50%;
          overflow: hidden;
        }
      }
      .comment-body {
        flex: 1;
        .comment-body-title {
          display: flex;
          justify-content: space-between;
          padding-right: pr(10);
          p {
            &:nth-of-type(1) {
              color: #616262;
              font-size: pr(12);
              line-height: 1.3;
              span {
                color: #acacac;
                font-size: pr(10);
              }
            }
            &:nth-of-type(2) {
              margin-top: pr(3);
              color: #616261;
              font-size: pr(12);
            }
          }
        }
        .comment-body-content {
          padding: pr(10);
          padding-left: 0;
          border-bottom: 1px solid #e0e0e0;
          p {
            font-size: pr(14);
            line-height: 1.5;
            color: #333;
          }
        }
      }
    }
    .comment-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-40%, -50%);
    }
    .comment-b-loading {
      display: flex;
      height:pr(40);
      justify-content: center;
    }
  }
</style>


================================================
FILE: src/components/Cover.vue
================================================
<template>
  <div class="bg-cover" :class="{hide:!showCover}" @touchmove.prevent @click="hideCover">
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState([
        'showCover'  //控制是否添加hide class，隐藏或显示
      ])
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      hideCover() {
        this.$store.dispatch('showPlayList', false)
      }
    },
    filters: {},
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .bg-cover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    z-index:1002;
    background-color: rgba(0, 0, 0, .5);
    transition: all .5s;
    &.hide {
      position: static;
      opacity: 0;
    }
  }
</style>


================================================
FILE: src/components/Header.vue
================================================
<template>
    <div>

    </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    mounted() {
      this.(() => {

      })
    },
    methods: {},
    filters: {},
    computed: {
      ...mapState([])
    }
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/common';

</style>


================================================
FILE: src/components/Hello.vue
================================================
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import axios from 'axios'


  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      this.$nextTick(() => {
        console.log(this.url)
        this.getTest()
      })
    },
    methods: {
      getTest() {
        axios.get(`${this.url}/lyric?id=347230`).then(res => {
          console.log(1)
        })
      }
    },
    computed: {
      ...mapState([
        'url'
      ])
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>


================================================
FILE: src/components/ListTitle.vue
================================================
<template>
  <h3 class="list-title">{{title}} <i class="iconfont icon-jiantou"></i></h3>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['title']
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .list-title {
    margin:pr(13) 0;
    border-left:pr(3) solid $baseColor;
    text-indent: pr(10);
    font-size:pr(14);
    .iconfont {
      position: relative;
      top:pr(-1);
      height:100%;
      font-size:pr(12);
    }
  }
</style>


================================================
FILE: src/components/PlayList.vue
================================================
<template>
  <div class="play-list" :class="{showlist:showPlayList}">
    <div class="play-list-title">
      播放列表（{{playList.length}}）{{curMusicIndex}}
    </div>
    <div class="play-list-content">
      <ul>
        <li class="play-list-item" v-for="(item,index) in playList" :key="index">
          <div
            class="song-name"
            :class="{current: item.id === curId}"
            @click="playMusicFromList(item.id)">
            <i class="iconfont icon-iconfonthuodonggonggao"></i>{{item.name}} -
            <span v-for="(value,i) in item.artist">{{value.name}}
              <span v-if="i !== item.artist.length - 1"> / </span>
            </span>
          </div>
          <div class="song-del"><i class="iconfont icon-shanchu"></i></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState,mapGetters} from 'vuex'
  import url from '../assets/js/api'

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState([
        'showPlayList', 'playList','curPlayMusic','curMusicIndex'
      ]),
      ...mapGetters([
        'curId'
      ]),
      //当前播放歌曲在播放列表中的索引
      curMusicIndexComputed() {
        if (this.playList.length > 0) {
          return this.playList.findIndex((ele) => {
            return ele.id === this.curId
          })
        } else {
          return 0
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$store.dispatch('curMusicIndex', this.curMusicIndexComputed)
      })
    },
    methods: {
      hideCover() {
        this.$store.dispatch('showPlayList', false)
      },
      //点击获取歌曲播放信息
      playMusicFromList(id) {
        function getUrl() {
          return axios.get(`${url}/music/url?id=${id}`)
        }

        function getDetail() {
          return axios.get(`${url}/song/detail?ids=${id}`)
        }

        function getLyric() {
          return axios.get(`${url}/lyric?id=${id}`)
        }
        axios.all([getUrl(), getDetail(), getLyric()])
          .then(axios.spread((res1, res2, res3) => {
            const arr = [res1, res2, res3]
            this.$store.dispatch('curPlayMusic', arr)
            this.$store.dispatch('switchPlaying', true)
          }))
      }
    },
    filters: {},
    watch: {
      //监听当前歌曲在播放列表中的索引，改变就重新获取歌曲信息
      curMusicIndex(val, old) {
        this.playMusicFromList(this.playList[val].id)
        console.log(this.playList[val].id)
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .play-list {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: pr(394);
    background-color: #fff;
    z-index: 1003;
    transform: translate(0, 100%);
    &.showlist {
      transition: all .3s;
      transform: translate(0, 0);
    }
    .play-list-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 pr(10);
      height: pr(40);
      font-size: pr(14);
      border-bottom: 1px solid #e0e0e0;
    }
    .play-list-content {
      height:pr(354);
      overflow-y: auto;
      ul {
      }
      .play-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: pr(42);
        padding: 0 pr(10);
        border-bottom: 1px solid #e0e0e0;
        .song-name {
          flex: 1;
          font-size: pr(14);
          line-height: 1.5;
          margin-right: pr(10);
          @include ell;
          .iconfont {
            display: none;
          }
          &.current {
            color:$baseColor;
            .iconfont {
              display: inline;
              margin-top:pr(2);
              margin-right:pr(5);
              font-size:pr(14);
            }
            span {
              color:$baseColor;
            }
          }
          span {
            color: #909090;
            font-size: pr(10);
          }
        }
        .song-del {
          .iconfont {
            font-size: pr(18);
          }
        }
      }
    }
  }


</style>


================================================
FILE: src/components/Player.vue
================================================
<template>
  <div class="player animated fadeIn"
       :class="{show: showPlayer}"
       @touchmove="moveProgress">
    <audio :src="curPlayMusic.url"
           id="music"
           autoplay="autoplay"
           ref="audio"
           @timeupdate="timeProgress"
           @ended="ended"
           @play="startPlay"></audio>
    <div class="player-wrap">
      <md-toolbar class="md-dense player-header">
        <md-button class="md-icon-button">
          <md-icon @click.native="back">arrow_back</md-icon>
        </md-button>
        <h2 class="md-title" style="flex: 1" v-if="JSON.stringify(curPlayMusic) !== '{}'">
          {{curPlayMusic.detail.name}}<br/>
          <span
            v-for="(item,index) in curPlayMusic.detail.ar" v-if="curPlayMusic">{{item.name}}
            <span v-if="index !== curPlayMusic.detail.ar.length - 1">/ </span>
          </span></h2>
        <md-button class="md-icon-button">
          <md-icon>share</md-icon>
        </md-button>
      </md-toolbar>
      <div class="player-panel1" v-show="showPanel" @click="showPanelF">
        <div class="player-line"></div>
        <div class="player-needle"><img src="../assets/images/player-needle.png" alt=""></div>
        <div class="record-cover">
          <div class="record-bg rotate-bg animated slideInRight">
            <div class="music-bg">
              <!--判断curPlayMusic不为空-->
              <img :src="curPlayMusic.detail.al.picUrl" alt="" v-if="JSON.stringify(curPlayMusic) !== '{}'">
            </div>
          </div>
        </div>
        <div class="player-bar">
          <div class="bar-item"><i class="iconfont icon-like"></i></div>
          <div class="bar-item"><i class="iconfont icon-download"></i></div>
          <div class="bar-item" @click.stop="openComment(curPlayMusic.detail.id)"
               v-if="JSON.stringify(curPlayMusic) !== '{}'"><i class="iconfont icon-pinglun"></i><span
            class="comment-total">{{11111 | commentTotalFormat}}</span></div>
          <div class="bar-item"><i class="iconfont icon-more1170511easyiconnet"></i></div>
        </div>
      </div>
      <div class="player-panel2" v-show="!showPanel" @click="showPanelF">
        <ul ref="lyric_wrap" class="lyric-wrap" v-if="lyric" :style="`transform: translateY(${marginTop}px)`">
          <li v-for="(value,key) in lyric">{{value}}</li>
        </ul>
        <ul v-else class="lyric-wrap">
          <li>暂无歌词</li>
        </ul>
      </div>
      <div class="player-ctrl">
        <div class="progress">
          <span>{{currentTime | timeFormat}}</span>
          <div class="progress-bar" ref="progress" @click.stop="touchProgress"
               @touchend.stop="moveProgressEnd">
            <div class="cur-progress" :style="`width:${curProgress}`"></div>
            <div class="idot" :style="`left:${curIdot}`" @touchstart.stop="isMove = true"></div>
          </div>
          <span>{{allTime | timeFormat}}</span>
        </div>
        <div class="player-conctrl">
          <div class="play-mode" @click="switchMode">
            <i class="iconfont"
               :class="{
              'icon-shunxubofang': mode === 1,
              'icon-suijibofang': mode === 2,
              'icon-danquxunhuan': mode === 3}
            "></i>
          </div>
          <div class="prev" @click="prevMusic"><i class="iconfont icon-shangyishou1"></i></div>
          <div class="ctrl">
            <i class="iconfont icon-iconfontplay" v-if="!playing" @click="play"></i>
            <i class="iconfont icon-zanting" v-else @click="pause"></i>
          </div>
          <div class="next" @click="nextMusic"><i class="iconfont icon-xiayishou1"></i></div>
          <div class="play-list-btn"><i class="iconfont icon-liebiao" @click="showPlayList"></i></div>
        </div>
      </div>
    </div>
    <div class="player-bg" :style="`backgroundImage:url(${curPlayMusic.detail.al.picUrl || bg})`"
         v-if="JSON.stringify(curPlayMusic) !== '{}'"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import {mapGetters} from 'vuex'


  export default {
    data() {
      return {
        curProgress: '0',
        timer: null,
        currentTime: 0,
        allTime: 0,
        curIdot: 0,
        parsed: {}, //临时哈希表，保存播放进度和偏移位置
        marginTop: 0,
        showPanel: true,
        mode: 1,  //播放模式，1-顺序，2-随机，3-循环
        bg: '../assets/images/bg.jpg',
        isMove: false  //
      }
    },
    computed: {
      ...mapState([
        'playing', 'showPlayer', 'curPlayMusic', 'curMusicIndex', 'playList'
      ]),
      /*...mapGetters([
       'lyric'
       ]),*/
      lyric() {
        if (this.curPlayMusic.lrc !== undefined) {
          return this.parseLrc(this.curPlayMusic.lrc.lyric) || null
        } else {
//          debugger
          return false
        }
      },
      //随机播放随机id
      randomId() {
        let length = this.playList.length
        let id
        do {
          id = Math.round(Math.random() * length)
        } while (id === this.curMusicIndex)
        return id
      }
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {
      //播放
      play() {
        this.$refs.audio.play()
//        this.timeProgress()
        this.$store.dispatch('switchPlaying', true)
//        console.log(this.$store.state.playing)
      },
//      暂停
      pause() {
        this.$refs.audio.pause()
//        clearInterval(this.timer)
        this.$store.dispatch('switchPlaying', false)
//        console.log(this.$store.state.playing)
      },
      //audio的timeupdate事件触发
      timeProgress() {
        //拖动时不执行
        if (this.isMove) return
        /*this.timer = setInterval(() => {*/
//        const audioid = document.getElementById('music')
        const audioid = this.$refs.audio
        var cur = (audioid.currentTime / audioid.duration) * this.$refs.progress.offsetWidth
        this.curProgress = cur + 'px'
        this.curIdot = (cur - 13) + 'px'
        this.currentTime = audioid.currentTime
        this.allTime = audioid.duration
        /*}, 1000)*/
        this.updateLyric(audioid)
      },
      //歌词滚动
      updateLyric(audioid) {
        let text_temp;
        let data = this.parsed
        if (!data) return;
        let currentTime = Math.round(audioid.currentTime)
        let lrc = data[currentTime];
        if (!lrc)return;
        let text = lrc.text
        if (text != text_temp) {
//          locationLrc(lrc);
          document.querySelectorAll('.lyric-wrap .on').forEach((v, i) => {
            v.classList.remove('on')
          })
          let num = document.querySelector('.lyric-wrap').querySelectorAll('li:nth-child(' + (lrc.index + 1) + ')')[0]
          num.classList.add('on')
          this.$store.dispatch('showCurLyric', num.innerText)
          let top = Math.min(0, -lrc.top);
          this.marginTop = top
          /*console.log(this.marginTop)
           console.log(lrc.index + 1)*/
          text_temp = text;
        }
      },
      //audio触发play事件，开始播放
      startPlay() {
        if (this.lyric.length <= 0) {
          return
        }
//        console.log('start')
        this.$store.dispatch('switchPlaying', true)
        this.setParsed()
      },
      //audio触发ended事件，播放完毕
      ended() {
        this.$store.dispatch('switchPlaying', false)
        this.nextMusic()
      },
      //保存歌词索引内容偏移位置
      setParsed() {
        let i = 0
        if (this.lyric.length <= 0) {
          return
        }

        //用数组保存lyric的键并排序
        var arr = []
        for (let k in this.lyric) {
          /*this.parsed[k] = {
           index: i++,
           text: this.lyric[k],
           top: (i * 30) * 0.9
           }*/
          arr.push(parseInt(k))
        }
        //循环数组来为parsed赋值
        arr.sort((a, b) => a - b).forEach((v, i) => {
          this.parsed[v] = {
            index: i++,
            text: this.lyric[v],
            top: (i * 30) * 1
          }
        })
        /*console.log(arr.sort((a, b) => a - b))
         console.log(this.parsed)*/

//        console.log(this.parsed)
      },
      //隐藏播放器
      back() {
        this.$store.state.showPlayer = false
      },
      //解析歌词
      parseLrc(lrc) {
        var lyrics = lrc.split("\n");
        var lrcObj = {};
        for (var i = 0; i < lyrics.length; i++) {
          var lyric = decodeURIComponent(lyrics[i]);
          var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
          var timeRegExpArr = lyric.match(timeReg);
          if (!timeRegExpArr)continue;
          var clause = lyric.replace(timeReg, '');
          for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
            var t = timeRegExpArr[k];
            var min = Number(String(t.match(/\[\d*/i)).slice(1)),
              sec = Number(String(t.match(/\:\d*/i)).slice(1));
            var time = min * 60 + sec;
            lrcObj[time] = clause;
          }
        }
        return lrcObj;
      },
      //切换两个面板
      showPanelF() {
        this.showPanel = !this.showPanel
      },
      //显示播放列表
      showPlayList() {
        this.$store.dispatch('showPlayList', true)
      },
      //打开评论
      openComment(id) {
        this.$store.dispatch('commentId', id)
        this.$store.state.showComment = true
      },
      //下一首
      nextMusic() {
        if (this.mode === 1) {
          this.$store.dispatch('curMusicIndex', this.curMusicIndex + 1)
        } else if (this.mode === 2) {
          this.$store.dispatch('curMusicIndex', this.randomId)
        }
      },
      //上一首
      prevMusic() {
        if (this.mode === 1) {
          !this.curMusicIndex
            ? this.$store.dispatch('curMusicIndex', 0)
            : this.$store.dispatch('curMusicIndex', this.curMusicIndex - 1)
        } else if (this.mode === 2) {
          this.$store.dispatch('curMusicIndex', this.randomId)
        }
      },
      //切换播放模式
      switchMode() {
        this.mode < 3 ? this.mode++ : this.mode = 1
      },
      //拖动进度条
      moveProgress(e) {
        if (this.isMove) {
          const pro = this.$refs.progress
          const curWidth = (e.touches[0].clientX - pro.offsetLeft)
          this.curProgress = curWidth - 5 + 'px'
          this.curIdot = curWidth - 5 + 'px'
          console.log(curTime)
        }
      },
      //拖动进度条完毕
      moveProgressEnd(e) {
        this.isMove = false
        const pro = this.$refs.progress
        const curTime = (e.changedTouches[0].clientX - pro.offsetLeft) * pro.offsetWidth / this.allTime
        this.$refs.audio.currentTime = curTime
      },
      //点击进度条更改播放进度
      touchProgress(e) {
        const curTime = (e.clientX - this.$refs.progress.offsetLeft) * this.$refs.progress.offsetWidth / this.allTime
        console.log(curTime)
        this.$refs.audio.currentTime = curTime
      }
    },
    filters: {
      //播放时间格式化
      timeFormat(value) {
        let min = parseInt(value / 60)
        let sec = parseInt(value % 60)
        min = min < 10 ? '0' + min : min
        sec = sec < 10 ? '0' + sec : sec
        return min + ':' + sec
      },
      //评论总数大于999时显示999+
      commentTotalFormat(value) {
        if (parseInt(value) >= 1000) {
          return '999+'
        } else {
          return value
        }
      }
    },
    watch: {}
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .player {
    position: fixed;
    left: 0;
    bottom: -2000px;
    right: 0;background: url('../assets/images/bg.jpg');
    background-color: #fff;
    z-index: 1001;
    &.show {
      top: 0;
      bottom: 0;
    }
    &.animated {
      -webkit-animation-duration: .1s;
      -moz-animation-duration: .1s;
      -o-animation-duration: .1s;
      animation-duration: .1s;
    }
    .player-wrap {
      z-index: 1002;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .player-header {
    height: pr(56);
    background-color: transparent !important;
    h2 {
      line-height: 1.1;
      font-size: pr(16) !important;
      span {
        color: #ccc;
        font-size: pr(12);
      }
    }
  }

  .player-panel1 {
    position: absolute;
    left: 0;
    right: 0;
    top: pr(56);
    bottom: pr(110);
    /*display: none;*/
    .player-line {
      height: 1px;
      background-image: -webkit-linear-gradient(
          to right,
          rgba(0, 0, 0, 0),
          rgba(255, 255, 255, .3),
          rgba(0, 0, 0, 0)
      );
      background-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 0),
          rgba(255, 255, 255, .3),
          rgba(0, 0, 0, 0)
      );
    }

    .player-needle {
      position: absolute;
      z-index: 1;
      top: -1px;
      left: 46%;
      height: pr(140);
      img {
        height: 100%;
      }
    }

    .record-cover {
      @include wh(pr(250));
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;
      top: pr(80);
      border-radius: 50%;
      transform: translate(-50%, 0);
      background-color: rgba(255, 255, 255, .2);
      .record-bg {
        @include wh(pr(246));
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../assets/images/record-bg.png");
        background-size: 100% 100%;
        &.rotate-bg {
          animation: rotatebg 20s linear infinite;
        }
        @keyframes rotatebg {
          0% {
            transform: rotate(0deg);
          }
          50% {
            transform: rotate(180deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        .music-bg {
          @include wh(pr(168));
          border-radius: 50%;
          overflow: hidden;
          img {
            @include wh(100%);
          }
        }
      }
    }

    .player-bar {
      position: absolute;
      left: 50%;
      bottom: pr(10);
      transform: translate(-50%, 0);
      display: flex;
      width: 70%;
      justify-content: space-around;
      color: #fff;
      .bar-item:nth-child(3) {
        position: relative;
        .comment-total {
          position: absolute;
          top: pr(-5);
          right: pr(-12);
          font-size: pr(8);
          width: pr(21.5);
          height: pr(10);
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, .1);
        }
      }
      .iconfont {
        font-size: pr(18);
        &:nth-child(2) {
          font-size: pr(20);
        }
      }
    }
  }

  .player-panel2 {
    position: absolute;
    left: 0;
    right: 0;
    top: pr(56);
    bottom: pr(110);
    color: #fff;
    overflow: hidden;
    ul {
      padding-top: 65%;
      transition: all .8s;
      li {
        font-size: pr(14);
        /*padding: 5px 0;*/
        line-height: 30px;
        text-align: center;
        color: #ccc;
        &.on {
          color: #fff;
        }
      }
    }
  }

  .player-ctrl {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: pr(110);
    color: #fff;
    background-color: transparent;
    .progress {
      display: flex;
      align-items: center;
      padding: 0 pr(19);
      margin-top: pr(15);
      span {
        font-size: pr(8);
      }
      .progress-bar {
        flex: 1;
        margin: 0 pr(5);
        height: pr(2);
        background-color: #9f9f9f;
        .cur-progress {
          width: 50%;
          height: 100%;
          background-color: $baseColor;
        }
        .idot {
          position: relative;
          @include wh(13px);
          border-radius: 50%;
          background-color: #fff;
          top: pr(-8);
        }
      }
    }
    .player-conctrl {
      margin-top: pr(22);
      padding: 0 pr(15);
      display: flex;
      align-items: center;
      justify-content: space-around;
      > div i {
        font-size: pr(20);
      }
      .ctrl {
        display: flex;
        justify-content: center;
        align-items: center;
        @include wh(pr(40));
        border: 1px solid #fff;
        border-radius: 50%;
        i {
          margin-top: pr(3);
          margin-left: pr(3);
          font-size: pr(18);
          &.icon-zanting {
            margin-top: 0;
            margin-left: 0;
          }
        }
      }
      .play-list-btn {

      }
    }
  }

  .player-bg {
    position: absolute;
    left: -30%;
    top: -30%;
    width: 180%;
    height: 180%;
    z-index: 1001;
    background-image: url("http://p1.music.126.net/y1JN20Yevr4e8j75QeWtQA==/1771313232347170.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: blur(70px) brightness(70%);
  }
</style>


================================================
FILE: src/components/Root.vue
================================================
<template>
  <div class="root">
    <md-toolbar class="md-dense root">
      <md-button class="md-icon-button">
        <md-icon>menu</md-icon>
      </md-button>
      <h2 class="md-title" style="flex: 1">
        <i class="iconfont"
           :class="{
              'icon-yinyue': i === 0,
              'icon-wangyiyunyinlezizhi': i === 1,
              'icon-shejiao': i === 2,
              'active': i === cur
            }"
           @click="switchTab(i)"
           v-for="(n,i) in 3"></i>
      </h2>
      <md-button class="md-icon-button">
        <router-link to="/search">
          <md-icon>search</md-icon>
        </router-link>
      </md-button>
    </md-toolbar>
    <transition :name="transitionName">
      <keep-alive :include="/Test/">
        <router-view class="root-child-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {
        cur: 1,
        transitionName: ''
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      //切换标签，当前高亮
      switchTab(index) {
        this.cur = index
        switch (index) {
          case 0:
            this.$router.push({path: '/root/home'})
            break
          case 1:
            this.$router.push({path: '/root/index'})
            break
        }
      }
    },
    filters: {},
    watch: {
      //路由切换动画
      $route(to,from) {
        const arr = ['home','index','social']
        const toIndex = arr.indexOf(to.path.split('/')[3])
        const fromIndex = arr.indexOf(from.path.split('/')[3])
        this.transitionName = toIndex < fromIndex ? 'root-slide-right':'root-slide-left'
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .md-toolbar.root {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    a {
      color: rgba(255, 255, 255, .87) !important;
    }
    .md-title {
      display: flex;
      justify-content: center;
      .iconfont {
        color: #e58983;
        &.active {
          color: #fff;
        }
        &:not(:last-of-type) {
          margin-right: pr(15);
        }
        &:nth-of-type(1) {
          font-size: pr(20);
        }
        &:nth-of-type(2) {
          font-size: pr(26);
        }
        &:nth-of-type(3) {
          font-size: pr(24);
        }
      }
    }
  }

  .root-child-view {
    transition: all .3s cubic-bezier(.55, 0, .1, 1);
    overflow: auto;
  }

  .root-slide-left-enter, .root-slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(7.5rem, 0);
    transform: translate(7.5rem, 0);
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
  }

  .root-slide-left-leave-active, .root-slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-7.5rem, 0);
    transform: translate(-7.5rem, 0);
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
  }
  .root-slide-enter-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
  .root-slide-leave-active {
    -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
</style>


================================================
FILE: src/main.js
================================================
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

Vue.use(VueMaterial)
Vue.material.registerTheme({
  default: {
    primary: {
      color: 'red',
      hue: 700
    }
  }
})

import './assets/css/reset.css'
import './assets/css/common.css'
import 'animate.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})


================================================
FILE: src/page/Index/Index.vue
================================================
<template>
  <div class="index">
    <md-button-toggle md-single class="index">
      <md-button class="md-toggle"  @click.native="indexTab('recommend')">个性推荐</md-button>
      <md-button @click.native="indexTab('songlist')">歌单</md-button>
      <md-button @click.native="indexTab('radio')">主播电台</md-button>
      <md-button @click.native="indexTab('top')">排行榜</md-button>
    </md-button-toggle>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="index-child-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
//  import Recommend from 'Recommend.vue'

  export default {
    data() {
      return {
        transitionName: ''
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
//      切换顶部标签
      indexTab(tab) {
        this.$router.push({path: `/root/index/${tab}`})
      }
    },
    components: {
//      Recommend
    },
    filters: {},
    watch: {
      $route(to, from) {
//        获取path的最后路由，比较在arr中的索引位置，
        const arr = ['recommend','songlist','radio','top']
        const toIndex = arr.indexOf(to.path.split('/').pop())
        const fromIndex = arr.indexOf(from.path.split('/').pop())
        this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'
        console.log(this.transitionName)
//      取到路由的最后
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

  .index-tab {
    display: flex;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0 !important;
      height: pr(35);
      flex: 1;
      a:not(.md-button) {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: pr(14);
        color: #666;
        border-bottom: 2px solid #fff;
        &:hover {
          color: $baseColor;
          text-decoration: none;
          border-bottom-color: $baseColor;
        }
      }
    }
  }

  .md-button-toggle.index {
    position: fixed;
    top:pr(48);
    left:0;
    right:0;
    z-index:1000;
  }
  .md-theme-default.md-button-toggle {
    display: flex;
    .md-button {
      flex: 1;
      border-bottom: 3px solid #fff;
      background-color: #fff;
    }
    .md-toggle {
      color: $baseColor;
      background-color: #fff !important;
      border-bottom: 3px solid $baseColor;
    }
  }

  /* 上面是为了保证滑动的时候不出现抖动情况 */
  .index-child-view {
    position: absolute;
    left:0;
    top: pr(84);
    /*height: 100%;*/
    width: 100%;
    transition: all .3s cubic-bezier(.55,0,.1,1);
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 当child-view的内容过多时会撑开child-view使得内部能够滚动 */
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(7.5rem, 0);
    transform: translate(7.5rem, 0);
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-7.5rem, 0);
    transform: translate(-7.5rem, 0);
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
  }
  .slide-enter-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
  .slide-leave-active {
    -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

</style>


================================================
FILE: src/page/Index/Radio.vue
================================================
<template>
    <div>
      radio
    </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {},
    filters: {},
    computed: {
      ...mapState([])
    }
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/base';

</style>


================================================
FILE: src/page/Index/Recommend.vue
================================================
<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) in banners" :key="index">
        <img :src="item.pic" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="today-recommend">
      <div class="recommend-item animated pulse">
        <div class="circle-b">
          <div class="circle-t">
            <i class="iconfont icon-501"></i>
          </div>
        </div>
        <div class="item-name">私人FM</div>
      </div>
      <div class="recommend-item animated pulse">
        <div class="circle-b">
          <i class="iconfont icon-rili"></i>
        </div>
        <div class="item-name">每日歌曲推荐</div>
      </div>
      <div class="recommend-item animated pulse">
        <div class="circle-b">
          <div class="circle-t">
            <i class="iconfont icon-paixing"></i>
          </div>
        </div>
        <div class="item-name">云音乐热歌榜</div>
      </div>
    </div>
    <div class="reco-list">
      <list-title :title="'推荐歌单'"></list-title>
      <ul class="recl-list3">
        <li class="reco-list-item3" v-for="(item,index) in recommendList" @click="toSongListDetail(item.id, item)">
          <div><img :src="item.picUrl" alt=""></div>
          <p>{{item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="reco-list">
      <list-title :title="'独家放送'"></list-title>
      <ul class="recl-list2">
        <li class="reco-list-item2" v-for="(item,index) in dujiaList">
          <div>
            <img :src="item.sPicUrl" alt="" v-if="index < 2">
            <img :src="item.picUrl" alt="" v-else>
          </div>
          <p>{{item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'
  import ListTitle from '@/components/ListTitle'


  export default {
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          autoplay: 3000,
          loop: true
        },
        banners: [],
        recommendList: [],
        dujiaList: []
      }
    },
    computed: {
      ...mapState([
        'url'
      ])
    },
    created() {
      this.fetchBanner()
      this.fetchRecommendList()
      this.fetchDujia()
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      //获取banner图
      fetchBanner() {
        axios.get(`${url}/banner`).then(res => {
          this.banners = res.data.banners
        })
      },
      //获取推荐歌单
      fetchRecommendList() {
        axios.get(`${url}/personalized`).then(res => {
          this.recommendList = res.data.result
        })
      },
      //独家放送
      fetchDujia() {
        axios.get(`${url}/personalized/privatecontent`).then(res => {
          this.dujiaList = res.data.result
          this.dujiaList = this.dujiaList.reverse()
        })
      },
      //点击获取歌单详情
      toSongListDetail(id, obj) {
        this.$router.push({path: '/playlistdetail/' + id})
        this.$store.dispatch('curPlaylistDetail',obj)
      }
    },
    filters: {},
    components: {
      ListTitle
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

  .swiper-container {
    height: pr(146);
    .swiper-slide {
      img {
        @include wh(100%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    .swiper-pagination-bullet {
      background-color: #fff;
      opacity: .5;
    }
    .swiper-pagination-bullet-active {
      background: $baseColor;
      opacity: 1;
    }
  }

  .today-recommend {
    display: flex;
    align-items: center;
    height: pr(93);
    border-bottom: 1px solid #eee;

    .recommend-item {
      @include dfcc;
      flex-direction: column;
      flex: 1;
      .circle-b {
        @include dfcc;
        @include wh(pr(95/2));
        border-radius: 50%;
        border: 1px solid $baseColor;
        .iconfont {
          font-size: pr(24);
          color: $baseColor;
        }
      }
    }
    .item-name {
      margin-top: pr(8);
      font-size: pr(12);
    }
  }

  .reco-list {
    .recl-list3 {
      display: flex;
      flex-wrap: wrap;
      .reco-list-item3 {
        width: pr(248/2);
        margin-bottom: pr(10);
        margin-right: pr(1);
        &:nth-child(3n) {
          margin-right: 0;
        }
        div {
          height: pr(248/2);
          img {
            @include wh(100%)
          }
        }
        p {
          padding: pr(5);
          font-size: pr(12);
          line-height: 1.6;
          @include overhide(2)
        }
      }
    }
    .recl-list2 {
      display: flex;
      flex-wrap: wrap;
      .reco-list-item2 {
        width: pr(374/2);
        margin-bottom: pr(10);
        margin-right: pr(1);
        &:nth-child(2n) {
          margin-right: 0;
        }
        &:nth-child(3n) {
          width: 100%;
        }
        div {
          height: pr(248/2);
          img {
            @include wh(100%)
          }
        }
        p {
          padding: pr(5);
          font-size: pr(12);
          line-height: 1.6;
          @include overhide(2)
        }
      }
    }
  }
</style>


================================================
FILE: src/page/Index/SongList.vue
================================================
<template>
  <div>
    songlist
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {

    },
    filters: {

    },
    computed: {
      ...mapState([

      ])
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

</style>


================================================
FILE: src/page/Index/Top.vue
================================================
<template>
    <div>
      top
    </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {},
    filters: {},
    computed: {
      ...mapState([])
    }
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/base';

</style>


================================================
FILE: src/page/PlayListDetail.vue
================================================
<template>
  <div id="playlist_detail" ref="playlistdetail"><!-- v-if="JSON.stringify(playlist) !== '{}'"-->
    <div>
      <md-toolbar class="md-dense songlist">
        <md-button class="md-icon-button">
          <md-icon @click.native="back">arrow_back</md-icon>
        </md-button>
        <h2 class="md-title" style="flex: 1">歌单</h2>
        <md-button class="md-icon-button">
          <!--<md-icon @click.native="toHome">search</md-icon>-->
        </md-button>
      </md-toolbar>
      <div class="songlist-bg-wrap gradient-wrap">
        <div class="songlist-info">
          <div class="songlist-img">
            <img class="gradient-img" :src="curPlaylistDetail.picUrl || playlist.creator.backgroundUrl" alt="">
            <div class="play-views" v-if="playlist.playCount"><i
              class="iconfont icon-erjiline"></i>{{playlist.playCount | playCount}}万
            </div>
          </div>
          <div class="songlist-title">
            <h3>{{curPlaylistDetail.name || playlist.name}}</h3>
            <div class="songlist-avatar">
              <div class="songlist-avatar-img">
                <img :src="playlist.creator.avatarUrl" alt="" v-if="JSON.stringify(playlist) !== '{}'">
                <img src="../assets/images/playlist-avatar.png" alt="" v-else>
              </div>
              <span v-if="JSON.stringify(playlist) !== '{}'">{{playlist.creator.nickname}} </span><i
              class="iconfont icon-jiantou"></i>
            </div>
          </div>
        </div>
        <div class="songlist-operating">
          <div class="songlist-op-item"><i
            class="iconfont icon-wenjianjia"></i><span>{{playlist.subscribedCount || '收藏'}}</span>
          </div>
          <div class="songlist-op-item"><i
            class="iconfont icon-pinglun"></i><span>{{playlist.commentCount || '评论'}}</span>
          </div>
          <div class="songlist-op-item"><i
            class="iconfont icon-icglobaltitlebar48iconfontshare"></i><span>{{playlist.shareCount || '分享'}}</span></div>
          <div class="songlist-op-item"><i class="iconfont icon-download"></i><span>下载</span></div>
        </div>
        <div class="songlist-bg" ref="songlist_bg"
             :style="`backgroundImage: url(${this.curPlaylistDetail.picUrl});`"></div>
      </div>
      <div class="song-list">
        <div class="play-bar">
          <div class="play-bar-btn"><i
            class="iconfont icon-iconfont31"></i>播放全部<span
            v-if="JSON.stringify(playlist) !== '{}'">(共{{playlist.tracks.length}}首)</span></div>
        </div>
        <div class="song-item" v-for="(item,index) in playlist.tracks">
          <div class="song-index">{{index + 1}}</div>
          <div class="song-info" @click="playMusic(item.id)">
            <p class="song-name">{{item.name}}<span class="song-desc" v-show="item.alia[0]">{{item.alia[0]}}</span></p>
            <p class="song-singer"><span v-for="(itemname,index) in item.ar">{{itemname.name}}/</span> - {{item.al.name}}
            </p>
          </div>
          <div class="song-option">
            <i class="iconfont icon-more1170511easyiconnet"></i>
          </div>
        </div>
      </div>
      <div class="playlist-loading" v-if="loading">
        <md-spinner :md-size="40" md-indeterminate></md-spinner>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../assets/js/api'
  import Grade from 'grade-js'
  import filters from '../assets/js/filters'

  export default {
    data() {
      return {
        playlist: {},
        playListPanel: [], //存放播放列表
        loading: true
      }
    },
    computed: {
      ...mapState([
        'curPlaylistDetail'
      ]),
    },
    created() {
      this.fetchSongList()
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
//      歌单详情
      fetchSongList() {
        axios.get(`${url}/playlist/detail?id=${this.$route.params.id}`).then(res => {
          //获取完毕隐藏loading
          this.loading = false
          this.playlist = res.data.playlist
          let songObj
          //添加当前歌单到播放列表面板
          this.playlist.tracks.forEach((val) => {
            songObj = {
              id: val.id,
              name: val.name,
              artist: val.ar
            }
            this.playListPanel.push(songObj);
          })
//          console.log(this.playListPanel)
        }).catch(err => {
          console.error(err)
        })
      },
      back() {
        this.$router.go(-1)
      },
      playMusic(id) {
        this.$store.state.showPlayer = true
        function getUrl() {
          return axios.get(`${url}/music/url?id=${id}`)
        }

        function getDetail() {
          return axios.get(`${url}/song/detail?ids=${id}`)
        }

        function getLyric() {
          return axios.get(`${url}/lyric?id=${id}`)
        }
        //获取歌曲信息，并统一存入vuex中
        axios.all([getUrl(), getDetail(), getLyric()])
          .then(axios.spread((res1, res2, res3) => {
            const arr = [res1, res2, res3]
            this.$store.dispatch('curPlayMusic', arr)
            this.$store.dispatch('switchPlaying', true)
            this.$store.dispatch('playList', this.playListPanel)
//            console.log(this.playListPanel)
          }))
      },
    },
    //歌单播放次数过滤器
    filters: filters,
  }
</script>

<style lang="scss" type="text/scss">
  @import '../assets/css/base';

  .md-toolbar.songlist {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 1;
    h2 {
      font-size: pr(14);
    }
  }

  .songlist-bg-wrap {
    position: relative;
    height: pr(220);
    background-color: rgba(64, 46, 32, 0.58);
    padding: pr(50) pr(20) pr(10);
    color: #fff;
    overflow: hidden;
    .songlist-info {
      display: flex;
      .songlist-img {
        position: relative;
        @include wh(pr(116));
        img {
          @include wh(100%)
        }
        .play-views {
          display: flex;
          align-items: center;
          position: absolute;
          right: pr(5);
          top: pr(5);
          font-size: pr(10);
          i {
            margin-right: pr(3);
            font-size: pr(10);
          }
        }
      }
      .songlist-title {
        flex: 1;
        margin-left: pr(20);
        padding-top: pr(10);
        h3 {
          line-height: 1.4;
          font-size: pr(14);
        }
        .songlist-avatar {
          display: flex;
          align-items: center;
          margin-top: pr(25);
          .songlist-avatar-img {
            overflow: hidden;
            border-radius: 50%;
            @include ava(pr(24))
          }
          span {
            margin-left: pr(10);
            font-size: pr(12);
          }
          .iconfont {
            font-size: pr(10);
          }
        }
      }
    }
    .songlist-operating {
      display: flex;
      align-items: center;
      margin-top: pr(5);
      height: pr(48);
      .songlist-op-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        i {
          font-size: pr(16);
        }
        span {
          margin-top: pr(3);
          font-size: pr(12);
        }
      }
    }
    .songlist-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      filter: blur(35px)
    }
  }

  .song-list {
    $border_b: #e6e6e6;
    $c888: #888;
    .play-bar {
      display: flex;
      height: pr(46);
      padding: 0 pr(15);
      align-items: center;
      border-bottom: 1px solid $border_b;
      .play-bar-btn {
        font-size: pr(14);
        .iconfont {
          font-size: pr(18);
          margin-right: pr(10);
        }
        span {
          margin-left: pr(5);
          font-size: pr(12);
          color: $c888;
        }
      }
    }
    .song-item {
      display: flex;
      height: pr(50);
      border-bottom: 1px solid $border_b;
      .song-index {
        display: flex;
        justify-content: center;
        align-items: center;
        width: pr(45);
      }
      .song-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        overflow: hidden;
        .song-name {
          line-height: 1.2;
          font-size: pr(14);
          @include ell;
          .song-desc {
            color: $c888;
            font-size: pr(12);
          }
        }
        .song-singer {
          line-height: 1.2;
          margin-top: pr(3);
          color: $c888;
          font-size: pr(10);
          @include ell;
        }
      }
      .song-option {
        display: flex;
        justify-content: center;
        align-items: center;
        width: pr(45);
        color: $c888;
      }
    }
  }

  .playlist-loading {
    text-align: center;
    margin-top:pr(80);
  }
</style>


================================================
FILE: src/page/home/Home.vue
================================================
<template>
    <div>
      home
    </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {},
    filters: {},
    computed: {
      ...mapState([])
    }
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/base';

</style>


================================================
FILE: src/page/search/Album.vue
================================================
<template>
  <ul id="search-albums">
    <list-item :item="album" v-for="(album,index) in albums" :key="index"></list-item>
  </ul>
</template>

<script type="text/ecmascript-6"  >
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'
  import ListItem from './ListItem'

  export default {
    data() {
      return {
        word: '',
        albums: []
      }
    },
    props: {
      searchKey: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {
        this.getAlbum(this.searchKey)
      })
    },
    methods: {
      //专辑组件
      getAlbum(key) {
        axios.get(`${url}/search?keywords=${key}&type=10`).then(res => {
          this.albums = res.data.result.albums
        })
      }
    },
    filters: {},
    components: {ListItem},
    watch: {
      searchKey(val, old) {
        this.getAlbum(val)
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

</style>


================================================
FILE: src/page/search/Artist.vue
================================================
<template>
  <ul id="search-artist"
      @touchstart="touchStart"
      @touchmove="touchMove">
    <li class="search-artist-item" v-for="(item,index) in artists">
      <div class="s-artist-avatar">
        <img :src="item.picUrl" alt="">
      </div>
      <div class="s-artist-name">
        {{item.name}}<span v-if="item.alias.length > 0">（{{item.alias[0]}}）</span>
      </div>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'

  export default {
    data() {
      return {
        word: '',
        artists: []
      }
    },
    props: {
      searchKey: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {
        this.getArtist(this.searchKey)
      })
    },
    methods: {
      //艺术家信息
      getArtist(key) {
        axios.get(`${url}/search?keywords=${key}&type=100`).then(res => {
          this.artists = res.data.result.artists
        })
      }
    },
    filters: {},
    watch: {
      searchKey(val, old) {
        this.getArtist(val)
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

  .search-artist-item {
    display: flex;
    align-items: center;
    padding: pr(3) pr(6);
    border-bottom: 1px solid #e0e0e0;
    .s-artist-avatar {
      @include ava(pr(50))
    }
    .s-artist-name {
      flex: 1;
      padding-left: pr(10);
      font-size: pr(14);
      span {
        color: #888;
      }
    }
  }

</style>


================================================
FILE: src/page/search/ListItem.vue
================================================
<template>
  <li class="search-album-item">
    <div class="s-album-avatar">
      <img :src="item.picUrl" alt="">
    </div>
    <div class="s-album-avatar-bg">
      <img src="../../assets/images/search-artist-bg.png" alt="">
    </div>
    <div class="s-album-name">
      <p>{{item.name}}</p>
      <p>{{item.name || null}}</p>
    </div>
  </li>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    data() {
      return {}
    },
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {

    },
    filters: {},
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/base';

    .search-album-item {
      display: flex;
      align-items: center;
      padding: pr(3) pr(6);
      border-bottom: 1px solid #e0e0e0;
      .s-album-avatar {
        @include ava(pr(50))
      }
      .s-album-avatar-bg {
        height: pr(46);
        img {
          height: 100%;
        }
      }
      .s-album-name {
        flex: 1;
        overflow: hidden;
        padding-left: pr(10);
        p {
          @include ell;
          line-height:1.2;
          &:first-of-type {
            font-size: pr(14);
          }
          &:nth-of-type(2) {
            margin-top: pr(8);
            font-size: pr(10);
            color: #666;
          }
        }
      }
    }
</style>


================================================
FILE: src/page/search/Search.vue
================================================
<template>
  <div id="search">
    <md-toolbar class="md-dense search">
      <md-button class="md-icon-button">
        <md-icon @click.native="back">arrow_back</md-icon>
      </md-button>
      <input type="text"
             placeholder="搜索音乐、歌手、歌词、用户"
             @keydown="searchData"
             @focus="showSuggest = searchKey !== '' ? true: false"
             v-model="searchKey">
      <i class="iconfont icon-search" @click="toChild"></i>
    </md-toolbar>
    <div class="hot-search" :style="{height:windowHeight + 'px'}">
      <p>热门搜索</p>
      <ul class="hot-search-list">
        <li v-for="(item,index) in hotSearch" @click="searchHotKey(item)">{{item}}</li>
      </ul>
    </div>
    <md-button-toggle md-single class="search-button-toggle" v-if="showSearchType">
      <md-button class="md-toggle" @click.native="searchTab('song')">单曲</md-button>
      <md-button @click.native="searchTab('artist')">歌手</md-button>
      <md-button @click.native="searchTab('album')">专辑</md-button>
      <md-button @click.native="searchTab('list')">歌单</md-button>
    </md-button-toggle>
    <div class="search-suggest" v-show="showSuggest">
      <div class="search-key" @click="toChild">搜索“{{searchKey}}”</div>
      <ul v-if="suggestSongs.length !== 0">
        <li v-for="(item,index) in suggestSongs"
            @click="playMusicFromSearch(item.id)"><i
          class="iconfont icon-sousuo"></i>{{item.name}} - {{item.artists[0].name}}
        </li>
      </ul>
    </div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view
          class="search-child-view"
          :search-key="searchKeyProps"
        ></router-view>
        <!--通过props传递搜索词给搜索结果组件-->
      </keep-alive>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'

  export default {
    data() {
      return {
        transitionName: '',
        showSuggest: false,
        searchKey: '',
        searchKeyProps: '',
        suggestSongs: [],
        searching: false,
        showSearchType: false,
        hotSearch: ['跨界歌王', '老大', '暧昧', '告白气球', '演员', '薛之谦', '因你', '张碧晨', '杨宗纬', '凉凉'],
        windowHeight: 0
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {
        this.windowHeight = document.documentElement.clientHeight
      })
    },
    methods: {
      searchTab(tab) {
        this.$router.replace({path: `/search/${tab}`})
      },
      //按键的时候搜索显示推荐内容
      searchData(e) {
        if (e.keyCode === 13) {
          this.toChild()
        } else {
          axios.get(`${url}/search/suggest?keywords=${this.searchKey}`).then(res => {
            this.showSuggest = true
            if (res.data.code === 200) {
              this.suggestSongs = res.data.result.songs
            } else if (res.data.code === 400) {
              this.suggestSongs = []
              this.showSuggest = false
            }
          })
        }
      },
      //下拉搜索推荐点击播放
      playMusicFromSearch(id) {
        function getUrl() {
          return axios.get(`${url}/music/url?id=${id}`)
        }

        function getDetail() {
          return axios.get(`${url}/song/detail?ids=${id}`)
        }

        function getLyric() {
          return axios.get(`${url}/lyric?id=${id}`)
        }

        axios.all([getUrl(), getDetail(), getLyric()])
          .then(axios.spread((res1, res2, res3) => {
            const arr = [res1, res2, res3]
            this.$store.dispatch('curPlayMusic', arr)
            this.$store.state.showPlayer = true
          }))
      },
      //跳转到歌曲搜索结果页，由于通过props传递了搜索词，song组件会加载时就获取信息
      toChild() {
        this.$router.push({path: '/search/song'})
        this.searchKeyProps = this.searchKey
        this.showSuggest = false
        this.showSearchType = true
      },
      //点击伪热搜词也会跳转到结果页
      searchHotKey(key) {
        this.searchKey = key
        this.toChild()
      },
      back() {
        this.$router.go(-1)
      }
    },
    filters: {},
    watch: {
      $route(to, from) {
        const arr = ['song', 'artist', 'album', 'list']
        const toIndex = arr.indexOf(to.path.split('/').pop())
        const fromIndex = arr.indexOf(from.path.split('/').pop())
        this.transitionName = toIndex < fromIndex ? 'search-slide-right' : 'search-slide-left'
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

  #search {
    > ul {
      min-height:pr(400);
    }
    .md-toolbar {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      z-index: 1000;
      input {
        flex: 1;
        margin-right: pr(5);
        height: pr(30);
        background-color: transparent;
        border: none;
        padding-bottom: 0;
        border-bottom: 1px solid #fff;
        color: #fff;
        &::-webkit-input-placeholder {
          color: #e07770;
        }
        &:focus {
          outline: none;
        }
      }
      .iconfont {
        display: inline-block;
        font-size: pr(20)
      }
    }
    .hot-search {
      box-sizing: border-box;
      padding: pr(100) pr(10);
      p {
        font-size: pr(12);
        color: #666;
        margin-bottom: pr(11);
      }
      .hot-search-list {
        display: flex;
        flex-wrap: wrap;
        li {
          padding: pr(7) pr(11);
          margin: pr(0) pr(8) pr(8) 0;
          border: 1px solid #dcdcdc;
          border-radius: pr(25);
          font-size: pr(14);
        }
      }
    }
    .md-button-toggle.search-button-toggle {
      position: fixed;
      top: pr(48);
      left: 0;
      right: 0;
      display: flex;
      z-index: 1000;
      .md-button {
        flex: 1;
        font-size: pr(13);
        border-bottom: 3px solid #fff;
        background-color: #fff;
      }
      .md-toggle {
        color: $baseColor;
        background-color: #fff !important;
        border-bottom: 3px solid $baseColor;
      }
    }

    .search-suggest {
      position: fixed;
      z-index: 1001;
      top: pr(48);
      left: pr(15);
      right: pr(33);
      background-color: #f3f3f3;
      box-shadow: 3px 3px 10px #ccc, -1px 3px 10px #ccc;
      transition: all .3s;
      .search-key {
        padding: pr(15) pr(13);
        color: #679dc5;
      }
      ul {
        li {
          padding: pr(15) pr(13);
          border-top: 1px solid #e5e5e5;
          color: #666;
          font-size: pr(14);
          @include ell;
          .iconfont {
            margin-right: pr(8);
          }
        }
      }
    }

    .search-child-view {
      position: absolute;
      top: pr(86.4);
      left: 0;
      width: 100%;
      transition: all .3s cubic-bezier(.55, 0, .1, 1);
      background-color: #f2f4f5;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .search-slide-left-enter, .search-slide-right-leave-active {
      opacity: 0;
      -webkit-transform: translate(7.5rem, 0);
      transform: translate(7.5rem, 0);
      transition-delay: .3s;
      -webkit-transition-delay: .3s;
    }
    .search-slide-left-leave-active, .search-slide-right-enter {
      opacity: 0;
      -webkit-transform: translate(-7.5rem, 0);
      transform: translate(-7.5rem, 0);
      transition-delay: .3s;
      -webkit-transition-delay: .3s;
    }
    .search-slide-enter-active {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }
    .search-slide-leave-active {
      -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
  }
</style>


================================================
FILE: src/page/search/Song.vue
================================================
<template>
    <ul id="search-song">
      <li class="search-song-item" v-for="(item,index) in songs">
        <div class="search-song-info" @click="playMusicFromSearch(item.id)">
          <p class="search-song-name">{{item.name}}</p>
          <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>
        </div>
        <div class="search-song-btn">
          <i class="iconfont icon-more1170511easyiconnet"></i>
        </div>
      </li>
    </ul>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'

  export default {
    data() {
      return {
        word: '',
        songs: []
      }
    },
    props:{
      searchKey: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {
        this.getSong(this.searchKey)
      })
    },
    methods: {
      //点击播放
      getSong(key) {
        axios.get(`${url}/search?keywords=${key}`).then(res => {
          this.songs = res.data.result.songs
        })
      },
      playMusicFromSearch(id) {
        function getUrl() {
          return axios.get(`${url}/music/url?id=${id}`)
        }

        function getDetail() {
          return axios.get(`${url}/song/detail?ids=${id}`)
        }

        function getLyric() {
          return axios.get(`${url}/lyric?id=${id}`)
        }
        axios.all([getUrl(), getDetail(), getLyric()])
          .then(axios.spread((res1, res2, res3) => {
            const arr = [res1, res2, res3]
            this.$store.dispatch('curPlayMusic', arr)
            this.$store.state.showPlayer = true
          }))
      }
    },
    filters: {
      //高亮搜索词
      lightWord(value) {
        console.log(this.searchKey)
        const length = this.searchKey.length
        const index = value.indexOf(this.searchKey)
        return value.substr(index, 2)
      }
    },
    watch: {
      searchKey(val, old) {
        this.word = val
        this.getSong(val)
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
    @import '../../assets/css/base';

    #search-song {
      .search-song-item {
        display: flex;
        align-items: center;
        padding:pr(15) pr(7);
        border-bottom:1px solid #dee0e1;
        .search-song-info {
          flex:1;
        }
        .search-song-name {
          font-size:pr(14);
          @include ell;
        }
        .search-song-artist {
          margin-top:pr(10);
          font-size:pr(12);
          @include ell;
        }
        .iconfont {
          color:#888;
        }
      }
    }
</style>


================================================
FILE: src/page/search/list.vue
================================================
<template>
  <ul id="search-list">
    <li class="search-album-item"
        v-for="(item,index) in list"
        @click="toSongListDetail(item.id, item)">
      <div class="s-album-avatar">
        <img :src="item.coverImgUrl" alt="">
      </div>
      <div class="s-album-name">
        <p>{{item.name}}</p>
        <p>{{item.trackCount}}首 by {{item.creator.nickname}} 播放 {{item.playCount | playCount}}次</p>
      </div>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import {mapState} from 'vuex'
  import url from '../../assets/js/api'

  export default {
    data() {
      return {
        word: '',
        list:[]
      }
    },
    props: {
      searchKey: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapState([])
    },
    mounted() {
      this.$nextTick(() => {
        this.getList(this.searchKey)
      })
    },
    methods: {
      //获取歌单信息
      getList(key) {
        axios.get(`${url}/search?keywords=${key}&type=1000`).then(res => {
          this.list = res.data.result.playlists
        })
      },
      //跳转到歌单详情页
      toSongListDetail(id, obj) {
        this.$router.push({path: '/playlistdetail/' + id})
        this.$store.dispatch('curPlaylistDetail',obj)
      }
    },
    filters: {
      playCount(value) {
        if (value < 100000) {
            return value
        } else {
          return (value / 10000).toFixed(1)  + '万'
        }
      }
    },
    watch: {
      searchKey(val, old) {
        this.getList(val)
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import '../../assets/css/base';

</style>


================================================
FILE: src/router/index.js
================================================
import Vue from 'vue'
import Router from 'vue-router'
import Root from '@/components/Root'

import Index from '../page/index/Index'
import Recommend from '../page/index/Recommend'
import SongList from '../page/index/SongList'
import Radio from '../page/index/Radio'
import Top from '../page/index/Top'

import Home from '../page/home/Home'
import PlayListDetail from '../page/PlayListDetail'
import Search from '../page/search/Search'
import Song from '../page/search/Song'
import Artist from '../page/search/Artist'
import Album from '../page/search/Album'
import List from '../page/search/list.vue'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/root/index'
    },
    {
      path: '/root',
      name: 'Root',
      component: Root,
      children: [
        {
          path: 'index',
          name: 'Test',
          component: Index,
          redirect: 'index/recommend',
          children: [
            {
              path: 'recommend',
              name: 'recommend',
              component: Recommend
            },
            {
              path: 'songlist',
              component: SongList
            },
            {
              path: 'radio',
              component: Radio
            },
            {
              path: 'top',
              component: Top
            }
          ]
        },
        {
          path: 'home',
          component: Home
        },
      ]
    },
    {
      path: '/playlistdetail/:id',
      component: PlayListDetail
    },
    {
      path: '/search',
      component: Search,
      redirect: '',
      children: [
        {
          path: 'song',
          component: Song
        },
        {
          path: 'artist',
          component: Artist
        },
        {
          path: 'album',
          component: Album
        },
        {
          path: 'list',
          component: List
        }
      ]
    }
  ]
})


================================================
FILE: src/store/actions.js
================================================
/**
 * Created by 12 on 2017/6/8.
 */
import * as types from './mutation-type'

export default {
  curPlaylistDetail({commit}, obj) {
    commit(types.CUR_PLAYLIST_INFO, obj)
  },
  curPlayMusic({commit}, arr) {
    commit(types.CUR_PLAY_MUSIC, arr)
  },
  switchPlaying({commit}, status) {
    commit(types.SWITCH_PLAYING, status)
  },
  showCurLyric({commit}, lyric) {
    commit(types.SHOW_CUR_LYRIC, lyric)
  },
  showPlayList({commit}, status) {
    commit(types.SHOW_PLAY_LIST, status)
  },
  playList({commit}, arr) {
    commit(types.PLAY_LIST, arr)
  },
  commentId({commit}, id) {
    commit(types.COMMENT_ID, id)
  },
  curMusicIndex({commit}, index) {
    commit(types.CUR_MUSIC_INDEX, index)
  }
}


================================================
FILE: src/store/getters.js
================================================
/**
 * Created by 12 on 2017/6/14.
 */

export default {
  curId(state) {
    return state.curPlayMusic.detail ? state.curPlayMusic.detail.id : null
  }
}


================================================
FILE: src/store/index.js
================================================
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

const state = {
  curPlaylistDetail: {},
  curPlayMusic: {},
  playing: false,
  showPlayer: false,
  curLyric: '',
  showPlayList: false,
  playList: [],
  showCover: false,
  commentId: null,
  showComment: false,
  curMusicIndex: 0
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})


================================================
FILE: src/store/mutation-type.js
================================================
//歌单页当前歌单上面图片标题信息
export const CUR_PLAYLIST_INFO= 'CUR_PLAYLIST_INFO'
//当前播放的歌曲信息:歌名,歌手，专辑，歌词，url，封面
export const CUR_PLAY_MUSIC= 'CUR_PLAY_MUSIC'
//切换播放状态
export const SWITCH_PLAYING = 'SWITCH_PLAYING'
//播放导航显示的歌词
export const SHOW_CUR_LYRIC = 'SHOW_CUR_LYRIC'
//控制显示播放列表
export const SHOW_PLAY_LIST = 'SHOW_PLAY_LIST'
//存储播放列表
export const PLAY_LIST = 'PLAY_LIST'
//当前歌曲评论id
export const COMMENT_ID = 'COMMENT_ID'
//当前歌曲在播放列表的索引
export const CUR_MUSIC_INDEX = 'CUR_MUSIC_INDEX'


================================================
FILE: src/store/mutations.js
================================================
/**
 * Created by 12 on 2017/6/8.
 */
import * as types from './mutation-type'

export default {
  [types.CUR_PLAYLIST_INFO](state, obj) {
    state.curPlaylistDetail = obj
  },
  [types.CUR_PLAY_MUSIC](state, arr) {
    const obj = {
      url: arr[0].data.data[0].url,
      detail: arr[1].data.songs[0],
      lrc: arr[2].data.lrc
    }
    state.curPlayMusic = obj
  },
  [types.SWITCH_PLAYING](state, status) {
    state.playing = status
  },
  [types.SHOW_CUR_LYRIC](state, lyric) {
    state.curLyric = lyric
  },
  [types.SHOW_PLAY_LIST](state, status) {
    state.showPlayList = status
    state.showCover = status
  },
  [types.PLAY_LIST](state, arr) {
    state.playList = arr
  },
  [types.COMMENT_ID](state, id) {
    state.commentId = id
  },
  [types.CUR_MUSIC_INDEX](state, index) {
    state.curMusicIndex = index
  }
}


================================================
FILE: static/.gitkeep
================================================


================================================
FILE: static/iconfont/MaterialIcons-Regular.ijmap
================================================
{"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"}}}

================================================
FILE: static/iconfont/README.md
================================================
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
```

Read more in our full usage guide:
http://google.github.io/material-design-icons/#icon-font-for-the-web


================================================
FILE: static/iconfont/codepoints
================================================
3d_rotation e84d
ac_unit eb3b
access_alarm e190
access_alarms e191
access_time e192
accessibility e84e
accessible e914
account_balance e84f
account_balance_wallet e850
account_box e851
account_circle e853
adb e60e
add e145
add_a_photo e439
add_alarm e193
add_alert e003
add_box e146
add_circle e147
add_circle_outline e148
add_location e567
add_shopping_cart e854
add_to_photos e39d
add_to_queue e05c
adjust e39e
airline_seat_flat e630
airline_seat_flat_angled e631
airline_seat_individual_suite e632
airline_seat_legroom_extra e633
airline_seat_legroom_normal e634
airline_seat_legroom_reduced e635
airline_seat_recline_extra e636
airline_seat_recline_normal e637
airplanemode_active e195
airplanemode_inactive e194
airplay e055
airport_shuttle eb3c
alarm e855
alarm_add e856
alarm_off e857
alarm_on e858
album e019
all_inclusive eb3d
all_out e90b
android e859
announcement e85a
apps e5c3
archive e149
arrow_back e5c4
arrow_downward e5db
arrow_drop_down e5c5
arrow_drop_down_circle e5c6
arrow_drop_up e5c7
arrow_forward e5c8
arrow_upward e5d8
art_track e060
aspect_ratio e85b
assessment e85c
assignment e85d
assignment_ind e85e
assignment_late e85f
assignment_return e860
assignment_returned e861
assignment_turned_in e862
assistant e39f
assistant_photo e3a0
attach_file e226
attach_money e227
attachment e2bc
audiotrack e3a1
autorenew e863
av_timer e01b
backspace e14a
backup e864
battery_alert e19c
battery_charging_full e1a3
battery_full e1a4
battery_std e1a5
battery_unknown e1a6
beach_access eb3e
beenhere e52d
block e14b
bluetooth e1a7
bluetooth_audio e60f
bluetooth_connected e1a8
bluetooth_disabled e1a9
bluetooth_searching e1aa
blur_circular e3a2
blur_linear e3a3
blur_off e3a4
blur_on e3a5
book e865
bookmark e866
bookmark_border e867
border_all e228
border_bottom e229
border_clear e22a
border_color e22b
border_horizontal e22c
border_inner e22d
border_left e22e
border_outer e22f
border_right e230
border_style e231
border_top e232
border_vertical e233
branding_watermark e06b
brightness_1 e3a6
brightness_2 e3a7
brightness_3 e3a8
brightness_4 e3a9
brightness_5 e3aa
brightness_6 e3ab
brightness_7 e3ac
brightness_auto e1ab
brightness_high e1ac
brightness_low e1ad
brightness_medium e1ae
broken_image e3ad
brush e3ae
bubble_chart e6dd
bug_report e868
build e869
burst_mode e43c
business e0af
business_center eb3f
cached e86a
cake e7e9
call e0b0
call_end e0b1
call_made e0b2
call_merge e0b3
call_missed e0b4
call_missed_outgoing e0e4
call_received e0b5
call_split e0b6
call_to_action e06c
camera e3af
camera_alt e3b0
camera_enhance e8fc
camera_front e3b1
camera_rear e3b2
camera_roll e3b3
cancel e5c9
card_giftcard e8f6
card_membership e8f7
card_travel e8f8
casino eb40
cast e307
cast_connected e308
center_focus_strong e3b4
center_focus_weak e3b5
change_history e86b
chat e0b7
chat_bubble e0ca
chat_bubble_outline e0cb
check e5ca
check_box e834
check_box_outline_blank e835
check_circle e86c
chevron_left e5cb
chevron_right e5cc
child_care eb41
child_friendly eb42
chrome_reader_mode e86d
class e86e
clear e14c
clear_all e0b8
close e5cd
closed_caption e01c
cloud e2bd
cloud_circle e2be
cloud_done e2bf
cloud_download e2c0
cloud_off e2c1
cloud_queue e2c2
cloud_upload e2c3
code e86f
collections e3b6
collections_bookmark e431
color_lens e3b7
colorize e3b8
comment e0b9
compare e3b9
compare_arrows e915
computer e30a
confirmation_number e638
contact_mail e0d0
contact_phone e0cf
contacts e0ba
content_copy e14d
content_cut e14e
content_paste e14f
control_point e3ba
control_point_duplicate e3bb
copyright e90c
create e150
create_new_folder e2cc
credit_card e870
crop e3be
crop_16_9 e3bc
crop_3_2 e3bd
crop_5_4 e3bf
crop_7_5 e3c0
crop_din e3c1
crop_free e3c2
crop_landscape e3c3
crop_original e3c4
crop_portrait e3c5
crop_rotate e437
crop_square e3c6
dashboard e871
data_usage e1af
date_range e916
dehaze e3c7
delete e872
delete_forever e92b
delete_sweep e16c
description e873
desktop_mac e30b
desktop_windows e30c
details e3c8
developer_board e30d
developer_mode e1b0
device_hub e335
devices e1b1
devices_other e337
dialer_sip e0bb
dialpad e0bc
directions e52e
directions_bike e52f
directions_boat e532
directions_bus e530
directions_car e531
directions_railway e534
directions_run e566
directions_subway e533
directions_transit e535
directions_walk e536
disc_full e610
dns e875
do_not_disturb e612
do_not_disturb_alt e611
do_not_disturb_off e643
do_not_disturb_on e644
dock e30e
domain e7ee
done e876
done_all e877
donut_large e917
donut_small e918
drafts e151
drag_handle e25d
drive_eta e613
dvr e1b2
edit e3c9
edit_location e568
eject e8fb
email e0be
enhanced_encryption e63f
equalizer e01d
error e000
error_outline e001
euro_symbol e926
ev_station e56d
event e878
event_available e614
event_busy e615
event_note e616
event_seat e903
exit_to_app e879
expand_less e5ce
expand_more e5cf
explicit e01e
explore e87a
exposure e3ca
exposure_neg_1 e3cb
exposure_neg_2 e3cc
exposure_plus_1 e3cd
exposure_plus_2 e3ce
exposure_zero e3cf
extension e87b
face e87c
fast_forward e01f
fast_rewind e020
favorite e87d
favorite_border e87e
featured_play_list e06d
featured_video e06e
feedback e87f
fiber_dvr e05d
fiber_manual_record e061
fiber_new e05e
fiber_pin e06a
fiber_smart_record e062
file_download e2c4
file_upload e2c6
filter e3d3
filter_1 e3d0
filter_2 e3d1
filter_3 e3d2
filter_4 e3d4
filter_5 e3d5
filter_6 e3d6
filter_7 e3d7
filter_8 e3d8
filter_9 e3d9
filter_9_plus e3da
filter_b_and_w e3db
filter_center_focus e3dc
filter_drama e3dd
filter_frames e3de
filter_hdr e3df
filter_list e152
filter_none e3e0
filter_tilt_shift e3e2
filter_vintage e3e3
find_in_page e880
find_replace e881
fingerprint e90d
first_page e5dc
fitness_center eb43
flag e153
flare e3e4
flash_auto e3e5
flash_off e3e6
flash_on e3e7
flight e539
flight_land e904
flight_takeoff e905
flip e3e8
flip_to_back e882
flip_to_front e883
folder e2c7
folder_open e2c8
folder_shared e2c9
folder_special e617
font_download e167
format_align_center e234
format_align_justify e235
format_align_left e236
format_align_right e237
format_bold e238
format_clear e239
format_color_fill e23a
format_color_reset e23b
format_color_text e23c
format_indent_decrease e23d
format_indent_increase e23e
format_italic e23f
format_line_spacing e240
format_list_bulleted e241
format_list_numbered e242
format_paint e243
format_quote e244
format_shapes e25e
format_size e245
format_strikethrough e246
format_textdirection_l_to_r e247
format_textdirection_r_to_l e248
format_underlined e249
forum e0bf
forward e154
forward_10 e056
forward_30 e057
forward_5 e058
free_breakfast eb44
fullscreen e5d0
fullscreen_exit e5d1
functions e24a
g_translate e927
gamepad e30f
games e021
gavel e90e
gesture e155
get_app e884
gif e908
golf_course eb45
gps_fixed e1b3
gps_not_fixed e1b4
gps_off e1b5
grade e885
gradient e3e9
grain e3ea
graphic_eq e1b8
grid_off e3eb
grid_on e3ec
group e7ef
group_add e7f0
group_work e886
hd e052
hdr_off e3ed
hdr_on e3ee
hdr_strong e3f1
hdr_weak e3f2
headset e310
headset_mic e311
healing e3f3
hearing e023
help e887
help_outline e8fd
high_quality e024
highlight e25f
highlight_off e888
history e889
home e88a
hot_tub eb46
hotel e53a
hourglass_empty e88b
hourglass_full e88c
http e902
https e88d
image e3f4
image_aspect_ratio e3f5
import_contacts e0e0
import_export e0c3
important_devices e912
inbox e156
indeterminate_check_box e909
info e88e
info_outline e88f
input e890
insert_chart e24b
insert_comment e24c
insert_drive_file e24d
insert_emoticon e24e
insert_invitation e24f
insert_link e250
insert_photo e251
invert_colors e891
invert_colors_off e0c4
iso e3f6
keyboard e312
keyboard_arrow_down e313
keyboard_arrow_left e314
keyboard_arrow_right e315
keyboard_arrow_up e316
keyboard_backspace e317
keyboard_capslock e318
keyboard_hide e31a
keyboard_return e31b
keyboard_tab e31c
keyboard_voice e31d
kitchen eb47
label e892
label_outline e893
landscape e3f7
language e894
laptop e31e
laptop_chromebook e31f
laptop_mac e320
laptop_windows e321
last_page e5dd
launch e895
layers e53b
layers_clear e53c
leak_add e3f8
leak_remove e3f9
lens e3fa
library_add e02e
library_books e02f
library_music e030
lightbulb_outline e90f
line_style e919
line_weight e91a
linear_scale e260
link e157
linked_camera e438
list e896
live_help e0c6
live_tv e639
local_activity e53f
local_airport e53d
local_atm e53e
local_bar e540
local_cafe e541
local_car_wash e542
local_convenience_store e543
local_dining e556
local_drink e544
local_florist e545
local_gas_station e546
local_grocery_store e547
local_hospital e548
local_hotel e549
local_laundry_service e54a
local_library e54b
local_mall e54c
local_movies e54d
local_offer e54e
local_parking e54f
local_pharmacy e550
local_phone e551
local_pizza e552
local_play e553
local_post_office e554
local_printshop e555
local_see e557
local_shipping e558
local_taxi e559
location_city e7f1
location_disabled e1b6
location_off e0c7
location_on e0c8
location_searching e1b7
lock e897
lock_open e898
lock_outline e899
looks e3fc
looks_3 e3fb
looks_4 e3fd
looks_5 e3fe
looks_6 e3ff
looks_one e400
looks_two e401
loop e028
loupe e402
low_priority e16d
loyalty e89a
mail e158
mail_outline e0e1
map e55b
markunread e159
markunread_mailbox e89b
memory e322
menu e5d2
merge_type e252
message e0c9
mic e029
mic_none e02a
mic_off e02b
mms e618
mode_comment e253
mode_edit e254
monetization_on e263
money_off e25c
monochrome_photos e403
mood e7f2
mood_bad e7f3
more e619
more_horiz e5d3
more_vert e5d4
motorcycle e91b
mouse e323
move_to_inbox e168
movie e02c
movie_creation e404
movie_filter e43a
multiline_chart e6df
music_note e405
music_video e063
my_location e55c
nature e406
nature_people e407
navigate_before e408
navigate_next e409
navigation e55d
near_me e569
network_cell e1b9
network_check e640
network_locked e61a
network_wifi e1ba
new_releases e031
next_week e16a
nfc e1bb
no_encryption e641
no_sim e0cc
not_interested e033
note e06f
note_add e89c
notifications e7f4
notifications_active e7f7
notifications_none e7f5
notifications_off e7f6
notifications_paused e7f8
offline_pin e90a
ondemand_video e63a
opacity e91c
open_in_browser e89d
open_in_new e89e
open_with e89f
pages e7f9
pageview e8a0
palette e40a
pan_tool e925
panorama e40b
panorama_fish_eye e40c
panorama_horizontal e40d
panorama_vertical e40e
panorama_wide_angle e40f
party_mode e7fa
pause e034
pause_circle_filled e035
pause_circle_outline e036
payment e8a1
people e7fb
people_outline e7fc
perm_camera_mic e8a2
perm_contact_calendar e8a3
perm_data_setting e8a4
perm_device_information e8a5
perm_identity e8a6
perm_media e8a7
perm_phone_msg e8a8
perm_scan_wifi e8a9
person e7fd
person_add e7fe
person_outline e7ff
person_pin e55a
person_pin_circle e56a
personal_video e63b
pets e91d
phone e0cd
phone_android e324
phone_bluetooth_speaker e61b
phone_forwarded e61c
phone_in_talk e61d
phone_iphone e325
phone_locked e61e
phone_missed e61f
phone_paused e620
phonelink e326
phonelink_erase e0db
phonelink_lock e0dc
phonelink_off e327
phonelink_ring e0dd
phonelink_setup e0de
photo e410
photo_album e411
photo_camera e412
photo_filter e43b
photo_library e413
photo_size_select_actual e432
photo_size_select_large e433
photo_size_select_small e434
picture_as_pdf e415
picture_in_picture e8aa
picture_in_picture_alt e911
pie_chart e6c4
pie_chart_outlined e6c5
pin_drop e55e
place e55f
play_arrow e037
play_circle_filled e038
play_circle_outline e039
play_for_work e906
playlist_add e03b
playlist_add_check e065
playlist_play e05f
plus_one e800
poll e801
polymer e8ab
pool eb48
portable_wifi_off e0ce
portrait e416
power e63c
power_input e336
power_settings_new e8ac
pregnant_woman e91e
present_to_all e0df
print e8ad
priority_high e645
public e80b
publish e255
query_builder e8ae
question_answer e8af
queue e03c
queue_music e03d
queue_play_next e066
radio e03e
radio_button_checked e837
radio_button_unchecked e836
rate_review e560
receipt e8b0
recent_actors e03f
record_voice_over e91f
redeem e8b1
redo e15a
refresh e5d5
remove e15b
remove_circle e15c
remove_circle_outline e15d
remove_from_queue e067
remove_red_eye e417
remove_shopping_cart e928
reorder e8fe
repeat e040
repeat_one e041
replay e042
replay_10 e059
replay_30 e05a
replay_5 e05b
reply e15e
reply_all e15f
report e160
report_problem e8b2
restaurant e56c
restaurant_menu e561
restore e8b3
restore_page e929
ring_volume e0d1
room e8b4
room_service eb49
rotate_90_degrees_ccw e418
rotate_left e419
rotate_right e41a
rounded_corner e920
router e328
rowing e921
rss_feed e0e5
rv_hookup e642
satellite e562
save e161
scanner e329
schedule e8b5
school e80c
screen_lock_landscape e1be
screen_lock_portrait e1bf
screen_lock_rotation e1c0
screen_rotation e1c1
screen_share e0e2
sd_card e623
sd_storage e1c2
search e8b6
security e32a
select_all e162
send e163
sentiment_dissatisfied e811
sentiment_neutral e812
sentiment_satisfied e813
sentiment_very_dissatisfied e814
sentiment_very_satisfied e815
settings e8b8
settings_applications e8b9
settings_backup_restore e8ba
settings_bluetooth e8bb
settings_brightness e8bd
settings_cell e8bc
settings_ethernet e8be
settings_input_antenna e8bf
settings_input_component e8c0
settings_input_composite e8c1
settings_input_hdmi e8c2
settings_input_svideo e8c3
settings_overscan e8c4
settings_phone e8c5
settings_power e8c6
settings_remote e8c7
settings_system_daydream e1c3
settings_voice e8c8
share e80d
shop e8c9
shop_two e8ca
shopping_basket e8cb
shopping_cart e8cc
short_text e261
show_chart e6e1
shuffle e043
signal_cellular_4_bar e1c8
signal_cellular_connected_no_internet_4_bar e1cd
signal_cellular_no_sim e1ce
signal_cellular_null e1cf
signal_cellular_off e1d0
signal_wifi_4_bar e1d8
signal_wifi_4_bar_lock e1d9
signal_wifi_off e1da
sim_card e32b
sim_card_alert e624
skip_next e044
skip_previous e045
slideshow e41b
slow_motion_video e068
smartphone e32c
smoke_free eb4a
smoking_rooms eb4b
sms e625
sms_failed e626
snooze e046
sort e164
sort_by_alpha e053
spa eb4c
space_bar e256
speaker e32d
speaker_group e32e
speaker_notes e8cd
speaker_notes_off e92a
speaker_phone e0d2
spellcheck e8ce
star e838
star_border e83a
star_half e839
stars e8d0
stay_current_landscape e0d3
stay_current_portrait e0d4
stay_primary_landscape e0d5
stay_primary_portrait e0d6
stop e047
stop_screen_share e0e3
storage e1db
store e8d1
store_mall_directory e563
straighten e41c
streetview e56e
strikethrough_s e257
style e41d
subdirectory_arrow_left e5d9
subdirectory_arrow_right e5da
subject e8d2
subscriptions e064
subtitles e048
subway e56f
supervisor_account e8d3
surround_sound e049
swap_calls e0d7
swap_horiz e8d4
swap_vert e8d5
swap_vertical_circle e8d6
switch_camera e41e
switch_video e41f
sync e627
sync_disabled e628
sync_problem e629
system_update e62a
system_update_alt e8d7
tab e8d8
tab_unselected e8d9
tablet e32f
tablet_android e330
tablet_mac e331
tag_faces e420
tap_and_play e62b
terrain e564
text_fields e262
text_format e165
textsms e0d8
texture e421
theaters e8da
thumb_down e8db
thumb_up e8dc
thumbs_up_down e8dd
time_to_leave e62c
timelapse e422
timeline e922
timer e425
timer_10 e423
timer_3 e424
timer_off e426
title e264
toc e8de
today e8df
toll e8e0
tonality e427
touch_app e913
toys e332
track_changes e8e1
traffic e565
train e570
tram e571
transfer_within_a_station e572
transform e428
translate e8e2
trending_down e8e3
trending_flat e8e4
trending_up e8e5
tune e429
turned_in e8e6
turned_in_not e8e7
tv e333
unarchive e169
undo e166
unfold_less e5d6
unfold_more e5d7
update e923
usb e1e0
verified_user e8e8
vertical_align_bottom e258
vertical_align_center e259
vertical_align_top e25a
vibration e62d
video_call e070
video_label e071
video_library e04a
videocam e04b
videocam_off e04c
videogame_asset e338
view_agenda e8e9
view_array e8ea
view_carousel e8eb
view_column e8ec
view_comfy e42a
view_compact e42b
view_day e8ed
view_headline e8ee
view_list e8ef
view_module e8f0
view_quilt e8f1
view_stream e8f2
view_week e8f3
vignette e435
visibility e8f4
visibility_off e8f5
voice_chat e62e
voicemail e0d9
volume_down e04d
volume_mute e04e
volume_off e04f
volume_up e050
vpn_key e0da
vpn_lock e62f
wallpaper e1bc
warning e002
watch e334
watch_later e924
wb_auto e42c
wb_cloudy e42d
wb_incandescent e42e
wb_iridescent e436
wb_sunny e430
wc e63d
web e051
web_asset e069
weekend e16b
whatshot e80e
widgets e1bd
wifi e63e
wifi_lock e1e1
wifi_tethering e1e2
work e8f9
wrap_text e25b
youtube_searched_for e8fa
zoom_in e8ff
zoom_out e900
zoom_out_map e56b


================================================
FILE: static/iconfont/material-icons.css
================================================
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}