├── README.md └── leproject ├── build ├── logo.png ├── vue-loader.conf.js ├── webpack.test.conf.js ├── build.js ├── check-versions.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── utils.js └── webpack.prod.conf.js ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── qq.png │ ├── logo.png │ ├── banner1.jpg │ ├── banner2.jpg │ ├── banner3.jpg │ ├── dianhua.png │ ├── dingwei.png │ ├── pingjia.png │ ├── homesearch.png │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── demo_fontclass.html │ │ ├── iconfont.css │ │ ├── demo_unicode.html │ │ ├── demo_symbol.html │ │ ├── demo.css │ │ ├── iconfont.svg │ │ └── iconfont.js │ └── iconfont1 │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.css │ │ ├── demo.css │ │ ├── demo_fontclass.html │ │ └── demo_unicode.html ├── App.vue ├── components │ ├── HelloWorld.vue │ ├── login.vue │ ├── comment │ │ └── foot.vue │ ├── logintel.vue │ ├── loginmove.vue │ ├── register.vue │ ├── detaillist.vue │ ├── home.vue │ ├── search.vue │ └── detail.vue ├── main.js └── router │ └── index.js ├── README.md ├── index.html ├── package.json ├── npm-debug.log └── npm-debug.log.963337625 /README.md: -------------------------------------------------------------------------------- 1 | # vue-leparject 2 | 基于vue模拟的http://m.1c10.cn/ 3 | -------------------------------------------------------------------------------- /leproject/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/build/logo.png -------------------------------------------------------------------------------- /leproject/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /leproject/src/assets/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/qq.png -------------------------------------------------------------------------------- /leproject/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/logo.png -------------------------------------------------------------------------------- /leproject/src/assets/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/banner1.jpg -------------------------------------------------------------------------------- /leproject/src/assets/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/banner2.jpg -------------------------------------------------------------------------------- /leproject/src/assets/banner3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/banner3.jpg -------------------------------------------------------------------------------- /leproject/src/assets/dianhua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/dianhua.png -------------------------------------------------------------------------------- /leproject/src/assets/dingwei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/dingwei.png -------------------------------------------------------------------------------- /leproject/src/assets/pingjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/pingjia.png -------------------------------------------------------------------------------- /leproject/src/assets/homesearch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/homesearch.png -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont/iconfont.eot -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont/iconfont.woff -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont1/iconfont.eot -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont1/iconfont.ttf -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OnebugIS/vue-leparject/HEAD/leproject/src/assets/iconfont1/iconfont.woff -------------------------------------------------------------------------------- /leproject/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 | -------------------------------------------------------------------------------- /leproject/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /leproject/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /leproject/README.md: -------------------------------------------------------------------------------- 1 | # leproject 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /leproject/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | // 使用mint-ui这个框架 10 | import MintUI from 'mint-ui' 11 | import 'mint-ui/lib/style.css' 12 | Vue.use(MintUI) 13 | 14 | 15 | 16 | 17 | /* eslint-disable no-new */ 18 | new Vue({ 19 | el: '#app', 20 | router, 21 | template: '', 22 | components: { App } 23 | }) 24 | -------------------------------------------------------------------------------- /leproject/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 | 10 | module.exports = { 11 | loaders: utils.cssLoaders({ 12 | sourceMap: sourceMapEnabled, 13 | extract: isProduction 14 | }), 15 | cssSourceMap: sourceMapEnabled, 16 | transformToRequire: { 17 | video: 'src', 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /leproject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | leproject 7 | 8 | 9 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 37 | -------------------------------------------------------------------------------- /leproject/build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const utils = require('./utils') 5 | const webpack = require('webpack') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | 9 | const webpackConfig = merge(baseWebpackConfig, { 10 | // use inline sourcemap for karma-sourcemap-loader 11 | module: { 12 | rules: utils.styleLoaders() 13 | }, 14 | devtool: '#inline-source-map', 15 | resolveLoader: { 16 | alias: { 17 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 18 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 19 | 'scss-loader': 'sass-loader' 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': require('../config/test.env') 25 | }) 26 | ] 27 | }) 28 | 29 | // no need for app entry during tests 30 | delete webpackConfig.entry 31 | 32 | module.exports = webpackConfig 33 | -------------------------------------------------------------------------------- /leproject/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, function (err, stats) { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /leproject/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | function exec (cmd) { 7 | return require('child_process').execSync(cmd).toString().trim() 8 | } 9 | 10 | const versionRequirements = [ 11 | { 12 | name: 'node', 13 | currentVersion: semver.clean(process.version), 14 | versionRequirement: packageConfig.engines.node 15 | } 16 | ] 17 | 18 | if (shell.which('npm')) { 19 | versionRequirements.push({ 20 | name: 'npm', 21 | currentVersion: exec('npm --version'), 22 | versionRequirement: packageConfig.engines.npm 23 | }) 24 | } 25 | 26 | module.exports = function () { 27 | const warnings = [] 28 | for (let i = 0; i < versionRequirements.length; i++) { 29 | const mod = versionRequirements[i] 30 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 31 | warnings.push(mod.name + ': ' + 32 | chalk.red(mod.currentVersion) + ' should be ' + 33 | chalk.green(mod.versionRequirement) 34 | ) 35 | } 36 | } 37 | 38 | if (warnings.length) { 39 | console.log('') 40 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 41 | console.log() 42 | for (let i = 0; i < warnings.length; i++) { 43 | const warning = warnings[i] 44 | console.log(' ' + warning) 45 | } 46 | console.log() 47 | process.exit(1) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /leproject/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import HelloWorld from '@/components/HelloWorld' 4 | import Home from '@/components/home' 5 | import Search from '@/components/search' 6 | import Detail from '@/components/detail' 7 | import Detaillist from '@/components/detaillist' 8 | import Register from '@/components/register' 9 | import Login from '@/components/login' 10 | import Logintel from '@/components/logintel' 11 | import Loginmove from '@/components/loginmove' 12 | 13 | Vue.use(Router) 14 | 15 | export default new Router({ 16 | routes: [ 17 | { 18 | path: '/home', 19 | component: Home 20 | }, 21 | { 22 | path: '/search', 23 | component: Search 24 | }, 25 | { 26 | path: '/detail', 27 | component: Detail 28 | }, 29 | { 30 | path: '/detaillist', 31 | component: Detaillist 32 | }, 33 | { 34 | path: '/register', 35 | component: Register 36 | }, 37 | { 38 | path: '/login', 39 | component: Login, 40 | children:[ 41 | { 42 | path: 'logintel', 43 | component: Logintel 44 | }, 45 | { 46 | path: 'loginmove', 47 | component: Loginmove 48 | }, 49 | { 50 | path: '/', 51 | redirect: "/login/logintel" 52 | }, 53 | ] 54 | }, 55 | // 当为其他的路径是直接定向到home页面 56 | { 57 | path: '*', 58 | redirect: "/home" 59 | } 60 | 61 | ] 62 | }) 63 | -------------------------------------------------------------------------------- /leproject/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | module.exports = { 12 | context: path.resolve(__dirname, '../'), 13 | entry: { 14 | app: './src/main.js' 15 | }, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: '[name].js', 19 | publicPath: process.env.NODE_ENV === 'production' 20 | ? config.build.assetsPublicPath 21 | : config.dev.assetsPublicPath 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.vue', '.json'], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.esm.js', 27 | '@': resolve('src'), 28 | } 29 | }, 30 | module: { 31 | rules: [ 32 | { 33 | test: /\.vue$/, 34 | loader: 'vue-loader', 35 | options: vueLoaderConfig 36 | }, 37 | { 38 | test: /\.js$/, 39 | loader: 'babel-loader', 40 | include: [resolve('src'), resolve('test')] 41 | }, 42 | { 43 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 44 | loader: 'url-loader', 45 | options: { 46 | limit: 10000, 47 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 48 | } 49 | }, 50 | { 51 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 52 | loader: 'url-loader', 53 | options: { 54 | limit: 10000, 55 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 56 | } 57 | }, 58 | { 59 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 60 | loader: 'url-loader', 61 | options: { 62 | limit: 10000, 63 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 64 | } 65 | } 66 | ] 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /leproject/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leproject", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "1244962083@qq.com <1244962083@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 | "vue": "^2.5.2", 14 | "vue-router": "^3.0.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^7.1.2", 18 | "axios": "^0.17.1", 19 | "babel-core": "^6.22.1", 20 | "babel-loader": "^7.1.1", 21 | "babel-plugin-transform-runtime": "^6.22.0", 22 | "babel-preset-env": "^1.3.2", 23 | "babel-preset-stage-2": "^6.22.0", 24 | "babel-register": "^6.22.0", 25 | "chalk": "^2.0.1", 26 | "copy-webpack-plugin": "^4.0.1", 27 | "css-loader": "^0.28.0", 28 | "eventsource-polyfill": "^0.9.6", 29 | "express": "^4.14.1", 30 | "extract-text-webpack-plugin": "^3.0.0", 31 | "file-loader": "^1.1.4", 32 | "friendly-errors-webpack-plugin": "^1.6.1", 33 | "html-webpack-plugin": "^2.30.1", 34 | "mint-ui": "^2.2.10", 35 | "node-notifier": "^5.1.2", 36 | "node-sass": "^4.6.1", 37 | "optimize-css-assets-webpack-plugin": "^3.2.0", 38 | "ora": "^1.2.0", 39 | "portfinder": "^1.0.13", 40 | "rimraf": "^2.6.0", 41 | "sass-loader": "^6.0.6", 42 | "semver": "^5.3.0", 43 | "shelljs": "^0.7.6", 44 | "url-loader": "^0.5.8", 45 | "vue-loader": "^13.3.0", 46 | "vue-style-loader": "^3.0.1", 47 | "vue-swipe": "^2.0.3", 48 | "vue-template-compiler": "^2.5.2", 49 | "webpack": "^3.6.0", 50 | "webpack-bundle-analyzer": "^2.9.0", 51 | "webpack-dev-server": "^2.9.1", 52 | "webpack-merge": "^4.1.0" 53 | }, 54 | "engines": { 55 | "node": ">= 4.0.0", 56 | "npm": ">= 3.0.0" 57 | }, 58 | "browserslist": [ 59 | "> 1%", 60 | "last 2 versions", 61 | "not ie <= 8" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /leproject/src/components/login.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /leproject/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const devWebpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 14 | }, 15 | // cheap-module-eval-source-map is faster for development 16 | devtool: config.dev.devtool, 17 | 18 | // these devServer options should be customized in /config/index.js 19 | devServer: { 20 | historyApiFallback: true, 21 | hot: true, 22 | host: process.env.HOST || config.dev.host, 23 | port: process.env.PORT || config.dev.port, 24 | open: config.dev.autoOpenBrowser, 25 | overlay: config.dev.errorOverlay ? { 26 | warnings: false, 27 | errors: true, 28 | } : false, 29 | publicPath: config.dev.assetsPublicPath, 30 | proxy: config.dev.proxyTable, 31 | quiet: true, // necessary for FriendlyErrorsPlugin 32 | watchOptions: { 33 | poll: config.dev.poll, 34 | } 35 | }, 36 | plugins: [ 37 | new webpack.DefinePlugin({ 38 | 'process.env': require('../config/dev.env') 39 | }), 40 | new webpack.HotModuleReplacementPlugin(), 41 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 42 | new webpack.NoEmitOnErrorsPlugin(), 43 | // https://github.com/ampedandwired/html-webpack-plugin 44 | new HtmlWebpackPlugin({ 45 | filename: 'index.html', 46 | template: 'index.html', 47 | inject: true 48 | }), 49 | new FriendlyErrorsPlugin() 50 | ] 51 | }) 52 | 53 | module.exports = new Promise((resolve, reject) => { 54 | portfinder.basePort = process.env.PORT || config.dev.port 55 | portfinder.getPort((err, port) => { 56 | if (err) { 57 | reject(err) 58 | } else { 59 | // publish the new Port, necessary for e2e tests 60 | process.env.PORT = port 61 | // add port to devServer config 62 | devWebpackConfig.devServer.port = port 63 | 64 | // Add FriendlyErrorsPlugin 65 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 66 | compilationSuccessInfo: { 67 | messages: [`Your application is running here: http://${config.dev.host}:${port}`], 68 | }, 69 | onErrors: config.dev.notifyOnErrors 70 | ? utils.createNotifierCallback() 71 | : undefined 72 | })) 73 | 74 | resolve(devWebpackConfig) 75 | } 76 | }) 77 | }) 78 | -------------------------------------------------------------------------------- /leproject/src/components/comment/foot.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /leproject/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 pkg = 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 | return path.posix.join(assetsSubDirectory, _path) 12 | } 13 | 14 | exports.cssLoaders = function (options) { 15 | options = options || {} 16 | 17 | const cssLoader = { 18 | loader: 'css-loader', 19 | options: { 20 | minimize: process.env.NODE_ENV === 'production', 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | var 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 | if (loader) { 36 | loaders.push({ 37 | loader: loader + '-loader', 38 | options: Object.assign({}, loaderOptions, { 39 | sourceMap: options.sourceMap 40 | }) 41 | }) 42 | } 43 | 44 | // Extract CSS when that option is specified 45 | // (which is the case during production build) 46 | if (options.extract) { 47 | return ExtractTextPlugin.extract({ 48 | use: loaders, 49 | fallback: 'vue-style-loader' 50 | }) 51 | } else { 52 | return ['vue-style-loader'].concat(loaders) 53 | } 54 | } 55 | 56 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 57 | return { 58 | css: generateLoaders(), 59 | postcss: generateLoaders(), 60 | less: generateLoaders('less'), 61 | sass: generateLoaders('sass', { indentedSyntax: true }), 62 | scss: generateLoaders('sass'), 63 | stylus: generateLoaders('stylus'), 64 | styl: generateLoaders('stylus') 65 | } 66 | } 67 | 68 | // Generate loaders for standalone style files (outside of .vue) 69 | exports.styleLoaders = function (options) { 70 | const output = [] 71 | const loaders = exports.cssLoaders(options) 72 | for (const extension in loaders) { 73 | const loader = loaders[extension] 74 | output.push({ 75 | test: new RegExp('\\.' + extension + '$'), 76 | use: loader 77 | }) 78 | } 79 | return output 80 | } 81 | 82 | exports.createNotifierCallback = function () { 83 | const notifier = require('node-notifier') 84 | 85 | return (severity, errors) => { 86 | if (severity !== 'error') { 87 | return 88 | } 89 | const error = errors[0] 90 | 91 | const filename = error.file.split('!').pop() 92 | notifier.notify({ 93 | title: pkg.name, 94 | message: severity + ': ' + error.name, 95 | subtitle: filename || '', 96 | icon: path.join(__dirname, 'logo.png') 97 | }) 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /leproject/src/components/logintel.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 47 | 48 | -------------------------------------------------------------------------------- /leproject/config/index.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | // Template version: 1.2.0 4 | // see http://vuejs-templates.github.io/webpack for documentation. 5 | 6 | const path = require('path') 7 | 8 | module.exports = { 9 | dev: { 10 | 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | // 设置反向代理，能够进行跨域请求数据,修改之后重启服务器 15 | 16 | '/index.php': { 17 | target: 'http://m.1c10.cn', 18 | host: 'm.1c10.cn', 19 | changeOrigin:true, 20 | // pathRewrite: { 21 | // '^/v4/api': '/v4/api' 22 | // } 23 | }, 24 | 25 | // http://m.1c10.cn/list.html?ajax=1 26 | 27 | '/list.html': { 28 | target: 'http://m.1c10.cn', 29 | host: 'm.1c10.cn', 30 | changeOrigin:true, 31 | // pathRewrite: { 32 | // '^/v4/api': '/v4/api' 33 | // } 34 | } 35 | 36 | }, 37 | 38 | 39 | 40 | // Various Dev Server settings 41 | host: 'localhost', // can be overwritten by process.env.HOST 42 | port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined 43 | autoOpenBrowser: true, 44 | errorOverlay: true, 45 | notifyOnErrors: true, 46 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 47 | 48 | // Use Eslint Loader? 49 | // If true, your code will be linted during bundling and 50 | // linting errors and warings will be shown in the console. 51 | useEslint: true, 52 | // If true, eslint errors and warings will also be shown in the error overlay 53 | // in the browser. 54 | showEslintErrorsInOverlay: false, 55 | 56 | /** 57 | * Source Maps 58 | */ 59 | 60 | // https://webpack.js.org/configuration/devtool/#development 61 | devtool: 'eval-source-map', 62 | 63 | // If you have problems debugging vue-files in devtools, 64 | // set this to false - it *may* help 65 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 66 | cacheBusting: true, 67 | 68 | // CSS Sourcemaps off by default because relative paths are "buggy" 69 | // with this option, according to the CSS-Loader README 70 | // (https://github.com/webpack/css-loader#sourcemaps) 71 | // In our experience, they generally work as expected, 72 | // just be aware of this issue when enabling this option. 73 | cssSourceMap: false, 74 | }, 75 | 76 | build: { 77 | // Template for index.html 78 | index: path.resolve(__dirname, '../dist/index.html'), 79 | 80 | // Paths 81 | assetsRoot: path.resolve(__dirname, '../dist'), 82 | assetsSubDirectory: 'static', 83 | assetsPublicPath: '/', 84 | 85 | /** 86 | * SourceMap 87 | */ 88 | productionSourceMap: true, 89 | // https://webpack.js.org/configuration/devtool/#production 90 | devtool: '#source-map', 91 | 92 | // Gzip off by default as many popular static hosts such as 93 | // Surge or Netlify already gzip all static assets for you. 94 | // Before setting to `true`, make sure to: 95 | // npm install --save-dev compression-webpack-plugin 96 | productionGzip: false, 97 | productionGzipExtensions: ['js', 'css'], 98 | 99 | // Run the build command with an extra argument to 100 | // View the bundle analyzer report after build finishes: 101 | // `npm run build --report` 102 | // Set to `true` or `false` to always turn it on or off 103 | bundleAnalyzerReport: process.env.npm_config_report 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /leproject/src/components/loginmove.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 49 | 50 | -------------------------------------------------------------------------------- /leproject/npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 3 | 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 4 | 1 verbose cli 'run', 5 | 1 verbose cli 'dev' ] 6 | 2 info using npm@3.10.10 7 | 3 info using node@v6.11.3 8 | 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 9 | 5 info lifecycle leproject@1.0.0~predev: leproject@1.0.0 10 | 6 silly lifecycle leproject@1.0.0~predev: no script for predev, continuing 11 | 7 info lifecycle leproject@1.0.0~dev: leproject@1.0.0 12 | 8 verbose lifecycle leproject@1.0.0~dev: unsafe-perm in lifecycle true 13 | 9 verbose lifecycle leproject@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\qfjy\jd3\1707\vuejs\day05\leproject\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\VisualSVN Server\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\ProgramFiles\MongoDB\Server\3.4\bin;C:\Users\Administrator.PC\AppData\Roaming\npm;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\MongoDB\Server\3.4\bin;C:\Program Files (x86)\MyDrivers\DriverGenius;C:\Program Files (x86)\MyDrivers\DriverGenius\ksoft 14 | 10 verbose lifecycle leproject@1.0.0~dev: CWD: E:\qfjy\jd3\1707\vuejs\day05\leproject 15 | 11 silly lifecycle leproject@1.0.0~dev: Args: [ '/d /s /c', 16 | 11 silly lifecycle 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ] 17 | 12 silly lifecycle leproject@1.0.0~dev: Returned: code: 3221225786 signal: null 18 | 13 info lifecycle leproject@1.0.0~dev: Failed to exec dev script 19 | 14 verbose stack Error: leproject@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` 20 | 14 verbose stack Exit status 3221225786 21 | 14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16) 22 | 14 verbose stack at emitTwo (events.js:106:13) 23 | 14 verbose stack at EventEmitter.emit (events.js:191:7) 24 | 14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14) 25 | 14 verbose stack at emitTwo (events.js:106:13) 26 | 14 verbose stack at ChildProcess.emit (events.js:191:7) 27 | 14 verbose stack at maybeClose (internal/child_process.js:920:16) 28 | 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5) 29 | 15 verbose pkgid leproject@1.0.0 30 | 16 verbose cwd E:\qfjy\jd3\1707\vuejs\day05\leproject 31 | 17 error Windows_NT 6.1.7601 32 | 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 33 | 19 error node v6.11.3 34 | 20 error npm v3.10.10 35 | 21 error code ELIFECYCLE 36 | 22 error leproject@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` 37 | 22 error Exit status 3221225786 38 | 23 error Failed at the leproject@1.0.0 dev script 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js'. 39 | 23 error Make sure you have the latest version of node.js and npm installed. 40 | 23 error If you do, this is most likely a problem with the leproject package, 41 | 23 error not with npm itself. 42 | 23 error Tell the author that this fails on your system: 43 | 23 error webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 44 | 23 error You can get information on how to open an issue for this project with: 45 | 23 error npm bugs leproject 46 | 23 error Or if that isn't available, you can get their info via: 47 | 23 error npm owner ls leproject 48 | 23 error There is likely additional logging output above. 49 | 24 verbose exit [ 1, true ] 50 | -------------------------------------------------------------------------------- /leproject/npm-debug.log.963337625: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 3 | 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 4 | 1 verbose cli 'run', 5 | 1 verbose cli 'dev' ] 6 | 2 info using npm@3.10.10 7 | 3 info using node@v6.11.3 8 | 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 9 | 5 info lifecycle leproject@1.0.0~predev: leproject@1.0.0 10 | 6 silly lifecycle leproject@1.0.0~predev: no script for predev, continuing 11 | 7 info lifecycle leproject@1.0.0~dev: leproject@1.0.0 12 | 8 verbose lifecycle leproject@1.0.0~dev: unsafe-perm in lifecycle true 13 | 9 verbose lifecycle leproject@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\qfjy\jd3\1707\vuejs\day05\leproject\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\VisualSVN Server\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\ProgramFiles\MongoDB\Server\3.4\bin;C:\Users\Administrator.PC\AppData\Roaming\npm;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\MongoDB\Server\3.4\bin;C:\Program Files (x86)\MyDrivers\DriverGenius;C:\Program Files (x86)\MyDrivers\DriverGenius\ksoft 14 | 10 verbose lifecycle leproject@1.0.0~dev: CWD: E:\qfjy\jd3\1707\vuejs\day05\leproject 15 | 11 silly lifecycle leproject@1.0.0~dev: Args: [ '/d /s /c', 16 | 11 silly lifecycle 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ] 17 | 12 silly lifecycle leproject@1.0.0~dev: Returned: code: 3221225786 signal: null 18 | 13 info lifecycle leproject@1.0.0~dev: Failed to exec dev script 19 | 14 verbose stack Error: leproject@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` 20 | 14 verbose stack Exit status 3221225786 21 | 14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16) 22 | 14 verbose stack at emitTwo (events.js:106:13) 23 | 14 verbose stack at EventEmitter.emit (events.js:191:7) 24 | 14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14) 25 | 14 verbose stack at emitTwo (events.js:106:13) 26 | 14 verbose stack at ChildProcess.emit (events.js:191:7) 27 | 14 verbose stack at maybeClose (internal/child_process.js:920:16) 28 | 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5) 29 | 15 verbose pkgid leproject@1.0.0 30 | 16 verbose cwd E:\qfjy\jd3\1707\vuejs\day05\leproject 31 | 17 error Windows_NT 6.1.7601 32 | 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 33 | 19 error node v6.11.3 34 | 20 error npm v3.10.10 35 | 21 error code ELIFECYCLE 36 | 22 error leproject@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` 37 | 22 error Exit status 3221225786 38 | 23 error Failed at the leproject@1.0.0 dev script 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js'. 39 | 23 error Make sure you have the latest version of node.js and npm installed. 40 | 23 error If you do, this is most likely a problem with the leproject package, 41 | 23 error not with npm itself. 42 | 23 error Tell the author that this fails on your system: 43 | 23 error webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 44 | 23 error You can get information on how to open an issue for this project with: 45 | 23 error npm bugs leproject 46 | 23 error Or if that isn't available, you can get their info via: 47 | 23 error npm owner ls leproject 48 | 23 error There is likely additional logging output above. 49 | 24 verbose exit [ 1, true ] 50 | -------------------------------------------------------------------------------- /leproject/src/components/register.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    房子
    18 |
    .icon-fangzi-copy
    19 |
    • 20 | 21 |
  • 22 | 23 |
    地址
    24 |
    .icon-dizhi
    25 |
    • 26 | 27 |
  • 28 | 29 |
    小人
    30 |
    .icon-xiaoren
    31 |
    • 32 | 33 |
  • 34 | 35 |
    QQ企鹅
    36 |
    .icon-QQqie
    37 |
    • 38 | 39 |
  • 40 | 41 |
    星
    42 |
    .icon-jinlingyingcaiwangtubiao29
    43 |
    • 44 | 45 |
  • 46 | 47 |
    地址
    48 |
    .icon-ccgl-dizhichaxun-4
    49 |
    • 50 | 51 |
  • 52 | 53 |
    电话
    54 |
    .icon-dianhua
    55 |
    • 56 | 57 |
  • 58 | 59 |
    小人
    60 |
    .icon-tuoyuan
    61 |
    • 62 | 63 |
  • 64 | 65 |
    电话
    66 |
    .icon-phone
    67 |
    • 68 | 69 |
  • 70 | 71 |
    电话
    72 |
    .icon-dianhua1
    73 |
    • 74 | 75 |
  • 76 | 77 |
    查找
    78 |
    .icon-chazhao
    79 |
    • 80 | 81 |
