├── 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
└── src
    ├── App.vue
    ├── assets
        ├── iconfont
        │   ├── demo.css
        │   ├── demo_fontclass.html
        │   ├── demo_symbol.html
        │   ├── demo_unicode.html
        │   ├── iconfont.css
        │   ├── iconfont.eot
        │   ├── iconfont.js
        │   ├── iconfont.svg
        │   ├── iconfont.ttf
        │   └── iconfont.woff
        └── logo.png
    ├── components
        ├── card.vue
        ├── comingsoon.vue
        ├── common
        │   ├── navbar.vue
        │   └── sidebar.vue
        ├── detail.vue
        ├── film.vue
        ├── home.vue
        └── nowplaying.vue
    ├── main.js
    ├── router
        └── index.js
    └── store
        └── index.js


/README.md:
--------------------------------------------------------------------------------
 1 | # vuewebpack
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, function (err, stats) {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false,
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


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


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


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | require('./check-versions')()
  3 | 
  4 | const config = require('../config')
  5 | if (!process.env.NODE_ENV) {
  6 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  7 | }
  8 | 
  9 | const opn = require('opn')
 10 | const path = require('path')
 11 | const express = require('express')
 12 | const webpack = require('webpack')
 13 | const proxyMiddleware = require('http-proxy-middleware')
 14 | const webpackConfig = require('./webpack.dev.conf')
 15 | 
 16 | // default port where dev server listens for incoming traffic
 17 | const port = process.env.PORT || config.dev.port
 18 | // automatically open browser, if not set will be false
 19 | const autoOpenBrowser = !!config.dev.autoOpenBrowser
 20 | // Define HTTP proxies to your custom API backend
 21 | // https://github.com/chimurai/http-proxy-middleware
 22 | const proxyTable = config.dev.proxyTable
 23 | 
 24 | const app = express()
 25 | const compiler = webpack(webpackConfig)
 26 | 
 27 | const devMiddleware = require('webpack-dev-middleware')(compiler, {
 28 |   publicPath: webpackConfig.output.publicPath,
 29 |   quiet: true
 30 | })
 31 | 
 32 | const hotMiddleware = require('webpack-hot-middleware')(compiler, {
 33 |   log: false,
 34 |   heartbeat: 2000
 35 | })
 36 | // force page reload when html-webpack-plugin template changes
 37 | // currently disabled until this is resolved:
 38 | // https://github.com/jantimon/html-webpack-plugin/issues/680
 39 | // compiler.plugin('compilation', function (compilation) {
 40 | //   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
 41 | //     hotMiddleware.publish({ action: 'reload' })
 42 | //     cb()
 43 | //   })
 44 | // })
 45 | 
 46 | // enable hot-reload and state-preserving
 47 | // compilation error display
 48 | app.use(hotMiddleware)
 49 | 
 50 | // proxy api requests
 51 | Object.keys(proxyTable).forEach(function (context) {
 52 |   let options = proxyTable[context]
 53 |   if (typeof options === 'string') {
 54 |     options = { target: options }
 55 |   }
 56 |   app.use(proxyMiddleware(options.filter || context, options))
 57 | })
 58 | 
 59 | // handle fallback for HTML5 history API
 60 | app.use(require('connect-history-api-fallback')())
 61 | 
 62 | // serve webpack bundle output
 63 | app.use(devMiddleware)
 64 | 
 65 | // serve pure static assets
 66 | const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 67 | app.use(staticPath, express.static('./static'))
 68 | 
 69 | const uri = 'http://localhost:' + port
 70 | 
 71 | var _resolve
 72 | var _reject
 73 | var readyPromise = new Promise((resolve, reject) => {
 74 |   _resolve = resolve
 75 |   _reject = reject
 76 | })
 77 | 
 78 | var server
 79 | var portfinder = require('portfinder')
 80 | portfinder.basePort = port
 81 | 
 82 | console.log('> Starting dev server...')
 83 | devMiddleware.waitUntilValid(() => {
 84 |   portfinder.getPort((err, port) => {
 85 |     if (err) {
 86 |       _reject(err)
 87 |     }
 88 |     process.env.PORT = port
 89 |     var uri = 'http://localhost:' + port
 90 |     console.log('> Listening at ' + uri + '\n')
 91 |     // when env is testing, don't need open it
 92 |     if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
 93 |       opn(uri)
 94 |     }
 95 |     server = app.listen(port)
 96 |     _resolve()
 97 |   })
 98 | })
 99 | 
100 | module.exports = {
101 |   ready: readyPromise,
102 |   close: () => {
103 |     server.close()
104 |   }
105 | }
106 | 


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


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | 
 6 | module.exports = {
 7 |   loaders: utils.cssLoaders({
 8 |     sourceMap: isProduction
 9 |       ? config.build.productionSourceMap
10 |       : config.dev.cssSourceMap,
11 |     extract: isProduction
12 |   }),
13 |   transformToRequire: {
14 |     video: 'src',
15 |     source: 'src',
16 |     img: 'src',
17 |     image: 'xlink:href'
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | module.exports = {
12 |   entry: {
13 |     app: './src/main.js'
14 |   },
15 |   output: {
16 |     path: config.build.assetsRoot,
17 |     filename: '[name].js',
18 |     publicPath: process.env.NODE_ENV === 'production'
19 |       ? config.build.assetsPublicPath
20 |       : config.dev.assetsPublicPath
21 |   },
22 |   resolve: {
23 |     extensions: ['.js', '.vue', '.json'],
24 |     alias: {
25 |       'vue$': 'vue/dist/vue.esm.js',
26 |       '@': resolve('src'),
27 |     }
28 |   },
29 |   module: {
30 |     rules: [
31 |       // {
32 |       //   test: /\.(js|vue)$/,
33 |       //   loader: 'eslint-loader',
34 |       //   enforce: 'pre',
35 |       //   include: [resolve('src'), resolve('test')],
36 |       //   options: {
37 |       //     formatter: require('eslint-friendly-formatter')
38 |       //   }
39 |       // },
40 |       {
41 |         test: /\.vue$/,
42 |         loader: 'vue-loader',
43 |         options: vueLoaderConfig
44 |       },
45 |       {
46 |         test: /\.js$/,
47 |         loader: 'babel-loader',
48 |         include: [resolve('src'), resolve('test')]
49 |       },
50 |       {
51 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
52 |         loader: 'url-loader',
53 |         options: {
54 |           limit: 10000,
55 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
56 |         }
57 |       },
58 |       {
59 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
60 |         loader: 'url-loader',
61 |         options: {
62 |           limit: 10000,
63 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
64 |         }
65 |       },
66 |       {
67 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
68 |         loader: 'url-loader',
69 |         options: {
70 |           limit: 10000,
71 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
72 |         }
73 |       }
74 |     ]
75 |   }
76 | }
77 | 


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


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | 
 13 | const env = config.build.env
 14 | 
 15 | const webpackConfig = merge(baseWebpackConfig, {
 16 |   module: {
 17 |     rules: utils.styleLoaders({
 18 |       sourceMap: config.build.productionSourceMap,
 19 |       extract: true
 20 |     })
 21 |   },
 22 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 23 |   output: {
 24 |     path: config.build.assetsRoot,
 25 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 26 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 27 |   },
 28 |   plugins: [
 29 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 30 |     new webpack.DefinePlugin({
 31 |       'process.env': env
 32 |     }),
 33 |     // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
 34 |     new webpack.optimize.UglifyJsPlugin({
 35 |       compress: {
 36 |         warnings: false
 37 |       },
 38 |       sourceMap: true
 39 |     }),
 40 |     // extract css into its own file
 41 |     new ExtractTextPlugin({
 42 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 43 |     }),
 44 |     // Compress extracted CSS. We are using this plugin so that possible
 45 |     // duplicated CSS from different components can be deduped.
 46 |     new OptimizeCSSPlugin({
 47 |       cssProcessorOptions: {
 48 |         safe: true
 49 |       }
 50 |     }),
 51 |     // generate dist index.html with correct asset hash for caching.
 52 |     // you can customize output by editing /index.html
 53 |     // see https://github.com/ampedandwired/html-webpack-plugin
 54 |     new HtmlWebpackPlugin({
 55 |       filename: config.build.index,
 56 |       template: 'index.html',
 57 |       inject: true,
 58 |       minify: {
 59 |         removeComments: true,
 60 |         collapseWhitespace: true,
 61 |         removeAttributeQuotes: true
 62 |         // more options:
 63 |         // https://github.com/kangax/html-minifier#options-quick-reference
 64 |       },
 65 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 66 |       chunksSortMode: 'dependency'
 67 |     }),
 68 |     // keep module.id stable when vender modules does not change
 69 |     new webpack.HashedModuleIdsPlugin(),
 70 |     // split vendor js into its own file
 71 |     new webpack.optimize.CommonsChunkPlugin({
 72 |       name: 'vendor',
 73 |       minChunks: function (module) {
 74 |         // any required modules inside node_modules are extracted to vendor
 75 |         return (
 76 |           module.resource &&
 77 |           /\.js$/.test(module.resource) &&
 78 |           module.resource.indexOf(
 79 |             path.join(__dirname, '../node_modules')
 80 |           ) === 0
 81 |         )
 82 |       }
 83 |     }),
 84 |     // extract webpack runtime and module manifest to its own file in order to
 85 |     // prevent vendor hash from being updated whenever app bundle is updated
 86 |     new webpack.optimize.CommonsChunkPlugin({
 87 |       name: 'manifest',
 88 |       chunks: ['vendor']
 89 |     }),
 90 |     // copy custom static assets
 91 |     new CopyWebpackPlugin([
 92 |       {
 93 |         from: path.resolve(__dirname, '../static'),
 94 |         to: config.build.assetsSubDirectory,
 95 |         ignore: ['.*']
 96 |       }
 97 |     ])
 98 |   ]
 99 | })
100 | 
101 | if (config.build.productionGzip) {
102 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
103 | 
104 |   webpackConfig.plugins.push(
105 |     new CompressionWebpackPlugin({
106 |       asset: '[path].gz[query]',
107 |       algorithm: 'gzip',
108 |       test: new RegExp(
109 |         '\\.(' +
110 |         config.build.productionGzipExtensions.join('|') +
111 |         ')$'
112 |       ),
113 |       threshold: 10240,
114 |       minRatio: 0.8
115 |     })
116 |   )
117 | }
118 | 
119 | if (config.build.bundleAnalyzerReport) {
120 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
121 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
122 | }
123 | 
124 | module.exports = webpackConfig
125 | 


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


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 'use strict'
 3 | // Template version: 1.1.3
 4 | // see http://vuejs-templates.github.io/webpack for documentation.
 5 | 
 6 | const path = require('path')
 7 | 
 8 | module.exports = {
 9 |   build: {
10 |     env: require('./prod.env'),
11 |     index: path.resolve(__dirname, '../dist/index.html'),
12 |     assetsRoot: path.resolve(__dirname, '../dist'),
13 |     assetsSubDirectory: 'static',
14 |     assetsPublicPath: '/',
15 |     productionSourceMap: true,
16 |     // Gzip off by default as many popular static hosts such as
17 |     // Surge or Netlify already gzip all static assets for you.
18 |     // Before setting to `true`, make sure to:
19 |     // npm install --save-dev compression-webpack-plugin
20 |     productionGzip: false,
21 |     productionGzipExtensions: ['js', 'css'],
22 |     // Run the build command with an extra argument to
23 |     // View the bundle analyzer report after build finishes:
24 |     // `npm run build --report`
25 |     // Set to `true` or `false` to always turn it on or off
26 |     bundleAnalyzerReport: process.env.npm_config_report
27 |   },
28 |   dev: {
29 |     env: require('./dev.env'),
30 |     port: process.env.PORT || 8080,
31 |     autoOpenBrowser: true,
32 |     assetsSubDirectory: 'static',
33 |     assetsPublicPath: '/',
34 |     proxyTable: {
35 |           '/v4/api': {
36 |               target: 'http://m.maizuo.com',
37 |               host: 'm.maizuo.com',
38 |               changeOrigin:true,
39 |               // pathRewrite: {
40 |               //     '^/v4/api': '/v4/api'
41 |               //   }
42 |           }
43 | 
44 |                         
45 |     },
46 |     // CSS Sourcemaps off by default because relative paths are "buggy"
47 |     // with this option, according to the CSS-Loader README
48 |     // (https://github.com/webpack/css-loader#sourcemaps)
49 |     // In our experience, they generally work as expected,
50 |     // just be aware of this issue when enabling this option.
51 |     cssSourceMap: false
52 |   }
53 | }
54 | 


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


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vuewebpack</title>
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuewebpack",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js",
11 |     "lint": "eslint --ext .js,.vue src"
12 |   },
13 |   "dependencies": {
14 |     "vue": "^2.5.2",
15 |     "vue-router": "^3.0.1",
16 |     "vuex": "^3.0.1"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^7.1.2",
20 |     "axios": "^0.17.0",
21 |     "babel-core": "^6.22.1",
22 |     "babel-eslint": "^7.1.1",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-preset-env": "^1.3.2",
26 |     "babel-preset-stage-2": "^6.22.0",
27 |     "babel-register": "^6.22.0",
28 |     "chalk": "^2.0.1",
29 |     "connect-history-api-fallback": "^1.3.0",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "element-ui": "^2.0.3",
33 |     "eslint": "^3.19.0",
34 |     "eslint-config-standard": "^10.2.1",
35 |     "eslint-friendly-formatter": "^3.0.0",
36 |     "eslint-loader": "^1.7.1",
37 |     "eslint-plugin-html": "^3.0.0",
38 |     "eslint-plugin-import": "^2.7.0",
39 |     "eslint-plugin-node": "^5.2.0",
40 |     "eslint-plugin-promise": "^3.4.0",
41 |     "eslint-plugin-standard": "^3.0.1",
42 |     "eventsource-polyfill": "^0.9.6",
43 |     "express": "^4.14.1",
44 |     "extract-text-webpack-plugin": "^3.0.0",
45 |     "file-loader": "^1.1.4",
46 |     "friendly-errors-webpack-plugin": "^1.6.1",
47 |     "html-webpack-plugin": "^2.30.1",
48 |     "http-proxy-middleware": "^0.17.3",
49 |     "mint-ui": "^2.2.10",
50 |     "node-sass": "^4.6.0",
51 |     "opn": "^5.1.0",
52 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
53 |     "ora": "^1.2.0",
54 |     "portfinder": "^1.0.13",
55 |     "rimraf": "^2.6.0",
56 |     "sass-loader": "^6.0.6",
57 |     "semver": "^5.3.0",
58 |     "shelljs": "^0.7.6",
59 |     "url-loader": "^0.5.8",
60 |     "vue-loader": "^13.3.0",
61 |     "vue-style-loader": "^3.0.1",
62 |     "vue-swipe": "^2.0.3",
63 |     "vue-template-compiler": "^2.5.2",
64 |     "webpack": "^3.6.0",
65 |     "webpack-bundle-analyzer": "^2.9.0",
66 |     "webpack-dev-middleware": "^1.12.0",
67 |     "webpack-hot-middleware": "^2.18.2",
68 |     "webpack-merge": "^4.1.0"
69 |   },
70 |   "engines": {
71 |     "node": ">= 4.0.0",
72 |     "npm": ">= 3.0.0"
73 |   },
74 |   "browserslist": [
75 |     "> 1%",
76 |     "last 2 versions",
77 |     "not ie <= 8"
78 |   ]
79 | }
80 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" >
 3 |       <navbar>
 4 |         <i class="iconfont icon-category" @click="isShow= !isShow"></i>
 5 |       </navbar>
 6 |       <sidebar v-model="isShow"></sidebar>
 7 | 
 8 |      <!--  <a href="#/film">film</a>
 9 |             <a href="#/card">card</a>
