├── .browserslistrc ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── public ├── css │ ├── animate.min.css │ ├── icon.css │ └── shake.css ├── favicon2.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.vue ├── api │ ├── article.js │ ├── auth.js │ ├── category.js │ └── comment.js ├── assets │ ├── css │ │ ├── _variable.scss │ │ └── emoji.css │ └── img │ │ ├── WechatIMG2.jpeg │ │ ├── article_item_sprite.png │ │ ├── desc.gif │ │ ├── emoji_sprite.png │ │ ├── exit.png │ │ ├── face_logo.png │ │ ├── github.png │ │ ├── heading.jpg │ │ ├── home.png │ │ └── sprite.png ├── components │ ├── commons │ │ ├── button │ │ │ └── BlogButton.vue │ │ ├── checkbox │ │ │ ├── Checkbox.vue │ │ │ └── CheckboxGroup.vue │ │ ├── comment │ │ │ ├── Comment.vue │ │ │ ├── Emoji.vue │ │ │ └── EmojiPanel.vue │ │ ├── dialog │ │ │ └── BlogDialog.vue │ │ ├── divider │ │ │ └── Divider.vue │ │ ├── formItem │ │ │ └── FormItem.vue │ │ ├── input │ │ │ └── BlogInput.vue │ │ ├── message │ │ │ ├── Message.vue │ │ │ └── index.js │ │ ├── pagination │ │ │ └── Pagination.vue │ │ ├── radio │ │ │ ├── Radio.vue │ │ │ └── RadioGroup.vue │ │ ├── tag │ │ │ └── Tag.vue │ │ ├── tagInputer │ │ │ └── TagInputer.vue │ │ └── textUnderline │ │ │ └── TextUnderline.vue │ ├── header │ │ ├── Header.vue │ │ └── children │ │ │ ├── Login.vue │ │ │ └── MenuItem.vue │ └── home │ │ ├── articleItem │ │ ├── ArticleItem.vue │ │ └── SmallArticleItem.vue │ │ └── indexMenu │ │ ├── IndexMenu.vue │ │ └── children │ │ ├── BloggerInfo.vue │ │ ├── MenuItem.vue │ │ ├── ProfileHeading.vue │ │ └── SearchBar.vue ├── directives │ └── vueClickOutSize.js ├── main.js ├── router.js ├── utils │ ├── bus.js │ └── http.js └── views │ ├── ArticleBrowser.vue │ ├── ArticleEdit.vue │ ├── NotFound.vue │ └── navigation │ ├── Layout.vue │ ├── about │ └── About.vue │ ├── comment │ └── Comment.vue │ └── home │ ├── HomeLayout.vue │ ├── Life.vue │ └── Skill.vue └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | package-lock.json 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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 TeanBlog. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # twitter-blog-vue 2 | 3 | 打算模仿twitter的风格在工作之余写一个自己的博客。手写所有用到的组件，后端使用golang（iris+gorm），前端是用vue.js进行开发。欢迎 issue && star~ 4 | 5 | ### 线上地址：http://percywang.top 6 | 7 | ### 模仿页面：https://twitter.com/dariel_noel 8 | 9 | ### 后端: https://github.com/pppercyWang/twitter-blog-api 10 | 11 | **package.json** 12 | ```javascript 13 | "dependencies": { 14 | "axios": "^0.19.0", 15 | "mavon-editor": "^2.7.5", 16 | "vue": "^2.5.17", 17 | "vue-router": "^3.0.7" 18 | }, 19 | ``` 20 | 21 | ``` 22 | 主要功能： 23 | 1.文章浏览 24 | 2.授权github登录 25 | 3.首页动画效果 26 | 4.文章发布 27 | 5.评论功能 28 | 6.文章归档 29 | ``` 30 | 31 | ``` 32 | 运行项目： 33 | 1.npm install 34 | 2.npm run serve 35 | ``` 36 | 37 | 1 38 | 39 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | "plugins": [ 6 | ["import", { 7 | "libraryName": "vant", 8 | "libraryDirectory": "es", 9 | "style": true 10 | }] 11 | ] 12 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitter-blog-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.0", 12 | "mavon-editor": "^2.7.5", 13 | "vue": "^2.5.17", 14 | "vue-router": "^3.0.7" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.9.2", 18 | "@vue/cli-plugin-pwa": "^3.9.0", 19 | "@vue/cli-service": "^3.9.2", 20 | "babel-plugin-import": "^1.12.0", 21 | "compression-webpack-plugin": "^3.0.1", 22 | "image-webpack-loader": "^6.0.0", 23 | "node-sass": "^4.12.0", 24 | "sass-loader": "^7.1.0", 25 | "uglifyjs-webpack-plugin": "^2.2.0", 26 | "vue-template-compiler": "^2.6.10" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/css/animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -https://daneden.github.io/animate.css/ 5 | * Version - 3.7.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2019 Daniel Eden 9 | */ 10 | 11 | @-webkit-keyframes bounce{0%,20%,53%,80%,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);transform:translate3d(0,-30px,0)}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);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,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);transform:translate3d(0,-30px,0)}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);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.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}}.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)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-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)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{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 shake{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)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-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)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-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);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}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);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.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);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}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);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.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);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}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);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.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);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}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);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.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)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.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}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-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}}.animated.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)}}.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)}}.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}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-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}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{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 lightSpeedIn{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)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-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-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-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}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-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)}}.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)}}.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)}}.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}}.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)}}.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)}}.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)}}.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)}}.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}}.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-transform-origin:center bottom;transform-origin:center bottom;-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-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-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);-webkit-transform-origin:left center;transform-origin:left center}}@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);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-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);-webkit-transform-origin:right center;transform-origin:right center}}@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);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-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-transform-origin:center bottom;transform-origin:center bottom;-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-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.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)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.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}} -------------------------------------------------------------------------------- /public/css/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'iconfont'; /* project id 1330295 */ 3 | src: url('//at.alicdn.com/t/font_1330295_t4p1ey317p.eot'); 4 | src: url('//at.alicdn.com/t/font_1330295_t4p1ey317p.eot?#iefix') format('embedded-opentype'), 5 | url('//at.alicdn.com/t/font_1330295_t4p1ey317p.woff2') format('woff2'), 6 | url('//at.alicdn.com/t/font_1330295_t4p1ey317p.woff') format('woff'), 7 | url('//at.alicdn.com/t/font_1330295_t4p1ey317p.ttf') format('truetype'), 8 | url('//at.alicdn.com/t/font_1330295_t4p1ey317p.svg#iconfont') format('svg'); 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 | .percy-icon-fangdajing:before { 19 | content: "\e63d"; 20 | } 21 | 22 | .percy-icon-guidangxiangmu:before { 23 | content: "\e660"; 24 | } 25 | 26 | .percy-icon-Exit:before { 27 | content: "\e6bd"; 28 | } 29 | 30 | .percy-icon-fanhui:before { 31 | content: "\e641"; 32 | } 33 | 34 | .percy-icon-logout:before { 35 | content: "\e651"; 36 | } 37 | 38 | .percy-icon-Positioning:before { 39 | content: "\e736"; 40 | } 41 | 42 | .percy-icon-cross-fill:before { 43 | content: "\e619"; 44 | } 45 | -------------------------------------------------------------------------------- /public/css/shake.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes shaky-slow { 2 | 0% { 3 | -webkit-transform: translate(0px, 0px) rotate(0deg); 4 | } 5 | 2% { 6 | -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg); 7 | } 8 | 4% { 9 | -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg); 10 | } 11 | 6% { 12 | -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg); 13 | } 14 | 8% { 15 | -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg); 16 | } 17 | 10% { 18 | -webkit-transform: translate(1.4px, 0px) rotate(-2deg); 19 | } 20 | 12% { 21 | -webkit-transform: translate(-1.3px, -1px) rotate(-2deg); 22 | } 23 | 14% { 24 | -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg); 25 | } 26 | 16% { 27 | -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); 28 | } 29 | 18% { 30 | -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg); 31 | } 32 | 20% { 33 | -webkit-transform: translate(1px, 1px) rotate(-0.5deg); 34 | } 35 | 22% { 36 | -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg); 37 | } 38 | 24% { 39 | -webkit-transform: translate(-1.4px, -1px) rotate(2deg); 40 | } 41 | 26% { 42 | -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg); 43 | } 44 | 28% { 45 | -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg); 46 | } 47 | 30% { 48 | -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg); 49 | } 50 | 32% { 51 | -webkit-transform: translate(-1px, 0px) rotate(2deg); 52 | } 53 | 34% { 54 | -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg); 55 | } 56 | 36% { 57 | -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg); 58 | } 59 | 38% { 60 | -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg); 61 | } 62 | 40% { 63 | -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg); 64 | } 65 | 42% { 66 | -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg); 67 | } 68 | 44% { 69 | -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg); 70 | } 71 | 46% { 72 | -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg); 73 | } 74 | 48% { 75 | -webkit-transform: translate(1px, 1.6px) rotate(1.5deg); 76 | } 77 | 50% { 78 | -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg); 79 | } 80 | 52% { 81 | -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg); 82 | } 83 | 54% { 84 | -webkit-transform: translate(1.6px, -1px) rotate(-2deg); 85 | } 86 | 56% { 87 | -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg); 88 | } 89 | 58% { 90 | -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg); 91 | } 92 | 60% { 93 | -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg); 94 | } 95 | 62% { 96 | -webkit-transform: translate(0px, 0px) rotate(-1.5deg); 97 | } 98 | 64% { 99 | -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); 100 | } 101 | 66% { 102 | -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg); 103 | } 104 | 68% { 105 | -webkit-transform: translate(0px, -1.6px) rotate(-2deg); 106 | } 107 | 70% { 108 | -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg); 109 | } 110 | 72% { 111 | -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg); 112 | } 113 | 74% { 114 | -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg); 115 | } 116 | 76% { 117 | -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg); 118 | } 119 | 78% { 120 | -webkit-transform: translate(-1px, 1.4px) rotate(2deg); 121 | } 122 | 80% { 123 | -webkit-transform: translate(1.4px, 1.6px) rotate(2deg); 124 | } 125 | 82% { 126 | -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg); 127 | } 128 | 84% { 129 | -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg); 130 | } 131 | 86% { 132 | -webkit-transform: translate(1px, 1.4px) rotate(-2deg); 133 | } 134 | 88% { 135 | -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg); 136 | } 137 | 90% { 138 | -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); 139 | } 140 | 92% { 141 | -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg); 142 | } 143 | 94% { 144 | -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); 145 | } 146 | 96% { 147 | -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg); 148 | } 149 | 98% { 150 | -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg); 151 | } 152 | } 153 | @keyframes shaky-slow { 154 | 0% { 155 | transform: translate(0px, 0px) rotate(0deg); 156 | } 157 | 2% { 158 | transform: translate(-1px, 1.5px) rotate(1.5deg); 159 | } 160 | 4% { 161 | transform: translate(1.3px, 0px) rotate(-0.5deg); 162 | } 163 | 6% { 164 | transform: translate(1.4px, 1.4px) rotate(-2deg); 165 | } 166 | 8% { 167 | transform: translate(-1.3px, -1px) rotate(-1.5deg); 168 | } 169 | 10% { 170 | transform: translate(1.4px, 0px) rotate(-2deg); 171 | } 172 | 12% { 173 | transform: translate(-1.3px, -1px) rotate(-2deg); 174 | } 175 | 14% { 176 | transform: translate(1.5px, 1.3px) rotate(1.5deg); 177 | } 178 | 16% { 179 | transform: translate(1.5px, -1.5px) rotate(-1.5deg); 180 | } 181 | 18% { 182 | transform: translate(1.3px, -1.3px) rotate(-2deg); 183 | } 184 | 20% { 185 | transform: translate(1px, 1px) rotate(-0.5deg); 186 | } 187 | 22% { 188 | transform: translate(1.3px, 1.5px) rotate(-2deg); 189 | } 190 | 24% { 191 | transform: translate(-1.4px, -1px) rotate(2deg); 192 | } 193 | 26% { 194 | transform: translate(1.3px, -1.3px) rotate(0.5deg); 195 | } 196 | 28% { 197 | transform: translate(1.6px, -1.6px) rotate(-1.5deg); 198 | } 199 | 30% { 200 | transform: translate(-1.3px, -1.3px) rotate(-1.5deg); 201 | } 202 | 32% { 203 | transform: translate(-1px, 0px) rotate(2deg); 204 | } 205 | 34% { 206 | transform: translate(1.3px, 1.3px) rotate(-0.5deg); 207 | } 208 | 36% { 209 | transform: translate(1.3px, 1.6px) rotate(1.5deg); 210 | } 211 | 38% { 212 | transform: translate(1.3px, -1.6px) rotate(1.5deg); 213 | } 214 | 40% { 215 | transform: translate(-1.4px, -1px) rotate(-0.5deg); 216 | } 217 | 42% { 218 | transform: translate(-1.4px, 1.3px) rotate(-0.5deg); 219 | } 220 | 44% { 221 | transform: translate(-1.6px, 1.4px) rotate(0.5deg); 222 | } 223 | 46% { 224 | transform: translate(-2.1px, -1.3px) rotate(-0.5deg); 225 | } 226 | 48% { 227 | transform: translate(1px, 1.6px) rotate(1.5deg); 228 | } 229 | 50% { 230 | transform: translate(1.6px, 1.6px) rotate(1.5deg); 231 | } 232 | 52% { 233 | transform: translate(-1.4px, 1.6px) rotate(0.5deg); 234 | } 235 | 54% { 236 | transform: translate(1.6px, -1px) rotate(-2deg); 237 | } 238 | 56% { 239 | transform: translate(1.3px, -1.6px) rotate(-2deg); 240 | } 241 | 58% { 242 | transform: translate(-1.3px, -1.6px) rotate(0.5deg); 243 | } 244 | 60% { 245 | transform: translate(1.3px, 1.6px) rotate(-0.5deg); 246 | } 247 | 62% { 248 | transform: translate(0px, 0px) rotate(-1.5deg); 249 | } 250 | 64% { 251 | transform: translate(-1.6px, -1.6px) rotate(-2deg); 252 | } 253 | 66% { 254 | transform: translate(1.6px, -1.6px) rotate(0.5deg); 255 | } 256 | 68% { 257 | transform: translate(0px, -1.6px) rotate(-2deg); 258 | } 259 | 70% { 260 | transform: translate(-1.6px, 1px) rotate(1.5deg); 261 | } 262 | 72% { 263 | transform: translate(-1.6px, 1.6px) rotate(2deg); 264 | } 265 | 74% { 266 | transform: translate(1.3px, -1.6px) rotate(-0.5deg); 267 | } 268 | 76% { 269 | transform: translate(1.4px, 1px) rotate(-0.5deg); 270 | } 271 | 78% { 272 | transform: translate(-1px, 1.4px) rotate(2deg); 273 | } 274 | 80% { 275 | transform: translate(1.4px, 1.6px) rotate(2deg); 276 | } 277 | 82% { 278 | transform: translate(-1.6px, -1.6px) rotate(-0.5deg); 279 | } 280 | 84% { 281 | transform: translate(-1.4px, 1.4px) rotate(-2deg); 282 | } 283 | 86% { 284 | transform: translate(1px, 1.4px) rotate(-2deg); 285 | } 286 | 88% { 287 | transform: translate(-1.4px, 1.4px) rotate(-1.5deg); 288 | } 289 | 90% { 290 | transform: translate(-1.6px, -1.6px) rotate(-2deg); 291 | } 292 | 92% { 293 | transform: translate(-1.4px, 1.6px) rotate(2deg); 294 | } 295 | 94% { 296 | transform: translate(-1.6px, -1.6px) rotate(-2deg); 297 | } 298 | 96% { 299 | transform: translate(-1.4px, 1.3px) rotate(-2deg); 300 | } 301 | 98% { 302 | transform: translate(1.3px, 1px) rotate(-0.5deg); 303 | } 304 | } -------------------------------------------------------------------------------- /public/favicon2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/public/favicon2.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | percy's blog 12 | 13 | 14 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitter-blog-vue", 3 | "short_name": "twitter-blog-vue", 4 | "icons": [ 5 | { 6 | "src": "/img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 22 | 38 | -------------------------------------------------------------------------------- /src/api/article.js: -------------------------------------------------------------------------------- 1 | import http from '@/utils/http'; 2 | export const apiArticleSave = (data, config) => { 3 | return http.post('article/save', data, config); 4 | }; 5 | export const apiArticleList = (data, config) => { 6 | return http.post('article/list', data, config); 7 | }; 8 | 9 | export const apiArticleGet = (data, config) => { 10 | return http.post('article/fetch', data, config); 11 | }; 12 | 13 | export const apiArticleCount = (data, config) => { 14 | return http.post('article/count', data, config); 15 | }; 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/api/auth.js: -------------------------------------------------------------------------------- 1 | import http from '@/utils/http'; 2 | export const apiGetUserInfo = (data, config) => { 3 | return http.post('auth/user/info', data, config); 4 | }; 5 | -------------------------------------------------------------------------------- /src/api/category.js: -------------------------------------------------------------------------------- 1 | import http from '@/utils/http'; 2 | export const apiGetCategoryList = (data, config) => { 3 | return http.post('category/list', data, config); 4 | }; 5 | export const apiSaveCategory = (data, config) => { 6 | return http.post('category/save', data, config); 7 | }; 8 | 9 | -------------------------------------------------------------------------------- /src/api/comment.js: -------------------------------------------------------------------------------- 1 | import http from '@/utils/http'; 2 | export const apiCommentSave = (data, config) => { 3 | return http.post('comment/save', data, config); 4 | }; 5 | export const apiCommentList = (data, config) => { 6 | return http.post('comment/list', data, config); 7 | }; 8 | 9 | -------------------------------------------------------------------------------- /src/assets/css/_variable.scss: -------------------------------------------------------------------------------- 1 | $twitter-blue: #1da1f2; 2 | $twitter-font: #66757f; 3 | $boder-color: #a4d9f9; 4 | $twitter-font-shallow: #657786; 5 | $button-hover: #e8f5fd; 6 | $backgroud-main: #e6ecf0; 7 | $height-header: 47px; 8 | $height-welcome:300px; 9 | $height-fake-area:30px; 10 | $height-profile-nav-wrap:60px; 11 | -------------------------------------------------------------------------------- /src/assets/css/emoji.css: -------------------------------------------------------------------------------- 1 | .emoji-yum { 2 | width: 64px; 3 | height: 64px; 4 | background-position: -0px -0px !important; 5 | } 6 | 7 | .emoji-angry { 8 | width: 64px; 9 | height: 64px; 10 | background-position: -64px -0px !important; 11 | } 12 | 13 | .emoji-anguished { 14 | width: 64px; 15 | height: 64px; 16 | background-position: -128px -0px !important; 17 | } 18 | 19 | .emoji-astonished { 20 | width: 64px; 21 | height: 64px; 22 | background-position: -192px -0px !important; 23 | } 24 | 25 | .emoji-cold_sweat { 26 | width: 64px; 27 | height: 64px; 28 | background-position: -256px -0px !important; 29 | } 30 | 31 | .emoji-cry { 32 | width: 64px; 33 | height: 64px; 34 | background-position: -320px -0px !important; 35 | } 36 | 37 | .emoji-blush { 38 | width: 64px; 39 | height: 64px; 40 | background-position: -384px -0px !important; 41 | } 42 | 43 | .emoji-confounded { 44 | width: 64px; 45 | height: 64px; 46 | background-position: -448px -0px !important; 47 | } 48 | 49 | .emoji-dizzy_face { 50 | width: 64px; 51 | height: 64px; 52 | background-position: -512px -0px !important; 53 | } 54 | 55 | .emoji-flushed { 56 | width: 64px; 57 | height: 64px; 58 | background-position: -0px -64px !important; 59 | } 60 | 61 | .emoji-fearful { 62 | width: 64px; 63 | height: 64px; 64 | background-position: -64px -64px !important; 65 | } 66 | 67 | .emoji-grimacing { 68 | width: 64px; 69 | height: 64px; 70 | background-position: -128px -64px !important; 71 | } 72 | 73 | .emoji-disappointed_relieved { 74 | width: 64px; 75 | height: 64px; 76 | background-position: -192px -64px !important; 77 | } 78 | 79 | .emoji-disappointed { 80 | width: 64px; 81 | height: 64px; 82 | background-position: -256px -64px !important; 83 | } 84 | 85 | .emoji-expressionless { 86 | width: 64px; 87 | height: 64px; 88 | background-position: -320px -64px !important; 89 | } 90 | 91 | .emoji-innocent { 92 | width: 64px; 93 | height: 64px; 94 | background-position: -384px -64px !important; 95 | } 96 | 97 | .emoji-grin { 98 | width: 64px; 99 | height: 64px; 100 | background-position: -448px -64px !important; 101 | } 102 | 103 | .emoji-frowning { 104 | width: 64px; 105 | height: 64px; 106 | background-position: -512px -64px !important; 107 | } 108 | 109 | .emoji-hushed { 110 | width: 64px; 111 | height: 64px; 112 | background-position: -0px -128px !important; 113 | } 114 | 115 | .emoji-open_mouth { 116 | width: 64px; 117 | height: 64px; 118 | background-position: -64px -128px !important; 119 | } 120 | 121 | .emoji-pensive { 122 | width: 64px; 123 | height: 64px; 124 | background-position: -128px -128px !important; 125 | } 126 | 127 | .emoji-sleepy { 128 | width: 64px; 129 | height: 64px; 130 | background-position: -192px -128px !important; 131 | } 132 | 133 | .emoji-confused { 134 | width: 64px; 135 | height: 64px; 136 | background-position: -256px -128px !important; 137 | } 138 | 139 | .emoji-persevere { 140 | width: 64px; 141 | height: 64px; 142 | background-position: -320px -128px !important; 143 | } 144 | 145 | .emoji-relieved { 146 | width: 64px; 147 | height: 64px; 148 | background-position: -384px -128px !important; 149 | } 150 | 151 | .emoji-scream { 152 | width: 64px; 153 | height: 64px; 154 | background-position: -448px -128px !important; 155 | } 156 | 157 | .emoji-stuck_out_tongue_winking_eye { 158 | width: 64px; 159 | height: 64px; 160 | background-position: -512px -128px !important; 161 | } 162 | 163 | .emoji-stuck_out_tongue { 164 | width: 64px; 165 | height: 64px; 166 | background-position: -0px -192px !important; 167 | } 168 | 169 | .emoji-satisfied { 170 | width: 64px; 171 | height: 64px; 172 | background-position: -64px -192px !important; 173 | } 174 | 175 | .emoji-no_mouth { 176 | width: 64px; 177 | height: 64px; 178 | background-position: -128px -192px !important; 179 | } 180 | 181 | .emoji-smiley { 182 | width: 64px; 183 | height: 64px; 184 | background-position: -192px -192px !important; 185 | } 186 | 187 | .emoji-smile { 188 | width: 64px; 189 | height: 64px; 190 | background-position: -256px -192px !important; 191 | } 192 | 193 | .emoji-stuck_out_tongue_closed_eyes { 194 | width: 64px; 195 | height: 64px; 196 | background-position: -320px -192px !important; 197 | } 198 | 199 | .emoji-sweat { 200 | width: 64px; 201 | height: 64px; 202 | background-position: -384px -192px !important; 203 | } 204 | 205 | .emoji-joy { 206 | width: 64px; 207 | height: 64px; 208 | background-position: -448px -192px !important; 209 | } 210 | 211 | .emoji-heart_eyes { 212 | width: 64px; 213 | height: 64px; 214 | background-position: -512px -192px !important; 215 | } 216 | 217 | .emoji-grinning { 218 | width: 64px; 219 | height: 64px; 220 | background-position: -0px -256px !important; 221 | } 222 | 223 | .emoji-smirk { 224 | width: 64px; 225 | height: 64px; 226 | background-position: -64px -256px !important; 227 | } 228 | 229 | .emoji-relaxed { 230 | width: 64px; 231 | height: 64px; 232 | background-position: -128px -256px !important; 233 | } 234 | 235 | .emoji-kissing_closed_eyes { 236 | width: 64px; 237 | height: 64px; 238 | background-position: -192px -256px !important; 239 | } 240 | 241 | .emoji-sunglasses { 242 | width: 64px; 243 | height: 64px; 244 | background-position: -256px -256px !important; 245 | } 246 | 247 | .emoji-sweat_smile { 248 | width: 64px; 249 | height: 64px; 250 | background-position: -320px -256px !important; 251 | } 252 | 253 | .emoji-sob { 254 | width: 64px; 255 | height: 64px; 256 | background-position: -384px -256px !important; 257 | } 258 | 259 | .emoji-wink { 260 | width: 64px; 261 | height: 64px; 262 | background-position: -448px -256px !important; 263 | } 264 | 265 | .emoji-worried { 266 | width: 64px; 267 | height: 64px; 268 | background-position: -512px -256px !important; 269 | } 270 | 271 | .emoji-neutral_face { 272 | width: 64px; 273 | height: 64px; 274 | background-position: -0px -320px !important; 275 | } 276 | 277 | .emoji-unamused { 278 | width: 64px; 279 | height: 64px; 280 | background-position: -64px -320px !important; 281 | } 282 | 283 | .emoji-weary { 284 | width: 64px; 285 | height: 64px; 286 | background-position: -128px -320px !important; 287 | } 288 | 289 | .emoji-tired_face { 290 | width: 64px; 291 | height: 64px; 292 | background-position: -192px -320px !important; 293 | } 294 | 295 | .emoji-triumph { 296 | width: 64px; 297 | height: 64px; 298 | background-position: -256px -320px !important; 299 | } 300 | 301 | .emoji-laughing { 302 | width: 64px; 303 | height: 64px; 304 | background-position: -320px -320px !important; 305 | } 306 | 307 | .emoji-kissing_heart { 308 | width: 64px; 309 | height: 64px; 310 | background-position: -384px -320px !important; 311 | } 312 | -------------------------------------------------------------------------------- /src/assets/img/WechatIMG2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/WechatIMG2.jpeg -------------------------------------------------------------------------------- /src/assets/img/article_item_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/article_item_sprite.png -------------------------------------------------------------------------------- /src/assets/img/desc.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/desc.gif -------------------------------------------------------------------------------- /src/assets/img/emoji_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/emoji_sprite.png -------------------------------------------------------------------------------- /src/assets/img/exit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/exit.png -------------------------------------------------------------------------------- /src/assets/img/face_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/face_logo.png -------------------------------------------------------------------------------- /src/assets/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/github.png -------------------------------------------------------------------------------- /src/assets/img/heading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/heading.jpg -------------------------------------------------------------------------------- /src/assets/img/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/home.png -------------------------------------------------------------------------------- /src/assets/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pppercyWang/twitter-blog-vue/9f5d99aef445fd2044c416c9179b05f017c9b5e9/src/assets/img/sprite.png -------------------------------------------------------------------------------- /src/components/commons/button/BlogButton.vue: -------------------------------------------------------------------------------- 1 | 16 | 41 | -------------------------------------------------------------------------------- /src/components/commons/checkbox/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 43 | -------------------------------------------------------------------------------- /src/components/commons/checkbox/CheckboxGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/commons/comment/Comment.vue: -------------------------------------------------------------------------------- 1 | 50 | 177 | -------------------------------------------------------------------------------- /src/components/commons/comment/Emoji.vue: -------------------------------------------------------------------------------- 1 | 4 | 18 | -------------------------------------------------------------------------------- /src/components/commons/comment/EmojiPanel.vue: -------------------------------------------------------------------------------- 1 | 11 | 92 | -------------------------------------------------------------------------------- /src/components/commons/dialog/BlogDialog.vue: -------------------------------------------------------------------------------- 1 | 31 | 60 | -------------------------------------------------------------------------------- /src/components/commons/divider/Divider.vue: -------------------------------------------------------------------------------- 1 | 8 | 16 | -------------------------------------------------------------------------------- /src/components/commons/formItem/FormItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 21 | -------------------------------------------------------------------------------- /src/components/commons/input/BlogInput.vue: -------------------------------------------------------------------------------- 1 | 13 | 39 | 40 | -------------------------------------------------------------------------------- /src/components/commons/message/Message.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | -------------------------------------------------------------------------------- /src/components/commons/message/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import MessageTmp from './Message.vue' 3 | const MessageConstruct = Vue.extend(MessageTmp) // 创建的是一个组件构造器，不是实例 4 | const Message = { 5 | install: (options, type) => { 6 | if (typeof (options) === 'function') { 7 | return; 8 | } 9 | if (options === undefined || options === null) { 10 | options = { 11 | content: '' 12 | } 13 | } else if (typeof options === 'string' || typeof options === 'number') { 14 | options = { 15 | content: options 16 | } 17 | if (type != undefined && options != null) { 18 | options.type = type; 19 | } 20 | } 21 | let instance = new MessageConstruct({ 22 | data: options 23 | }).$mount() 24 | document.body.appendChild(instance.$el) // 添加dom元素 25 | Vue.nextTick(() => { // dom元素渲染完成后执行回调 26 | instance.visible = true 27 | }) 28 | } 29 | } 30 | Vue.prototype.$message = Message.install; 31 | ['success', 'error'].forEach(type => { 32 | Vue.prototype.$message[type] = (content) => { 33 | return Vue.prototype.$message(content, type) 34 | } 35 | }) 36 | export default Message -------------------------------------------------------------------------------- /src/components/commons/pagination/Pagination.vue: -------------------------------------------------------------------------------- 1 | 38 | 91 | 214 | -------------------------------------------------------------------------------- /src/components/commons/radio/Radio.vue: -------------------------------------------------------------------------------- 1 | 11 | 43 | -------------------------------------------------------------------------------- /src/components/commons/radio/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/commons/tag/Tag.vue: -------------------------------------------------------------------------------- 1 | 12 | 33 | -------------------------------------------------------------------------------- /src/components/commons/tagInputer/TagInputer.vue: -------------------------------------------------------------------------------- 1 | 17 | 50 | -------------------------------------------------------------------------------- /src/components/commons/textUnderline/TextUnderline.vue: -------------------------------------------------------------------------------- 1 | 8 | 35 | -------------------------------------------------------------------------------- /src/components/header/Header.vue: -------------------------------------------------------------------------------- 1 | 33 | 113 | -------------------------------------------------------------------------------- /src/components/header/children/Login.vue: -------------------------------------------------------------------------------- 1 | 11 | 43 | -------------------------------------------------------------------------------- /src/components/header/children/MenuItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 73 | -------------------------------------------------------------------------------- /src/components/home/articleItem/ArticleItem.vue: -------------------------------------------------------------------------------- 1 | 41 | 120 | -------------------------------------------------------------------------------- /src/components/home/articleItem/SmallArticleItem.vue: -------------------------------------------------------------------------------- 1 | 26 | 70 | -------------------------------------------------------------------------------- /src/components/home/indexMenu/IndexMenu.vue: -------------------------------------------------------------------------------- 1 | 29 | 114 | -------------------------------------------------------------------------------- /src/components/home/indexMenu/children/BloggerInfo.vue: -------------------------------------------------------------------------------- 1 | 27 | 55 | -------------------------------------------------------------------------------- /src/components/home/indexMenu/children/MenuItem.vue: -------------------------------------------------------------------------------- 1 | 16 | 46 | -------------------------------------------------------------------------------- /src/components/home/indexMenu/children/ProfileHeading.vue: -------------------------------------------------------------------------------- 1 | 23 | 41 | -------------------------------------------------------------------------------- /src/components/home/indexMenu/children/SearchBar.vue: -------------------------------------------------------------------------------- 1 | 22 | 119 | -------------------------------------------------------------------------------- /src/directives/vueClickOutSize.js: -------------------------------------------------------------------------------- 1 | const clickOutside = { 2 | // 初始化指令 3 | bind(el, binding, vnode) { 4 | function clickHandler(e) { 5 | // 这里判断点击的元素是否是本身，是本身，则返回 6 | if (el.contains(e.target)) { 7 | return false; 8 | } 9 | // 判断指令中是否绑定了函数 10 | if (binding.expression) { 11 | // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 12 | binding.value(e); 13 | } 14 | } 15 | // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 16 | el.__vueClickOutside__ = clickHandler; 17 | document.addEventListener("click", clickHandler); 18 | }, 19 | unbind(el, binding) { 20 | // 解除事件监听 21 | document.removeEventListener("click", el.__vueClickOutside__); 22 | delete el.__vueClickOutside__; // 删除属性 23 | } 24 | }; 25 | export default clickOutside -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/App.vue'; 3 | import router from './router.js'; 4 | import mavonEditor from 'mavon-editor'; 5 | import 'mavon-editor/dist/css/index.css'; 6 | import Message from '@/components/commons/message'; 7 | Vue.use(Message); 8 | Vue.use(mavonEditor); 9 | Vue.config.productionTip = false; 10 | new Vue({ 11 | router, 12 | render: (h) => h(App), 13 | }).$mount('#app'); 14 | router.beforeEach((to, from, next) => { 15 | next(); 16 | }); 17 | 18 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | Vue.use(Router); 4 | export default new Router({ 5 | routes: [{ 6 | path: '/404', 7 | name: '找不到页面', 8 | component: () => import('@/views/NotFound.vue'), 9 | }, 10 | { 11 | path: '/', 12 | component: () => import('@/views/navigation/Layout.vue'), 13 | redirect: { 14 | path: "/welcome" 15 | }, 16 | children: [{ 17 | path: '/home', 18 | name: '首页', 19 | component: () => import('@/views/navigation/home/HomeLayout.vue'), 20 | children: [{ 21 | path: '/welcome', 22 | name: '文章', 23 | component: () => import('@/views/navigation/home/Skill.vue'), 24 | }, 25 | { 26 | path: '/life', 27 | name: '生活', 28 | component: () => import('@/views/navigation/home/Life.vue'), 29 | }, 30 | ] 31 | }, 32 | { 33 | path: '/about', 34 | name: '关于', 35 | component: () => import('@/views/navigation/about/About.vue'), 36 | }, 37 | { 38 | path: '/comment', 39 | name: '留言', 40 | component: () => import('@/views/navigation/comment/Comment.vue'), 41 | }, 42 | { 43 | path: '/article/:id', 44 | name: '文章浏览', 45 | component: () => import('@/views/ArticleBrowser.vue'), 46 | }, 47 | ] 48 | }, 49 | { 50 | path: '/article/edit/:articleID', 51 | component: () => import('@/views/ArticleEdit.vue'), 52 | }, 53 | { 54 | path: '/*', 55 | redirect: { 56 | path: '/404' 57 | } 58 | } 59 | ], 60 | scrollBehavior(to, from, savedPosition) { 61 | if (from.name === '关于' && to.name == '文章') { 62 | return { 63 | x: 0, 64 | y: 0 65 | } 66 | } 67 | if (to.name === '关于') { 68 | return { 69 | x: 0, 70 | y: 0 71 | } 72 | } 73 | } 74 | }); -------------------------------------------------------------------------------- /src/utils/bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | export default new Vue() 4 | -------------------------------------------------------------------------------- /src/utils/http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | class Http { 3 | service = null; 4 | constructor() { 5 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 6 | this.service = axios.create({ 7 | baseURL: '/api/', 8 | timeout: 5000000 9 | }); 10 | this.service.interceptors.request.use((config) => { 11 | if (sessionStorage.getItem('token')) { 12 | config.headers.Authorization = 'BEARER ' + sessionStorage.getItem('token'); 13 | } 14 | return config; 15 | }, (error) => Promise.reject(error)); 16 | this.service.interceptors.response.use((response) => { 17 | if (response.status === 200) { 18 | if (response.data) { 19 | if (response.data.Code === 0) { 20 | return Promise.resolve(response.data || true); 21 | } 22 | return Promise.reject(response.data || true); 23 | } 24 | return Promise.resolve(response || false); 25 | } 26 | return Promise.reject(response || false); 27 | }, (error) => { 28 | return Promise.reject(error); 29 | }); 30 | } 31 | get(url, params = {}) { 32 | return this.service.get(`${url}`, { 33 | params 34 | }); 35 | } 36 | post(url, data = {}, config = {}) { 37 | return this.service.post(`${url}`, data, config); 38 | } 39 | } 40 | export default new Http(); -------------------------------------------------------------------------------- /src/views/ArticleBrowser.vue: -------------------------------------------------------------------------------- 1 | 17 | 51 | 61 | -------------------------------------------------------------------------------- /src/views/ArticleEdit.vue: -------------------------------------------------------------------------------- 1 | 48 | 174 | 228 | -------------------------------------------------------------------------------- /src/views/NotFound.vue: -------------------------------------------------------------------------------- 1 | 4 | 12 | -------------------------------------------------------------------------------- /src/views/navigation/Layout.vue: -------------------------------------------------------------------------------- 1 | 16 | 32 | -------------------------------------------------------------------------------- /src/views/navigation/about/About.vue: -------------------------------------------------------------------------------- 1 | 49 | 67 | 152 | -------------------------------------------------------------------------------- /src/views/navigation/comment/Comment.vue: -------------------------------------------------------------------------------- 1 | 12 | 35 | 54 | -------------------------------------------------------------------------------- /src/views/navigation/home/HomeLayout.vue: -------------------------------------------------------------------------------- 1 | 27 | 82 | 83 | 150 | -------------------------------------------------------------------------------- /src/views/navigation/home/Life.vue: -------------------------------------------------------------------------------- 1 | 17 | 60 | 61 | 81 | -------------------------------------------------------------------------------- /src/views/navigation/home/Skill.vue: -------------------------------------------------------------------------------- 1 | 20 | 105 | 106 | 129 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const CompressionWebpackPlugin = require('compression-webpack-plugin') //gzip压缩 2 | const productionGzipExtensions = ['js', 'css'] 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 4 | module.exports = { 5 | css: { 6 | loaderOptions: { 7 | sass: { 8 | data: ` 9 | @import "@/assets/css/_variable.scss"; 10 | ` 11 | }, 12 | } 13 | }, 14 | configureWebpack: { 15 | plugins: [ 16 | new UglifyJsPlugin({ 17 | uglifyOptions: { 18 | compress: { 19 | drop_debugger: true, 20 | drop_console: true, //生产环境自动删除console 21 | }, 22 | warnings: false, 23 | }, 24 | sourceMap: false, 25 | parallel: true, //使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。 26 | }), 27 | new CompressionWebpackPlugin({ 28 | filename: '[path].gz[query]', 29 | algorithm: 'gzip', 30 | test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), 31 | threshold: 10240, 32 | minRatio: 0.8 33 | }), 34 | ] 35 | }, 36 | chainWebpack: config => { 37 | config.module 38 | .rule('images') 39 | .use('image-webpack-loader') 40 | .loader('image-webpack-loader') 41 | .options({ 42 | bypassOnDebug: true 43 | }) 44 | .end() 45 | }, 46 | productionSourceMap: false, 47 | devServer: { 48 | // 配置代理 49 | proxy: { 50 | '/api': { 51 | ws: false, //禁用websocket 52 | target: 'http://47.105.189.195:8848/', 53 | changeOrigin: true, 54 | } 55 | }, 56 | port: 12322, 57 | disableHostCheck: true, 58 | }, 59 | }// 但是一直也不清楚自己的blog应该长啥样。 --------------------------------------------------------------------------------