82 | 83 |

font-class引用

84 |
85 | 86 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

87 |

与unicode使用方式相比，具有如下特点：

88 |
    89 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 90 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 91 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 92 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 93 |
94 |

使用步骤如下：

95 |

第一步：引入项目下面生成的fontclass代码：

96 | 97 | 98 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
99 |

第二步：挑选相应图标并获取类名，应用于页面：

100 | 
<i class="iconfont icon-xxx"></i>
101 |
102 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

103 |
104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /leproject/src/components/detaillist.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1510716332611'); /* IE9*/ 4 | src: url('iconfont.eot?t=1510716332611#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAuYAAsAAAAAECQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW70vtY21hcAAAAYAAAAC3AAACYqlaCrNnbHlmAAACOAAABtcAAAh0lu54LmhlYWQAAAkQAAAAMQAAADYPae1UaGhlYQAACUQAAAAgAAAAJAfGA41obXR4AAAJZAAAAB0AAAA0M9L/5WxvY2EAAAmEAAAAHAAAABwOqA/mbWF4cAAACaAAAAAfAAAAIAEpASJuYW1lAAAJwAAAAUUAAAJtPlT+fXBvc3QAAAsIAAAAjgAAALZCTSJZeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLz8z9zwv4EhhrmBoREozAiSAwA32g1zeJzFkTEOwjAMRX9IaaF0YC1n4CZdq56lh+jAATpwENSBu9RRTxG+YwaQChviRy+Snci2/AFsAXhyJhng7nBQ3Zh1Ke9RpnyGC+MTjinTz6VACqmlkU4GmUIbxiXGyD/f3tblWHf96FuODefMcGDfPXYoUOnMLv9Y7+dy/2v9rird15eof8IR59LgBiEwuEt6Y6j7UhvqvjQGNw3pDHVfBoPbh0wGfUBoDTqCMBo6wxIN+Aca4UOdAHicTVV/bBPXHX/f9+7dL9tn+86+i8/xj9jxOcF2HBvnTJLGYQRa2kIhGgHCSinQlXaDTStqk7FNoUvRWpRB1tAWqUoT2o7SrqhllaKU/tJaCUS19q+lk1aqiTFNLWgSy6Ttj4nL3tkN4vTV19/3Ps/fX+97n0MUoaUr5H3ShDTUhkpoLdqMEPA5SCk4Bi3ZSgfOQbiFho2QQrLpbIuQTnWQPjBSfEgv2xXL4AXeDwrEYWVL2c524Cx0VWq4F8p6DCASNb+rZppVMglyUzZ+xLkHvwzhRLrZXys4d+f7Q+WkJo54VTWiqhMiT6mIMedX4IChS1SSeedV6jfD7yfacQK8kay5YdiXjKq7n678KJYxJIDDh0GLJpXX+oNmkMnPTV1TI0LAJzaZvnRrCEb+7mnSvDHrKmIPZrX+i3xK1iKKFIQk3CWBEEx3pcPpIJBPnZyTgwVYeOLatevwIAzAfufEc676lTN77RrbEb71cYHsIT0ogOKsUwoIumro5aqtVjsgWwoyVYNqHAyGlDB6/iIXXFRbtrUEF4PcxefX7QTYua6hSQ/bmHE+9GUsL6yZYScd4RbIdD3WL8nn5BDL1o3F/DLvzC/zHgfKLCYGrxs6Vy3beL5oA5l+/IlpAjlL/jNsfCF/9cwdb1C+9nQSSw97irBvxchdY68T8vpY/4F2bc+BZ/L2w7m3Nwn3yzw/sA+pLN4p8hvyAJJRM7LQKjYN29Fe9GP0MzSBXkDz6DP0Bfor+hr9B8IIZSx29Sy4Xc0KzNRrwAuKm5mbZcbW2cSAla0azOI7QGcAg93maCx/nRfYqQ6oVrKNmvhwiJ0wGGxTdxkHu1oD11zuKG3A9ePVFG/wy39gYyfQRuQaFHEjpxqUWAxm6G5WbpCK7faqw70Z94BtMVdpgWc7XVZWUyBlVewyy5pvGMKtHctmrus+3Po6IOV6jLtWNcRirSyzYF0sTA0qFqxIFUXSu6p3W+FPglrwYY+HiB5vLDO7Tp6x4FKqU7xry/eLDMu7GCfK3mZrdq00a3WlS0HsD3pNn1cMebmZkdEZzmvGJh/cNRkzb77KUIh4kopXxPu5dycmzhNyfmLi3ZtnyUsjIy+RuhaxioNiYPrgySMJIicGnK0c9SptrQEZw4dwaLz7ya0BDxfbTLYUOH5N36FHN0z7RB4H0qRtFxeMNLerAoepSgCAUF07CWabyeRoNBtlchxkRWZyJyiKzGGRgEyxtCt65+A6U0/gSMaHIR5NF0uZSBNgfyYW68Rqvi0qUTE/DOCNc5hnTzKkBVbinoTkgjGfmN+B8beYkGBYmWHw69a9O1cxh+0Fe24grB05R8i5I1o4ae4eBRjdbZrph3b2FHGewdOTHxHy0WRdL+w/Rsix/T909Y3m5nDBKD7E+Q/kaz3CX6KPGmqAp3F961VxROH01UEFb+ylpYP0Byva8jSwcRsYmPSHyKZT4ojhAyEw5GVdCGmecEqS4L7WUml9Z2dr4yejaFqzqjYpEY6PyESUgxEevufxemXJVL28x6NqEY8/KBtaUFR4v6q7/APs/fotWSTbURQhmspmKG91aVnLrmY0u2xobMD9oOkCTyyOc646f5NV/YIgyJB7RdD5VyDnEYQLYZDodnzwIOfzQOW6FCb3ApUk53/3krB03fmjR+DqvPEBOUQGUAglGxzlzqkBjKbqbxUbfHIbT8HS7BdcOkk4wKGuEGBCkmmgC6dWD2E8tPo7riZruEsnu/flKed83tQEZcrl93WfvOQEYLCvbzPGg3f0DSJY+sfSGAfkMOMORAXGDmmrNWvhqt0PrpQToIf8wLtUsLwk/+2M5zq7H3O+HH32WM6nE4JXyqb8lSQN8+auR6bIjvrK3xkLatzpx5+DwdGUSQkpy/JlhgyTqUceMOlwfbXM8RfJW2QN4l0+Mxo1wm3VDgqLc3OLgrN+7zjG43v3jBMy3j13g9Ibc/A7PL5nebtxX5fJedKCjHoXGwTj8hhfL6tuw0hgw5P8H34KQ2t99k9k5/RC5LNfwH190g7cTl4cDTw2JHjuEY4VAtb1MDw7RsUq/5Q7C0tLS2PkMrkftTImzVr1b6jLUhbrFGMxlnHODakiWrb7GLFkyfl5f9K7SUkFthwtSZxvUBZIgca0r9JFiGMDhpOFoP/cIE89672cVHpmKJD2DXlM5feqAcW0c/rmP6P5xDvBqFDv0b/JG2QLampEZ/R168PC2sSqKjN+rGRu6xqZPZu1uC9fO3OF466c2Xi06yyVZT+VncDx9wh57/jReY6bL0yVDt/95jcc982bZ7+m0FuaolikcqSP+/jE1CeEfDJ14mOE/g+Db5sJAHicY2BkYGAAYrFXs0/E89t8ZeBmYQCBa4ZX1sDo/8/+17MwMjcAuRwMTCBRAGdGDRcAAAB4nGNgZGBgbvjfwBDDwvD/2f//LIwMQBEUwAsAno0GWnicY2FgYGB+CcQvGBhYGLDh/8+Q2P9BNACDcAXnAAAAAAAAAAB2AJgAzgEGArYC6gMmA2gDjgO8A/oEOnicY2BkYGDgZRRjEGIAASYg5gJCBob/YD4DAA2HAU0AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbYtBDoIwEEX70VoEceHSO7DQuPEYHGEsSIeQKRoagdPbqEtf8jY/76tEfcnUfwokWGENjQ0MUmyRIccOBfYKU34naRcurR9mXfPi2ExM/tmIrqoHN8eOpWdp56glfsV6DLdYnK8Ha9u+/HysoylIeTE1k7hAZgx+DiR6cF6a9LeeTOwWR16pN788K+sAAA==') format('woff'), 6 | url('iconfont.ttf?t=1510716332611') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1510716332611#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-fangzi-copy:before { content: "\e600"; } 19 | 20 | .icon-dizhi:before { content: "\e9ff"; } 21 | 22 | .icon-xiaoren:before { content: "\e619"; } 23 | 24 | .icon-QQqie:before { content: "\e607"; } 25 | 26 | .icon-jinlingyingcaiwangtubiao29:before { content: "\e50a"; } 27 | 28 | .icon-ccgl-dizhichaxun-4:before { content: "\e754"; } 29 | 30 | .icon-dianhua:before { content: "\e6be"; } 31 | 32 | .icon-tuoyuan:before { content: "\e68c"; } 33 | 34 | .icon-phone:before { content: "\e656"; } 35 | 36 | .icon-dianhua1:before { content: "\e64b"; } 37 | 38 | .icon-chazhao:before { content: "\e79c"; } 39 | 40 | -------------------------------------------------------------------------------- /leproject/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | 13 | const env = require('../config/prod.env') 14 | 15 | const webpackConfig = merge(baseWebpackConfig, { 16 | module: { 17 | rules: utils.styleLoaders({ 18 | sourceMap: config.build.productionSourceMap, 19 | extract: true, 20 | usePostCSS: true 21 | }) 22 | }, 23 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 24 | output: { 25 | path: config.build.assetsRoot, 26 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 27 | chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify 35 | new webpack.optimize.UglifyJsPlugin({ 36 | compress: { 37 | warnings: false 38 | }, 39 | sourceMap: config.build.productionSourceMap, 40 | parallel: true 41 | }), 42 | // extract css into its own file 43 | new ExtractTextPlugin({ 44 | filename: utils.assetsPath('css/[name].[contenthash].css'), 45 | // set the following option to `true` if you want to extract CSS from 46 | // codesplit chunks into this main css file as well. 47 | // This will result in *all* of your app's CSS being loaded upfront. 48 | allChunks: false, 49 | }), 50 | // Compress extracted CSS. We are using this plugin so that possible 51 | // duplicated CSS from different components can be deduped. 52 | new OptimizeCSSPlugin({ 53 | cssProcessorOptions: config.build.productionSourceMap 54 | ? { safe: true, map: { inline: false } } 55 | : { safe: true } 56 | }), 57 | // generate dist index.html with correct asset hash for caching. 58 | // you can customize output by editing /index.html 59 | // see https://github.com/ampedandwired/html-webpack-plugin 60 | new HtmlWebpackPlugin({ 61 | filename: config.build.index, 62 | template: 'index.html', 63 | inject: true, 64 | minify: { 65 | removeComments: true, 66 | collapseWhitespace: true, 67 | removeAttributeQuotes: true 68 | // more options: 69 | // https://github.com/kangax/html-minifier#options-quick-reference 70 | }, 71 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 72 | chunksSortMode: 'dependency' 73 | }), 74 | // keep module.id stable when vender modules does not change 75 | new webpack.HashedModuleIdsPlugin(), 76 | // enable scope hoisting 77 | new webpack.optimize.ModuleConcatenationPlugin(), 78 | // split vendor js into its own file 79 | new webpack.optimize.CommonsChunkPlugin({ 80 | name: 'vendor', 81 | minChunks: function (module) { 82 | // any required modules inside node_modules are extracted to vendor 83 | return ( 84 | module.resource && 85 | /\.js$/.test(module.resource) && 86 | module.resource.indexOf( 87 | path.join(__dirname, '../node_modules') 88 | ) === 0 89 | ) 90 | } 91 | }), 92 | // extract webpack runtime and module manifest to its own file in order to 93 | // prevent vendor hash from being updated whenever app bundle is updated 94 | new webpack.optimize.CommonsChunkPlugin({ 95 | name: 'manifest', 96 | minChunks: Infinity, 97 | }), 98 | // This instance extracts shared chunks from code splitted chunks and bundles them 99 | // in a separate chunk, similar to the vendor chunk 100 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 101 | new webpack.optimize.CommonsChunkPlugin({ 102 | name: 'app', 103 | async: 'vendor-async', 104 | children: true, 105 | minChunks: 3, 106 | }), 107 | 108 | // copy custom static assets 109 | new CopyWebpackPlugin([ 110 | { 111 | from: path.resolve(__dirname, '../static'), 112 | to: config.build.assetsSubDirectory, 113 | ignore: ['.*'] 114 | } 115 | ]) 116 | ] 117 | }) 118 | 119 | if (config.build.productionGzip) { 120 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 121 | 122 | webpackConfig.plugins.push( 123 | new CompressionWebpackPlugin({ 124 | asset: '[path].gz[query]', 125 | algorithm: 'gzip', 126 | test: new RegExp( 127 | '\\.(' + 128 | config.build.productionGzipExtensions.join('|') + 129 | ')$' 130 | ), 131 | threshold: 10240, 132 | minRatio: 0.8 133 | }) 134 | ) 135 | } 136 | 137 | if (config.build.bundleAnalyzerReport) { 138 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 139 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 140 | } 141 | 142 | module.exports = webpackConfig 143 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    房子
    38 |
    &#xe600;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    地址
    44 |
    &#xe9ff;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    小人
    50 |
    &#xe619;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    QQ企鹅
    56 |
    &#xe607;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    星
    62 |
    &#xe50a;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    地址
    68 |
    &#xe754;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    电话
    74 |
    &#xe6be;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    小人
    80 |
    &#xe68c;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    电话
    86 |
    &#xe656;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    电话
    92 |
    &#xe64b;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    查找
    98 |
    &#xe79c;
    99 |
    • 100 | 101 |