10 |  -->
11 |       <section>
12 |         <router-view></router-view>
13 |       </section>
14 |       <!-- 路由容器 -->
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import navbar from "@/components/common/navbar";
20 | import sidebar from "@/components/common/sidebar";
21 | 
22 | export default {
23 |   data(){
24 |     return { 
25 |       datalist:[],
26 |       isShow:false
27 |     }
28 |   },
29 |   mounted(){
30 | 
31 |   },
32 | 
33 |   components:{
34 |     navbar,
35 |     sidebar
36 |   },
37 | 
38 |   methods:{
39 |     handleClick(value){
40 |       this.isShow = value
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style lang="scss">
47 | *{
48 |   margin:0px;
49 |   padding:0px;
50 | }
51 | 
52 | html,body{
53 |   width:100%;
54 |   height: 100%;
55 | } 
56 | 
57 | section{
58 |   position: relative;
59 |   margin-top: 50px;
60 | }
61 | 
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo.css:
--------------------------------------------------------------------------------
  1 | *{margin: 0;padding: 0;list-style: none;}
  2 | /*
  3 | KISSY CSS Reset
  4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
  5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
  6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
  7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
  8 | 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
  9 |  */
 10 | 
 11 | /** 清除内外边距 **/
 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 14 | pre, /* text formatting elements 文本格式元素 */
 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
 16 | th, td /* table elements 表格元素 */ {
 17 |   margin: 0;
 18 |   padding: 0;
 19 | }
 20 | 
 21 | /** 设置默认字体 **/
 22 | body,
 23 | button, input, select, textarea /* for ie */ {
 24 |   font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
 25 | }
 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 30 | 
 31 | /** 重置列表元素 **/
 32 | ul, ol { list-style: none; }
 33 | 
 34 | /** 重置文本格式元素 **/
 35 | a { text-decoration: none; }
 36 | a:hover { text-decoration: underline; }
 37 | 
 38 | 
 39 | /** 重置表单元素 **/
 40 | legend { color: #000; } /* for ie6 */
 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
 43 | /* 注：optgroup 无法扶正 */
 44 | 
 45 | /** 重置表格元素 **/
 46 | table { border-collapse: collapse; border-spacing: 0; }
 47 | 
 48 | /* 清除浮动 */
 49 | .ks-clear:after, .clear:after {
 50 |   content: '\20';
 51 |   display: block;
 52 |   height: 0;
 53 |   clear: both;
 54 | }
 55 | .ks-clear, .clear {
 56 |   *zoom: 1;
 57 | }
 58 | 
 59 | .main {
 60 |   padding: 30px 100px;
 61 | width: 960px;
 62 | margin: 0 auto;
 63 | }
 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
 65 | 
 66 | .helps{margin-top:40px;}
 67 | .helps pre{
 68 |   padding:20px;
 69 |   margin:10px 0;
 70 |   border:solid 1px #e7e1cd;
 71 |   background-color: #fffdef;
 72 |   overflow: auto;
 73 | }
 74 | 
 75 | .icon_lists{
 76 |   width: 100% !important;
 77 | 
 78 | }
 79 | 
 80 | .icon_lists li{
 81 |   float:left;
 82 |   width: 100px;
 83 |   height:180px;
 84 |   text-align: center;
 85 |   list-style: none !important;
 86 | }
 87 | .icon_lists .icon{
 88 |   font-size: 42px;
 89 |   line-height: 100px;
 90 |   margin: 10px 0;
 91 |   color:#333;
 92 |   -webkit-transition: font-size 0.25s ease-out 0s;
 93 |   -moz-transition: font-size 0.25s ease-out 0s;
 94 |   transition: font-size 0.25s ease-out 0s;
 95 | 
 96 | }
 97 | .icon_lists .icon:hover{
 98 |   font-size: 100px;
 99 | }
100 | 
101 | 
102 | 
103 | .markdown {
104 |   color: #666;
105 |   font-size: 14px;
106 |   line-height: 1.8;
107 | }
108 | 
109 | .highlight {
110 |   line-height: 1.5;
111 | }
112 | 
113 | .markdown img {
114 |   vertical-align: middle;
115 |   max-width: 100%;
116 | }
117 | 
118 | .markdown h1 {
119 |   color: #404040;
120 |   font-weight: 500;
121 |   line-height: 40px;
122 |   margin-bottom: 24px;
123 | }
124 | 
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 |   color: #404040;
131 |   margin: 1.6em 0 0.6em 0;
132 |   font-weight: 500;
133 |   clear: both;
134 | }
135 | 
136 | .markdown h1 {
137 |   font-size: 28px;
138 | }
139 | 
140 | .markdown h2 {
141 |   font-size: 22px;
142 | }
143 | 
144 | .markdown h3 {
145 |   font-size: 16px;
146 | }
147 | 
148 | .markdown h4 {
149 |   font-size: 14px;
150 | }
151 | 
152 | .markdown h5 {
153 |   font-size: 12px;
154 | }
155 | 
156 | .markdown h6 {
157 |   font-size: 12px;
158 | }
159 | 
160 | .markdown hr {
161 |   height: 1px;
162 |   border: 0;
163 |   background: #e9e9e9;
164 |   margin: 16px 0;
165 |   clear: both;
166 | }
167 | 
168 | .markdown p,
169 | .markdown pre {
170 |   margin: 1em 0;
171 | }
172 | 
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 |   width: 80%;
179 | }
180 | 
181 | .markdown ul > li {
182 |   list-style: circle;
183 | }
184 | 
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 |   margin-left: 20px;
188 |   padding-left: 4px;
189 | }
190 | 
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 |   margin: 0.6em 0;
194 | }
195 | 
196 | .markdown ol > li {
197 |   list-style: decimal;
198 | }
199 | 
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 |   margin-left: 20px;
203 |   padding-left: 4px;
204 | }
205 | 
206 | .markdown code {
207 |   margin: 0 3px;
208 |   padding: 0 5px;
209 |   background: #eee;
210 |   border-radius: 3px;
211 | }
212 | 
213 | .markdown pre {
214 |   border-radius: 6px;
215 |   background: #f7f7f7;
216 |   padding: 20px;
217 | }
218 | 
219 | .markdown pre code {
220 |   border: none;
221 |   background: #f7f7f7;
222 |   margin: 0;
223 | }
224 | 
225 | .markdown strong,
226 | .markdown b {
227 |   font-weight: 600;
228 | }
229 | 
230 | .markdown > table {
231 |   border-collapse: collapse;
232 |   border-spacing: 0px;
233 |   empty-cells: show;
234 |   border: 1px solid #e9e9e9;
235 |   width: 95%;
236 |   margin-bottom: 24px;
237 | }
238 | 
239 | .markdown > table th {
240 |   white-space: nowrap;
241 |   color: #333;
242 |   font-weight: 600;
243 | 
244 | }
245 | 
246 | .markdown > table th,
247 | .markdown > table td {
248 |   border: 1px solid #e9e9e9;
249 |   padding: 8px 16px;
250 |   text-align: left;
251 | }
252 | 
253 | .markdown > table th {
254 |   background: #F7F7F7;
255 | }
256 | 
257 | .markdown blockquote {
258 |   font-size: 90%;
259 |   color: #999;
260 |   border-left: 4px solid #e9e9e9;
261 |   padding-left: 0.8em;
262 |   margin: 1em 0;
263 |   font-style: italic;
264 | }
265 | 
266 | .markdown blockquote p {
267 |   margin: 0;
268 | }
269 | 
270 | .markdown .anchor {
271 |   opacity: 0;
272 |   transition: opacity 0.3s ease;
273 |   margin-left: 8px;
274 | }
275 | 
276 | .markdown .waiting {
277 |   color: #ccc;
278 | }
279 | 
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 |   opacity: 1;
287 |   display: inline-block;
288 | }
289 | 
290 | .markdown > br,
291 | .markdown > p > br {
292 |   clear: both;
293 | }
294 | 
295 | 
296 | .hljs {
297 |   display: block;
298 |   background: white;
299 |   padding: 0.5em;
300 |   color: #333333;
301 |   overflow-x: auto;
302 | }
303 | 
304 | .hljs-comment,
305 | .hljs-meta {
306 |   color: #969896;
307 | }
308 | 
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 |   color: #df5000;
316 | }
317 | 
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 |   color: #a71d5d;
322 | }
323 | 
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 |   color: #0086b3;
329 | }
330 | 
331 | .hljs-section,
332 | .hljs-name {
333 |   color: #63a35c;
334 | }
335 | 
336 | .hljs-tag {
337 |   color: #333333;
338 | }
339 | 
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 |   color: #795da3;
347 | }
348 | 
349 | .hljs-addition {
350 |   color: #55a532;
351 |   background-color: #eaffea;
352 | }
353 | 
354 | .hljs-deletion {
355 |   color: #bd2c00;
356 |   background-color: #ffecec;
357 | }
358 | 
359 | .hljs-link {
360 |   text-decoration: underline;
361 | }
362 | 
363 | pre{
364 |   background: #fff;
365 | }
366 | 
367 | 
368 | 
369 | 
370 | 
371 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo_fontclass.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <link rel="stylesheet" href="iconfont.css">
  9 | </head>
 10 | <body>
 11 |     <div class="main markdown">
 12 |         <h1>IconFont 图标</h1>
 13 |         <ul class="icon_lists clear">
 14 |             
 15 |                 <li>
 16 |                 <i class="icon iconfont icon-all"></i>
 17 |                     <div class="name">all</div>
 18 |                     <div class="fontclass">.icon-all</div>
 19 |                 </li>
 20 |             
 21 |                 <li>
 22 |                 <i class="icon iconfont icon-back"></i>
 23 |                     <div class="name">back</div>
 24 |                     <div class="fontclass">.icon-back</div>
 25 |                 </li>
 26 |             
 27 |                 <li>
 28 |                 <i class="icon iconfont icon-cart"></i>
 29 |                     <div class="name">cart</div>
 30 |                     <div class="fontclass">.icon-cart</div>
 31 |                 </li>
 32 |             
 33 |                 <li>
 34 |                 <i class="icon iconfont icon-category"></i>
 35 |                     <div class="name">Category</div>
 36 |                     <div class="fontclass">.icon-category</div>
 37 |                 </li>
 38 |             
 39 |                 <li>
 40 |                 <i class="icon iconfont icon-close"></i>
 41 |                     <div class="name">close</div>
 42 |                     <div class="fontclass">.icon-close</div>
 43 |                 </li>
 44 |             
 45 |                 <li>
 46 |                 <i class="icon iconfont icon-comments"></i>
 47 |                     <div class="name">comments</div>
 48 |                     <div class="fontclass">.icon-comments</div>
 49 |                 </li>
 50 |             
 51 |                 <li>
 52 |                 <i class="icon iconfont icon-cry"></i>
 53 |                     <div class="name">cry</div>
 54 |                     <div class="fontclass">.icon-cry</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont icon-delete"></i>
 59 |                     <div class="name">delete</div>
 60 |                     <div class="fontclass">.icon-delete</div>
 61 |                 </li>
 62 |             
 63 |                 <li>
 64 |                 <i class="icon iconfont icon-edit"></i>
 65 |                     <div class="name">edit</div>
 66 |                     <div class="fontclass">.icon-edit</div>
 67 |                 </li>
 68 |             
 69 |                 <li>
 70 |                 <i class="icon iconfont icon-email"></i>
 71 |                     <div class="name">email</div>
 72 |                     <div class="fontclass">.icon-email</div>
 73 |                 </li>
 74 |             
 75 |                 <li>
 76 |                 <i class="icon iconfont icon-favorite"></i>
 77 |                     <div class="name">favorite</div>
 78 |                     <div class="fontclass">.icon-favorite</div>
 79 |                 </li>
 80 |             
 81 |                 <li>
 82 |                 <i class="icon iconfont icon-folder"></i>
 83 |                     <div class="name">folder</div>
 84 |                     <div class="fontclass">.icon-folder</div>
 85 |                 </li>
 86 |             
 87 |                 <li>
 88 |                 <i class="icon iconfont icon-form"></i>
 89 |                     <div class="name">form</div>
 90 |                     <div class="fontclass">.icon-form</div>
 91 |                 </li>
 92 |             
 93 |                 <li>
 94 |                 <i class="icon iconfont icon-help"></i>
 95 |                     <div class="name">help</div>
 96 |                     <div class="fontclass">.icon-help</div>
 97 |                 </li>
 98 |             
 99 |                 <li>
