├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── components
    │   ├── detail.vue
    │   ├── index.vue
    │   ├── login.vue
    │   ├── order.vue
    │   ├── orderDetail.vue
    │   ├── orderList.vue
    │   ├── pay.vue
    │   ├── paySuccess.vue
    │   ├── shoppingCart.vue
    │   └── vipCenter.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── vuex
    │   └── store.js
└── static
    ├── .gitkeep
    ├── css
        └── style.css
    ├── images
        ├── bodyBg.jpg
        ├── bodyBg2.jpg
        ├── bodyBg3.jpg
        ├── loading.gif
        ├── lst.JPG
        ├── s_03.jpg
        └── w_03.jpg
    └── site
        └── css
            ├── icon
                ├── demo.css
                ├── demo_fontclass.html
                ├── demo_symbol.html
                ├── demo_unicode.html
                ├── iconfont.css
                ├── iconfont.eot
                ├── iconfont.js
                ├── iconfont.svg
                ├── iconfont.ttf
                └── iconfont.woff
            └── style.css


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # shop
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## 构建步骤
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | git clone git@github.com:ShoutongLiu/shop.git
10 | cd shop
11 | npm install
12 | 
13 | # serve with hot reload at localhost:8080
14 | npm run dev
15 | 
16 | # build for production with minification
17 | npm run build
18 | 
19 | # build for production and view the bundle analyzer report
20 | npm run build --report
21 | ```
22 | 
23 | 
24 | 
25 | ## 项目结构
26 | 
27 | ```
28 | 
29 | │  index.html
30 | │  package.json   
31 | │  README.md
32 | │  
33 | ├─build      //webpack构建文件
34 | │      
35 | ├─config	//webpack配置文件
36 | │      
37 | ├─src
38 | │  │  App.vue	//入口文件
39 | │  │  main.js	
40 | │  │  
41 | │  ├─components  //组件文件
42 | │  │      
43 | │  ├─router		//路由文件
44 | │  │      
45 | │  └─vuex		//全局状态管理文件
46 | │          
47 | └─static	//静态文件
48 | ```
49 | 
50 | ## 实现功能
51 | 
52 | 1. 商品详情展示
53 | 2. 发表评论
54 | 3. 分页功能
55 | 4. 懒加载
56 | 5. 加入购物车
57 | 6. 购物车删除
58 | 7. 价格结算
59 | 8. 收货人信息校验
60 | 9. 订单提交
61 | 10. 订单列表
62 | 11. 订单支付
63 | 12. 订单签收
64 | 13. 登录,退出
65 | 
66 | 
67 | 
68 | ## 后续优化
69 | 
70 | 1. 界面美观
71 | 
72 | 2. 代码优化
73 | 
74 | 3. 新增其他模块
75 | 
76 |    ------
77 | 
78 |    顺手给个start激励一下!
79 | 


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


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


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


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


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json'],
27 |     alias: {
28 |       'vue$': 'vue/dist/vue.esm.js',
29 |       '@': resolve('src'),
30 |     }
31 |   },
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.vue$/,
36 |         loader: 'vue-loader',
37 |         options: vueLoaderConfig
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         loader: 'babel-loader',
42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 |       },
44 |       {
45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 |         loader: 'url-loader',
47 |         options: {
48 |           limit: 10000,
49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 |         }
51 |       },
52 |       {
53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 |         loader: 'url-loader',
55 |         options: {
56 |           limit: 10000,
57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 |         }
59 |       },
60 |       {
61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 |         loader: 'url-loader',
63 |         options: {
64 |           limit: 10000,
65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 |         }
67 |       }
68 |     ]
69 |   },
70 |   node: {
71 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
72 |     // source contains it (although only uses it if it's native).
73 |     setImmediate: false,
74 |     // prevent webpack from injecting mocks to Node native modules
75 |     // that does not make sense for the client
76 |     dgram: 'empty',
77 |     fs: 'empty',
78 |     net: 'empty',
79 |     tls: 'empty',
80 |     child_process: 'empty'
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


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


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: './',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/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 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>shop</title>
 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": "shop",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "liushouotng <1183063367@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "@xkeshi/vue-qrcode": "^1.0.0",
14 |     "axios": "^0.18.0",
15 |     "element-ui": "^2.4.6",
16 |     "iview": "^3.0.1",
17 |     "jquery": "^3.3.1",
18 |     "moment": "^2.22.2",
19 |     "v-distpicker": "^1.0.17",
20 |     "vue": "^2.5.17",
21 |     "vue-concise-slider": "^2.5.1",
22 |     "vue-lazyload": "^1.2.6",
23 |     "vue-product-zoomer": "^2.0.11",
24 |     "vue-router": "^3.0.1",
25 |     "vuex": "^3.0.1"
26 |   },
27 |   "devDependencies": {
28 |     "autoprefixer": "^7.1.2",
29 |     "babel-core": "^6.22.1",
30 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
31 |     "babel-loader": "^7.1.1",
32 |     "babel-plugin-syntax-jsx": "^6.18.0",
33 |     "babel-plugin-transform-runtime": "^6.22.0",
34 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
35 |     "babel-preset-env": "^1.3.2",
36 |     "babel-preset-stage-2": "^6.22.0",
37 |     "chalk": "^2.0.1",
38 |     "copy-webpack-plugin": "^4.0.1",
39 |     "css-loader": "^0.28.0",
40 |     "extract-text-webpack-plugin": "^3.0.0",
41 |     "file-loader": "^1.1.4",
42 |     "friendly-errors-webpack-plugin": "^1.6.1",
43 |     "html-webpack-plugin": "^2.30.1",
44 |     "less": "^3.8.1",
45 |     "less-loader": "^4.1.0",
46 |     "node-notifier": "^5.1.2",
47 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
48 |     "ora": "^1.2.0",
49 |     "portfinder": "^1.0.13",
50 |     "postcss-import": "^11.0.0",
51 |     "postcss-loader": "^2.0.8",
52 |     "postcss-url": "^7.2.1",
53 |     "rimraf": "^2.6.0",
54 |     "semver": "^5.3.0",
55 |     "shelljs": "^0.7.6",
56 |     "uglifyjs-webpack-plugin": "^1.1.1",
57 |     "url-loader": "^0.5.8",
58 |     "vue-loader": "^13.3.0",
59 |     "vue-style-loader": "^3.0.1",
60 |     "vue-template-compiler": "^2.5.2",
61 |     "webpack": "^3.6.0",
62 |     "webpack-bundle-analyzer": "^2.9.0",
63 |     "webpack-dev-server": "^2.9.1",
64 |     "webpack-merge": "^4.1.0"
65 |   },
66 |   "engines": {
67 |     "node": ">= 6.0.0",
68 |     "npm": ">= 3.0.0"
69 |   },
70 |   "browserslist": [
71 |     "> 1%",
72 |     "last 2 versions",
73 |     "not ie <= 8"
74 |   ]
75 | }
76 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="app">
  3 |         <!-- 头部 -->
  4 |         <div class="header">
  5 |             <!-- 1.0 导航栏头部 -->
  6 |             <div class="head-top">
  7 |                 <div class="section">
  8 |                     <div class="left-box">
  9 |                         <span>在线购物商城</span>
 10 |                         <a target="_blank" href="#"></a>
 11 |                         <a target="_blank" href="#"></a>
 12 |                     </div>
 13 |                     <div id="menu" class="right-box">
 14 |                         <span v-show="$store.state.isLogin == false">
 15 |                            <router-link to="/login">登录</router-link>
 16 |                             <strong>|</strong>
 17 |                             <a href="" class="">注册</a>
 18 |                             <strong>|</strong>
 19 |                         </span>
 20 |                         <span v-show="$store.state.isLogin == true">
 21 |                             <!-- <a href="" class="">会员中心</a> -->
 22 |                         <router-link to="/vipCenter">会员中心</router-link>
 23 |                             <strong>|</strong>
 24 |                             <a @click="layout">退出</a>
 25 |                             <strong>|</strong>
 26 |                         </span>
 27 |                         <router-link to="/cart">
 28 |                             <i class="iconfont icon-cart"></i>购物车 (
 29 |                             <span id="shoppingCartCount">
 30 |                             <span>{{$store.getters.goodsCount}}</span>
 31 |                             </span>)
 32 |                         </router-link>
 33 |                     </div>
 34 |                 </div>
 35 |             </div>
 36 |             <!-- 2.0 导航条 -->
 37 |             <div class="head-nav">
 38 |                 <div class="section">
 39 |                     <div id="menu2" class="nav-box menuhd">
 40 |                         <ul>
 41 |                             <li class="index">
 42 |                                 <router-link to="/index">
 43 |                                     <span class="out" style="top: 0px;">首页</span>
 44 |                                 </router-link>
 45 |                             </li>
 46 |                             <li class="news">
 47 |                                 <a href="#" class="">
 48 |                                     <span class="out" style="top: 0px;">每日精选</span>
 49 |                                 </a>
 50 |                             </li>
 51 |                             <li class="photo">
 52 |                                 <a href="#" class="">
 53 |                                     <span class="out" style="top: 0px;">秒杀专区</span>
 54 |                                 </a>
 55 |                             </li>
 56 |                             <li class="video">
 57 |                                 <a href="#" class="">
 58 |                                     <span class="out" style="top: 0px;">生鲜超市</span>
 59 |                                 </a>
 60 |                             </li>
 61 |                             <li class="down">
 62 |                                 <a href="#" class="">
 63 |                                     <span class="out" style="top: 0px;">会员权益</span>
 64 |                                 </a>
 65 |                             </li>
 66 |                             <li class="goods">
 67 |                                 <a href="" class="router-link-exact-active ">
 68 |                                     <span class="out" style="top: 0px;">购物商城</span>
 69 |                                 </a>
 70 |                             </li>
 71 |                         </ul>
 72 |                     </div>
 73 |                     <div class="search-box">
 74 |                         <div class="input-box">
 75 |                             <input id="keywords" name="keywords" type="text" onkeydown="if(event.keyCode==13){};" placeholder="输入关健字" x-webkit-speech="">
 76 |                         </div>
 77 |                         <a href="javascript:;">
 78 |                             <i class="iconfont icon-search"></i>
 79 |                         </a>
 80 |                     </div>
 81 |                 </div>
 82 |             </div>
 83 |         </div>
 84 |         <!-- 路由导出试图 -->
 85 |         <router-view></router-view>
 86 |         <!-- 底部 -->
 87 |         <div class="footer">
 88 |             <div class="section">
 89 |                 <div class="foot-nav">
 90 |                     <a href="">关于我们</a>
 91 |                     <strong>|</strong>
 92 |                     <a href="">联系我们</a>
 93 |                     <strong>|</strong>
 94 |                     <a href="">联系客服</a>
 95 |                     <strong>|</strong>
 96 |                     <a href="">合作招商</a>
 97 |                     <strong>|</strong>
 98 |                     <a href="">商家帮助</a>
 99 |                     <strong>|</strong>
100 |                     <a href="">营销中心</a>
101 |                     <strong>|</strong>
102 |                     <a href="">隐私政策</a>
103 |                 </div>
104 |                 <div class="foot-box">
105 |                     <div class="copyright">
106 |                         <p>版权所有 在线商城 </p>
107 |                         <p>公司地址： 联系电话：</p>
108 |                         <p class="gray">Copyright © 2016-2018 myshop Corporation,All Rights Reserved.</p>
109 |                     </div>
110 |                     <div class="service">
111 |                         <p>周一至周日 9:00-24:00</p>
112 |                         <a href="#">
113 |                             <i class="iconfont icon-phone"></i>在线客服</a>
114 |                     </div>
115 |                 </div>
116 |             </div>
117 |         </div>
118 |         <Modal v-model="isShow" @on-ok="userExit">
119 |             <p>部分功能需要登录后才能操作,请确定退出!</p>
120 |         </Modal>
121 |     </div>
122 | </template>
123 | <script>
124 | export default {
125 |     name: "app",
126 |     data: function() {
127 |         return {
128 |             isShow: false
129 |         }
130 |     },
131 |     methods: {
132 |         layout() {
133 |             this.isShow = true;
134 |         },
135 |         userExit() {
136 |             this.$axios.get('/site/account/logout').then(response => {
137 |                if (response.data.status == 0) {
138 |                  this.$router.push('/index');
139 |                  this.$store.state.isLogin = false;
140 |                }
141 |             })
142 |         }
143 |     }
144 | };
145 | import $ from "jquery";
146 | $(document).ready(function() {
147 |     $("#menu2 li a").wrapInner('<span class="out"></span>');
148 |     $("#menu2 li a").each(function() {
149 |         $('<span class="over">' + $(this).text() + "</span>").appendTo(this);
150 |     });
151 |     $("#menu2 li a").hover(
152 |         function() {
153 |             $(".out", this)
154 |                 .stop()
155 |                 .animate({ top: "48px" }, 300); // move down - hide
156 |             $(".over", this)
157 |                 .stop()
158 |                 .animate({ top: "0px" }, 300); // move down - show
159 |         },
160 |         function() {
161 |             $(".out", this)
162 |                 .stop()
163 |                 .animate({ top: "0px" }, 300); // move up - show
164 |             $(".over", this)
165 |                 .stop()
166 |                 .animate({ top: "-48px" }, 300); // move up - hide
167 |         }
168 |     );
169 | });
170 | </script>
171 | <style>
172 | @import url("../static/css/style.css");
173 | @import url("../static/site/css/style.css");
174 | #menu2 {
175 |     background-image: none;
176 | }
177 | 
178 | body {
179 |     background-color: #f0f3ef;
180 | }
181 | </style>


--------------------------------------------------------------------------------
/src/components/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="section">
  4 |             <div class="location">
  5 |                 <span>当前位置：</span>
  6 |                 <a href="/index.html">首页</a> &gt;
  7 |                 <a href="/goods.html">购物商城</a> &gt;
  8 |                 <a href="/goods/42/1.html">商品详情</a>
  9 |             </div>
 10 |         </div>
 11 |         <div class="section">
 12 |             <div class="wrapper clearfix">
 13 |                 <div class="wrap-box">
 14 |                     <div class="left-925">
 15 |                         <div class="goods-box clearfix">
 16 |                             <div class="pic-box">
 17 |                                 <ProductZoomer v-if="images.normal_size.length!=0" :base-images="images" :base-zoomer-options="zoomerOptions">
 18 |                                 </ProductZoomer>
 19 |                             </div>
 20 |                             <div class="goods-spec">
 21 |                                 <h1>{{goodsInfo.title}}</h1>
 22 |                                 <p class="subtitle">{{goodsInfo.sub_title}}</p>
 23 |                                 <div class="spec-box">
 24 |                                     <dl>
 25 |                                         <dt>货号</dt>
 26 |                                         <dd id="commodityGoodsNo">{{goodsInfo.goods_no}}</dd>
 27 |                                     </dl>
 28 |                                     <dl>
 29 |                                         <dt>市场价</dt>
 30 |                                         <dd>
 31 |                                             <s id="commodityMarketPrice">¥{{goodsInfo.market_price}}</s>
 32 |                                         </dd>
 33 |                                     </dl>
 34 |                                     <dl>
 35 |                                         <dt>销售价</dt>
 36 |                                         <dd>
 37 |                                             <em id="commoditySellPrice" class="price">¥{{goodsInfo.sell_price}}</em>
 38 |                                         </dd>
 39 |                                     </dl>
 40 |                                 </div>
 41 |                                 <div class="spec-box">
 42 |                                     <dl>
 43 |                                         <dt>购买数量</dt>
 44 |                                         <dd>
 45 |                                             <div class="stock-box">
 46 |                                                 <el-input-number v-model="buyCount" :min="1" :max="goodsInfo.stock_quantity" label="描述文字" size="small"></el-input-number>
 47 |                                             </div>
 48 |                                             <span class="stock-txt">
 49 |                                                 库存
 50 |                                                 <em id="commodityStockNum">{{goodsInfo.stock_quantity}}</em>件
 51 |                                             </span>
 52 |                                         </dd>
 53 |                                     </dl>
 54 |                                     <dl>
 55 |                                         <dd>
 56 |                                             <div id="buyButton" class="btn-buy">
 57 |                                                 <button onclick="cartAdd(this,'/',1,'/shopping.html');" class="buy">立即购买</button>
 58 |                                                 <button @click="addGoods" class="add">加入购物车</button>
 59 |                                             </div>
 60 |                                         </dd>
 61 |                                     </dl>
 62 |                                 </div>
 63 |                             </div>
 64 |                         </div>
 65 |                         <div id="goodsTabs" class="goods-tab bg-wrap">
 66 |                             <Affix>
 67 |                                 <div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
 68 |                                     <ul>
 69 |                                         <li>
 70 |                                             <a href="javascript:;" :class="{selected:isSelected}" @click="isSelected=true">商品介绍</a>
 71 |                                         </li>
 72 |                                         <li>
 73 |                                             <a href="javascript:;" :class="{selected:!isSelected}" @click="isSelected=false">商品评论</a>
 74 |                                         </li>
 75 |                                     </ul>
 76 |                                 </div>
 77 |                             </Affix>
 78 |                             <div class="tab-content entry" v-show="isSelected" v-html="goodsInfo.content">
 79 |                             </div>
 80 |                             <div class="tab-content" v-show="!isSelected">
 81 |                                 <div class="comment-box">
 82 |                                     <div id="commentForm" name="commentForm" class="form-box">
 83 |                                         <div class="avatar-box">
 84 |                                             <i class="iconfont icon-user-full"></i>
 85 |                                         </div>
 86 |                                         <div class="conn-box">
 87 |                                             <div class="editor">
 88 |                                                 <textarea id="txtContent" name="txtContent" v-model.trim="commentInfo" sucmsg=" " datatype="*10-1000" nullmsg="请填写评论内容！"></textarea>
 89 |                                                 <span class="Validform_checktip"></span>
 90 |                                             </div>
 91 |                                             <div class="subcon">
 92 |                                                 <input id="btnSubmit" name="submit" type="submit" value="提交评论" class="submit" @click="submitInfo">
 93 |                                                 <span class="Validform_checktip"></span>
 94 |                                             </div>
 95 |                                         </div>
 96 |                                     </div>
 97 |                                     <ul id="commentList" class="list-box">
 98 |                                         <p style="margin: 5px 0px 15px 69px; line-height: 42px; text-align: center; border: 1px solid rgb(247, 247, 247);" v-show="comments.length==0">暂无评论，快来抢沙发吧！</p>
 99 |                                         <li v-for="item in comments" :key="item.id">
100 |                                             <div class="avatar-box">
101 |                                                 <i class="iconfont icon-user-full"></i>
102 |                                             </div>
103 |                                             <div class="inner-box">
104 |                                                 <div class="info">
105 |                                                     <span>{{item.user_name}}</span>
106 |                                                     <span>{{item.add_time | filterDate}}</span>
107 |                                                 </div>
108 |                                                 <p>{{item.content}}</p>
109 |                                             </div>
110 |                                         </li>
111 |                                     </ul>
112 |                                     <div class="page-box" style="margin: 5px 0px 0px 62px;">
113 |                                         <div id="pagination" class="digg">
114 |                                             <Page :total="totalCount" show-sizer show-elevator placement="top" :page-size="5" :page-size-opts="[5, 6, 10, 13]" @on-change="changePage" @on-page-size-change="changePageSize" />
115 |                                         </div>
116 |                                     </div>
117 |                                 </div>
118 |                             </div>
119 |                         </div>
120 |                     </div>
121 |                     <div class="left-220">
122 |                         <div class="bg-wrap nobg">
123 |                             <div class="sidebar-box">
124 |                                 <h4>推荐商品</h4>
125 |                                 <ul class="side-img-list">
126 |                                     <li v-for="items in hotList" :key="items.id">
127 |                                         <div class="img-box">
128 |                                             <!-- <a href="#/site/goodsinfo/90" class=""> -->
129 |                                             <router-link :to="'/detail/'+items.id">
130 |                                                 <img :src="items.img_url">
131 |                                             </router-link>
132 |                                             <!-- </a> -->
133 |                                         </div>
134 |                                         <div class="txt-box">
135 |                                             <a href="#/site/goodsinfo/90" class="">{{items.title}}</a>
136 |                                             <span>{{items.add_time | filterDate}}</span>
137 |                                         </div>
138 |                                     </li>
139 |                                 </ul>
140 |                             </div>
141 |                         </div>
142 |                     </div>
143 |                 </div>
144 |             </div>
145 |         </div>
146 |         <BackTop></BackTop>
147 |         <img v-if="imgList.length!=0" class="moveImg" :src="imgList[0].original_path" alt="">
148 |     </div>
149 | </template>
150 | <script>
151 | import { Loading } from "element-ui";
152 | import $ from 'jquery';
153 | export default {
154 |     name: 'detail',
155 |     data: function() {
156 |         return {
157 |             productId: undefined,
158 |             goodsInfo: {},
159 |             hotList: [],
160 |             imgList: [],
161 |             buyCount: '',
162 |             isSelected: true,
163 |             // 放大镜设置
164 |             zoomerOptions: {
165 |                 'zoomFactor': 5, // 放大倍数
166 |                 'pane': 'container-round', // container-round 小放大镜
167 |                 'hoverDelay': 300,
168 |                 'namespace': 'zoomer',
169 |                 'move_by_click': true, // true 点击切换
170 |                 'scroll_items': 7,
171 |                 'choosed_thumb_border_color': "yellowgreen" // 框的颜色
172 |             },
173 |             // 轮播图用的图片 默认的数据格式 不支持
174 |             // 这里的数据 需要在接口调用完毕之后 才能够获取
175 |             images: {
176 |                 normal_size: []
177 |             },
178 |             pageNum: 1, //页码
179 |             pageSize: 5, //页容量
180 |             comments: [], //评论内容
181 |             totalCount: 0, //评论总条数
182 |             commentInfo: '' //评论内容
183 |         }
184 |     },
185 |     methods: {
186 |         //获取商品信息
187 |         getProductDatil() {
188 |             //获取Id
189 |             this.productId = this.$route.params.id;
190 |             //获取数据
191 |              this.$axios.get(`/site/goods/getgoodsinfo/${this.productId}`)
192 |                 .then(response => {
193 |                     this.goodsInfo = response.data.message.goodsinfo;
194 |                     this.hotList = response.data.message.hotgoodslist;
195 |                     this.imgList = response.data.message.imglist;
196 |                     // 处理 放大镜数据
197 |                     let temArr = [];
198 |                     // 循环处理数据
199 |                     this.imgList.forEach((v, i) => {
200 |                         temArr.push({
201 |                             id: v.id,
202 |                             url: v.original_path
203 |                         })
204 |                     })
205 |                     // 临时数组 
206 |                     this.images.normal_size = temArr;
207 |                      this.buyCount = 1;
208 |                 });
209 |         },
210 |         //获取评论信息
211 |         getCommentsInfo() {
212 |             this.$axios.get(`/site/comment/getbypage/goods/${this.productId}?pageIndex=${this.pageNum}&pageSize=${this.pageSize}`)
213 |                 .then(response => {
214 |                     this.comments = response.data.message;
215 |                     this.totalCount = response.data.totalcount;
216 |                 })
217 |         },
218 |         // 页码变化事件
219 |         changePage(page) {
220 |             this.pageNum = page;
221 |             this.getCommentsInfo();
222 |         },
223 |         // 页容量改变事件
224 |         changePageSize(size) {
225 |             this.pageSize = size;
226 |             if (this.pageNum == 1) {
227 |                 this.getCommentsInfo();
228 |             }
229 |         },
230 |         //提交评论
231 |         submitInfo() {
232 |             if (this.commentInfo == "") {
233 |                 this.$Message.error('内容为空');
234 |                 return;
235 |             }
236 |             //提交数据
237 |             this.$axios.post(`/site/validate/comment/post/goods/${this.productId}`, {
238 |                 "commenttxt": this.commentInfo
239 |             }).then(response => {
240 |                 //状态status为0时判断为成功,提交评论
241 |                 if (response.data.status == 0) {
242 |                     this.$Message.success(response.data.message);
243 |                     this.getCommentsInfo();
244 |                     this.commentInfo = '';
245 |                 } else {
246 |                     this.$Message.success(response.data.message);
247 |                 }
248 |             })
249 |         },
250 |         //移动图片动画
251 |         addGoods(){
252 |             //获取加入购物车的位置
253 |             let addOffset = $('.add').offset();
254 |             //获取购物车的位置
255 |             let carTarget = $('.icon-cart').offset();
256 |             $('.moveImg').stop().show().addClass('move').css(addOffset).animate(carTarget,1000,function(){
257 |                 $(this).hide().removeClass('move');
258 |             })
259 | 
260 |          this.$store.commit('addGoods',{
261 |             goodId:this.productId,
262 |             goodNum:this.buyCount
263 |          });
264 |         }
265 | },
266 | watch: {
267 |         $route(val, oldVal) {
268 |             // 数组长度为0 直接销毁 
269 |             this.images.normal_size = [];
270 |             // 回调函数中重新复制 再次 生成
271 |             this.getProductDatil();
272 |         }
273 |     },
274 |     created() {
275 |         //加载动画
276 |         const loading = this.$loading({
277 |             lock: true,
278 |             text: "Loading",
279 |             spinner: "el-icon-loading",
280 |             background: "rgba(0, 0, 0, 0.7)"
281 |         });
282 |         this.getProductDatil();
283 |         //加载页面时获取第一页评论
284 |         this.getCommentsInfo();
285 |         //关闭加载动画
286 |         let loadingInstance = Loading.service({ text: false });
287 |         this.$nextTick(() => {
288 |             // 以服务的方式调用的 Loading 需要异步关闭 
289 |             loadingInstance.close();
290 |         });
291 |     }
292 | }
293 | </script>
294 | <style lang='less'>
295 | .tab-content img {
296 |     width: 100%;
297 |     height: 100%;
298 |     display: block;
299 | }
300 | 
301 | .pic-box {
302 |     width: 395px;
303 |     .control-box .thumb-list {
304 |         display: flex;
305 |         justify-content: center;
306 |         img {
307 |             width: 80px;
308 |             height: 80px;
309 |             margin: 2px;
310 |         }
311 |     }
312 |     .control {
313 |         //   text-align:center;
314 |         display: flex; // 主轴
315 |         justify-content: center; // 纵轴 副轴 侧轴
316 |         align-items: center;
317 |     }
318 | }
319 | // 移动图片的样式
320 | .moveImg{
321 |     position: absolute;
322 |     width: 50px;
323 |     height: 50px;
324 |     display: none;
325 | }
326 | .moveImg.move{
327 |     transition: transform 1s;
328 |     transform: rotate(360deg) scale(.5);
329 | }
330 | </style>


--------------------------------------------------------------------------------
/src/components/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="section">
  4 |             <div class="location">
  5 |                 <span>当前位置：</span>
  6 |                 <a href="#/" class="router-link-active">首页</a> &gt;
  7 |                 <a href="#/site/goodslist" class="router-link-exact-active router-link-active">购物商城</a>
  8 |             </div>
  9 |         </div>
 10 |         <div class="section">
 11 |             <div class="wrapper">
 12 |                 <div class="wrap-box">
 13 |                     <div class="left-220" style="margin: 0px;">
 14 |                         <div class="banner-nav">
 15 |                             <ul>
 16 |                                 <li v-for="(item,index) in cateList" :key="item.id">
 17 |                                     <h3>
 18 |                                         <i class="iconfont icon-arrow-right"></i>
 19 |                                         <span>{{item.title}}</span>
 20 |                                         <p>
 21 |                                             <span v-for="(itemVal,i) in item.subcates" :key="itemVal.id">
 22 |                                                 手机通讯&nbsp;
 23 |                                             </span>
 24 |                                         </p>
 25 |                                     </h3>
 26 |                                     <div class="item-box">
 27 |                                         <dl>
 28 |                                             <dt>
 29 |                                                 <a href="/goods/40.html">{{item.title}}</a>
 30 |                                             </dt>
 31 |                                             <dd>
 32 |                                                 <a href="/goods/43.html" v-for="(itemVal,i) in item.subcates" :key="itemVal.id">{{itemVal.title}}</a>
 33 |                                             </dd>
 34 |                                         </dl>
 35 |                                     </div>
 36 |                                 </li>
 37 |                             </ul>
 38 |                         </div>
 39 |                     </div>
 40 |                     <!--幻灯片-->
 41 |                     <div class="left-705">
 42 |                         <el-carousel trigger="click">
 43 |                             <el-carousel-item v-for="item in sliderList" :key="sliderList.ids">
 44 |                                 <a href="#">
 45 |                                 <img :src="item.img_url" alt="" class="bannerImg">
 46 |                                 </a>
 47 |                             </el-carousel-item>
 48 |                         </el-carousel>
 49 |                     </div>
 50 |                     <!--/幻灯片-->
 51 |                     <div class="left-220">
 52 |                         <ul class="side-img-list">
 53 |                             <li v-for="(item,index) in topList" :key="item.id">
 54 |                                 <div class="img-box">
 55 |                                     <label>{{index+1}}</label>
 56 |                                     <img :src="item.img_url">
 57 |                                 </div>
 58 |                                 <div class="txt-box">
 59 |                                     <a href="/goods/show-98.html">{{item.title}}</a>
 60 |                                     <span>{{item.add_time | filterDate}}</span>
 61 |                                 </div>
 62 |                             </li>
 63 |                         </ul>
 64 |                     </div>
 65 |                 </div>
 66 |             </div>
 67 |         </div>
 68 |         <div class="section" v-for="items in content" :key="items.id">
 69 |             <div class="main-tit">
 70 |                 <h2>{{items.catetitle}}</h2>
 71 |                 <p>
 72 |                     <a href="/goods/43.html" v-for="itemSon in items.level2catelist" :key="itemSon.subcateid">{{itemSon.subcatetitle}}</a>
 73 |                     <a href="/goods/40.html">更多
 74 |                         <i>+</i>
 75 |                     </a>
 76 |                 </p>
 77 |             </div>
 78 |             <div class="wrapper clearfix">
 79 |                 <div class="wrap-box">
 80 |                     <ul class="img-list">
 81 |                         <li v-for="itemGoods in items.datas" :key="itemGoods.artID">
 82 |                             <router-link :to="'./detail/'+itemGoods.artID">
 83 |                                 <a href="#/site/goodsinfo/87" class="">
 84 |                                     <div class="img-box">
 85 |                                         <!-- 使用懒加载属性 -->
 86 |                                         <img v-lazy="itemGoods.img_url">
 87 |                                     </div>
 88 |                                     <div class="info">
 89 |                                         <h3>{{itemGoods.artTitle}}</h3>
 90 |                                         <p class="price">
 91 |                                             <b>{{itemGoods.sell_price}}</b>元</p>
 92 |                                         <p>
 93 |                                             <strong>库存 {{itemGoods.stock_quantity}}</strong>
 94 |                                             <span>市场价：
 95 |                                             <s>{{itemGoods.market_price}}</s>
 96 |                                         </span>
 97 |                                         </p>
 98 |                                     </div>
 99 |                                 </a>
100 |                             </router-link>
101 |                         </li>
102 |                     </ul>
103 |                 </div>
104 |             </div>
105 |         </div>
106 |     </div>
107 | </template>
108 | <script>
109 | import { Loading } from "element-ui";
110 | export default {
111 |     name: "index",
112 |     data: function() {
113 |         return {
114 |             cateList: [],
115 |             sliderList: [],
116 |             topList: [],
117 |             content: ""
118 |         };
119 |     },
120 | 
121 |     created() {
122 |         // //加载动画
123 |         // const loading = this.$loading({
124 |         //     lock: true,
125 |         //     text: "Loading",
126 |         //     spinner: "el-icon-loading",
127 |         //     background: "rgba(0, 0, 0, 0.7)"
128 |         // });
129 |         this.$axios
130 |             .get("/site/goods/gettopdata/goods")
131 |             .then(response => {
132 |                 this.cateList = response.data.message.catelist;
133 |                 this.sliderList = response.data.message.sliderlist;
134 |                 this.topList = response.data.message.toplist;
135 | 
136 |             });
137 |         this.$axios
138 |             .get("/site/goods/getgoodsgroup")
139 |             .then(response => {
140 |                 this.content = response.data.message;
141 |                 //关闭加载动画
142 |                 // let loadingInstance = Loading.service({ text: false });
143 |                 // this.$nextTick(() => {
144 |                 //     // 以服务的方式调用的 Loading 需要异步关闭 
145 |                 //     loadingInstance.close();
146 |                 // });
147 |             });
148 |     }
149 | };
150 | </script>
151 | <style>
152 | /* 轮播图样式 */
153 | 
154 | .bannerImg {
155 |     width: 705px;
156 |     height: 341px;
157 | }
158 | 
159 | .el-carousel .el-carousel__container {
160 |     height: 341px;
161 | }
162 | 
163 | body {
164 |     margin: 0;
165 | }
166 | </style>


--------------------------------------------------------------------------------
/src/components/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="section">
 4 |             <div class="location">
 5 |                 <span>当前位置：</span>
 6 |                 <a href="/index.html">首页</a> &gt;
 7 |                 <a href="/login.html">会员登录</a>
 8 |             </div>
 9 |         </div>
10 |         <div class="section">
11 |             <div class="wrapper">
12 |                 <div class="bg-wrap">
13 |                     <div class="nav-tit">
14 |                         <a class="selected" href="javascript:;">账户登录</a>
15 |                         <i>|</i>
16 |                         <a href="/register.html">免费注册</a>
17 |                     </div>
18 |                     <div id="loginform" name="loginform" class="login-box">
19 |                         <form action="#">
20 |                             <Input prefix="ios-contact" placeholder="Enter name" v-model.trim="username" style="width: 100%" />
21 |                             <br>
22 |                             <br>
23 |                             <Input prefix="ios-lock" type="password" placeholder="Enter password" v-model="password" style="width: 100%" />
24 |                             <br>
25 |                             <br>
26 |                             <div class="btn-box">
27 |                                 <Button type="success" long @click="login">立即登录</Button>
28 |                             </div>
29 |                         </form>
30 |                     </div>
31 |                 </div>
32 |             </div>
33 |         </div>
34 |     </div>
35 | </template>
36 | <script>
37 | export default {
38 |     name: 'login',
39 |     data: function() {
40 |         return {
41 |             username: 'admin',
42 |             password: '123'
43 |         }
44 |     },
45 |     methods: {
46 |         login() {
47 |             // 设置进度条的颜色 尺寸
48 |             this.$Loading.config({
49 |                 color: "skyblue",
50 |                 failedColor: "hotpink",
51 |                 height: 10
52 |             });
53 |             // 显示进度条
54 |             this.$Loading.start();
55 |             this.$axios.post('/site/account/login', {
56 |                 user_name: this.username,
57 |                 password: this.password
58 |             }).then(response => {
59 |                 if (response.data.status == 1) {
60 |                     this.$Notice.error({
61 |                         title:'提示',
62 |                         desc:response.data.message
63 |                     });
64 |                 } else {
65 |                     this.$Notice.success({
66 |                         title:'提示',
67 |                         desc:response.data.message
68 |                     })
69 |                     this.$router.go(-1);
70 |                     this.$store.state.isLogin = true;
71 |                 }
72 |                 //   关闭进度条
73 |                 this.$Loading.finish();
74 | 
75 |             }).catch(response => {
76 |                 this.$Loading.error();
77 |             })
78 |         }
79 |     }
80 | }
81 | </script>


--------------------------------------------------------------------------------
/src/components/order.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="section">
  4 |             <div class="location">
  5 |                 <span>当前位置：</span>
  6 |                 <a href="/index.html">首页</a> &gt;
  7 |                 <a href="/cart.html">购物车</a>
  8 |             </div>
  9 |         </div>
 10 | 
 11 |         <div class="section">
 12 |             <div class="wrapper">
 13 |                 <div class="bg-wrap">
 14 |                     <!--购物车头部-->
 15 |                     <div class="cart-head clearfix">
 16 |                         <h2>
 17 |                             <i class="iconfont icon-cart"></i>我的购物车</h2>
 18 |                         <div class="cart-setp">
 19 |                             <ul>
 20 |                                 <li class="first active">
 21 |                                     <div class="progress">
 22 |                                         <span>1</span>
 23 |                                         放进购物车
 24 |                                     </div>
 25 |                                 </li>
 26 |                                 <li class="active">
 27 |                                     <div class="progress">
 28 |                                         <span>2</span>
 29 |                                         填写订单信息
 30 |                                     </div>
 31 |                                 </li>
 32 |                                 <li class="last">
 33 |                                     <div class="progress">
 34 |                                         <span>3</span>
 35 |                                         支付/确认订单
 36 |                                     </div>
 37 |                                 </li>
 38 |                             </ul>
 39 |                         </div>
 40 |                     </div>
 41 |                     <!--购物车头部-->
 42 |                     <div class="cart-box">
 43 |                         <!-- status-icon 让输入框的后面 有提示图标 -->
 44 |                         <el-form status-icon :model="orderForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 45 |                             <h2 class="slide-tit">
 46 |                                 <span>1、收货地址</span>
 47 |                             </h2>
 48 |                             <div id="orderForm" name="orderForm" url="">
 49 |                                 <!-- 上面的一堆 个人信息输入 -->
 50 |                                 <div class="form-box address-info">
 51 |                                     <el-form-item label="收货人姓名" prop="accept_name">
 52 |                                         <el-input v-model="orderForm.accept_name" style="width:500px"></el-input>
 53 |                                     </el-form-item>
 54 |                                     <el-form-item label="所属地区" prop="">
 55 |                                         <!-- 使用data中的数据 设置为初始值 -->
 56 |                                         <v-distpicker @selected="selected" :province="orderForm.area.province.value" :city="orderForm.area.city.value" :area="orderForm.area.area.value"></v-distpicker>
 57 |                                     </el-form-item>
 58 |                                     <el-form-item label="详细地址" prop="address">
 59 |                                         <el-input v-model="orderForm.address" style="width:500px"></el-input>
 60 |                                     </el-form-item>
 61 |                                     <el-form-item label="手机号码" prop="mobile">
 62 |                                         <el-input v-model="orderForm.mobile" style="width:500px"></el-input>
 63 |                                     </el-form-item>
 64 |                                     <el-form-item label="联系电话">
 65 |                                         <el-input v-model="orderForm.phone" style="width:500px"></el-input>
 66 |                                     </el-form-item>
 67 |                                     <el-form-item label="电子邮箱" prop="email">
 68 |                                         <el-input v-model="orderForm.email" style="width:500px"></el-input>
 69 |                                     </el-form-item>
 70 |                                     <el-form-item label="邮政编码" prop="post_code">
 71 |                                         <el-input v-model="orderForm.post_code" style="width:500px"></el-input>
 72 |                                     </el-form-item>
 73 |                                 </div>
 74 |                                 <h2 class="slide-tit">
 75 |                                     <span>2、支付方式</span>
 76 |                                 </h2>
 77 |                                 <ul class="item-box clearfix">
 78 |                                     <!--取得一个DataTable-->
 79 |                                     <li>
 80 |                                         <!-- 单选框 -->
 81 |                                         <el-radio v-model="orderForm.payment_id" label="6">在线支付</el-radio>
 82 |                                         <span style="color:#666">手续费:0.00元</span>
 83 |                                     </li>
 84 |                                 </ul>
 85 |                                 <h2 class="slide-tit">
 86 |                                     <span>3、配送方式</span>
 87 |                                 </h2>
 88 |                                 <ul class="item-box clearfix">
 89 |                                     <!--取得一个DataTable-->
 90 |                                     <li>
 91 |                                         <!-- 单选框 -->
 92 |                                         <el-radio @change="expressChange(20)" v-model="orderForm.express_id" label="1">顺丰快递(20元)</el-radio>
 93 |                                         <el-radio @change="expressChange(10)" v-model="orderForm.express_id" label="2">圆通快递(10元)</el-radio>
 94 |                                         <el-radio @change="expressChange(8)" v-model="orderForm.express_id" label="3">韵达快递(8元)</el-radio>
 95 |                                     </li>
 96 |                                 </ul>
 97 |                                 <h2 class="slide-tit">
 98 |                                     <span>4、商品清单</span>
 99 |                                 </h2>
100 |                                 <div class="line15"></div>
101 |                                 <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
102 |                                     <tbody>
103 |                                         <tr>
104 |                                             <th colspan="2" align="left">商品信息</th>
105 |                                             <th width="84" align="left">单价</th>
106 |                                             <th width="84" align="center">购买数量</th>
107 |                                             <th width="104" align="left">金额(元)</th>
108 |                                         </tr>
109 |                                         <tr v-for="(item, index) in message" :key="item.id">
110 |                                             <td width="68">
111 |                                                 <!-- <a target="_blank" href="/goods/show-89.html"> -->
112 |                                                 <router-link :to="'/detail/'+item.id">
113 |                                                     <img :src="item.img_url" class="img">
114 |                                                 </router-link>
115 |                                                 <!-- </a> -->
116 |                                             </td>
117 |                                             <td>
118 |                                                 <router-link :to="'/detail/'+item.id">{{item.title}} </router-link>
119 |                                             </td>
120 |                                             <td>
121 |                                                 <span class="red">
122 |                                                     ￥{{item.sell_price}}
123 |                                                 </span>
124 |                                             </td>
125 |                                             <td align="center">{{item.buycount}}</td>
126 |                                             <td>
127 |                                                 <span class="red">
128 |                                                     ￥{{item.totalamount}}
129 |                                                 </span>
130 |                                             </td>
131 |                                         </tr>
132 |                                     </tbody>
133 |                                 </table>
134 |                                 <div class="line15"></div>
135 |                                 <h2 class="slide-tit">
136 |                                     <span>5、结算信息</span>
137 |                                 </h2>
138 |                                 <div class="buy-foot clearfix">
139 |                                     <div class="left-box">
140 |                                         <dl>
141 |                                             <el-form-item label="订单备注(100字符以内)" prop="message">
142 |                                                 <el-input type="textarea" resize="none" :row="2" v-model="orderForm.message" style="width:500px"></el-input>
143 |                                             </el-form-item>
144 |                                         </dl>
145 |                                     </div>
146 |                                     <div class="right-box">
147 |                                         <p>
148 |                                             商品
149 |                                             <label class="price">{{totalCount}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 商品金额：￥
150 |                                             <label id="goodsAmount" class="price">{{orderForm.goodsAmount}}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
151 |                                         </p>
152 |                                         <p>
153 |                                             运费：￥
154 |                                             <label id="expressFee" class="price">{{orderForm.expressMoment}}</label> 元
155 |                                         </p>
156 |                                         <p class="txt-box">
157 |                                             应付总金额：￥
158 |                                             <label id="totalAmount" class="price">{{orderForm.goodsAmount+orderForm.expressMoment}}</label>
159 |                                         </p>
160 |                                         <p class="btn-box">
161 |                                             <router-link to="/cart">返回购物车</router-link>
162 |                                             <a id="btnSubmit" class="btn submit" @click="sureOrder">确认提交</a>
163 |                                         </p>
164 |                                     </div>
165 |                                 </div>
166 |                             </div>
167 |                         </el-form>
168 |                     </div>
169 |                 </div>
170 |             </div>
171 |         </div>
172 | 
173 |     </div>
174 | </template>
175 | <script>
176 | // 导入省市联动
177 | import VDistpicker from "v-distpicker";
178 | 
179 | export default {
180 |   name: "order",
181 |   // 注册的组件
182 |   components: { VDistpicker },
183 |   data: function() {
184 |     // 自定义验证的规则 触发验证时 会执行这个函数 手机号验证
185 |     var checkMobile = (rule, value, callback) => {
186 |       setTimeout(() => {
187 | 
188 |         // 定义正则规则
189 |         let exec = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
190 |         if (exec.test(value) == true) {
191 |           // 正确的时候干的事情
192 |           callback();
193 |         } else {
194 |           callback(new Error("你的手机号不对"));
195 |         }
196 |       }, 500);
197 |     };
198 |     // 邮箱
199 |     var checkEmail = (rule, value, callback) => {
200 |       // 如果value 不为空 格式验证
201 |       // console.log(value);
202 |       if (value.trim().length != 0) {
203 |         // 验证
204 |         // 邮箱的正则
205 |         let exec = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
206 |         if (exec.test(value.trim()) == true) {
207 |           callback();
208 |         } else {
209 |           callback(new Error("请输入正确邮箱"));
210 |         }
211 |       } else {
212 |         callback();
213 |       }
214 |     };
215 |     // 邮编
216 |     var checkPostCode = (rule, value, callback) => {
217 |       if (value.trim().length != 0) {
218 |         // 验证
219 |         // 邮箱的正则
220 |         let exec = /^[1-9]\d{5}(?!\d)$/;
221 |         if (exec.test(value.trim()) == true) {
222 |           callback();
223 |         } else {
224 |           callback(new Error("请输入正确邮编"));
225 |         }
226 |       } else {
227 |         callback();
228 |       }
229 |     };
230 |     return {
231 |       orderForm: {
232 |         goodsAmount: 0, // 总金额
233 |         expressMoment: 20, // 快递费
234 |         accept_name: "桐先生", // 收货人姓名,
235 |         area: {
236 |           province: { code: "440000", value: "广东省" },
237 |           city: { code: "440300", value: "深圳市" },
238 |           area: { code: "440306", value: "宝安区" }
239 |         }, // 省市区
240 |         address: "中粮商务公园18楼天台", // 详细地址
241 |         mobile: "18888881234", // 手机号
242 |         email: "tangSir@qq.com", // 邮箱
243 |         post_code: "518300", // 邮编,
244 |         payment_id: "6", // 支付方式
245 |         express_id: "1", // 快递
246 |         message: "快点发货,不要用三通一达,记得信息要保密哦",
247 |         goodsids: "", //购买的商品id,
248 |         cargoodsobj: {}, // 购买的商品 id 跟件数的关系
249 |         phone: "1008611" // 联系电话
250 |       },
251 |       // 服务器返回的商品数据
252 |       message: [],
253 |       rules: {
254 |         //   需要跟字段相对应
255 |         accept_name: [
256 |           // required 是否必须  message 提示消息 trigger 触发的方式
257 |           { required: true, message: "请输入收货人姓名", trigger: "blur" },
258 |           // min 最短 max 最长 少数民族
259 |           {
260 |             min: 1,
261 |             max: 20,
262 |             message: "长度在 1 到 20 个字符",
263 |             trigger: "change"
264 |           }
265 |         ],
266 |         // 地址的验证规则
267 |         address: [
268 |           {
269 |             required: true,
270 |             message: "请输入地址,没有我送给谁呀",
271 |             trigger: "blur"
272 |           }
273 |         ],
274 |         // 手机号验证
275 |         mobile: [{ validator: checkMobile, trigger: "change" }],
276 |         // 邮箱验证
277 |         email: [{ validator: checkEmail, trigger: "change" }],
278 |         // 邮编验证
279 |         post_code: [{ validator: checkPostCode, trigger: "change" }]
280 |       }
281 |     };
282 |   },
283 |   //方法
284 |   methods:{
285 |     selected(value){
286 |         this.orderForm.area = value;
287 |     },
288 |     // 价格改变
289 |     expressChange(price){
290 |         this.orderForm.expressMoment = price;
291 |     },
292 |     //提交订单
293 |     sureOrder(){
294 |         this.$axios.post("site/validate/order/setorder",this.orderForm)
295 |         .then(response=>{
296 |             //获取订单
297 |             let orderid = response.data.message.orderid;
298 |             this.$router.push('/pay/'+orderid);
299 |             //删除购物车数据
300 |             this.message.forEach(v=>{
301 |                 this.$store.commit('deleteGood',v.id);
302 |             })
303 |         })
304 |     }
305 |   },
306 |   created(){
307 |     //保存id
308 |     this.orderForm.goodsids = this.$route.params.id;
309 |     this.$axios.get(`site/validate/order/getgoodslist/${this.$route.params.id}`)
310 |     .then(response=>{
311 |         //定义总金额
312 |         let total = 0;
313 |         // 定义存储对象
314 |         let cargoodsobj = {};
315 |         //因为后端接口没有提供购买商品的数量,要前端根据具体数值去拼接
316 |         response.data.message.forEach(v=>{
317 |             v.buycount = this.$store.state.cartDate[v.id];
318 |             v.totalamount = v.buycount * v.sell_price;
319 |             //累加总金额
320 |             total += v.totalamount;
321 |             //增加键值对
322 |             cargoodsobj[v.id] = v.buycount;
323 |         });
324 |         this.message = response.data.message;
325 |         this.orderForm.goodsAmount = total;
326 |             this.orderForm.cargoodsobj = cargoodsobj;
327 |     })
328 |   },
329 |   //计算属性
330 |   computed:{
331 |     totalCount(){
332 |         let totalCount = 0;
333 |         this.message.forEach(v=>{
334 |             totalCount+=v.buycount;
335 |         })
336 |         return totalCount;
337 |     }
338 |   }
339 | };
340 | </script>
341 | <style>
342 | </style>
343 | 
344 | 


--------------------------------------------------------------------------------
/src/components/orderDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="center">
  3 |     <div class="el-row">
  4 |       <div class="el-col el-col-24">
  5 |         <div class="comp">
  6 |           <div class="tmpl routeanimate">
  7 |             <div class="section">
  8 |               <div class="location">
  9 |                 <span>当前位置：</span>
 10 |                 <a href="/index.html">首页</a> &gt;
 11 |                 <a href="#/site/member/center" class="">会员中心</a>&gt;
 12 |                 <a href="#/site/member/orderlist" class="">我的订单</a>
 13 |               </div>
 14 |             </div>
 15 |             <div class="section clearfix">
 16 |               <div class="left-260">
 17 |                 <div class="bg-wrap">
 18 |                   <div class="avatar-box">
 19 |                     <a href="/user/center/avatar.html" class="img-box">
 20 |                                                 <i class="iconfont icon-user-full"></i>
 21 |                                             </a>
 22 |                     <h3>ivanyb</h3>
 23 |                     <p>
 24 |                       <b>注册会员</b>
 25 |                     </p>
 26 |                   </div>
 27 |                   <div class="center-nav">
 28 |                     <ul>
 29 |                       <li>
 30 |                         <h2>
 31 |                           <i class="iconfont icon-order"></i>
 32 |                          <span>订单管理</span>
 33 |                           </h2>
 34 |                         <div class="list">
 35 |                           <p>
 36 |                             <router-link to="/orderList">
 37 |                               <i class="iconfont icon-arrow-right"></i>交易订单
 38 |                             </router-link>
 39 |                           </p>
 40 |                         </div>
 41 |                       </li>
 42 |                       <li>
 43 |                         <h2>
 44 |                                                         <i class="iconfont icon-user"></i>
 45 |                                                         <span>账户管理</span>
 46 |                                                     </h2>
 47 |                         <div class="list">
 48 |                           <p>
 49 |                             <a href="#/site/member/center" class="">
 50 |                                                                 <i class="iconfont icon-arrow-right"></i>账户资料</a>
 51 |                           </p>
 52 |                           <p>
 53 |                             <a href="#/site/member/center" class="">
 54 |                                                                 <i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
 55 |                           </p>
 56 |                           <p>
 57 |                             <a href="#/site/member/center" class="">
 58 |                                                                 <i class="iconfont icon-arrow-right"></i>修改密码</a>
 59 |                           </p>
 60 |                           <p>
 61 |                             <a href="javascript:void(0)">
 62 |                                                                 <i class="iconfont icon-arrow-right"></i>退出登录</a>
 63 |                           </p>
 64 |                         </div>
 65 |                       </li>
 66 |                     </ul>
 67 |                   </div>
 68 |                 </div>
 69 |               </div>
 70 |               <div class="right-auto">
 71 |                 <div class="bg-wrap" style="min-height: 765px;">
 72 |                   <div class="sub-tit">
 73 |                     <a href="javascript:void(0)" class="add" @click="back">
 74 |                                                 <i class="iconfont icon-reply"></i>返回</a>
 75 |                     <ul>
 76 |                       <li class="selected">
 77 |                         <a href="javascript:;">查看订单</a>
 78 |                       </li>
 79 |                     </ul>
 80 |                   </div>
 81 |                   <div class="order-progress">
 82 |                     <ul>
 83 |                       <li class="first active">
 84 |                         <div class="progress">下单</div>
 85 |                         <div class="info">2017-10-25 21:38:15</div>
 86 |                       </li>
 87 |                       <li class="">
 88 |                         <div class="progress">已付款</div>
 89 |                         <div class="info">2017-10-25 21:38:15</div>
 90 |                       </li>
 91 |                       <li class="">
 92 |                         <div class="progress">已经发货</div>
 93 |                         <div class="info">2017-10-25 21:38:15</div>
 94 |                       </li>
 95 |                       <li class="last">
 96 |                         <div class="progress">已完成</div>
 97 |                         <div class="info">2017-10-25 21:38:15</div>
 98 |                       </li>
 99 |                     </ul>
100 |                   </div>
101 |                   <div class="form-box accept-box form-box1">
102 |                     <dl class="head form-group">
103 |                       <dd>
104 |                         订单号：{{orderInfo.order_no}}
105 |                         <router-link v-if="orderInfo.status==1" class="btn-mypay" :to="'/pay/'+orderInfo.id">去付款</router-link>
106 |                         <a v-if="orderInfo.status<4&&orderInfo.status>1" class="btn-mypay" @click="signExpress">签收</a>
107 |                         <!---->
108 |                       </dd>
109 |                     </dl>
110 |                     <dl class="form-group">
111 |                       <dt>订单状态：</dt>
112 |                       <dd>
113 |                         {{orderInfo.statusName}}
114 |                       </dd>
115 |                     </dl>
116 |                     <dl class="form-group">
117 |                       <dt>快递单号：</dt>
118 |                       <dd>
119 |                       </dd>
120 |                     </dl>
121 |                     <dl class="form-group">
122 |                       <dt>支付方式：</dt>
123 |                       <dd>支付宝</dd>
124 |                     </dl>
125 |                   </div>
126 |                   <div class="table-wrap">
127 |                     <table width="100%" border="0" cellspacing="0" cellpadding="5" class="ftable">
128 |                       <tbody>
129 |                         <tr>
130 |                           <th align="left">商品信息</th>
131 |                           <th width="60%">名称</th>
132 |                           <th width="10%">单价
133 |                           </th>
134 |                           <th width="10%">数量</th>
135 |                           <th width="10%">金额</th>
136 |                         </tr>
137 |                         <tr v-for="(item,index) in goodsList" :key="item.id">
138 |                           <td width="60">
139 |                             <img :src="item.imgurl" class="img">
140 |                           </td>
141 |                           <td align="left">
142 |                             <a target="_blank" href="/goods/show-92.html">{{item.goods_title}}</a>
143 |                           </td>
144 |                           <td align="center">
145 |                             <s>￥{{item.goods_price}}</s>
146 |                             <p>￥{{item.real_price}}</p>
147 |                           </td>
148 |                           <td align="center">{{item.quantity}}</td>
149 |                           <td align="center">￥{{item.real_price * item.quantity}}</td>
150 |                         </tr>
151 |                         <tr>
152 |                           <td colspan="7" align="right">
153 |                             <p>商品金额：
154 |                               <b class="red">￥{{orderInfo.real_amount}}</b>&nbsp;&nbsp;+&nbsp;&nbsp;运费：
155 |                               <b class="red">￥{{orderInfo.express_fee}}</b>
156 |                             </p>
157 |                             <p style="font-size: 22px;">应付总金额：
158 |                               <b class="red">￥{{orderInfo.real_amount + orderInfo.express_fee}}</b>
159 |                             </p>
160 |                           </td>
161 |                         </tr>
162 |                       </tbody>
163 |                     </table>
164 |                   </div>
165 |                   <div class="form-box accept-box">
166 |                     <dl class="head form-group">
167 |                       <dd>收货信息</dd>
168 |                     </dl>
169 |                     <dl class="form-group">
170 |                       <dt>顾客姓名：</dt>
171 |                       <dd>{{orderInfo.accept_name}}</dd>
172 |                     </dl>
173 |                     <dl class="form-group">
174 |                       <dt>送货地址：</dt>
175 |                       <dd>{{orderInfo.area + orderInfo.address}}</dd>
176 |                     </dl>
177 |                     <dl class="form-group">
178 |                       <dt>联系电话：</dt>
179 |                       <dd>{{orderInfo.mobile}}</dd>
180 |                     </dl>
181 |                     <dl class="form-group">
182 |                       <dt>电子邮箱：</dt>
183 |                       <dd>{{orderInfo.email}}</dd>
184 |                     </dl>
185 |                     <dl class="form-group">
186 |                       <dt>备注留言：</dt>
187 |                       <dd>{{orderInfo.message}}</dd>
188 |                     </dl>
189 |                   </div>
190 |                 </div>
191 |               </div>
192 |             </div>
193 |           </div>
194 |         </div>
195 |       </div>
196 |     </div>
197 |   </div>
198 | </template>
199 | <script>
200 | export default {
201 |   data() {
202 |     return {
203 |       goodsList: [],
204 |       orderInfo: {}
205 |     }
206 |   },
207 |   created() {
208 |     this.getOrderInfo();
209 |   },
210 |   methods: {
211 |     getOrderInfo() {
212 |       this.$axios.get(`site/validate/order/getorderdetial/${this.$route.params.id}`)
213 |         .then(response => {
214 |           this.goodsList = response.data.message.goodslist;
215 |           this.orderInfo = response.data.message.orderinfo;
216 |         });
217 |     },
218 |     signExpress() {
219 |       this.$axios.get(`site/validate/order/complate/${this.$route.params.id}`)
220 |         .then(response => {
221 |             if (response.data.status == 0) {
222 |               this.getOrderInfo();
223 |             }
224 |           })
225 |         },
226 |         back(){
227 |            this.$router.go(-1);
228 |         }
229 | }
230 | }
231 | 
232 | </script>
233 | <style>
234 | .btn-mypay {
235 |   float: right;
236 |   padding: 0 10px;
237 |   margin-right: 10px;
238 |   border-radius: 5px;
239 |   background-color: hotpink;
240 |   color: white;
241 | }
242 | .sub-tit{
243 |     padding-top: 0;
244 | }
245 | </style>
246 | 


--------------------------------------------------------------------------------
/src/components/orderList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="el-row">
  3 |     <div class="el-col el-col-24">
  4 |       <div class="comp">
  5 |         <div class="tmpl routeanimate">
  6 |           <div class="section">
  7 |             <div class="location">
  8 |               <span>当前位置：</span>
  9 |               <a href="/index.html">首页</a> &gt;
 10 |               <a href="#/site/member/center" class="">会员中心</a>&gt;
 11 |               <a href="#/site/member/orderlist" class="router-link-exact-active ">我的订单</a>
 12 |             </div>
 13 |           </div>
 14 |           <div class="section clearfix">
 15 |             <div class="left-260">
 16 |               <div class="bg-wrap">
 17 |                 <div class="avatar-box">
 18 |                   <a href="/user/center/avatar.html" class="img-box">
 19 |                                           <img src="../../static/images/lst.jpg" alt="">
 20 |                                             </a>
 21 |                   <h3>
 22 |                                                 小刘
 23 |                                             </h3>
 24 |                   <p>
 25 |                     <b>注册会员</b>
 26 |                   </p>
 27 |                 </div>
 28 |                 <div class="center-nav">
 29 |                   <ul>
 30 |                     <li>
 31 |                       <h2>
 32 |                                                         <i class="iconfont icon-order"></i>
 33 |                                                         <span>订单管理</span>
 34 |                                                     </h2>
 35 |                       <div class="list">
 36 |                         <p>
 37 |                           <a href="#/site/member/orderlist" class="router-link-exact-active ">
 38 |                                                                 <i class="iconfont icon-arrow-right"></i>交易订单</a>
 39 |                         </p>
 40 |                       </div>
 41 |                     </li>
 42 |                     <li>
 43 |                       <h2>
 44 |                                                         <i class="iconfont icon-user"></i>
 45 |                                                         <span>账户管理</span>
 46 |                                                     </h2>
 47 |                       <div class="list">
 48 |                         <p>
 49 |                           <a href="#/site/member/center" class="">
 50 |                                                                 <i class="iconfont icon-arrow-right"></i>账户资料</a>
 51 |                         </p>
 52 |                         <p>
 53 |                           <a href="#/site/member/center" class="">
 54 |                                                                 <i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
 55 |                         </p>
 56 |                         <p>
 57 |                           <a href="#/site/member/center" class="">
 58 |                                                                 <i class="iconfont icon-arrow-right"></i>修改密码</a>
 59 |                         </p>
 60 |                         <p>
 61 |                           <a href="javascript:void(0)">
 62 |                                                                 <i class="iconfont icon-arrow-right"></i>退出登录</a>
 63 |                         </p>
 64 |                       </div>
 65 |                     </li>
 66 |                   </ul>
 67 |                 </div>
 68 |               </div>
 69 |             </div>
 70 |             <div class="right-auto">
 71 |               <div class="bg-wrap" style="min-height: 765px;">
 72 |                 <div class="sub-tit">
 73 |                   <ul>
 74 |                     <li class="selected">
 75 |                       <a href="/user/order-list.html">交易订单</a>
 76 |                     </li>
 77 |                   </ul>
 78 |                 </div>
 79 |                 <div class="table-wrap">
 80 |                   <div class="page-foot">
 81 |                     <el-pagination background @size-change="SizeChange" @current-change="CurrentChange" :page-sizes="[5, 8, 10, 15]" :page-size="pageSize" :current-page="pageIndex" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
 82 |                     </el-pagination>
 83 |                   </div>
 84 |                   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ftable">
 85 |                     <tbody>
 86 |                       <tr>
 87 |                         <th width="5%" align="left">序号</th>
 88 |                         <th width="13%" align="left">订单号</th>
 89 |                         <th width="10%">姓名</th>
 90 |                         <th width="11%">订单金额</th>
 91 |                         <th width="12%">下单时间</th>
 92 |                         <th width="10%">状态</th>
 93 |                         <th width="12%">操作</th>
 94 |                       </tr>
 95 |                       <tr v-for="(item, index) in message" :key="item.id">
 96 |                          <td>{{index+1}}</td>
 97 |                         <td>{{item.order_no}}</td>
 98 |                         <!-- 三元表达式 -->
 99 |                         <td align="left">{{item.accept_name==''?'匿名用户':item.accept_name}}</td>
100 |                         <td align="left">
101 |                           <strong style="color: red;">￥{{item.real_amount}}</strong>
102 |                           <br> 在线支付
103 |                         </td>
104 |                         <td align="left">{{item.payment_time | filterDate('YYYY:MM:DD HH:mm:ss')}}</td>
105 |                         <td align="left">
106 |                           {{item.statusName}}
107 |                         </td>
108 |                         <td align="left" style="display:flex;flex-direction:column;justify-content: center;">
109 |                           <router-link :to="'/orderDetail/'+item.id">查看订单</router-link>
110 |                           <!-- <br> -->
111 |                           <router-link v-if="item.status==1" :to="'/pay/'+item.id">去付款</router-link>
112 |                         </td>
113 |                       </tr>
114 |                     </tbody>
115 |                   </table>
116 |                 </div>
117 |               </div>
118 |             </div>
119 |           </div>
120 |         </div>
121 |       </div>
122 |     </div>
123 |   </div>
124 | </template>
125 | <script>
126 | export default {
127 | 
128 |   name: 'orderList',
129 |   data() {
130 |     return {
131 |       pageIndex: 1,
132 |       pageSize: 5,
133 |       message: [],
134 |       totalCount: 0,
135 |     }
136 | 
137 |   },
138 |   created() {
139 |     this.getOrderInfo();
140 |   },
141 |   methods: {
142 |     getOrderInfo() {
143 |       this.$axios.get(`site/validate/order/userorderlist?pageIndex=${this.pageIndex
144 |           }&pageSize=${this.pageSize}`).then(response => {
145 |         this.message = response.data.message;
146 |         this.totalCount = response.data.totalcount;
147 |       })
148 |     },
149 |     SizeChange(size) {
150 |       this.pageIndex = 1;
151 |       this.pageSize = size;
152 |       this.getOrderInfo();
153 |     },
154 |     CurrentChange(index) {
155 |       this.pageIndex = index;
156 |       this.getOrderInfo();
157 |     }
158 |   }
159 | }
160 | 
161 | </script>
162 | <style>
163 | .sub-tit {
164 |   padding: 0;
165 | }
166 | 
167 | </style>
168 | 


--------------------------------------------------------------------------------
/src/components/pay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="section">
  4 |       <div class="location">
  5 |         <span>当前位置：</span>
  6 |         <a href="/index.html">首页</a> &gt;
  7 |         <a href="javascript:;">支付中心</a>
  8 |       </div>
  9 |     </div>
 10 |     <div class="section">
 11 |       <div class="wrapper">
 12 |         <div class="bg-wrap">
 13 |           <div class="nav-tit pay">
 14 |             <a href="javascript:;" class="selected">支付中心</a>
 15 |           </div>
 16 |           <div class="form-box payment">
 17 |             <div class="el-row">
 18 |               <div class="el-col el-col-18">
 19 |                 <div class="el-row">
 20 |                   <div class="el-col el-col-12">
 21 |                     <dl class="form-group">
 22 |                       <dt>订 单 号：</dt>
 23 |                       <dd>{{orderInfo.order_no}}</dd>
 24 |                     </dl>
 25 |                   </div>
 26 |                   <div class="el-col el-col-12">
 27 |                     <dl class="form-group">
 28 |                       <dt>收货人姓名：</dt>
 29 |                       <dd>{{orderInfo.accept_name}}</dd>
 30 |                     </dl>
 31 |                   </div>
 32 |                 </div>
 33 |                 <div class="el-row">
 34 |                   <div class="el-col el-col-12">
 35 |                     <dl class="form-group">
 36 |                       <dt>送货地址：</dt>
 37 |                       <dd>{{orderInfo.area}}&nbsp;{{orderInfo.address}}
 38 |                       </dd>
 39 |                     </dl>
 40 |                   </div>
 41 |                   <div class="el-col el-col-12">
 42 |                     <dl class="form-group">
 43 |                       <dt>手机号码：</dt>
 44 |                       <dd>{{orderInfo.mobile}}</dd>
 45 |                     </dl>
 46 |                   </div>
 47 |                 </div>
 48 |                 <div class="el-row">
 49 |                   <div class="el-col el-col-12">
 50 |                     <dl class="form-group">
 51 |                       <dt>支付金额：</dt>
 52 |                       <dd>{{orderInfo.order_amount}} 元</dd>
 53 |                     </dl>
 54 |                   </div>
 55 |                   <div class="el-col el-col-12">
 56 |                     <dl class="form-group">
 57 |                       <dt>支付方式：</dt>
 58 |                       <dd>在线支付</dd>
 59 |                     </dl>
 60 |                   </div>
 61 |                 </div>
 62 |                 <div class="el-row">
 63 |                   <div class="el-col el-col-12">
 64 |                     <dl class="form-group">
 65 |                       <dt>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</dt>
 66 |                       <dd>{{orderInfo.message}}</dd>
 67 |                     </dl>
 68 |                   </div>
 69 |                 </div>
 70 |               </div>
 71 |               <div class="el-col el-col-6">
 72 |                 <div id="container2">
 73 |                   <qrcode :value="'http://47.106.148.205:8899/site/validate/pay/alipay/'+$route.params.id" :options="{ size: 200 }"></qrcode>
 74 |                 </div>
 75 |               </div>
 76 |               <div>
 77 |                 <span>扫码支付或者</span>
 78 |                 <input type="button" value="跳转到支付页" @click="goPayOrder" style="cursor: pointer">
 79 |               </div>
 80 |             </div>
 81 |           </div>
 82 |         </div>
 83 |       </div>
 84 |     </div>
 85 |   </div>
 86 | </template>
 87 | <script>
 88 | //导入二维码插件
 89 | import VueQrcode from '@xkeshi/vue-qrcode';
 90 | export default {
 91 |   data() {
 92 |     return {
 93 |       orderInfo: []
 94 |     }
 95 |   },
 96 |   components: {
 97 |     //   对象的属性名 默认不支持 使用 对象取值的方式来赋值
 98 |     // ES6中有这个语法
 99 |     [VueQrcode.name]: VueQrcode
100 |   },
101 |   created() {
102 |     this.$axios.get(`site/validate/order/getorder/${this.$route.params.id}`)
103 |       .then(response => {
104 |         console.log(response)
105 |         this.orderInfo = response.data.message[0];
106 |       });
107 |     let interId = setInterval(() => {
108 |       this.$axios.get(`site/validate/order/getorder/${this.$route.params.id}`)
109 |         .then(response => {
110 |           if (response.data.message[0].status == 2) {
111 |             this.$Message.success('支付成功!');
112 |             setTimeout(() => {
113 |               this.$router.push('/paySuccess/'+this.$route.params.id);
114 |             }, 500);
115 |             clearInterval(interId)
116 |           } else {
117 |            
118 |           }
119 |         });
120 |     }, 1000)
121 |   },
122 |   methods: {
123 |     goPayOrder() {
124 |       window.open("http://47.106.148.205:8899/site/validate/pay/alipay/" +
125 |         this.$route.params.id);
126 |     }
127 |   }
128 | }
129 | 
130 | </script>
131 | <style>
132 | 
133 | 
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/paySuccess.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="center">
 3 |     <div class="el-row">
 4 |       <div class="el-col el-col-24">
 5 |         <div class="comp">
 6 |           <div class="goodsinfo routeanimate">
 7 |             <div class="section">
 8 |               <div class="location">
 9 |                 <span>当前位置：</span>
10 |                 <a href="/index.html">首页</a> &gt;
11 |                 <a href="javascript:;">支付中心</a>
12 |               </div>
13 |             </div>
14 |             <div class="section">
15 |               <div class="wrapper">
16 |                 <div class="bg-wrap">
17 |                   <div class="nav-tit pay">
18 |                     <a href="javascript:;" class="selected">支付中心</a>
19 |                   </div>
20 |                   <div class="msg-tips">
21 |                     <div class="icon">
22 |                       <i class="iconfont icon-check"></i>
23 |                     </div>
24 |                     <div class="info">
25 |                       <strong>订单已支付成功！</strong><span><span style="font-size: 20px;color: red">{{time}}</span>秒后进入订单详情</span>
26 |                       <p>您可以点击这里进入
27 |                         <router-link to="/vipCenter" style="font-size: 20px;color:red;">会员中心</router-link>查看订单状态！</p>
28 |                       <p>如有其它问题，请立即与我们客服人员联系。</p>
29 |                     </div>
30 |                   </div>
31 |                 </div>
32 |               </div>
33 |             </div>
34 |           </div>
35 |         </div>
36 |       </div>
37 |     </div>
38 |   </div>
39 | </template>
40 | <script>
41 | export default {
42 |   name: 'paySuccess',
43 |   data() {
44 |     return {
45 |       time: 5,
46 |       timeId: 0
47 |     }
48 |   },
49 |   //渲染完成后事件
50 |   mounted() {
51 |     this.timeId = setInterval(() => {
52 |       this.time--;
53 |       if (this.time == 0) {
54 |         clearInterval(this.timeId);
55 |         this.$router.push('/orderDetail/' + this.$route.params.id);
56 |       }
57 |     }, 1000);
58 |   },
59 |   destoryed() {
60 |     clearInterval(this.timeId)
61 |   }
62 | }
63 | 
64 | </script>
65 | 


--------------------------------------------------------------------------------
/src/components/shoppingCart.vue:
--------------------------------------------------------------------------------
  1 |  <template>
  2 |     <div class="shoppingCart">
  3 |         <div class="section">
  4 |             <div class="location">
  5 |                 <span>当前位置：</span>
  6 |                 <a href="/index.html">首页</a> &gt;
  7 |                 <a href="/cart.html">购物车</a>
  8 |             </div>
  9 |         </div>
 10 |         <div class="section">
 11 |             <div class="wrapper">
 12 |                 <div class="bg-wrap">
 13 |                     <!--购物车头部-->
 14 |                     <div class="cart-head clearfix">
 15 |                         <h2>
 16 |                             <i class="iconfont icon-cart"></i>我的购物车</h2>
 17 |                         <div class="cart-setp">
 18 |                             <ul>
 19 |                                 <li class="first active">
 20 |                                     <div class="progress">
 21 |                                         <span>1</span> 放进购物车
 22 |                                     </div>
 23 |                                 </li>
 24 |                                 <li>
 25 |                                     <div class="progress">
 26 |                                         <span>2</span> 填写订单信息
 27 |                                     </div>
 28 |                                 </li>
 29 |                                 <li class="last">
 30 |                                     <div class="progress">
 31 |                                         <span>3</span> 支付/确认订单
 32 |                                     </div>
 33 |                                 </li>
 34 |                             </ul>
 35 |                         </div>
 36 |                     </div>
 37 |                     <!--购物车头部-->
 38 |                     <!--商品列表-->
 39 |                     <div class="cart-box">
 40 |                         <input id="jsondata" name="jsondata" type="hidden">
 41 |                         <table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
 42 |                             <tbody>
 43 |                                 <tr>
 44 |                                     <th width="48" align="center">
 45 |                                         <a>选择</a>
 46 |                                     </th>
 47 |                                     <th align="left" colspan="2">商品信息</th>
 48 |                                     <th width="84" align="left">单价</th>
 49 |                                     <th width="104" align="center">数量</th>
 50 |                                     <th width="104" align="left">金额(元)</th>
 51 |                                     <th width="54" align="center">操作</th>
 52 |                                 </tr>
 53 |                                 <!-- 商品列表 -->
 54 |                                 <tr v-if="message.length == 0">
 55 |                                     <td colspan="10">
 56 |                                         <div class="msg-tips">
 57 |                                             <div class="icon warning">
 58 |                                                 <i class="iconfont icon-tip"></i>
 59 |                                             </div>
 60 |                                             <div class="info">
 61 |                                                 <strong>购物车没有商品！</strong>
 62 |                                                 <p>您的购物车为空，
 63 |                                                     <a href="/index.html">马上去购物</a>吧！</p>
 64 |                                             </div>
 65 |                                         </div>
 66 |                                     </td>
 67 |                                 </tr>
 68 |                                 <!-- 商品列表 -->
 69 |                                 <tr v-for="item in message" :key="item.id">
 70 |                                     <td>
 71 |                                         <el-switch v-model="item.selected" active-color="black" inactive-color="hotpink">
 72 |                                         </el-switch>
 73 |                                     </td>
 74 |                                     <td><img :src="item.img_url" alt="" width=60></td>
 75 |                                     <td>{{item.title}}</td>
 76 |                                     <td>{{item.sell_price}}</td>
 77 |                                     <td>
 78 |                                         <el-input-number size="mini" :min='1' v-model="item.buycount" @change="numChange($event,item.id)"></el-input-number>
 79 |                                     </td>
 80 |                                     <td>{{item.buycount *item.sell_price}}</td>
 81 |                                     <td>
 82 |                                         <el-button @click="delOne(item.id)" type="danger" icon="el-icon-delete" circle></el-button>
 83 |                                     </td>
 84 |                                 </tr>
 85 |                                 <tr>
 86 |                                     <th align="right" colspan="8">
 87 |                                         已选择商品
 88 |                                         <b class="red" id="totalQuantity">{{totalNum}}</b> 件 &nbsp;&nbsp;&nbsp; 商品总金额（不含运费）：
 89 |                                         <span class="red">￥</span>
 90 |                                         <b class="red" id="totalAmount">{{totalPrice}}</b>元
 91 |                                     </th>
 92 |                                 </tr>
 93 |                             </tbody>
 94 |                         </table>
 95 |                     </div>
 96 |                     <!--/商品列表-->
 97 |                     <!--购物车底部-->
 98 |                     <div class="cart-foot clearfix">
 99 |                         <div class="right-box">
100 |                             <button class="button" onclick="javascript:location.href='/index.html';">继续购物</button>
101 |                             <button class="submit" @click="Submit">立即结算</button>
102 |                         </div>
103 |                     </div>
104 |                     <!--购物车底部-->
105 |                 </div>
106 |             </div>
107 |         </div>
108 |     </div>
109 | </template>
110 | <script>
111 | import { Loading } from "element-ui";
112 | export default {
113 |     name: "shoppingCart",
114 |     data() {
115 |         return {
116 |             message: [],
117 |         }
118 |     },
119 |     //生命周期函数
120 |     created() {
121 |         let cartData = this.$store.state.cartDate;
122 |         //定义拼接数据
123 |         let ids = '';
124 |         for (const key in cartData) {
125 |             ids += key;
126 |             ids += ",";
127 |         }
128 |         //去掉最后一个多余的逗号
129 |         ids = ids.slice(0, -1);
130 |         //调用接口
131 |         this.$axios.get(`/site/comment/getshopcargoods/${ids}`).then(response => {
132 |             // console.log(response)
133 |             response.data.message.forEach(v => {
134 |                 v.buycount = cartData[v.id];
135 |                 //设置默认是否被选中
136 |                 v.selected = true;
137 |             });
138 |             this.message = response.data.message;
139 |         })
140 |     },
141 |     //计算属性
142 |     computed: {
143 |         //计算总金额
144 |         totalPrice() {
145 |             let totalPrice = 0;
146 |             this.message.forEach((v, i) => {
147 |                 if (v.selected == true) {
148 |                     totalPrice += v.buycount * v.sell_price;
149 |                 }
150 |             })
151 |             return totalPrice;
152 |         },
153 |         //计算总数
154 |         totalNum() {
155 |             let totalNum = 0;
156 |             this.message.forEach((v, i) => {
157 |                 if (v.selected == true) {
158 |                     totalNum += parseInt(v.buycount);
159 |                 }
160 |             })
161 |             return totalNum;
162 |         }
163 |     },
164 |     methods: {
165 |         //同步购物车的数量
166 |         numChange(num, id) {
167 |             //调用仓库的方法
168 |             console.log(num, id)
169 |             this.$store.commit('updateGoodsNum', {
170 |                 goodId: id,
171 |                 goodNum: num
172 |             })
173 |         },
174 |         //删除数据(同步购物车的数量)
175 |         delOne(id) {
176 |             this.$store.commit('deleteGood', id);
177 |             //删除后更新视图
178 |             this.message.forEach((val, index) => {
179 |                 if (val.id == id) {
180 |                     this.message.splice(index, 1);
181 |                 }
182 |             })
183 |         },
184 |         Submit() {
185 |             //判断是否有商品
186 |             if (this.totalPrice == 0) {
187 |                 this.$Message.error('请先登录!');
188 |                 return;
189 |             }
190 | 
191 |             let ids = '';
192 |             this.message.forEach(v=>{
193 |                 if (v.selected == true) {
194 |                     ids +=v.id;
195 |                     ids += ",";
196 |                 }
197 |             })
198 |             ids = ids.slice(0, -1)
199 |             this.$router.push(`/order/${ids}`);
200 |         }
201 |     }
202 | }
203 | </script>
204 | 
205 | <style>
206 |     .wrapper{
207 |         min-height: 367px;
208 |     }
209 | </style>


--------------------------------------------------------------------------------
/src/components/vipCenter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="el-row">
  3 |         <div class="el-col el-col-24">
  4 |             <div class="comp">
  5 |                 <div class="tmpl routeanimate">
  6 |                     <div class="section">
  7 |                         <div class="location">
  8 |                             <span>当前位置：</span>
  9 |                             <a href="/index.html">首页</a> &gt;
 10 |                             <a href="/user/center/index.html">会员中心</a>
 11 |                         </div>
 12 |                     </div>
 13 |                     <div class="section clearfix">
 14 |                         <div class="left-260">
 15 |                             <div class="bg-wrap">
 16 |                                 <div class="avatar-box">
 17 |                                     <a href="/user/center/avatar.html" class="img-box">
 18 |                                         <!-- <i class="iconfont icon-user-full"></i> -->
 19 |                                         <img src="../../static/images/lst.jpg" alt="">
 20 |                                     </a>
 21 |                                     <h3>
 22 |                                        小刘
 23 |                                     </h3>
 24 |                                     <p>
 25 |                                         <b>注册会员</b>
 26 |                                     </p>
 27 |                                 </div>
 28 |                                 <div class="center-nav">
 29 |                                     <ul>
 30 |                                         <li>
 31 |                                             <h2>
 32 |                                                 <i class="iconfont icon-order"></i>
 33 |                                                 <span>订单管理</span>
 34 |                                             </h2>
 35 |                                             <div class="list">
 36 |                                                 <p>
 37 |                                                 <router-link to="/orderlist">
 38 |                                                         <i class="iconfont icon-arrow-right"></i>交易订单
 39 |                                                     </router-link>
 40 |                                                 </p>
 41 |                                             </div>
 42 |                                         </li>
 43 |                                         <li>
 44 |                                             <h2>
 45 |                                                 <i class="iconfont icon-user"></i>
 46 |                                                 <span>账户管理</span>
 47 |                                             </h2>
 48 |                                             <div class="list">
 49 |                                                 <p>
 50 |                                                     <a href="#/site/member/center" class="router-link-exact-active ">
 51 |                                                         <i class="iconfont icon-arrow-right"></i>账户资料</a>
 52 |                                                 </p>
 53 |                                                 <p>
 54 |                                                     <a href="#/site/member/center" class="router-link-exact-active ">
 55 |                                                         <i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
 56 |                                                 </p>
 57 |                                                 <p>
 58 |                                                     <a href="#/site/member/center" class="router-link-exact-active ">
 59 |                                                         <i class="iconfont icon-arrow-right"></i>修改密码</a>
 60 |                                                 </p>
 61 |                                                 <p>
 62 |                                                     <a href="javascript:void(0)">
 63 |                                                         <i class="iconfont icon-arrow-right"></i>退出登录</a>
 64 |                                                 </p>
 65 |                                             </div>
 66 |                                         </li>
 67 |                                     </ul>
 68 |                                 </div>
 69 |                             </div>
 70 |                         </div>
 71 |                         <div class="right-auto">
 72 |                             <div class="bg-wrap" style="min-height: 765px;">
 73 |                                 <div class="sub-tit">
 74 |                                     <ul>
 75 |                                         <li class="selected">
 76 |                                             <a href="javascript:;">个人中心</a>
 77 |                                         </li>
 78 |                                     </ul>
 79 |                                 </div>
 80 |                                 <div class="center-head clearfix">
 81 |                                     <div class="img-box">
 82 |                                         <img src="../../static/images/lst.jpg" alt="">
 83 |                                     </div>
 84 |                                     <div class="list-box">
 85 |                                         <h3>欢迎您 小刘</h3>
 86 |                                         <ul>
 87 |                                             <li>组别：注册会员</li>
 88 |                                             <li>手机：13987654321</li>
 89 |                                             <li>Email:xiaoliu@qq.com</li>
 90 |                                         </ul>
 91 |                                     </div>
 92 |                                 </div>
 93 |                                 <div class="center-info clearfix"></div>
 94 |                                 <div class="center-tit">
 95 |                                     <span>
 96 |                                         <a href="/user/order-list.html">更多..</a>
 97 |                                     </span>
 98 |                                     <h3>
 99 |                                         <i class="iconfont icon-order"></i>我的订单</h3>
100 |                                 </div>
101 |                                 <div class="center-info clearfix">
102 |                                     <ul>
103 |                                         <li>已完成订单：0个</li>
104 |                                         <li>待完成订单：2个</li>
105 |                                     </ul>
106 |                                 </div>
107 |                             </div>
108 |                         </div>
109 |                     </div>
110 |                 </div>
111 |             </div>
112 |         </div>
113 |     </div>
114 | </template>
115 | 
116 | <script>
117 |    
118 | </script>
119 | 
120 | <style lang='less'>
121 |     .avatar-box {
122 |         height: auto;
123 |     }
124 |     .center-head{
125 |         margin: 37px 22px 0;
126 |     }
127 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import ElementUI from 'element-ui';
 5 | import 'element-ui/lib/theme-chalk/index.css';
 6 | 
 7 | //导入放大镜的包
 8 | import ProductZoomer from 'vue-product-zoomer';
 9 | //导入iview
10 | import iView from 'iview';
11 | import 'iview/dist/styles/iview.css';
12 | //导入moment.js
13 | import moment from 'moment';
14 | 
15 | // 导入 懒加载 vue插件
16 | import VueLazyload from 'vue-lazyload';
17 | Vue.use(VueLazyload,{
18 |     preLoad:1.3,
19 |     loading:require('../static/images/loading.gif'),
20 |       attempt: 1
21 | })
22 | 
23 | //转换时间
24 | Vue.filter('filterDate', function(val) {
25 |     return moment(val).format('YYYY年MM月DD日');
26 | })
27 | 
28 | //注册element
29 | Vue.use(ElementUI);
30 | 
31 | Vue.use(iView);
32 | //注册productZoomer
33 | Vue.use(ProductZoomer);
34 | Vue.config.productionTip = false
35 | 
36 | //导入vuex文件
37 | import { store } from './vuex/store';
38 | import router from './router'
39 | 
40 | 
41 | new Vue({
42 |     render: h => h(App),
43 |     router,
44 |     store,
45 |     beforeCreate(){
46 |     	this.$axios.get('/site/account/islogin').then(response=>{
47 |     		if (response.data.code == 'logined') {
48 |     			store.state.isLogin = true;
49 |     		}
50 |     	})
51 |     }
52 | }).$mount('#app')


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | //导入路由
  3 | import Router from 'vue-router'
  4 | //注册VueRouter
  5 | Vue.use(Router);
  6 | //导入单页面组件
  7 | import Index from '../components/index';
  8 | //导入详情页面
  9 | import Detail from '../components/detail'
 10 | 
 11 | import Cart from '../components/shoppingCart'
 12 | 
 13 | import Login from '../components/login'
 14 | 
 15 | import Order from '../components/order'
 16 | 
 17 | import Pay from '../components/pay'
 18 | 
 19 | import paySuccess from '../components/paySuccess'
 20 | 
 21 | import VipCenter from '../components/vipCenter'
 22 | 
 23 | import OrderList from '../components/orderList'
 24 | 
 25 | import OrderDetail from '../components/orderDetail'
 26 | 
 27 | import axios from 'axios';
 28 | //基础地址
 29 | axios.defaults.baseURL = 'http://47.106.148.205:8899';
 30 | //让ajax携带cookie
 31 | // 跨域请求时 是否会携带 凭证(cookie)
 32 | axios.defaults.withCredentials = true;
 33 | //Vue原型对象存储axios
 34 | Vue.prototype.$axios = axios;
 35 | 
 36 | //定义路由规则
 37 | let routes = [{
 38 |     //首页
 39 |     path: '/',
 40 |     // component: Index,
 41 |     redirect: '/index'
 42 |   },
 43 |   {
 44 |     //首页
 45 |     path: '/index',
 46 |     component: Index
 47 |   },
 48 |   {
 49 |     //详情页
 50 |     path: '/detail/:id',
 51 |     component: Detail
 52 |   },
 53 |   {
 54 |     //购物车
 55 |     path: '/cart',
 56 |     component: Cart
 57 |   },
 58 |   {
 59 |     //登录
 60 |     path: '/login',
 61 |     component: Login
 62 |   },
 63 |   {
 64 |     //订单
 65 |     path: '/order/:id',
 66 |     component: Order,
 67 |     meta: {
 68 |       checkLogin: true
 69 |     }
 70 |   },
 71 |   {
 72 |     //订单详情
 73 |     path: '/pay/:id',
 74 |     component: Pay,
 75 |     meta: {
 76 |       checkLogin: true
 77 |     }
 78 |   },
 79 |   {
 80 |     //订单成功
 81 |     path: '/paySuccess/:id',
 82 |     component: paySuccess,
 83 |     meta: {
 84 |       checkLogin: true
 85 |     }
 86 |   },
 87 |   {
 88 |     //会员中心
 89 |     path: '/vipCenter',
 90 |     component: VipCenter,
 91 |     meta: {
 92 |       checkLogin: true
 93 |     }
 94 |   },
 95 |   {
 96 |     //订单列表
 97 |     path: '/orderlist',
 98 |     component: OrderList,
 99 |     meta: {
100 |       checkLogin: true
101 |     }
102 |   },
103 |   {
104 |     //订单详情
105 |     path: '/orderDetail/:id',
106 |     component: OrderDetail,
107 |     meta: {
108 |       checkLogin: true
109 |     }
110 |   },
111 | ]
112 | 
113 | //实例化路由对象
114 | let router = new Router({
115 |   routes: routes
116 | })
117 | 
118 | // 增加 导航守卫(路由守卫),判断是否是登录状态,不是打回到登录
119 | router.beforeEach((to, from, next) => {
120 |   if (to.meta.checkLogin == true) {
121 |     axios.get("site/account/islogin")
122 |       .then(response => {
123 |         if (response.data.code != 'nologin') {
124 |           next();
125 |         } else {
126 |           next('/login');
127 |         }
128 |       })
129 |   } else {
130 |     next();
131 |   }
132 | })
133 | export default new Router({
134 |   routes,
135 | })
136 | 


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | Vue.use(Vuex)
 4 | //创建一个 stores
 5 | const stores = new Vuex.Store({
 6 |   state: {
 7 |     cartDate: JSON.parse(window.localStorage.getItem('goodkey')) || {},
 8 |     isLogin: false,
 9 |     pathFrom: ''
10 |   },
11 |   mutations: {
12 |     // 传入的数据是一个对象 格式{goodId:商品id,goodNum:数量}
13 |     addGoods(state, goodsInfo) {
14 |       if (state.cartDate[goodsInfo.goodId] == undefined) {
15 |         // state.cartDate[goodInfo.goodId] = goodInfo.goodNum;
16 |         // 为了要让Vue检测到数据的改变同步修改页面显示 需要调用Vue.set方法
17 |         Vue.set(state.cartDate, goodsInfo.goodId, goodsInfo.goodNum);
18 |       } else {
19 |         //传过来的id已存在则累加
20 |         state.cartDate[goodsInfo.goodId] += goodsInfo.goodNum;
21 |       }
22 |     },
23 |     //更新数量时同步购物车的数量
24 |     updateGoodsNum(state, goodsInfo) {
25 |       state.cartDate[goodsInfo.goodId] = goodsInfo.goodNum;
26 |     },
27 |     deleteGood(state, goodId) {
28 |       //要调用Vue.delete方法
29 |       Vue.delete(state.cartDate, goodId);
30 |     },
31 |     changeLoginStatus(state, isLogin) {
32 |       state.isLogin = isLogin;
33 |     }
34 |   },
35 |   getters: {
36 |     goodsCount: state => {
37 |       //临时num
38 |       let num = 0;
39 |       //遍历对象
40 |       for (const key in state.cartDate) {
41 |         num += state.cartDate[key];
42 |       }
43 |       return num;
44 |     }
45 |   }
46 | })
47 | 
48 | window.onbeforeunload = function() {
49 |   window.localStorage.setItem('goodkey', JSON.stringify(store.state.cartDate));
50 | }
51 | //暴露出去
52 | export const store = stores;
53 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/.gitkeep


--------------------------------------------------------------------------------
/static/css/style.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
 3 | h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
 4 | body>div{margin:0 auto}
 5 | div {text-align:left}
 6 | a img {border:0}
 7 | body { color: #333; text-align: center; font: 12px "微软雅黑"; background-color: #2B2B2B; }
 8 | ul, ol, li {list-style-type:none;vertical-align:0}
 9 | 
10 | .menu{height:48px;display:block;padding:0px;width:999px;margin:0px auto 0 auto;}
11 | .menu ul{list-style:none;padding:0;margin:0;}
12 | .menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;}
13 | .menu ul li a{position:relative;display:block;width:111px;height:48px;font-family:"微软雅黑", "宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;}
14 | .menu ul li a span{position:absolute;left:0;width:111px;}
15 | .menu ul li a span.out{top:0px;}
16 | .menu ul li a span.over,  .menu ul li a span.bg{top:-48px;}
17 | #menu2{background-image:url(../images/s_03.jpg);background-repeat:repeat;}
18 | #menu2 ul li a{color:#FFFFFF;}
19 | #menu2 ul li a span.over{color:#FFF;height:48px;width:111px;background-image:url(../images/w_03.jpg);background-repeat:repeat;}


--------------------------------------------------------------------------------
/static/images/bodyBg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/bodyBg.jpg


--------------------------------------------------------------------------------
/static/images/bodyBg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/bodyBg2.jpg


--------------------------------------------------------------------------------
/static/images/bodyBg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/bodyBg3.jpg


--------------------------------------------------------------------------------
/static/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/loading.gif


--------------------------------------------------------------------------------
/static/images/lst.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/lst.JPG


--------------------------------------------------------------------------------
/static/images/s_03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/s_03.jpg


--------------------------------------------------------------------------------
/static/images/w_03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/images/w_03.jpg


--------------------------------------------------------------------------------
/static/site/css/icon/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 | 


--------------------------------------------------------------------------------
/static/site/css/icon/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-error"></i>
 17 |                     <div class="name">Error</div>
 18 |                     <div class="fontclass">.icon-error</div>
 19 |                 </li>
 20 |             
 21 |                 <li>
 22 |                 <i class="icon iconfont icon-reply"></i>
 23 |                     <div class="name">返回</div>
 24 |                     <div class="fontclass">.icon-reply</div>
 25 |                 </li>
 26 |             
 27 |                 <li>
 28 |                 <i class="icon iconfont icon-cart"></i>
 29 |                     <div class="name">购物车</div>
 30 |                     <div class="fontclass">.icon-cart</div>
 31 |                 </li>
 32 |             
 33 |                 <li>
 34 |                 <i class="icon iconfont icon-plus"></i>
 35 |                     <div class="name">加号</div>
 36 |                     <div class="fontclass">.icon-plus</div>
 37 |                 </li>
 38 |             
 39 |                 <li>
 40 |                 <i class="icon iconfont icon-play"></i>
 41 |                     <div class="name">播放</div>
 42 |                     <div class="fontclass">.icon-play</div>
 43 |                 </li>
 44 |             
 45 |                 <li>
 46 |                 <i class="icon iconfont icon-phone"></i>
 47 |                     <div class="name">电话</div>
 48 |                     <div class="fontclass">.icon-phone</div>
 49 |                 </li>
 50 |             
 51 |                 <li>
 52 |                 <i class="icon iconfont icon-user-full"></i>
 53 |                     <div class="name">用户</div>
 54 |                     <div class="fontclass">.icon-user-full</div>
 55 |                 </li>
 56 |             
 57 |                 <li>
 58 |                 <i class="icon iconfont icon-user"></i>
 59 |                     <div class="name">User</div>
 60 |                     <div class="fontclass">.icon-user</div>
 61 |                 </li>
 62 |             
 63 |                 <li>
 64 |                 <i class="icon iconfont icon-close"></i>
 65 |                     <div class="name">close</div>
 66 |                     <div class="fontclass">.icon-close</div>
 67 |                 </li>
 68 |             
 69 |                 <li>
 70 |                 <i class="icon iconfont icon-check"></i>
 71 |                     <div class="name">正确</div>
 72 |                     <div class="fontclass">.icon-check</div>
 73 |                 </li>
 74 |             
 75 |                 <li>
 76 |                 <i class="icon iconfont icon-view"></i>
 77 |                     <div class="name">查看</div>
 78 |                     <div class="fontclass">.icon-view</div>
 79 |                 </li>
 80 |             
 81 |                 <li>
 82 |                 <i class="icon iconfont icon-date"></i>
 83 |                     <div class="name">日期</div>
 84 |                     <div class="fontclass">.icon-date</div>
 85 |                 </li>
 86 |             
 87 |                 <li>
 88 |                 <i class="icon iconfont icon-top-label"></i>
 89 |                     <div class="name">标签</div>
 90 |                     <div class="fontclass">.icon-top-label</div>
 91 |                 </li>
 92 |             
 93 |                 <li>
 94 |                 <i class="icon iconfont icon-order"></i>
 95 |                     <div class="name">购物</div>
 96 |                     <div class="fontclass">.icon-order</div>
 97 |                 </li>
 98 |             
 99 |                 <li>
100 |                 <i class="icon iconfont icon-comment"></i>
101 |                     <div class="name">评论</div>
102 |                     <div class="fontclass">.icon-comment</div>
103 |                 </li>
104 |             
105 |                 <li>
106 |                 <i class="icon iconfont icon-search"></i>
107 |                     <div class="name">放大镜</div>
108 |                     <div class="fontclass">.icon-search</div>
109 |                 </li>
110 |             
111 |                 <li>
112 |                 <i class="icon iconfont icon-right-label"></i>
113 |                     <div class="name">标签</div>
114 |                     <div class="fontclass">.icon-right-label</div>
115 |                 </li>
116 |             
117 |                 <li>
118 |                 <i class="icon iconfont icon-point"></i>
119 |                     <div class="name">积分</div>
120 |                     <div class="fontclass">.icon-point</div>
121 |                 </li>
122 |             
123 |                 <li>
124 |                 <i class="icon iconfont icon-arrow-left"></i>
125 |                     <div class="name">arrow</div>
126 |                     <div class="fontclass">.icon-arrow-left</div>
127 |                 </li>
128 |             
129 |                 <li>
130 |                 <i class="icon iconfont icon-attach"></i>
131 |                     <div class="name">09附件</div>
132 |                     <div class="fontclass">.icon-attach</div>
133 |                 </li>
134 |             
135 |                 <li>
136 |                 <i class="icon iconfont icon-down"></i>
137 |                     <div class="name">下载</div>
138 |                     <div class="fontclass">.icon-down</div>
139 |                 </li>
140 |             
141 |                 <li>
142 |                 <i class="icon iconfont icon-tip"></i>
143 |                     <div class="name">tip</div>
144 |                     <div class="fontclass">.icon-tip</div>
145 |                 </li>
146 |             
147 |                 <li>
148 |                 <i class="icon iconfont icon-amount"></i>
149 |                     <div class="name">余额</div>
150 |                     <div class="fontclass">.icon-amount</div>
151 |                 </li>
152 |             
153 |                 <li>
154 |                 <i class="icon iconfont icon-arrow-right"></i>
155 |                     <div class="name">arrow</div>
156 |                     <div class="fontclass">.icon-arrow-right</div>
157 |                 </li>
158 |             
159 |         </ul>
160 | 
161 |         <h2 id="font-class-">font-class引用</h2>
162 |         <hr>
163 | 
164 |         <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
165 |         <p>与unicode使用方式相比，具有如下特点：</p>
166 |         <ul>
167 |         <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
168 |         <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
169 |         <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
170 |         <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
171 |         </ul>
172 |         <p>使用步骤如下：</p>
173 |         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
174 | 
175 | 
176 |         <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>
177 |         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
178 |         <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>
179 |         <blockquote>
180 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
181 |         </blockquote>
182 |     </div>
183 | </body>
184 | </html>
185 | 


--------------------------------------------------------------------------------
/static/site/css/icon/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-error"></use>
 33 |                     </svg>
 34 |                     <div class="name">Error</div>
 35 |                     <div class="fontclass">#icon-error</div>
 36 |                 </li>
 37 |             
 38 |                 <li>
 39 |                     <svg class="icon" aria-hidden="true">
 40 |                         <use xlink:href="#icon-reply"></use>
 41 |                     </svg>
 42 |                     <div class="name">返回</div>
 43 |                     <div class="fontclass">#icon-reply</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">购物车</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-plus"></use>
 57 |                     </svg>
 58 |                     <div class="name">加号</div>
 59 |                     <div class="fontclass">#icon-plus</div>
 60 |                 </li>
 61 |             
 62 |                 <li>
 63 |                     <svg class="icon" aria-hidden="true">
 64 |                         <use xlink:href="#icon-play"></use>
 65 |                     </svg>
 66 |                     <div class="name">播放</div>
 67 |                     <div class="fontclass">#icon-play</div>
 68 |                 </li>
 69 |             
 70 |                 <li>
 71 |                     <svg class="icon" aria-hidden="true">
 72 |                         <use xlink:href="#icon-phone"></use>
 73 |                     </svg>
 74 |                     <div class="name">电话</div>
 75 |                     <div class="fontclass">#icon-phone</div>
 76 |                 </li>
 77 |             
 78 |                 <li>
 79 |                     <svg class="icon" aria-hidden="true">
 80 |                         <use xlink:href="#icon-user-full"></use>
 81 |                     </svg>
 82 |                     <div class="name">用户</div>
 83 |                     <div class="fontclass">#icon-user-full</div>
 84 |                 </li>
 85 |             
 86 |                 <li>
 87 |                     <svg class="icon" aria-hidden="true">
 88 |                         <use xlink:href="#icon-user"></use>
 89 |                     </svg>
 90 |                     <div class="name">User</div>
 91 |                     <div class="fontclass">#icon-user</div>
 92 |                 </li>
 93 |             
 94 |                 <li>
 95 |                     <svg class="icon" aria-hidden="true">
 96 |                         <use xlink:href="#icon-close"></use>
 97 |                     </svg>
 98 |                     <div class="name">close</div>
 99 |                     <div class="fontclass">#icon-close</div>
100 |                 </li>
101 |             
102 |                 <li>
103 |                     <svg class="icon" aria-hidden="true">
104 |                         <use xlink:href="#icon-check"></use>
105 |                     </svg>
106 |                     <div class="name">正确</div>
107 |                     <div class="fontclass">#icon-check</div>
108 |                 </li>
109 |             
110 |                 <li>
111 |                     <svg class="icon" aria-hidden="true">
112 |                         <use xlink:href="#icon-view"></use>
113 |                     </svg>
114 |                     <div class="name">查看</div>
115 |                     <div class="fontclass">#icon-view</div>
116 |                 </li>
117 |             
118 |                 <li>
119 |                     <svg class="icon" aria-hidden="true">
120 |                         <use xlink:href="#icon-date"></use>
121 |                     </svg>
122 |                     <div class="name">日期</div>
123 |                     <div class="fontclass">#icon-date</div>
124 |                 </li>
125 |             
126 |                 <li>
127 |                     <svg class="icon" aria-hidden="true">
128 |                         <use xlink:href="#icon-top-label"></use>
129 |                     </svg>
130 |                     <div class="name">标签</div>
131 |                     <div class="fontclass">#icon-top-label</div>
132 |                 </li>
133 |             
134 |                 <li>
135 |                     <svg class="icon" aria-hidden="true">
136 |                         <use xlink:href="#icon-order"></use>
137 |                     </svg>
138 |                     <div class="name">购物</div>
139 |                     <div class="fontclass">#icon-order</div>
140 |                 </li>
141 |             
142 |                 <li>
143 |                     <svg class="icon" aria-hidden="true">
144 |                         <use xlink:href="#icon-comment"></use>
145 |                     </svg>
146 |                     <div class="name">评论</div>
147 |                     <div class="fontclass">#icon-comment</div>
148 |                 </li>
149 |             
150 |                 <li>
151 |                     <svg class="icon" aria-hidden="true">
152 |                         <use xlink:href="#icon-search"></use>
153 |                     </svg>
154 |                     <div class="name">放大镜</div>
155 |                     <div class="fontclass">#icon-search</div>
156 |                 </li>
157 |             
158 |                 <li>
159 |                     <svg class="icon" aria-hidden="true">
160 |                         <use xlink:href="#icon-right-label"></use>
161 |                     </svg>
162 |                     <div class="name">标签</div>
163 |                     <div class="fontclass">#icon-right-label</div>
164 |                 </li>
165 |             
166 |                 <li>
167 |                     <svg class="icon" aria-hidden="true">
168 |                         <use xlink:href="#icon-point"></use>
169 |                     </svg>
170 |                     <div class="name">积分</div>
171 |                     <div class="fontclass">#icon-point</div>
172 |                 </li>
173 |             
174 |                 <li>
175 |                     <svg class="icon" aria-hidden="true">
176 |                         <use xlink:href="#icon-arrow-left"></use>
177 |                     </svg>
178 |                     <div class="name">arrow</div>
179 |                     <div class="fontclass">#icon-arrow-left</div>
180 |                 </li>
181 |             
182 |                 <li>
183 |                     <svg class="icon" aria-hidden="true">
184 |                         <use xlink:href="#icon-attach"></use>
185 |                     </svg>
186 |                     <div class="name">09附件</div>
187 |                     <div class="fontclass">#icon-attach</div>
188 |                 </li>
189 |             
190 |                 <li>
191 |                     <svg class="icon" aria-hidden="true">
192 |                         <use xlink:href="#icon-down"></use>
193 |                     </svg>
194 |                     <div class="name">下载</div>
195 |                     <div class="fontclass">#icon-down</div>
196 |                 </li>
197 |             
198 |                 <li>
199 |                     <svg class="icon" aria-hidden="true">
200 |                         <use xlink:href="#icon-tip"></use>
201 |                     </svg>
202 |                     <div class="name">tip</div>
203 |                     <div class="fontclass">#icon-tip</div>
204 |                 </li>
205 |             
206 |                 <li>
207 |                     <svg class="icon" aria-hidden="true">
208 |                         <use xlink:href="#icon-amount"></use>
209 |                     </svg>
210 |                     <div class="name">余额</div>
211 |                     <div class="fontclass">#icon-amount</div>
212 |                 </li>
213 |             
214 |                 <li>
215 |                     <svg class="icon" aria-hidden="true">
216 |                         <use xlink:href="#icon-arrow-right"></use>
217 |                     </svg>
218 |                     <div class="name">arrow</div>
219 |                     <div class="fontclass">#icon-arrow-right</div>
220 |                 </li>
221 |             
222 |         </ul>
223 | 
224 | 
225 |         <h2 id="symbol-">symbol引用</h2>
226 |         <hr>
227 | 
228 |         <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
229 |         这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
230 |         <ul>
231 |           <li>支持多色图标了，不再受单色限制。</li>
232 |           <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
233 |           <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
234 |           <li>浏览器渲染svg的性能一般，还不如png。</li>
235 |         </ul>
236 |         <p>使用步骤如下：</p>
237 |         <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
238 |         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
239 |         <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
240 |         <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
241 | .icon {
242 |    width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
243 |    vertical-align: <span class="hljs-number">-0.15</span>em;
244 |    fill: currentColor;
245 |    overflow: hidden;
246 | }
247 | &lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
248 |         <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
249 |         <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">
250 |   &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>
251 | </span>&lt;<span class="hljs-regexp">/svg&gt;
252 |         </span></code></pre>
253 |     </div>
254 | </body>
255 | </html>
256 | 


--------------------------------------------------------------------------------
/static/site/css/icon/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">&#xe600;</i>
 37 |                     <div class="name">Error</div>
 38 |                     <div class="code">&amp;#xe600;</div>
 39 |                 </li>
 40 |             
 41 |                 <li>
 42 |                 <i class="icon iconfont">&#xe607;</i>
 43 |                     <div class="name">返回</div>
 44 |                     <div class="code">&amp;#xe607;</div>
 45 |                 </li>
 46 |             
 47 |                 <li>
 48 |                 <i class="icon iconfont">&#xe601;</i>
 49 |                     <div class="name">购物车</div>
 50 |                     <div class="code">&amp;#xe601;</div>
 51 |                 </li>
 52 |             
 53 |                 <li>
 54 |                 <i class="icon iconfont">&#xe676;</i>
 55 |                     <div class="name">加号</div>
 56 |                     <div class="code">&amp;#xe676;</div>
 57 |                 </li>
 58 |             
 59 |                 <li>
 60 |                 <i class="icon iconfont">&#xe602;</i>
 61 |                     <div class="name">播放</div>
 62 |                     <div class="code">&amp;#xe602;</div>
 63 |                 </li>
 64 |             
 65 |                 <li>
 66 |                 <i class="icon iconfont">&#xe603;</i>
 67 |                     <div class="name">电话</div>
 68 |                     <div class="code">&amp;#xe603;</div>
 69 |                 </li>
 70 |             
 71 |                 <li>
 72 |                 <i class="icon iconfont">&#xe6ce;</i>
 73 |                     <div class="name">用户</div>
 74 |                     <div class="code">&amp;#xe6ce;</div>
 75 |                 </li>
 76 |             
 77 |                 <li>
 78 |                 <i class="icon iconfont">&#xe6f5;</i>
 79 |                     <div class="name">User</div>
 80 |                     <div class="code">&amp;#xe6f5;</div>
 81 |                 </li>
 82 |             
 83 |                 <li>
 84 |                 <i class="icon iconfont">&#xe659;</i>
 85 |                     <div class="name">close</div>
 86 |                     <div class="code">&amp;#xe659;</div>
 87 |                 </li>
 88 |             
 89 |                 <li>
 90 |                 <i class="icon iconfont">&#xe61f;</i>
 91 |                     <div class="name">正确</div>
 92 |                     <div class="code">&amp;#xe61f;</div>
 93 |                 </li>
 94 |             
 95 |                 <li>
 96 |                 <i class="icon iconfont">&#xe61b;</i>
 97 |                     <div class="name">查看</div>
 98 |                     <div class="code">&amp;#xe61b;</div>
 99 |                 </li>
100 |             
101 |                 <li>
102 |                 <i class="icon iconfont">&#xe721;</i>
103 |                     <div class="name">日期</div>
104 |                     <div class="code">&amp;#xe721;</div>
105 |                 </li>
106 |             
107 |                 <li>
108 |                 <i class="icon iconfont">&#xe60d;</i>
109 |                     <div class="name">标签</div>
110 |                     <div class="code">&amp;#xe60d;</div>
111 |                 </li>
112 |             
113 |                 <li>
114 |                 <i class="icon iconfont">&#xe62a;</i>
115 |                     <div class="name">购物</div>
116 |                     <div class="code">&amp;#xe62a;</div>
117 |                 </li>
118 |             
119 |                 <li>
120 |                 <i class="icon iconfont">&#xe7e9;</i>
121 |                     <div class="name">评论</div>
122 |                     <div class="code">&amp;#xe7e9;</div>
123 |                 </li>
124 |             
125 |                 <li>
126 |                 <i class="icon iconfont">&#xe629;</i>
127 |                     <div class="name">放大镜</div>
128 |                     <div class="code">&amp;#xe629;</div>
129 |                 </li>
130 |             
131 |                 <li>
132 |                 <i class="icon iconfont">&#xe628;</i>
133 |                     <div class="name">标签</div>
134 |                     <div class="code">&amp;#xe628;</div>
135 |                 </li>
136 |             
137 |                 <li>
138 |                 <i class="icon iconfont">&#xe606;</i>
139 |                     <div class="name">积分</div>
140 |                     <div class="code">&amp;#xe606;</div>
141 |                 </li>
142 |             
143 |                 <li>
144 |                 <i class="icon iconfont">&#xe604;</i>
145 |                     <div class="name">arrow</div>
146 |                     <div class="code">&amp;#xe604;</div>
147 |                 </li>
148 |             
149 |                 <li>
150 |                 <i class="icon iconfont">&#xe644;</i>
151 |                     <div class="name">09附件</div>
152 |                     <div class="code">&amp;#xe644;</div>
153 |                 </li>
154 |             
155 |                 <li>
156 |                 <i class="icon iconfont">&#xe87a;</i>
157 |                     <div class="name">下载</div>
158 |                     <div class="code">&amp;#xe87a;</div>
159 |                 </li>
160 |             
161 |                 <li>
162 |                 <i class="icon iconfont">&#xe605;</i>
163 |                     <div class="name">tip</div>
164 |                     <div class="code">&amp;#xe605;</div>
165 |                 </li>
166 |             
167 |                 <li>
168 |                 <i class="icon iconfont">&#xe6a0;</i>
169 |                     <div class="name">余额</div>
170 |                     <div class="code">&amp;#xe6a0;</div>
171 |                 </li>
172 |             
173 |                 <li>
174 |                 <i class="icon iconfont">&#xe87b;</i>
175 |                     <div class="name">arrow</div>
176 |                     <div class="code">&amp;#xe87b;</div>
177 |                 </li>
178 |             
179 |         </ul>
180 |         <h2 id="unicode-">unicode引用</h2>
181 |         <hr>
182 | 
183 |         <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
184 |         <ul>
185 |         <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
186 |         <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
187 |         <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
188 |         </ul>
189 |         <blockquote>
190 |         <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
191 |         </blockquote>
192 |         <p>unicode使用步骤如下：</p>
193 |         <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
194 |         <pre><code class="lang-js hljs javascript">@font-face {
195 |   font-family: <span class="hljs-string">'iconfont'</span>;
196 |   src: url(<span class="hljs-string">'iconfont.eot'</span>);
197 |   src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
198 |   url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
199 |   url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
200 |   url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
201 | }
202 | </code></pre>
203 |         <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
204 |         <pre><code class="lang-js hljs javascript">.iconfont{
205 |   font-family:<span class="hljs-string">"iconfont"</span> !important;
206 |   font-size:<span class="hljs-number">16</span>px;font-style:normal;
207 |   -webkit-font-smoothing: antialiased;
208 |   -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
209 |   -moz-osx-font-smoothing: grayscale;
210 | }
211 | </code></pre>
212 |         <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
213 |         <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>
214 | 
215 |         <blockquote>
216 |         <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
217 |         </blockquote>
218 |     </div>
219 | 
220 | 
221 | </body>
222 | </html>
223 | 


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "iconfont";
 3 |   src: url('iconfont.eot?t=1496954256369'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1496954256369#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('iconfont.woff?t=1496954256369') format('woff'), /* chrome, firefox */
 6 |   url('iconfont.ttf?t=1496954256369') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1496954256369#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-error:before { content: "\e600"; }
19 | 
20 | .icon-reply:before { content: "\e607"; }
21 | 
22 | .icon-cart:before { content: "\e601"; }
23 | 
24 | .icon-plus:before { content: "\e676"; }
25 | 
26 | .icon-play:before { content: "\e602"; }
27 | 
28 | .icon-phone:before { content: "\e603"; }
29 | 
30 | .icon-user-full:before { content: "\e6ce"; }
31 | 
32 | .icon-user:before { content: "\e6f5"; }
33 | 
34 | .icon-close:before { content: "\e659"; }
35 | 
36 | .icon-check:before { content: "\e61f"; }
37 | 
38 | .icon-view:before { content: "\e61b"; }
39 | 
40 | .icon-date:before { content: "\e721"; }
41 | 
42 | .icon-top-label:before { content: "\e60d"; }
43 | 
44 | .icon-order:before { content: "\e62a"; }
45 | 
46 | .icon-comment:before { content: "\e7e9"; }
47 | 
48 | .icon-search:before { content: "\e629"; }
49 | 
50 | .icon-right-label:before { content: "\e628"; }
51 | 
52 | .icon-point:before { content: "\e606"; }
53 | 
54 | .icon-arrow-left:before { content: "\e604"; }
55 | 
56 | .icon-attach:before { content: "\e644"; }
57 | 
58 | .icon-down:before { content: "\e87a"; }
59 | 
60 | .icon-tip:before { content: "\e605"; }
61 | 
62 | .icon-amount:before { content: "\e6a0"; }
63 | 
64 | .icon-arrow-right:before { content: "\e87b"; }
65 | 
66 | 


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/site/css/icon/iconfont.eot


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.js:
--------------------------------------------------------------------------------
1 | (function(window){var svgSprite="<svg>"+""+'<symbol id="icon-error" viewBox="0 0 1000 1000">'+""+'<path d="M500 0C223.875 0 0 223.8125 0 500c0 276.125 223.875 500 500 500 276.1875 0 500-223.875 500-500C1000 223.8125 776.1875 0 500 0zM500 937.5c-241.1875 0-437.5-196.3125-437.5-437.5 0-241.25 196.3125-437.5 437.5-437.5s437.5 196.25 437.5 437.5C937.5 741.1875 741.1875 937.5 500 937.5zM654.6875 301.0625 500 455.8125 345.3125 301.125 301.125 345.3125 455.75 500 301.0625 654.6875 345.25 698.875 500 544.1875 654.6875 698.875 698.875 654.6875 544.1875 500 698.875 345.25Z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-reply" viewBox="0 0 1000 1000">'+""+'<path d="M947.503 858.589c-10.048 0-18.854-7.077-20.88-17.093-0.285-1.344-14.252-65.089-73.791-127.716-75.827-79.761-193.167-123.637-340.276-127.478v173.267c0 8.014-4.493 15.348-11.631 18.99-7.137 3.641-15.715 2.974-22.203-1.73l-408.722-296.297c-5.525-4.005-8.799-10.413-8.806-17.237-0.007-6.823 3.252-13.239 8.769-17.255l408.722-297.65c6.484-4.721 15.070-5.406 22.219-1.767 7.15 3.637 11.652 10.979 11.652 19.001v183.978c26.33 0.97 72.263 4.876 125.513 19.007 84.756 22.494 155.127 61.751 209.163 116.682 83.154 84.534 124.068 203.077 121.604 352.334-0.179 10.893-8.544 19.898-19.393 20.88-0.651 0.059-1.299 0.087-1.94 0.087zM491.236 543.388c94.48 0 178.254 14.877 248.995 44.214 57.33 23.776 106.252 57.021 145.402 98.81 12.854 13.721 23.795 27.443 33.093 40.692-14.191-86.409-48.282-157.413-101.894-211.917-115.387-117.301-286.238-123.245-319.314-123.245-3.529 0-5.467 0.069-5.486 0.069-5.794 0.207-11.418-1.94-15.585-5.957-4.166-4.018-6.531-9.557-6.531-15.345v-163.187l-351.133 255.711 351.133 254.547v-153.074c0-11.774 9.545-21.318 21.319-21.318z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-cart" viewBox="0 0 1024 1024">'+""+'<path d="M339.008 776.992q19.008 0 36 7.008t30.016 19.488 20 29.504 7.008 36-7.008 36-20 29.504-30.016 20-36 7.488q-20 0-36.512-7.488t-29.504-20-20-29.504-7.008-36 7.008-36 20-29.504 29.504-19.488 36.512-7.008zM755.008 779.008q19.008 0 36.512 7.008t30.016 19.488 20 29.504 7.488 36-7.488 36-20 29.504-30.016 20-36.512 7.488-36-7.488-29.504-20-20-29.504-7.488-36 7.488-36 20-29.504 29.504-19.488 36-7.008zM923.008 211.008q28 0 43.488 7.488t22.016 18.496 6.016 23.488-3.488 21.504-12.512 36.992-21.504 61.504-23.488 66.496-17.504 52q-12.992 40-32.992 55.488t-48.992 15.488l-524.992 0 15.008 90.016 504 0q48 0 48 40.992 0 20-9.504 34.496t-37.504 14.496l-524 0q-20 0-33.504-8.992t-22.496-23.488-14.496-31.488-8.512-32q-0.992-6.016-5.504-28.992t-11.008-57.504-14.496-76.992-16-85.504q-19.008-100.992-43.008-224.992l-75.008 0q-15.008 0-24.992-7.488t-16.512-18.016-8.992-22.496-2.496-22.016q0-20 13.504-32.992t36.512-12.992l100.992 0q20 0 32 6.016t19.008 15.008 10.016 19.008 4.992 16.992q2.016 8 4 22.496t4 29.504q3.008 18.016 6.016 38.016l684 0z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-plus" viewBox="0 0 1024 1024">'+""+'<path d="M929.331 473.925h-379.898v-379.898h-76.8v379.898h-379.898v76.8h379.898v379.899h76.8v-379.899h379.898z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-play" viewBox="0 0 1024 1024">'+""+'<path d="M511.978679 0c-284.064214 0-511.605555 225.13203-511.605555 508.876424s227.541341 515.123576 511.605555 515.123576c284.085535 0 511.626877-231.400504 511.626877-515.123576S796.064214 0 511.978679 0zM511.317717 946.603536c-241.698711 0-434.806088-197.13711-434.806088-438.537323 0-241.421534 193.086056-432.055635 434.806088-432.055635 241.698711 0 434.784767 190.634102 434.784767 432.055635C946.081163 749.466425 753.016428 946.603536 511.317717 946.603536zM463.323381 325.171758c-9.722531-8.166073-26.545068-8.166073-36.267599 0l0 374.679909c9.722531 8.187395 26.545068 8.187395 36.267599 0l212.893581-172.916068c9.70121-8.166073 9.70121-21.406625 0-29.572699L463.323381 325.171758z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-phone" viewBox="0 0 1024 1024">'+""+'<path d="M744.427 982.020h-0.018l-4.619-0.103c-107.473-5.497-252.61-106.652-388.285-270.596l-50.115-60.532c-135.675-163.956-206.757-324.085-190.134-428.353 11.732-73.561 121.098-135.641 183.59-135.641 30.78 0 41.931 15.318 45.83 24.464 35.376 62.868 79.148 172.199 79.349 211.412l0.013 2.791-1.001 2.605c-7.802 20.612-25.259 30.487-40.661 39.198-20.29 11.466-31.821 18.995-33.229 40.67-0.419 6.578 5.255 36.501 94.765 146.841l38.269 46.209c89.758 105.929 117.998 117.331 124.61 118.274 21.645 3.011 31.837-6.48 47.405-23.545 11.851-12.994 25.295-27.741 47.478-30.989l2.809-0.4 2.762 0.586c39.088 8.243 139.142 72.724 195.943 120.597 8.201 5.443 22.513 21.602 11.18 57.299-17.778 56.063-95.281 139.212-165.939 139.212v0z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-user-full" viewBox="0 0 1024 1024">'+""+'<path d="M502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM502.496 63.136c125.888 0 227.936 100.384 227.936 224.192 0 123.84-102.048 224.224-227.936 224.224-125.888 0-227.936-100.384-227.936-224.224C274.56 163.488 376.64 63.136 502.496 63.136L502.496 63.136zM417.024 586.304l189.984 0c162.624 0 294.432 129.632 294.432 289.6l0 18.656c0 63.04-131.84 65.44-294.432 65.44l-189.984 0c-162.624 0-294.432-0.096-294.432-65.44l0-18.656C122.592 715.936 254.4 586.304 417.024 586.304L417.024 586.304zM417.024 586.304"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-user" viewBox="0 0 1024 1024">'+""+'<path d="M940.658139 734.92823c-23.397715-80.992091-112.888976-155.784787-196.380822-168.083586l-21.09794-0.299971c-7.399277-0.09999-18.498194 2.699736-24.997559 6.299385 0 0-16.698369 9.599063-32.096866 16.198418-45.795528 19.798067-97.990431 30.996973-153.485011 30.996973-55.19461 0-107.189532-11.098916-152.78508-30.697002-15.598477-6.699346-32.796797-16.498389-32.796797-16.498389-6.399375-3.599648-17.598281-6.399375-24.997559-6.299385l-20.797969 0.19998c-83.791817 11.098916-171.983205 85.291671-197.080754 165.78381 0 0-26.897373 54.194708-30.597012 160.884289-0.19998 13.798652 10.998926 31.596914 25.29753 38.996192 0 0 142.786056 91.591056 433.157699 91.591056 290.371643 0 433.157699-91.591056 433.157699-91.591056 14.198613-7.699248 25.5975-27.097354 25.29753-39.296162C966.75559 786.923152 940.658139 734.92823 940.658139 734.92823zM875.964457 888.413241c0 0-119.988282 62.293917-363.964457 62.293917-244.076164 0-363.964457-62.293917-363.964457-62.293917-12.098818-5.099502-21.497901-17.09833-21.29792-26.497412 3.199688-72.492921 25.69749-109.389317 25.69749-109.389317 21.09794-54.694659 75.792598-105.189728 146.185724-112.688995l17.498291-0.09999c6.199395 0 15.598477 1.899814 20.997949 4.29958 0 0 14.398594 6.699346 27.497315 11.198906 38.39625 13.298701 101.490089 20.897959 147.885558 20.897959 46.59545 0 107.689483-7.599258 146.185724-21.09794 12.89874-4.499561 26.997364-10.998926 26.997364-10.998926 5.399473-2.399766 14.798555-4.29958 20.997949-4.29958l17.698272 0.19998c70.193145 8.39918 128.187482 59.194219 147.885558 114.288839 0 0 21.897862 35.396543 24.997559 107.489503C897.462357 870.015038 887.963285 883.213749 875.964457 888.413241zM511.80002 526.048628c145.285812 0 262.974319-117.788497 262.974319-262.974319S657.085831 0 511.80002 0s-262.974319 117.788497-262.974319 262.974319S366.514208 526.048628 511.80002 526.048628zM511.80002 73.192852c104.889757 0 189.781467 84.9917 189.781467 189.781467s-84.9917 189.781467-189.781467 189.781467S322.018553 367.864076 322.018553 262.974319 407.010253 73.192852 511.80002 73.192852z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-close" viewBox="0 0 1024 1024">'+""+'<path d="M571.126 510.183l348.623-346.817c16.488-16.401 16.569-42.979 0.169-59.466-16.444-16.526-42.979-16.569-59.464-0.168l-348.71 346.861-345.683-346.733c-16.358-16.401-42.979-16.485-59.465-0.084-16.443 16.401-16.484 43.021-0.084 59.507l345.599 346.649-348.458 346.608c-16.485 16.4-16.569 42.979-0.168 59.464 8.2 8.243 19.008 12.404 29.816 12.404 10.722 0 21.447-4.078 29.648-12.235l348.542-346.692 348.836 349.887c8.199 8.244 18.966 12.365 29.773 12.365 10.766 0 21.489-4.12 29.69-12.279 16.444-16.4 16.487-42.979 0.085-59.464l-348.751-349.806z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-check" viewBox="0 0 1024 1024">'+""+'<path d="M511.99711 1024C229.670521 1024 0 794.329479 0 511.995665 0 229.671244 229.670521 0 511.99711 0c282.332369 0 512.00289 229.671244 512.00289 511.995665C1024 794.329479 794.329479 1024 511.99711 1024L511.99711 1024zM511.99711 73.471693c-241.807611 0-438.52614 196.717807-438.52614 438.524334 0 241.775821 196.718529 438.533003 438.52614 438.533003 241.774376 0 438.53192-196.757544 438.53192-438.533003C950.52903 270.1895 753.771486 73.471693 511.99711 73.471693L511.99711 73.471693zM757.683402 376.211119c-14.335984-14.22436-37.522095-14.079862-51.70744 0.289357l-266.606678 269.530951-118.018907-121.266495c-14.112735-14.520219-37.265611-14.776702-51.70744-0.731159-14.486623 14.079139-14.815717 37.265611-0.731159 51.708885l144.017667 148.006167c0.07261 0.105845 0.217469 0.105845 0.290079 0.21783 0.07261 0.07261 0.111625 0.217469 0.184235 0.290079 2.304739 2.271144 5.156403 3.660851 7.862846 5.195417 1.428722 0.770173 2.561584 2.047895 4.02354 2.633833 4.425244 1.830425 9.140567 2.740039 13.822656 2.740039 4.642713 0 9.291206-0.909613 13.677436-2.667429 1.428722-0.584493 2.52257-1.757815 3.87832-2.487529 2.739678-1.536011 5.597121-2.886343 7.935095-5.191082 0.07261-0.07261 0.111625-0.223249 0.217469-0.295859 0.07261-0.105845 0.184235-0.144859 0.295859-0.217469l292.823268-296.010166C772.169664 413.547896 772.019386 390.401522 757.683402 376.211119L757.683402 376.211119zM757.683402 376.211119"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-view" viewBox="0 0 1024 1024">'+""+'<path d="M1015.122307 504.241292c-173.736926-221.119073-354.839611-327.638085-538.222221-316.588425-66.148559 3.984754-132.224464 23.542182-196.391902 58.131979-50.591235 27.27111-100.096742 63.905472-147.143245 108.883873-79.612199 76.114538-124.563994 149.520385-126.438691 152.6077-3.242857 5.341658-4.657067 11.276834-4.431939 17.084097-0.240477 5.834892 1.173732 11.80179 4.431939 17.166985 1.874697 3.088338 46.826492 76.492138 126.438691 152.608723 47.046502 44.977377 96.55201 81.610716 147.143245 108.881826 64.167438 34.590819 130.243343 54.149271 196.391902 58.133002 8.631588 0.51984 17.228383 0.779759 25.848715 0.779759 174.551478 0 346.812797-106.654089 512.373507-317.368184 4.687766-5.966898 6.80601-13.127995 6.528694-20.160155C1021.928317 517.370311 1019.810073 510.208191 1015.122307 504.241292zM480.89712 799.881616c-129.914862-7.716752-236.957807-85.261872-303.877939-148.956543-53.876048-51.280944-91.296309-102.202707-107.919918-126.522602 16.621563-24.318872 54.0408-75.240635 107.919918-126.523625 66.920132-63.694671 173.963077-141.241838 303.877939-148.957567 157.251464-9.330506 315.861878 83.330894 471.750297 275.480168C796.757974 716.552769 638.13528 809.221332 480.89712 799.881616z"  ></path>'+""+'<path d="M512.075213 378.922099c-82.945107 0-150.426011 67.480904-150.426011 150.426011 0 82.946131 67.480904 150.426011 150.426011 150.426011s150.426011-67.479881 150.426011-150.426011C662.501224 446.403003 595.02032 378.922099 512.075213 378.922099zM511.454066 618.374726c-49.090045 0-89.027639-39.936571-89.027639-89.027639 0-49.090045 39.937594-89.027639 89.027639-89.027639s89.027639 39.937594 89.027639 89.027639C600.481705 578.438155 560.543088 618.374726 511.454066 618.374726z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-date" viewBox="0 0 1024 1024">'+""+'<path d="M791.0029 456.163297 679.248653 456.163297 679.248653 567.917544l111.754247 0L791.0029 456.163297zM791.0029 679.671791 679.248653 679.671791l0 111.754247 111.754247 0L791.0029 679.671791zM344.095407 64.942081 232.341161 64.942081l0 167.658488 111.754247 0L344.095407 64.942081zM791.112394 64.942081 679.358147 64.942081l0 167.658488 111.754247 0L791.112394 64.942081zM567.494407 679.671791 455.74016 679.671791l0 111.754247 111.754247 0L567.494407 679.671791zM343.985914 456.163297 232.231667 456.163297 232.231667 567.917544l111.754247 0L343.985914 456.163297zM846.989005 120.819716l0 167.658488L623.480512 288.478204l0-167.658488L399.972019 120.819716l0 167.658488L176.463526 288.478204l0-167.658488L64.709279 120.819716l0 838.238202 894.579395 0L959.288674 120.819716 846.989005 120.819716zM903.412063 903.180284 120.586914 903.180284 120.586914 344.354815l782.825149 0L903.412063 903.180284zM567.494407 456.163297 455.74016 456.163297 455.74016 567.917544l111.754247 0L567.494407 456.163297zM343.985914 679.671791 232.231667 679.671791l0 111.754247 111.754247 0L343.985914 679.671791z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-top-label" viewBox="0 0 1062 1024">'+""+'<path d="M0-21.333h1061.012v1024l-530.478-246.747-530.534 246.747v-1024z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-order" viewBox="0 0 1024 1024">'+""+'<path d="M928 992 96 992c-35.36 0-64-28.672-64-64L32 320c0 0.992 96-224 96-224 0-0.352 31.648-64 64-64l640 0c33.344 0 64 63.648 64 64l96 224 0 608C992 963.328 963.328 992 928 992zM768 96 256 96C191.712 96 156.992 256 156.992 256L864 256C864 256 831.264 96 768 96zM928 384c0-35.328-28.64-64-64-64L160 320c-35.328 0-64 28.672-64 64l0 480c0 35.328 28.64 64 64 64l704 0c35.36 0 64-28.672 64-64L928 384zM763.584 569.504C743.008 701.024 651.328 800 512 800c-139.328 0-231.008-98.976-251.584-230.496C238.912 559.2 224 537.408 224 512c0-35.36 28.672-64 64-64 35.36 0 64 28.672 64 64 0 21.632-10.784 40.672-27.232 52.256C341.568 662.624 406.368 736 512 736c105.632 0 170.432-73.344 187.232-171.744C682.784 552.672 672 533.632 672 512c0-35.36 28.672-64 64-64 35.36 0 64 28.672 64 64C800 537.408 785.056 559.2 763.584 569.504z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-comment" viewBox="0 0 1024 1024">'+""+'<path d="M320 448m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z"  ></path>'+""+'<path d="M512 448m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z"  ></path>'+""+'<path d="M704 448m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z"  ></path>'+""+'<path d="M512 128c211.2 0 448 153.6 448 352 0 96-57.6 185.6-160 243.2-57.6 32-64 102.4-64 153.6 0 6.4 0 12.8 0 19.2-32-6.4-76.8-32-102.4-51.2-44.8-25.6-83.2-44.8-115.2-44.8-249.6 0-448-140.8-448-320C64 281.6 300.8 128 512 128M512 64C230.4 64 0 268.8 0 480s230.4 384 512 384c38.4 0 160 96 243.2 96 6.4 0 12.8 0 12.8 0 51.2-12.8 6.4-147.2 64-179.2 115.2-70.4 192-179.2 192-300.8C1024 268.8 793.6 64 512 64L512 64z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-search" viewBox="0 0 1024 1024">'+""+'<path d="M970.575 956.964l-22.423 22.423c-16.818 16.818-44.846 16.818-61.664 0l-156.964-162.569c-72.876 50.453-162.569 84.087-257.869 84.087-235.446 0-431.649-196.205-431.649-437.256 0-235.446 196.205-431.649 437.256-431.649s437.256 196.205 437.256 437.256c0 100.905-33.635 196.205-95.3 274.687l156.964 156.964c11.212 11.212 11.212 39.241-5.606 56.059zM477.261 144.117c-179.387 0-325.139 145.752-325.139 319.533s145.752 319.533 325.139 319.533 325.139-145.752 325.139-319.533-151.357-319.533-325.139-319.533z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-right-label" viewBox="0 0 1024 1024">'+""+'<path d="M0.01024 0 1023.98976 1023.99488 1023.98976 491.68896 532.31616 0Z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-point" viewBox="0 0 1024 1024">'+""+'<path d="M424.948 379.017c113.229 0 230.993-24.902 301.716-72.383v86.442h65.526v-189.266c0-113.781-189.159-175.211-367.132-175.211-177.978 0-367.242 61.429-367.242 175.211v516.546c0 113.782 189.153 175.212 367.132 175.212v-65.411c-186.942 0-301.721-63.979-301.721-109.801v-155.282c70.727 47.367 188.382 72.386 301.721 72.386v-65.525c-186.942 0-301.721-63.973-301.721-109.793v-155.396c70.726 47.37 188.493 72.272 301.719 72.272v0zM424.948 94.010c186.941 0 301.716 63.98 301.716 109.799 0 45.821-114.775 109.795-301.716 109.795-186.942 0-301.721-63.973-301.721-109.795 0.001-45.821 114.891-109.799 301.721-109.799v0zM718.473 414.877c-162.589 0-247.59 62.535-247.59 124.295v331.938c0 61.756 85.114 124.292 247.59 124.292 161.38 0 246.267-61.649 247.599-122.967h0.11v-333.263c-0.11-61.761-85.115-124.295-247.709-124.295v0zM718.473 480.29c120.206 0 182.181 41.285 182.181 58.881 0 17.598-61.975 58.882-182.181 58.882-120.197 0-182.181-41.285-182.181-58.882 0-17.597 61.983-58.881 182.181-58.881v0zM718.473 929.991c-120.197 0-182.181-41.285-182.181-58.882v-79.252c41.506 22.582 102.496 37.635 182.181 37.635 79.693 0 140.57-15.052 182.181-37.635v79.252c0 17.598-61.975 58.882-182.181 58.882v0zM718.473 763.966c-120.197 0-182.181-41.285-182.181-58.882v-79.248c41.506 22.579 102.496 37.63 182.181 37.63 79.693 0 140.57-15.051 182.181-37.63v79.248c0 17.598-61.975 58.882-182.181 58.882v0zM718.473 763.966z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-arrow-left" viewBox="0 0 1025 1024">'+""+'<path d="M736.56 62.397v114.222l-335.78 335.778 335.78 335.78v114.219l-450-450 450-450z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-attach" viewBox="0 0 1024 1024">'+""+'<path d="M722 32h-600c-33.137 0-60 26.863-60 60v840c0 33.137 26.863 60 60 60h780c33.137 0 60-26.863 60-60v-660l-240-240zM750.14 144.98l112.020 112.020h-112.020v-112.020zM902 932h-780v-840h568.14v225h211.86v615z"  ></path>'+""+'<path d="M267.38 214.49c-93.15 93.18-21.21 190.92-21.21 190.92l284.85 283.17c14.999 11.687 34.11 18.738 54.867 18.738 24.708 0 47.082-9.99 63.306-26.151 59.037-59.037 0.027-127.257 0.027-127.257l-0.030-0.030-191.79-191.34s-20.55-20.55-41.1 0c-21.87 21.87-0.45 42.87-0.45 42.87l190.92 190.92c5.423 5.419 8.779 12.907 8.779 21.18 0 8.287-3.367 15.788-8.808 21.209-5.42 5.45-12.922 8.822-21.211 8.822-8.289 0-15.791-3.372-21.209-8.82 135.089 135.179-176.821-176.821-254.551-254.521-16.288-16.288-26.362-38.79-26.362-63.645 0-49.71 40.297-90.007 90.007-90.007 24.855 0 47.357 10.074 63.645 26.362l297 297c26.868 27.097 43.471 64.41 43.471 105.601 0 82.843-67.157 150-150 150-41.19 0-78.503-16.602-105.611-43.481l-0.050-0.050c85.89 85.95-233.31-233.31-233.31-233.31s-21.42-20.97-41.94-0.42c-21.87 21.87-0.48 42.84-0.48 42.84l243.45 243.45s146.34 130.44 286.89-10.14c137.67-137.64 15.63-281.34 15.63-281.34l-331.83-331.8s-98.73-74.97-192.9 19.23z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-down" viewBox="0 0 1024 1024">'+""+'<path d="M908.8 668.8l-32 176h-729.6l-32-176h-83.2v281.6h960v-281.6h-83.2M889.6 352h-240v-102.4h-275.2v102.4h-236.8l374.4 400 377.6-400M649.6 73.6h-275.2v38.4h275.2v-38.4M649.6 144h-275.2v70.4h275.2v-70.4M649.6 144z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-tip" viewBox="0 0 1024 1024">'+""+'<path d="M511.926868 0a511.926868 511.926868 0 1 0 0.146264 1024A511.926868 511.926868 0 0 0 511.926868 0z m0 955.4018A443.474932 443.474932 0 1 1 511.926868 68.378803 443.474932 443.474932 0 0 1 955.4018 511.926868 443.328667 443.328667 0 0 1 511.926868 955.4018z m-51.192687-163.816598h102.385373V670.989859H460.734181v120.668476z m0-193.800885h102.385373V232.341665H460.734181v365.588916z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-amount" viewBox="0 0 1024 1024">'+""+'<path d="M637.974 645.548c19.952 0 35.972-16.311 35.972-36.409s-16.020-36.409-35.972-36.409h-79.808l88.401-89.566c13.981-14.272 13.981-37.283 0-51.555-14.127-14.272-36.846-14.272-50.827 0l-83.741 84.759-83.741-84.759c-13.981-14.272-36.846-14.272-50.827 0s-13.981 37.283 0 51.555l88.401 89.566h-79.808c-19.952 0-35.972 16.311-35.972 36.409s16.020 36.409 35.972 36.409h90.003v35.244h-90.003c-19.952 0-35.972 16.311-35.972 36.409s16.020 36.409 35.972 36.409h90.003v54.613c0 20.098 16.020 36.409 35.972 36.409s35.972-16.311 35.972-36.409v-54.613h90.003c19.952 0 35.972-16.311 35.972-36.409s-16.020-36.409-35.972-36.409h-90.003v-35.244h90.003zM997.258 704.53c-7.718-213.356-188.743-355.642-273.94-410.983 28.253-31.894 56.652-76.896 63.351-123.936 4.951-34.079-2.622-65.245-21.699-90.148-24.467-31.748-53.449-38.302-73.401-38.302-25.195 0-48.351 10.485-66.41 22.137-20.972-28.545-57.089-60.876-113.158-61.021h-1.893c-55.051 0.729-90.586 32.622-111.265 60.876-18.059-11.651-41.215-22.137-66.265-22.137-20.098 0-49.079 6.7-73.401 38.302-19.078 24.903-26.652 56.069-21.845 90.294 6.7 47.040 35.099 91.897 63.351 123.79-85.197 55.487-266.222 197.773-273.94 411.13-3.787 105.586 21.117 187.141 74.128 242.774 64.080 67.138 149.422 74.42 183.063 74.42h455.985c33.788 0 119.13-7.282 183.21-74.42 52.866-55.633 77.915-137.188 74.128-242.774zM315.829 124.173c7.865-10.34 13.836-10.34 16.603-10.34 17.33 0 41.215 19.807 50.098 29.127 8.447 9.175 21.117 13.398 33.205 10.923 12.234-2.331 22.428-11.069 26.797-22.865 0.874-2.331 21.263-55.051 68.303-56.069h1.165c47.477 0.146 68.303 53.74 69.031 55.778 4.223 11.796 14.418 20.534 26.652 23.156 12.234 2.622 24.903-1.602 33.497-10.777 8.884-9.612 32.914-29.273 50.244-29.273 2.913 0 8.738 0 16.603 10.34 4.515 5.825 10.049 15.729 7.282 34.953-5.534 39.175-41.215 85.197-67.138 106.605-3.058-0.874-5.971-1.893-9.175-1.893h-252.969c-3.641 0-6.845 1.020-10.194 2.038-25.923-21.263-61.749-67.574-67.283-106.751-2.767-19.223 2.913-29.127 7.282-34.953zM871.428 896.624c-45.002 47.186-106.896 52.283-131.363 52.283h-456.13c-24.467 0-86.362-5.098-131.363-52.138-38.884-40.778-57.089-104.566-54.031-189.617 7.865-217.289 245.396-356.225 275.105-372.827 3.932 1.456 8.010 2.476 12.379 2.476h253.115c4.078 0 7.865-1.020 11.505-2.331 31.748 17.622 266.95 155.684 274.669 372.682 3.058 85.051-15.146 148.839-53.885 189.472z"  ></path>'+""+"</symbol>"+""+'<symbol id="icon-arrow-right" viewBox="0 0 1025 1024">'+""+'<path d="M287.44 961.603v-114.222l335.78-335.778-335.78-335.78v-114.219l450 450-450 450z"  ></path>'+""+"</symbol>"+""+"</svg>";var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
  3 | <svg xmlns="http://www.w3.org/2000/svg">
  4 | <metadata>
  5 | Created by FontForge 20120731 at Fri Jun  9 04:37:36 2017
  6 |  By admin
  7 | </metadata>
  8 | <defs>
  9 | <font id="iconfont" horiz-adv-x="1024" >
 10 |   <font-face 
 11 |     font-family="iconfont"
 12 |     font-weight="500"
 13 |     font-stretch="normal"
 14 |     units-per-em="1024"
 15 |     panose-1="2 0 6 3 0 0 0 0 0 0"
 16 |     ascent="896"
 17 |     descent="-128"
 18 |     x-height="792"
 19 |     bbox="0 -128 1061 917"
 20 |     underline-thickness="0"
 21 |     underline-position="0"
 22 |     unicode-range="U+0078-E87B"
 23 |   />
 24 | <missing-glyph 
 25 |  />
 26 |     <glyph glyph-name=".notdef" 
 27 |  />
 28 |     <glyph glyph-name=".notdef" 
 29 |  />
 30 |     <glyph glyph-name=".null" horiz-adv-x="0" 
 31 |  />
 32 |     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
 33 |  />
 34 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
 35 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
 36 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
 37 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
 38 |     <glyph glyph-name="error" unicode="&#xe600;" horiz-adv-x="1000" 
 39 | d="M500 896q-136 0 -251 -67t-182 -182t-67 -251t67 -251t182 -182t251 -67t251 67t182 182t67 251t-67 251t-182 182t-251 67zM500 -42q-89 0 -170 35t-139.5 93.5t-93.5 139.5t-35 170t35 170t93.5 139.5t139.5 93.5t170 35t170 -35t139.5 -93.5t93.5 -139.5t35 -170
 40 | t-35 -170t-93.5 -139.5t-139.5 -93.5t-170 -35zM655 595l-155 -155l-155 155l-44 -44l155 -155l-155 -155l44 -44l155 155l155 -155l44 44l-155 155l155 155z" />
 41 |     <glyph glyph-name="reply" unicode="&#xe607;" horiz-adv-x="1000" 
 42 | d="M948 37q-18 0 -21 18q-2 7 -6 20t-23 46t-45 61q-116 122 -340 128v-174q0 -13 -12 -18.5t-22 1.5l-409 296q-9 7 -9 18t9 17l409 298q10 7 22 1t12 -19v-184q62 -2 125 -19q128 -34 209 -116q126 -128 122 -353q0 -8 -5.5 -14t-14.5 -7h-1v0zM491 353q143 0 249 -45
 43 | q87 -35 146 -98q18 -20 33 -41q-22 130 -102 212q-40 41 -92 68.5t-101 37.5t-77 13.5t-49 3.5h-6v0q-9 0 -15.5 6t-6.5 15v163l-351 -255l351 -255v153q0 9 6 15.5t15 6.5z" />
 44 |     <glyph glyph-name="cart" unicode="&#xe601;" 
 45 | d="M339 119q19 0 36 -7t30 -19.5t20 -29.5t7 -36t-7 -36t-20 -29.5t-30 -20t-36 -7.5q-20 0 -36.5 7.5t-29.5 20t-20 29.5t-7 36t7 36t20 29.5t29.5 19.5t36.5 7zM755 117q19 0 36.5 -7t30 -19.5t20 -29.5t7.5 -36t-7.5 -36t-20 -29.5t-30 -20t-36.5 -7.5t-36 7.5t-29.5 20
 46 | t-20 29.5t-7.5 36t7.5 36t20 29.5t29.5 19.5t36 7zM923 685q28 0 43.5 -7.5t22 -18.5t6 -23.5t-3.5 -21.5t-12.5 -37t-21.5 -61.5t-23.5 -66.5t-17.5 -52q-13 -40 -33 -55.5t-49 -15.5h-525l15 -90h504q48 0 48 -41q0 -20 -9.5 -34.5t-37.5 -14.5h-524q-20 0 -33.5 9
 47 | t-22.5 23.5t-14.5 31.5t-8.5 32q-1 6 -5.5 29t-11 57.5t-14.5 77t-16 85.5q-19 101 -43 225h-75q-15 0 -25 7.5t-16.5 18t-9 22.5t-2.5 22q0 20 13.5 33t36.5 13h101q20 0 32 -6t19 -15t10 -19t5 -17q2 -8 4 -22.5t4 -29.5q3 -18 6 -38h684v0z" />
 48 |     <glyph glyph-name="plus" unicode="&#xe676;" 
 49 | d="M929 422h-380v380h-76v-380h-380v-77h380v-380h76v380h380v77z" />
 50 |     <glyph glyph-name="play" unicode="&#xe602;" 
 51 | d="M512 896q-105 0 -199.5 -40t-163 -108t-109 -162t-40.5 -198.5t40.5 -200t109 -164.5t163 -110t199.5 -41t199.5 41t163 110t109 164.5t40.5 200t-40.5 198.5t-109 162t-163 108t-199.5 40zM511.5 -51q-118.5 0 -219 59t-158 160t-57.5 220t57.5 218.5t157.5 156.5
 52 | t219 57t219 -57t158 -156.5t58 -218.5t-58 -220t-158 -160t-218.5 -59zM463 571q-7 6 -18 6t-18 -6v-375q7 -6 18 -6t18 6l213 173q7 6 7 15t-7 15z" />
 53 |     <glyph glyph-name="phone" unicode="&#xe603;" 
 54 | d="M744 -86v0h-4q-81 4 -184 76t-204 195l-51 60q-101 123 -151.5 236.5t-38.5 192.5q9 51 71 93t113 42q35 0 46 -24q28 -50 53.5 -116.5t25.5 -95.5v-2l-1 -3q-8 -21 -41 -39q-17 -10 -24.5 -18t-8.5 -23q-2 -28 95 -147l38 -46q97 -114 125 -118q15 -2 24.5 3.5
 55 | t22.5 19.5q25 28 48 31l2 1l3 -1q28 -6 89.5 -44.5t106.5 -76.5q24 -16 11 -57q-14 -46 -65 -92.5t-101 -46.5v0z" />
 56 |     <glyph glyph-name="user-full" unicode="&#xe6ce;" 
 57 | d="M502 833q95 0 161.5 -65.5t66.5 -158.5t-66.5 -159t-161 -66t-161 66t-66.5 159t66.5 158.5t160.5 65.5v0zM502 833q95 0 161.5 -65.5t66.5 -158.5t-66.5 -159t-161 -66t-161 66t-66.5 159t66.5 158.5t160.5 65.5v0zM417 310h190q122 0 208 -85t86 -205v-19
 58 | q0 -15 -9.5 -26.5t-31 -18.5t-44.5 -11t-61.5 -6t-68.5 -2.5t-79 -0.5h-190q-53 0 -79.5 0.5t-68 2t-62 5.5t-43.5 11t-32 19t-9 27v19q0 120 86 205t208 85v0zM417 310z" />
 59 |     <glyph glyph-name="user" unicode="&#xe6f5;" 
 60 | d="M941 161q-18 60 -76 109.5t-121 58.5h-21q-13 1 -25 -6q-17 -9 -32 -16q-72 -31 -153 -31q-82 0 -153 31l-33 16q-12 7 -25 6h-21q-63 -8 -120.5 -56.5t-76.5 -109.5q-3 -6 -7.5 -18t-13 -53.5t-9.5 -88.5q-1 -11 6.5 -22.5t18.5 -16.5q6 -4 17 -10t51.5 -22t86.5 -28
 61 | t121.5 -22t156.5 -10q47 0 91.5 3t80.5 8.5t69 12.5t59 14.5t48 15t37.5 14.5t26.5 12t16 8.5l5 3.5q11 5 18.5 17t6.5 22q-1 47 -8.5 86.5t-14.5 55.5zM876 8q-5 -3 -14.5 -7t-43.5 -15t-72.5 -19t-102 -15t-131.5 -7q-217 0 -352 57l-12 6q-9 3 -15 11t-6 15
 62 | q1 32 7.5 59.5t12.5 38.5l5 11q17 44 56.5 76t90.5 37h17q11 0 21 -4q15 -7 28 -11q60 -21 147 -21t147 21l27 11q9 4 21 4h17q51 -6 92 -38.5t56 -75.5q22 -36 25 -108q0 -6 -6 -14.5t-15 -11.5v0zM512 370q109 0 186 77t77 186t-77 186t-186 77t-186 -77t-77 -186t77 -186
 63 | t186 -77zM511.5 823q78.5 0 134.5 -55.5t56 -134.5t-56 -134.5t-134.5 -55.5t-134 55.5t-55.5 134.5t55.5 134.5t134 55.5z" />
 64 |     <glyph glyph-name="close" unicode="&#xe659;" 
 65 | d="M571 386l349 347q12 12 12 29.5t-12 29.5t-29.5 12.5t-30.5 -12.5l-348 -347l-346 347q-12 12 -29.5 12.5t-30 -12t-12.5 -30t13 -29.5l345 -347l-348 -347q-13 -12 -13 -29.5t12.5 -29.5t30 -12t29.5 12l348 347l349 -350q13 -13 30 -13t29.5 12.5t12.5 30t-12 29.5z
 66 | " />
 67 |     <glyph glyph-name="check" unicode="&#xe61f;" 
 68 | d="M512 -128q-104 0 -199 40.5t-163.5 109t-109 163.5t-40.5 199t40.5 199t109 163.5t163.5 109t199 40.5t199 -40.5t163.5 -109t109 -163.5t40.5 -199t-40.5 -199t-109 -163.5t-163.5 -109t-199 -40.5v0zM512 823q-89 0 -170 -35t-140 -94t-94 -140t-35 -170t35 -170
 69 | t94 -140t140 -94t170 -35t170 35t140 94t94 140t35 170t-35 170t-94 140t-140 94t-170 35v0zM758 520q-11 10 -26 10t-26 -10l-267 -270l-118 121q-10 11 -25.5 11.5t-26 -10.5t-11 -26t10.5 -26l144 -148v0v0q2 -2 8 -5l2 -2t2 -1q7 -3 14 -3t14 3q1 0 2 1t2 1q6 4 8 6v0v0
 70 | l293 296q11 11 10.5 26t-10.5 26v0zM758 520z" />
 71 |     <glyph glyph-name="view" unicode="&#xe61b;" 
 72 | d="M1015 392q-262 333 -538 316q-100 -6 -196 -58q-77 -41 -148 -109q-80 -77 -126 -152q-5 -8 -5 -17q0 -10 5 -18q46 -75 126 -152q71 -68 148 -109q96 -52 196 -58q13 -1 26 -1q263 0 512 317q7 9 7 21q0 11 -7 20zM481 96q-157 9 -304 149q-61 58 -108 127
 73 | q47 68 108 126q147 140 304 149q237 14 472 -275q-235 -290 -472 -276v0zM512 517q-62 0 -106 -44t-44 -106.5t44 -106.5t106 -44t106.5 44t44.5 106.5t-44.5 106.5t-106.5 44zM511.5 278q-36.5 0 -63 26t-26.5 62.5t26.5 63t63 26.5t62.5 -26.5t26 -63t-26 -62.5t-62.5 -26
 74 | z" />
 75 |     <glyph glyph-name="date" unicode="&#xe721;" 
 76 | d="M791 440h-112v-112h112v112zM791 216h-112v-111h112v111zM344 831h-112v-168h112v168zM791 831h-112v-168h112v168zM567 216h-111v-111h111v111zM344 440h-112v-112h112v112zM847 775v-167h-224v167h-223v-167h-224v167h-111v-838h894v838h-112zM903 -7h-782v559h782
 77 | v-559zM567 440h-111v-112h111v112zM344 216h-112v-111h112v111z" />
 78 |     <glyph glyph-name="top-label" unicode="&#xe60d;" horiz-adv-x="1062" 
 79 | d="M0 917h1061v-1024l-530 247l-531 -247v1024v0z" />
 80 |     <glyph glyph-name="order" unicode="&#xe62a;" 
 81 | d="M928 -96h-832q-27 0 -45.5 18.5t-18.5 45.5v608l24 56l48 112l24 56q0 2 9 16.5t25 31t30 16.5h640q15 0 31 -16.5t24.5 -31t8.5 -16.5l96 -224v-608q0 -26 -19 -45t-45 -19zM768 800h-512q-18 0 -35 -16.5t-28 -40t-19.5 -47t-12.5 -40.5l-4 -16h707q-1 7 -4 17.5
 82 | t-12 38t-19 48.5t-26.5 38.5t-34.5 17.5zM928 512q0 27 -18.5 45.5t-45.5 18.5h-704q-26 0 -45 -19t-19 -45v-480q0 -27 18.5 -45.5t45.5 -18.5h704q27 0 45.5 18.5t18.5 45.5v480zM764 326q-16 -101 -83 -165.5t-169 -64.5t-169 64.5t-83 165.5q-16 8 -26 23.5t-10 34.5
 83 | q0 27 18.5 45.5t45.5 18.5t45.5 -18.5t18.5 -45.5q0 -33 -27 -52q13 -77 61.5 -124.5t125.5 -47.5t125.5 47.5t61.5 124.5q-27 19 -27 52q0 27 18.5 45.5t45.5 18.5t45.5 -18.5t18.5 -45.5q0 -19 -10 -34.5t-26 -23.5z" />
 84 |     <glyph glyph-name="comment" unicode="&#xe7e9;" 
 85 | d="M256 448q0 -27 18.5 -45.5t45.5 -18.5t45.5 18.5t18.5 45.5t-18.5 45.5t-45.5 18.5t-45.5 -18.5t-18.5 -45.5zM448 448q0 -27 18.5 -45.5t45.5 -18.5t45.5 18.5t18.5 45.5t-18.5 45.5t-45.5 18.5t-45.5 -18.5t-18.5 -45.5zM640 448q0 -27 18.5 -45.5t45.5 -18.5
 86 | t45.5 18.5t18.5 45.5t-18.5 45.5t-45.5 18.5t-45.5 -18.5t-18.5 -45.5zM512 768q79 0 159 -27.5t144 -73.5t104.5 -112.5t40.5 -138.5t-42 -136t-118 -107q-64 -36 -64 -154v-19q-47 9 -102 51q-79 45 -116 45q-123 0 -226 42.5t-162.5 116t-59.5 161.5q-2 72 37 138.5
 87 | t102.5 112.5t143.5 73.5t159 27.5zM512 832q-137 0 -256 -60t-187.5 -155.5t-68.5 -200.5q0 -158 150.5 -271t361.5 -113q15 0 58.5 -24t96 -48t88.5 -24h13q17 4 23.5 29t6 53.5t7.5 57.5t27 39q89 54 140.5 133t51.5 168q0 105 -68.5 200.5t-187.5 155.5t-256 60v0z" />
 88 |     <glyph glyph-name="search" unicode="&#xe629;" 
 89 | d="M971 -61l-23 -22q-12 -13 -30.5 -13t-31.5 13l-156 162q-122 -84 -258 -84q-87 0 -167 35t-138 93.5t-92.5 139.5t-34.5 169q0 87 34.5 167t93 138t140 92.5t170 34.5t169.5 -34.5t139.5 -93.5t93.5 -139.5t35 -169.5q0 -154 -96 -275l157 -157q9 -8 8 -26t-13 -30v0z
 90 | M477 752q-88 0 -163 -43.5t-118.5 -117t-43.5 -159t43.5 -159t118.5 -117t163 -43.5t163 43.5t118.5 117t43.5 158.5q0 86 -44.5 159.5t-119.5 117t-161 43.5z" />
 91 |     <glyph glyph-name="right-label" unicode="&#xe628;" 
 92 | d="M0 896l1024 -1024v532l-492 492h-532z" />
 93 |     <glyph glyph-name="point" unicode="&#xe606;" 
 94 | d="M425 517q87 0 168.5 19t133.5 53v-86h65v189q0 54 -55.5 95.5t-137.5 60.5t-174 19t-174 -19t-137.5 -60.5t-55.5 -95.5v-516q0 -55 55.5 -96t137.5 -60.5t174 -19.5v66q-67 0 -125.5 10.5t-96 27t-59 35.5t-21.5 37v155q52 -35 133 -53.5t169 -18.5v65
 95 | q-67 0 -125.5 10.5t-96 27t-59 35.5t-21.5 37v155q52 -34 133 -53t169 -19v0zM425 802q67 0 125.5 -10.5t96 -27t59 -35.5t21.5 -36.5t-21.5 -36.5t-59 -35.5t-96 -27.5t-125.5 -11t-125.5 11t-96 27.5t-59 35.5t-21.5 36.5t21.5 36.5t59 35.5t96 27t125.5 10.5v0zM718 481
 96 | q-115 0 -181 -37t-66 -87v-332q0 -50 66 -87t181 -37t181 36.5t67 86.5v0v333q0 50 -66 87t-182 37v0zM718 416q35 0 65.5 -4.5t51.5 -11.5t36 -15t22.5 -15.5t7.5 -13t-7.5 -12.5t-22.5 -15.5t-36 -15t-51.5 -11t-65 -4.5t-65 4.5t-51.5 11t-36 15t-22.5 15.5t-7.5 12.5
 97 | t7.5 13t22.5 15.5t36 15t51.5 11.5t64.5 4.5v0zM718 -34q-34 0 -64.5 4.5t-51.5 11t-36 15t-22.5 15.5t-7.5 13v79q69 -37 182 -37t183 37v-79q0 -6 -7.5 -13t-22.5 -15.5t-36 -15t-51.5 -11t-65.5 -4.5v0zM718 132q-34 0 -64.5 4.5t-51.5 11t-36 15t-22.5 15.5t-7.5 13v79
 98 | q69 -37 182 -37t183 37v-79q0 -6 -7.5 -13t-22.5 -15.5t-36 -15t-51.5 -11t-65.5 -4.5v0zM718 132z" />
 99 |     <glyph glyph-name="arrow-left" unicode="&#xe604;" horiz-adv-x="1025" 
100 | d="M737 834v-115l-336 -335l336 -336v-114l-450 450z" />
101 |     <glyph glyph-name="attach" unicode="&#xe644;" 
102 | d="M722 864h-600q-25 0 -42.5 -17.5t-17.5 -42.5v-840q0 -25 17.5 -42.5t42.5 -17.5h780q25 0 42.5 17.5t17.5 42.5v660zM750 751l112 -112h-112v112zM902 -36h-780v840h568v-225h212v-615zM267 682q-75 -76 -34 -168q11 -23 13 -23l285 -284q24 -18 55 -18q37 0 63 26
103 | q17 16 23 35.5t3 35t-8.5 28.5t-11.5 21l-6 7v0l-192 191q-2 3 -6 5.5t-15 3.5t-20 -9q-9 -9 -9.5 -20t4.5 -17l5 -5l191 -191q9 -9 9 -21.5t-9 -21.5t-21.5 -9t-21.5 9l31 -30h-1v0v1h-1v1v0h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1l-1 1h-1v1h-1l-1 1v1h-1v1l-1 1
104 | h-1v1l-1 1h-1l-1 1v1h-1l-1 1v1l-1 1h-1l-1 1v1l-1 1h-1l-1 1v1l-1 1h-1l-1 1v1l-1 1l-1 1h-1l-1 1v1l-1 1l-1 1h-1l-1 1l-1 1v1l-1 1l-1 1h-1l-1 1l-1 1v1l-1 1l-1 1l-1 1h-1l-1 1l-1 1l-1 1v1l-1 1l-1 1l-1 1l-1 1h-1l-1 1l-1 1l-1 1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1h-1
105 | l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1v1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1h-1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 2l-1 1l-1 1
106 | l-1 1l-2 1l-1 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 2l-1 1
107 | l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 2l-1 1l-1 1l-2 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1
108 | l-1 1l-2 1l-1 1l-1 2l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-1 1l-2 1l-1 1l-1 2l-1 1l-1 1l-1 1l-2 1l-1 1l-1 1l-1 2l-1 1l-1 1l-1 1l-1 1l-1 1l-2 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 1l-1 2q-27 26 -27 63.5t26.5 63.5t64 26t63.5 -26l297 -297
109 | q44 -44 44 -106t-44 -106t-106 -44t-106 44v0l-233 233l-2.5 2.5t-6.5 4t-10 3t-11.5 -1t-11.5 -7.5q-10 -10 -10 -20.5t4 -16.5l5 -6l244 -244q6 -5 16.5 -13t43.5 -23t65.5 -18.5t77 11t83.5 54.5q39 38 54.5 81.5t11 77t-16 62.5t-21.5 44t-12 16l-332 332q-4 3 -11 7.5
110 | t-29 12t-44 8.5t-52 -10t-57 -37z" />
111 |     <glyph glyph-name="down" unicode="&#xe87a;" 
112 | d="M909 227l-32 -176h-730l-32 176h-83v-281h960v281h-83zM890 544h-240v102h-276v-102h-236l374 -400zM650 822h-276v-38h276v38zM650 752h-276v-70h276v70zM650 752z" />
113 |     <glyph glyph-name="tip" unicode="&#xe605;" 
114 | d="M512 896q-104 0 -199 -40.5t-163.5 -109t-109 -163.5t-40.5 -199t40.5 -199t109 -163.5t163.5 -109t199 -40.5v0q104 0 199 40.5t163.5 109t109 163.5t40.5 199q0 139 -68.5 257t-186.5 186.5t-257 68.5v0zM512 -59q-90 0 -172.5 35t-141.5 94.5t-94.5 141.5t-35.5 172
115 | t35.5 172.5t94.5 141.5t141.5 94.5t172.5 35.5v0q90 0 172 -35.5t141.5 -94.5t94.5 -141.5t35 -172.5v0v0q0 -90 -35 -172t-94.5 -141.5t-141.5 -94.5t-172 -35v0v0zM461 104h102v121h-102v-121v0zM461 298h102v366h-102v-366v0z" />
116 |     <glyph glyph-name="amount" unicode="&#xe6a0;" 
117 | d="M638 250q15 0 25.5 11t10.5 26t-10.5 25.5t-25.5 10.5h-80l89 90q10 11 10 26t-10.5 25.5t-25.5 10.5t-25 -11l-84 -84l-84 84q-10 11 -25 11t-25.5 -10.5t-10.5 -25.5t10 -26l89 -90h-80q-15 0 -25.5 -10.5t-10.5 -25.5t10.5 -26t25.5 -11h90v-35h-90q-15 0 -25.5 -10.5
118 | t-10.5 -25.5t10.5 -26t25.5 -11h90v-54q0 -15 10.5 -26t25.5 -11t25.5 11t10.5 26v54h90q15 0 25.5 11t10.5 26t-10.5 25.5t-25.5 10.5h-90v35h90zM997 191q-2 61 -23.5 119.5t-51 101.5t-69 83.5t-69.5 63.5t-61 43q55 62 64 124q7 52 -22 91q-30 38 -73 38q-33 0 -67 -22
119 | q-45 61 -113 61h-2q-67 -1 -111 -61q-34 22 -66 22q-44 0 -74 -38q-29 -38 -22 -91q9 -62 64 -123q-31 -21 -61 -44t-69.5 -63.5t-69 -83t-51 -101.5t-23.5 -120q-6 -159 74 -242q29 -31 69 -49t65 -22t49 -4h456q24 0 49 4t65 22t69 49q80 84 74 242zM316 772q8 10 16 10
120 | q23 0 51 -29q13 -15 33 -11q19 4 27 23q1 3 2.5 7t8 13.5t13.5 16.5t19 13t25 6h1q13 0 25 -6t19.5 -13t13.5 -16.5t8 -13.5t3 -7q7 -19 27 -23q19 -4 33 11q9 10 24 19.5t26 9.5q9 0 17 -10q10 -14 7 -35q-4 -27 -24.5 -57.5t-42.5 -49.5q-6 2 -9 2h-253q-3 0 -10 -2
121 | q-22 18 -43 49t-24 58q-3 21 7 35zM871 -1q-49 -52 -131 -52h-456q-82 0 -131 52q-59 62 -54 190q2 61 29.5 120.5t61 99.5t77.5 77t66.5 51.5t40.5 24.5q6 -3 12 -3h253q5 0 12 3q18 -11 40.5 -25.5t66.5 -51t77.5 -76.5t60.5 -99.5t29 -120.5q5 -128 -54 -190v0z" />
122 |     <glyph glyph-name="arrow-right" unicode="&#xe87b;" horiz-adv-x="1025" 
123 | d="M287 -66v115l336 335l-336 336v114l450 -450l-450 -450v0z" />
124 |   </font>
125 | </defs></svg>
126 | 


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/site/css/icon/iconfont.ttf


--------------------------------------------------------------------------------
/static/site/css/icon/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShoutongLiu/shop/79e5a788bfc098dddb7a192b79de70d2c45441c9/static/site/css/icon/iconfont.woff


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