102 |

unicode引用

103 |
104 | 105 |

unicode是字体在网页端最原始的应用方式，特点是：

106 |
    107 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 108 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 109 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 110 |
111 |
112 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

113 |
114 |

unicode使用步骤如下：

115 |

第一步：拷贝项目下面生成的font-face

116 | 
@font-face {
117 |   font-family: 'iconfont';
118 |   src: url('iconfont.eot');
119 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
120 |   url('iconfont.woff') format('woff'),
121 |   url('iconfont.ttf') format('truetype'),
122 |   url('iconfont.svg#iconfont') format('svg');
123 | }
124 |
125 |

第二步：定义使用iconfont的样式

126 | 
.iconfont{
127 |   font-family:"iconfont" !important;
128 |   font-size:16px;font-style:normal;
129 |   -webkit-font-smoothing: antialiased;
130 |   -webkit-text-stroke-width: 0.2px;
131 |   -moz-osx-font-smoothing: grayscale;
132 | }
133 |
134 |

第三步：挑选相应图标并获取字体编码，应用于页面

135 | 
<i class="iconfont">&#x33;</i>
136 | 137 |
138 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

139 |
140 |
141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    房子
    35 |
    #icon-fangzi-copy
    36 |
    • 37 | 38 |
  • 39 | 42 |
    地址
    43 |
    #icon-dizhi
    44 |
    • 45 | 46 |
  • 47 | 50 |
    小人
    51 |
    #icon-xiaoren
    52 |
    • 53 | 54 |
  • 55 | 58 |
    QQ企鹅
    59 |
    #icon-QQqie
    60 |
    • 61 | 62 |
  • 63 | 66 |
    星
    67 |
    #icon-jinlingyingcaiwangtubiao29
    68 |
    • 69 | 70 |
  • 71 | 74 |
    地址
    75 |
    #icon-ccgl-dizhichaxun-4
    76 |
    • 77 | 78 |
  • 79 | 82 |
    电话
    83 |
    #icon-dianhua
    84 |
    • 85 | 86 |
  • 87 | 90 |
    小人
    91 |
    #icon-tuoyuan
    92 |
    • 93 | 94 |
  • 95 | 98 |
    电话
    99 |
    #icon-phone
    100 |
    • 101 | 102 |
  • 103 | 106 |
    电话
    107 |
    #icon-dianhua1
    108 |
    • 109 | 110 |
  • 111 | 114 |
    查找
    115 |
    #icon-chazhao
    116 |
    • 117 | 118 |