100 |                 <i class="icon iconfont icon-information"></i>
101 |                     <div class="name">information</div>
102 |                     <div class="fontclass">.icon-information</div>
103 |                 </li>
104 |             
105 |                 <li>
106 |                 <i class="icon iconfont icon-less"></i>
107 |                     <div class="name">less</div>
108 |                     <div class="fontclass">.icon-less</div>
109 |                 </li>
110 |             
111 |                 <li>
112 |                 <i class="icon iconfont icon-moreunfold"></i>
113 |                     <div class="name">more_unfold</div>
114 |                     <div class="fontclass">.icon-moreunfold</div>
115 |                 </li>
116 |             
117 |                 <li>
118 |                 <i class="icon iconfont icon-more"></i>
119 |                     <div class="name">more</div>
120 |                     <div class="fontclass">.icon-more</div>
121 |                 </li>
122 |             
123 |                 <li>
124 |                 <i class="icon iconfont icon-pic"></i>
125 |                     <div class="name">pic</div>
126 |                     <div class="fontclass">.icon-pic</div>
127 |                 </li>
128 |             
129 |                 <li>
130 |                 <i class="icon iconfont icon-qrcode"></i>
131 |                     <div class="name">QRCode</div>
132 |                     <div class="fontclass">.icon-qrcode</div>
133 |                 </li>
134 |             
135 |                 <li>
136 |                 <i class="icon iconfont icon-refresh"></i>
137 |                     <div class="name">refresh</div>
138 |                     <div class="fontclass">.icon-refresh</div>
139 |                 </li>
140 |             
141 |                 <li>
142 |                 <i class="icon iconfont icon-rfq"></i>
143 |                     <div class="name">RFQ</div>
144 |                     <div class="fontclass">.icon-rfq</div>
145 |                 </li>
146 |             
147 |                 <li>
148 |                 <i class="icon iconfont icon-search"></i>
149 |                     <div class="name">search</div>
150 |                     <div class="fontclass">.icon-search</div>
151 |                 </li>
152 |             
153 |                 <li>
154 |                 <i class="icon iconfont icon-selected"></i>
155 |                     <div class="name">selected</div>
156 |                     <div class="fontclass">.icon-selected</div>
157 |                 </li>
158 |             
159 |                 <li>
160 |                 <i class="icon iconfont icon-set"></i>
161 |                     <div class="name">set</div>
162 |                     <div class="fontclass">.icon-set</div>
163 |                 </li>
164 |             
165 |                 <li>
166 |                 <i class="icon iconfont icon-smile"></i>
167 |                     <div class="name">Smile</div>
168 |                     <div class="fontclass">.icon-smile</div>
169 |                 </li>
170 |             
171 |                 <li>
172 |                 <i class="icon iconfont icon-success"></i>
173 |                     <div class="name">success</div>
174 |                     <div class="fontclass">.icon-success</div>
175 |                 </li>
176 |             
177 |                 <li>
178 |                 <i class="icon iconfont icon-survey"></i>
179 |                     <div class="name">survey</div>
180 |                     <div class="fontclass">.icon-survey</div>
181 |                 </li>
182 |             
183 |                 <li>
184 |                 <i class="icon iconfont icon-training"></i>
185 |                     <div class="name">training</div>
186 |                     <div class="fontclass">.icon-training</div>
187 |                 </li>
188 |             
189 |                 <li>
190 |                 <i class="icon iconfont icon-viewgallery"></i>
191 |                     <div class="name">ViewGallery</div>
192 |                     <div class="fontclass">.icon-viewgallery</div>
193 |                 </li>
194 |             
195 |                 <li>
196 |                 <i class="icon iconfont icon-viewlist"></i>
197 |                     <div class="name">Viewlist</div>
198 |                     <div class="fontclass">.icon-viewlist</div>
199 |                 </li>
200 |             
201 |                 <li>
202 |                 <i class="icon iconfont icon-warning"></i>
203 |                     <div class="name">warning</div>
204 |                     <div class="fontclass">.icon-warning</div>
205 |                 </li>
206 |             
207 |                 <li>
208 |                 <i class="icon iconfont icon-wrong"></i>
209 |                     <div class="name">wrong</div>
210 |                     <div class="fontclass">.icon-wrong</div>
211 |                 </li>
212 |             
213 |                 <li>
214 |                 <i class="icon iconfont icon-account"></i>
215 |                     <div class="name">account</div>
216 |                     <div class="fontclass">.icon-account</div>
217 |                 </li>
218 |             
219 |                 <li>
220 |                 <i class="icon iconfont icon-add"></i>
221 |                     <div class="name">add</div>
222 |                     <div class="fontclass">.icon-add</div>
223 |                 </li>
224 |             
225 |                 <li>
226 |                 <i class="icon iconfont icon-atm"></i>
227 |                     <div class="name">atm</div>
228 |                     <div class="fontclass">.icon-atm</div>
229 |                 </li>
230 |             
231 |                 <li>
232 |                 <i class="icon iconfont icon-clock"></i>
233 |                     <div class="name">clock</div>
234 |                     <div class="fontclass">.icon-clock</div>
235 |                 </li>
236 |             
237 |                 <li>
238 |                 <i class="icon iconfont icon-remind"></i>
239 |                     <div class="name">remind</div>
240 |                     <div class="fontclass">.icon-remind</div>
241 |                 </li>
242 |             
243 |                 <li>
244 |                 <i class="icon iconfont icon-calendar"></i>
245 |                     <div class="name">calendar</div>
246 |                     <div class="fontclass">.icon-calendar</div>
247 |                 </li>
248 |             
249 |                 <li>
250 |                 <i class="icon iconfont icon-attachment"></i>
251 |                     <div class="name">attachment</div>
252 |                     <div class="fontclass">.icon-attachment</div>
253 |                 </li>
254 |             
255 |                 <li>
256 |                 <i class="icon iconfont icon-3column"></i>
257 |                     <div class="name">3column</div>
258 |                     <div class="fontclass">.icon-3column</div>
259 |                 </li>
260 |             
261 |                 <li>
262 |                 <i class="icon iconfont icon-4column"></i>
263 |                     <div class="name">4column</div>
264 |                     <div class="fontclass">.icon-4column</div>
265 |                 </li>
266 |             
267 |                 <li>
268 |                 <i class="icon iconfont icon-discount"></i>
269 |                     <div class="name">discount</div>
270 |                     <div class="fontclass">.icon-discount</div>
271 |                 </li>
272 |             
273 |                 <li>
274 |                 <i class="icon iconfont icon-service"></i>
275 |                     <div class="name">service</div>
276 |                     <div class="fontclass">.icon-service</div>
277 |                 </li>
278 |             
279 |                 <li>
280 |                 <i class="icon iconfont icon-print"></i>
281 |                     <div class="name">print</div>
282 |                     <div class="fontclass">.icon-print</div>
283 |                 </li>
284 |             
285 |                 <li>
286 |                 <i class="icon iconfont icon-box"></i>
287 |                     <div class="name">box</div>
288 |                     <div class="fontclass">.icon-box</div>
289 |                 </li>
290 |             
291 |                 <li>
292 |                 <i class="icon iconfont icon-process"></i>
293 |                     <div class="name">process</div>
294 |                     <div class="fontclass">.icon-process</div>
295 |                 </li>
296 |             
297 |                 <li>
298 |                 <i class="icon iconfont icon-bags"></i>
299 |                     <div class="name">bags</div>
300 |                     <div class="fontclass">.icon-bags</div>
301 |                 </li>
302 |             
303 |                 <li>
304 |                 <i class="icon iconfont icon-beauty"></i>
305 |                     <div class="name">beauty</div>
306 |                     <div class="fontclass">.icon-beauty</div>
307 |                 </li>
308 |             
309 |                 <li>
310 |                 <i class="icon iconfont icon-electrical"></i>
311 |                     <div class="name">electrical</div>
312 |                     <div class="fontclass">.icon-electrical</div>
313 |                 </li>
314 |             
315 |                 <li>
316 |                 <i class="icon iconfont icon-electronics"></i>
317 |                     <div class="name">electronics</div>
318 |                     <div class="fontclass">.icon-electronics</div>
319 |                 </li>
320 |             
321 |                 <li>
322 |                 <i class="icon iconfont icon-gifts"></i>
323 |                     <div class="name">gifts</div>
324 |                     <div class="fontclass">.icon-gifts</div>
325 |                 </li>
326 |             
327 |                 <li>
328 |                 <i class="icon iconfont icon-apparel"></i>
329 |                     <div class="name">apparel</div>
330 |                     <div class="fontclass">.icon-apparel</div>
331 |                 </li>
332 |             
333 |                 <li>
334 |                 <i class="icon iconfont icon-atmaway"></i>
335 |                     <div class="name">atm-away</div>
336 |                     <div class="fontclass">.icon-atmaway</div>
337 |                 </li>
338 |             
339 |                 <li>
340 |                 <i class="icon iconfont icon-rfq1"></i>
341 |                     <div class="name">rfq</div>
342 |                     <div class="fontclass">.icon-rfq1</div>
343 |                 </li>
344 |             
345 |                 <li>
346 |                 <i class="icon iconfont icon-scanning"></i>
347 |                     <div class="name">scanning</div>
348 |                     <div class="fontclass">.icon-scanning</div>
349 |                 </li>
350 |             
351 |                 <li>
352 |                 <i class="icon iconfont icon-filter"></i>
353 |                     <div class="name">filter</div>
354 |                     <div class="fontclass">.icon-filter</div>
355 |                 </li>
356 |             
357 |                 <li>
358 |                 <i class="icon iconfont icon-pin"></i>
359 |                     <div class="name">pin</div>
360 |                     <div class="fontclass">.icon-pin</div>
361 |                 </li>
362 |             
363 |                 <li>
364 |                 <i class="icon iconfont icon-history"></i>
365 |                     <div class="name">history</div>
366 |                     <div class="fontclass">.icon-history</div>
367 |                 </li>
368 |             
369 |                 <li>
370 |                 <i class="icon iconfont icon-productfeatures"></i>
371 |                     <div class="name">product-features</div>
372 |                     <div class="fontclass">.icon-productfeatures</div>
373 |                 </li>
374 |             
375 |                 <li>
376 |                 <i class="icon iconfont icon-supplierfeatures"></i>
377 |                     <div class="name">supplier-features</div>
378 |                     <div class="fontclass">.icon-supplierfeatures</div>
379 |                 </li>
380 |             
381 |                 <li>
382 |                 <i class="icon iconfont icon-similarproduct"></i>
383 |                     <div class="name">similar-product</div>
384 |                     <div class="fontclass">.icon-similarproduct</div>
385 |                 </li>
386 |             
387 |                 <li>
388 |                 <i class="icon iconfont icon-link"></i>
389 |                     <div class="name">link</div>
390 |                     <div class="fontclass">.icon-link</div>
391 |                 </li>
392 |             
393 |                 <li>
394 |                 <i class="icon iconfont icon-cut"></i>
395 |                     <div class="name">cut</div>
396 |                     <div class="fontclass">.icon-cut</div>
397 |                 </li>
398 |             
399 |                 <li>
400 |                 <i class="icon iconfont icon-navlist"></i>
401 |                     <div class="name">nav-list</div>
402 |                     <div class="fontclass">.icon-navlist</div>
403 |                 </li>
404 |             
405 |                 <li>
406 |                 <i class="icon iconfont icon-imagetext"></i>
407 |                     <div class="name">image-text</div>
408 |                     <div class="fontclass">.icon-imagetext</div>
409 |                 </li>
410 |             
411 |                 <li>
412 |                 <i class="icon iconfont icon-text"></i>
413 |                     <div class="name">text</div>
414 |                     <div class="fontclass">.icon-text</div>
415 |                 </li>
416 |             
417 |                 <li>
418 |                 <i class="icon iconfont icon-move"></i>
419 |                     <div class="name">move</div>
420 |                     <div class="fontclass">.icon-move</div>
421 |                 </li>
422 |             
423 |                 <li>
424 |                 <i class="icon iconfont icon-subtract"></i>
425 |                     <div class="name">subtract</div>
426 |                     <div class="fontclass">.icon-subtract</div>
427 |                 </li>
428 |             
429 |                 <li>
430 |                 <i class="icon iconfont icon-dollar"></i>
431 |                     <div class="name">dollar</div>
432 |                     <div class="fontclass">.icon-dollar</div>
433 |                 </li>
434 |             
435 |                 <li>
436 |                 <i class="icon iconfont icon-raw"></i>
437 |                     <div class="name">raw</div>
438 |                     <div class="fontclass">.icon-raw</div>
439 |                 </li>
440 |             
441 |                 <li>
442 |                 <i class="icon iconfont icon-office"></i>
443 |                     <div class="name">office</div>
444 |                     <div class="fontclass">.icon-office</div>
445 |                 </li>
446 |             
447 |                 <li>
448 |                 <i class="icon iconfont icon-agriculture"></i>
449 |                     <div class="name">agriculture</div>
450 |                     <div class="fontclass">.icon-agriculture</div>
451 |                 </li>
452 |             
453 |                 <li>
454 |                 <i class="icon iconfont icon-machinery"></i>
455 |                     <div class="name">machinery</div>
456 |                     <div class="fontclass">.icon-machinery</div>
457 |                 </li>
458 |             
459 |                 <li>
460 |                 <i class="icon iconfont icon-assessedbadge"></i>
461 |                     <div class="name">assessed-Badge</div>
462 |                     <div class="fontclass">.icon-assessedbadge</div>
463 |                 </li>
464 |             
465 |                 <li>
466 |                 <i class="icon iconfont icon-gerenzhongxin"></i>
467 |                     <div class="name">personal-center</div>
468 |                     <div class="fontclass">.icon-gerenzhongxin</div>
469 |                 </li>
470 |             
471 |                 <li>
472 |                 <i class="icon iconfont icon-jifen"></i>
473 |                     <div class="name">integral</div>
474 |                     <div class="fontclass">.icon-jifen</div>
475 |                 </li>
476 |             
477 |                 <li>
478 |                 <i class="icon iconfont icon-operation"></i>
479 |                     <div class="name">operation</div>
480 |                     <div class="fontclass">.icon-operation</div>
481 |                 </li>
482 |             
483 |                 <li>
484 |                 <i class="icon iconfont icon-remind1"></i>
485 |                     <div class="name">remind</div>
486 |                     <div class="fontclass">.icon-remind1</div>
487 |                 </li>
488 |             
489 |                 <li>
490 |                 <i class="icon iconfont icon-icondownload"></i>
491 |                     <div class="name">download</div>
492 |                     <div class="fontclass">.icon-icondownload</div>
493 |                 </li>
494 |             
495 |                 <li>
496 |                 <i class="icon iconfont icon-map"></i>
497 |                     <div class="name">map</div>
498 |                     <div class="fontclass">.icon-map</div>
499 |                 </li>
500 |             
501 |                 <li>
502 |                 <i class="icon iconfont icon-good"></i>
503 |                     <div class="name">good</div>
504 |                     <div class="fontclass">.icon-good</div>
505 |                 </li>
506 |             
507 |                 <li>
508 |                 <i class="icon iconfont icon-skip"></i>
509 |                     <div class="name">skip</div>
510 |                     <div class="fontclass">.icon-skip</div>
511 |                 </li>
512 |             
513 |                 <li>
514 |                 <i class="icon iconfont icon-iconfontplay2"></i>
515 |                     <div class="name">play</div>
516 |                     <div class="fontclass">.icon-iconfontplay2</div>
517 |                 </li>
518 |             
519 |                 <li>
520 |                 <i class="icon iconfont icon-iconfontstop"></i>
521 |                     <div class="name">stop</div>
522 |                     <div class="fontclass">.icon-iconfontstop</div>
523 |                 </li>
524 |             
525 |                 <li>
526 |                 <i class="icon iconfont icon-compass"></i>
527 |                     <div class="name">compass</div>
528 |                     <div class="fontclass">.icon-compass</div>
529 |                 </li>
530 |             
531 |                 <li>
532 |                 <i class="icon iconfont icon-security"></i>
533 |                     <div class="name">security</div>
534 |                     <div class="fontclass">.icon-security</div>
535 |                 </li>
536 |             
537 |                 <li>
538 |                 <i class="icon iconfont icon-share"></i>
539 |                     <div class="name">share</div>
540 |                     <div class="fontclass">.icon-share</div>
541 |                 </li>
542 |             
543 |                 <li>
544 |                 <i class="icon iconfont icon-store"></i>
545 |                     <div class="name">store</div>
546 |                     <div class="fontclass">.icon-store</div>
547 |                 </li>
548 |             
549 |                 <li>
550 |                 <i class="icon iconfont icon-rejectedorder"></i>
551 |                     <div class="name">rejected-order</div>
552 |                     <div class="fontclass">.icon-rejectedorder</div>
553 |                 </li>
554 |             
555 |                 <li>
556 |                 <i class="icon iconfont icon-phone"></i>
557 |                     <div class="name">phone</div>
558 |                     <div class="fontclass">.icon-phone</div>
559 |                 </li>
560 |             
561 |                 <li>
562 |                 <i class="icon iconfont icon-bussinessman"></i>
563 |                     <div class="name">bussiness-man</div>
564 |                     <div class="fontclass">.icon-bussinessman</div>
565 |                 </li>
566 |             
567 |                 <li>
568 |                 <i class="icon iconfont icon-mobilephone"></i>
569 |                     <div class="name">Mobile-phone</div>
570 |                     <div class="fontclass">.icon-mobilephone</div>
571 |                 </li>
572 |             
573 |                 <li>
574 |                 <i class="icon iconfont icon-emailfilling"></i>
575 |                     <div class="name">email-filling</div>
576 |                     <div class="fontclass">.icon-emailfilling</div>
577 |                 </li>
578 |             
579 |                 <li>
580 |                 <i class="icon iconfont icon-favoritesfilling"></i>
581 |                     <div class="name">favorites-filling</div>
582 |                     <div class="fontclass">.icon-favoritesfilling</div>
583 |                 </li>
584 |             
585 |                 <li>
586 |                 <i class="icon iconfont icon-accountfilling"></i>
587 |                     <div class="name">account-filling</div>
588 |                     <div class="fontclass">.icon-accountfilling</div>
589 |                 </li>
590 |             
591 |                 <li>
592 |                 <i class="icon iconfont icon-creditlevelfilling"></i>
593 |                     <div class="name">credit-level-filling</div>
594 |                     <div class="fontclass">.icon-creditlevelfilling</div>
595 |                 </li>
596 |             
597 |                 <li>
598 |                 <i class="icon iconfont icon-exl"></i>
599 |                     <div class="name">exl</div>
600 |                     <div class="fontclass">.icon-exl</div>
601 |                 </li>
602 |             
603 |                 <li>
604 |                 <i class="icon iconfont icon-pdf"></i>
605 |                     <div class="name">pdf</div>
606 |                     <div class="fontclass">.icon-pdf</div>
607 |                 </li>
608 |             
609 |                 <li>
610 |                 <i class="icon iconfont icon-zip"></i>
611 |                     <div class="name">zip</div>
612 |                     <div class="fontclass">.icon-zip</div>
613 |                 </li>
614 |             
615 |                 <li>
616 |                 <i class="icon iconfont icon-sorting"></i>
617 |                     <div class="name">sorting</div>
618 |                     <div class="fontclass">.icon-sorting</div>
619 |                 </li>
620 |             
621 |                 <li>
622 |                 <i class="icon iconfont icon-copy"></i>
623 |                     <div class="name">copy</div>
624 |                     <div class="fontclass">.icon-copy</div>
625 |                 </li>
626 |             
627 |                 <li>
628 |                 <i class="icon iconfont icon-hot"></i>
629 |                     <div class="name">hot</div>
630 |                     <div class="fontclass">.icon-hot</div>
631 |                 </li>
632 |             
633 |                 <li>
634 |                 <i class="icon iconfont icon-trade"></i>
635 |                     <div class="name">trade</div>
636 |                     <div class="fontclass">.icon-trade</div>
637 |                 </li>
638 |             
639 |                 <li>
640 |                 <i class="icon iconfont icon-component"></i>
641 |                     <div class="name">component</div>
642 |                     <div class="fontclass">.icon-component</div>
643 |                 </li>
644 |             
645 |                 <li>
646 |                 <i class="icon iconfont icon-color"></i>
647 |                     <div class="name">color</div>
648 |                     <div class="fontclass">.icon-color</div>
649 |                 </li>
650 |             
651 |                 <li>
652 |                 <i class="icon iconfont icon-color-filling"></i>
653 |                     <div class="name">color-filling</div>
654 |                     <div class="fontclass">.icon-color-filling</div>
655 |                 </li>
656 |             
657 |                 <li>
658 |                 <i class="icon iconfont icon-favorites"></i>
659 |                     <div class="name">favorites</div>
660 |                     <div class="fontclass">.icon-favorites</div>
661 |                 </li>
662 |             
663 |                 <li>
664 |                 <i class="icon iconfont icon-RFQ"></i>
665 |                     <div class="name">RFQ</div>
666 |                     <div class="fontclass">.icon-RFQ</div>
667 |                 </li>
668 |             
669 |                 <li>
670 |                 <i class="icon iconfont icon-originalimage"></i>
671 |                     <div class="name">original-image</div>
672 |                     <div class="fontclass">.icon-originalimage</div>
673 |                 </li>
674 |             
675 |                 <li>
676 |                 <i class="icon iconfont icon-logistic"></i>
677 |                     <div class="name">logistic</div>
678 |                     <div class="fontclass">.icon-logistic</div>
679 |                 </li>
680 |             
681 |                 <li>
682 |                 <i class="icon iconfont icon-video"></i>
683 |                     <div class="name">video</div>
684 |                     <div class="fontclass">.icon-video</div>
685 |                 </li>
686 |             
687 |         </ul>
688 | 
689 |         <h2 id="font-class-">font-class引用</h2>
690 |         <hr>
691 | 
692 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
693 |         <p>与unicode使用方式相比，具有如下特点：</p>
694 |         <ul>
695 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
696 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
697 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
698 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
699 |         </ul>
700 |         <p>使用步骤如下：</p>
701 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
702 | 
703 | 
704 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
705 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
706 |         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
707 |         <blockquote>
708 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
709 |         </blockquote>
710 |     </div>
711 | </body>
712 | </html>
713 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo_symbol.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 |     <script src="iconfont.js"></script>
  9 | 
 10 |     <style type="text/css">
 11 |         .icon {
 12 |           /* 通过设置 font-size 来改变图标大小 */
 13 |           width: 1em; height: 1em;
 14 |           /* 图标和文字相邻时，垂直对齐 */
 15 |           vertical-align: -0.15em;
 16 |           /* 通过设置 color 来改变 SVG 的颜色/fill */
 17 |           fill: currentColor;
 18 |           /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
 19 |              normalize.css 中也包含这行 */
 20 |           overflow: hidden;
 21 |         }
 22 | 
 23 |     </style>
 24 | </head>
 25 | <body>
 26 |     <div class="main markdown">
 27 |         <h1>IconFont 图标</h1>
 28 |         <ul class="icon_lists clear">
 29 |             
 30 |                 <li>
 31 |                     <svg class="icon" aria-hidden="true">
 32 |                         <use xlink:href="#icon-all"></use>
 33 |                     </svg>
 34 |                     <div class="name">all</div>
 35 |                     <div class="fontclass">#icon-all</div>
 36 |                 </li>
 37 |             
 38 |                 <li>
 39 |                     <svg class="icon" aria-hidden="true">
 40 |                         <use xlink:href="#icon-back"></use>
 41 |                     </svg>
 42 |                     <div class="name">back</div>
 43 |                     <div class="fontclass">#icon-back</div>
 44 |                 </li>
 45 |             
 46 |                 <li>
 47 |                     <svg class="icon" aria-hidden="true">
 48 |                         <use xlink:href="#icon-cart"></use>
 49 |                     </svg>
 50 |                     <div class="name">cart</div>
 51 |                     <div class="fontclass">#icon-cart</div>
 52 |                 </li>
 53 |             
 54 |                 <li>
 55 |                     <svg class="icon" aria-hidden="true">
 56 |                         <use xlink:href="#icon-category"></use>
 57 |                     </svg>
 58 |                     <div class="name">Category</div>
 59 |                     <div class="fontclass">#icon-category</div>
 60 |                 </li>
 61 |             
 62 |                 <li>
 63 |                     <svg class="icon" aria-hidden="true">
 64 |                         <use xlink:href="#icon-close"></use>
 65 |                     </svg>
 66 |                     <div class="name">close</div>
 67 |                     <div class="fontclass">#icon-close</div>
 68 |                 </li>
 69 |             
 70 |                 <li>
 71 |                     <svg class="icon" aria-hidden="true">
 72 |                         <use xlink:href="#icon-comments"></use>
 73 |                     </svg>
 74 |                     <div class="name">comments</div>
 75 |                     <div class="fontclass">#icon-comments</div>
 76 |                 </li>
 77 |             
 78 |                 <li>
 79 |                     <svg class="icon" aria-hidden="true">
 80 |                         <use xlink:href="#icon-cry"></use>
 81 |                     </svg>
 82 |                     <div class="name">cry</div>
 83 |                     <div class="fontclass">#icon-cry</div>
 84 |                 </li>
 85 |             
 86 |                 <li>
 87 |                     <svg class="icon" aria-hidden="true">
 88 |                         <use xlink:href="#icon-delete"></use>
 89 |                     </svg>
 90 |                     <div class="name">delete</div>
 91 |                     <div class="fontclass">#icon-delete</div>
 92 |                 </li>
 93 |             
 94 |                 <li>
 95 |                     <svg class="icon" aria-hidden="true">
 96 |                         <use xlink:href="#icon-edit"></use>
 97 |                     </svg>
 98 |                     <div class="name">edit</div>
 99 |                     <div class="fontclass">#icon-edit</div>
