├── src ├── utils │ ├── vueFilter.js │ ├── pc.js │ ├── hybrid.js │ ├── mobile.js │ ├── flexible.js │ ├── pcrem.js │ └── lib.js ├── assets │ ├── images │ │ ├── 1.jpg │ │ └── 2.jpg │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── demo_fontclass.html │ │ ├── iconfont.css │ │ ├── demo.css │ │ ├── demo_unicode.html │ │ ├── demo_symbol.html │ │ ├── iconfont.svg │ │ └── iconfont.js │ └── styles │ │ ├── mixin.scss │ │ ├── common.scss │ │ └── animate.css ├── views │ ├── pc │ │ ├── About.vue │ │ └── app.vue │ └── mobile │ │ ├── About.vue │ │ └── app.vue ├── store │ └── index.js ├── pages │ ├── pc │ │ ├── pc.js │ │ └── pc.html │ └── mobile │ │ ├── mobile.html │ │ └── mobile.js ├── server │ ├── user.js │ └── request.js ├── router │ ├── pc │ │ └── index.js │ └── mobile │ │ └── index.js └── components │ ├── Navbar │ └── index.vue │ └── Screenfull │ └── index.vue ├── .browserslistrc ├── .env.production ├── .env.uat ├── public ├── favicon.ico └── index.html ├── .editorconfig ├── .env.development ├── .gitignore ├── .eslintrc.js ├── mock ├── user.js ├── table.js ├── index.js └── mock-server.js ├── babel.config.js ├── package.json ├── vue.config.js └── README.md /src/utils/vueFilter.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | VUE_APP_BASE_API = '/api' 2 | 3 | ENV = 'production' 4 | -------------------------------------------------------------------------------- /.env.uat: -------------------------------------------------------------------------------- 1 | VUE_APP_BASE_API = '/api' 2 | NODE_ENV = 'production' 3 | VUE_APP_IS_DEMO = true 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/src/assets/images/1.jpg -------------------------------------------------------------------------------- /src/assets/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/src/assets/images/2.jpg -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/src/assets/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/src/assets/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/crli/vue-cli-multipage/HEAD/src/assets/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/views/pc/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/mobile/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- 1 | VUE_APP_BASE_API = '/api' 2 | ENV = 'development' 3 | 4 | // 通过vue-cli集成的babel-plugin-dynamic-import-node实现开发环境中不使用路由懒加载。 5 | // 由于路由懒加载会导致更新速度变慢。 6 | // 具体设置参照源码：https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js 7 | VUE_CLI_BABEL_TRANSPILE_MODULES = true 8 | -------------------------------------------------------------------------------- /src/utils/pc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 09:51:56 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-08 14:54:16 6 | * @Description: PC端 7 | */ 8 | import '@/assets/styles/common.scss' // global css 9 | import '@/assets/styles/animate.css' // global css 10 | require('@/utils/pcrem.js') 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /src/utils/hybrid.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-05-12 15:01:35 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-05-12 15:01:36 6 | * @Description: file content 7 | */ 8 | var hybrid = { 9 | } 10 | window.Hybrid = hybrid 11 | if (window.Vue) { // 自动绑定 12 | window.Vue.use(hybrid) 13 | } 14 | 15 | export { hybrid } 16 | -------------------------------------------------------------------------------- /src/utils/mobile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-08 13:08:02 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-08 14:39:47 6 | * @Description: 移动端 7 | */ 8 | import FastClick from 'fastclick' 9 | import 'babel-polyfill' 10 | require('@/assets/styles/common.scss') 11 | require('@/assets/fonts/iconfont.css') 12 | require('./flexible.js') 13 | FastClick.attach(document.body) 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /mock/user.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2021-06-21 13:33:28 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:33:08 6 | * @Description: file content 7 | */ 8 | module.exports = [ 9 | // user login 10 | { 11 | url: '/asdfd/a/b/login', 12 | type: 'post', 13 | response: config => { 14 | return { 15 | code: 20000, 16 | data: 111 17 | } 18 | } 19 | } 20 | ] 21 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 10:44:26 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-08 13:07:04 6 | * @Description: file content 7 | */ 8 | module.exports = { 9 | presets: [ 10 | '@vue/cli-plugin-babel/preset' 11 | ], 12 | plugins: [ 13 | ['import', { 14 | libraryName: 'vant', 15 | libraryDirectory: 'es', 16 | style: true 17 | }, 'vant'] 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/pc/pc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 09:13:09 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-08 14:56:36 6 | * @Description: PC例子 7 | */ 8 | import Vue from 'vue' 9 | import router from '@/router/pc' 10 | import Vuex from 'vuex' 11 | import '@/utils/pc' 12 | Vue.use(Vuex) 13 | 14 | const store = new Vuex.Store({ 15 | state: { 16 | xx: false 17 | }, 18 | mutations: { 19 | canToForm (state, flag) { 20 | state.xx = flag 21 | } 22 | } 23 | }) 24 | /* eslint-disable */ 25 | new Vue({ 26 | el: '#app', 27 | router, 28 | store 29 | }) 30 | -------------------------------------------------------------------------------- /src/pages/mobile/mobile.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | mobile 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/pages/pc/pc.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 23 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/server/user.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-02-01 20:52:48 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:34:32 6 | * @Description: file content 7 | */ 8 | import request from './request' 9 | const SUB_xxx_URL = '/asdfd' 10 | export function login (data) { 11 | return request({ 12 | url: `${SUB_xxx_URL}/a/b/login`, 13 | method: 'post', 14 | data 15 | }) 16 | } 17 | export function xxxxxx(data, { pageNum, pageSize }) { 18 | return request({ 19 | url: `${SUB_xxx_URL}a/b/xxxxxx`, 20 | method: 'post', 21 | data: { 22 | entity: data, 23 | pageNum, 24 | pageSize 25 | } 26 | }) 27 | } 28 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/pages/mobile/mobile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 09:13:09 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:08:49 6 | * @Description: 移动例子 7 | */ 8 | import Vue from 'vue' 9 | import router from '@/router/mobile' 10 | import Vuex from 'vuex' 11 | import '@/utils/mobile' 12 | if (process.env.ENV !== 'production') { 13 | const { mockXHR } = require('../../../mock') 14 | mockXHR() 15 | } 16 | Vue.use(Vuex) 17 | 18 | const store = new Vuex.Store({ 19 | state: { 20 | xx: false 21 | }, 22 | mutations: { 23 | canToForm (state, flag) { 24 | state.xx = flag 25 | } 26 | } 27 | }) 28 | /* eslint-disable */ 29 | new Vue({ 30 | el: '#app', 31 | router, 32 | store 33 | }) 34 | -------------------------------------------------------------------------------- /mock/table.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2021-06-21 13:33:28 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:17:26 6 | * @Description: file content 7 | */ 8 | const Mock = require('mockjs') 9 | 10 | const data = Mock.mock({ 11 | 'items|30': [{ 12 | id: '@id', 13 | title: '@sentence(10, 20)', 14 | 'status|1': ['published', 'draft', 'deleted'], 15 | author: 'name', 16 | display_time: '@datetime', 17 | pageviews: '@integer(300, 5000)' 18 | }] 19 | }) 20 | 21 | module.exports = [ 22 | { 23 | url: '/list', 24 | type: 'get', 25 | response: config => { 26 | const items = data.items 27 | return { 28 | code: 20000, 29 | data: { 30 | total: items.length, 31 | items: items 32 | } 33 | } 34 | } 35 | } 36 | ] 37 | -------------------------------------------------------------------------------- /src/router/pc/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 09:04:26 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-08 15:37:40 6 | * @Description: file content 7 | */ 8 | import Vue from 'vue' 9 | import VueRouter from 'vue-router' 10 | import app from '@/views/pc/app.vue' 11 | 12 | Vue.use(VueRouter) 13 | 14 | const routes = [ 15 | { 16 | path: '/', 17 | name: 'app', 18 | component: app 19 | }, 20 | { 21 | path: '/about', 22 | name: 'About', 23 | // route level code-splitting 24 | // this generates a separate chunk (about.[hash].js) for this route 25 | // which is lazy-loaded when the route is visited. 26 | component: () => import(/* webpackChunkName: "about" */ '@/views/pc/About.vue') 27 | } 28 | ] 29 | 30 | const router = new VueRouter({ 31 | mode: 'hash', 32 | base: process.env.BASE_URL, 33 | routes 34 | }) 35 | 36 | export default router 37 | -------------------------------------------------------------------------------- /src/router/mobile/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-02 09:04:26 4 | * @LastEditors: crli 5 | * @LastEditTime: 2020-07-02 10:22:55 6 | * @Description: file content 7 | */ 8 | import Vue from 'vue' 9 | import VueRouter from 'vue-router' 10 | import app from '@/views/mobile/app.vue' 11 | 12 | Vue.use(VueRouter) 13 | 14 | const routes = [ 15 | { 16 | path: '/', 17 | name: 'app', 18 | component: app 19 | }, 20 | { 21 | path: '/about', 22 | name: 'About', 23 | // route level code-splitting 24 | // this generates a separate chunk (about.[hash].js) for this route 25 | // which is lazy-loaded when the route is visited. 26 | component: () => import(/* webpackChunkName: "about" */ '@/views/mobile/About.vue') 27 | } 28 | ] 29 | 30 | const router = new VueRouter({ 31 | mode: 'hash', 32 | base: process.env.BASE_URL, 33 | routes 34 | }) 35 | 36 | export default router 37 | -------------------------------------------------------------------------------- /src/assets/styles/mixin.scss: -------------------------------------------------------------------------------- 1 | $ic: #ee8100; 2 | 3 | //定位上下左右居中 4 | @mixin center { 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | } 10 | 11 | //定位上下居中 12 | @mixin ct { 13 | position: absolute; 14 | top: 50%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | //定位左右居中 19 | @mixin cl { 20 | position: absolute; 21 | left: 50%; 22 | transform: translateX(-50%); 23 | } 24 | 25 | //宽高 26 | @mixin wh($width, $height){ 27 | width: $width; 28 | height: $height; 29 | } 30 | 31 | 32 | //@mixin font-dpr($font-size){ 33 | // font-size: $font-size; 34 | // 35 | // [data-dpr="2"] & { 36 | // font-size: $font-size * 2; 37 | // } 38 | // 39 | // [data-dpr="3"] & { 40 | // font-size: $font-size * 3; 41 | // } 42 | //} 43 | @mixin ellipsis($num){ 44 | overflow: hidden; 45 | word-wrap: break-word; 46 | white-space: normal; 47 | word-break: break-all; 48 | display: -webkit-box; 49 | -webkit-box-orient: vertical; 50 | -webkit-line-clamp: $num; 51 | } 52 | 53 | -------------------------------------------------------------------------------- /src/components/Navbar/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | 14 | 38 | 55 | -------------------------------------------------------------------------------- /src/components/Screenfull/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | 14 | 57 | 58 | 68 | -------------------------------------------------------------------------------- /src/views/mobile/app.vue: -------------------------------------------------------------------------------- 1 | 8 | 23 | 24 | 56 | 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-multipage", 3 | "version": "2.0.0", 4 | "description": "VUE多页面脚手架2.0版本", 5 | "author": "crli <695922129@qq.com>", 6 | "private": false, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint", 11 | "build:uat": "vue-cli-service build --mode uat" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.19.2", 15 | "core-js": "^3.6.5", 16 | "postcss-plugin-px2rem": "^0.8.1", 17 | "screenfull": "^5.0.2", 18 | "vant": "^2.9.0", 19 | "vue": "^2.6.11", 20 | "vue-router": "^3.2.0", 21 | "vuex": "^3.4.0" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "~4.4.0", 25 | "@vue/cli-plugin-eslint": "~4.4.0", 26 | "@vue/cli-plugin-router": "~4.4.0", 27 | "@vue/cli-plugin-vuex": "~4.4.0", 28 | "@vue/cli-service": "~4.4.0", 29 | "@vue/eslint-config-standard": "^5.1.2", 30 | "babel-eslint": "^10.1.0", 31 | "babel-plugin-import": "^1.13.0", 32 | "babel-polyfill": "^6.26.0", 33 | "crliutils": "^0.0.6", 34 | "eslint": "^6.7.2", 35 | "eslint-plugin-import": "^2.20.2", 36 | "eslint-plugin-node": "^11.1.0", 37 | "eslint-plugin-promise": "^4.2.1", 38 | "eslint-plugin-standard": "^4.0.0", 39 | "eslint-plugin-vue": "^6.2.2", 40 | "fastclick": "^1.0.6", 41 | "lint-staged": "^9.5.0", 42 | "mockjs": "^1.1.0", 43 | "node-sass": "^4.12.0", 44 | "sass-loader": "^8.0.2", 45 | "vue-template-compiler": "^2.6.11" 46 | }, 47 | "gitHooks": { 48 | "pre-commit": "lint-staged" 49 | }, 50 | "lint-staged": { 51 | "*.{js,jsx,vue}": [ 52 | "vue-cli-service lint", 53 | "git add" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/assets/styles/common.scss: -------------------------------------------------------------------------------- 1 | body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | font-style: normal; 6 | text-decoration: none; 7 | border: none; 8 | box-sizing: border-box; 9 | font-family: "Microsoft Yahei",sans-serif; 10 | -webkit-tap-highlight-color:transparent; 11 | -webkit-font-smoothing: antialiased; 12 | 13 | &:focus { 14 | outline: none; 15 | } 16 | } 17 | 18 | /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 19 | ::-webkit-scrollbar 20 | { 21 | width: 0px; 22 | height: 0px; 23 | background-color: #eee; 24 | } 25 | -webkit-overflow-scrolling:touch{ 26 | overflow:scroll; 27 | } 28 | /*定义滚动条轨道 内阴影+圆角*/ 29 | ::-webkit-scrollbar-track 30 | { 31 | -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); 32 | border-radius: 10px; 33 | background-color: #eee; 34 | } 35 | 36 | /*定义滑块 内阴影+圆角*/ 37 | ::-webkit-scrollbar-thumb 38 | { 39 | border-radius: 10px; 40 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 41 | background-color: #555; 42 | } 43 | 44 | input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] { 45 | -webkit-appearance: none; 46 | } 47 | 48 | textarea { -webkit-appearance: none;} 49 | 50 | html,body{ 51 | width: 100%; 52 | height: 100%; 53 | overflow: hidden; 54 | } 55 | #app{ 56 | width: 100%; 57 | height: 100%; 58 | } 59 | .clear{ 60 | zoom:1; 61 | } 62 | .clear:before, .clear:after { 63 | display:table; 64 | content: ""; 65 | } 66 | 67 | .clear:after { 68 | clear: both; 69 | } 70 | 71 | .ellipsis{ 72 | overflow: hidden; 73 | word-wrap: break-word; 74 | white-space: normal; 75 | word-break: break-all; 76 | display: -webkit-box; 77 | -webkit-box-orient: vertical; 78 | -webkit-line-clamp: 1; 79 | } 80 | 81 | a{ 82 | text-decoration: none; 83 | } 84 | 85 | -------------------------------------------------------------------------------- /mock/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2021-06-21 13:33:28 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 14:09:20 6 | * @Description: file content 7 | */ 8 | const Mock = require('mockjs') 9 | const user = require('./user') 10 | const table = require('./table') 11 | 12 | const mocks = [ 13 | ...user, 14 | ...table 15 | ] 16 | function param2Obj(url) { 17 | const search = url.split('?')[1] 18 | if (!search) { 19 | return {} 20 | } 21 | return JSON.parse( 22 | '{"' + 23 | decodeURIComponent(search) 24 | .replace(/"/g, '\\"') 25 | .replace(/&/g, '","') 26 | .replace(/=/g, '":"') 27 | .replace(/\+/g, ' ') + 28 | '"}' 29 | ) 30 | } 31 | // for front mock 32 | // please use it cautiously, it will redefine XMLHttpRequest, 33 | // which will cause many of your third-party libraries to be invalidated(like progress event). 34 | function mockXHR() { 35 | // mock patch 36 | // https://github.com/nuysoft/Mock/issues/300 37 | Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send 38 | Mock.XHR.prototype.send = function() { 39 | if (this.custom.xhr) { 40 | this.custom.xhr.withCredentials = this.withCredentials || false 41 | 42 | if (this.responseType) { 43 | this.custom.xhr.responseType = this.responseType 44 | } 45 | } 46 | this.proxy_send(...arguments) 47 | } 48 | 49 | function XHR2ExpressReqWrap(respond) { 50 | return function(options) { 51 | let result = null 52 | if (respond instanceof Function) { 53 | const { body, type, url } = options 54 | // https://expressjs.com/en/4x/api.html#req 55 | result = respond({ 56 | method: type, 57 | body: JSON.parse(body), 58 | query: param2Obj(url) 59 | }) 60 | } else { 61 | result = respond 62 | } 63 | return Mock.mock(result) 64 | } 65 | } 66 | 67 | for (const i of mocks) { 68 | Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) 69 | } 70 | } 71 | 72 | module.exports = { 73 | mocks, 74 | mockXHR 75 | } 76 | 77 | -------------------------------------------------------------------------------- /src/server/request.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-02-04 16:00:11 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:35:00 6 | * @Description: file content 7 | */ 8 | import axios from 'axios' 9 | // import qs from 'qs' 10 | import { Toast } from 'vant' 11 | import Vue from 'vue' 12 | Vue.prototype.$ajax = axios 13 | 14 | const service = axios.create({ 15 | baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url 16 | withCredentials: true, // 跨域请求时发送 cookies 17 | timeout: 1000 * 10 // request timeout 18 | }) 19 | // axios.defaults.timeout = 10000 20 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' 21 | // axios.defaults.withCredentials = true 22 | service.interceptors.request.use((config) => { 23 | // if (config.method === 'post') { 24 | // config.data = qs.stringify(config.data) 25 | // } 26 | return config 27 | }, (error) => { 28 | Toast({ 29 | message: '加载超时', 30 | position: 'middle', 31 | duration: 3000 32 | }) 33 | return Promise.reject(error) 34 | }) 35 | 36 | service.interceptors.response.use((res) => { 37 | if (process.env.VUE_APP_IS_DEMO) { 38 | const { 39 | config, 40 | data 41 | } = res 42 | console.group('%c网络响应' + config.url, 'color:orange') 43 | console.info(`url: %c${config.url}`, 'color:green') 44 | console.info(`type: %c${config.method}`, 'color:green') 45 | console.info(`data: %c${config.data}`, 'color:green') 46 | console.info(`params: %c${JSON.stringify(config.params)}`, 'color:green') 47 | console.info(`result: %c${JSON.stringify(data)}`, 'color:#1890ff') 48 | console.groupEnd('网络响应' + config.url) 49 | } 50 | return res 51 | }, (error) => { 52 | console.log('好多人在访问呀，请重新试试[timeout]') 53 | if (error) { 54 | let errortime = null 55 | clearTimeout(errortime) 56 | errortime = setTimeout(() => { 57 | Toast({ 58 | message: error.message, 59 | position: 'middle', 60 | duration: 2000 61 | }) 62 | clearTimeout(errortime) 63 | }, 0) 64 | } 65 | return Promise.reject(error) 66 | }) 67 | export default service 68 | -------------------------------------------------------------------------------- /src/views/pc/app.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | 22 | 61 | 92 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: crli 3 | * @Date: 2020-07-01 15:37:55 4 | * @LastEditors: crli 5 | * @LastEditTime: 2021-06-21 15:36:13 6 | * @Description: file content 7 | */ 8 | const glob = require('glob') 9 | 10 | // 配置pages多页面获取当前文件夹下的html和js 11 | function getEntry (globPath) { 12 | const entries = {} 13 | let tmp = [] 14 | const htmls = {} 15 | 16 | // 读取src/pages/**/底下所有的html文件 17 | glob.sync(globPath + 'html').forEach(function (entry) { 18 | tmp = entry.split('/').splice(-3) 19 | htmls[tmp[1]] = entry 20 | }) 21 | 22 | // 读取src/pages/**/底下所有的js文件 23 | glob.sync(globPath + 'js').forEach(function (entry) { 24 | tmp = entry.split('/').splice(-3) 25 | entries[tmp[1]] = { 26 | entry, 27 | template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', // 当前目录没有有html则以共用的public/index.html作为模板 28 | filename: tmp[1] + '.html'// 以文件夹名称.html作为访问地址 29 | } 30 | }) 31 | console.log(entries) 32 | return entries 33 | } 34 | const htmls = getEntry('./src/pages/**/*.') 35 | let defualthtml = '' 36 | Object.keys(htmls).forEach((ele, i) => { 37 | if (i === 0) { 38 | defualthtml = `/${htmls[ele].filename}` 39 | } 40 | }) 41 | console.log(defualthtml) 42 | module.exports = { 43 | pages: htmls, 44 | publicPath: './', // 解决打包之后静态文件路径404的问题 45 | devServer: { 46 | open: true, // npm run serve 自动打开浏览器 47 | index: defualthtml, // 默认启动页面 48 | proxy: { 49 | [process.env.VUE_APP_BASE_API + '/asdfd']: { 50 | target: `http://xxx.xx.xx.xx/api/asdfd`, 51 | changeOrigin: true, 52 | // logLevel: 'debug', 53 | pathRewrite: { 54 | ['^' + process.env.VUE_APP_BASE_API + '/asdfd']: '' 55 | } 56 | } 57 | }, 58 | after: require('./mock/mock-server.js') 59 | }, 60 | lintOnSave: false, 61 | configureWebpack: { 62 | resolve: { 63 | alias: { 64 | // 别名 65 | vue$: 'vue/dist/vue.esm.js' 66 | } 67 | } 68 | }, 69 | css: { 70 | loaderOptions: { 71 | postcss: { 72 | plugins: [ 73 | require('postcss-plugin-px2rem')({ 74 | rootValue: 37.5, // pc端设置192 75 | mediaQuery: false, 76 | minPixelValue: 0, 77 | propBlackList: ['font-size'] // 如果要保持font-size不转换 78 | }) 79 | ] 80 | } 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /mock/mock-server.js: -------------------------------------------------------------------------------- 1 | const chokidar = require('chokidar') 2 | const bodyParser = require('body-parser') 3 | const chalk = require('chalk') 4 | const path = require('path') 5 | const Mock = require('mockjs') 6 | 7 | const mockDir = path.join(process.cwd(), 'mock') 8 | 9 | function registerRoutes(app) { 10 | let mockLastIndex 11 | const { mocks } = require('./index.js') 12 | const mocksForServer = mocks.map(route => { 13 | return responseFake(route.url, route.type, route.response) 14 | }) 15 | for (const mock of mocksForServer) { 16 | app[mock.type](mock.url, mock.response) 17 | mockLastIndex = app._router.stack.length 18 | } 19 | const mockRoutesLength = Object.keys(mocksForServer).length 20 | return { 21 | mockRoutesLength: mockRoutesLength, 22 | mockStartIndex: mockLastIndex - mockRoutesLength 23 | } 24 | } 25 | 26 | function unregisterRoutes() { 27 | Object.keys(require.cache).forEach(i => { 28 | if (i.includes(mockDir)) { 29 | delete require.cache[require.resolve(i)] 30 | } 31 | }) 32 | } 33 | 34 | // for mock server 35 | const responseFake = (url, type, respond) => { 36 | return { 37 | url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), 38 | type: type || 'get', 39 | response(req, res) { 40 | console.log('request invoke:' + req.path) 41 | res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) 42 | } 43 | } 44 | } 45 | 46 | module.exports = app => { 47 | // parse app.body 48 | // https://expressjs.com/en/4x/api.html#req.body 49 | app.use(bodyParser.json()) 50 | app.use(bodyParser.urlencoded({ 51 | extended: true 52 | })) 53 | 54 | const mockRoutes = registerRoutes(app) 55 | var mockRoutesLength = mockRoutes.mockRoutesLength 56 | var mockStartIndex = mockRoutes.mockStartIndex 57 | 58 | // watch files, hot reload mock server 59 | chokidar.watch(mockDir, { 60 | ignored: /mock-server/, 61 | ignoreInitial: true 62 | }).on('all', (event, path) => { 63 | if (event === 'change' || event === 'add') { 64 | try { 65 | // remove mock routes stack 66 | app._router.stack.splice(mockStartIndex, mockRoutesLength) 67 | 68 | // clear routes cache 69 | unregisterRoutes() 70 | 71 | const mockRoutes = registerRoutes(app) 72 | mockRoutesLength = mockRoutes.mockRoutesLength 73 | mockStartIndex = mockRoutes.mockStartIndex 74 | 75 | console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) 76 | } catch (error) { 77 | console.log(chalk.redBright(error)) 78 | } 79 | } 80 | }) 81 | } 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | vue-cli-multipage2.0 2 | 3 | ## 主要功能 4 | 5 | 1. 支持字体图标,css分离打包 6 | 2. 各入口文件分离打包,第三方库模块打包,公共组件分离打包 7 | 3. 支持vue-router路由按需加载 8 | 4. 可自定义页面入口模块名 9 | 5. 整合了UI框架，`vant` 10 | 6. 基于`webpack4` 11 | 7. 热更新 12 | 8. 支持`Sass`css预处理 13 | 9. 全局注册vue全局过滤器的方法 14 | 10. 支持`Mock`数据处理 15 | 16 | ## Project setup 17 | ``` 18 | npm install 19 | ``` 20 | 21 | ### Compiles and hot-reloads for development 22 | ``` 23 | npm run serve 24 | ``` 25 | 26 | ### Compiles and minifies for production 27 | ``` 28 | npm run build 29 | ``` 30 | ### Compiles and minifies for production test 31 | ``` 32 | npm run build:uat 33 | ``` 34 | ### Lints and fixes files 35 | ``` 36 | npm run lint 37 | ``` 38 | 39 | ## 目录结构 40 | ``` 41 | webpack 42 | |---build 43 | |---src 44 | |---assets #资源 45 | |---images #图片 46 | |---styles #css&&scss 47 | |---fonts/ #字体图标 48 | |---components 组件 49 | |---Screenfull.vue 组件 50 | |---page #各个页面入口模块，模块名可以自定义哦！ 51 | |---mobile （移动端示例） 52 | |---mobile.html 53 | |---mobile.js 54 | |---pc 55 | |---pc.html (pc端示例) 56 | |---pc.js 57 | |---router #各个页面路由管理 58 | |---mobile 59 | |---index.js 60 | |---pc 61 | |---index.js 62 | |---server 接口 63 | |---request.js #axios配置，及异常处理 64 | |---user.js #接口模块 65 | |---xx.js #接口模块 66 | |---store 状态管理 67 | |---index.js #可以自由配置发挥 68 | |---utils 插件 69 | |---mobile.js #移动端项目全局样式依赖 70 | |---fleible.js #手淘rem自适应 71 | |---vueFilter.js #注册vue的全局过滤器 72 | |---hybrid.js #与原生联调传参使用 73 | |---pc.js #pc端项目全局样式依赖 74 | |---pcrem.js #pc端rem自适应 75 | |---view #各个页面视图模块 76 | |---mobile （移动端示例） 77 | |---app.vue 78 | |---xx.vue 79 | |---pc (pc端示例) 80 | |---app.vue 81 | |---xx.vue 82 | ...... 83 | 84 | ``` 85 | 86 | 从目录结构上，各种组件、页面模块、资源等都按类新建了文件夹，方便我们储存文件。其实我们所有的文件，最主要都是放在`page`文件夹里，以文件夹名为html的名称。 87 | 88 | 在`page`里二级文件夹，一个文件夹就是一个入口，`js``html` 都统一放在当前文件夹里 89 | 90 | 91 | ## 移动自适应 92 | 93 | `vue.config` 中配置了`postcss-plugin-px2rem` 94 | 95 | 因为vant 默认大小`375`,为了与`fleible.js`兼容 配置 `rootValue: 37.5`以及`propBlackList: ['font-size'] // 保持font-size不转换成rem` 96 | 97 | 此时如果如果页面基准是`750`,者如果PSD图大小`100px`, 字号大小`32`,则代码编写为 `width:50px; font-size:16px` 98 | 99 | pc端如果页面基准是`1920` rootValue设置192 100 | 101 | 编译结果`width` 转为了`rem` , `font-size` 保持`16px`不变 102 | 103 | ## mobile.js&&pc.js库使用 104 | 105 | 我们做多页面开发，那肯定会涉及到全局都能调用的公共库，或者是把别人封装的库也一起打包在全局公共模块里。 106 | 107 | 如果看过源码的童鞋，在`*.js`页面里，都统一import了一个文件 108 | 109 | ``` 110 | import '@/utils/mobile' 111 | 或者 112 | import '@/utils/pc' 113 | ``` 114 | 这就是全局统一公共模块 115 | 116 | ## crliutils库使用 117 | 118 | 前端工具库`crliutils`调用方法 119 | 120 | ``` bash 121 | import crliutils, {setStore} from 'crliutils' 122 | console.log(crliutils) 123 | setStore('name','crli') 124 | ``` 125 | ## 启动 126 | ``` bash 127 | 页面1 http://localhost:8080/mobile.html#/ 128 | 129 | 页面2 http://localhost:8080/pc.html#/ 130 | ``` 131 | ## 注意 132 | 移动端和pc端页面不可同时开发 -------------------------------------------------------------------------------- /src/utils/flexible.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | (function (win, lib) { 3 | var doc = win.document 4 | var docEl = doc.documentElement 5 | var metaEl = doc.querySelector('meta[name="viewport"]') 6 | var flexibleEl = doc.querySelector('meta[name="flexible"]') 7 | var dpr = 0 8 | var scale = 0 9 | var tid 10 | var flexible = lib.flexible || (lib.flexible = {}) 11 | 12 | if (metaEl) { 13 | // console.warn('将根据已有的meta标签来设置缩放比例'); 14 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/) 15 | if (match) { 16 | scale = parseFloat(match[1]) 17 | dpr = parseInt(1 / scale) 18 | } 19 | } else if (flexibleEl) { 20 | var content = flexibleEl.getAttribute('content') 21 | if (content) { 22 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) 23 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) 24 | if (initialDpr) { 25 | dpr = parseFloat(initialDpr[1]) 26 | scale = parseFloat((1 / dpr).toFixed(2)) 27 | } 28 | if (maximumDpr) { 29 | dpr = parseFloat(maximumDpr[1]) 30 | scale = parseFloat((1 / dpr).toFixed(2)) 31 | } 32 | } 33 | } 34 | 35 | if (!dpr && !scale) { 36 | // var isAndroid = win.navigator.appVersion.match(/android/gi) 37 | var isIPhone = win.navigator.appVersion.match(/iphone/gi) 38 | var devicePixelRatio = win.devicePixelRatio 39 | if (isIPhone) { 40 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 41 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 42 | dpr = 3 43 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { 44 | dpr = 2 45 | } else { 46 | dpr = 1 47 | } 48 | } else { 49 | // 其他设备下，仍旧使用1倍的方案 50 | dpr = 1 51 | } 52 | scale = 1 / dpr 53 | } 54 | 55 | docEl.setAttribute('data-dpr', dpr) 56 | if (!metaEl) { 57 | metaEl = doc.createElement('meta') 58 | metaEl.setAttribute('name', 'viewport') 59 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no') 60 | if (docEl.firstElementChild) { 61 | docEl.firstElementChild.appendChild(metaEl) 62 | } else { 63 | var wrap = doc.createElement('div') 64 | wrap.appendChild(metaEl) 65 | doc.write(wrap.innerHTML) 66 | } 67 | } 68 | 69 | function refreshRem () { 70 | var width = docEl.getBoundingClientRect().width 71 | if (width / dpr > 768 ) { 72 | width = 768 * dpr 73 | } 74 | var rem = width / 10 75 | docEl.style.fontSize = rem + 'px' 76 | flexible.rem = win.rem = rem 77 | } 78 | 79 | win.addEventListener('resize', function () { 80 | clearTimeout(tid) 81 | tid = setTimeout(refreshRem, 300) 82 | }, false) 83 | win.addEventListener('pageshow', function (e) { 84 | if (e.persisted) { 85 | clearTimeout(tid) 86 | tid = setTimeout(refreshRem, 300) 87 | } 88 | }, false) 89 | 90 | if (doc.readyState === 'complete') { 91 | doc.body.style.fontSize = 12 * dpr + 'px' 92 | } else { 93 | doc.addEventListener('DOMContentLoaded', function (e) { 94 | doc.body.style.fontSize = 12 * dpr + 'px' 95 | }, false) 96 | } 97 | 98 | refreshRem() 99 | 100 | flexible.dpr = win.dpr = dpr 101 | flexible.refreshRem = refreshRem 102 | flexible.rem2px = function (d) { 103 | var val = parseFloat(d) * this.rem 104 | if (typeof d === 'string' && d.match(/rem$/)) { 105 | val += 'px' 106 | } 107 | return val 108 | } 109 | flexible.px2rem = function (d) { 110 | var val = parseFloat(d) / this.rem 111 | if (typeof d === 'string' && d.match(/px$/)) { 112 | val += 'rem' 113 | } 114 | return val 115 | } 116 | })(window, window['lib'] || (window['lib'] = {})) 117 | 118 | -------------------------------------------------------------------------------- /src/utils/pcrem.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | (function (win, lib) { 3 | var doc = win.document 4 | var docEl = doc.documentElement 5 | var metaEl = doc.querySelector('meta[name="viewport"]') 6 | var flexibleEl = doc.querySelector('meta[name="flexible"]') 7 | var dpr = 0 8 | var scale = 0 9 | var tid 10 | var flexible = lib.flexible || (lib.flexible = {}) 11 | 12 | if (metaEl) { 13 | // console.warn('将根据已有的meta标签来设置缩放比例'); 14 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/) 15 | if (match) { 16 | scale = parseFloat(match[1]) 17 | dpr = parseInt(1 / scale) 18 | } 19 | } else if (flexibleEl) { 20 | var content = flexibleEl.getAttribute('content') 21 | if (content) { 22 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) 23 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) 24 | if (initialDpr) { 25 | dpr = parseFloat(initialDpr[1]) 26 | scale = parseFloat((1 / dpr).toFixed(2)) 27 | } 28 | if (maximumDpr) { 29 | dpr = parseFloat(maximumDpr[1]) 30 | scale = parseFloat((1 / dpr).toFixed(2)) 31 | } 32 | } 33 | } 34 | 35 | if (!dpr && !scale) { 36 | // var isAndroid = win.navigator.appVersion.match(/android/gi) 37 | var isIPhone = win.navigator.appVersion.match(/iphone/gi) 38 | var devicePixelRatio = win.devicePixelRatio 39 | if (isIPhone) { 40 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 41 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 42 | dpr = 3 43 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { 44 | dpr = 2 45 | } else { 46 | dpr = 1 47 | } 48 | } else { 49 | // 其他设备下，仍旧使用1倍的方案 50 | dpr = 1 51 | } 52 | scale = 1 / dpr 53 | } 54 | 55 | docEl.setAttribute('data-dpr', dpr) 56 | if (!metaEl) { 57 | metaEl = doc.createElement('meta') 58 | metaEl.setAttribute('name', 'viewport') 59 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no') 60 | if (docEl.firstElementChild) { 61 | docEl.firstElementChild.appendChild(metaEl) 62 | } else { 63 | var wrap = doc.createElement('div') 64 | wrap.appendChild(metaEl) 65 | doc.write(wrap.innerHTML) 66 | } 67 | } 68 | 69 | function refreshRem () { 70 | var width = docEl.getBoundingClientRect().width 71 | if (width / dpr > 1920 ) { 72 | width = 1920 * dpr 73 | } 74 | var rem = width / 10 75 | docEl.style.fontSize = rem + 'px' 76 | flexible.rem = win.rem = rem 77 | } 78 | 79 | win.addEventListener('resize', function () { 80 | clearTimeout(tid) 81 | tid = setTimeout(refreshRem, 300) 82 | }, false) 83 | win.addEventListener('pageshow', function (e) { 84 | if (e.persisted) { 85 | clearTimeout(tid) 86 | tid = setTimeout(refreshRem, 300) 87 | } 88 | }, false) 89 | 90 | if (doc.readyState === 'complete') { 91 | doc.body.style.fontSize = 12 * dpr + 'px' 92 | } else { 93 | doc.addEventListener('DOMContentLoaded', function (e) { 94 | doc.body.style.fontSize = 12 * dpr + 'px' 95 | }, false) 96 | } 97 | 98 | refreshRem() 99 | 100 | flexible.dpr = win.dpr = dpr 101 | flexible.refreshRem = refreshRem 102 | flexible.rem2px = function (d) { 103 | var val = parseFloat(d) * this.rem 104 | if (typeof d === 'string' && d.match(/rem$/)) { 105 | val += 'px' 106 | } 107 | return val 108 | } 109 | flexible.px2rem = function (d) { 110 | var val = parseFloat(d) / this.rem 111 | if (typeof d === 'string' && d.match(/px$/)) { 112 | val += 'rem' 113 | } 114 | return val 115 | } 116 | })(window, window['lib'] || (window['lib'] = {})) 117 | 118 | -------------------------------------------------------------------------------- /src/utils/lib.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | // import {WechatPlugin} from 'vux' 3 | // Vue.use(WechatPlugin) // 微信 4 | // /** 5 | // * 微信分享 6 | // * @param {微信签名所需对象} sd 7 | // * @param {分享所需字段} sharobj 8 | // * @param {分享所需链接地址} href 9 | // */ 10 | // export const wxInit = (sd, sharobj, href) => { 11 | // const wx = Vue.wechat 12 | // wx.config({ 13 | // debug: true, 14 | // appId: sd.appId, 15 | // timestamp: sd.timestamp, 16 | // nonceStr: sd.nonceStr, 17 | // signature: sd.signature, 18 | // jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] 19 | // }) 20 | // wx.ready(function () { 21 | // wx.onMenuShareTimeline({ 22 | // title: sharobj.share_title, // 分享标题 23 | // desc: sharobj.share_description, // 分享描述 24 | // // link: window.location.origin + '/app/dmstore?store_id=' + _this.storeid, // 分享链接 25 | // link: href, // 分享链接 26 | // imgUrl: sharobj.thumb, // 分享图标 27 | // success: function () { 28 | // // alert("分享到朋友圈成功") 29 | // }, 30 | // cancel: function () { 31 | // // alert("分享失败,您取消了分享!") 32 | // } 33 | // }) 34 | // wx.onMenuShareAppMessage({ 35 | // title: sharobj.share_title, // 分享标题 36 | // desc: sharobj.share_description, // 分享描述 37 | // link: href, // 分享链接 38 | // imgUrl: sharobj.thumb, // 分享图标 39 | // success: function () { 40 | // // alert("成功分享给朋友") 41 | // }, 42 | // cancel: function () { 43 | // // alert("分享失败,您取消了分享!") 44 | // } 45 | // }) 46 | // wx.onMenuShareQQ({ 47 | // title: sharobj.share_title, // 分享标题 48 | // desc: sharobj.share_description, // 分享描述 49 | // link: href, // 分享链接 50 | // imgUrl: sharobj.thumb, // 分享图标 51 | // success: function () {}, 52 | // cancel: function () {} 53 | // }) 54 | // wx.onMenuShareWeibo({ 55 | // title: sharobj.share_title, // 分享标题 56 | // desc: sharobj.share_description, // 分享描述 57 | // link: href, // 分享链接 58 | // imgUrl: sharobj.thumb, // 分享图标 59 | // success: function () { 60 | // // alert("成功分享给朋友") 61 | // }, 62 | // cancel: function () { 63 | // // alert("分享失败,您取消了分享!") 64 | // } 65 | // }) 66 | // wx.onMenuShareQZone({ 67 | // title: sharobj.share_title, // 分享标题 68 | // desc: sharobj.share_description, // 分享描述 69 | // link: href, // 分享链接 70 | // imgUrl: sharobj.thumb, // 分享图标 71 | // success: function () { 72 | // // alert("成功分享给朋友") 73 | // }, 74 | // cancel: function () { 75 | // // alert("分享失败,您取消了分享!") 76 | // } 77 | // }) 78 | // }) 79 | // wx.error(function (res) { 80 | // // alert(JSON.stringify(res)) 81 | // // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看， 82 | // // 对于SPA可以在这里更新签名。 83 | // }) 84 | // } 85 | 86 | // /** 87 | // * 微信支付 88 | // * @param {微信签名所需对象} sd 89 | // * @param {支付所需字段} paysd 90 | // * @param {回调函数} cb 91 | // */ 92 | // export const wxpay = (sd, paysd, cb, cancelCb) => { 93 | // const wx = Vue.wechat 94 | // wx.config({ 95 | // debug: false, 96 | // appId: sd.appId, 97 | // timestamp: sd.timestamp, 98 | // nonceStr: sd.nonceStr, 99 | // signature: sd.signature, 100 | // jsApiList: [ 101 | // 'chooseWXPay' 102 | // ] 103 | // }) 104 | // wx.ready(function () { 105 | // wx.chooseWXPay({ 106 | // timestamp: paysd.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 107 | // nonceStr: paysd.nonceStr, // 支付签名随机串，不长于 32 位 108 | // package: paysd.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） 109 | // signType: paysd.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' 110 | // paySign: paysd.paySign, // 支付签名 111 | // success: function (res) { 112 | // // 支付成功后的回调函数 113 | // cb(res) 114 | // }, 115 | // cancel: function (res) { 116 | // // 取消支付后的回调函数 117 | // cancelCb(res) 118 | // } 119 | // }) 120 | // }) 121 | // wx.error(function (res) { 122 | // // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看 123 | // }) 124 | // } 125 | // /** 126 | // * 图片预览 127 | // * @param {数组中当前图片链接} src 128 | // * @param {图片数组} imgPaths 129 | // */ 130 | // export const wximgview = (src, imgPaths) => { 131 | // const wx = Vue.wechat 132 | // wx.previewImage({ 133 | // current: src, 134 | // urls: imgPaths 135 | // }) 136 | // } 137 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 | 130 | 131 |

