├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── dosc ├── 1.md ├── 2.md └── images │ ├── 1.gif │ ├── 1.scss.png │ ├── 2.png │ ├── 2.router.png │ └── 3.demo.gif ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── css │ │ ├── function.scss │ │ ├── index.scss │ │ ├── mixin.scss │ │ ├── reset-vant-ui.scss │ │ ├── reset.scss │ │ └── variable.scss │ ├── fonts │ │ ├── css │ │ │ └── font-awesome.css │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ ├── fontawesome-webfont.woff │ │ │ └── fontawesome-webfont.woff2 │ │ └── index.css │ └── js │ │ ├── cookie.js │ │ ├── http.js │ │ ├── screen-adaptation.js │ │ └── utils.js ├── components │ ├── ec-ips │ │ └── index.vue │ └── index.js ├── directives │ └── index.js ├── filters │ ├── format.js │ └── index.js ├── main.js ├── mixins │ ├── index.js │ └── public.js ├── router │ ├── 404.js │ ├── _import.js │ ├── address.js │ ├── classify.js │ ├── home.js │ ├── index.js │ ├── mine.js │ ├── news.js │ ├── order.js │ ├── routers.js │ └── service.js ├── store │ ├── index.js │ └── modules │ │ └── home │ │ └── index.js └── views │ ├── 404 │ ├── entry │ │ └── index.vue │ └── index.vue │ ├── address │ ├── city-selected │ │ ├── index.vue │ │ ├── spellList.js │ │ └── style.scss │ └── index.vue │ ├── classify │ ├── entry │ │ ├── index.vue │ │ ├── lists │ │ │ ├── datas.js │ │ │ ├── index.vue │ │ │ └── style.scss │ │ └── style.scss │ └── index.vue │ ├── components │ ├── menu │ │ ├── index.vue │ │ ├── readme.md │ │ └── style.scss │ ├── order-list-item │ │ ├── index.vue │ │ └── style.scss │ └── subnav │ │ ├── index.vue │ │ └── style.scss │ ├── home │ ├── entry │ │ ├── banner │ │ │ ├── index.vue │ │ │ └── style.scss │ │ ├── index.vue │ │ ├── readme.md │ │ ├── style.scss │ │ └── today-order │ │ │ ├── datas.js │ │ │ ├── index.vue │ │ │ └── style.scss │ └── index.vue │ ├── layout │ └── index │ │ └── index.vue │ ├── mine │ ├── bill │ │ ├── index.scss │ │ └── index.vue │ ├── entry │ │ ├── img │ │ │ ├── 待服务.png │ │ │ ├── 待评价.png │ │ │ ├── 我的地址.png │ │ │ ├── 我的订单.png │ │ │ └── 我的银行卡.png │ │ ├── index.scss │ │ └── index.vue │ ├── index.vue │ └── setting │ │ ├── index.scss │ │ └── index.vue │ ├── news │ ├── entry │ │ └── index.vue │ └── index.vue │ ├── order │ ├── components │ │ └── list-item │ │ │ └── index.vue │ ├── detail │ │ ├── index.scss │ │ └── index.vue │ ├── index.vue │ └── list │ │ ├── index.scss │ │ └── index.vue │ ├── release │ ├── entry │ │ └── index.vue │ └── index.vue │ └── service │ ├── details │ ├── evaluate │ │ ├── index.vue │ │ └── style.scss │ ├── index.vue │ ├── service-details │ │ ├── index.vue │ │ └── style.scss │ └── style.scss │ ├── index.vue │ ├── list-search │ ├── index.vue │ └── style.scss │ └── security │ ├── datas.js │ ├── index.vue │ ├── readme.md │ └── style.scss ├── static ├── .gitkeep └── config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: WangQiBiao 3 | * @LastEditors: WangQiBiao 4 | * @Description: 5 | * @Date: 2019-03-31 13:41:08 6 | * @LastEditTime: 2019-03-31 13:54:59 7 | */ 8 | // https://eslint.org/docs/user-guide/configuring 9 | 10 | module.exports = { 11 | root: true, 12 | parserOptions: { 13 | parser: 'babel-eslint' 14 | }, 15 | env: { 16 | browser: true, 17 | }, 18 | extends: [ 19 | 'plugin:vue/essential', 20 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 21 | 'standard' 22 | ], 23 | // required to lint *.vue files 24 | plugins: [ 25 | 'vue' 26 | ], 27 | // add your custom rules here 28 | rules: { 29 | // allow debugger during development 30 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /dist/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: { 5 | 'postcss-import': {}, 6 | 'postcss-url': {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | autoprefixer: {}, 9 | 'postcss-pxtorem': { 10 | rootValue: 37.5, 11 | propList: ['*'] 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 8 | # vue+vantui+vue-router+axios+vuex 9 | 10 | ## demo 11 | ![](./dosc/images/1.gif) 12 | 13 | ## 使用 14 | 15 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.** 16 | 17 | ```bash 18 | $ npm install -g vue-cli 19 | $ vue init wqb2017/ec-vue-cli my-project-name 20 | $ cd my-project-name 21 | $ npm install 22 | $ npm run dev 23 | ``` 24 | 25 | ## 技术栈 26 | 27 | 1. 主技术栈 28 | 29 | * [vue](https://github.com/vuejs/vue) 30 | * [vue-router](https://github.com/vuejs/vue-router) 31 | * [vuex](https://github.com/vuejs/vuex) 32 | * [es6](https://github.com/bevacqua/es6) 33 | * [es6 中文文档](https://github.com/ruanyf/es6tutorial) 34 | 35 | 2. UI 技术栈 36 | 37 | * [pc 端 element-ui](https://github.com/ElemeFE/element) 38 | * [移动端 vant](https://github.com/youzan/vant) 39 | * axios 40 | 41 | 3. 图标 42 | 43 | * [fontawesome](http://fontawesome.dashgame.com/) 44 | 45 | ## 前端规范 46 | 47 | * [eslint standard](https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md) 48 | 49 | ## IDE 50 | 51 | * [vscode](https://code.visualstudio.com/Download) 52 | * [vscode 常用插件和配置](https://github.com/wqb2017/vscode-plugins) 53 | 54 | ## 项目结构 55 | 56 | ```js 57 | |-项目名 58 | |-build 59 | |-config 60 | |-src 61 | |-components //公共组件 62 | |-assets //公共模块 63 | |-directives //自定义指令 64 | |-filters //过滤器 65 | |-mixins //mixins 66 | |-router 67 | |-store 68 | |-views 69 | |-components //业务公共组件 70 | |-button 71 | |-index.vue //入口 72 | |-style.scss //样式 73 | |-images //图片 74 | |-home //首页 75 | |-entry 76 | |-index.vue 模块入口 77 | |-style.scss 78 | |-images 79 | |-lists 80 | |-index.vue // 列表页 81 | |-style.scss 82 | |-images 83 | |-static //第三方插件 84 | ``` 85 | 86 | # 历史记录 87 | 88 | ## v0.0.1 89 | 90 | * 搭建 vue-vant-axios 项目，使用 vue-template-webpack 模板 91 | 92 | ## v1.0.0 93 | 94 | * 安装插件 vant 95 | 96 | ```js 97 | // ./src/main.js 98 | import Vant from 'vant'; 99 | import 'vant/lib/vant-css/index.css'; 100 | Vue.use(Vant); 101 | ``` 102 | 103 | * 引入移动端适配方案 rem 104 | * 删除无用文件 HolleWord.vue 等 105 | * 新增页面 views/home views 包含所有的逻辑页面 106 | 107 | ```js 108 | |——src 109 | |——views 110 | |——home 111 | |——index.vue 112 | |——style.scss 113 | ``` 114 | 115 | * 使用 css 处理器 scss 116 | 117 | 安装依赖 style-loader css-loader sass-loader node-sass 118 | 119 | $ npm install style-loader css-loader sass-loader node-sass --save-dev 120 | 121 | 这里需要注意的是，有可能 node-sass 安装失败，这时候用淘宝的 cnpm 安装就能解决这个问题 122 | 123 | 即 124 | 125 | $ cnpm install node-sass --save-dev 126 | 127 | 如果报以下错误 128 | 129 | ![](./dosc/images/1.scss.png) 130 | 131 | 解决办法是，删除 node_modules package-lock.json，并重新安装依赖 132 | 133 | npm install 134 | 135 | * 路由按需加载 136 | 137 | ```js 138 | // ./src/router/index.js 139 | import Vue from 'vue'; 140 | import Router from 'vue-router'; 141 | import _import from './_import'; // ./src/router/_import.js 142 | 143 | Vue.use(Router); 144 | 145 | export default new Router({ 146 | routes: [ 147 | { 148 | path: '/', 149 | name: 'Home', 150 | component: _import('home') 151 | } 152 | ] 153 | }); 154 | ``` 155 | 156 | 结果对比 157 | 158 | ![](./dosc/images/2.router.png) 159 | 160 | * babel-polyfill 161 | 162 | 1. 安装 163 | 164 | $ npm install babel-polyfill --save 165 | 166 | 2. 引入 167 | 168 | ```js 169 | // ./build/webpack.base.conf.js 170 | entry: { 171 | app: ['babel-polyfill','./src/main.js'], 172 | }, 173 | ``` 174 | 175 | * px 转 rem 176 | 177 | 1. 安装 178 | 179 | $ npm install postcss-pxtorem --save-dev 180 | 181 | [rem在移动端实战](https://github.com/wqb2017/vue-vant-axios/blob/master/dosc/2.md) 182 | 183 | 2. 引入 184 | 185 | ```js 186 | // ./.postcssrc.js 187 | "plugins": { 188 | // to edit target browsers: use "browserslist" field in package.json 189 | 'autoprefixer': { 190 | browsers: ['Android >= 4.0', 'iOS >= 7'] 191 | }, 192 | 'postcss-pxtorem': { 193 | rootValue: 37.5, 194 | propList: ['*'] 195 | } 196 | } 197 | ``` 198 | 199 | ## v1.1.0 200 | 201 | * 封装 axios，设置默认参数并能在this中使用 202 | ```js 203 | // ./src/assets/js/createRequest 204 | import axios from 'axios'; 205 | /** 206 | * 前后端请求 207 | * 208 | * @export 209 | * @param {any} URL 地址 210 | * @param {any} params 参数 211 | * @returns 212 | */ 213 | export default function createRequestHttp (URL, params) { 214 | return new Promise(function (resolve, reject) { 215 | let instance = axios.create(); 216 | instance.defaults.baseURL = window.CONFIG.baseURL; 217 | instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 218 | instance.defaults.withCredentials = true; 219 | instance.defaults.transformRequest = [ 220 | function (data) { 221 | let newData = []; 222 | for (let k in data) { 223 | newData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k])); 224 | } 225 | return newData.join('&'); 226 | } 227 | ]; 228 | instance.defaults.transformResponse = [ 229 | function (res) { 230 | res = JSON.parse(res); 231 | if (res.state !== 1) { 232 | throw Error('请求失败'); 233 | } 234 | return res.data; 235 | } 236 | ]; 237 | instance.post(URL, params) 238 | .then(res => { 239 | resolve(res); 240 | }).catch(err => { 241 | reject(err); 242 | }); 243 | }); 244 | } 245 | 246 | // ./main.js 247 | import createRequestHttp from '@/assets/js/createRequest'; 248 | Vue.prototype.$createRequestHttp = createRequestHttp; 249 | ``` 250 | 251 | * vuex 252 | 253 | 1. 安装vuex 254 | 255 | npm install vuex --save 256 | 257 | 2. 使用vuex 258 | 259 | ```js 260 | // ./main.js 261 | import store from './store'; 262 | new Vue({ 263 | el: '#app', 264 | router, 265 | store, 266 | components: { App }, 267 | template: '' 268 | }); 269 | 270 | // ./src/store 271 | export default { 272 | state: { 273 | // 每日推荐列表-列表类型 274 | goodsProducttype: 1 275 | } 276 | }; 277 | 278 | //使用 279 | // ./src/views/home/tabbar.index.vue 280 | this.$store.state.home.goodsProducttype 281 | ``` 282 | 283 | ## 也许这些对您有帮助 284 | 285 | * css 文件引入 286 | 287 | 当我们要引入不是其本文件跟目录下的 css 文件时，记得使用 '~@文件名' 来简化 './../../....'这些相对路径 288 | 289 | ```js 290 | @import './../../../assets/css/mixin.scss'; 291 | //简化成功 292 | @import '~@/assets/css/mixin.scss'; 293 | ``` 294 | 295 | * css常用相同模块内容可以提mixin提供多处使用，如： 296 | ```css 297 | //省略号 298 | @mixin omit{ 299 | overflow: hidden; 300 | text-overflow: ellipsis; 301 | white-space: nowrap; 302 | } 303 | //清除浮动 304 | @mixin clearfix{ 305 | zoom: 1; 306 | &:after { 307 | content: "."; 308 | display: block; 309 | height: 0; 310 | clear: both; 311 | visibility: hidden 312 | } 313 | } 314 | ``` 315 | 316 | * 标题或者其他个性化的内容并且每个页面都会用到的内容可以在 router 路由的 mate 属性中设置，如： 317 | 318 | ```js 319 | { 320 | path: '/home', 321 | name: 'Home', 322 | component: _import('home'), 323 | meta: { 324 | title: '首页'//标题 325 | } 326 | }, 327 | { 328 | path: '/mime', 329 | name: 'Mime', 330 | component: _import('mime'), 331 | meta: { 332 | title: '个人中心' 333 | } 334 | } 335 | ``` 336 | 337 | * 关于css大小设定问题，其实每个团队或者是设计师都有自己的见解，但是我个人用的最多的，也是觉得最友好的是用8的整数倍数做基准设定大小是很好的一个约定。当然了字体大小就没有必要一定是8的整数倍了。但是最好还是用双数设定大小。 338 | 339 | 比方说： 340 | 341 | 8px 16px 32px 40px 48px 56px 64px ... 谁用谁知道，这样的比例不但好看，关键是对布局很是友好。 342 | 343 | ## eslint + vscode做保存自动代码格式化 344 | 345 | 安装以下插件 346 | 347 | * eslint-plugin-cypress 348 | * eslint-plugin-html 349 | * eslint-plugin-vue 350 | 351 | 在 package.json 加入一下代码 352 | 353 | ```js 354 | "lint-staged": { 355 | "*.js": [ 356 | "vue-cli-service lint", 357 | "git add" 358 | ], 359 | "*.vue": [ 360 | "vue-cli-service lint", 361 | "git add" 362 | ] 363 | } 364 | ``` 365 | 366 | 367 | ## License 368 | 369 | [MIT](https://opensource.org/licenses/MIT) 370 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: ['babel-polyfill','./src/main.js'], 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js', 38 | '@': resolve('src'), 39 | } 40 | }, 41 | module: { 42 | rules: [ 43 | ...(config.dev.useEslint ? [createLintingRule()] : []), 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader', 47 | options: vueLoaderConfig 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel-loader', 52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 53 | }, 54 | { 55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 56 | loader: 'url-loader', 57 | options: { 58 | limit: 10000, 59 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 60 | } 61 | }, 62 | { 63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 64 | loader: 'url-loader', 65 | options: { 66 | limit: 10000, 67 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 68 | } 69 | }, 70 | { 71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 72 | loader: 'url-loader', 73 | options: { 74 | limit: 10000, 75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 76 | } 77 | } 78 | ] 79 | }, 80 | node: { 81 | // prevent webpack from injecting useless setImmediate polyfill because Vue 82 | // source contains it (although only uses it if it's native). 83 | setImmediate: false, 84 | // prevent webpack from injecting mocks to Node native modules 85 | // that does not make sense for the client 86 | dgram: 'empty', 87 | fs: 'empty', 88 | net: 'empty', 89 | tls: 'empty', 90 | child_process: 'empty' 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /dosc/1.md: -------------------------------------------------------------------------------- 1 | # 历史记录 2 | 3 | ## v0.0.1 4 | 5 | * 搭建 vue-vant-axios 项目，使用 vue-template-webpack 模板 6 | 7 | ## v1.0.0 8 | 9 | * 安装插件 vant 10 | 11 | ```js 12 | // ./src/main.js 13 | import Vant from 'vant'; 14 | import 'vant/lib/vant-css/index.css'; 15 | Vue.use(Vant); 16 | ``` 17 | 18 | * 引入移动端适配方案 rem 19 | 20 | ```js 21 | // ./src/main.js 22 | import './assets/rem'; // ./src/assets/rem.js 23 | ``` 24 | 25 | * 删除无用文件 HolleWord.vue 等 26 | * 新增页面 views/home views 包含所有的逻辑页面 27 | 28 | ```js 29 | |——src 30 | |——views 31 | |——home 32 | |——index.vue 33 | |——style.scss 34 | ``` 35 | 36 | * 使用 css 处理器 scss 37 | 38 | 安装依赖 style-loader css-loader sass-loader node-sass 39 | 40 | $ npm install style-loader css-loader sass-loader node-sass --save-dev 41 | 42 | 这里需要注意的是，有可能 node-sass 安装失败，这时候用淘宝的 cnpm 安装就能解决这个问题 43 | 44 | 即 45 | 46 | $ cnpm install node-sass --save-dev 47 | 48 | 如果报以下错误 49 | 50 | ![](./dosc/images/1.scss.png) 51 | 52 | 解决办法是，删除 node_modules package-lock.json，并重新安装依赖 53 | 54 | npm install 55 | 56 | * 路由按需加载 57 | 58 | ```js 59 | // ./src/router/index.js 60 | import Vue from 'vue'; 61 | import Router from 'vue-router'; 62 | import _import from './_import'; // ./src/router/_import.js 63 | 64 | Vue.use(Router); 65 | 66 | export default new Router({ 67 | routes: [ 68 | { 69 | path: '/', 70 | name: 'Home', 71 | component: _import('home') 72 | } 73 | ] 74 | }); 75 | ``` 76 | 77 | 结果对比 78 | 79 | ![](./dosc/images/2.router.png) 80 | 81 | * babel-polyfill 82 | 83 | 1. 安装 84 | 85 | $ npm install babel-polyfill --save 86 | 87 | 2. 引入 88 | 89 | ```js 90 | // ./build/webpack.base.conf.js 91 | entry: { 92 | app: ['babel-polyfill','./src/main.js'], 93 | }, 94 | ``` 95 | 96 | * px 转 rem 97 | 98 | 1. 安装 99 | 100 | $ npm install postcss-pxtorem --save-dev 101 | 102 | 2. 引入 103 | 104 | ```js 105 | // ./.postcssrc.js 106 | "plugins": { 107 | // to edit target browsers: use "browserslist" field in package.json 108 | 'autoprefixer': { 109 | browsers: ['Android >= 4.0', 'iOS >= 7'] 110 | }, 111 | 'postcss-pxtorem': { 112 | rootValue: 37.5, 113 | propList: ['*'] 114 | } 115 | } 116 | ``` 117 | 118 | ## v1.1.0 119 | 120 | * 封装 axios，设置默认参数并能在this中使用 121 | ```js 122 | // ./src/assets/js/createRequest 123 | import axios from 'axios'; 124 | /** 125 | * 前后端请求 126 | * 127 | * @export 128 | * @param {any} URL 地址 129 | * @param {any} params 参数 130 | * @returns 131 | */ 132 | export default function createRequestHttp (URL, params) { 133 | return new Promise(function (resolve, reject) { 134 | let instance = axios.create(); 135 | instance.defaults.baseURL = window.CONFIG.baseURL; 136 | instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 137 | instance.defaults.withCredentials = true; 138 | instance.defaults.transformRequest = [ 139 | function (data) { 140 | let newData = []; 141 | for (let k in data) { 142 | newData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k])); 143 | } 144 | return newData.join('&'); 145 | } 146 | ]; 147 | instance.defaults.transformResponse = [ 148 | function (res) { 149 | res = JSON.parse(res); 150 | if (res.state !== 1) { 151 | throw Error('请求失败'); 152 | } 153 | return res.data; 154 | } 155 | ]; 156 | instance.post(URL, params) 157 | .then(res => { 158 | resolve(res); 159 | }).catch(err => { 160 | reject(err); 161 | }); 162 | }); 163 | } 164 | 165 | // ./main.js 166 | import createRequestHttp from '@/assets/js/createRequest'; 167 | Vue.prototype.$createRequestHttp = createRequestHttp; 168 | ``` 169 | 170 | * vuex 171 | 172 | 1. 安装vuex 173 | 174 | npm install vuex --save 175 | 176 | 2. 使用vuex 177 | 178 | ```js 179 | // ./main.js 180 | import store from './store'; 181 | new Vue({ 182 | el: '#app', 183 | router, 184 | store, 185 | components: { App }, 186 | template: '' 187 | }); 188 | 189 | // ./src/store 190 | export default { 191 | state: { 192 | // 每日推荐列表-列表类型 193 | goodsProducttype: 1 194 | } 195 | }; 196 | 197 | //使用 198 | // ./src/views/home/tabbar.index.vue 199 | this.$store.state.home.goodsProducttype 200 | ``` 201 | 202 | ## 也许这些对您有帮助 203 | 204 | * css 文件引入 205 | 206 | 当我们要引入不是其本文件跟目录下的 css 文件时，记得使用 '~@文件名' 来简化 './../../....'这些相对路径 207 | 208 | ```js 209 | @import './../../../assets/css/mixin.scss'; 210 | //简化成功 211 | @import '~@/assets/css/mixin.scss'; 212 | ``` 213 | 214 | * css常用相同模块内容可以提mixin提供多处使用，如： 215 | ```css 216 | //省略号 217 | @mixin omit{ 218 | overflow: hidden; 219 | text-overflow: ellipsis; 220 | white-space: nowrap; 221 | } 222 | //清除浮动 223 | @mixin clearfix{ 224 | zoom: 1; 225 | &:after { 226 | content: "."; 227 | display: block; 228 | height: 0; 229 | clear: both; 230 | visibility: hidden 231 | } 232 | } 233 | ``` 234 | 235 | * 标题或者其他个性化的内容并且每个页面都会用到的内容可以在 router 路由的 mate 属性中设置，如： 236 | 237 | ```js 238 | { 239 | path: '/home', 240 | name: 'Home', 241 | component: _import('home'), 242 | meta: { 243 | title: '首页'//标题 244 | } 245 | }, 246 | { 247 | path: '/mime', 248 | name: 'Mime', 249 | component: _import('mime'), 250 | meta: { 251 | title: '个人中心' 252 | } 253 | } 254 | ``` 255 | 256 | * 关于css大小设定问题，其实每个团队或者是设计师都有自己的见解，但是我个人用的最多的，也是觉得最友好的是用8的整数倍数做基准设定大小是很好的一个约定。当然了字体大小就没有必要一定是8的整数倍了。但是最好还是用双数设定大小。 257 | 258 | 比方说： 259 | 260 | 8px 16px 32px 40px 48px 56px 64px ... 谁用谁知道，这样的比例不但好看，关键是对布局很是友好。 261 | -------------------------------------------------------------------------------- /dosc/2.md: -------------------------------------------------------------------------------- 1 | # rem 在移动端实战 2 | 3 | 本项目采用 iPhone 6 物理像素为 750px \* 1334px 的设计稿 4 | 5 | ## rem 适配原理 6 | 7 | 关于 rem 适配这里不过多讲述，因为我们主要是讲解 rem 实战，再者是讲 rem 方法论的文章实在太多了，咱们时间有限只能是专挑重要的说。 8 | 9 | > 什么是 rem 布局： 10 | 11 | 指元素相对根元素html的font-size，按照等比例缩放元素大小。 12 | 13 | 咱们还是拿本项目做讲解： 14 | 15 | 项目中统一设置 rem 和 px 的比例为： 16 | 17 | > px : rem = 37.5 : 1 18 | 19 | 好了，既然知道 rem 是相对根元素 html 布局的，现在我们要做的事情就是，如何通过一种方法来实现不同的手机屏幕显示不同的根元素大小。 20 | 21 | ## 几个概念 22 | 23 | 1. 机型的设备像素比 devicePixelRatio： 24 | > 所谓设备像素比其实就是：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 25 | 26 | 公式表示就是：window.devicePixelRatio = 物理像素 / dips， 27 | 28 | 2. 设备独立像素： 29 | > 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了 CSS 像素。比如上面设计稿中的 iPhone 6 的设备独立像素就是 375 \* 667 30 | 31 | ![](./images/2.png) 32 | 33 | 3. 机型的设备独立像素可以通过 document.documentElement.clientWidth 来获取 34 | 35 | 所以上面的 37.5 其实就是用 iPhone 6 的设备独立像素 375 除以 10 得到的，当然这里您直接用别的比例也是可以的。 36 | 37 | ## 实现 rem 转 px 38 | 39 | ```js 40 | var docEl = document.documentElement; 41 | var rem = docEl.clientWidth / 10; 42 | docEl.style.fontSize = rem + 'px'; 43 | ``` 44 | 45 | 具体实现可以看 46 | 47 | ```js 48 | // ./src/assets/js/screen-adaptation.js 49 | ``` 50 | 51 | 当然我们不能每次设置元素的时候，都要自己去算一下，这样就显得 low 了，所以本项目主要使用了一下方法来实现： 52 | 53 | ## 使用 54 | 55 | 1. 下载[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 56 | 2. 配置.postcssrc.js 57 | ```js 58 | // ./.postcssrc.js 59 | 60 | 'postcss-pxtorem': { 61 | rootValue: 37.5, 62 | propList: ['*'] 63 | } 64 | ``` 65 | 3. 设计稿和设备独立像素计算 66 | ```scss 67 | /* ./src/assets/css/function.scss */ 68 | @function half($num) { 69 | @return ($num); 70 | } 71 | ``` 72 | 73 | 只要在使用的时候直接写上设计稿大小即可，比如：元素 div 的宽为 100px，即： 74 | 75 | ```css 76 | div { 77 | widht: half(100px); 78 | } 79 | ``` 80 | 81 | 【注释】当然也可以直接使用设计稿的像素直接开发，只要设定要对应的比例即可。 82 | -------------------------------------------------------------------------------- /dosc/images/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/dosc/images/1.gif -------------------------------------------------------------------------------- /dosc/images/1.scss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/dosc/images/1.scss.png -------------------------------------------------------------------------------- /dosc/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/dosc/images/2.png -------------------------------------------------------------------------------- /dosc/images/2.router.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/dosc/images/2.router.png -------------------------------------------------------------------------------- /dosc/images/3.demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/dosc/images/3.demo.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-vant-axios 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vant-axios", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "wqb2017 <542672187@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 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "keywords": [ 14 | "vue", 15 | "vuejs", 16 | "vant", 17 | "axios", 18 | "html5", 19 | "javscript", 20 | "移动端", 21 | "仿商城" 22 | ], 23 | "dependencies": { 24 | "axios": "^0.18.0", 25 | "babel-polyfill": "^6.26.0", 26 | "vant": "^1.6.13", 27 | "vue": "^2.5.2", 28 | "vue-router": "^3.0.1", 29 | "vuex": "^3.0.1" 30 | }, 31 | "devDependencies": { 32 | "autoprefixer": "^7.1.2", 33 | "babel-core": "^6.22.1", 34 | "babel-eslint": "^8.2.1", 35 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 36 | "babel-loader": "^7.1.1", 37 | "babel-plugin-syntax-jsx": "^6.18.0", 38 | "babel-plugin-transform-runtime": "^6.22.0", 39 | "babel-plugin-transform-vue-jsx": "^3.5.0", 40 | "babel-preset-env": "^1.3.2", 41 | "babel-preset-stage-2": "^6.22.0", 42 | "chalk": "^2.0.1", 43 | "copy-webpack-plugin": "^4.0.1", 44 | "css-loader": "^0.28.11", 45 | "eslint": "^4.15.0", 46 | "eslint-config-standard": "^10.2.1", 47 | "eslint-friendly-formatter": "^3.0.0", 48 | "eslint-loader": "^1.7.1", 49 | "eslint-plugin-cypress": "^2.2.1", 50 | "eslint-plugin-html": "^5.0.3", 51 | "eslint-plugin-import": "^2.7.0", 52 | "eslint-plugin-node": "^5.2.0", 53 | "eslint-plugin-promise": "^3.4.0", 54 | "eslint-plugin-standard": "^3.0.1", 55 | "eslint-plugin-vue": "^5.2.2", 56 | "extract-text-webpack-plugin": "^3.0.0", 57 | "file-loader": "^1.1.4", 58 | "friendly-errors-webpack-plugin": "^1.6.1", 59 | "html-webpack-plugin": "^2.30.1", 60 | "node-loader": "^0.6.0", 61 | "node-notifier": "^5.1.2", 62 | "node-sass": "^4.9.3", 63 | "optimize-css-assets-webpack-plugin": "^3.2.0", 64 | "ora": "^1.2.0", 65 | "portfinder": "^1.0.13", 66 | "postcss-import": "^11.0.0", 67 | "postcss-loader": "^2.0.8", 68 | "postcss-pxtorem": "^4.0.1", 69 | "postcss-url": "^7.2.1", 70 | "rimraf": "^2.6.0", 71 | "sass-loader": "^7.1.0", 72 | "semver": "^5.3.0", 73 | "shelljs": "^0.7.6", 74 | "style-loader": "^0.22.1", 75 | "tough-cookie": "^2.4.3", 76 | "uglifyjs-webpack-plugin": "^1.1.1", 77 | "url-loader": "^0.5.8", 78 | "vue-loader": "^13.3.0", 79 | "vue-style-loader": "^3.0.1", 80 | "vue-template-compiler": "^2.5.2", 81 | "webpack": "^3.6.0", 82 | "webpack-bundle-analyzer": "^2.9.0", 83 | "webpack-dev-server": "^2.11.5", 84 | "webpack-merge": "^4.1.0" 85 | }, 86 | "engines": { 87 | "node": ">= 6.0.0", 88 | "npm": ">= 3.0.0" 89 | }, 90 | "browserslist": [ 91 | "> 1%", 92 | "last 2 versions", 93 | "not ie <= 8" 94 | ], 95 | "lint-staged": { 96 | "*.js": [ 97 | "vue-cli-service lint", 98 | "git add" 99 | ], 100 | "*.vue": [ 101 | "vue-cli-service lint", 102 | "git add" 103 | ] 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 17 | -------------------------------------------------------------------------------- /src/assets/css/function.scss: -------------------------------------------------------------------------------- 1 | @function half($num) { 2 | @return ($num / 2); 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/css/index.scss: -------------------------------------------------------------------------------- 1 | @import './reset.scss'; 2 | @import './../fonts/index.css'; 3 | @import './reset-vant-ui.scss'; 4 | -------------------------------------------------------------------------------- /src/assets/css/mixin.scss: -------------------------------------------------------------------------------- 1 | //省略号 2 | @mixin omit{ 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | } 7 | //清除浮动 8 | @mixin clearfix{ 9 | zoom: 1; 10 | &:after { 11 | content: "."; 12 | display: block; 13 | height: 0; 14 | clear: both; 15 | visibility: hidden 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/css/reset-vant-ui.scss: -------------------------------------------------------------------------------- 1 | .van-search{ 2 | width: 100%; 3 | height: 100%; 4 | padding: 0; 5 | .van-cell{ 6 | border-radius: .666667rem /* 25/37.5 */; 7 | } 8 | .van-search__action{ 9 | color: #45adff; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/assets/css/reset.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | h1, 4 | h2, 5 | h3, 6 | h4, 7 | h5, 8 | h6, 9 | hr, 10 | p, 11 | iframe, 12 | dl, 13 | dt, 14 | dd, 15 | ul, 16 | ol, 17 | li, 18 | pre, 19 | form, 20 | button, 21 | input, 22 | textarea, 23 | section, 24 | th, 25 | td, 26 | div { 27 | margin: 0; 28 | padding: 0; 29 | } 30 | ul, 31 | ol, 32 | dl { 33 | list-style-type: none; 34 | } 35 | html, 36 | body { 37 | *position: static; 38 | background-color: #f1f1f1; 39 | width: 100%; 40 | height: 100%; 41 | font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, tahoma, arial, Verdana, sans-serif, 42 | 'WenQuanYi Micro Hei', '\5B8B\4F53'; 43 | } 44 | html { 45 | -webkit-text-size-adjust: 100%; 46 | -ms-text-size-adjust: 100%; 47 | } 48 | address, 49 | caption, 50 | cite, 51 | code, 52 | dfn, 53 | em, 54 | th, 55 | var { 56 | font-style: normal; 57 | font-weight: normal; 58 | } 59 | input, 60 | button, 61 | textarea, 62 | select, 63 | optgroup, 64 | option { 65 | font-family: inherit; 66 | font-size: inherit; 67 | font-style: inherit; 68 | font-weight: inherit; 69 | } 70 | input, 71 | button { 72 | overflow: visible; 73 | vertical-align: middle; 74 | outline: none; 75 | } 76 | body, 77 | th, 78 | td, 79 | button, 80 | input, 81 | select, 82 | textarea { 83 | font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, tahoma, arial, Verdana, sans-serif, 84 | 'WenQuanYi Micro Hei', '\5B8B\4F53'; 85 | font-size: 12px; 86 | color: #333; 87 | -webkit-font-smoothing: antialiased; 88 | -moz-font-smoothing: antialiased; 89 | } 90 | body { 91 | line-height: 1.6; 92 | } 93 | h1 { 94 | font-size: 32px; 95 | } 96 | h2 { 97 | font-size: 24px; 98 | } 99 | h3 { 100 | font-size: 18px; 101 | } 102 | h4 { 103 | font-size: 16px; 104 | } 105 | h5 { 106 | font-size: 14px; 107 | } 108 | h6 { 109 | font-size: 12px; 110 | } 111 | a, 112 | area { 113 | outline: none; 114 | } 115 | a { 116 | text-decoration: none; 117 | cursor: pointer; 118 | &:hover { 119 | text-decoration: underline; 120 | outline: none; 121 | } 122 | &.ie6:hover { 123 | zoom: 1; 124 | } 125 | &:focus { 126 | outline: none; 127 | } 128 | &:active { 129 | outline: none; 130 | } 131 | } 132 | /*img*/ 133 | img { 134 | border: 0; 135 | vertical-align: middle; 136 | } 137 | a img, 138 | img { 139 | -ms-interpolation-mode: bicubic; 140 | } 141 | input[type='number'] { 142 | &::-webkit-inner-spin-button { 143 | height: auto; 144 | } 145 | &::-webkit-outer-spin-button { 146 | height: auto; 147 | } 148 | } 149 | input[type='search'] { 150 | -webkit-appearance: textfield; /* 1 */ 151 | -moz-box-sizing: content-box; 152 | -webkit-box-sizing: content-box; /* 2 */ 153 | box-sizing: content-box; 154 | &::-webkit-search-cancel-button { 155 | -webkit-appearance: none; 156 | } 157 | &::-webkit-search-decoration { 158 | -webkit-appearance: none; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /src/assets/css/variable.scss: -------------------------------------------------------------------------------- 1 | $font-color-black: #333b46; 2 | -------------------------------------------------------------------------------- /src/assets/fonts/css/font-awesome.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); 10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | .fa { 15 | display: inline-block; 16 | font: normal normal normal 14px/1 FontAwesome; 17 | font-size: inherit; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | /* makes the font 33% larger relative to the icon container */ 23 | .fa-lg { 24 | font-size: 1.33333333em; 25 | line-height: 0.75em; 26 | vertical-align: -15%; 27 | } 28 | .fa-2x { 29 | font-size: 2em; 30 | } 31 | .fa-3x { 32 | font-size: 3em; 33 | } 34 | .fa-4x { 35 | font-size: 4em; 36 | } 37 | .fa-5x { 38 | font-size: 5em; 39 | } 40 | .fa-fw { 41 | width: 1.28571429em; 42 | text-align: center; 43 | } 44 | .fa-ul { 45 | padding-left: 0; 46 | margin-left: 2.14285714em; 47 | list-style-type: none; 48 | } 49 | .fa-ul > li { 50 | position: relative; 51 | } 52 | .fa-li { 53 | position: absolute; 54 | left: -2.14285714em; 55 | width: 2.14285714em; 56 | top: 0.14285714em; 57 | text-align: center; 58 | } 59 | .fa-li.fa-lg { 60 | left: -1.85714286em; 61 | } 62 | .fa-border { 63 | padding: .2em .25em .15em; 64 | border: solid 0.08em #eeeeee; 65 | border-radius: .1em; 66 | } 67 | .fa-pull-left { 68 | float: left; 69 | } 70 | .fa-pull-right { 71 | float: right; 72 | } 73 | .fa.fa-pull-left { 74 | margin-right: .3em; 75 | } 76 | .fa.fa-pull-right { 77 | margin-left: .3em; 78 | } 79 | /* Deprecated as of 4.4.0 */ 80 | .pull-right { 81 | float: right; 82 | } 83 | .pull-left { 84 | float: left; 85 | } 86 | .fa.pull-left { 87 | margin-right: .3em; 88 | } 89 | .fa.pull-right { 90 | margin-left: .3em; 91 | } 92 | .fa-spin { 93 | -webkit-animation: fa-spin 2s infinite linear; 94 | animation: fa-spin 2s infinite linear; 95 | } 96 | .fa-pulse { 97 | -webkit-animation: fa-spin 1s infinite steps(8); 98 | animation: fa-spin 1s infinite steps(8); 99 | } 100 | @-webkit-keyframes fa-spin { 101 | 0% { 102 | -webkit-transform: rotate(0deg); 103 | transform: rotate(0deg); 104 | } 105 | 100% { 106 | -webkit-transform: rotate(359deg); 107 | transform: rotate(359deg); 108 | } 109 | } 110 | @keyframes fa-spin { 111 | 0% { 112 | -webkit-transform: rotate(0deg); 113 | transform: rotate(0deg); 114 | } 115 | 100% { 116 | -webkit-transform: rotate(359deg); 117 | transform: rotate(359deg); 118 | } 119 | } 120 | .fa-rotate-90 { 121 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; 122 | -webkit-transform: rotate(90deg); 123 | -ms-transform: rotate(90deg); 124 | transform: rotate(90deg); 125 | } 126 | .fa-rotate-180 { 127 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; 128 | -webkit-transform: rotate(180deg); 129 | -ms-transform: rotate(180deg); 130 | transform: rotate(180deg); 131 | } 132 | .fa-rotate-270 { 133 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 134 | -webkit-transform: rotate(270deg); 135 | -ms-transform: rotate(270deg); 136 | transform: rotate(270deg); 137 | } 138 | .fa-flip-horizontal { 139 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; 140 | -webkit-transform: scale(-1, 1); 141 | -ms-transform: scale(-1, 1); 142 | transform: scale(-1, 1); 143 | } 144 | .fa-flip-vertical { 145 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; 146 | -webkit-transform: scale(1, -1); 147 | -ms-transform: scale(1, -1); 148 | transform: scale(1, -1); 149 | } 150 | :root .fa-rotate-90, 151 | :root .fa-rotate-180, 152 | :root .fa-rotate-270, 153 | :root .fa-flip-horizontal, 154 | :root .fa-flip-vertical { 155 | filter: none; 156 | } 157 | .fa-stack { 158 | position: relative; 159 | display: inline-block; 160 | width: 2em; 161 | height: 2em; 162 | line-height: 2em; 163 | vertical-align: middle; 164 | } 165 | .fa-stack-1x, 166 | .fa-stack-2x { 167 | position: absolute; 168 | left: 0; 169 | width: 100%; 170 | text-align: center; 171 | } 172 | .fa-stack-1x { 173 | line-height: inherit; 174 | } 175 | .fa-stack-2x { 176 | font-size: 2em; 177 | } 178 | .fa-inverse { 179 | color: #ffffff; 180 | } 181 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 182 | readers do not read off random characters that represent icons */ 183 | .fa-glass:before { 184 | content: "\f000"; 185 | } 186 | .fa-music:before { 187 | content: "\f001"; 188 | } 189 | .fa-search:before { 190 | content: "\f002"; 191 | } 192 | .fa-envelope-o:before { 193 | content: "\f003"; 194 | } 195 | .fa-heart:before { 196 | content: "\f004"; 197 | } 198 | .fa-star:before { 199 | content: "\f005"; 200 | } 201 | .fa-star-o:before { 202 | content: "\f006"; 203 | } 204 | .fa-user:before { 205 | content: "\f007"; 206 | } 207 | .fa-film:before { 208 | content: "\f008"; 209 | } 210 | .fa-th-large:before { 211 | content: "\f009"; 212 | } 213 | .fa-th:before { 214 | content: "\f00a"; 215 | } 216 | .fa-th-list:before { 217 | content: "\f00b"; 218 | } 219 | .fa-check:before { 220 | content: "\f00c"; 221 | } 222 | .fa-remove:before, 223 | .fa-close:before, 224 | .fa-times:before { 225 | content: "\f00d"; 226 | } 227 | .fa-search-plus:before { 228 | content: "\f00e"; 229 | } 230 | .fa-search-minus:before { 231 | content: "\f010"; 232 | } 233 | .fa-power-off:before { 234 | content: "\f011"; 235 | } 236 | .fa-signal:before { 237 | content: "\f012"; 238 | } 239 | .fa-gear:before, 240 | .fa-cog:before { 241 | content: "\f013"; 242 | } 243 | .fa-trash-o:before { 244 | content: "\f014"; 245 | } 246 | .fa-home:before { 247 | content: "\f015"; 248 | } 249 | .fa-file-o:before { 250 | content: "\f016"; 251 | } 252 | .fa-clock-o:before { 253 | content: "\f017"; 254 | } 255 | .fa-road:before { 256 | content: "\f018"; 257 | } 258 | .fa-download:before { 259 | content: "\f019"; 260 | } 261 | .fa-arrow-circle-o-down:before { 262 | content: "\f01a"; 263 | } 264 | .fa-arrow-circle-o-up:before { 265 | content: "\f01b"; 266 | } 267 | .fa-inbox:before { 268 | content: "\f01c"; 269 | } 270 | .fa-play-circle-o:before { 271 | content: "\f01d"; 272 | } 273 | .fa-rotate-right:before, 274 | .fa-repeat:before { 275 | content: "\f01e"; 276 | } 277 | .fa-refresh:before { 278 | content: "\f021"; 279 | } 280 | .fa-list-alt:before { 281 | content: "\f022"; 282 | } 283 | .fa-lock:before { 284 | content: "\f023"; 285 | } 286 | .fa-flag:before { 287 | content: "\f024"; 288 | } 289 | .fa-headphones:before { 290 | content: "\f025"; 291 | } 292 | .fa-volume-off:before { 293 | content: "\f026"; 294 | } 295 | .fa-volume-down:before { 296 | content: "\f027"; 297 | } 298 | .fa-volume-up:before { 299 | content: "\f028"; 300 | } 301 | .fa-qrcode:before { 302 | content: "\f029"; 303 | } 304 | .fa-barcode:before { 305 | content: "\f02a"; 306 | } 307 | .fa-tag:before { 308 | content: "\f02b"; 309 | } 310 | .fa-tags:before { 311 | content: "\f02c"; 312 | } 313 | .fa-book:before { 314 | content: "\f02d"; 315 | } 316 | .fa-bookmark:before { 317 | content: "\f02e"; 318 | } 319 | .fa-print:before { 320 | content: "\f02f"; 321 | } 322 | .fa-camera:before { 323 | content: "\f030"; 324 | } 325 | .fa-font:before { 326 | content: "\f031"; 327 | } 328 | .fa-bold:before { 329 | content: "\f032"; 330 | } 331 | .fa-italic:before { 332 | content: "\f033"; 333 | } 334 | .fa-text-height:before { 335 | content: "\f034"; 336 | } 337 | .fa-text-width:before { 338 | content: "\f035"; 339 | } 340 | .fa-align-left:before { 341 | content: "\f036"; 342 | } 343 | .fa-align-center:before { 344 | content: "\f037"; 345 | } 346 | .fa-align-right:before { 347 | content: "\f038"; 348 | } 349 | .fa-align-justify:before { 350 | content: "\f039"; 351 | } 352 | .fa-list:before { 353 | content: "\f03a"; 354 | } 355 | .fa-dedent:before, 356 | .fa-outdent:before { 357 | content: "\f03b"; 358 | } 359 | .fa-indent:before { 360 | content: "\f03c"; 361 | } 362 | .fa-video-camera:before { 363 | content: "\f03d"; 364 | } 365 | .fa-photo:before, 366 | .fa-image:before, 367 | .fa-picture-o:before { 368 | content: "\f03e"; 369 | } 370 | .fa-pencil:before { 371 | content: "\f040"; 372 | } 373 | .fa-map-marker:before { 374 | content: "\f041"; 375 | } 376 | .fa-adjust:before { 377 | content: "\f042"; 378 | } 379 | .fa-tint:before { 380 | content: "\f043"; 381 | } 382 | .fa-edit:before, 383 | .fa-pencil-square-o:before { 384 | content: "\f044"; 385 | } 386 | .fa-share-square-o:before { 387 | content: "\f045"; 388 | } 389 | .fa-check-square-o:before { 390 | content: "\f046"; 391 | } 392 | .fa-arrows:before { 393 | content: "\f047"; 394 | } 395 | .fa-step-backward:before { 396 | content: "\f048"; 397 | } 398 | .fa-fast-backward:before { 399 | content: "\f049"; 400 | } 401 | .fa-backward:before { 402 | content: "\f04a"; 403 | } 404 | .fa-play:before { 405 | content: "\f04b"; 406 | } 407 | .fa-pause:before { 408 | content: "\f04c"; 409 | } 410 | .fa-stop:before { 411 | content: "\f04d"; 412 | } 413 | .fa-forward:before { 414 | content: "\f04e"; 415 | } 416 | .fa-fast-forward:before { 417 | content: "\f050"; 418 | } 419 | .fa-step-forward:before { 420 | content: "\f051"; 421 | } 422 | .fa-eject:before { 423 | content: "\f052"; 424 | } 425 | .fa-chevron-left:before { 426 | content: "\f053"; 427 | } 428 | .fa-chevron-right:before { 429 | content: "\f054"; 430 | } 431 | .fa-plus-circle:before { 432 | content: "\f055"; 433 | } 434 | .fa-minus-circle:before { 435 | content: "\f056"; 436 | } 437 | .fa-times-circle:before { 438 | content: "\f057"; 439 | } 440 | .fa-check-circle:before { 441 | content: "\f058"; 442 | } 443 | .fa-question-circle:before { 444 | content: "\f059"; 445 | } 446 | .fa-info-circle:before { 447 | content: "\f05a"; 448 | } 449 | .fa-crosshairs:before { 450 | content: "\f05b"; 451 | } 452 | .fa-times-circle-o:before { 453 | content: "\f05c"; 454 | } 455 | .fa-check-circle-o:before { 456 | content: "\f05d"; 457 | } 458 | .fa-ban:before { 459 | content: "\f05e"; 460 | } 461 | .fa-arrow-left:before { 462 | content: "\f060"; 463 | } 464 | .fa-arrow-right:before { 465 | content: "\f061"; 466 | } 467 | .fa-arrow-up:before { 468 | content: "\f062"; 469 | } 470 | .fa-arrow-down:before { 471 | content: "\f063"; 472 | } 473 | .fa-mail-forward:before, 474 | .fa-share:before { 475 | content: "\f064"; 476 | } 477 | .fa-expand:before { 478 | content: "\f065"; 479 | } 480 | .fa-compress:before { 481 | content: "\f066"; 482 | } 483 | .fa-plus:before { 484 | content: "\f067"; 485 | } 486 | .fa-minus:before { 487 | content: "\f068"; 488 | } 489 | .fa-asterisk:before { 490 | content: "\f069"; 491 | } 492 | .fa-exclamation-circle:before { 493 | content: "\f06a"; 494 | } 495 | .fa-gift:before { 496 | content: "\f06b"; 497 | } 498 | .fa-leaf:before { 499 | content: "\f06c"; 500 | } 501 | .fa-fire:before { 502 | content: "\f06d"; 503 | } 504 | .fa-eye:before { 505 | content: "\f06e"; 506 | } 507 | .fa-eye-slash:before { 508 | content: "\f070"; 509 | } 510 | .fa-warning:before, 511 | .fa-exclamation-triangle:before { 512 | content: "\f071"; 513 | } 514 | .fa-plane:before { 515 | content: "\f072"; 516 | } 517 | .fa-calendar:before { 518 | content: "\f073"; 519 | } 520 | .fa-random:before { 521 | content: "\f074"; 522 | } 523 | .fa-comment:before { 524 | content: "\f075"; 525 | } 526 | .fa-magnet:before { 527 | content: "\f076"; 528 | } 529 | .fa-chevron-up:before { 530 | content: "\f077"; 531 | } 532 | .fa-chevron-down:before { 533 | content: "\f078"; 534 | } 535 | .fa-retweet:before { 536 | content: "\f079"; 537 | } 538 | .fa-shopping-cart:before { 539 | content: "\f07a"; 540 | } 541 | .fa-folder:before { 542 | content: "\f07b"; 543 | } 544 | .fa-folder-open:before { 545 | content: "\f07c"; 546 | } 547 | .fa-arrows-v:before { 548 | content: "\f07d"; 549 | } 550 | .fa-arrows-h:before { 551 | content: "\f07e"; 552 | } 553 | .fa-bar-chart-o:before, 554 | .fa-bar-chart:before { 555 | content: "\f080"; 556 | } 557 | .fa-twitter-square:before { 558 | content: "\f081"; 559 | } 560 | .fa-facebook-square:before { 561 | content: "\f082"; 562 | } 563 | .fa-camera-retro:before { 564 | content: "\f083"; 565 | } 566 | .fa-key:before { 567 | content: "\f084"; 568 | } 569 | .fa-gears:before, 570 | .fa-cogs:before { 571 | content: "\f085"; 572 | } 573 | .fa-comments:before { 574 | content: "\f086"; 575 | } 576 | .fa-thumbs-o-up:before { 577 | content: "\f087"; 578 | } 579 | .fa-thumbs-o-down:before { 580 | content: "\f088"; 581 | } 582 | .fa-star-half:before { 583 | content: "\f089"; 584 | } 585 | .fa-heart-o:before { 586 | content: "\f08a"; 587 | } 588 | .fa-sign-out:before { 589 | content: "\f08b"; 590 | } 591 | .fa-linkedin-square:before { 592 | content: "\f08c"; 593 | } 594 | .fa-thumb-tack:before { 595 | content: "\f08d"; 596 | } 597 | .fa-external-link:before { 598 | content: "\f08e"; 599 | } 600 | .fa-sign-in:before { 601 | content: "\f090"; 602 | } 603 | .fa-trophy:before { 604 | content: "\f091"; 605 | } 606 | .fa-github-square:before { 607 | content: "\f092"; 608 | } 609 | .fa-upload:before { 610 | content: "\f093"; 611 | } 612 | .fa-lemon-o:before { 613 | content: "\f094"; 614 | } 615 | .fa-phone:before { 616 | content: "\f095"; 617 | } 618 | .fa-square-o:before { 619 | content: "\f096"; 620 | } 621 | .fa-bookmark-o:before { 622 | content: "\f097"; 623 | } 624 | .fa-phone-square:before { 625 | content: "\f098"; 626 | } 627 | .fa-twitter:before { 628 | content: "\f099"; 629 | } 630 | .fa-facebook-f:before, 631 | .fa-facebook:before { 632 | content: "\f09a"; 633 | } 634 | .fa-github:before { 635 | content: "\f09b"; 636 | } 637 | .fa-unlock:before { 638 | content: "\f09c"; 639 | } 640 | .fa-credit-card:before { 641 | content: "\f09d"; 642 | } 643 | .fa-feed:before, 644 | .fa-rss:before { 645 | content: "\f09e"; 646 | } 647 | .fa-hdd-o:before { 648 | content: "\f0a0"; 649 | } 650 | .fa-bullhorn:before { 651 | content: "\f0a1"; 652 | } 653 | .fa-bell:before { 654 | content: "\f0f3"; 655 | } 656 | .fa-certificate:before { 657 | content: "\f0a3"; 658 | } 659 | .fa-hand-o-right:before { 660 | content: "\f0a4"; 661 | } 662 | .fa-hand-o-left:before { 663 | content: "\f0a5"; 664 | } 665 | .fa-hand-o-up:before { 666 | content: "\f0a6"; 667 | } 668 | .fa-hand-o-down:before { 669 | content: "\f0a7"; 670 | } 671 | .fa-arrow-circle-left:before { 672 | content: "\f0a8"; 673 | } 674 | .fa-arrow-circle-right:before { 675 | content: "\f0a9"; 676 | } 677 | .fa-arrow-circle-up:before { 678 | content: "\f0aa"; 679 | } 680 | .fa-arrow-circle-down:before { 681 | content: "\f0ab"; 682 | } 683 | .fa-globe:before { 684 | content: "\f0ac"; 685 | } 686 | .fa-wrench:before { 687 | content: "\f0ad"; 688 | } 689 | .fa-tasks:before { 690 | content: "\f0ae"; 691 | } 692 | .fa-filter:before { 693 | content: "\f0b0"; 694 | } 695 | .fa-briefcase:before { 696 | content: "\f0b1"; 697 | } 698 | .fa-arrows-alt:before { 699 | content: "\f0b2"; 700 | } 701 | .fa-group:before, 702 | .fa-users:before { 703 | content: "\f0c0"; 704 | } 705 | .fa-chain:before, 706 | .fa-link:before { 707 | content: "\f0c1"; 708 | } 709 | .fa-cloud:before { 710 | content: "\f0c2"; 711 | } 712 | .fa-flask:before { 713 | content: "\f0c3"; 714 | } 715 | .fa-cut:before, 716 | .fa-scissors:before { 717 | content: "\f0c4"; 718 | } 719 | .fa-copy:before, 720 | .fa-files-o:before { 721 | content: "\f0c5"; 722 | } 723 | .fa-paperclip:before { 724 | content: "\f0c6"; 725 | } 726 | .fa-save:before, 727 | .fa-floppy-o:before { 728 | content: "\f0c7"; 729 | } 730 | .fa-square:before { 731 | content: "\f0c8"; 732 | } 733 | .fa-navicon:before, 734 | .fa-reorder:before, 735 | .fa-bars:before { 736 | content: "\f0c9"; 737 | } 738 | .fa-list-ul:before { 739 | content: "\f0ca"; 740 | } 741 | .fa-list-ol:before { 742 | content: "\f0cb"; 743 | } 744 | .fa-strikethrough:before { 745 | content: "\f0cc"; 746 | } 747 | .fa-underline:before { 748 | content: "\f0cd"; 749 | } 750 | .fa-table:before { 751 | content: "\f0ce"; 752 | } 753 | .fa-magic:before { 754 | content: "\f0d0"; 755 | } 756 | .fa-truck:before { 757 | content: "\f0d1"; 758 | } 759 | .fa-pinterest:before { 760 | content: "\f0d2"; 761 | } 762 | .fa-pinterest-square:before { 763 | content: "\f0d3"; 764 | } 765 | .fa-google-plus-square:before { 766 | content: "\f0d4"; 767 | } 768 | .fa-google-plus:before { 769 | content: "\f0d5"; 770 | } 771 | .fa-money:before { 772 | content: "\f0d6"; 773 | } 774 | .fa-caret-down:before { 775 | content: "\f0d7"; 776 | } 777 | .fa-caret-up:before { 778 | content: "\f0d8"; 779 | } 780 | .fa-caret-left:before { 781 | content: "\f0d9"; 782 | } 783 | .fa-caret-right:before { 784 | content: "\f0da"; 785 | } 786 | .fa-columns:before { 787 | content: "\f0db"; 788 | } 789 | .fa-unsorted:before, 790 | .fa-sort:before { 791 | content: "\f0dc"; 792 | } 793 | .fa-sort-down:before, 794 | .fa-sort-desc:before { 795 | content: "\f0dd"; 796 | } 797 | .fa-sort-up:before, 798 | .fa-sort-asc:before { 799 | content: "\f0de"; 800 | } 801 | .fa-envelope:before { 802 | content: "\f0e0"; 803 | } 804 | .fa-linkedin:before { 805 | content: "\f0e1"; 806 | } 807 | .fa-rotate-left:before, 808 | .fa-undo:before { 809 | content: "\f0e2"; 810 | } 811 | .fa-legal:before, 812 | .fa-gavel:before { 813 | content: "\f0e3"; 814 | } 815 | .fa-dashboard:before, 816 | .fa-tachometer:before { 817 | content: "\f0e4"; 818 | } 819 | .fa-comment-o:before { 820 | content: "\f0e5"; 821 | } 822 | .fa-comments-o:before { 823 | content: "\f0e6"; 824 | } 825 | .fa-flash:before, 826 | .fa-bolt:before { 827 | content: "\f0e7"; 828 | } 829 | .fa-sitemap:before { 830 | content: "\f0e8"; 831 | } 832 | .fa-umbrella:before { 833 | content: "\f0e9"; 834 | } 835 | .fa-paste:before, 836 | .fa-clipboard:before { 837 | content: "\f0ea"; 838 | } 839 | .fa-lightbulb-o:before { 840 | content: "\f0eb"; 841 | } 842 | .fa-exchange:before { 843 | content: "\f0ec"; 844 | } 845 | .fa-cloud-download:before { 846 | content: "\f0ed"; 847 | } 848 | .fa-cloud-upload:before { 849 | content: "\f0ee"; 850 | } 851 | .fa-user-md:before { 852 | content: "\f0f0"; 853 | } 854 | .fa-stethoscope:before { 855 | content: "\f0f1"; 856 | } 857 | .fa-suitcase:before { 858 | content: "\f0f2"; 859 | } 860 | .fa-bell-o:before { 861 | content: "\f0a2"; 862 | } 863 | .fa-coffee:before { 864 | content: "\f0f4"; 865 | } 866 | .fa-cutlery:before { 867 | content: "\f0f5"; 868 | } 869 | .fa-file-text-o:before { 870 | content: "\f0f6"; 871 | } 872 | .fa-building-o:before { 873 | content: "\f0f7"; 874 | } 875 | .fa-hospital-o:before { 876 | content: "\f0f8"; 877 | } 878 | .fa-ambulance:before { 879 | content: "\f0f9"; 880 | } 881 | .fa-medkit:before { 882 | content: "\f0fa"; 883 | } 884 | .fa-fighter-jet:before { 885 | content: "\f0fb"; 886 | } 887 | .fa-beer:before { 888 | content: "\f0fc"; 889 | } 890 | .fa-h-square:before { 891 | content: "\f0fd"; 892 | } 893 | .fa-plus-square:before { 894 | content: "\f0fe"; 895 | } 896 | .fa-angle-double-left:before { 897 | content: "\f100"; 898 | } 899 | .fa-angle-double-right:before { 900 | content: "\f101"; 901 | } 902 | .fa-angle-double-up:before { 903 | content: "\f102"; 904 | } 905 | .fa-angle-double-down:before { 906 | content: "\f103"; 907 | } 908 | .fa-angle-left:before { 909 | content: "\f104"; 910 | } 911 | .fa-angle-right:before { 912 | content: "\f105"; 913 | } 914 | .fa-angle-up:before { 915 | content: "\f106"; 916 | } 917 | .fa-angle-down:before { 918 | content: "\f107"; 919 | } 920 | .fa-desktop:before { 921 | content: "\f108"; 922 | } 923 | .fa-laptop:before { 924 | content: "\f109"; 925 | } 926 | .fa-tablet:before { 927 | content: "\f10a"; 928 | } 929 | .fa-mobile-phone:before, 930 | .fa-mobile:before { 931 | content: "\f10b"; 932 | } 933 | .fa-circle-o:before { 934 | content: "\f10c"; 935 | } 936 | .fa-quote-left:before { 937 | content: "\f10d"; 938 | } 939 | .fa-quote-right:before { 940 | content: "\f10e"; 941 | } 942 | .fa-spinner:before { 943 | content: "\f110"; 944 | } 945 | .fa-circle:before { 946 | content: "\f111"; 947 | } 948 | .fa-mail-reply:before, 949 | .fa-reply:before { 950 | content: "\f112"; 951 | } 952 | .fa-github-alt:before { 953 | content: "\f113"; 954 | } 955 | .fa-folder-o:before { 956 | content: "\f114"; 957 | } 958 | .fa-folder-open-o:before { 959 | content: "\f115"; 960 | } 961 | .fa-smile-o:before { 962 | content: "\f118"; 963 | } 964 | .fa-frown-o:before { 965 | content: "\f119"; 966 | } 967 | .fa-meh-o:before { 968 | content: "\f11a"; 969 | } 970 | .fa-gamepad:before { 971 | content: "\f11b"; 972 | } 973 | .fa-keyboard-o:before { 974 | content: "\f11c"; 975 | } 976 | .fa-flag-o:before { 977 | content: "\f11d"; 978 | } 979 | .fa-flag-checkered:before { 980 | content: "\f11e"; 981 | } 982 | .fa-terminal:before { 983 | content: "\f120"; 984 | } 985 | .fa-code:before { 986 | content: "\f121"; 987 | } 988 | .fa-mail-reply-all:before, 989 | .fa-reply-all:before { 990 | content: "\f122"; 991 | } 992 | .fa-star-half-empty:before, 993 | .fa-star-half-full:before, 994 | .fa-star-half-o:before { 995 | content: "\f123"; 996 | } 997 | .fa-location-arrow:before { 998 | content: "\f124"; 999 | } 1000 | .fa-crop:before { 1001 | content: "\f125"; 1002 | } 1003 | .fa-code-fork:before { 1004 | content: "\f126"; 1005 | } 1006 | .fa-unlink:before, 1007 | .fa-chain-broken:before { 1008 | content: "\f127"; 1009 | } 1010 | .fa-question:before { 1011 | content: "\f128"; 1012 | } 1013 | .fa-info:before { 1014 | content: "\f129"; 1015 | } 1016 | .fa-exclamation:before { 1017 | content: "\f12a"; 1018 | } 1019 | .fa-superscript:before { 1020 | content: "\f12b"; 1021 | } 1022 | .fa-subscript:before { 1023 | content: "\f12c"; 1024 | } 1025 | .fa-eraser:before { 1026 | content: "\f12d"; 1027 | } 1028 | .fa-puzzle-piece:before { 1029 | content: "\f12e"; 1030 | } 1031 | .fa-microphone:before { 1032 | content: "\f130"; 1033 | } 1034 | .fa-microphone-slash:before { 1035 | content: "\f131"; 1036 | } 1037 | .fa-shield:before { 1038 | content: "\f132"; 1039 | } 1040 | .fa-calendar-o:before { 1041 | content: "\f133"; 1042 | } 1043 | .fa-fire-extinguisher:before { 1044 | content: "\f134"; 1045 | } 1046 | .fa-rocket:before { 1047 | content: "\f135"; 1048 | } 1049 | .fa-maxcdn:before { 1050 | content: "\f136"; 1051 | } 1052 | .fa-chevron-circle-left:before { 1053 | content: "\f137"; 1054 | } 1055 | .fa-chevron-circle-right:before { 1056 | content: "\f138"; 1057 | } 1058 | .fa-chevron-circle-up:before { 1059 | content: "\f139"; 1060 | } 1061 | .fa-chevron-circle-down:before { 1062 | content: "\f13a"; 1063 | } 1064 | .fa-html5:before { 1065 | content: "\f13b"; 1066 | } 1067 | .fa-css3:before { 1068 | content: "\f13c"; 1069 | } 1070 | .fa-anchor:before { 1071 | content: "\f13d"; 1072 | } 1073 | .fa-unlock-alt:before { 1074 | content: "\f13e"; 1075 | } 1076 | .fa-bullseye:before { 1077 | content: "\f140"; 1078 | } 1079 | .fa-ellipsis-h:before { 1080 | content: "\f141"; 1081 | } 1082 | .fa-ellipsis-v:before { 1083 | content: "\f142"; 1084 | } 1085 | .fa-rss-square:before { 1086 | content: "\f143"; 1087 | } 1088 | .fa-play-circle:before { 1089 | content: "\f144"; 1090 | } 1091 | .fa-ticket:before { 1092 | content: "\f145"; 1093 | } 1094 | .fa-minus-square:before { 1095 | content: "\f146"; 1096 | } 1097 | .fa-minus-square-o:before { 1098 | content: "\f147"; 1099 | } 1100 | .fa-level-up:before { 1101 | content: "\f148"; 1102 | } 1103 | .fa-level-down:before { 1104 | content: "\f149"; 1105 | } 1106 | .fa-check-square:before { 1107 | content: "\f14a"; 1108 | } 1109 | .fa-pencil-square:before { 1110 | content: "\f14b"; 1111 | } 1112 | .fa-external-link-square:before { 1113 | content: "\f14c"; 1114 | } 1115 | .fa-share-square:before { 1116 | content: "\f14d"; 1117 | } 1118 | .fa-compass:before { 1119 | content: "\f14e"; 1120 | } 1121 | .fa-toggle-down:before, 1122 | .fa-caret-square-o-down:before { 1123 | content: "\f150"; 1124 | } 1125 | .fa-toggle-up:before, 1126 | .fa-caret-square-o-up:before { 1127 | content: "\f151"; 1128 | } 1129 | .fa-toggle-right:before, 1130 | .fa-caret-square-o-right:before { 1131 | content: "\f152"; 1132 | } 1133 | .fa-euro:before, 1134 | .fa-eur:before { 1135 | content: "\f153"; 1136 | } 1137 | .fa-gbp:before { 1138 | content: "\f154"; 1139 | } 1140 | .fa-dollar:before, 1141 | .fa-usd:before { 1142 | content: "\f155"; 1143 | } 1144 | .fa-rupee:before, 1145 | .fa-inr:before { 1146 | content: "\f156"; 1147 | } 1148 | .fa-cny:before, 1149 | .fa-rmb:before, 1150 | .fa-yen:before, 1151 | .fa-jpy:before { 1152 | content: "\f157"; 1153 | } 1154 | .fa-ruble:before, 1155 | .fa-rouble:before, 1156 | .fa-rub:before { 1157 | content: "\f158"; 1158 | } 1159 | .fa-won:before, 1160 | .fa-krw:before { 1161 | content: "\f159"; 1162 | } 1163 | .fa-bitcoin:before, 1164 | .fa-btc:before { 1165 | content: "\f15a"; 1166 | } 1167 | .fa-file:before { 1168 | content: "\f15b"; 1169 | } 1170 | .fa-file-text:before { 1171 | content: "\f15c"; 1172 | } 1173 | .fa-sort-alpha-asc:before { 1174 | content: "\f15d"; 1175 | } 1176 | .fa-sort-alpha-desc:before { 1177 | content: "\f15e"; 1178 | } 1179 | .fa-sort-amount-asc:before { 1180 | content: "\f160"; 1181 | } 1182 | .fa-sort-amount-desc:before { 1183 | content: "\f161"; 1184 | } 1185 | .fa-sort-numeric-asc:before { 1186 | content: "\f162"; 1187 | } 1188 | .fa-sort-numeric-desc:before { 1189 | content: "\f163"; 1190 | } 1191 | .fa-thumbs-up:before { 1192 | content: "\f164"; 1193 | } 1194 | .fa-thumbs-down:before { 1195 | content: "\f165"; 1196 | } 1197 | .fa-youtube-square:before { 1198 | content: "\f166"; 1199 | } 1200 | .fa-youtube:before { 1201 | content: "\f167"; 1202 | } 1203 | .fa-xing:before { 1204 | content: "\f168"; 1205 | } 1206 | .fa-xing-square:before { 1207 | content: "\f169"; 1208 | } 1209 | .fa-youtube-play:before { 1210 | content: "\f16a"; 1211 | } 1212 | .fa-dropbox:before { 1213 | content: "\f16b"; 1214 | } 1215 | .fa-stack-overflow:before { 1216 | content: "\f16c"; 1217 | } 1218 | .fa-instagram:before { 1219 | content: "\f16d"; 1220 | } 1221 | .fa-flickr:before { 1222 | content: "\f16e"; 1223 | } 1224 | .fa-adn:before { 1225 | content: "\f170"; 1226 | } 1227 | .fa-bitbucket:before { 1228 | content: "\f171"; 1229 | } 1230 | .fa-bitbucket-square:before { 1231 | content: "\f172"; 1232 | } 1233 | .fa-tumblr:before { 1234 | content: "\f173"; 1235 | } 1236 | .fa-tumblr-square:before { 1237 | content: "\f174"; 1238 | } 1239 | .fa-long-arrow-down:before { 1240 | content: "\f175"; 1241 | } 1242 | .fa-long-arrow-up:before { 1243 | content: "\f176"; 1244 | } 1245 | .fa-long-arrow-left:before { 1246 | content: "\f177"; 1247 | } 1248 | .fa-long-arrow-right:before { 1249 | content: "\f178"; 1250 | } 1251 | .fa-apple:before { 1252 | content: "\f179"; 1253 | } 1254 | .fa-windows:before { 1255 | content: "\f17a"; 1256 | } 1257 | .fa-android:before { 1258 | content: "\f17b"; 1259 | } 1260 | .fa-linux:before { 1261 | content: "\f17c"; 1262 | } 1263 | .fa-dribbble:before { 1264 | content: "\f17d"; 1265 | } 1266 | .fa-skype:before { 1267 | content: "\f17e"; 1268 | } 1269 | .fa-foursquare:before { 1270 | content: "\f180"; 1271 | } 1272 | .fa-trello:before { 1273 | content: "\f181"; 1274 | } 1275 | .fa-female:before { 1276 | content: "\f182"; 1277 | } 1278 | .fa-male:before { 1279 | content: "\f183"; 1280 | } 1281 | .fa-gittip:before, 1282 | .fa-gratipay:before { 1283 | content: "\f184"; 1284 | } 1285 | .fa-sun-o:before { 1286 | content: "\f185"; 1287 | } 1288 | .fa-moon-o:before { 1289 | content: "\f186"; 1290 | } 1291 | .fa-archive:before { 1292 | content: "\f187"; 1293 | } 1294 | .fa-bug:before { 1295 | content: "\f188"; 1296 | } 1297 | .fa-vk:before { 1298 | content: "\f189"; 1299 | } 1300 | .fa-weibo:before { 1301 | content: "\f18a"; 1302 | } 1303 | .fa-renren:before { 1304 | content: "\f18b"; 1305 | } 1306 | .fa-pagelines:before { 1307 | content: "\f18c"; 1308 | } 1309 | .fa-stack-exchange:before { 1310 | content: "\f18d"; 1311 | } 1312 | .fa-arrow-circle-o-right:before { 1313 | content: "\f18e"; 1314 | } 1315 | .fa-arrow-circle-o-left:before { 1316 | content: "\f190"; 1317 | } 1318 | .fa-toggle-left:before, 1319 | .fa-caret-square-o-left:before { 1320 | content: "\f191"; 1321 | } 1322 | .fa-dot-circle-o:before { 1323 | content: "\f192"; 1324 | } 1325 | .fa-wheelchair:before { 1326 | content: "\f193"; 1327 | } 1328 | .fa-vimeo-square:before { 1329 | content: "\f194"; 1330 | } 1331 | .fa-turkish-lira:before, 1332 | .fa-try:before { 1333 | content: "\f195"; 1334 | } 1335 | .fa-plus-square-o:before { 1336 | content: "\f196"; 1337 | } 1338 | .fa-space-shuttle:before { 1339 | content: "\f197"; 1340 | } 1341 | .fa-slack:before { 1342 | content: "\f198"; 1343 | } 1344 | .fa-envelope-square:before { 1345 | content: "\f199"; 1346 | } 1347 | .fa-wordpress:before { 1348 | content: "\f19a"; 1349 | } 1350 | .fa-openid:before { 1351 | content: "\f19b"; 1352 | } 1353 | .fa-institution:before, 1354 | .fa-bank:before, 1355 | .fa-university:before { 1356 | content: "\f19c"; 1357 | } 1358 | .fa-mortar-board:before, 1359 | .fa-graduation-cap:before { 1360 | content: "\f19d"; 1361 | } 1362 | .fa-yahoo:before { 1363 | content: "\f19e"; 1364 | } 1365 | .fa-google:before { 1366 | content: "\f1a0"; 1367 | } 1368 | .fa-reddit:before { 1369 | content: "\f1a1"; 1370 | } 1371 | .fa-reddit-square:before { 1372 | content: "\f1a2"; 1373 | } 1374 | .fa-stumbleupon-circle:before { 1375 | content: "\f1a3"; 1376 | } 1377 | .fa-stumbleupon:before { 1378 | content: "\f1a4"; 1379 | } 1380 | .fa-delicious:before { 1381 | content: "\f1a5"; 1382 | } 1383 | .fa-digg:before { 1384 | content: "\f1a6"; 1385 | } 1386 | .fa-pied-piper-pp:before { 1387 | content: "\f1a7"; 1388 | } 1389 | .fa-pied-piper-alt:before { 1390 | content: "\f1a8"; 1391 | } 1392 | .fa-drupal:before { 1393 | content: "\f1a9"; 1394 | } 1395 | .fa-joomla:before { 1396 | content: "\f1aa"; 1397 | } 1398 | .fa-language:before { 1399 | content: "\f1ab"; 1400 | } 1401 | .fa-fax:before { 1402 | content: "\f1ac"; 1403 | } 1404 | .fa-building:before { 1405 | content: "\f1ad"; 1406 | } 1407 | .fa-child:before { 1408 | content: "\f1ae"; 1409 | } 1410 | .fa-paw:before { 1411 | content: "\f1b0"; 1412 | } 1413 | .fa-spoon:before { 1414 | content: "\f1b1"; 1415 | } 1416 | .fa-cube:before { 1417 | content: "\f1b2"; 1418 | } 1419 | .fa-cubes:before { 1420 | content: "\f1b3"; 1421 | } 1422 | .fa-behance:before { 1423 | content: "\f1b4"; 1424 | } 1425 | .fa-behance-square:before { 1426 | content: "\f1b5"; 1427 | } 1428 | .fa-steam:before { 1429 | content: "\f1b6"; 1430 | } 1431 | .fa-steam-square:before { 1432 | content: "\f1b7"; 1433 | } 1434 | .fa-recycle:before { 1435 | content: "\f1b8"; 1436 | } 1437 | .fa-automobile:before, 1438 | .fa-car:before { 1439 | content: "\f1b9"; 1440 | } 1441 | .fa-cab:before, 1442 | .fa-taxi:before { 1443 | content: "\f1ba"; 1444 | } 1445 | .fa-tree:before { 1446 | content: "\f1bb"; 1447 | } 1448 | .fa-spotify:before { 1449 | content: "\f1bc"; 1450 | } 1451 | .fa-deviantart:before { 1452 | content: "\f1bd"; 1453 | } 1454 | .fa-soundcloud:before { 1455 | content: "\f1be"; 1456 | } 1457 | .fa-database:before { 1458 | content: "\f1c0"; 1459 | } 1460 | .fa-file-pdf-o:before { 1461 | content: "\f1c1"; 1462 | } 1463 | .fa-file-word-o:before { 1464 | content: "\f1c2"; 1465 | } 1466 | .fa-file-excel-o:before { 1467 | content: "\f1c3"; 1468 | } 1469 | .fa-file-powerpoint-o:before { 1470 | content: "\f1c4"; 1471 | } 1472 | .fa-file-photo-o:before, 1473 | .fa-file-picture-o:before, 1474 | .fa-file-image-o:before { 1475 | content: "\f1c5"; 1476 | } 1477 | .fa-file-zip-o:before, 1478 | .fa-file-archive-o:before { 1479 | content: "\f1c6"; 1480 | } 1481 | .fa-file-sound-o:before, 1482 | .fa-file-audio-o:before { 1483 | content: "\f1c7"; 1484 | } 1485 | .fa-file-movie-o:before, 1486 | .fa-file-video-o:before { 1487 | content: "\f1c8"; 1488 | } 1489 | .fa-file-code-o:before { 1490 | content: "\f1c9"; 1491 | } 1492 | .fa-vine:before { 1493 | content: "\f1ca"; 1494 | } 1495 | .fa-codepen:before { 1496 | content: "\f1cb"; 1497 | } 1498 | .fa-jsfiddle:before { 1499 | content: "\f1cc"; 1500 | } 1501 | .fa-life-bouy:before, 1502 | .fa-life-buoy:before, 1503 | .fa-life-saver:before, 1504 | .fa-support:before, 1505 | .fa-life-ring:before { 1506 | content: "\f1cd"; 1507 | } 1508 | .fa-circle-o-notch:before { 1509 | content: "\f1ce"; 1510 | } 1511 | .fa-ra:before, 1512 | .fa-resistance:before, 1513 | .fa-rebel:before { 1514 | content: "\f1d0"; 1515 | } 1516 | .fa-ge:before, 1517 | .fa-empire:before { 1518 | content: "\f1d1"; 1519 | } 1520 | .fa-git-square:before { 1521 | content: "\f1d2"; 1522 | } 1523 | .fa-git:before { 1524 | content: "\f1d3"; 1525 | } 1526 | .fa-y-combinator-square:before, 1527 | .fa-yc-square:before, 1528 | .fa-hacker-news:before { 1529 | content: "\f1d4"; 1530 | } 1531 | .fa-tencent-weibo:before { 1532 | content: "\f1d5"; 1533 | } 1534 | .fa-qq:before { 1535 | content: "\f1d6"; 1536 | } 1537 | .fa-wechat:before, 1538 | .fa-weixin:before { 1539 | content: "\f1d7"; 1540 | } 1541 | .fa-send:before, 1542 | .fa-paper-plane:before { 1543 | content: "\f1d8"; 1544 | } 1545 | .fa-send-o:before, 1546 | .fa-paper-plane-o:before { 1547 | content: "\f1d9"; 1548 | } 1549 | .fa-history:before { 1550 | content: "\f1da"; 1551 | } 1552 | .fa-circle-thin:before { 1553 | content: "\f1db"; 1554 | } 1555 | .fa-header:before { 1556 | content: "\f1dc"; 1557 | } 1558 | .fa-paragraph:before { 1559 | content: "\f1dd"; 1560 | } 1561 | .fa-sliders:before { 1562 | content: "\f1de"; 1563 | } 1564 | .fa-share-alt:before { 1565 | content: "\f1e0"; 1566 | } 1567 | .fa-share-alt-square:before { 1568 | content: "\f1e1"; 1569 | } 1570 | .fa-bomb:before { 1571 | content: "\f1e2"; 1572 | } 1573 | .fa-soccer-ball-o:before, 1574 | .fa-futbol-o:before { 1575 | content: "\f1e3"; 1576 | } 1577 | .fa-tty:before { 1578 | content: "\f1e4"; 1579 | } 1580 | .fa-binoculars:before { 1581 | content: "\f1e5"; 1582 | } 1583 | .fa-plug:before { 1584 | content: "\f1e6"; 1585 | } 1586 | .fa-slideshare:before { 1587 | content: "\f1e7"; 1588 | } 1589 | .fa-twitch:before { 1590 | content: "\f1e8"; 1591 | } 1592 | .fa-yelp:before { 1593 | content: "\f1e9"; 1594 | } 1595 | .fa-newspaper-o:before { 1596 | content: "\f1ea"; 1597 | } 1598 | .fa-wifi:before { 1599 | content: "\f1eb"; 1600 | } 1601 | .fa-calculator:before { 1602 | content: "\f1ec"; 1603 | } 1604 | .fa-paypal:before { 1605 | content: "\f1ed"; 1606 | } 1607 | .fa-google-wallet:before { 1608 | content: "\f1ee"; 1609 | } 1610 | .fa-cc-visa:before { 1611 | content: "\f1f0"; 1612 | } 1613 | .fa-cc-mastercard:before { 1614 | content: "\f1f1"; 1615 | } 1616 | .fa-cc-discover:before { 1617 | content: "\f1f2"; 1618 | } 1619 | .fa-cc-amex:before { 1620 | content: "\f1f3"; 1621 | } 1622 | .fa-cc-paypal:before { 1623 | content: "\f1f4"; 1624 | } 1625 | .fa-cc-stripe:before { 1626 | content: "\f1f5"; 1627 | } 1628 | .fa-bell-slash:before { 1629 | content: "\f1f6"; 1630 | } 1631 | .fa-bell-slash-o:before { 1632 | content: "\f1f7"; 1633 | } 1634 | .fa-trash:before { 1635 | content: "\f1f8"; 1636 | } 1637 | .fa-copyright:before { 1638 | content: "\f1f9"; 1639 | } 1640 | .fa-at:before { 1641 | content: "\f1fa"; 1642 | } 1643 | .fa-eyedropper:before { 1644 | content: "\f1fb"; 1645 | } 1646 | .fa-paint-brush:before { 1647 | content: "\f1fc"; 1648 | } 1649 | .fa-birthday-cake:before { 1650 | content: "\f1fd"; 1651 | } 1652 | .fa-area-chart:before { 1653 | content: "\f1fe"; 1654 | } 1655 | .fa-pie-chart:before { 1656 | content: "\f200"; 1657 | } 1658 | .fa-line-chart:before { 1659 | content: "\f201"; 1660 | } 1661 | .fa-lastfm:before { 1662 | content: "\f202"; 1663 | } 1664 | .fa-lastfm-square:before { 1665 | content: "\f203"; 1666 | } 1667 | .fa-toggle-off:before { 1668 | content: "\f204"; 1669 | } 1670 | .fa-toggle-on:before { 1671 | content: "\f205"; 1672 | } 1673 | .fa-bicycle:before { 1674 | content: "\f206"; 1675 | } 1676 | .fa-bus:before { 1677 | content: "\f207"; 1678 | } 1679 | .fa-ioxhost:before { 1680 | content: "\f208"; 1681 | } 1682 | .fa-angellist:before { 1683 | content: "\f209"; 1684 | } 1685 | .fa-cc:before { 1686 | content: "\f20a"; 1687 | } 1688 | .fa-shekel:before, 1689 | .fa-sheqel:before, 1690 | .fa-ils:before { 1691 | content: "\f20b"; 1692 | } 1693 | .fa-meanpath:before { 1694 | content: "\f20c"; 1695 | } 1696 | .fa-buysellads:before { 1697 | content: "\f20d"; 1698 | } 1699 | .fa-connectdevelop:before { 1700 | content: "\f20e"; 1701 | } 1702 | .fa-dashcube:before { 1703 | content: "\f210"; 1704 | } 1705 | .fa-forumbee:before { 1706 | content: "\f211"; 1707 | } 1708 | .fa-leanpub:before { 1709 | content: "\f212"; 1710 | } 1711 | .fa-sellsy:before { 1712 | content: "\f213"; 1713 | } 1714 | .fa-shirtsinbulk:before { 1715 | content: "\f214"; 1716 | } 1717 | .fa-simplybuilt:before { 1718 | content: "\f215"; 1719 | } 1720 | .fa-skyatlas:before { 1721 | content: "\f216"; 1722 | } 1723 | .fa-cart-plus:before { 1724 | content: "\f217"; 1725 | } 1726 | .fa-cart-arrow-down:before { 1727 | content: "\f218"; 1728 | } 1729 | .fa-diamond:before { 1730 | content: "\f219"; 1731 | } 1732 | .fa-ship:before { 1733 | content: "\f21a"; 1734 | } 1735 | .fa-user-secret:before { 1736 | content: "\f21b"; 1737 | } 1738 | .fa-motorcycle:before { 1739 | content: "\f21c"; 1740 | } 1741 | .fa-street-view:before { 1742 | content: "\f21d"; 1743 | } 1744 | .fa-heartbeat:before { 1745 | content: "\f21e"; 1746 | } 1747 | .fa-venus:before { 1748 | content: "\f221"; 1749 | } 1750 | .fa-mars:before { 1751 | content: "\f222"; 1752 | } 1753 | .fa-mercury:before { 1754 | content: "\f223"; 1755 | } 1756 | .fa-intersex:before, 1757 | .fa-transgender:before { 1758 | content: "\f224"; 1759 | } 1760 | .fa-transgender-alt:before { 1761 | content: "\f225"; 1762 | } 1763 | .fa-venus-double:before { 1764 | content: "\f226"; 1765 | } 1766 | .fa-mars-double:before { 1767 | content: "\f227"; 1768 | } 1769 | .fa-venus-mars:before { 1770 | content: "\f228"; 1771 | } 1772 | .fa-mars-stroke:before { 1773 | content: "\f229"; 1774 | } 1775 | .fa-mars-stroke-v:before { 1776 | content: "\f22a"; 1777 | } 1778 | .fa-mars-stroke-h:before { 1779 | content: "\f22b"; 1780 | } 1781 | .fa-neuter:before { 1782 | content: "\f22c"; 1783 | } 1784 | .fa-genderless:before { 1785 | content: "\f22d"; 1786 | } 1787 | .fa-facebook-official:before { 1788 | content: "\f230"; 1789 | } 1790 | .fa-pinterest-p:before { 1791 | content: "\f231"; 1792 | } 1793 | .fa-whatsapp:before { 1794 | content: "\f232"; 1795 | } 1796 | .fa-server:before { 1797 | content: "\f233"; 1798 | } 1799 | .fa-user-plus:before { 1800 | content: "\f234"; 1801 | } 1802 | .fa-user-times:before { 1803 | content: "\f235"; 1804 | } 1805 | .fa-hotel:before, 1806 | .fa-bed:before { 1807 | content: "\f236"; 1808 | } 1809 | .fa-viacoin:before { 1810 | content: "\f237"; 1811 | } 1812 | .fa-train:before { 1813 | content: "\f238"; 1814 | } 1815 | .fa-subway:before { 1816 | content: "\f239"; 1817 | } 1818 | .fa-medium:before { 1819 | content: "\f23a"; 1820 | } 1821 | .fa-yc:before, 1822 | .fa-y-combinator:before { 1823 | content: "\f23b"; 1824 | } 1825 | .fa-optin-monster:before { 1826 | content: "\f23c"; 1827 | } 1828 | .fa-opencart:before { 1829 | content: "\f23d"; 1830 | } 1831 | .fa-expeditedssl:before { 1832 | content: "\f23e"; 1833 | } 1834 | .fa-battery-4:before, 1835 | .fa-battery:before, 1836 | .fa-battery-full:before { 1837 | content: "\f240"; 1838 | } 1839 | .fa-battery-3:before, 1840 | .fa-battery-three-quarters:before { 1841 | content: "\f241"; 1842 | } 1843 | .fa-battery-2:before, 1844 | .fa-battery-half:before { 1845 | content: "\f242"; 1846 | } 1847 | .fa-battery-1:before, 1848 | .fa-battery-quarter:before { 1849 | content: "\f243"; 1850 | } 1851 | .fa-battery-0:before, 1852 | .fa-battery-empty:before { 1853 | content: "\f244"; 1854 | } 1855 | .fa-mouse-pointer:before { 1856 | content: "\f245"; 1857 | } 1858 | .fa-i-cursor:before { 1859 | content: "\f246"; 1860 | } 1861 | .fa-object-group:before { 1862 | content: "\f247"; 1863 | } 1864 | .fa-object-ungroup:before { 1865 | content: "\f248"; 1866 | } 1867 | .fa-sticky-note:before { 1868 | content: "\f249"; 1869 | } 1870 | .fa-sticky-note-o:before { 1871 | content: "\f24a"; 1872 | } 1873 | .fa-cc-jcb:before { 1874 | content: "\f24b"; 1875 | } 1876 | .fa-cc-diners-club:before { 1877 | content: "\f24c"; 1878 | } 1879 | .fa-clone:before { 1880 | content: "\f24d"; 1881 | } 1882 | .fa-balance-scale:before { 1883 | content: "\f24e"; 1884 | } 1885 | .fa-hourglass-o:before { 1886 | content: "\f250"; 1887 | } 1888 | .fa-hourglass-1:before, 1889 | .fa-hourglass-start:before { 1890 | content: "\f251"; 1891 | } 1892 | .fa-hourglass-2:before, 1893 | .fa-hourglass-half:before { 1894 | content: "\f252"; 1895 | } 1896 | .fa-hourglass-3:before, 1897 | .fa-hourglass-end:before { 1898 | content: "\f253"; 1899 | } 1900 | .fa-hourglass:before { 1901 | content: "\f254"; 1902 | } 1903 | .fa-hand-grab-o:before, 1904 | .fa-hand-rock-o:before { 1905 | content: "\f255"; 1906 | } 1907 | .fa-hand-stop-o:before, 1908 | .fa-hand-paper-o:before { 1909 | content: "\f256"; 1910 | } 1911 | .fa-hand-scissors-o:before { 1912 | content: "\f257"; 1913 | } 1914 | .fa-hand-lizard-o:before { 1915 | content: "\f258"; 1916 | } 1917 | .fa-hand-spock-o:before { 1918 | content: "\f259"; 1919 | } 1920 | .fa-hand-pointer-o:before { 1921 | content: "\f25a"; 1922 | } 1923 | .fa-hand-peace-o:before { 1924 | content: "\f25b"; 1925 | } 1926 | .fa-trademark:before { 1927 | content: "\f25c"; 1928 | } 1929 | .fa-registered:before { 1930 | content: "\f25d"; 1931 | } 1932 | .fa-creative-commons:before { 1933 | content: "\f25e"; 1934 | } 1935 | .fa-gg:before { 1936 | content: "\f260"; 1937 | } 1938 | .fa-gg-circle:before { 1939 | content: "\f261"; 1940 | } 1941 | .fa-tripadvisor:before { 1942 | content: "\f262"; 1943 | } 1944 | .fa-odnoklassniki:before { 1945 | content: "\f263"; 1946 | } 1947 | .fa-odnoklassniki-square:before { 1948 | content: "\f264"; 1949 | } 1950 | .fa-get-pocket:before { 1951 | content: "\f265"; 1952 | } 1953 | .fa-wikipedia-w:before { 1954 | content: "\f266"; 1955 | } 1956 | .fa-safari:before { 1957 | content: "\f267"; 1958 | } 1959 | .fa-chrome:before { 1960 | content: "\f268"; 1961 | } 1962 | .fa-firefox:before { 1963 | content: "\f269"; 1964 | } 1965 | .fa-opera:before { 1966 | content: "\f26a"; 1967 | } 1968 | .fa-internet-explorer:before { 1969 | content: "\f26b"; 1970 | } 1971 | .fa-tv:before, 1972 | .fa-television:before { 1973 | content: "\f26c"; 1974 | } 1975 | .fa-contao:before { 1976 | content: "\f26d"; 1977 | } 1978 | .fa-500px:before { 1979 | content: "\f26e"; 1980 | } 1981 | .fa-amazon:before { 1982 | content: "\f270"; 1983 | } 1984 | .fa-calendar-plus-o:before { 1985 | content: "\f271"; 1986 | } 1987 | .fa-calendar-minus-o:before { 1988 | content: "\f272"; 1989 | } 1990 | .fa-calendar-times-o:before { 1991 | content: "\f273"; 1992 | } 1993 | .fa-calendar-check-o:before { 1994 | content: "\f274"; 1995 | } 1996 | .fa-industry:before { 1997 | content: "\f275"; 1998 | } 1999 | .fa-map-pin:before { 2000 | content: "\f276"; 2001 | } 2002 | .fa-map-signs:before { 2003 | content: "\f277"; 2004 | } 2005 | .fa-map-o:before { 2006 | content: "\f278"; 2007 | } 2008 | .fa-map:before { 2009 | content: "\f279"; 2010 | } 2011 | .fa-commenting:before { 2012 | content: "\f27a"; 2013 | } 2014 | .fa-commenting-o:before { 2015 | content: "\f27b"; 2016 | } 2017 | .fa-houzz:before { 2018 | content: "\f27c"; 2019 | } 2020 | .fa-vimeo:before { 2021 | content: "\f27d"; 2022 | } 2023 | .fa-black-tie:before { 2024 | content: "\f27e"; 2025 | } 2026 | .fa-fonticons:before { 2027 | content: "\f280"; 2028 | } 2029 | .fa-reddit-alien:before { 2030 | content: "\f281"; 2031 | } 2032 | .fa-edge:before { 2033 | content: "\f282"; 2034 | } 2035 | .fa-credit-card-alt:before { 2036 | content: "\f283"; 2037 | } 2038 | .fa-codiepie:before { 2039 | content: "\f284"; 2040 | } 2041 | .fa-modx:before { 2042 | content: "\f285"; 2043 | } 2044 | .fa-fort-awesome:before { 2045 | content: "\f286"; 2046 | } 2047 | .fa-usb:before { 2048 | content: "\f287"; 2049 | } 2050 | .fa-product-hunt:before { 2051 | content: "\f288"; 2052 | } 2053 | .fa-mixcloud:before { 2054 | content: "\f289"; 2055 | } 2056 | .fa-scribd:before { 2057 | content: "\f28a"; 2058 | } 2059 | .fa-pause-circle:before { 2060 | content: "\f28b"; 2061 | } 2062 | .fa-pause-circle-o:before { 2063 | content: "\f28c"; 2064 | } 2065 | .fa-stop-circle:before { 2066 | content: "\f28d"; 2067 | } 2068 | .fa-stop-circle-o:before { 2069 | content: "\f28e"; 2070 | } 2071 | .fa-shopping-bag:before { 2072 | content: "\f290"; 2073 | } 2074 | .fa-shopping-basket:before { 2075 | content: "\f291"; 2076 | } 2077 | .fa-hashtag:before { 2078 | content: "\f292"; 2079 | } 2080 | .fa-bluetooth:before { 2081 | content: "\f293"; 2082 | } 2083 | .fa-bluetooth-b:before { 2084 | content: "\f294"; 2085 | } 2086 | .fa-percent:before { 2087 | content: "\f295"; 2088 | } 2089 | .fa-gitlab:before { 2090 | content: "\f296"; 2091 | } 2092 | .fa-wpbeginner:before { 2093 | content: "\f297"; 2094 | } 2095 | .fa-wpforms:before { 2096 | content: "\f298"; 2097 | } 2098 | .fa-envira:before { 2099 | content: "\f299"; 2100 | } 2101 | .fa-universal-access:before { 2102 | content: "\f29a"; 2103 | } 2104 | .fa-wheelchair-alt:before { 2105 | content: "\f29b"; 2106 | } 2107 | .fa-question-circle-o:before { 2108 | content: "\f29c"; 2109 | } 2110 | .fa-blind:before { 2111 | content: "\f29d"; 2112 | } 2113 | .fa-audio-description:before { 2114 | content: "\f29e"; 2115 | } 2116 | .fa-volume-control-phone:before { 2117 | content: "\f2a0"; 2118 | } 2119 | .fa-braille:before { 2120 | content: "\f2a1"; 2121 | } 2122 | .fa-assistive-listening-systems:before { 2123 | content: "\f2a2"; 2124 | } 2125 | .fa-asl-interpreting:before, 2126 | .fa-american-sign-language-interpreting:before { 2127 | content: "\f2a3"; 2128 | } 2129 | .fa-deafness:before, 2130 | .fa-hard-of-hearing:before, 2131 | .fa-deaf:before { 2132 | content: "\f2a4"; 2133 | } 2134 | .fa-glide:before { 2135 | content: "\f2a5"; 2136 | } 2137 | .fa-glide-g:before { 2138 | content: "\f2a6"; 2139 | } 2140 | .fa-signing:before, 2141 | .fa-sign-language:before { 2142 | content: "\f2a7"; 2143 | } 2144 | .fa-low-vision:before { 2145 | content: "\f2a8"; 2146 | } 2147 | .fa-viadeo:before { 2148 | content: "\f2a9"; 2149 | } 2150 | .fa-viadeo-square:before { 2151 | content: "\f2aa"; 2152 | } 2153 | .fa-snapchat:before { 2154 | content: "\f2ab"; 2155 | } 2156 | .fa-snapchat-ghost:before { 2157 | content: "\f2ac"; 2158 | } 2159 | .fa-snapchat-square:before { 2160 | content: "\f2ad"; 2161 | } 2162 | .fa-pied-piper:before { 2163 | content: "\f2ae"; 2164 | } 2165 | .fa-first-order:before { 2166 | content: "\f2b0"; 2167 | } 2168 | .fa-yoast:before { 2169 | content: "\f2b1"; 2170 | } 2171 | .fa-themeisle:before { 2172 | content: "\f2b2"; 2173 | } 2174 | .fa-google-plus-circle:before, 2175 | .fa-google-plus-official:before { 2176 | content: "\f2b3"; 2177 | } 2178 | .fa-fa:before, 2179 | .fa-font-awesome:before { 2180 | content: "\f2b4"; 2181 | } 2182 | .fa-handshake-o:before { 2183 | content: "\f2b5"; 2184 | } 2185 | .fa-envelope-open:before { 2186 | content: "\f2b6"; 2187 | } 2188 | .fa-envelope-open-o:before { 2189 | content: "\f2b7"; 2190 | } 2191 | .fa-linode:before { 2192 | content: "\f2b8"; 2193 | } 2194 | .fa-address-book:before { 2195 | content: "\f2b9"; 2196 | } 2197 | .fa-address-book-o:before { 2198 | content: "\f2ba"; 2199 | } 2200 | .fa-vcard:before, 2201 | .fa-address-card:before { 2202 | content: "\f2bb"; 2203 | } 2204 | .fa-vcard-o:before, 2205 | .fa-address-card-o:before { 2206 | content: "\f2bc"; 2207 | } 2208 | .fa-user-circle:before { 2209 | content: "\f2bd"; 2210 | } 2211 | .fa-user-circle-o:before { 2212 | content: "\f2be"; 2213 | } 2214 | .fa-user-o:before { 2215 | content: "\f2c0"; 2216 | } 2217 | .fa-id-badge:before { 2218 | content: "\f2c1"; 2219 | } 2220 | .fa-drivers-license:before, 2221 | .fa-id-card:before { 2222 | content: "\f2c2"; 2223 | } 2224 | .fa-drivers-license-o:before, 2225 | .fa-id-card-o:before { 2226 | content: "\f2c3"; 2227 | } 2228 | .fa-quora:before { 2229 | content: "\f2c4"; 2230 | } 2231 | .fa-free-code-camp:before { 2232 | content: "\f2c5"; 2233 | } 2234 | .fa-telegram:before { 2235 | content: "\f2c6"; 2236 | } 2237 | .fa-thermometer-4:before, 2238 | .fa-thermometer:before, 2239 | .fa-thermometer-full:before { 2240 | content: "\f2c7"; 2241 | } 2242 | .fa-thermometer-3:before, 2243 | .fa-thermometer-three-quarters:before { 2244 | content: "\f2c8"; 2245 | } 2246 | .fa-thermometer-2:before, 2247 | .fa-thermometer-half:before { 2248 | content: "\f2c9"; 2249 | } 2250 | .fa-thermometer-1:before, 2251 | .fa-thermometer-quarter:before { 2252 | content: "\f2ca"; 2253 | } 2254 | .fa-thermometer-0:before, 2255 | .fa-thermometer-empty:before { 2256 | content: "\f2cb"; 2257 | } 2258 | .fa-shower:before { 2259 | content: "\f2cc"; 2260 | } 2261 | .fa-bathtub:before, 2262 | .fa-s15:before, 2263 | .fa-bath:before { 2264 | content: "\f2cd"; 2265 | } 2266 | .fa-podcast:before { 2267 | content: "\f2ce"; 2268 | } 2269 | .fa-window-maximize:before { 2270 | content: "\f2d0"; 2271 | } 2272 | .fa-window-minimize:before { 2273 | content: "\f2d1"; 2274 | } 2275 | .fa-window-restore:before { 2276 | content: "\f2d2"; 2277 | } 2278 | .fa-times-rectangle:before, 2279 | .fa-window-close:before { 2280 | content: "\f2d3"; 2281 | } 2282 | .fa-times-rectangle-o:before, 2283 | .fa-window-close-o:before { 2284 | content: "\f2d4"; 2285 | } 2286 | .fa-bandcamp:before { 2287 | content: "\f2d5"; 2288 | } 2289 | .fa-grav:before { 2290 | content: "\f2d6"; 2291 | } 2292 | .fa-etsy:before { 2293 | content: "\f2d7"; 2294 | } 2295 | .fa-imdb:before { 2296 | content: "\f2d8"; 2297 | } 2298 | .fa-ravelry:before { 2299 | content: "\f2d9"; 2300 | } 2301 | .fa-eercast:before { 2302 | content: "\f2da"; 2303 | } 2304 | .fa-microchip:before { 2305 | content: "\f2db"; 2306 | } 2307 | .fa-snowflake-o:before { 2308 | content: "\f2dc"; 2309 | } 2310 | .fa-superpowers:before { 2311 | content: "\f2dd"; 2312 | } 2313 | .fa-wpexplorer:before { 2314 | content: "\f2de"; 2315 | } 2316 | .fa-meetup:before { 2317 | content: "\f2e0"; 2318 | } 2319 | .sr-only { 2320 | position: absolute; 2321 | width: 1px; 2322 | height: 1px; 2323 | padding: 0; 2324 | margin: -1px; 2325 | overflow: hidden; 2326 | clip: rect(0, 0, 0, 0); 2327 | border: 0; 2328 | } 2329 | .sr-only-focusable:active, 2330 | .sr-only-focusable:focus { 2331 | position: static; 2332 | width: auto; 2333 | height: auto; 2334 | margin: 0; 2335 | overflow: visible; 2336 | clip: auto; 2337 | } 2338 | -------------------------------------------------------------------------------- /src/assets/fonts/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/assets/fonts/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/assets/fonts/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/assets/fonts/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/assets/fonts/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/assets/fonts/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/index.css: -------------------------------------------------------------------------------- 1 | @import './css/font-awesome.css'; 2 | -------------------------------------------------------------------------------- /src/assets/js/cookie.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: WangQiBiao 3 | * @Date: 2018-02-28 10:25:07 4 | * @Last Modified by: WangQiBiao 5 | * @Last Modified time: 2018-08-17 11:43:31 6 | */ 7 | 8 | /** 9 | * 平台标识【用于区别同一名下设置和获取不同cookie值，解决同一浏览器同一域名获取信息错乱bug】 10 | */ 11 | let PLATFORM_FLAG = window.PLATFORM_CONFIG.platformFlag 12 | /** 13 | * 浏览器是否禁用cookie 14 | * @param return 返回布尔值标识是否禁用，true禁用 15 | */ 16 | function browserIsDisableCookie () { 17 | let isCookie = window.document.cookie || window.navigator.cookieEnabled 18 | if (!isCookie) { 19 | console.error('浏览器cookie被禁用') 20 | return false 21 | } else { 22 | return true 23 | } 24 | } 25 | export default { 26 | /** 27 | * 获取 28 | * @param {string} name 获取cookie名称 29 | * @return {string} cookie值 30 | */ 31 | get: function (name) { 32 | if (!browserIsDisableCookie()) { 33 | return 34 | } 35 | let arrStr = document.cookie.split('; ') 36 | for (let i = 0; i < arrStr.length; i++) { 37 | let temp = arrStr[i].split('=') 38 | if (temp[0] === PLATFORM_FLAG + name) { 39 | if (temp[1] === undefined || temp[1] === null) { 40 | return null 41 | } 42 | return unescape(temp[1]) 43 | } 44 | } 45 | return null 46 | }, 47 | /** 48 | * 设置 49 | * @param {string} name 获取cookie名称 50 | * @param {string} value 设置cookie值 51 | */ 52 | set: function (name, value) { 53 | if (!browserIsDisableCookie()) { 54 | return 55 | } 56 | if (!name || !value) { 57 | console.error('cookie的name或者value不能为空') 58 | } 59 | // 两分钟过时 60 | // let exp = new Date(); 61 | // exp.setTime(exp.getTime() + 60 * 2000); 62 | document.cookie = PLATFORM_FLAG + name + '=' + escape(value) + ';path=/' 63 | }, 64 | /** 65 | * 清除所有cookie内容 66 | */ 67 | clear: function () { 68 | if (!browserIsDisableCookie()) { 69 | return 70 | } 71 | let arrStr = document.cookie.split('; ') 72 | for (let i = 0; i < arrStr.length; i++) { 73 | let temp = arrStr[i].split('=') 74 | let bf = PLATFORM_FLAG ? temp[0].indexOf(PLATFORM_FLAG) !== -1 : true 75 | if (bf) { 76 | // 设置过时时间 77 | document.cookie = temp[0] + '=0' + ';expires=' + new Date(0).toGMTString() + ';path=/' 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/assets/js/http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import { Toast } from 'vant' 3 | const baseURL = window.PLATFORM_CONFIG.baseUrl 4 | 5 | /** 6 | * 创建请求 7 | * @param {string} URL 请求地址 8 | */ 9 | export function createdAxios (URL) { 10 | var instance = axios.create() 11 | instance.defaults.baseURL = baseURL + URL 12 | instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' 13 | instance.defaults.withCredentials = true 14 | instance.defaults.transformRequest = [ 15 | function (data) { 16 | let newData = [] 17 | for (let k in data) { 18 | newData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k])) 19 | } 20 | return newData.join('&') 21 | } 22 | ] 23 | instance.defaults.transformResponse = [ 24 | function (res) { 25 | // TODO: 需要补上错误处理 26 | res = JSON.parse(res) 27 | if (res.state !== 1) { 28 | Toast.fail('服务器开小差了~稍后重试') 29 | throw Error('请求失败') 30 | } 31 | return res.data 32 | } 33 | ] 34 | return instance 35 | } 36 | /** 37 | * 创建请求 38 | * @param {string} URL 请求地址 39 | */ 40 | export function createdFormDataAxios (URL, params) { 41 | let formData = new FormData() 42 | for (var variable in params) { 43 | if (params.hasOwnProperty(variable)) { 44 | formData.append(variable, params[variable]) 45 | } 46 | } 47 | return axios.post(baseURL + URL, formData, { 48 | headers: { 49 | 'Content-Type': 'multipart/form-data' 50 | }, 51 | withCredentials: true 52 | }) 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/js/screen-adaptation.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * 移动端(手机端)页面自适应解决方案—rem布局 4 | * @ 转化为px : rem = 37.5 : 1 5 | */ 6 | (function flexible(window, document) { 7 | var docEl = document.documentElement; 8 | var dpr = window.devicePixelRatio || 1; 9 | 10 | // adjust body font size 11 | function setBodyFontSize() { 12 | if (document.body) { 13 | document.body.style.fontSize = 12 * dpr + 'px'; 14 | } else { 15 | document.addEventListener('DOMContentLoaded', setBodyFontSize); 16 | } 17 | } 18 | setBodyFontSize(); 19 | 20 | // set 1rem = viewWidth / 10 21 | function setRemUnit() { 22 | var rem = docEl.clientWidth / 10; 23 | docEl.style.fontSize = rem + 'px'; 24 | } 25 | 26 | setRemUnit(); 27 | 28 | // reset rem unit on page resize 29 | window.addEventListener('resize', setRemUnit); 30 | window.addEventListener('pageshow', function(e) { 31 | if (e.persisted) { 32 | setRemUnit(); 33 | } 34 | }); 35 | 36 | // detect 0.5px supports 37 | if (dpr >= 2) { 38 | var fakeBody = document.createElement('body'); 39 | var testElement = document.createElement('div'); 40 | testElement.style.border = '.5px solid transparent'; 41 | fakeBody.appendChild(testElement); 42 | docEl.appendChild(fakeBody); 43 | if (testElement.offsetHeight === 1) { 44 | docEl.classList.add('hairlines'); 45 | } 46 | docEl.removeChild(fakeBody); 47 | } 48 | })(window, document); 49 | -------------------------------------------------------------------------------- /src/assets/js/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 图片地址 3 | * 4 | * @export 5 | * @param {any} file 6 | * @returns 7 | */ 8 | export function parseFileURL (file) { 9 | return `${window.PLATFORM_CONFIG.fileURL}${file}` 10 | } 11 | export function throttle (delay, noTrailing, callback, debounceMode) { 12 | var timeoutID 13 | var lastExec = 0 14 | if (typeof noTrailing !== 'boolean') { 15 | debounceMode = callback 16 | callback = noTrailing 17 | noTrailing = undefined 18 | } 19 | function wrapper () { 20 | var self = this 21 | var elapsed = Number(new Date()) - lastExec 22 | var args = arguments 23 | function exec () { 24 | lastExec = Number(new Date()) 25 | callback.apply(self, args) 26 | } 27 | function clear () { 28 | timeoutID = undefined 29 | } 30 | if (debounceMode && !timeoutID) { 31 | exec() 32 | } 33 | if (timeoutID) { 34 | clearTimeout(timeoutID) 35 | } 36 | if (debounceMode === undefined && elapsed > delay) { 37 | exec() 38 | } else if (noTrailing !== true) { 39 | timeoutID = setTimeout( 40 | debounceMode ? clear : exec, 41 | debounceMode === undefined ? delay - elapsed : delay 42 | ) 43 | } 44 | } 45 | return wrapper 46 | } 47 | -------------------------------------------------------------------------------- /src/components/ec-ips/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 38 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import EcIps from './ec-ips' 2 | export default { 3 | EcIps 4 | } 5 | -------------------------------------------------------------------------------- /src/directives/index.js: -------------------------------------------------------------------------------- 1 | // doc https://cn.vuejs.org/v2/guide/custom-directive.html 2 | -------------------------------------------------------------------------------- /src/filters/format.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 数字格式化 3 | * 4 | * @export 5 | * @param {any} number 要格式化的数字 6 | * @param {any} decimals 保留几位小数 7 | * @param {any} decPoint 小数点符号 8 | * @param {any} thousandsSep 千分位符号 9 | * @returns 10 | */ 11 | export function numberFormat (number, decimals, decPoint, thousandsSep) { 12 | number = (number + '').replace(/[^0-9+-Ee.]/g, '') 13 | let n = !isFinite(+number) ? 0 : +number 14 | let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals) 15 | let sep = typeof thousandsSep === 'undefined' ? ',' : thousandsSep 16 | let dec = typeof decPoint === 'undefined' ? '.' : decPoint 17 | let s = '' 18 | let toFixedFix = function (n, prec) { 19 | let k = Math.pow(10, prec) 20 | return '' + Math.ceil(n * k) / k 21 | } 22 | 23 | s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.') 24 | let re = /(-?\d+)(\d{3})/ 25 | while (re.test(s[0])) { 26 | s[0] = s[0].replace(re, '$1' + sep + '$2') 27 | } 28 | 29 | if ((s[1] || '').length < prec) { 30 | s[1] = s[1] || '' 31 | s[1] += new Array(prec - s[1].length + 1).join('0') 32 | } 33 | return s.join(dec) 34 | } 35 | -------------------------------------------------------------------------------- /src/filters/index.js: -------------------------------------------------------------------------------- 1 | // doc https://cn.vuejs.org/v2/guide/filters.html 2 | export * from './format' 3 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: WangQiBiao 3 | * @LastEditors: WangQiBiao 4 | * @Description: 入口 5 | * @Date: 2019-03-31 13:41:09 6 | * @LastEditTime: 2019-04-07 22:48:38 7 | */ 8 | // The Vue build version to load with the `import` command 9 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 10 | import 'vant/lib/index.css' 11 | import './assets/css/index.scss' 12 | import './assets/js/screen-adaptation' 13 | 14 | import * as directives from './directives' 15 | import * as filters from './filters' 16 | import * as mixins from './mixins' 17 | 18 | import App from './App' 19 | import Vant from 'vant' 20 | import Vue from 'vue' 21 | import components from './components' 22 | import router from './router' 23 | import store from './store' 24 | 25 | Vue.use(Vant) 26 | 27 | // 全局组件 28 | Object.keys(components).forEach(key => { 29 | Vue.component(key, components[key]) 30 | }) 31 | // 引入全局过滤器 32 | Object.keys(filters).forEach(key => { 33 | Vue.filter(key, filters[key]) 34 | }) 35 | // 引入全局指令 36 | Object.keys(directives).forEach(key => { 37 | Vue.directive(key, directives[key]) 38 | }) 39 | // 引入全局mixins 40 | Object.keys(mixins).forEach(key => { 41 | Vue.mixin(mixins[key]) 42 | }) 43 | 44 | Vue.config.productionTip = false 45 | 46 | /* eslint-disable no-new */ 47 | new Vue({ 48 | el: '#app', 49 | router, 50 | store, 51 | components: { App }, 52 | template: '' 53 | }) 54 | -------------------------------------------------------------------------------- /src/mixins/index.js: -------------------------------------------------------------------------------- 1 | // doc https://cn.vuejs.org/v2/guide/mixins.html 2 | export * from './public' 3 | -------------------------------------------------------------------------------- /src/mixins/public.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: WangQiBiao 3 | * @Date: 2018-01-10 16:44:03 4 | * @Last Modified by: WangQiBiao 5 | * @Last Modified time: 2018-08-17 11:10:56 6 | */ 7 | export const publicJs = { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/router/404.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 消息 3 | export default [ 4 | { 5 | path: '/404', 6 | name: '404', 7 | component: _import('404'), 8 | children: [ 9 | { 10 | path: 'entry', 11 | name: '404Entry', 12 | component: _import('404/entry'), 13 | meta: { 14 | title: '404 page' 15 | } 16 | } 17 | ] 18 | } 19 | ] 20 | -------------------------------------------------------------------------------- /src/router/_import.js: -------------------------------------------------------------------------------- 1 | export default file => () => import('@/views/' + file + '/index.vue') 2 | -------------------------------------------------------------------------------- /src/router/address.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 地址选择 3 | export default [ 4 | { 5 | path: '/address', 6 | component: _import('address'), 7 | children: [ 8 | { 9 | path: 'city-selected', 10 | component: _import('address/city-selected'), 11 | meta: { 12 | title: '城市选择' 13 | } 14 | } 15 | ] 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /src/router/classify.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 分类 3 | export default [ 4 | { 5 | path: '/', 6 | component: _import('layout/index'), 7 | children: [ 8 | { 9 | path: '/classify', 10 | component: _import('classify'), 11 | children: [ 12 | { 13 | path: 'entry', 14 | component: _import('classify/entry'), 15 | meta: { 16 | title: '分类' 17 | } 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /src/router/home.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 首页 3 | export default [ 4 | { 5 | path: '/', 6 | component: _import('layout/index'), 7 | children: [ 8 | { 9 | path: '/home', 10 | component: _import('home'), 11 | children: [ 12 | { 13 | path: 'entry', 14 | component: _import('home/entry'), 15 | meta: { 16 | title: '首页' 17 | } 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import routers from './routers' 4 | 5 | Vue.use(Router) 6 | 7 | const router = new Router({ 8 | routes: routers 9 | }) 10 | 11 | router.beforeEach((to, from, next) => { 12 | if (to.meta.title) { 13 | document.title = to.meta.title 14 | } 15 | next() 16 | }) 17 | 18 | export default router 19 | -------------------------------------------------------------------------------- /src/router/mine.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 我的 3 | export default [ 4 | { 5 | path: '/', 6 | component: _import('layout/index'), 7 | children: [ 8 | { 9 | path: '/mine', 10 | name: 'Mine', 11 | component: _import('mine'), 12 | meta: { 13 | title: '我的' 14 | }, 15 | children: [ 16 | { 17 | path: 'entry', 18 | name: 'mineEntry', 19 | component: _import('mine/entry'), 20 | meta: { 21 | title: '我的' 22 | } 23 | }, 24 | { 25 | path: 'setting', 26 | name: 'mineSetting', 27 | component: _import('mine/setting'), 28 | meta: { title: '个人信息' } 29 | }, 30 | { 31 | path: 'bill', 32 | name: 'mineBill', 33 | component: _import('mine/bill'), 34 | meta: { title: '进出明细' } 35 | } 36 | ] 37 | } 38 | ] 39 | } 40 | ] 41 | -------------------------------------------------------------------------------- /src/router/news.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 消息 3 | export default [ 4 | { 5 | path: '/', 6 | component: _import('layout/index'), 7 | children: [ 8 | { 9 | path: '/news', 10 | component: _import('news'), 11 | meta: { 12 | title: '消息' 13 | }, 14 | children: [ 15 | { 16 | path: 'entry', 17 | component: _import('news/entry') 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /src/router/order.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | export default [ 3 | { 4 | path: '/', 5 | component: _import('layout/index'), 6 | children: [ 7 | { 8 | path: '/order', 9 | name: 'Order', 10 | component: _import('order'), 11 | children: [ 12 | { 13 | path: 'list', 14 | name: 'OrderList', 15 | component: _import('order/list'), 16 | meta: { title: '我的订单' } 17 | }, 18 | { 19 | path: 'detail', 20 | name: 'OrderDetail', 21 | component: _import('order/detail'), 22 | meta: { title: '订单详情' } 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | -------------------------------------------------------------------------------- /src/router/routers.js: -------------------------------------------------------------------------------- 1 | import address from './address' 2 | import classify from './classify' 3 | import home from './home' 4 | import mine from './mine' 5 | import news from './news' 6 | import notfound from './404' 7 | import order from './order' 8 | import service from './service' 9 | 10 | export default [ 11 | { 12 | path: '*', 13 | redirect: '404/entry' 14 | }, 15 | { 16 | path: '/', 17 | redirect: 'home/entry' 18 | } 19 | ].concat(home, classify, news, mine, service, notfound, order, address) 20 | -------------------------------------------------------------------------------- /src/router/service.js: -------------------------------------------------------------------------------- 1 | import _import from './_import' 2 | // 服务 3 | export default [ 4 | { 5 | path: '/service', 6 | component: _import('service'), 7 | meta: { 8 | title: '服务' 9 | }, 10 | children: [ 11 | { 12 | path: 'security', 13 | component: _import('service/security'), 14 | meta: { 15 | title: '保安服务' 16 | } 17 | }, 18 | { 19 | path: 'list-search', 20 | component: _import('service/list-search'), 21 | meta: { 22 | title: '服务查询' 23 | } 24 | }, 25 | { 26 | path: 'details', 27 | component: _import('service/details'), 28 | meta: { 29 | title: '服务详情' 30 | } 31 | } 32 | ] 33 | } 34 | ] 35 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import home from './modules/home' 5 | 6 | Vue.use(Vuex) 7 | 8 | const store = new Vuex.Store({ 9 | modules: { 10 | home 11 | } 12 | }) 13 | 14 | export default store 15 | -------------------------------------------------------------------------------- /src/store/modules/home/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | // 每日推荐列表-列表类型 4 | goodsProducttype: 1 5 | }, 6 | mutations: { 7 | // 列表类型 8 | GOODS_PRODUCTTYPE (state, active) { 9 | state.goodsProducttype = active 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/views/404/entry/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 29 | -------------------------------------------------------------------------------- /src/views/404/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/address/city-selected/index.vue: -------------------------------------------------------------------------------- 1 | 37 | 63 | 64 | -------------------------------------------------------------------------------- /src/views/address/city-selected/spellList.js: -------------------------------------------------------------------------------- 1 | export default { 2 | list: [ 3 | {label: 'A', id: 'A'}, 4 | {label: 'B', id: 'B'}, 5 | {label: 'C', id: 'C'}, 6 | {label: 'D', id: 'D'}, 7 | {label: 'E', id: 'E'}, 8 | {label: 'F', id: 'F'}, 9 | {label: 'G', id: 'G'}, 10 | {label: 'H', id: 'H'}, 11 | {label: 'I', id: 'I'}, 12 | {label: 'J', id: 'J'}, 13 | {label: 'K', id: 'K'}, 14 | {label: 'L', id: 'L'}, 15 | {label: 'M', id: 'M'}, 16 | {label: 'N', id: 'N'}, 17 | {label: 'O', id: 'O'}, 18 | {label: 'P', id: 'P'}, 19 | {label: 'Q', id: 'Q'}, 20 | {label: 'R', id: 'R'}, 21 | {label: 'S', id: 'S'}, 22 | {label: 'T', id: 'T'}, 23 | {label: 'U', id: 'U'}, 24 | {label: 'V', id: 'V'}, 25 | {label: 'W', id: 'W'}, 26 | {label: 'X', id: 'X'}, 27 | {label: 'Y', id: 'Y'}, 28 | {label: 'Z', id: 'Z'} 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/views/address/city-selected/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | .citySelected { 3 | color: #999faa; 4 | .searchWrapper { 5 | padding: 0.213333rem 0.426667rem; 6 | position: fixed; 7 | top: 0; 8 | right: 0; 9 | left: 0; 10 | z-index: 999; 11 | background: rgba(0, 0, 0, 0); 12 | .van-search { 13 | /deep/ .van-cell { 14 | border-radius: 0.213333rem; 15 | height: 0.8rem; 16 | } 17 | } 18 | } 19 | .currentWrapper { 20 | margin-top: 1.333333rem /* 50/37.5 */; 21 | /deep/ .van-cell { 22 | background: #f1f1f1; 23 | color: #999faa; 24 | font-size: 0.373333rem; 25 | padding-bottom: 0; 26 | } 27 | .desc { 28 | color: #fc8a04; 29 | font-size: 0.426667rem; 30 | } 31 | } 32 | .boxWrapper{ 33 | color: #999faa; 34 | padding: 0 .426667rem /* 16/37.5 */; 35 | margin-top: .426667rem /* 16/37.5 */; 36 | .title{ 37 | font-size: .32rem /* 12/37.5 */; 38 | margin-bottom: .32rem /* 12/37.5 */; 39 | } 40 | .lists{ 41 | @include clearfix; 42 | &-item{ 43 | height: 1.066667rem /* 40/37.5 */; 44 | line-height: 1.066667rem /* 40/37.5 */; 45 | padding: 0 .64rem /* 24/37.5 */; 46 | margin-right: .213333rem /* 8/37.5 */; 47 | margin-bottom: .213333rem /* 8/37.5 */; 48 | background: #fff; 49 | color: #333b46; 50 | font-size: .32rem /* 12/37.5 */; 51 | float: left; 52 | } 53 | } 54 | } 55 | .spellSearchWrapper{ 56 | position: fixed; 57 | right: 0; 58 | bottom: 0; 59 | .spell{ 60 | &-item{ 61 | font-size: .266667rem /* 10/37.5 */; 62 | line-height: .32rem /* 12/37.5 */; 63 | padding-bottom: .213333rem /* 8/37.5 */; 64 | color: #333b46; 65 | } 66 | } 67 | } 68 | .searchListWrapper{ 69 | padding: 0 .426667rem /* 16/37.5 */; 70 | .item{ 71 | padding: .426667rem /* 16/37.5 */ 0; 72 | border-bottom: 1px solid #ddd; 73 | font-size: .373333rem /* 14/37.5 */; 74 | color: #333b46; 75 | &:last-child{ 76 | border-bottom: 0; 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/views/address/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/classify/entry/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 29 | 49 | 50 | -------------------------------------------------------------------------------- /src/views/classify/entry/lists/datas.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | title: '热门推荐', 4 | lists: [ 5 | { 6 | path: '/service/security', 7 | id: '1', 8 | image: '//img11.360buyimg.com/focus/s140x140_jfs/t21388/146/237407622/26923/221da1b3/5b054fedN2ba90518.jpg', 9 | name: '电子产品' 10 | }, 11 | { 12 | path: '/service/security', 13 | id: '2', 14 | image: '//img13.360buyimg.com/focus/s140x140_jfs/t13069/193/944900508/2525/d7c9efc/5a17f21dN905aaf4c.jpg', 15 | name: '家电' 16 | }, 17 | { 18 | path: '/service/security', 19 | id: '3', 20 | image: '//img14.360buyimg.com/focus/s140x140_jfs/t13879/252/1741535676/2857/17a878cc/5a27dd43N3f71897a.jpg', 21 | name: '生计情趣' 22 | }, 23 | { 24 | path: '/service/security', 25 | id: '4', 26 | image: '//img30.360buyimg.com/focus/s140x140_jfs/t19531/110/2538137867/14848/c3ec84ac/5afd3cc5N8aa4b7c8.jpg', 27 | name: '美妆护肤' 28 | }, 29 | { 30 | path: '/service/security', 31 | id: '5', 32 | image: '//img11.360buyimg.com/focus/s140x140_jfs/t21343/109/200166835/32189/655b48ef/5b03c73fN69e0c2b7.jpg', 33 | name: '个人护理' 34 | }, 35 | { 36 | path: '/service/security', 37 | id: '6', 38 | image: '//img20.360buyimg.com/focus/s140x140_jfs/t12508/203/1731926315/5258/efc05e60/5a28b101Ne8ebee02.jpg', 39 | name: '汽车用品' 40 | } 41 | ] 42 | }, 43 | { 44 | title: '热门推荐', 45 | lists: [ 46 | { 47 | path: '/service/security', 48 | id: '1', 49 | image: '//img11.360buyimg.com/focus/s140x140_jfs/t21388/146/237407622/26923/221da1b3/5b054fedN2ba90518.jpg', 50 | name: '电子产品' 51 | }, 52 | { 53 | path: '/service/security', 54 | id: '2', 55 | image: '//img13.360buyimg.com/focus/s140x140_jfs/t13069/193/944900508/2525/d7c9efc/5a17f21dN905aaf4c.jpg', 56 | name: '家电' 57 | }, 58 | { 59 | path: '/service/security', 60 | id: '3', 61 | image: '//img14.360buyimg.com/focus/s140x140_jfs/t13879/252/1741535676/2857/17a878cc/5a27dd43N3f71897a.jpg', 62 | name: '生计情趣' 63 | }, 64 | { 65 | path: '/service/security', 66 | id: '4', 67 | image: '//img30.360buyimg.com/focus/s140x140_jfs/t19531/110/2538137867/14848/c3ec84ac/5afd3cc5N8aa4b7c8.jpg', 68 | name: '美妆护肤' 69 | }, 70 | { 71 | path: '/service/security', 72 | id: '5', 73 | image: '//img11.360buyimg.com/focus/s140x140_jfs/t21343/109/200166835/32189/655b48ef/5b03c73fN69e0c2b7.jpg', 74 | name: '个人护理' 75 | }, 76 | { 77 | path: '/service/security', 78 | id: '6', 79 | image: '//img20.360buyimg.com/focus/s140x140_jfs/t12508/203/1731926315/5258/efc05e60/5a28b101Ne8ebee02.jpg', 80 | name: '汽车用品' 81 | } 82 | ] 83 | } 84 | ] 85 | -------------------------------------------------------------------------------- /src/views/classify/entry/lists/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/views/classify/entry/lists/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/mixin.scss'; 3 | .lists{ 4 | font-size: half(24px); 5 | .item{ 6 | padding: 0 half(28px); 7 | .title{ 8 | font-size: half(28px); 9 | line-height: half(28px); 10 | color: #333b46; 11 | margin: half(28px) 0; 12 | } 13 | .body{ 14 | background: #fff; 15 | .nav{ 16 | @include clearfix; 17 | background: #fff; 18 | padding: half(48px) 0 half(32px); 19 | &-item{ 20 | float: left; 21 | width: 20%; 22 | margin-bottom: .426667rem /* 16/37.5 */; 23 | text-align: center; 24 | .icon{ 25 | height: half(88px); 26 | width: half(88px); 27 | display: block; 28 | margin: auto; 29 | } 30 | .label{ 31 | @include omit; 32 | margin-top: half(16px); 33 | font-size: half(20px); 34 | color: #333b46; 35 | line-height: half(18px); 36 | line-height: half(32px); 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/views/classify/entry/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/mixin.scss'; 3 | .entry { 4 | .searchWrapper { 5 | background: #fff; 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | height: half(80px); 11 | padding: 0 half(16px); 12 | z-index: 999; 13 | display: flex; 14 | @include clearfix; 15 | .selectbox{ 16 | height: 100%; 17 | line-height: half(80px); 18 | color: #333b46; 19 | margin-right: 0.42667rem; 20 | .label{ 21 | max-width: half(180px); 22 | margin-right: half(10px); 23 | @include omit; 24 | font-size: half(26px); 25 | } 26 | } 27 | .inputbox{ 28 | flex: 1; 29 | .van-search { 30 | width: 100%; 31 | } 32 | } 33 | } 34 | .subnavWrapper{ 35 | margin-top: half(88px); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/views/classify/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/components/menu/index.vue: -------------------------------------------------------------------------------- 1 | 25 | 34 | 35 | -------------------------------------------------------------------------------- /src/views/components/menu/readme.md: -------------------------------------------------------------------------------- 1 | # 菜单 2 | -------------------------------------------------------------------------------- /src/views/components/menu/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | @import '~@/assets/css/function.scss'; 3 | .menu { 4 | position: fixed; 5 | right: 0; 6 | bottom: 0; 7 | left: 0; 8 | background: #fff; 9 | border-top: half(1px) solid #ddd; 10 | .list { 11 | display: flex; 12 | padding: half(16px) 0; 13 | &-item { 14 | text-align: center; 15 | flex: 1; 16 | .icon { 17 | width: half(42px); 18 | height: half(42px); 19 | font-size: half(42px); 20 | display: block; 21 | margin: auto; 22 | color: #999faa; 23 | } 24 | .label { 25 | margin-top: half(10px); 26 | color: #626b77; 27 | font-size: half(20px); 28 | } 29 | .router-link-exact-active, 30 | .router-link-active { 31 | .icon { 32 | color: #45adff; 33 | } 34 | .label { 35 | color: #45adff; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/views/components/order-list-item/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 33 | 34 | -------------------------------------------------------------------------------- /src/views/components/order-list-item/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | @import '~@/assets/css/function.scss'; 3 | .lists { 4 | &-item { 5 | padding: half(16px) half(32px) half(30px); 6 | background: #fff; 7 | overflow: hidden; 8 | position: relative; 9 | border-bottom: half(1px) solid #ddd; 10 | &:last-child { 11 | border: 0; 12 | } 13 | .imgs { 14 | float: left; 15 | width: half(170px); 16 | height: half(170px); 17 | background: #ccc; 18 | img{ 19 | height: 100%; 20 | width: 100%; 21 | } 22 | } 23 | .info { 24 | margin: half(8px) half(8px) half(8px) half(186px); 25 | .label { 26 | font-size: half(28px); 27 | margin-bottom: half(32px); 28 | color: #333b46; 29 | height: half(30px); 30 | line-height: half(30px); 31 | @include omit; 32 | width: half(474px); 33 | } 34 | .desc { 35 | color: #bbc0cb; 36 | font-size: half(24px); 37 | @include omit; 38 | width: half(300px); 39 | line-height: half(26px); 40 | margin-bottom: half(8px); 41 | } 42 | .price { 43 | color: #fc8a04; 44 | position: absolute; 45 | right: half(32px); 46 | bottom: half(32px); 47 | font-size: half(20px); 48 | .total { 49 | font-size: half(40px); 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/views/components/subnav/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 72 | 73 | -------------------------------------------------------------------------------- /src/views/components/subnav/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | @import '~@/assets/css/function.scss'; 3 | .subnav{ 4 | margin-bottom: half(16px); 5 | .nav{ 6 | @include clearfix; 7 | background: #fff; 8 | padding: half(48px) 0 half(32px); 9 | &-item{ 10 | float: left; 11 | width: 25%; 12 | margin-bottom: 16px; 13 | text-align: center; 14 | .icon{ 15 | height: half(88px); 16 | width: half(88px); 17 | border-radius: 50%; 18 | display: block; 19 | margin: auto; 20 | } 21 | .label{ 22 | margin-top: half(16px); 23 | font-size: half(22px); 24 | color: #333b46; 25 | line-height: half(18px); 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/views/home/entry/banner/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/views/home/entry/banner/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | .banner { 3 | height: half(280px); 4 | .van-swipe{ 5 | height: 100%; 6 | .img{ 7 | height: 100%; 8 | width: 100%; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/views/home/entry/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 26 | 49 | 50 | -------------------------------------------------------------------------------- /src/views/home/entry/readme.md: -------------------------------------------------------------------------------- 1 | # 首页入口 2 | -------------------------------------------------------------------------------- /src/views/home/entry/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/mixin.scss'; 3 | .entry { 4 | .searchWrapper { 5 | background: rgba(7, 139, 243, .2); 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | height: half(80px); 11 | padding: 0 half(16px); 12 | z-index: 999; 13 | display: flex; 14 | @include clearfix; 15 | .selectbox{ 16 | margin-right: half(32px); 17 | position: relative; 18 | color: #fff; 19 | height: 100%; 20 | line-height: half(80px); 21 | .label{ 22 | max-width: half(180px); 23 | margin-right: half(10px); 24 | @include omit; 25 | font-size: half(26px); 26 | float: left; 27 | } 28 | } 29 | .inputbox{ 30 | flex: 1; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/views/home/entry/today-order/datas.js: -------------------------------------------------------------------------------- 1 | export default { 2 | list: [ 3 | { 4 | imgSrc: '//img10.360buyimg.com/n2/s240x240_jfs/t17449/81/2704015441/85127/7a5076c9/5b0518e2N3a5169be.jpg!q70.jpg', 5 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 6 | time: '2018-06-45', 7 | duration: '2个小时', 8 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 9 | price: '50', 10 | unit: '起' 11 | }, 12 | { 13 | imgSrc: '//m.360buyimg.com/mobilecms/jfs/t17851/344/2460261989/63175/d5d66db/5af926a5Nb439e68a.jpg', 14 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 15 | time: '2018-06-45', 16 | duration: '2个小时', 17 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 18 | price: '50', 19 | unit: '起' 20 | }, 21 | { 22 | imgSrc: '//img10.360buyimg.com/n2/s370x370_jfs/t9274/77/1388202179/571941/9df335b7/59b89826N5e10831f.jpg!q70.jpg', 23 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 24 | time: '2018-06-45', 25 | duration: '2个小时', 26 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 27 | price: '50', 28 | unit: '起' 29 | }, 30 | { 31 | imgSrc: '//img10.360buyimg.com/n2/s370x474_jfs/t7774/27/1110461404/102947/527d68d9/599a6b06Nb19ed8a0.jpg!cc_370x474!q70.jpg', 32 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 33 | time: '2018-06-45', 34 | duration: '2个小时', 35 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 36 | price: '50', 37 | unit: '起' 38 | }, 39 | { 40 | imgSrc: '//img11.360buyimg.com/mobilecms/s360x464_jfs/t25699/270/1237889096/269141/1dcdc68f/5b8f9fc3N7d2aca0e.jpg!cc_360x464!q70.dpg.webp', 41 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 42 | time: '2018-06-45', 43 | duration: '2个小时', 44 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 45 | price: '50', 46 | unit: '起' 47 | }, 48 | { 49 | imgSrc: '//img14.360buyimg.com/mobilecms/s360x464_jfs/t1/5980/10/1840/243667/5b951730E0daea5a3/5c07717c7c58d87a.jpg!cc_360x464!q70.dpg.webp', 50 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 51 | time: '2018-06-45', 52 | duration: '2个小时', 53 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 54 | price: '50', 55 | unit: '起' 56 | }, 57 | { 58 | imgSrc: '//img11.360buyimg.com/mobilecms/s360x464_jfs/t1/2012/1/1218/373011/5b9369a9E4522a0b0/850b490209f75cc4.jpg!cc_360x464!q70.dpg.webp', 59 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 60 | time: '2018-06-45', 61 | duration: '2个小时', 62 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 63 | price: '50', 64 | unit: '起' 65 | } 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /src/views/home/entry/today-order/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /src/views/home/entry/today-order/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | @import '~@/assets/css/function.scss'; 3 | .todayOrder { 4 | .title { 5 | font-size: half(32px); 6 | color: #333b46; 7 | font-weight: 500; 8 | background: #fff; 9 | padding: half(28px) half(32px); 10 | border-bottom: half(1px) solid #ddd; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/views/home/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /src/views/layout/index/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 17 | 25 | -------------------------------------------------------------------------------- /src/views/mine/bill/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/variable.scss'; 3 | 4 | #mineBill { 5 | background-color: #fff; 6 | li { 7 | display: flex; 8 | justify-content: space-between; 9 | padding: half(27px) half(40px) 0; 10 | .left { 11 | display: flex; 12 | flex-direction: column; 13 | .type { 14 | color: $font-color-black; 15 | font-size: half(32px); 16 | margin-bottom: half(22px); 17 | } 18 | .time { 19 | color: #bfc7cc; 20 | font-size: half(28px); 21 | } 22 | } 23 | .right { 24 | color: $font-color-black; 25 | font-size: half(32px); 26 | &.active { 27 | color: #45adff; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/views/mine/bill/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/views/mine/entry/img/待服务.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/views/mine/entry/img/待服务.png -------------------------------------------------------------------------------- /src/views/mine/entry/img/待评价.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/views/mine/entry/img/待评价.png -------------------------------------------------------------------------------- /src/views/mine/entry/img/我的地址.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/views/mine/entry/img/我的地址.png -------------------------------------------------------------------------------- /src/views/mine/entry/img/我的订单.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/views/mine/entry/img/我的订单.png -------------------------------------------------------------------------------- /src/views/mine/entry/img/我的银行卡.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/src/views/mine/entry/img/我的银行卡.png -------------------------------------------------------------------------------- /src/views/mine/entry/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | 3 | $paddingLeft: half(29px); 4 | #mineEntry { 5 | .avatar-wrapper { 6 | display: flex; 7 | position: relative; 8 | padding-left: $paddingLeft; 9 | padding-top: half(73px); 10 | height: half(330px); 11 | background-image: url(http://placehold.it/750x330); 12 | background-size: cover; 13 | background-position: center; 14 | img { 15 | border: 1px solid #fff; 16 | width: half(184px); 17 | height: half(184px); 18 | border-radius: 50%; 19 | overflow: hidden; 20 | margin-right: half(38px); 21 | } 22 | .user-info { 23 | > span { 24 | font-size: half(32px); 25 | color: #ffffff; 26 | margin-bottom: half(17px); 27 | } 28 | } 29 | .setting { 30 | position: absolute; 31 | top: half(26px); 32 | right: half(35px); 33 | color: #fff; 34 | } 35 | } 36 | .sub-nav { 37 | display: flex; 38 | height: half(200px); 39 | background-color: #fff; 40 | margin-bottom: half(10px); 41 | padding: 0 half(100px); 42 | .sub-nav-item { 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: center; 46 | align-items: center; 47 | flex: 1; 48 | .icon-wrapper { 49 | position: relative; 50 | .info { 51 | width: half(30px); 52 | height: half(30px); 53 | font-size: half(20px); 54 | color: #fff; 55 | background-color: #ff0000; 56 | border-radius: 50%; 57 | text-align: center; 58 | font-style: normal; 59 | position: absolute; 60 | /* prettier-ignore */ 61 | top: -6PX; 62 | /* prettier-ignore */ 63 | right: -5PX; 64 | } 65 | img { 66 | margin-bottom: 5px; 67 | width: half(66px); 68 | } 69 | } 70 | .text { 71 | font-size: half(24px); 72 | } 73 | } 74 | } 75 | .list { 76 | .account-item { 77 | display: flex; 78 | flex-wrap: wrap; 79 | height: half(320px); 80 | > li { 81 | display: flex; 82 | width: 50%; 83 | justify-content: center; 84 | align-items: center; 85 | } 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/views/mine/entry/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/views/mine/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/mine/setting/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/variable.scss'; 3 | 4 | #mineSetting { 5 | padding-top: half(30px); 6 | .van-cell__value { 7 | font-size: half(28px); 8 | color: #bbc0cb; 9 | } 10 | .van-cell__title { 11 | font-size: half(32px); 12 | color: $font-color-black; 13 | } 14 | .top-cell-group { 15 | margin-bottom: half(30px); 16 | .van-cell { 17 | align-items: center; 18 | justify-content: center; 19 | .gender-wrapper { 20 | display: flex; 21 | align-items: center; 22 | justify-content: flex-end; 23 | .van-switch--on { 24 | background-color: #45adff; 25 | } 26 | } 27 | } 28 | img { 29 | border-radius: 50%; 30 | } 31 | } 32 | .help-cell-group { 33 | margin-bottom: half(105px); 34 | } 35 | .sign-out-btn-wrapper { 36 | padding: 0 half(30px); 37 | .van-button { 38 | background-color: #45adff; 39 | border-radius: 8px; 40 | font-size: half(28px); 41 | color: #ffffff; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/views/mine/setting/index.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 43 | 44 | -------------------------------------------------------------------------------- /src/views/news/entry/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/news/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/order/components/list-item/index.vue: -------------------------------------------------------------------------------- 1 | 46 | 136 | -------------------------------------------------------------------------------- /src/views/order/detail/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/variable.scss'; 3 | #orderDetail { 4 | color: $font-color-black; 5 | padding-bottom: half(28px); 6 | .status-bar { 7 | height: half(115px); 8 | background-color: #45adff; 9 | font-size: half(28px); 10 | color: #fff; 11 | display: flex; 12 | align-items: center; 13 | padding-left: half(59px); 14 | .status-icon { 15 | margin-right: half(17px); 16 | } 17 | } 18 | .location { 19 | padding-top: half(26px); 20 | padding-left: half(59px); 21 | font-size: half(26px); 22 | display: flex; 23 | align-items: center; 24 | background-color: #fff; 25 | .van-icon { 26 | color: #fe6262; 27 | margin-right: half(15px); 28 | } 29 | } 30 | .steps { 31 | padding-left: 50px; 32 | margin-bottom: half(19px); 33 | .text, 34 | .time { 35 | color: #bbc0cb; 36 | font-size: half(22px); 37 | &.active { 38 | color: $font-color-black; 39 | font-size: half(24px); 40 | } 41 | } 42 | } 43 | .footer { 44 | margin-top: half(10px); 45 | background-color: #fff; 46 | padding: half(27px) half(28px); 47 | display: flex; 48 | flex-direction: column; 49 | font-size: half(24px); 50 | color: #626b77; 51 | position: relative; 52 | .copy { 53 | width: half(120px); 54 | height: half(44px); 55 | line-height: half(44px); 56 | color: #626b77; 57 | position: absolute; 58 | top: half(9px); 59 | right: half(30px); 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/views/order/detail/index.vue: -------------------------------------------------------------------------------- 1 | 46 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /src/views/order/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/order/list/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/function.scss'; 2 | @import '~@/assets/css/variable.scss'; 3 | 4 | #OrderList { 5 | color: $font-color-black; 6 | } 7 | -------------------------------------------------------------------------------- /src/views/order/list/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 19 | 20 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /src/views/release/entry/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/release/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/service/details/evaluate/index.vue: -------------------------------------------------------------------------------- 1 | 47 | 56 | 57 | -------------------------------------------------------------------------------- /src/views/service/details/evaluate/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | .evaluate { 3 | background: #ffff; 4 | margin-bottom: .213333rem /* 8/37.5 */; 5 | .infoWrapper { 6 | font-size: 0.32rem; 7 | padding: 0.426667rem; 8 | border-bottom: .026667rem /* 1/37.5 */ solid #ddd; 9 | .info { 10 | @include clearfix; 11 | .label { 12 | float: left; 13 | font-size: 0.373333rem; 14 | .numm { 15 | color: #bbc0cb; 16 | font-size: 0.32rem; 17 | } 18 | } 19 | .desc { 20 | float: right; 21 | color: #fc8a04; 22 | position: relative; 23 | .name { 24 | padding-right: 0.64rem; 25 | } 26 | .van-icon { 27 | position: absolute; 28 | top: 0.106667rem; 29 | right: 0; 30 | } 31 | } 32 | } 33 | .search { 34 | @include clearfix; 35 | &-item { 36 | padding: .213333rem /* 8/37.5 */ .426667rem /* 16/37.5 */; 37 | font-size: 0.32rem; 38 | color: #626b77; 39 | background: #e3f6ff; 40 | border-radius: 0.666667rem; 41 | float: left; 42 | margin: .213333rem /* 8/37.5 */ .426667rem /* 16/37.5 */ 0 0; 43 | &.is-active{ 44 | background: #64cdff; 45 | color: #fff; 46 | } 47 | } 48 | } 49 | } 50 | .listsWrapper{ 51 | padding: .426667rem /* 16/37.5 */; 52 | font-size: .32rem /* 12/37.5 */; 53 | .lists{ 54 | &-item{ 55 | border-bottom: .026667rem /* 1/37.5 */ solid #ddd; 56 | padding: .213333rem /* 8/37.5 */ 0; 57 | &:first-child{ 58 | padding-top: 0; 59 | } 60 | &:last-child{ 61 | border: 0; 62 | } 63 | .label{ 64 | @include clearfix; 65 | margin-bottom: .426667rem /* 16/37.5 */; 66 | margin-top: .213333rem /* 8/37.5 */; 67 | line-height: .266667rem /* 10/37.5 */; 68 | .name{ 69 | float: left; 70 | color: #333b46; 71 | } 72 | .ratelist{ 73 | float: right; 74 | position: relative; 75 | .tip{ 76 | width: .666667rem /* 25/37.5 */; 77 | position: absolute; 78 | top: .053333rem /* 2/37.5 */; 79 | right: 2.666667rem /* 100/37.5 */; 80 | color: #bbc0cb; 81 | font-size: .32rem /* 12/37.5 */; 82 | } 83 | } 84 | } 85 | } 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/views/service/details/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 45 | 46 | -------------------------------------------------------------------------------- /src/views/service/details/service-details/index.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | -------------------------------------------------------------------------------- /src/views/service/details/service-details/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | .dets { 3 | padding: 0.426667rem; 4 | background: #fff; 5 | color: #333b46; 6 | font-size: .32rem /* 12/37.5 */; 7 | >.title { 8 | font-size: 0.373333rem; 9 | padding-bottom: .213333rem /* 8/37.5 */; 10 | line-height: 0.373333rem; 11 | } 12 | .body { 13 | padding-left: .426667rem /* 16/37.5 */; 14 | >.desc{ 15 | padding-bottom: .106667rem /* 4/37.5 */; 16 | } 17 | .imgContent{ 18 | padding: 0 .213333rem /* 8/37.5 */; 19 | .imgItem{ 20 | .title{ 21 | border-bottom: .026667rem /* 1/37.5 */ solid #ddd; 22 | padding: .106667rem /* 4/37.5 */ 0; 23 | @include clearfix; 24 | .label{ 25 | float: left; 26 | } 27 | .desc{ 28 | float: right; 29 | } 30 | } 31 | .imgList{ 32 | padding-top: .213333rem /* 8/37.5 */; 33 | @include clearfix; 34 | margin-left: -.213333rem /* 8/37.5 */; 35 | &-item{ 36 | float: left; 37 | width: 33.333%; 38 | text-align: center; 39 | padding-left: .213333rem /* 8/37.5 */; 40 | padding-bottom: .213333rem /* 8/37.5 */; 41 | box-sizing: border-box; 42 | .img{ 43 | width: 100%; 44 | height: 2.666667rem /* 100/37.5 */; 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/views/service/details/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | .details{ 3 | .imgWrapper{ 4 | height: 6.4rem /* 240/37.5 */; 5 | width: 100%; 6 | position: relative; 7 | .img{ 8 | height: 100%; 9 | width: 100%; 10 | } 11 | .tips{ 12 | background: rgba(0, 0, 0, 0.4); 13 | height: 1.2rem /* 45/37.5 */; 14 | line-height: 1.2rem /* 45/37.5 */; 15 | font-size: .373333rem /* 14/37.5 */; 16 | position: absolute; 17 | left: 0; 18 | right: 0; 19 | bottom: 0; 20 | padding: 0 .426667rem /* 16/37.5 */; 21 | color: #fff; 22 | @include omit; 23 | } 24 | } 25 | .timeWrapper{ 26 | height: 1.2rem /* 45/37.5 */; 27 | line-height: 1.2rem /* 45/37.5 */; 28 | background: #fff; 29 | margin-bottom: .213333rem /* 8/37.5 */; 30 | position: relative; 31 | @include clearfix; 32 | .price{ 33 | float: left; 34 | font-size: .32rem /* 12/37.5 */; 35 | color: #fc8a04; 36 | text-indent: 1em; 37 | line-height: 1.066667rem /* 40/37.5 */; 38 | .num{ 39 | font-size: .64rem /* 24/37.5 */; 40 | } 41 | } 42 | .label{ 43 | width: 1.733333rem /* 65/37.5 */; 44 | float: right; 45 | margin-right: 4.266667rem /* 160/37.5 */; 46 | background: #fc8a04; 47 | color: #fff; 48 | font-size: .32rem /* 12/37.5 */; 49 | text-align: center; 50 | display: block; 51 | } 52 | .times{ 53 | background: #fecc66; 54 | width: 4.266667rem /* 160/37.5 */; 55 | font-size: .32rem /* 12/37.5 */; 56 | color: #fff; 57 | text-align: center; 58 | position: absolute; 59 | top: 0; 60 | right: 0; 61 | } 62 | } 63 | .infoWrapper{ 64 | height: 1.866667rem /* 70/37.5 */; 65 | background: #fff; 66 | padding: 0 .426667rem /* 16/37.5 */; 67 | margin-bottom: .213333rem /* 8/37.5 */; 68 | .img{ 69 | height: 1.6rem /* 60/37.5 */; 70 | width: 1.6rem /* 60/37.5 */; 71 | border-radius: 50%; 72 | float: left; 73 | padding: .133333rem /* 5/37.5 */ 0; 74 | } 75 | .info{ 76 | margin-left: 1.813333rem /* 68/37.5 */; 77 | font-size: .32rem /* 12/37.5 */; 78 | color: #bbc0cb; 79 | padding: .266667rem /* 10/37.5 */ 0; 80 | position: relative; 81 | .label{ 82 | font-size: .373333rem /* 14/37.5 */; 83 | margin-bottom: .106667rem /* 4/37.5 */; 84 | .name{ 85 | color: #333b46; 86 | margin-right: .72rem /* 27/37.5 */; 87 | line-height: .586667rem /* 22/37.5 */; 88 | } 89 | } 90 | .address{ 91 | @include omit; 92 | .fa{ 93 | font-size: .426667rem /* 16/37.5 */; 94 | display: inline-block; 95 | padding-right: .213333rem /* 8/37.5 */; 96 | } 97 | } 98 | .tel{ 99 | position: absolute; 100 | top: .693333rem /* 26/37.5 */; 101 | right: .933333rem /* 35/37.5 */; 102 | } 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/views/service/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/service/list-search/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /src/views/service/list-search/style.scss: -------------------------------------------------------------------------------- 1 | .listSearch{ 2 | .searchBox{ 3 | height: 1.173333rem /* 44/37.5 */; 4 | /deep/ .van-search__content { 5 | margin-left: 0.42667rem; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/views/service/security/datas.js: -------------------------------------------------------------------------------- 1 | export default { 2 | list: [ 3 | { 4 | imgSrc: '//img10.360buyimg.com/n2/s240x240_jfs/t17449/81/2704015441/85127/7a5076c9/5b0518e2N3a5169be.jpg!q70.jpg', 5 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 6 | time: '2018-06-45', 7 | duration: '2个小时', 8 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 9 | price: '50', 10 | unit: '起' 11 | }, 12 | { 13 | imgSrc: '//m.360buyimg.com/mobilecms/jfs/t17851/344/2460261989/63175/d5d66db/5af926a5Nb439e68a.jpg', 14 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 15 | time: '2018-06-45', 16 | duration: '2个小时', 17 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 18 | price: '50', 19 | unit: '起' 20 | }, 21 | { 22 | imgSrc: '//img10.360buyimg.com/n2/s370x370_jfs/t9274/77/1388202179/571941/9df335b7/59b89826N5e10831f.jpg!q70.jpg', 23 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 24 | time: '2018-06-45', 25 | duration: '2个小时', 26 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 27 | price: '50', 28 | unit: '起' 29 | }, 30 | { 31 | imgSrc: '//img10.360buyimg.com/n2/s370x474_jfs/t7774/27/1110461404/102947/527d68d9/599a6b06Nb19ed8a0.jpg!cc_370x474!q70.jpg', 32 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 33 | time: '2018-06-45', 34 | duration: '2个小时', 35 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 36 | price: '50', 37 | unit: '起' 38 | }, 39 | { 40 | imgSrc: '//img11.360buyimg.com/mobilecms/s360x464_jfs/t25699/270/1237889096/269141/1dcdc68f/5b8f9fc3N7d2aca0e.jpg!cc_360x464!q70.dpg.webp', 41 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 42 | time: '2018-06-45', 43 | duration: '2个小时', 44 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 45 | price: '50', 46 | unit: '起' 47 | }, 48 | { 49 | imgSrc: '//img14.360buyimg.com/mobilecms/s360x464_jfs/t1/5980/10/1840/243667/5b951730E0daea5a3/5c07717c7c58d87a.jpg!cc_360x464!q70.dpg.webp', 50 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 51 | time: '2018-06-45', 52 | duration: '2个小时', 53 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 54 | price: '50', 55 | unit: '起' 56 | }, 57 | { 58 | imgSrc: '//img11.360buyimg.com/mobilecms/s360x464_jfs/t1/2012/1/1218/373011/5b9369a9E4522a0b0/850b490209f75cc4.jpg!cc_360x464!q70.dpg.webp', 59 | name: '发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄发大水佛啊哈搜弄', 60 | time: '2018-06-45', 61 | duration: '2个小时', 62 | address: '七星广场七星广场七星广场七星广场七星广场七星广场', 63 | price: '50', 64 | unit: '起' 65 | } 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /src/views/service/security/index.vue: -------------------------------------------------------------------------------- 1 | 39 | 79 | 80 | -------------------------------------------------------------------------------- /src/views/service/security/readme.md: -------------------------------------------------------------------------------- 1 | # 保安服务 2 | -------------------------------------------------------------------------------- /src/views/service/security/style.scss: -------------------------------------------------------------------------------- 1 | @import '~@/assets/css/mixin.scss'; 2 | @import '~@/assets/css/function.scss'; 3 | .security{ 4 | .van-tabs{ 5 | font-size: half(28px); 6 | /deep/ .van-tab--active{ 7 | color: #fc8a04; 8 | } 9 | /deep/ .van-tabs__line{ 10 | background-color: #fc8a04; 11 | } 12 | } 13 | .sortList{ 14 | margin-bottom: half(16px); 15 | @include clearfix; 16 | height: half(120px); 17 | line-height: half(120px); 18 | &-item{ 19 | background: #fff; 20 | float: left; 21 | width: 25%; 22 | text-align: center; 23 | margin: auto; 24 | position: relative; 25 | color: #999faa; 26 | .name{ 27 | font-size: half(28px); 28 | float: left; 29 | padding-left: 30%; 30 | } 31 | .search{ 32 | position: absolute; 33 | top: half(54px); 34 | left: half(120px); 35 | } 36 | &.is-active{ 37 | color: #fc8a04; 38 | } 39 | } 40 | .price{ 41 | .search{ 42 | top: half(48px); 43 | } 44 | } 45 | } 46 | .fa{ 47 | display: block; 48 | line-height: half(12px); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqb2017/vue-vant-axios/4317b0b6a63481f8024cb10582ef6650de953452/static/.gitkeep -------------------------------------------------------------------------------- /static/config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: WangQiBiao 3 | * @LastEditors: WangQiBiao 4 | * @Description: 5 | * @Date: 2019-03-31 13:41:09 6 | * @LastEditTime: 2019-03-31 13:46:39 7 | */ 8 | /* eslint-disable */ 9 | /** 10 | * 配置信息 11 | * @param {string} baseUrl 接口地址 12 | * @param {string} dataUrl 数据请求地址 13 | * @param {string} downloadUrl 下载地址 14 | * @param {string} uploadUrl 上传地址 15 | * @param {string} fileUrl 文件地址 16 | * @param {string} fileUpClient 文件提交地址 17 | * @param {string} fileImage 文件显示地址 18 | * @param {string} platformFlag 平台标识 19 | */ 20 | var PLATFORM_CONFIG = {}; 21 | //数据有关 22 | PLATFORM_CONFIG.baseUrl = 'http://xxx.xxx.x.xx:xxxx/partner/'; 23 | PLATFORM_CONFIG.dataUrl = PLATFORM_CONFIG.baseUrl + 'data'; 24 | PLATFORM_CONFIG.downloadUrl = PLATFORM_CONFIG.baseUrl + 'downClient'; 25 | PLATFORM_CONFIG.uploadUrl = PLATFORM_CONFIG.baseUrl + 'upClient'; 26 | //文件有关 27 | PLATFORM_CONFIG.fileUrl = 'http://xxx.xxx.x.xx/stif_fs/'; 28 | PLATFORM_CONFIG.fileUpClient = PLATFORM_CONFIG.fileUrl + 'upClient'; 29 | PLATFORM_CONFIG.fileImage = PLATFORM_CONFIG.fileUrl + 'image'; 30 | //平台标识 31 | PLATFORM_CONFIG.platformFlag = 'vue-vant-axios_'; 32 | --------------------------------------------------------------------------------