100 |                 </li>
101 |             
102 |                 <li>
103 |                     <svg class="icon" aria-hidden="true">
104 |                         <use xlink:href="#icon-email"></use>
105 |                     </svg>
106 |                     <div class="name">email</div>
107 |                     <div class="fontclass">#icon-email</div>
108 |                 </li>
109 |             
110 |                 <li>
111 |                     <svg class="icon" aria-hidden="true">
112 |                         <use xlink:href="#icon-favorite"></use>
113 |                     </svg>
114 |                     <div class="name">favorite</div>
115 |                     <div class="fontclass">#icon-favorite</div>
116 |                 </li>
117 |             
118 |                 <li>
119 |                     <svg class="icon" aria-hidden="true">
120 |                         <use xlink:href="#icon-folder"></use>
121 |                     </svg>
122 |                     <div class="name">folder</div>
123 |                     <div class="fontclass">#icon-folder</div>
124 |                 </li>
125 |             
126 |                 <li>
127 |                     <svg class="icon" aria-hidden="true">
128 |                         <use xlink:href="#icon-form"></use>
129 |                     </svg>
130 |                     <div class="name">form</div>
131 |                     <div class="fontclass">#icon-form</div>
132 |                 </li>
133 |             
134 |                 <li>
135 |                     <svg class="icon" aria-hidden="true">
136 |                         <use xlink:href="#icon-help"></use>
137 |                     </svg>
138 |                     <div class="name">help</div>
139 |                     <div class="fontclass">#icon-help</div>
140 |                 </li>
141 |             
142 |                 <li>
143 |                     <svg class="icon" aria-hidden="true">
144 |                         <use xlink:href="#icon-information"></use>
145 |                     </svg>
146 |                     <div class="name">information</div>
147 |                     <div class="fontclass">#icon-information</div>
148 |                 </li>
149 |             
150 |                 <li>
151 |                     <svg class="icon" aria-hidden="true">
152 |                         <use xlink:href="#icon-less"></use>
153 |                     </svg>
154 |                     <div class="name">less</div>
155 |                     <div class="fontclass">#icon-less</div>
156 |                 </li>
157 |             
158 |                 <li>
159 |                     <svg class="icon" aria-hidden="true">
160 |                         <use xlink:href="#icon-moreunfold"></use>
161 |                     </svg>
162 |                     <div class="name">more_unfold</div>
163 |                     <div class="fontclass">#icon-moreunfold</div>
164 |                 </li>
165 |             
166 |                 <li>
167 |                     <svg class="icon" aria-hidden="true">
168 |                         <use xlink:href="#icon-more"></use>
169 |                     </svg>
170 |                     <div class="name">more</div>
171 |                     <div class="fontclass">#icon-more</div>
172 |                 </li>
173 |             
174 |                 <li>
175 |                     <svg class="icon" aria-hidden="true">
176 |                         <use xlink:href="#icon-pic"></use>
177 |                     </svg>
178 |                     <div class="name">pic</div>
179 |                     <div class="fontclass">#icon-pic</div>
180 |                 </li>
181 |             
182 |                 <li>
183 |                     <svg class="icon" aria-hidden="true">
184 |                         <use xlink:href="#icon-qrcode"></use>
185 |                     </svg>
186 |                     <div class="name">QRCode</div>
187 |                     <div class="fontclass">#icon-qrcode</div>
188 |                 </li>
189 |             
190 |                 <li>
191 |                     <svg class="icon" aria-hidden="true">
192 |                         <use xlink:href="#icon-refresh"></use>
193 |                     </svg>
194 |                     <div class="name">refresh</div>
195 |                     <div class="fontclass">#icon-refresh</div>
196 |                 </li>
197 |             
198 |                 <li>
199 |                     <svg class="icon" aria-hidden="true">
200 |                         <use xlink:href="#icon-rfq"></use>
201 |                     </svg>
202 |                     <div class="name">RFQ</div>
203 |                     <div class="fontclass">#icon-rfq</div>
204 |                 </li>
205 |             
206 |                 <li>
207 |                     <svg class="icon" aria-hidden="true">
208 |                         <use xlink:href="#icon-search"></use>
209 |                     </svg>
210 |                     <div class="name">search</div>
211 |                     <div class="fontclass">#icon-search</div>
212 |                 </li>
213 |             
214 |                 <li>
215 |                     <svg class="icon" aria-hidden="true">
216 |                         <use xlink:href="#icon-selected"></use>
217 |                     </svg>
218 |                     <div class="name">selected</div>
219 |                     <div class="fontclass">#icon-selected</div>
220 |                 </li>
221 |             
222 |                 <li>
223 |                     <svg class="icon" aria-hidden="true">
224 |                         <use xlink:href="#icon-set"></use>
225 |                     </svg>
226 |                     <div class="name">set</div>
227 |                     <div class="fontclass">#icon-set</div>
228 |                 </li>
229 |             
230 |                 <li>
231 |                     <svg class="icon" aria-hidden="true">
232 |                         <use xlink:href="#icon-smile"></use>
233 |                     </svg>
234 |                     <div class="name">Smile</div>
235 |                     <div class="fontclass">#icon-smile</div>
236 |                 </li>
237 |             
238 |                 <li>
239 |                     <svg class="icon" aria-hidden="true">
240 |                         <use xlink:href="#icon-success"></use>
241 |                     </svg>
242 |                     <div class="name">success</div>
243 |                     <div class="fontclass">#icon-success</div>
244 |                 </li>
245 |             
246 |                 <li>
247 |                     <svg class="icon" aria-hidden="true">
248 |                         <use xlink:href="#icon-survey"></use>
249 |                     </svg>
250 |                     <div class="name">survey</div>
251 |                     <div class="fontclass">#icon-survey</div>
252 |                 </li>
253 |             
254 |                 <li>
255 |                     <svg class="icon" aria-hidden="true">
256 |                         <use xlink:href="#icon-training"></use>
257 |                     </svg>
258 |                     <div class="name">training</div>
259 |                     <div class="fontclass">#icon-training</div>
260 |                 </li>
261 |             
262 |                 <li>
263 |                     <svg class="icon" aria-hidden="true">
264 |                         <use xlink:href="#icon-viewgallery"></use>
265 |                     </svg>
266 |                     <div class="name">ViewGallery</div>
267 |                     <div class="fontclass">#icon-viewgallery</div>
268 |                 </li>
269 |             
270 |                 <li>
271 |                     <svg class="icon" aria-hidden="true">
272 |                         <use xlink:href="#icon-viewlist"></use>
273 |                     </svg>
274 |                     <div class="name">Viewlist</div>
275 |                     <div class="fontclass">#icon-viewlist</div>
276 |                 </li>
277 |             
278 |                 <li>
279 |                     <svg class="icon" aria-hidden="true">
280 |                         <use xlink:href="#icon-warning"></use>
281 |                     </svg>
282 |                     <div class="name">warning</div>
283 |                     <div class="fontclass">#icon-warning</div>
284 |                 </li>
285 |             
286 |                 <li>
287 |                     <svg class="icon" aria-hidden="true">
288 |                         <use xlink:href="#icon-wrong"></use>
289 |                     </svg>
290 |                     <div class="name">wrong</div>
291 |                     <div class="fontclass">#icon-wrong</div>
292 |                 </li>
293 |             
294 |                 <li>
295 |                     <svg class="icon" aria-hidden="true">
296 |                         <use xlink:href="#icon-account"></use>
297 |                     </svg>
298 |                     <div class="name">account</div>
299 |                     <div class="fontclass">#icon-account</div>
300 |                 </li>
301 |             
302 |                 <li>
303 |                     <svg class="icon" aria-hidden="true">
304 |                         <use xlink:href="#icon-add"></use>
305 |                     </svg>
306 |                     <div class="name">add</div>
307 |                     <div class="fontclass">#icon-add</div>
308 |                 </li>
309 |             
310 |                 <li>
311 |                     <svg class="icon" aria-hidden="true">
312 |                         <use xlink:href="#icon-atm"></use>
313 |                     </svg>
314 |                     <div class="name">atm</div>
315 |                     <div class="fontclass">#icon-atm</div>
316 |                 </li>
317 |             
318 |                 <li>
319 |                     <svg class="icon" aria-hidden="true">
320 |                         <use xlink:href="#icon-clock"></use>
321 |                     </svg>
322 |                     <div class="name">clock</div>
323 |                     <div class="fontclass">#icon-clock</div>
324 |                 </li>
325 |             
326 |                 <li>
327 |                     <svg class="icon" aria-hidden="true">
328 |                         <use xlink:href="#icon-remind"></use>
329 |                     </svg>
330 |                     <div class="name">remind</div>
331 |                     <div class="fontclass">#icon-remind</div>
332 |                 </li>
333 |             
334 |                 <li>
335 |                     <svg class="icon" aria-hidden="true">
336 |                         <use xlink:href="#icon-calendar"></use>
337 |                     </svg>
338 |                     <div class="name">calendar</div>
339 |                     <div class="fontclass">#icon-calendar</div>
340 |                 </li>
341 |             
342 |                 <li>
343 |                     <svg class="icon" aria-hidden="true">
344 |                         <use xlink:href="#icon-attachment"></use>
345 |                     </svg>
346 |                     <div class="name">attachment</div>
347 |                     <div class="fontclass">#icon-attachment</div>
348 |                 </li>
349 |             
350 |                 <li>
351 |                     <svg class="icon" aria-hidden="true">
352 |                         <use xlink:href="#icon-3column"></use>
353 |                     </svg>
354 |                     <div class="name">3column</div>
355 |                     <div class="fontclass">#icon-3column</div>
356 |                 </li>
357 |             
358 |                 <li>
359 |                     <svg class="icon" aria-hidden="true">
360 |                         <use xlink:href="#icon-4column"></use>
361 |                     </svg>
362 |                     <div class="name">4column</div>
363 |                     <div class="fontclass">#icon-4column</div>
364 |                 </li>
365 |             
366 |                 <li>
367 |                     <svg class="icon" aria-hidden="true">
368 |                         <use xlink:href="#icon-discount"></use>
369 |                     </svg>
370 |                     <div class="name">discount</div>
371 |                     <div class="fontclass">#icon-discount</div>
372 |                 </li>
373 |             
374 |                 <li>
375 |                     <svg class="icon" aria-hidden="true">
376 |                         <use xlink:href="#icon-service"></use>
377 |                     </svg>
378 |                     <div class="name">service</div>
379 |                     <div class="fontclass">#icon-service</div>
380 |                 </li>
381 |             
382 |                 <li>
383 |                     <svg class="icon" aria-hidden="true">
384 |                         <use xlink:href="#icon-print"></use>
385 |                     </svg>
386 |                     <div class="name">print</div>
387 |                     <div class="fontclass">#icon-print</div>
388 |                 </li>
389 |             
390 |                 <li>
391 |                     <svg class="icon" aria-hidden="true">
392 |                         <use xlink:href="#icon-box"></use>
393 |                     </svg>
394 |                     <div class="name">box</div>
395 |                     <div class="fontclass">#icon-box</div>
396 |                 </li>
397 |             
398 |                 <li>
399 |                     <svg class="icon" aria-hidden="true">
400 |                         <use xlink:href="#icon-process"></use>
401 |                     </svg>
402 |                     <div class="name">process</div>
403 |                     <div class="fontclass">#icon-process</div>
404 |                 </li>
405 |             
406 |                 <li>
407 |                     <svg class="icon" aria-hidden="true">
408 |                         <use xlink:href="#icon-bags"></use>
409 |                     </svg>
410 |                     <div class="name">bags</div>
411 |                     <div class="fontclass">#icon-bags</div>
412 |                 </li>
413 |             
414 |                 <li>
415 |                     <svg class="icon" aria-hidden="true">
416 |                         <use xlink:href="#icon-beauty"></use>
417 |                     </svg>
418 |                     <div class="name">beauty</div>
419 |                     <div class="fontclass">#icon-beauty</div>
420 |                 </li>
421 |             
422 |                 <li>
423 |                     <svg class="icon" aria-hidden="true">
424 |                         <use xlink:href="#icon-electrical"></use>
425 |                     </svg>
426 |                     <div class="name">electrical</div>
427 |                     <div class="fontclass">#icon-electrical</div>
428 |                 </li>
429 |             
430 |                 <li>
431 |                     <svg class="icon" aria-hidden="true">
432 |                         <use xlink:href="#icon-electronics"></use>
433 |                     </svg>
434 |                     <div class="name">electronics</div>
435 |                     <div class="fontclass">#icon-electronics</div>
436 |                 </li>
437 |             
438 |                 <li>
439 |                     <svg class="icon" aria-hidden="true">
440 |                         <use xlink:href="#icon-gifts"></use>
441 |                     </svg>
442 |                     <div class="name">gifts</div>
443 |                     <div class="fontclass">#icon-gifts</div>
444 |                 </li>
445 |             
446 |                 <li>
447 |                     <svg class="icon" aria-hidden="true">
448 |                         <use xlink:href="#icon-apparel"></use>
449 |                     </svg>
450 |                     <div class="name">apparel</div>
451 |                     <div class="fontclass">#icon-apparel</div>
452 |                 </li>
453 |             
454 |                 <li>
455 |                     <svg class="icon" aria-hidden="true">
456 |                         <use xlink:href="#icon-atmaway"></use>
457 |                     </svg>
458 |                     <div class="name">atm-away</div>
459 |                     <div class="fontclass">#icon-atmaway</div>
460 |                 </li>
461 |             
462 |                 <li>
463 |                     <svg class="icon" aria-hidden="true">
464 |                         <use xlink:href="#icon-rfq1"></use>
465 |                     </svg>
466 |                     <div class="name">rfq</div>
467 |                     <div class="fontclass">#icon-rfq1</div>
468 |                 </li>
469 |             
470 |                 <li>
471 |                     <svg class="icon" aria-hidden="true">
472 |                         <use xlink:href="#icon-scanning"></use>
473 |                     </svg>
474 |                     <div class="name">scanning</div>
475 |                     <div class="fontclass">#icon-scanning</div>
476 |                 </li>
477 |             
478 |                 <li>
479 |                     <svg class="icon" aria-hidden="true">
480 |                         <use xlink:href="#icon-filter"></use>
481 |                     </svg>
482 |                     <div class="name">filter</div>
483 |                     <div class="fontclass">#icon-filter</div>
484 |                 </li>
485 |             
486 |                 <li>
487 |                     <svg class="icon" aria-hidden="true">
488 |                         <use xlink:href="#icon-pin"></use>
489 |                     </svg>
490 |                     <div class="name">pin</div>
491 |                     <div class="fontclass">#icon-pin</div>
492 |                 </li>
493 |             
494 |                 <li>
495 |                     <svg class="icon" aria-hidden="true">
496 |                         <use xlink:href="#icon-history"></use>
497 |                     </svg>
498 |                     <div class="name">history</div>
499 |                     <div class="fontclass">#icon-history</div>
500 |                 </li>
501 |             
502 |                 <li>
503 |                     <svg class="icon" aria-hidden="true">
504 |                         <use xlink:href="#icon-productfeatures"></use>
505 |                     </svg>
506 |                     <div class="name">product-features</div>
507 |                     <div class="fontclass">#icon-productfeatures</div>
508 |                 </li>
509 |             
510 |                 <li>
511 |                     <svg class="icon" aria-hidden="true">
512 |                         <use xlink:href="#icon-supplierfeatures"></use>
513 |                     </svg>
514 |                     <div class="name">supplier-features</div>
515 |                     <div class="fontclass">#icon-supplierfeatures</div>
516 |                 </li>
517 |             
518 |                 <li>
519 |                     <svg class="icon" aria-hidden="true">
520 |                         <use xlink:href="#icon-similarproduct"></use>
521 |                     </svg>
522 |                     <div class="name">similar-product</div>
523 |                     <div class="fontclass">#icon-similarproduct</div>
524 |                 </li>
525 |             
526 |                 <li>
527 |                     <svg class="icon" aria-hidden="true">
528 |                         <use xlink:href="#icon-link"></use>
529 |                     </svg>
530 |                     <div class="name">link</div>
531 |                     <div class="fontclass">#icon-link</div>
532 |                 </li>
533 |             
534 |                 <li>
535 |                     <svg class="icon" aria-hidden="true">
536 |                         <use xlink:href="#icon-cut"></use>
537 |                     </svg>
538 |                     <div class="name">cut</div>
539 |                     <div class="fontclass">#icon-cut</div>
540 |                 </li>
541 |             
542 |                 <li>
543 |                     <svg class="icon" aria-hidden="true">
544 |                         <use xlink:href="#icon-navlist"></use>
545 |                     </svg>
546 |                     <div class="name">nav-list</div>
547 |                     <div class="fontclass">#icon-navlist</div>
548 |                 </li>
549 |             
550 |                 <li>
551 |                     <svg class="icon" aria-hidden="true">
552 |                         <use xlink:href="#icon-imagetext"></use>
553 |                     </svg>
554 |                     <div class="name">image-text</div>
555 |                     <div class="fontclass">#icon-imagetext</div>
556 |                 </li>
557 |             
558 |                 <li>
559 |                     <svg class="icon" aria-hidden="true">
560 |                         <use xlink:href="#icon-text"></use>
561 |                     </svg>
562 |                     <div class="name">text</div>
563 |                     <div class="fontclass">#icon-text</div>
564 |                 </li>
565 |             
566 |                 <li>
567 |                     <svg class="icon" aria-hidden="true">
568 |                         <use xlink:href="#icon-move"></use>
569 |                     </svg>
570 |                     <div class="name">move</div>
571 |                     <div class="fontclass">#icon-move</div>
572 |                 </li>
573 |             
574 |                 <li>
575 |                     <svg class="icon" aria-hidden="true">
576 |                         <use xlink:href="#icon-subtract"></use>
577 |                     </svg>
578 |                     <div class="name">subtract</div>
579 |                     <div class="fontclass">#icon-subtract</div>
580 |                 </li>
581 |             
582 |                 <li>
583 |                     <svg class="icon" aria-hidden="true">
584 |                         <use xlink:href="#icon-dollar"></use>
585 |                     </svg>
586 |                     <div class="name">dollar</div>
587 |                     <div class="fontclass">#icon-dollar</div>
588 |                 </li>
589 |             
590 |                 <li>
591 |                     <svg class="icon" aria-hidden="true">
592 |                         <use xlink:href="#icon-raw"></use>
593 |                     </svg>
594 |                     <div class="name">raw</div>
595 |                     <div class="fontclass">#icon-raw</div>
596 |                 </li>
597 |             
598 |                 <li>
599 |                     <svg class="icon" aria-hidden="true">
600 |                         <use xlink:href="#icon-office"></use>
601 |                     </svg>
602 |                     <div class="name">office</div>
603 |                     <div class="fontclass">#icon-office</div>
604 |                 </li>
605 |             
606 |                 <li>
607 |                     <svg class="icon" aria-hidden="true">
608 |                         <use xlink:href="#icon-agriculture"></use>
609 |                     </svg>
610 |                     <div class="name">agriculture</div>
611 |                     <div class="fontclass">#icon-agriculture</div>
612 |                 </li>
613 |             
614 |                 <li>
615 |                     <svg class="icon" aria-hidden="true">
616 |                         <use xlink:href="#icon-machinery"></use>
617 |                     </svg>
618 |                     <div class="name">machinery</div>
619 |                     <div class="fontclass">#icon-machinery</div>
620 |                 </li>
621 |             
622 |                 <li>
623 |                     <svg class="icon" aria-hidden="true">
624 |                         <use xlink:href="#icon-assessedbadge"></use>
625 |                     </svg>
626 |                     <div class="name">assessed-Badge</div>
627 |                     <div class="fontclass">#icon-assessedbadge</div>
628 |                 </li>
629 |             
630 |                 <li>
631 |                     <svg class="icon" aria-hidden="true">
632 |                         <use xlink:href="#icon-gerenzhongxin"></use>
633 |                     </svg>
634 |                     <div class="name">personal-center</div>
635 |                     <div class="fontclass">#icon-gerenzhongxin</div>
636 |                 </li>
637 |             
638 |                 <li>
639 |                     <svg class="icon" aria-hidden="true">
640 |                         <use xlink:href="#icon-jifen"></use>
641 |                     </svg>
642 |                     <div class="name">integral</div>
643 |                     <div class="fontclass">#icon-jifen</div>
644 |                 </li>
645 |             
646 |                 <li>
647 |                     <svg class="icon" aria-hidden="true">
648 |                         <use xlink:href="#icon-operation"></use>
649 |                     </svg>
650 |                     <div class="name">operation</div>
651 |                     <div class="fontclass">#icon-operation</div>
652 |                 </li>
653 |             
654 |                 <li>
655 |                     <svg class="icon" aria-hidden="true">
656 |                         <use xlink:href="#icon-remind1"></use>
657 |                     </svg>
658 |                     <div class="name">remind</div>
659 |                     <div class="fontclass">#icon-remind1</div>
660 |                 </li>
661 |             
662 |                 <li>
663 |                     <svg class="icon" aria-hidden="true">
664 |                         <use xlink:href="#icon-icondownload"></use>
665 |                     </svg>
666 |                     <div class="name">download</div>
667 |                     <div class="fontclass">#icon-icondownload</div>
668 |                 </li>
669 |             
670 |                 <li>
671 |                     <svg class="icon" aria-hidden="true">
672 |                         <use xlink:href="#icon-map"></use>
673 |                     </svg>
674 |                     <div class="name">map</div>
675 |                     <div class="fontclass">#icon-map</div>
676 |                 </li>
677 |             
678 |                 <li>
679 |                     <svg class="icon" aria-hidden="true">
680 |                         <use xlink:href="#icon-good"></use>
681 |                     </svg>
682 |                     <div class="name">good</div>
683 |                     <div class="fontclass">#icon-good</div>
684 |                 </li>
685 |             
686 |                 <li>
687 |                     <svg class="icon" aria-hidden="true">
688 |                         <use xlink:href="#icon-skip"></use>
689 |                     </svg>
690 |                     <div class="name">skip</div>
691 |                     <div class="fontclass">#icon-skip</div>
692 |                 </li>
693 |             
694 |                 <li>
695 |                     <svg class="icon" aria-hidden="true">
696 |                         <use xlink:href="#icon-iconfontplay2"></use>
697 |                     </svg>
698 |                     <div class="name">play</div>
699 |                     <div class="fontclass">#icon-iconfontplay2</div>
700 |                 </li>
701 |             
702 |                 <li>
703 |                     <svg class="icon" aria-hidden="true">
704 |                         <use xlink:href="#icon-iconfontstop"></use>
705 |                     </svg>
706 |                     <div class="name">stop</div>
707 |                     <div class="fontclass">#icon-iconfontstop</div>
708 |                 </li>
709 |             
710 |                 <li>
711 |                     <svg class="icon" aria-hidden="true">
712 |                         <use xlink:href="#icon-compass"></use>
713 |                     </svg>
714 |                     <div class="name">compass</div>
715 |                     <div class="fontclass">#icon-compass</div>
716 |                 </li>
717 |             
718 |                 <li>
719 |                     <svg class="icon" aria-hidden="true">
720 |                         <use xlink:href="#icon-security"></use>
721 |                     </svg>
722 |                     <div class="name">security</div>
723 |                     <div class="fontclass">#icon-security</div>
724 |                 </li>
725 |             
726 |                 <li>
727 |                     <svg class="icon" aria-hidden="true">
728 |                         <use xlink:href="#icon-share"></use>
729 |                     </svg>
730 |                     <div class="name">share</div>
731 |                     <div class="fontclass">#icon-share</div>
732 |                 </li>
733 |             
734 |                 <li>
735 |                     <svg class="icon" aria-hidden="true">
736 |                         <use xlink:href="#icon-store"></use>
737 |                     </svg>
738 |                     <div class="name">store</div>
739 |                     <div class="fontclass">#icon-store</div>
740 |                 </li>
741 |             
742 |                 <li>
743 |                     <svg class="icon" aria-hidden="true">
744 |                         <use xlink:href="#icon-rejectedorder"></use>
745 |                     </svg>
746 |                     <div class="name">rejected-order</div>
747 |                     <div class="fontclass">#icon-rejectedorder</div>
748 |                 </li>
749 |             
750 |                 <li>
751 |                     <svg class="icon" aria-hidden="true">
752 |                         <use xlink:href="#icon-phone"></use>
753 |                     </svg>
754 |                     <div class="name">phone</div>
755 |                     <div class="fontclass">#icon-phone</div>
756 |                 </li>
757 |             
758 |                 <li>
759 |                     <svg class="icon" aria-hidden="true">
760 |                         <use xlink:href="#icon-bussinessman"></use>
761 |                     </svg>
762 |                     <div class="name">bussiness-man</div>
763 |                     <div class="fontclass">#icon-bussinessman</div>
764 |                 </li>
765 |             
766 |                 <li>
767 |                     <svg class="icon" aria-hidden="true">
768 |                         <use xlink:href="#icon-mobilephone"></use>
769 |                     </svg>
770 |                     <div class="name">Mobile-phone</div>
771 |                     <div class="fontclass">#icon-mobilephone</div>
772 |                 </li>
773 |             
774 |                 <li>
775 |                     <svg class="icon" aria-hidden="true">
776 |                         <use xlink:href="#icon-emailfilling"></use>
777 |                     </svg>
778 |                     <div class="name">email-filling</div>
779 |                     <div class="fontclass">#icon-emailfilling</div>
780 |                 </li>
781 |             
782 |                 <li>
783 |                     <svg class="icon" aria-hidden="true">
784 |                         <use xlink:href="#icon-favoritesfilling"></use>
785 |                     </svg>
786 |                     <div class="name">favorites-filling</div>
787 |                     <div class="fontclass">#icon-favoritesfilling</div>
788 |                 </li>
789 |             
790 |                 <li>
791 |                     <svg class="icon" aria-hidden="true">
792 |                         <use xlink:href="#icon-accountfilling"></use>
793 |                     </svg>
794 |                     <div class="name">account-filling</div>
795 |                     <div class="fontclass">#icon-accountfilling</div>
796 |                 </li>
797 |             
798 |                 <li>
799 |                     <svg class="icon" aria-hidden="true">
800 |                         <use xlink:href="#icon-creditlevelfilling"></use>
801 |                     </svg>
802 |                     <div class="name">credit-level-filling</div>
803 |                     <div class="fontclass">#icon-creditlevelfilling</div>
804 |                 </li>
805 |             
806 |                 <li>
807 |                     <svg class="icon" aria-hidden="true">
808 |                         <use xlink:href="#icon-exl"></use>
809 |                     </svg>
810 |                     <div class="name">exl</div>
811 |                     <div class="fontclass">#icon-exl</div>
812 |                 </li>
813 |             
814 |                 <li>
815 |                     <svg class="icon" aria-hidden="true">
816 |                         <use xlink:href="#icon-pdf"></use>
817 |                     </svg>
818 |                     <div class="name">pdf</div>
819 |                     <div class="fontclass">#icon-pdf</div>
820 |                 </li>
821 |             
822 |                 <li>
823 |                     <svg class="icon" aria-hidden="true">
824 |                         <use xlink:href="#icon-zip"></use>
825 |                     </svg>
826 |                     <div class="name">zip</div>
827 |                     <div class="fontclass">#icon-zip</div>
828 |                 </li>
829 |             
830 |                 <li>
831 |                     <svg class="icon" aria-hidden="true">
832 |                         <use xlink:href="#icon-sorting"></use>
833 |                     </svg>
834 |                     <div class="name">sorting</div>
835 |                     <div class="fontclass">#icon-sorting</div>
836 |                 </li>
837 |             
838 |                 <li>
839 |                     <svg class="icon" aria-hidden="true">
840 |                         <use xlink:href="#icon-copy"></use>
841 |                     </svg>
842 |                     <div class="name">copy</div>
843 |                     <div class="fontclass">#icon-copy</div>
844 |                 </li>
845 |             
846 |                 <li>
847 |                     <svg class="icon" aria-hidden="true">
848 |                         <use xlink:href="#icon-hot"></use>
849 |                     </svg>
850 |                     <div class="name">hot</div>
851 |                     <div class="fontclass">#icon-hot</div>
852 |                 </li>
853 |             
854 |                 <li>
855 |                     <svg class="icon" aria-hidden="true">
856 |                         <use xlink:href="#icon-trade"></use>
857 |                     </svg>
858 |                     <div class="name">trade</div>
859 |                     <div class="fontclass">#icon-trade</div>
860 |                 </li>
861 |             
862 |                 <li>
863 |                     <svg class="icon" aria-hidden="true">
864 |                         <use xlink:href="#icon-component"></use>
865 |                     </svg>
866 |                     <div class="name">component</div>
867 |                     <div class="fontclass">#icon-component</div>
868 |                 </li>
869 |             
870 |                 <li>
871 |                     <svg class="icon" aria-hidden="true">
872 |                         <use xlink:href="#icon-color"></use>
873 |                     </svg>
874 |                     <div class="name">color</div>
875 |                     <div class="fontclass">#icon-color</div>
876 |                 </li>
877 |             
878 |                 <li>
879 |                     <svg class="icon" aria-hidden="true">
880 |                         <use xlink:href="#icon-color-filling"></use>
881 |                     </svg>
882 |                     <div class="name">color-filling</div>
883 |                     <div class="fontclass">#icon-color-filling</div>
884 |                 </li>
885 |             
886 |                 <li>
887 |                     <svg class="icon" aria-hidden="true">
888 |                         <use xlink:href="#icon-favorites"></use>
889 |                     </svg>
890 |                     <div class="name">favorites</div>
891 |                     <div class="fontclass">#icon-favorites</div>
892 |                 </li>
893 |             
894 |                 <li>
895 |                     <svg class="icon" aria-hidden="true">
896 |                         <use xlink:href="#icon-RFQ"></use>
897 |                     </svg>
898 |                     <div class="name">RFQ</div>
899 |                     <div class="fontclass">#icon-RFQ</div>
900 |                 </li>
901 |             
902 |                 <li>
903 |                     <svg class="icon" aria-hidden="true">
904 |                         <use xlink:href="#icon-originalimage"></use>
905 |                     </svg>
906 |                     <div class="name">original-image</div>
907 |                     <div class="fontclass">#icon-originalimage</div>
908 |                 </li>
909 |             
910 |                 <li>
911 |                     <svg class="icon" aria-hidden="true">
912 |                         <use xlink:href="#icon-logistic"></use>
913 |                     </svg>
914 |                     <div class="name">logistic</div>
915 |                     <div class="fontclass">#icon-logistic</div>
916 |                 </li>
917 |             
918 |                 <li>
919 |                     <svg class="icon" aria-hidden="true">
920 |                         <use xlink:href="#icon-video"></use>
921 |                     </svg>
922 |                     <div class="name">video</div>
923 |                     <div class="fontclass">#icon-video</div>
924 |                 </li>
925 |             
926 |         </ul>
927 | 
928 | 
929 |         <h2 id="symbol-">symbol引用</h2>
930 |         <hr>
931 | 
932 |         <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
933 |         这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
934 |         <ul>
935 |           <li>支持多色图标了，不再受单色限制。</li>
936 |           <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
937 |           <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
938 |           <li>浏览器渲染svg的性能一般，还不如png。</li>
939 |         </ul>
940 |         <p>使用步骤如下：</p>
941 |         <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
942 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
943 |         <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
944 |         <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
945 | .icon {
946 |    width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
947 |    vertical-align: <span class="hljs-number">-0.15</span>em;
948 |    fill: currentColor;
949 |    overflow: hidden;
950 | }
951 | &lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
952 |         <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
953 |         <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
954 |   &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
955 | </span>&lt;<span class="hljs-regexp">/svg&gt;
956 |         </span></code></pre>
957 |     </div>
958 | </body>
959 | </html>
960 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/demo_unicode.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8"/>
  6 |     <title>IconFont</title>
  7 |     <link rel="stylesheet" href="demo.css">
  8 | 
  9 |     <style type="text/css">
 10 | 
 11 |         @font-face {font-family: "iconfont";
 12 |           src: url('iconfont.eot'); /* IE9*/
 13 |           src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
 14 |           url('iconfont.woff') format('woff'), /* chrome, firefox */
 15 |           url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 16 |           url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 17 |         }
 18 | 
 19 |         .iconfont {
 20 |           font-family:"iconfont" !important;
 21 |           font-size:16px;
 22 |           font-style:normal;
 23 |           -webkit-font-smoothing: antialiased;
 24 |           -webkit-text-stroke-width: 0.2px;
 25 |           -moz-osx-font-smoothing: grayscale;
 26 |         }
 27 | 
 28 |     </style>
 29 | </head>
 30 | <body>
 31 |     <div class="main markdown">
 32 |         <h1>IconFont 图标</h1>
 33 |         <ul class="icon_lists clear">
 34 |             
 35 |                 <li>
 36 |                 <i class="icon iconfont">&#xe696;</i>
 37 |                     <div class="name">all</div>
 38 |                     <div class="code">&amp;#xe696;</div>
 39 |                 </li>
 40 |             
 41 |                 <li>
 42 |                 <i class="icon iconfont">&#xe697;</i>
 43 |                     <div class="name">back</div>
 44 |                     <div class="code">&amp;#xe697;</div>
 45 |                 </li>
 46 |             
 47 |                 <li>
 48 |                 <i class="icon iconfont">&#xe698;</i>
 49 |                     <div class="name">cart</div>
 50 |                     <div class="code">&amp;#xe698;</div>
 51 |                 </li>
 52 |             
 53 |                 <li>
 54 |                 <i class="icon iconfont">&#xe699;</i>
 55 |                     <div class="name">Category</div>
 56 |                     <div class="code">&amp;#xe699;</div>
 57 |                 </li>
 58 |             
 59 |                 <li>
 60 |                 <i class="icon iconfont">&#xe69a;</i>
 61 |                     <div class="name">close</div>
 62 |                     <div class="code">&amp;#xe69a;</div>
 63 |                 </li>
 64 |             
 65 |                 <li>
 66 |                 <i class="icon iconfont">&#xe69b;</i>
 67 |                     <div class="name">comments</div>
 68 |                     <div class="code">&amp;#xe69b;</div>
 69 |                 </li>
 70 |             
 71 |                 <li>
 72 |                 <i class="icon iconfont">&#xe69c;</i>
 73 |                     <div class="name">cry</div>
 74 |                     <div class="code">&amp;#xe69c;</div>
 75 |                 </li>
 76 |             
 77 |                 <li>
 78 |                 <i class="icon iconfont">&#xe69d;</i>
 79 |                     <div class="name">delete</div>
 80 |                     <div class="code">&amp;#xe69d;</div>
 81 |                 </li>
 82 |             
 83 |                 <li>
 84 |                 <i class="icon iconfont">&#xe69e;</i>
 85 |                     <div class="name">edit</div>
 86 |                     <div class="code">&amp;#xe69e;</div>
 87 |                 </li>
 88 |             
 89 |                 <li>
 90 |                 <i class="icon iconfont">&#xe69f;</i>
 91 |                     <div class="name">email</div>
 92 |                     <div class="code">&amp;#xe69f;</div>
 93 |                 </li>
 94 |             
 95 |                 <li>
 96 |                 <i class="icon iconfont">&#xe6a0;</i>
 97 |                     <div class="name">favorite</div>
 98 |                     <div class="code">&amp;#xe6a0;</div>
 99 |                 </li>