font-class引用

132 |
133 | 134 |

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

135 |

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

136 | 142 |

使用步骤如下：

143 |

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

144 | 145 | 146 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
147 |

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

148 | 
<i class="iconfont icon-xxx"></i>
149 |
150 |

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

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

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    公告
    38 |
    &#xe603;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    选择
    44 |
    &#xe64a;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    眼睛
    50 |
    &#xe60e;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    头像
    56 |
    &#xe602;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    三角
    62 |
    &#xe66c;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    星
    68 |
    &#xe65c;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    查找
    74 |
    &#xe61a;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    纸笔
    80 |
    &#xe612;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    选中
    86 |
    &#xe61b;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    选择
    92 |
    &#xe63d;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    流程表单
    98 |
    &#xe733;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    开发工具
    104 |
    &#xe601;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    删除
    110 |
    &#xe628;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    右三角
    116 |
    &#xe648;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    三角
    122 |
    &#xe65a;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    星
    128 |
    &#xe614;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    首页
    134 |
    &#xe6cd;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    加载
    140 |
    &#xe61e;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    头像
    146 |
    &#xe600;
    147 |
    • 148 | 149 |
150 |

unicode引用

151 |
152 | 153 |

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

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

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

161 |
162 |

unicode使用步骤如下：

163 |

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