119 | 120 | 121 |

symbol引用

122 |
123 | 124 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 125 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

126 |
    127 |
  • 支持多色图标了，不再受单色限制。
    • 128 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 129 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 130 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 131 |
132 |

使用步骤如下：

133 |

第一步：引入项目下面生成的symbol代码：

134 | 
<script src="./iconfont.js"></script>
135 |

第二步：加入通用css代码（引入一次就行）：

136 | 
<style type="text/css">
137 | .icon {
138 |    width: 1em; height: 1em;
139 |    vertical-align: -0.15em;
140 |    fill: currentColor;
141 |    overflow: hidden;
142 | }
143 | </style>
144 |

第三步：挑选相应图标并获取类名，应用于页面：

145 | 
<svg class="icon" aria-hidden="true">
146 |   <use xlink:href="#icon-xxx"></use>
147 | </svg>
148 |
149 |
150 | 151 | 152 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1493196342498'); /* IE9*/ 4 | src: url('iconfont.eot?t=1493196342498#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1493196342498') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1493196342498') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1493196342498#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-all:before { content: "\e696"; } 19 | 20 | .icon-back:before { content: "\e697"; } 21 | 22 | .icon-cart:before { content: "\e698"; } 23 | 24 | .icon-category:before { content: "\e699"; } 25 | 26 | .icon-close:before { content: "\e69a"; } 27 | 28 | .icon-comments:before { content: "\e69b"; } 29 | 30 | .icon-cry:before { content: "\e69c"; } 31 | 32 | .icon-delete:before { content: "\e69d"; } 33 | 34 | .icon-edit:before { content: "\e69e"; } 35 | 36 | .icon-email:before { content: "\e69f"; } 37 | 38 | .icon-favorite:before { content: "\e6a0"; } 39 | 40 | .icon-folder:before { content: "\e6a1"; } 41 | 42 | .icon-form:before { content: "\e6a2"; } 43 | 44 | .icon-help:before { content: "\e6a3"; } 45 | 46 | .icon-information:before { content: "\e6a4"; } 47 | 48 | .icon-less:before { content: "\e6a5"; } 49 | 50 | .icon-moreunfold:before { content: "\e6a6"; } 51 | 52 | .icon-more:before { content: "\e6a7"; } 53 | 54 | .icon-pic:before { content: "\e6a8"; } 55 | 56 | .icon-qrcode:before { content: "\e6a9"; } 57 | 58 | .icon-refresh:before { content: "\e6aa"; } 59 | 60 | .icon-rfq:before { content: "\e6ab"; } 61 | 62 | .icon-search:before { content: "\e6ac"; } 63 | 64 | .icon-selected:before { content: "\e6ad"; } 65 | 66 | .icon-set:before { content: "\e6ae"; } 67 | 68 | .icon-smile:before { content: "\e6af"; } 69 | 70 | .icon-success:before { content: "\e6b1"; } 71 | 72 | .icon-survey:before { content: "\e6b2"; } 73 | 74 | .icon-training:before { content: "\e6b3"; } 75 | 76 | .icon-viewgallery:before { content: "\e6b4"; } 77 | 78 | .icon-viewlist:before { content: "\e6b5"; } 79 | 80 | .icon-warning:before { content: "\e6b6"; } 81 | 82 | .icon-wrong:before { content: "\e6b7"; } 83 | 84 | .icon-account:before { content: "\e6b8"; } 85 | 86 | .icon-add:before { content: "\e6b9"; } 87 | 88 | .icon-atm:before { content: "\e6ba"; } 89 | 90 | .icon-clock:before { content: "\e6bb"; } 91 | 92 | .icon-remind:before { content: "\e6bc"; } 93 | 94 | .icon-calendar:before { content: "\e6bf"; } 95 | 96 | .icon-attachment:before { content: "\e6c0"; } 97 | 98 | .icon-3column:before { content: "\e6c3"; } 99 | 100 | .icon-4column:before { content: "\e6c4"; } 101 | 102 | .icon-discount:before { content: "\e6c5"; } 103 | 104 | .icon-service:before { content: "\e6c7"; } 105 | 106 | .icon-print:before { content: "\e6c9"; } 107 | 108 | .icon-box:before { content: "\e6cb"; } 109 | 110 | .icon-process:before { content: "\e6ce"; } 111 | 112 | .icon-bags:before { content: "\e6d1"; } 113 | 114 | .icon-beauty:before { content: "\e6d2"; } 115 | 116 | .icon-electrical:before { content: "\e6d4"; } 117 | 118 | .icon-electronics:before { content: "\e6da"; } 119 | 120 | .icon-gifts:before { content: "\e6db"; } 121 | 122 | .icon-apparel:before { content: "\e6dc"; } 123 | 124 | .icon-atmaway:before { content: "\e6e9"; } 125 | 126 | .icon-rfq1:before { content: "\e6eb"; } 127 | 128 | .icon-scanning:before { content: "\e6ec"; } 129 | 130 | .icon-filter:before { content: "\e6f1"; } 131 | 132 | .icon-pin:before { content: "\e6f2"; } 133 | 134 | .icon-history:before { content: "\e6f3"; } 135 | 136 | .icon-productfeatures:before { content: "\e6f4"; } 137 | 138 | .icon-supplierfeatures:before { content: "\e6f5"; } 139 | 140 | .icon-similarproduct:before { content: "\e6f6"; } 141 | 142 | .icon-link:before { content: "\e6f7"; } 143 | 144 | .icon-cut:before { content: "\e6f8"; } 145 | 146 | .icon-navlist:before { content: "\e6fa"; } 147 | 148 | .icon-imagetext:before { content: "\e6fb"; } 149 | 150 | .icon-text:before { content: "\e6fc"; } 151 | 152 | .icon-move:before { content: "\e6fd"; } 153 | 154 | .icon-subtract:before { content: "\e6fe"; } 155 | 156 | .icon-dollar:before { content: "\e702"; } 157 | 158 | .icon-raw:before { content: "\e704"; } 159 | 160 | .icon-office:before { content: "\e705"; } 161 | 162 | .icon-agriculture:before { content: "\e707"; } 163 | 164 | .icon-machinery:before { content: "\e709"; } 165 | 166 | .icon-assessedbadge:before { content: "\e70a"; } 167 | 168 | .icon-gerenzhongxin:before { content: "\e70b"; } 169 | 170 | .icon-jifen:before { content: "\e70c"; } 171 | 172 | .icon-operation:before { content: "\e70e"; } 173 | 174 | .icon-remind1:before { content: "\e713"; } 175 | 176 | .icon-icondownload:before { content: "\e714"; } 177 | 178 | .icon-map:before { content: "\e715"; } 179 | 180 | .icon-good:before { content: "\e717"; } 181 | 182 | .icon-skip:before { content: "\e718"; } 183 | 184 | .icon-iconfontplay2:before { content: "\e719"; } 185 | 186 | .icon-iconfontstop:before { content: "\e71a"; } 187 | 188 | .icon-compass:before { content: "\e71b"; } 189 | 190 | .icon-security:before { content: "\e71c"; } 191 | 192 | .icon-share:before { content: "\e71d"; } 193 | 194 | .icon-store:before { content: "\e722"; } 195 | 196 | .icon-rejectedorder:before { content: "\e724"; } 197 | 198 | .icon-phone:before { content: "\e725"; } 199 | 200 | .icon-bussinessman:before { content: "\e726"; } 201 | 202 | .icon-mobilephone:before { content: "\e72a"; } 203 | 204 | .icon-emailfilling:before { content: "\e72d"; } 205 | 206 | .icon-favoritesfilling:before { content: "\e730"; } 207 | 208 | .icon-accountfilling:before { content: "\e732"; } 209 | 210 | .icon-creditlevelfilling:before { content: "\e736"; } 211 | 212 | .icon-exl:before { content: "\e73f"; } 213 | 214 | .icon-pdf:before { content: "\e740"; } 215 | 216 | .icon-zip:before { content: "\e741"; } 217 | 218 | .icon-sorting:before { content: "\e743"; } 219 | 220 | .icon-copy:before { content: "\e744"; } 221 | 222 | .icon-hot:before { content: "\e756"; } 223 | 224 | .icon-trade:before { content: "\e758"; } 225 | 226 | .icon-component:before { content: "\e75e"; } 227 | 228 | .icon-color:before { content: "\e760"; } 229 | 230 | .icon-color-filling:before { content: "\e7cd"; } 231 | 232 | .icon-favorites:before { content: "\e7ce"; } 233 | 234 | .icon-RFQ:before { content: "\e803"; } 235 | 236 | .icon-originalimage:before { content: "\e806"; } 237 | 238 | .icon-logistic:before { content: "\e811"; } 239 | 240 | .icon-video:before { content: "\e820"; } 241 | 242 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 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 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/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 | 维护：玉伯, 正淳 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 | -------------------------------------------------------------------------------- /leproject/src/components/home.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /leproject/src/components/search.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';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("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /leproject/src/components/detail.vue: -------------------------------------------------------------------------------- 1 | 112 | 113 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    all
    18 |
    .icon-all
    19 |
    • 20 | 21 |
  • 22 | 23 |
    back
    24 |
    .icon-back
    25 |
    • 26 | 27 |
  • 28 | 29 |
    cart
    30 |
    .icon-cart
    31 |
    • 32 | 33 |
  • 34 | 35 |
    Category
    36 |
    .icon-category
    37 |
    • 38 | 39 |
  • 40 | 41 |
    close
    42 |
    .icon-close
    43 |
    • 44 | 45 |
  • 46 | 47 |
    comments
    48 |
    .icon-comments
    49 |
    • 50 | 51 |
  • 52 | 53 |
    cry
    54 |
    .icon-cry
    55 |
    • 56 | 57 |
  • 58 | 59 |
    delete
    60 |
    .icon-delete
    61 |
    • 62 | 63 |
  • 64 | 65 |
    edit
    66 |
    .icon-edit
    67 |
    • 68 | 69 |
  • 70 | 71 |
    email
    72 |
    .icon-email
    73 |
    • 74 | 75 |
  • 76 | 77 |
    favorite
    78 |
    .icon-favorite
    79 |
    • 80 | 81 |
  • 82 | 83 |
    folder
    84 |
    .icon-folder
    85 |
    • 86 | 87 |
  • 88 | 89 |
    form
    90 |
    .icon-form
    91 |
    • 92 | 93 |
  • 94 | 95 |
    help
    96 |
    .icon-help
    97 |
    • 98 | 99 |
  • 100 | 101 |
    information
    102 |
    .icon-information
    103 |
    • 104 | 105 |
  • 106 | 107 |
    less
    108 |
    .icon-less
    109 |
    • 110 | 111 |
  • 112 | 113 |
    more_unfold
    114 |
    .icon-moreunfold
    115 |
    • 116 | 117 |
  • 118 | 119 |
    more
    120 |
    .icon-more
    121 |
    • 122 | 123 |
  • 124 | 125 |
    pic
    126 |
    .icon-pic
    127 |
    • 128 | 129 |
  • 130 | 131 |
    QRCode
    132 |
    .icon-qrcode
    133 |
    • 134 | 135 |
  • 136 | 137 |
    refresh
    138 |
    .icon-refresh
    139 |
    • 140 | 141 |
  • 142 | 143 |
    RFQ
    144 |
    .icon-rfq
    145 |
    • 146 | 147 |
  • 148 | 149 |
    search
    150 |
    .icon-search
    151 |
    • 152 | 153 |
  • 154 | 155 |
    selected
    156 |
    .icon-selected
    157 |
    • 158 | 159 |
  • 160 | 161 |
    set
    162 |
    .icon-set
    163 |
    • 164 | 165 |
  • 166 | 167 |
    Smile
    168 |
    .icon-smile
    169 |
    • 170 | 171 |
  • 172 | 173 |
    success
    174 |
    .icon-success
    175 |
    • 176 | 177 |
  • 178 | 179 |
    survey
    180 |
    .icon-survey
    181 |
    • 182 | 183 |
  • 184 | 185 |
    training
    186 |
    .icon-training
    187 |
    • 188 | 189 |
  • 190 | 191 |
    ViewGallery
    192 |
    .icon-viewgallery
    193 |
    • 194 | 195 |
  • 196 | 197 |
    Viewlist
    198 |
    .icon-viewlist
    199 |
    • 200 | 201 |
  • 202 | 203 |
    warning
    204 |
    .icon-warning
    205 |
    • 206 | 207 |
  • 208 | 209 |
    wrong
    210 |
    .icon-wrong
    211 |
    • 212 | 213 |
  • 214 | 215 |
    account
    216 |
    .icon-account
    217 |
    • 218 | 219 |
  • 220 | 221 |
    add
    222 |
    .icon-add
    223 |
    • 224 | 225 |
  • 226 | 227 |
    atm
    228 |
    .icon-atm
    229 |
    • 230 | 231 |
  • 232 | 233 |
    clock
    234 |
    .icon-clock
    235 |
    • 236 | 237 |
  • 238 | 239 |
    remind
    240 |
    .icon-remind
    241 |
    • 242 | 243 |
  • 244 | 245 |
    calendar
    246 |
    .icon-calendar
    247 |
    • 248 | 249 |
  • 250 | 251 |
    attachment
    252 |
    .icon-attachment
    253 |
    • 254 | 255 |
  • 256 | 257 |
    3column
    258 |
    .icon-3column
    259 |
    • 260 | 261 |
  • 262 | 263 |
    4column
    264 |
    .icon-4column
    265 |
    • 266 | 267 |
  • 268 | 269 |
    discount
    270 |
    .icon-discount
    271 |
    • 272 | 273 |
  • 274 | 275 |
    service
    276 |
    .icon-service
    277 |
    • 278 | 279 |
  • 280 | 281 |
    print
    282 |
    .icon-print
    283 |
    • 284 | 285 |
  • 286 | 287 |
    box
    288 |
    .icon-box
    289 |
    • 290 | 291 |
  • 292 | 293 |
    process
    294 |
    .icon-process
    295 |
    • 296 | 297 |
  • 298 | 299 |
    bags
    300 |
    .icon-bags
    301 |
    • 302 | 303 |
  • 304 | 305 |
    beauty
    306 |
    .icon-beauty
    307 |
    • 308 | 309 |
  • 310 | 311 |
    electrical
    312 |
    .icon-electrical
    313 |
    • 314 | 315 |
  • 316 | 317 |
    electronics
    318 |
    .icon-electronics
    319 |
    • 320 | 321 |
  • 322 | 323 |
    gifts
    324 |
    .icon-gifts
    325 |
    • 326 | 327 |
  • 328 | 329 |
    apparel
    330 |
    .icon-apparel
    331 |
    • 332 | 333 |
  • 334 | 335 |
    atm-away
    336 |
    .icon-atmaway
    337 |
    • 338 | 339 |
  • 340 | 341 |
    rfq
    342 |
    .icon-rfq1
    343 |
    • 344 | 345 |
  • 346 | 347 |
    scanning
    348 |
    .icon-scanning
    349 |
    • 350 | 351 |
  • 352 | 353 |
    filter
    354 |
    .icon-filter
    355 |
    • 356 | 357 |
  • 358 | 359 |
    pin
    360 |
    .icon-pin
    361 |
    • 362 | 363 |
  • 364 | 365 |
    history
    366 |
    .icon-history
    367 |
    • 368 | 369 |
  • 370 | 371 |
    product-features
    372 |
    .icon-productfeatures
    373 |
    • 374 | 375 |
  • 376 | 377 |
    supplier-features
    378 |
    .icon-supplierfeatures
    379 |
    • 380 | 381 |
  • 382 | 383 |
    similar-product
    384 |
    .icon-similarproduct
    385 |
    • 386 | 387 |
  • 388 | 389 |
    link
    390 |
    .icon-link
    391 |
    • 392 | 393 |
  • 394 | 395 |
    cut
    396 |
    .icon-cut
    397 |
    • 398 | 399 |
  • 400 | 401 |
    nav-list
    402 |
    .icon-navlist
    403 |
    • 404 | 405 |
  • 406 | 407 |
    image-text
    408 |
    .icon-imagetext
    409 |
    • 410 | 411 |
  • 412 | 413 |
    text
    414 |
    .icon-text
    415 |
    • 416 | 417 |
  • 418 | 419 |
    move
    420 |
    .icon-move
    421 |
    • 422 | 423 |
  • 424 | 425 |
    subtract
    426 |
    .icon-subtract
    427 |
    • 428 | 429 |
  • 430 | 431 |
    dollar
    432 |
    .icon-dollar
    433 |
    • 434 | 435 |
  • 436 | 437 |
    raw
    438 |
    .icon-raw
    439 |
    • 440 | 441 |
  • 442 | 443 |
    office
    444 |
    .icon-office
    445 |
    • 446 | 447 |
  • 448 | 449 |
    agriculture
    450 |
    .icon-agriculture
    451 |
    • 452 | 453 |
  • 454 | 455 |
    machinery
    456 |
    .icon-machinery
    457 |
    • 458 | 459 |
  • 460 | 461 |
    assessed-Badge
    462 |
    .icon-assessedbadge
    463 |
    • 464 | 465 |
  • 466 | 467 |
    personal-center
    468 |
    .icon-gerenzhongxin
    469 |
    • 470 | 471 |
  • 472 | 473 |
    integral
    474 |
    .icon-jifen
    475 |
    • 476 | 477 |
  • 478 | 479 |
    operation
    480 |
    .icon-operation
    481 |
    • 482 | 483 |
  • 484 | 485 |
    remind
    486 |
    .icon-remind1
    487 |
    • 488 | 489 |
  • 490 | 491 |
    download
    492 |
    .icon-icondownload
    493 |
    • 494 | 495 |
  • 496 | 497 |
    map
    498 |
    .icon-map
    499 |
    • 500 | 501 |
  • 502 | 503 |
    good
    504 |
    .icon-good
    505 |
    • 506 | 507 |
  • 508 | 509 |
    skip
    510 |
    .icon-skip
    511 |
    • 512 | 513 |
  • 514 | 515 |
    play
    516 |
    .icon-iconfontplay2
    517 |
    • 518 | 519 |
  • 520 | 521 |
    stop
    522 |
    .icon-iconfontstop
    523 |
    • 524 | 525 |
  • 526 | 527 |
    compass
    528 |
    .icon-compass
    529 |
    • 530 | 531 |
  • 532 | 533 |
    security
    534 |
    .icon-security
    535 |
    • 536 | 537 |
  • 538 | 539 |
    share
    540 |
    .icon-share
    541 |
    • 542 | 543 |
  • 544 | 545 |
    store
    546 |
    .icon-store
    547 |
    • 548 | 549 |
  • 550 | 551 |
    rejected-order
    552 |
    .icon-rejectedorder
    553 |
    • 554 | 555 |
  • 556 | 557 |
    phone
    558 |
    .icon-phone
    559 |
    • 560 | 561 |
  • 562 | 563 |
    bussiness-man
    564 |
    .icon-bussinessman
    565 |
    • 566 | 567 |
  • 568 | 569 |
    Mobile-phone
    570 |
    .icon-mobilephone
    571 |
    • 572 | 573 |
  • 574 | 575 |
    email-filling
    576 |
    .icon-emailfilling
    577 |
    • 578 | 579 |
  • 580 | 581 |
    favorites-filling
    582 |
    .icon-favoritesfilling
    583 |
    • 584 | 585 |
  • 586 | 587 |
    account-filling
    588 |
    .icon-accountfilling
    589 |
    • 590 | 591 |
  • 592 | 593 |
    credit-level-filling
    594 |
    .icon-creditlevelfilling
    595 |
    • 596 | 597 |
  • 598 | 599 |
    exl
    600 |
    .icon-exl
    601 |
    • 602 | 603 |
  • 604 | 605 |
    pdf
    606 |
    .icon-pdf
    607 |
    • 608 | 609 |
  • 610 | 611 |
    zip
    612 |
    .icon-zip
    613 |
    • 614 | 615 |
  • 616 | 617 |
    sorting
    618 |
    .icon-sorting
    619 |
    • 620 | 621 |
  • 622 | 623 |
    copy
    624 |
    .icon-copy
    625 |
    • 626 | 627 |
  • 628 | 629 |
    hot
    630 |
    .icon-hot
    631 |
    • 632 | 633 |
  • 634 | 635 |
    trade
    636 |
    .icon-trade
    637 |
    • 638 | 639 |
  • 640 | 641 |
    component
    642 |
    .icon-component
    643 |
    • 644 | 645 |
  • 646 | 647 |
    color
    648 |
    .icon-color
    649 |
    • 650 | 651 |
  • 652 | 653 |
    color-filling
    654 |
    .icon-color-filling
    655 |
    • 656 | 657 |
  • 658 | 659 |
    favorites
    660 |
    .icon-favorites
    661 |
    • 662 | 663 |
  • 664 | 665 |
    RFQ
    666 |
    .icon-RFQ
    667 |
    • 668 | 669 |
  • 670 | 671 |
    original-image
    672 |
    .icon-originalimage
    673 |
    • 674 | 675 |
  • 676 | 677 |
    logistic
    678 |
    .icon-logistic
    679 |
    • 680 | 681 |
  • 682 | 683 |
    video
    684 |
    .icon-video
    685 |
    • 686 | 687 |