100 |             
101 |                 <li>
102 |                 <i class="icon iconfont">&#xe6a1;</i>
103 |                     <div class="name">folder</div>
104 |                     <div class="code">&amp;#xe6a1;</div>
105 |                 </li>
106 |             
107 |                 <li>
108 |                 <i class="icon iconfont">&#xe6a2;</i>
109 |                     <div class="name">form</div>
110 |                     <div class="code">&amp;#xe6a2;</div>
111 |                 </li>
112 |             
113 |                 <li>
114 |                 <i class="icon iconfont">&#xe6a3;</i>
115 |                     <div class="name">help</div>
116 |                     <div class="code">&amp;#xe6a3;</div>
117 |                 </li>
118 |             
119 |                 <li>
120 |                 <i class="icon iconfont">&#xe6a4;</i>
121 |                     <div class="name">information</div>
122 |                     <div class="code">&amp;#xe6a4;</div>
123 |                 </li>
124 |             
125 |                 <li>
126 |                 <i class="icon iconfont">&#xe6a5;</i>
127 |                     <div class="name">less</div>
128 |                     <div class="code">&amp;#xe6a5;</div>
129 |                 </li>
130 |             
131 |                 <li>
132 |                 <i class="icon iconfont">&#xe6a6;</i>
133 |                     <div class="name">more_unfold</div>
134 |                     <div class="code">&amp;#xe6a6;</div>
135 |                 </li>
136 |             
137 |                 <li>
138 |                 <i class="icon iconfont">&#xe6a7;</i>
139 |                     <div class="name">more</div>
140 |                     <div class="code">&amp;#xe6a7;</div>
141 |                 </li>
142 |             
143 |                 <li>
144 |                 <i class="icon iconfont">&#xe6a8;</i>
145 |                     <div class="name">pic</div>
146 |                     <div class="code">&amp;#xe6a8;</div>
147 |                 </li>
148 |             
149 |                 <li>
150 |                 <i class="icon iconfont">&#xe6a9;</i>
151 |                     <div class="name">QRCode</div>
152 |                     <div class="code">&amp;#xe6a9;</div>
153 |                 </li>
154 |             
155 |                 <li>
156 |                 <i class="icon iconfont">&#xe6aa;</i>
157 |                     <div class="name">refresh</div>
158 |                     <div class="code">&amp;#xe6aa;</div>
159 |                 </li>
160 |             
161 |                 <li>
162 |                 <i class="icon iconfont">&#xe6ab;</i>
163 |                     <div class="name">RFQ</div>
164 |                     <div class="code">&amp;#xe6ab;</div>
165 |                 </li>
166 |             
167 |                 <li>
168 |                 <i class="icon iconfont">&#xe6ac;</i>
169 |                     <div class="name">search</div>
170 |                     <div class="code">&amp;#xe6ac;</div>
171 |                 </li>
172 |             
173 |                 <li>
174 |                 <i class="icon iconfont">&#xe6ad;</i>
175 |                     <div class="name">selected</div>
176 |                     <div class="code">&amp;#xe6ad;</div>
177 |                 </li>
178 |             
179 |                 <li>
180 |                 <i class="icon iconfont">&#xe6ae;</i>
181 |                     <div class="name">set</div>
182 |                     <div class="code">&amp;#xe6ae;</div>
183 |                 </li>
184 |             
185 |                 <li>
186 |                 <i class="icon iconfont">&#xe6af;</i>
187 |                     <div class="name">Smile</div>
188 |                     <div class="code">&amp;#xe6af;</div>
189 |                 </li>
190 |             
191 |                 <li>
192 |                 <i class="icon iconfont">&#xe6b1;</i>
193 |                     <div class="name">success</div>
194 |                     <div class="code">&amp;#xe6b1;</div>
195 |                 </li>
196 |             
197 |                 <li>
198 |                 <i class="icon iconfont">&#xe6b2;</i>
199 |                     <div class="name">survey</div>
200 |                     <div class="code">&amp;#xe6b2;</div>
201 |                 </li>
202 |             
203 |                 <li>
204 |                 <i class="icon iconfont">&#xe6b3;</i>
205 |                     <div class="name">training</div>
206 |                     <div class="code">&amp;#xe6b3;</div>
207 |                 </li>
208 |             
209 |                 <li>
210 |                 <i class="icon iconfont">&#xe6b4;</i>
211 |                     <div class="name">ViewGallery</div>
212 |                     <div class="code">&amp;#xe6b4;</div>
213 |                 </li>
214 |             
215 |                 <li>
216 |                 <i class="icon iconfont">&#xe6b5;</i>
217 |                     <div class="name">Viewlist</div>
218 |                     <div class="code">&amp;#xe6b5;</div>
219 |                 </li>
220 |             
221 |                 <li>
222 |                 <i class="icon iconfont">&#xe6b6;</i>
223 |                     <div class="name">warning</div>
224 |                     <div class="code">&amp;#xe6b6;</div>
225 |                 </li>
226 |             
227 |                 <li>
228 |                 <i class="icon iconfont">&#xe6b7;</i>
229 |                     <div class="name">wrong</div>
230 |                     <div class="code">&amp;#xe6b7;</div>
231 |                 </li>
232 |             
233 |                 <li>
234 |                 <i class="icon iconfont">&#xe6b8;</i>
235 |                     <div class="name">account</div>
236 |                     <div class="code">&amp;#xe6b8;</div>
237 |                 </li>
238 |             
239 |                 <li>
240 |                 <i class="icon iconfont">&#xe6b9;</i>
241 |                     <div class="name">add</div>
242 |                     <div class="code">&amp;#xe6b9;</div>
243 |                 </li>
244 |             
245 |                 <li>
246 |                 <i class="icon iconfont">&#xe6ba;</i>
247 |                     <div class="name">atm</div>
248 |                     <div class="code">&amp;#xe6ba;</div>
249 |                 </li>
250 |             
251 |                 <li>
252 |                 <i class="icon iconfont">&#xe6bb;</i>
253 |                     <div class="name">clock</div>
254 |                     <div class="code">&amp;#xe6bb;</div>
255 |                 </li>
256 |             
257 |                 <li>
258 |                 <i class="icon iconfont">&#xe6bc;</i>
259 |                     <div class="name">remind</div>
260 |                     <div class="code">&amp;#xe6bc;</div>
261 |                 </li>
262 |             
263 |                 <li>
264 |                 <i class="icon iconfont">&#xe6bf;</i>
265 |                     <div class="name">calendar</div>
266 |                     <div class="code">&amp;#xe6bf;</div>
267 |                 </li>
268 |             
269 |                 <li>
270 |                 <i class="icon iconfont">&#xe6c0;</i>
271 |                     <div class="name">attachment</div>
272 |                     <div class="code">&amp;#xe6c0;</div>
273 |                 </li>
274 |             
275 |                 <li>
276 |                 <i class="icon iconfont">&#xe6c3;</i>
277 |                     <div class="name">3column</div>
278 |                     <div class="code">&amp;#xe6c3;</div>
279 |                 </li>
280 |             
281 |                 <li>
282 |                 <i class="icon iconfont">&#xe6c4;</i>
283 |                     <div class="name">4column</div>
284 |                     <div class="code">&amp;#xe6c4;</div>
285 |                 </li>
286 |             
287 |                 <li>
288 |                 <i class="icon iconfont">&#xe6c5;</i>
289 |                     <div class="name">discount</div>
290 |                     <div class="code">&amp;#xe6c5;</div>
291 |                 </li>
292 |             
293 |                 <li>
294 |                 <i class="icon iconfont">&#xe6c7;</i>
295 |                     <div class="name">service</div>
296 |                     <div class="code">&amp;#xe6c7;</div>
297 |                 </li>
298 |             
299 |                 <li>
300 |                 <i class="icon iconfont">&#xe6c9;</i>
301 |                     <div class="name">print</div>
302 |                     <div class="code">&amp;#xe6c9;</div>
303 |                 </li>
304 |             
305 |                 <li>
306 |                 <i class="icon iconfont">&#xe6cb;</i>
307 |                     <div class="name">box</div>
308 |                     <div class="code">&amp;#xe6cb;</div>
309 |                 </li>
310 |             
311 |                 <li>
312 |                 <i class="icon iconfont">&#xe6ce;</i>
313 |                     <div class="name">process</div>
314 |                     <div class="code">&amp;#xe6ce;</div>
315 |                 </li>
316 |             
317 |                 <li>
318 |                 <i class="icon iconfont">&#xe6d1;</i>
319 |                     <div class="name">bags</div>
320 |                     <div class="code">&amp;#xe6d1;</div>
321 |                 </li>
322 |             
323 |                 <li>
324 |                 <i class="icon iconfont">&#xe6d2;</i>
325 |                     <div class="name">beauty</div>
326 |                     <div class="code">&amp;#xe6d2;</div>
327 |                 </li>
328 |             
329 |                 <li>
330 |                 <i class="icon iconfont">&#xe6d4;</i>
331 |                     <div class="name">electrical</div>
332 |                     <div class="code">&amp;#xe6d4;</div>
333 |                 </li>
334 |             
335 |                 <li>
336 |                 <i class="icon iconfont">&#xe6da;</i>
337 |                     <div class="name">electronics</div>
338 |                     <div class="code">&amp;#xe6da;</div>
339 |                 </li>
340 |             
341 |                 <li>
342 |                 <i class="icon iconfont">&#xe6db;</i>
343 |                     <div class="name">gifts</div>
344 |                     <div class="code">&amp;#xe6db;</div>
345 |                 </li>
346 |             
347 |                 <li>
348 |                 <i class="icon iconfont">&#xe6dc;</i>
349 |                     <div class="name">apparel</div>
350 |                     <div class="code">&amp;#xe6dc;</div>
351 |                 </li>
352 |             
353 |                 <li>
354 |                 <i class="icon iconfont">&#xe6e9;</i>
355 |                     <div class="name">atm-away</div>
356 |                     <div class="code">&amp;#xe6e9;</div>
357 |                 </li>
358 |             
359 |                 <li>
360 |                 <i class="icon iconfont">&#xe6eb;</i>
361 |                     <div class="name">rfq</div>
362 |                     <div class="code">&amp;#xe6eb;</div>
363 |                 </li>
364 |             
365 |                 <li>
366 |                 <i class="icon iconfont">&#xe6ec;</i>
367 |                     <div class="name">scanning</div>
368 |                     <div class="code">&amp;#xe6ec;</div>
369 |                 </li>
370 |             
371 |                 <li>
372 |                 <i class="icon iconfont">&#xe6f1;</i>
373 |                     <div class="name">filter</div>
374 |                     <div class="code">&amp;#xe6f1;</div>
375 |                 </li>
376 |             
377 |                 <li>
378 |                 <i class="icon iconfont">&#xe6f2;</i>
379 |                     <div class="name">pin</div>
380 |                     <div class="code">&amp;#xe6f2;</div>
381 |                 </li>
382 |             
383 |                 <li>
384 |                 <i class="icon iconfont">&#xe6f3;</i>
385 |                     <div class="name">history</div>
386 |                     <div class="code">&amp;#xe6f3;</div>
387 |                 </li>
388 |             
389 |                 <li>
390 |                 <i class="icon iconfont">&#xe6f4;</i>
391 |                     <div class="name">product-features</div>
392 |                     <div class="code">&amp;#xe6f4;</div>
393 |                 </li>
394 |             
395 |                 <li>
396 |                 <i class="icon iconfont">&#xe6f5;</i>
397 |                     <div class="name">supplier-features</div>
398 |                     <div class="code">&amp;#xe6f5;</div>
399 |                 </li>
400 |             
401 |                 <li>
402 |                 <i class="icon iconfont">&#xe6f6;</i>
403 |                     <div class="name">similar-product</div>
404 |                     <div class="code">&amp;#xe6f6;</div>
405 |                 </li>
406 |             
407 |                 <li>
408 |                 <i class="icon iconfont">&#xe6f7;</i>
409 |                     <div class="name">link</div>
410 |                     <div class="code">&amp;#xe6f7;</div>
411 |                 </li>
412 |             
413 |                 <li>
414 |                 <i class="icon iconfont">&#xe6f8;</i>
415 |                     <div class="name">cut</div>
416 |                     <div class="code">&amp;#xe6f8;</div>
417 |                 </li>
418 |             
419 |                 <li>
420 |                 <i class="icon iconfont">&#xe6fa;</i>
421 |                     <div class="name">nav-list</div>
422 |                     <div class="code">&amp;#xe6fa;</div>
423 |                 </li>
424 |             
425 |                 <li>
426 |                 <i class="icon iconfont">&#xe6fb;</i>
427 |                     <div class="name">image-text</div>
428 |                     <div class="code">&amp;#xe6fb;</div>
429 |                 </li>
430 |             
431 |                 <li>
432 |                 <i class="icon iconfont">&#xe6fc;</i>
433 |                     <div class="name">text</div>
434 |                     <div class="code">&amp;#xe6fc;</div>
435 |                 </li>
436 |             
437 |                 <li>
438 |                 <i class="icon iconfont">&#xe6fd;</i>
439 |                     <div class="name">move</div>
440 |                     <div class="code">&amp;#xe6fd;</div>
441 |                 </li>
442 |             
443 |                 <li>
444 |                 <i class="icon iconfont">&#xe6fe;</i>
445 |                     <div class="name">subtract</div>
446 |                     <div class="code">&amp;#xe6fe;</div>
447 |                 </li>
448 |             
449 |                 <li>
450 |                 <i class="icon iconfont">&#xe702;</i>
451 |                     <div class="name">dollar</div>
452 |                     <div class="code">&amp;#xe702;</div>
453 |                 </li>
454 |             
455 |                 <li>
456 |                 <i class="icon iconfont">&#xe704;</i>
457 |                     <div class="name">raw</div>
458 |                     <div class="code">&amp;#xe704;</div>
459 |                 </li>
460 |             
461 |                 <li>
462 |                 <i class="icon iconfont">&#xe705;</i>
463 |                     <div class="name">office</div>
464 |                     <div class="code">&amp;#xe705;</div>
465 |                 </li>
466 |             
467 |                 <li>
468 |                 <i class="icon iconfont">&#xe707;</i>
469 |                     <div class="name">agriculture</div>
470 |                     <div class="code">&amp;#xe707;</div>
471 |                 </li>
472 |             
473 |                 <li>
474 |                 <i class="icon iconfont">&#xe709;</i>
475 |                     <div class="name">machinery</div>
476 |                     <div class="code">&amp;#xe709;</div>
477 |                 </li>
478 |             
479 |                 <li>
480 |                 <i class="icon iconfont">&#xe70a;</i>
481 |                     <div class="name">assessed-Badge</div>
482 |                     <div class="code">&amp;#xe70a;</div>
483 |                 </li>
484 |             
485 |                 <li>
486 |                 <i class="icon iconfont">&#xe70b;</i>
487 |                     <div class="name">personal-center</div>
488 |                     <div class="code">&amp;#xe70b;</div>
489 |                 </li>
490 |             
491 |                 <li>
492 |                 <i class="icon iconfont">&#xe70c;</i>
493 |                     <div class="name">integral</div>
494 |                     <div class="code">&amp;#xe70c;</div>
495 |                 </li>
496 |             
497 |                 <li>
498 |                 <i class="icon iconfont">&#xe70e;</i>
499 |                     <div class="name">operation</div>
500 |                     <div class="code">&amp;#xe70e;</div>
501 |                 </li>
502 |             
503 |                 <li>
504 |                 <i class="icon iconfont">&#xe713;</i>
505 |                     <div class="name">remind</div>
506 |                     <div class="code">&amp;#xe713;</div>
507 |                 </li>
508 |             
509 |                 <li>
510 |                 <i class="icon iconfont">&#xe714;</i>
511 |                     <div class="name">download</div>
512 |                     <div class="code">&amp;#xe714;</div>
513 |                 </li>
514 |             
515 |                 <li>
516 |                 <i class="icon iconfont">&#xe715;</i>
517 |                     <div class="name">map</div>
518 |                     <div class="code">&amp;#xe715;</div>
519 |                 </li>
520 |             
521 |                 <li>
522 |                 <i class="icon iconfont">&#xe717;</i>
523 |                     <div class="name">good</div>
524 |                     <div class="code">&amp;#xe717;</div>
525 |                 </li>
526 |             
527 |                 <li>
528 |                 <i class="icon iconfont">&#xe718;</i>
529 |                     <div class="name">skip</div>
530 |                     <div class="code">&amp;#xe718;</div>
531 |                 </li>
532 |             
533 |                 <li>
534 |                 <i class="icon iconfont">&#xe719;</i>
535 |                     <div class="name">play</div>
536 |                     <div class="code">&amp;#xe719;</div>
537 |                 </li>
538 |             
539 |                 <li>
540 |                 <i class="icon iconfont">&#xe71a;</i>
541 |                     <div class="name">stop</div>
542 |                     <div class="code">&amp;#xe71a;</div>
543 |                 </li>
544 |             
545 |                 <li>
546 |                 <i class="icon iconfont">&#xe71b;</i>
547 |                     <div class="name">compass</div>
548 |                     <div class="code">&amp;#xe71b;</div>
549 |                 </li>
550 |             
551 |                 <li>
552 |                 <i class="icon iconfont">&#xe71c;</i>
553 |                     <div class="name">security</div>
554 |                     <div class="code">&amp;#xe71c;</div>
555 |                 </li>
556 |             
557 |                 <li>
558 |                 <i class="icon iconfont">&#xe71d;</i>
559 |                     <div class="name">share</div>
560 |                     <div class="code">&amp;#xe71d;</div>
561 |                 </li>
562 |             
563 |                 <li>
564 |                 <i class="icon iconfont">&#xe722;</i>
565 |                     <div class="name">store</div>
566 |                     <div class="code">&amp;#xe722;</div>
567 |                 </li>
568 |             
569 |                 <li>
570 |                 <i class="icon iconfont">&#xe724;</i>
571 |                     <div class="name">rejected-order</div>
572 |                     <div class="code">&amp;#xe724;</div>
573 |                 </li>
574 |             
575 |                 <li>
576 |                 <i class="icon iconfont">&#xe725;</i>
577 |                     <div class="name">phone</div>
578 |                     <div class="code">&amp;#xe725;</div>
579 |                 </li>
580 |             
581 |                 <li>
582 |                 <i class="icon iconfont">&#xe726;</i>
583 |                     <div class="name">bussiness-man</div>
584 |                     <div class="code">&amp;#xe726;</div>
585 |                 </li>
586 |             
587 |                 <li>
588 |                 <i class="icon iconfont">&#xe72a;</i>
589 |                     <div class="name">Mobile-phone</div>
590 |                     <div class="code">&amp;#xe72a;</div>
591 |                 </li>
592 |             
593 |                 <li>
594 |                 <i class="icon iconfont">&#xe72d;</i>
595 |                     <div class="name">email-filling</div>
596 |                     <div class="code">&amp;#xe72d;</div>
597 |                 </li>
598 |             
599 |                 <li>
600 |                 <i class="icon iconfont">&#xe730;</i>
601 |                     <div class="name">favorites-filling</div>
602 |                     <div class="code">&amp;#xe730;</div>
603 |                 </li>
604 |             
605 |                 <li>
606 |                 <i class="icon iconfont">&#xe732;</i>
607 |                     <div class="name">account-filling</div>
608 |                     <div class="code">&amp;#xe732;</div>
609 |                 </li>
610 |             
611 |                 <li>
612 |                 <i class="icon iconfont">&#xe736;</i>
613 |                     <div class="name">credit-level-filling</div>
614 |                     <div class="code">&amp;#xe736;</div>
615 |                 </li>
616 |             
617 |                 <li>
618 |                 <i class="icon iconfont">&#xe73f;</i>
619 |                     <div class="name">exl</div>
620 |                     <div class="code">&amp;#xe73f;</div>
621 |                 </li>
622 |             
623 |                 <li>
624 |                 <i class="icon iconfont">&#xe740;</i>
625 |                     <div class="name">pdf</div>
626 |                     <div class="code">&amp;#xe740;</div>
627 |                 </li>
628 |             
629 |                 <li>
630 |                 <i class="icon iconfont">&#xe741;</i>
631 |                     <div class="name">zip</div>
632 |                     <div class="code">&amp;#xe741;</div>
633 |                 </li>
634 |             
635 |                 <li>
636 |                 <i class="icon iconfont">&#xe743;</i>
637 |                     <div class="name">sorting</div>
638 |                     <div class="code">&amp;#xe743;</div>
639 |                 </li>
640 |             
641 |                 <li>
642 |                 <i class="icon iconfont">&#xe744;</i>
643 |                     <div class="name">copy</div>
644 |                     <div class="code">&amp;#xe744;</div>
645 |                 </li>
646 |             
647 |                 <li>
648 |                 <i class="icon iconfont">&#xe756;</i>
649 |                     <div class="name">hot</div>
650 |                     <div class="code">&amp;#xe756;</div>
651 |                 </li>
652 |             
653 |                 <li>
654 |                 <i class="icon iconfont">&#xe758;</i>
655 |                     <div class="name">trade</div>
656 |                     <div class="code">&amp;#xe758;</div>
657 |                 </li>
658 |             
659 |                 <li>
660 |                 <i class="icon iconfont">&#xe75e;</i>
661 |                     <div class="name">component</div>
662 |                     <div class="code">&amp;#xe75e;</div>
663 |                 </li>
664 |             
665 |                 <li>
666 |                 <i class="icon iconfont">&#xe760;</i>
667 |                     <div class="name">color</div>
668 |                     <div class="code">&amp;#xe760;</div>
669 |                 </li>
670 |             
671 |                 <li>
672 |                 <i class="icon iconfont">&#xe7cd;</i>
673 |                     <div class="name">color-filling</div>
674 |                     <div class="code">&amp;#xe7cd;</div>
675 |                 </li>
676 |             
677 |                 <li>
678 |                 <i class="icon iconfont">&#xe7ce;</i>
679 |                     <div class="name">favorites</div>
680 |                     <div class="code">&amp;#xe7ce;</div>
681 |                 </li>
682 |             
683 |                 <li>
684 |                 <i class="icon iconfont">&#xe803;</i>
685 |                     <div class="name">RFQ</div>
686 |                     <div class="code">&amp;#xe803;</div>
687 |                 </li>
688 |             
689 |                 <li>
690 |                 <i class="icon iconfont">&#xe806;</i>
691 |                     <div class="name">original-image</div>
692 |                     <div class="code">&amp;#xe806;</div>
693 |                 </li>
694 |             
695 |                 <li>
696 |                 <i class="icon iconfont">&#xe811;</i>
697 |                     <div class="name">logistic</div>
698 |                     <div class="code">&amp;#xe811;</div>
699 |                 </li>
700 |             
701 |                 <li>
702 |                 <i class="icon iconfont">&#xe820;</i>
703 |                     <div class="name">video</div>
704 |                     <div class="code">&amp;#xe820;</div>
705 |                 </li>
706 |             
707 |         </ul>
708 |         <h2 id="unicode-">unicode引用</h2>
709 |         <hr>
710 | 
711 |         <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
712 |         <ul>
713 |         <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
714 |         <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
715 |         <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
716 |         </ul>
717 |         <blockquote>
718 |         <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
719 |         </blockquote>
720 |         <p>unicode使用步骤如下：</p>
721 |         <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
722 |         <pre><code class="lang-js hljs javascript">@font-face {
723 |   font-family: <span class="hljs-string">'iconfont'</span>;
724 |   src: url(<span class="hljs-string">'iconfont.eot'</span>);
725 |   src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
726 |   url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
727 |   url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
728 |   url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
729 | }
730 | </code></pre>
731 |         <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
732 |         <pre><code class="lang-js hljs javascript">.iconfont{
733 |   font-family:<span class="hljs-string">"iconfont"</span> !important;
734 |   font-size:<span class="hljs-number">16</span>px;font-style:normal;
735 |   -webkit-font-smoothing: antialiased;
736 |   -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
737 |   -moz-osx-font-smoothing: grayscale;
738 | }
739 | </code></pre>
740 |         <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
741 |         <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
742 | 
743 |         <blockquote>
744 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
745 |         </blockquote>
746 |     </div>
747 | 
748 | 
749 | </body>
750 | </html>
751 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.css:
--------------------------------------------------------------------------------
  1 | 
  2 | @font-face {font-family: "iconfont";
  3 |   src: url('iconfont.eot?t=1493196342498'); /* IE9*/
  4 |   src: url('iconfont.eot?t=1493196342498#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5 |   url('iconfont.woff?t=1493196342498') format('woff'), /* chrome, firefox */
  6 |   url('iconfont.ttf?t=1493196342498') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  7 |   url('iconfont.svg?t=1493196342498#iconfont') format('svg'); /* iOS 4.1- */
  8 | }
  9 | 
 10 | .iconfont {
 11 |   font-family:"iconfont" !important;
 12 |   font-size:16px;
 13 |   font-style:normal;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | .icon-all:before { content: "\e696"; }
 19 | 
 20 | .icon-back:before { content: "\e697"; }
 21 | 
 22 | .icon-cart:before { content: "\e698"; }
 23 | 
 24 | .icon-category:before { content: "\e699"; }
 25 | 
 26 | .icon-close:before { content: "\e69a"; }
 27 | 
 28 | .icon-comments:before { content: "\e69b"; }
 29 | 
 30 | .icon-cry:before { content: "\e69c"; }
 31 | 
 32 | .icon-delete:before { content: "\e69d"; }
 33 | 
 34 | .icon-edit:before { content: "\e69e"; }
 35 | 
 36 | .icon-email:before { content: "\e69f"; }
 37 | 
 38 | .icon-favorite:before { content: "\e6a0"; }
 39 | 
 40 | .icon-folder:before { content: "\e6a1"; }
 41 | 
 42 | .icon-form:before { content: "\e6a2"; }
 43 | 
 44 | .icon-help:before { content: "\e6a3"; }
 45 | 
 46 | .icon-information:before { content: "\e6a4"; }
 47 | 
 48 | .icon-less:before { content: "\e6a5"; }
 49 | 
 50 | .icon-moreunfold:before { content: "\e6a6"; }
 51 | 
 52 | .icon-more:before { content: "\e6a7"; }
 53 | 
 54 | .icon-pic:before { content: "\e6a8"; }
 55 | 
 56 | .icon-qrcode:before { content: "\e6a9"; }
 57 | 
 58 | .icon-refresh:before { content: "\e6aa"; }
 59 | 
 60 | .icon-rfq:before { content: "\e6ab"; }
 61 | 
 62 | .icon-search:before { content: "\e6ac"; }
 63 | 
 64 | .icon-selected:before { content: "\e6ad"; }
 65 | 
 66 | .icon-set:before { content: "\e6ae"; }
 67 | 
 68 | .icon-smile:before { content: "\e6af"; }
 69 | 
 70 | .icon-success:before { content: "\e6b1"; }
 71 | 
 72 | .icon-survey:before { content: "\e6b2"; }
 73 | 
 74 | .icon-training:before { content: "\e6b3"; }
 75 | 
 76 | .icon-viewgallery:before { content: "\e6b4"; }
 77 | 
 78 | .icon-viewlist:before { content: "\e6b5"; }
 79 | 
 80 | .icon-warning:before { content: "\e6b6"; }
 81 | 
 82 | .icon-wrong:before { content: "\e6b7"; }
 83 | 
 84 | .icon-account:before { content: "\e6b8"; }
 85 | 
 86 | .icon-add:before { content: "\e6b9"; }
 87 | 
 88 | .icon-atm:before { content: "\e6ba"; }
 89 | 
 90 | .icon-clock:before { content: "\e6bb"; }
 91 | 
 92 | .icon-remind:before { content: "\e6bc"; }
 93 | 
 94 | .icon-calendar:before { content: "\e6bf"; }
 95 | 
 96 | .icon-attachment:before { content: "\e6c0"; }
 97 | 
 98 | .icon-3column:before { content: "\e6c3"; }
 99 | 
100 | .icon-4column:before { content: "\e6c4"; }
101 | 
102 | .icon-discount:before { content: "\e6c5"; }
103 | 
104 | .icon-service:before { content: "\e6c7"; }
105 | 
106 | .icon-print:before { content: "\e6c9"; }
107 | 
108 | .icon-box:before { content: "\e6cb"; }
109 | 
110 | .icon-process:before { content: "\e6ce"; }
111 | 
112 | .icon-bags:before { content: "\e6d1"; }
113 | 
114 | .icon-beauty:before { content: "\e6d2"; }
115 | 
116 | .icon-electrical:before { content: "\e6d4"; }
117 | 
118 | .icon-electronics:before { content: "\e6da"; }
119 | 
120 | .icon-gifts:before { content: "\e6db"; }
121 | 
122 | .icon-apparel:before { content: "\e6dc"; }
123 | 
124 | .icon-atmaway:before { content: "\e6e9"; }
125 | 
126 | .icon-rfq1:before { content: "\e6eb"; }
127 | 
128 | .icon-scanning:before { content: "\e6ec"; }
129 | 
130 | .icon-filter:before { content: "\e6f1"; }
131 | 
132 | .icon-pin:before { content: "\e6f2"; }
133 | 
134 | .icon-history:before { content: "\e6f3"; }
135 | 
136 | .icon-productfeatures:before { content: "\e6f4"; }
137 | 
138 | .icon-supplierfeatures:before { content: "\e6f5"; }
139 | 
140 | .icon-similarproduct:before { content: "\e6f6"; }
141 | 
142 | .icon-link:before { content: "\e6f7"; }
143 | 
144 | .icon-cut:before { content: "\e6f8"; }
145 | 
146 | .icon-navlist:before { content: "\e6fa"; }
147 | 
148 | .icon-imagetext:before { content: "\e6fb"; }
149 | 
150 | .icon-text:before { content: "\e6fc"; }
151 | 
152 | .icon-move:before { content: "\e6fd"; }
153 | 
154 | .icon-subtract:before { content: "\e6fe"; }
155 | 
156 | .icon-dollar:before { content: "\e702"; }
157 | 
158 | .icon-raw:before { content: "\e704"; }
159 | 
160 | .icon-office:before { content: "\e705"; }
161 | 
162 | .icon-agriculture:before { content: "\e707"; }
163 | 
164 | .icon-machinery:before { content: "\e709"; }
165 | 
166 | .icon-assessedbadge:before { content: "\e70a"; }
167 | 
168 | .icon-gerenzhongxin:before { content: "\e70b"; }
169 | 
170 | .icon-jifen:before { content: "\e70c"; }
171 | 
172 | .icon-operation:before { content: "\e70e"; }
173 | 
174 | .icon-remind1:before { content: "\e713"; }
175 | 
176 | .icon-icondownload:before { content: "\e714"; }
177 | 
178 | .icon-map:before { content: "\e715"; }
179 | 
180 | .icon-good:before { content: "\e717"; }
181 | 
182 | .icon-skip:before { content: "\e718"; }
183 | 
184 | .icon-iconfontplay2:before { content: "\e719"; }
185 | 
186 | .icon-iconfontstop:before { content: "\e71a"; }
187 | 
188 | .icon-compass:before { content: "\e71b"; }
189 | 
190 | .icon-security:before { content: "\e71c"; }
191 | 
192 | .icon-share:before { content: "\e71d"; }
193 | 
194 | .icon-store:before { content: "\e722"; }
195 | 
196 | .icon-rejectedorder:before { content: "\e724"; }
197 | 
198 | .icon-phone:before { content: "\e725"; }
199 | 
200 | .icon-bussinessman:before { content: "\e726"; }
201 | 
202 | .icon-mobilephone:before { content: "\e72a"; }
203 | 
204 | .icon-emailfilling:before { content: "\e72d"; }
205 | 
206 | .icon-favoritesfilling:before { content: "\e730"; }
207 | 
208 | .icon-accountfilling:before { content: "\e732"; }
209 | 
210 | .icon-creditlevelfilling:before { content: "\e736"; }
211 | 
212 | .icon-exl:before { content: "\e73f"; }
213 | 
214 | .icon-pdf:before { content: "\e740"; }
215 | 
216 | .icon-zip:before { content: "\e741"; }
217 | 
218 | .icon-sorting:before { content: "\e743"; }
219 | 
220 | .icon-copy:before { content: "\e744"; }
221 | 
222 | .icon-hot:before { content: "\e756"; }
223 | 
224 | .icon-trade:before { content: "\e758"; }
225 | 
226 | .icon-component:before { content: "\e75e"; }
227 | 
228 | .icon-color:before { content: "\e760"; }
229 | 
230 | .icon-color-filling:before { content: "\e7cd"; }
231 | 
232 | .icon-favorites:before { content: "\e7ce"; }
233 | 
234 | .icon-RFQ:before { content: "\e803"; }
235 | 
236 | .icon-originalimage:before { content: "\e806"; }
237 | 
238 | .icon-logistic:before { content: "\e811"; }
239 | 
240 | .icon-video:before { content: "\e820"; }
241 | 
242 | 


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OnebugIS/vue-project/27576b43e8905c7eb2f98838a98a977aa434b051/src/assets/iconfont/iconfont.eot


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OnebugIS/vue-project/27576b43e8905c7eb2f98838a98a977aa434b051/src/assets/iconfont/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OnebugIS/vue-project/27576b43e8905c7eb2f98838a98a977aa434b051/src/assets/iconfont/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OnebugIS/vue-project/27576b43e8905c7eb2f98838a98a977aa434b051/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <div>
 3 |    	
 4 |    	 <el-radio v-model="radio" label="1">备选项1</el-radio>
 5 |   	 <el-radio v-model="radio" label="2">备选项2</el-radio>
 6 | 
 7 |   	 <el-switch
 8 | 	  v-model="value2"
 9 | 	  active-color="#13ce66"
10 | 	  inactive-color="#ff4949">
11 | 	</el-switch>
12 | 
13 | 	<el-carousel :interval="4000" type="card" height="200px">
14 | 	    <el-carousel-item v-for="item in 6" :key="item">
15 | 	      <h3>{{ item }}</h3>
16 | 	    </el-carousel-item>
17 |   	</el-carousel>
18 | 
19 | 
20 |     <mt-button type="default">default</mt-button>
21 | <mt-button type="primary">primary</mt-button>
22 | <mt-button type="danger">danger</mt-button>
23 | 
24 |    </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 | 
30 | 
31 |   data () {
32 |     return {
33 |     	radio:"2",
34 |     	value2: false
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style lang="css" scoped>
41 |  .el-carousel__item h3 {
42 |     color: #475669;
43 |     font-size: 14px;
44 |     opacity: 0.75;
45 |     line-height: 200px;
46 |     margin: 0;
47 |   }
48 |   
49 |   .el-carousel__item:nth-child(2n) {
50 |     background-color: #99a9bf;
51 |   }
52 |   
53 |   .el-carousel__item:nth-child(2n+1) {
54 |     background-color: #d3dce6;
55 |   }
56 | </style>


--------------------------------------------------------------------------------
/src/components/comingsoon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<ul
 4 |     >
 5 | 			<li v-for="data in list" >
 6 | 				<img :src="data.poster.origin"/>
 7 | 				<div>
 8 | 					<h3>{{data.name}}</h3>
 9 | 					<p>{{data.intro}}</p>
10 | 				</div>
11 | 			</li>
12 | 		</ul>
13 | 	</div>
14 | </template>
15 | 
16 | <script>
17 | import {mapGetters } from "vuex";
18 | export default {
19 | 
20 |   name: 'comingsoon',
21 | 
22 |   data () {
23 |     return {
24 | 
25 |     }
26 |   },
27 | 
28 |   mounted(){
29 |   	//dispath 消息 给action 
30 |     
31 |     if(!this.$store.state.comingsoonlist){
32 |       this.$store.dispatch("getComingSoon","/v4/api/film/coming-soon?page=1&count=7");
33 |     }
34 |   	
35 |   },
36 | 
37 |   computed:{
38 |   	// comingsoonList:function(){
39 |   	// 	return this.$store.state.comingsoonlist?this.$store.state.comingsoonlist.data.films:[]
40 |   	// },
41 |    //      total:function(){
42 |    //    return this.$store.state.comingsoonlist?this.$store.state.comingsoonlist.data.films:
43 |    //  }
44 |     ...mapGetters(["list","total"])
45 |   }
46 | }
47 | </script>
48 | 
49 | <style lang="scss" scoped>
50 |   ul{
51 |     li{
52 |       list-style: none;
53 |       padding:10px;
54 |       overflow:hidden;
55 |       img{
56 |         float:left;
57 |         width: 100px;
58 |       }
59 | 
60 |       div{
61 |         // float:left;
62 |       }
63 |     }
64 |   }
65 | </style>


--------------------------------------------------------------------------------
/src/components/common/navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | 	<nav>
 4 | 		<div class="left">
 5 | 			<slot></slot>
 6 | 			<span>{{title}}</span>
 7 | 		</div>
 8 | 		<div class="right">
 9 | 			<span>杭州</span>
10 | 			<i class="iconfont icon-account"></i>
11 | 		</div>		
12 | 	</nav>
13 | </template>
14 | 
15 | <script>
16 | import { mapState } from "vuex";
17 | export default {
18 | 
19 |   name: 'navbar',
20 | 
21 |   data () {
22 |     return {
23 | 
24 |     }
25 |   },
26 | 
27 |   computed:{
28 | 
29 |     // title(){
30 |     //   return this.$store.state.title
31 |     // }
32 |     ...mapState(["title"]),
33 | 
34 |     getKerwinName:function(){
35 |       return ""
36 |     }
37 |   }
38 | 
39 | }
40 | </script>
41 | <style src="@/assets/iconfont/iconfont.css"></style>
42 | <style lang="scss" scoped>
43 | 
44 |    nav{
45 |    	background-color: #282828;
46 |    	position: fixed;
47 |    	top:0px;
48 |    	left:0px;
49 |    	width: 100%;
50 |    	height: 50px;
51 |    	line-height: 50px;
52 |    	color:white;
53 |     z-index:2;
54 |    		.left{
55 |    			float: left;
56 |    		}
57 | 
58 |    		.right{
59 |    			float: right
60 |    		}
61 | 
62 |    }
63 | </style>


--------------------------------------------------------------------------------
/src/components/common/sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="bounce" >
 3 | 	<aside v-show="value">
 4 | 		<ul @click="handleClick()">
 5 | 			<router-link to="/home" tag="li" activeClass="kerwinactive">home</router-link>
 6 |       		<router-link to="/film" tag="li" activeClass="kerwinactive">film</router-link>
 7 | 
 8 |       		<router-link to="/card" tag="li" activeClass="kerwinactive">card</router-link>
 9 | 		</ul>
10 | 	</aside>
11 |   </transition>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 | 
17 |   name: 'sidebar',
18 | 
19 |   data () {
20 |     return {
21 | 
22 |     }
23 |   },
24 |   props:["value"], 
25 | 
26 |   methods:{
27 |   	handleClick(){
28 |   		this.$emit("input",false);
29 |   	}
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="scss" scoped>
35 | 
36 |    aside{
37 |    		position:fixed;
38 |    		left:0px;
39 |    		top:50px;
40 |    		width: 50%;
41 |    		height: 100%;
42 |    		background-color: #282828;
43 |    		color:white;
44 |       z-index:23;
45 |    		ul{
46 |    			li{
47 |    				list-style: none;
48 |    				padding: 10px;
49 |    			}
50 |    		}
51 |    }
52 | 
53 |     .bounce-enter-active {
54 |       animation: bounce-in .5s;
55 |     }
56 |     .bounce-leave-active {
57 |       animation: bounce-in .5s reverse;
58 |     }
59 |     @keyframes bounce-in {
60 |       0%{
61 |         transform: translateX(-100%);
62 |         opacity: 0;
63 |       }
64 | 
65 |       100%{
66 |         transform: translateX(0px);
67 |         opacity: 1;
68 |       }
69 |     }
70 | 
71 |     .kerwinactive{
72 |       background-color:red;
73 |     }
74 | </style>


--------------------------------------------------------------------------------
/src/components/detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div v-if="filminfo">
 3 | 		<img :src="filminfo.cover.origin"/>
 4 | 		<h2>{{filminfo.name}}</h2>
 5 | 		<p>{{filminfo.synopsis}}</p>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script>
10 | import axios from "axios";
11 | export default {
12 | 
13 |   name: 'detail',
14 | 
15 |   data () {
16 |     return {
17 |     	filminfo:null
18 |     }
19 |   },
20 |   mounted(){
21 |   	//获取id 值
22 |   	//第一种 获取id 的方式
23 |   	//console.log(this.$route.query.id);
24 | 
25 |   	//第二种 获取id 方法
26 |   		console.log(this.$route.params.kerwinid);
27 | 
28 |   	 axios.get(`/v4/api/film/${this.$route.params.kerwinid}?__t=1510297476746`).then(res=>{
29 |   	 	console.log(res.data);
30 |   	 	this.filminfo = res.data.data.film
31 | 
32 |         // 提交数据到mution 中
33 |         this.$store.commit("kerwinchangetitle",this.filminfo.name);
34 |   	 })
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 | 
41 |   div{
42 |   	img{
43 |   		width: 100%;
44 |   	}
45 |   }
46 | </style>


--------------------------------------------------------------------------------
/src/components/film.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <div>
 3 |    	
 4 |    	  <div class="header">
 5 |    	  	<ul>
 6 |    	  	    <!-- 声明式跳转 -->
 7 |    	  		<router-link tag="li" to="/film/nowplaying" activeClass="active">正在热映</router-link>
 8 |    	  		<router-link tag="li" to="/film/comingsoon" activeClass="active">即将上映</router-link>
 9 |    	  	</ul>
10 |    	  </div>
11 |    	  <router-view></router-view>
12 |    </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 | 
18 | 
19 |   data () {
20 |     return {
21 | 
22 |     }
23 |   },
24 | 
25 |   mounted(){
26 |   	 this.$store.commit("kerwinchangetitle","卖座电影");
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 | 	.header{
33 | 		ul{
34 | 			display: flex;
35 | 
36 | 			li{
37 | 				list-style: none;
38 | 				flex:1;
39 | 				height: 40px;
40 | 				line-height: 40px;
41 | 				text-align: center;
42 | 			}
43 | 		}
44 | 	}
45 | 
46 | 	.active{
47 | 		background: red;
48 | 	}
49 | </style>


--------------------------------------------------------------------------------
/src/components/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <div>
 3 |    	  <swipe class="my-swipe">
 4 | 		  <swipe-item v-for="data in looplist">
 5 | 		  	<img :src="data.imageUrl"/>
 6 | 		  </swipe-item>
 7 | 		  
 8 | 		</swipe>
 9 | 
10 | 		<div class="nowplaying">
11 | 			<ul>
12 | 				<li v-for="data in datalist">
13 | 					<img :src="data.cover.origin"/>
14 | 					<h3>{{data.name}}</h3>
15 | 					<p>{{data.intro}}</p>
16 | 				</li>
17 | 			</ul>
18 | 		</div>
19 |    </div>
20 | </template>
21 | 
22 | <script>
23 | import "vue-swipe/dist/vue-swipe.css"; //css 模块化 导入
24 | import { Swipe, SwipeItem } from 'vue-swipe';
25 | import { Indicator } from 'mint-ui';
26 | 
27 | export default {
28 | 
29 |   name: 'home',
30 | 
31 |   data () {
32 |     return {
33 |     	looplist:[],
34 |     	datalist:[]
35 |     }
36 |   },
37 | 
38 |   mounted(){
39 |     Indicator.open('Loading...');
40 | 
41 | 
42 |   	fetch("/v4/api/billboard/home?__t=1510282324021").then(res=>res.json()).then(res=>{
43 |   		// console.log(res);
44 |   		this.looplist = res.data.billboards;
45 | 
46 |       Indicator.close();
47 | 
48 |   	})
49 | 
50 |  
51 |   	fetch("/v4/api/film/now-playing?__t=1510282324084&page=1&count=5").then(res=>res.json()).then(res=>{
52 |   		console.log(res);
53 |   		this.datalist  =res.data.films
54 |   	})
55 | 
56 |     //Promise.all([]).then(res=>{
57 |     //})
58 |   },
59 | 
60 |   components:{
61 |   	swipe:Swipe,
62 |   	"swipe-item":SwipeItem
63 |   }
64 | }
65 | </script>
66 | 
67 | <style lang="scss" scoped>
68 | .my-swipe {
69 |   height: 200px;
70 |   img{
71 |   	width: 100%;
72 |   }
73 | }
74 | .nowplaying{
75 | 	li{
76 | 		list-style: none;
77 | 		padding:10px;
78 | 		img{
79 | 			width:100%;
80 | 		}
81 | 	}
82 | }
83 | </style>


--------------------------------------------------------------------------------
/src/components/nowplaying.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<ul
  4 |     v-infinite-scroll="loadMore"
  5 |   infinite-scroll-disabled="loading"
  6 |   infinite-scroll-distance="0"
  7 |   infinite-scroll-immediate-check ="false"
  8 |     >
  9 | 			<li v-for="data in datalist" @click="handleClick(data.id)">
 10 | 				<img :src="data.poster.origin"/>
 11 | 				<div>
 12 | 					<h3>{{data.name}}</h3>
 13 | 					<p>{{data.intro}}</p>
 14 | 				</div>
 15 | 			</li>
 16 | 		</ul>
 17 | 
 18 |     <div>{{text}}</div>
 19 | 	</div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import axios from "axios";
 24 | import router from "@/router";
 25 | export default {
 26 | 
 27 |   name: 'nowplaying',
 28 | 
 29 |   data () {
 30 |     return {
 31 |     	datalist:[],
 32 |       loading:false, //控制无限滚动组件 是否禁用
 33 |       current:1,  //表示第几页数据
 34 |       total:0,
 35 |       text:"正在加载数据中..."
 36 |     }
 37 |   },
 38 | 
 39 |   mounted(){
 40 |   		// axios 是一个http 请求的库， 基于promsie 封装的
 41 |   		axios.get("/v4/api/film/now-playing",{
 42 |   			params:{
 43 |   				page:this.currrent,
 44 |   				count:7
 45 |   			}
 46 |   		}).then(res=>{
 47 |   			console.log(res.data);
 48 |   			this.datalist = res.data.data.films;
 49 |         this.total = res.data.data.page.total;
 50 |   		})
 51 | 
 52 |   		// axios.post("/",{
 53 |   		// 	name:"kerwin",
 54 |   		// 	age:100
 55 |   		// }).then(res=>{
 56 |   		// 	console.log(res)
 57 |   		// })
 58 |   },
 59 | 
 60 |   methods:{
 61 |   	handleClick(id){
 62 |   		//编程式跳转
 63 |   		// console.log(id);
 64 |   		//第一种方式 类似于 get 请求传参
 65 |   		// router.push(`/detail?id=${id}`);
 66 |   		// 第二种方式 
 67 |   		//router.push(`/detail/${id}`); // /detail/3928
 68 |   		router.push({name:"detail",params:{kerwinid:id}});
 69 |   	},
 70 | 
 71 |     loadMore(){
 72 |       console.log("到底部");
 73 | 
 74 |       this.current++;
 75 | 
 76 |       if(this.current>this.total){
 77 |         this.loading = true; //禁用滚动加载功能
 78 |         this.text="没有数据了";
 79 |         return ;
 80 |       }
 81 | 
 82 |       axios.get("/v4/api/film/now-playing",{
 83 |         params:{
 84 |           page:this.current,
 85 |           count:7
 86 |         }
 87 |       }).then(res=>{
 88 |         console.log(res.data);
 89 |         //es6 的数组展开与合并
 90 |         this.datalist = [...this.datalist,...res.data.data.films];
 91 |       })
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <style lang="scss" scoped>
 98 | 
 99 | 	ul{
100 | 		li{
101 | 			list-style: none;
102 | 			padding:10px;
103 | 			overflow:hidden;
104 | 			img{
105 | 				float:left;
106 | 				width: 100px;
107 | 			}
108 | 
109 | 			div{
110 | 				// float:left;
111 | 			}
112 | 		}
113 | 	}
114 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router' ;//路由配置模块
 6 | import ElementUI  from "element-ui";
 7 | import 'element-ui/lib/theme-chalk/index.css'
 8 | Vue.use(ElementUI);
 9 | 
10 | import MintUI from 'mint-ui'
11 | import 'mint-ui/lib/style.css'
12 | Vue.use(MintUI)
13 | 
14 | import store from "./store";
15 | 
16 | Vue.config.productionTip = false
17 | 
18 | /* eslint-disable no-new */
19 | new Vue({
20 |   el: "#app",
21 |   router,
22 |   store,
23 |   template: '<App/>',
24 |   components: { App }
25 |   // render: h => h(App)      
26 | })
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | // import HelloWorld from '@/components/HelloWorld'
 4 | import Home from "@/components/home"; //@ 是 src 文件夹的绝对路径 ，在webpack.base.conf.js
 5 | import Film from "@/components/film";
 6 | import Card from "@/components/card";
 7 | import Detail from "@/components/detail";
 8 | 
 9 | import Nowplaying from "@/components/nowplaying";
10 | import Comingsoon from "@/components/comingsoon";
11 | Vue.use(Router) //安装路由功能
12 | 
13 | export default new Router({
14 |   mode: "hash", // mode 支持两个值 一个hash ，一个history
15 |   routes: [
16 |     {
17 |     	path:"/home",
18 |     	component:Home
19 |     },
20 |     {
21 |     	path:"/film",
22 |     	component:Film,
23 |         children:[
24 |             {
25 |                 path:"nowplaying", // /film/nowplaying    
26 |                 component:Nowplaying
27 |             },
28 |             {
29 |                 path:"comingsoon",// /film/comingsoon  
30 |                 component:Comingsoon
31 |             },
32 |             {
33 |                 path:"/",
34 |                 redirect:"/film/nowplaying"
35 |             }
36 |         ]
37 |     },
38 |     {
39 |     	path:"/card",
40 |     	component:Card
41 |     },
42 | 
43 |     // {
44 |     //     path:"/detail",
45 |     //     component:Detail
46 |     // }, //第一种路由配置
47 |     {
48 |         path:"/detail/:kerwinid", //动态路由匹配
49 |         component:Detail,
50 |         name:"detail"
51 |     }, // 第二种 路由配置的写法
52 | 
53 | 
54 |     {
55 |     	path:"*",  //任何路径都会匹配到/home 组件中
56 |     	redirect:"/home"
57 |     }
58 | 
59 |   ]
60 | })
61 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import axios from "axios";
 4 | Vue.use(Vuex);
 5 | 
 6 | const KERWIN_CHANGE_TITLE = "kerwinchangetitle";
 7 | const COMING_SOON_MUTATION = "comingsoonMutation";
 8 | 
 9 | 
10 | const store = new Vuex.Store({
11 | 
12 | 	state:{
13 | 		title:"卖座电影111",
14 | 		comingsoonlist:null
15 | 	},
16 | 
17 | 
18 | 	getters:{
19 | 		list:function(state){
20 | 			return state.comingsoonlist?state.comingsoonlist.data.films:[];
21 | 		},
22 | 		total:function(state){
23 | 			return state.comingsoonlist?state.comingsoonlist.data.page.total:0;
24 | 		}
25 | 	},
26 | 
27 | 
28 | 	actions:{
29 | 			getComingSoon(store,payload){
30 | 				console.log("在vuex 请求数据");
31 | 
32 | 				axios.get(payload).then(res=>{
33 | 					console.log(res.data);
34 | 					store.commit("comingsoonMutation",res.data);
35 | 				})
36 | 			},
37 | 
38 | 			aaa:function(){
39 | 
40 | 			}
41 | 	},
42 | 
43 | 
44 | 	mutations:{
45 | 		[KERWIN_CHANGE_TITLE]:function(state,payload){
46 | 			console.log(payload);
47 | 			state.title= payload;
48 | 		},
49 | 
50 | 		[COMING_SOON_MUTATION]:function(state,payload){
51 | 			state.comingsoonlist= payload;
52 | 		}
53 | 	}
54 | 
55 | })
56 | 
57 | 
58 | export default store;
59 | 
60 | 
61 | //
62 | var name="kerwin"
63 | var obj = {
64 | 	[name]:"1111111"
65 | }
66 | 
67 | console.log(obj);
68 | 


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