164 | 
@font-face {
165 |   font-family: 'iconfont';
166 |   src: url('iconfont.eot');
167 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
168 |   url('iconfont.woff') format('woff'),
169 |   url('iconfont.ttf') format('truetype'),
170 |   url('iconfont.svg#iconfont') format('svg');
171 | }
172 |
173 |

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

174 | 
.iconfont{
175 |   font-family:"iconfont" !important;
176 |   font-size:16px;font-style:normal;
177 |   -webkit-font-smoothing: antialiased;
178 |   -webkit-text-stroke-width: 0.2px;
179 |   -moz-osx-font-smoothing: grayscale;
180 | }
181 |
182 |

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

183 | 
<i class="iconfont">&#x33;</i>
184 | 185 |
186 |

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

187 |
188 |
189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    公告
    35 |
    #icon-gonggao
    36 |
    • 37 | 38 |
  • 39 | 42 |
    选择
    43 |
    #icon-xuanze
    44 |
    • 45 | 46 |
  • 47 | 50 |
    眼睛
    51 |
    #icon-faxian-on
    52 |
    • 53 | 54 |
  • 55 | 58 |
    头像
    59 |
    #icon-touxiang-copy
    60 |
    • 61 | 62 |
  • 63 | 66 |
    三角
    67 |
    #icon-sanjiao
    68 |
    • 69 | 70 |
  • 71 | 74 |
    星
    75 |
    #icon-xing
    76 |
    • 77 | 78 |
  • 79 | 82 |
    查找
    83 |
    #icon-chazhao
    84 |
    • 85 | 86 |
  • 87 | 90 |
    纸笔
    91 |
    #icon-zhibi
    92 |
    • 93 | 94 |
  • 95 | 98 |
    选中
    99 |
    #icon-xuanzhong
    100 |
    • 101 | 102 |
  • 103 | 106 |
    选择
    107 |
    #icon-choice
    108 |
    • 109 | 110 |
  • 111 | 114 |
    流程表单
    115 |
    #icon-liuchengbiaodan
    116 |
    • 117 | 118 |
  • 119 | 122 |
    开发工具
    123 |
    #icon-kaifagongju
    124 |
    • 125 | 126 |
  • 127 | 130 |
    删除
    131 |
    #icon-shanchu
    132 |
    • 133 | 134 |
  • 135 | 138 |
    右三角
    139 |
    #icon-yousanjiao
    140 |
    • 141 | 142 |
  • 143 | 146 |
    三角
    147 |
    #icon-tan-right
    148 |
    • 149 | 150 |
  • 151 | 154 |
    星
    155 |
    #icon-xing-
    156 |
    • 157 | 158 |
  • 159 | 162 |
    首页
    163 |
    #icon-shouye
    164 |
    • 165 | 166 |
  • 167 | 170 |
    加载
    171 |
    #icon-jiazai
    172 |
    • 173 | 174 |
  • 175 | 178 |
    头像
    179 |
    #icon-touxiang
    180 |
    • 181 | 182 |
183 | 184 | 185 |

symbol引用

186 |
187 | 188 |

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

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

使用步骤如下：

197 |

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

198 | 
<script src="./iconfont.js"></script>
199 |

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

200 | 
<style type="text/css">
201 | .icon {
202 |    width: 1em; height: 1em;
203 |    vertical-align: -0.15em;
204 |    fill: currentColor;
205 |    overflow: hidden;
206 | }
207 | </style>
208 |

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

209 | 
<svg class="icon" aria-hidden="true">
210 |   <use xlink:href="#icon-xxx"></use>
211 | </svg>
212 |
213 |
214 | 215 | 216 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /src/assets/styles/animate.css: -------------------------------------------------------------------------------- 1 | 2 | @charset "UTF-8"; 3 | /*! 4 | * animate.css - https://animate.style/ 5 | * Version - 4.0.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2020 Animate.css 9 | */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} --------------------------------------------------------------------------------