688 | 689 |

font-class引用

690 |
691 | 692 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

693 |

与unicode使用方式相比，具有如下特点：

694 |
    695 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 696 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 697 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 698 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 699 |
700 |

使用步骤如下：

701 |

第一步：引入项目下面生成的fontclass代码：

702 | 703 | 704 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
705 |

第二步：挑选相应图标并获取类名，应用于页面：

706 | 
<i class="iconfont icon-xxx"></i>
707 |
708 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

709 |
710 |
711 | 712 | 713 | -------------------------------------------------------------------------------- /leproject/src/assets/iconfont1/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    all
    38 |
    &#xe696;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    back
    44 |
    &#xe697;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    cart
    50 |
    &#xe698;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    Category
    56 |
    &#xe699;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    close
    62 |
    &#xe69a;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    comments
    68 |
    &#xe69b;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    cry
    74 |
    &#xe69c;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    delete
    80 |
    &#xe69d;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    edit
    86 |
    &#xe69e;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    email
    92 |
    &#xe69f;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    favorite
    98 |
    &#xe6a0;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    folder
    104 |
    &#xe6a1;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    form
    110 |
    &#xe6a2;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    help
    116 |
    &#xe6a3;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    information
    122 |
    &#xe6a4;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    less
    128 |
    &#xe6a5;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    more_unfold
    134 |
    &#xe6a6;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    more
    140 |
    &#xe6a7;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    pic
    146 |
    &#xe6a8;
    147 |
    • 148 | 149 |
  • 150 | 151 |
    QRCode
    152 |
    &#xe6a9;
    153 |
    • 154 | 155 |
  • 156 | 157 |
    refresh
    158 |
    &#xe6aa;
    159 |
    • 160 | 161 |
  • 162 | 163 |
    RFQ
    164 |
    &#xe6ab;
    165 |
    • 166 | 167 |
  • 168 | 169 |
    search
    170 |
    &#xe6ac;
    171 |
    • 172 | 173 |
  • 174 | 175 |
    selected
    176 |
    &#xe6ad;
    177 |
    • 178 | 179 |
  • 180 | 181 |
    set
    182 |
    &#xe6ae;
    183 |
    • 184 | 185 |
  • 186 | 187 |
    Smile
    188 |
    &#xe6af;
    189 |
    • 190 | 191 |
  • 192 | 193 |
    success
    194 |
    &#xe6b1;
    195 |
    • 196 | 197 |
  • 198 | 199 |
    survey
    200 |
    &#xe6b2;
    201 |
    • 202 | 203 |
  • 204 | 205 |
    training
    206 |
    &#xe6b3;
    207 |
    • 208 | 209 |
  • 210 | 211 |
    ViewGallery
    212 |
    &#xe6b4;
    213 |
    • 214 | 215 |
  • 216 | 217 |
    Viewlist
    218 |
    &#xe6b5;
    219 |
    • 220 | 221 |
  • 222 | 223 |
    warning
    224 |
    &#xe6b6;
    225 |
    • 226 | 227 |
  • 228 | 229 |
    wrong
    230 |
    &#xe6b7;
    231 |
    • 232 | 233 |
  • 234 | 235 |
    account
    236 |
    &#xe6b8;
    237 |
    • 238 | 239 |
  • 240 | 241 |
    add
    242 |
    &#xe6b9;
    243 |
    • 244 | 245 |
  • 246 | 247 |
    atm
    248 |
    &#xe6ba;
    249 |
    • 250 | 251 |
  • 252 | 253 |
    clock
    254 |
    &#xe6bb;
    255 |
    • 256 | 257 |
  • 258 | 259 |
    remind
    260 |
    &#xe6bc;
    261 |
    • 262 | 263 |
  • 264 | 265 |
    calendar
    266 |
    &#xe6bf;
    267 |
    • 268 | 269 |
  • 270 | 271 |
    attachment
    272 |
    &#xe6c0;
    273 |
    • 274 | 275 |
  • 276 | 277 |
    3column
    278 |
    &#xe6c3;
    279 |
    • 280 | 281 |
  • 282 | 283 |
    4column
    284 |
    &#xe6c4;
    285 |
    • 286 | 287 |
  • 288 | 289 |
    discount
    290 |
    &#xe6c5;
    291 |
    • 292 | 293 |
  • 294 | 295 |
    service
    296 |
    &#xe6c7;
    297 |
    • 298 | 299 |
  • 300 | 301 |
    print
    302 |
    &#xe6c9;
    303 |
    • 304 | 305 |
  • 306 | 307 |
    box
    308 |
    &#xe6cb;
    309 |
    • 310 | 311 |
  • 312 | 313 |
    process
    314 |
    &#xe6ce;
    315 |
    • 316 | 317 |
  • 318 | 319 |
    bags
    320 |
    &#xe6d1;
    321 |
    • 322 | 323 |
  • 324 | 325 |
    beauty
    326 |
    &#xe6d2;
    327 |
    • 328 | 329 |
  • 330 | 331 |
    electrical
    332 |
    &#xe6d4;
    333 |
    • 334 | 335 |
  • 336 | 337 |
    electronics
    338 |
    &#xe6da;
    339 |
    • 340 | 341 |
  • 342 | 343 |
    gifts
    344 |
    &#xe6db;
    345 |
    • 346 | 347 |
  • 348 | 349 |
    apparel
    350 |
    &#xe6dc;
    351 |
    • 352 | 353 |
  • 354 | 355 |
    atm-away
    356 |
    &#xe6e9;
    357 |
    • 358 | 359 |
  • 360 | 361 |
    rfq
    362 |
    &#xe6eb;
    363 |
    • 364 | 365 |
  • 366 | 367 |
    scanning
    368 |
    &#xe6ec;
    369 |
    • 370 | 371 |
  • 372 | 373 |
    filter
    374 |
    &#xe6f1;
    375 |
    • 376 | 377 |
  • 378 | 379 |
    pin
    380 |
    &#xe6f2;
    381 |
    • 382 | 383 |
  • 384 | 385 |
    history
    386 |
    &#xe6f3;
    387 |
    • 388 | 389 |
  • 390 | 391 |
    product-features
    392 |
    &#xe6f4;
    393 |
    • 394 | 395 |
  • 396 | 397 |
    supplier-features
    398 |
    &#xe6f5;
    399 |
    • 400 | 401 |
  • 402 | 403 |
    similar-product
    404 |
    &#xe6f6;
    405 |
    • 406 | 407 |
  • 408 | 409 |
    link
    410 |
    &#xe6f7;
    411 |
    • 412 | 413 |
  • 414 | 415 |
    cut
    416 |
    &#xe6f8;
    417 |
    • 418 | 419 |
  • 420 | 421 |
    nav-list
    422 |
    &#xe6fa;
    423 |
    • 424 | 425 |
  • 426 | 427 |
    image-text
    428 |
    &#xe6fb;
    429 |
    • 430 | 431 |
  • 432 | 433 |
    text
    434 |
    &#xe6fc;
    435 |
    • 436 | 437 |
  • 438 | 439 |
    move
    440 |
    &#xe6fd;
    441 |
    • 442 | 443 |
  • 444 | 445 |
    subtract
    446 |
    &#xe6fe;
    447 |
    • 448 | 449 |
  • 450 | 451 |
    dollar
    452 |
    &#xe702;
    453 |
    • 454 | 455 |
  • 456 | 457 |
    raw
    458 |
    &#xe704;
    459 |
    • 460 | 461 |
  • 462 | 463 |
    office
    464 |
    &#xe705;
    465 |
    • 466 | 467 |
  • 468 | 469 |
    agriculture
    470 |
    &#xe707;
    471 |
    • 472 | 473 |
  • 474 | 475 |
    machinery
    476 |
    &#xe709;
    477 |
    • 478 | 479 |
  • 480 | 481 |
    assessed-Badge
    482 |
    &#xe70a;
    483 |
    • 484 | 485 |
  • 486 | 487 |
    personal-center
    488 |
    &#xe70b;
    489 |
    • 490 | 491 |
  • 492 | 493 |
    integral
    494 |
    &#xe70c;
    495 |
    • 496 | 497 |
  • 498 | 499 |
    operation
    500 |
    &#xe70e;
    501 |
    • 502 | 503 |
  • 504 | 505 |
    remind
    506 |
    &#xe713;
    507 |
    • 508 | 509 |
  • 510 | 511 |
    download
    512 |
    &#xe714;
    513 |
    • 514 | 515 |
  • 516 | 517 |
    map
    518 |
    &#xe715;
    519 |
    • 520 | 521 |
  • 522 | 523 |
    good
    524 |
    &#xe717;
    525 |
    • 526 | 527 |
  • 528 | 529 |
    skip
    530 |
    &#xe718;
    531 |
    • 532 | 533 |
  • 534 | 535 |
    play
    536 |
    &#xe719;
    537 |
    • 538 | 539 |
  • 540 | 541 |
    stop
    542 |
    &#xe71a;
    543 |
    • 544 | 545 |
  • 546 | 547 |
    compass
    548 |
    &#xe71b;
    549 |
    • 550 | 551 |
  • 552 | 553 |
    security
    554 |
    &#xe71c;
    555 |
    • 556 | 557 |
  • 558 | 559 |
    share
    560 |
    &#xe71d;
    561 |
    • 562 | 563 |
  • 564 | 565 |
    store
    566 |
    &#xe722;
    567 |
    • 568 | 569 |
  • 570 | 571 |
    rejected-order
    572 |
    &#xe724;
    573 |
    • 574 | 575 |
  • 576 | 577 |
    phone
    578 |
    &#xe725;
    579 |
    • 580 | 581 |
  • 582 | 583 |
    bussiness-man
    584 |
    &#xe726;
    585 |
    • 586 | 587 |
  • 588 | 589 |
    Mobile-phone
    590 |
    &#xe72a;
    591 |
    • 592 | 593 |
  • 594 | 595 |
    email-filling
    596 |
    &#xe72d;
    597 |
    • 598 | 599 |
  • 600 | 601 |
    favorites-filling
    602 |
    &#xe730;
    603 |
    • 604 | 605 |
  • 606 | 607 |
    account-filling
    608 |
    &#xe732;
    609 |
    • 610 | 611 |
  • 612 | 613 |
    credit-level-filling
    614 |
    &#xe736;
    615 |
    • 616 | 617 |
  • 618 | 619 |
    exl
    620 |
    &#xe73f;
    621 |
    • 622 | 623 |
  • 624 | 625 |
    pdf
    626 |
    &#xe740;
    627 |
    • 628 | 629 |
  • 630 | 631 |
    zip
    632 |
    &#xe741;
    633 |
    • 634 | 635 |
  • 636 | 637 |
    sorting
    638 |
    &#xe743;
    639 |
    • 640 | 641 |
  • 642 | 643 |
    copy
    644 |
    &#xe744;
    645 |
    • 646 | 647 |
  • 648 | 649 |
    hot
    650 |
    &#xe756;
    651 |
    • 652 | 653 |
  • 654 | 655 |
    trade
    656 |
    &#xe758;
    657 |
    • 658 | 659 |
  • 660 | 661 |
    component
    662 |
    &#xe75e;
    663 |
    • 664 | 665 |
  • 666 | 667 |
    color
    668 |
    &#xe760;
    669 |
    • 670 | 671 |
  • 672 | 673 |
    color-filling
    674 |
    &#xe7cd;
    675 |
    • 676 | 677 |
  • 678 | 679 |
    favorites
    680 |
    &#xe7ce;
    681 |
    • 682 | 683 |
  • 684 | 685 |
    RFQ
    686 |
    &#xe803;
    687 |
    • 688 | 689 |
  • 690 | 691 |
    original-image
    692 |
    &#xe806;
    693 |
    • 694 | 695 |
  • 696 | 697 |
    logistic
    698 |
    &#xe811;
    699 |
    • 700 | 701 |
  • 702 | 703 |
    video
    704 |
    &#xe820;
    705 |
    • 706 | 707 |
708 |

unicode引用

709 |
710 | 711 |

unicode是字体在网页端最原始的应用方式，特点是：

712 |
    713 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 714 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 715 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 716 |
717 |
718 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

719 |
720 |

unicode使用步骤如下：

721 |

第一步：拷贝项目下面生成的font-face

722 | 
@font-face {
723 |   font-family: 'iconfont';
724 |   src: url('iconfont.eot');
725 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
726 |   url('iconfont.woff') format('woff'),
727 |   url('iconfont.ttf') format('truetype'),
728 |   url('iconfont.svg#iconfont') format('svg');
729 | }
730 |
731 |

第二步：定义使用iconfont的样式

732 | 
.iconfont{
733 |   font-family:"iconfont" !important;
734 |   font-size:16px;font-style:normal;
735 |   -webkit-font-smoothing: antialiased;
736 |   -webkit-text-stroke-width: 0.2px;
737 |   -moz-osx-font-smoothing: grayscale;
738 | }
739 |
740 |

第三步：挑选相应图标并获取字体编码，应用于页面

741 | 
<i class="iconfont">&#x33;</i>
742 | 743 |
744 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

745 |
746 |
747 | 748 | 749 | 750 | 751 | --------------------------------------------------------------------------------