├── static
    ├── .gitkeep
    └── favicon.png
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── img
    │   │   ├── boy.png
    │   │   ├── code.jpg
    │   │   ├── life.jpg
    │   │   ├── mores.png
    │   │   ├── search.png
    │   │   ├── tags.jpeg
    │   │   ├── loading.gif
    │   │   ├── message.png
    │   │   ├── searchs.png
    │   │   ├── boycontent.png
    │   │   ├── error_img.jpg
    │   │   ├── pexels-photo-747964.jpeg
    │   │   └── pexels-pixabay-268533.jpg
    │   └── css
    │   │   ├── media.css
    │   │   ├── common.less
    │   │   ├── nav-pc.less
    │   │   └── aos.css
    ├── views
    │   ├── homeIndex
    │   │   └── index.vue
    │   ├── code
    │   │   └── index.vue
    │   ├── life
    │   │   └── index.vue
    │   ├── author
    │   │   └── index.vue
    │   ├── labels
    │   │   └── index.vue
    │   ├── home
    │   │   └── index.vue
    │   ├── message
    │   │   └── index.vue
    │   └── essaydetail
    │   │   └── index.vue
    ├── utils
    │   ├── base64.js
    │   ├── highlight.js
    │   ├── common.js
    │   └── http.js
    ├── App.vue
    ├── components
    │   ├── footer
    │   │   └── index.vue
    │   ├── card
    │   │   └── index.vue
    │   └── nav
    │   │   └── index.vue
    ├── main.js
    └── router
    │   └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── README.md
├── package.json
└── index.html


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/src/assets/img/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/boy.png


--------------------------------------------------------------------------------
/src/assets/img/code.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/code.jpg


--------------------------------------------------------------------------------
/src/assets/img/life.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/life.jpg


--------------------------------------------------------------------------------
/src/assets/img/mores.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/mores.png


--------------------------------------------------------------------------------
/src/assets/img/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/search.png


--------------------------------------------------------------------------------
/src/assets/img/tags.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/tags.jpeg


--------------------------------------------------------------------------------
/src/assets/img/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/loading.gif


--------------------------------------------------------------------------------
/src/assets/img/message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/message.png


--------------------------------------------------------------------------------
/src/assets/img/searchs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/searchs.png


--------------------------------------------------------------------------------
/src/assets/img/boycontent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/boycontent.png


--------------------------------------------------------------------------------
/src/assets/img/error_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/error_img.jpg


--------------------------------------------------------------------------------
/src/assets/img/pexels-photo-747964.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/pexels-photo-747964.jpeg


--------------------------------------------------------------------------------
/src/assets/img/pexels-pixabay-268533.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huangjiangmin/vue_blog/HEAD/src/assets/img/pexels-pixabay-268533.jpg


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


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


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


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


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


--------------------------------------------------------------------------------
/src/views/homeIndex/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav-bar></nav-bar>
 4 |     <router-view></router-view>
 5 |     <my-footer></my-footer>
 6 |   </div>
 7 |   
 8 | </template>
 9 | 
10 | <script>
11 | import NavBar from '../../components/nav'
12 | import MyFooter from '../../components/footer'
13 | export default {
14 |     components:{
15 |       NavBar,
16 |       MyFooter
17 |     }
18 | 
19 | }
20 | </script>
21 | 
22 | <style>
23 | 
24 | </style>


--------------------------------------------------------------------------------
/src/assets/css/media.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /*
 3 | 屏幕大于1200px
 4 | */
 5 | @media screen and (max-width: 2000px) { 
 6 |     @import '../../assets/css/commons.css'; 
 7 | } 
 8 | /*
 9 | 屏幕在1200到1199之间的
10 | */
11 | @media screen and (min-width: 1200px) and (max-width:1199px) { 
12 |     /* @import '../../assets/css/common.less'; */
13 |     @import '../../assets/css/commons.css'; 
14 | } 
15 | /*
16 | 屏幕小于768px的
17 | */
18 | @media screen and (max-width:768px) { 
19 |     /* @import '../../assets/css/nav-h5.css'; */
20 | }
21 | 


--------------------------------------------------------------------------------
/src/utils/base64.js:
--------------------------------------------------------------------------------
 1 | const Base64 = {
 2 |     //加密
 3 |      encode(str) {
 4 |          return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
 5 |              function toSolidBytes(match, p1) {
 6 |                  return String.fromCharCode('0x' + p1);
 7 |              }));
 8 |      },
 9 |    //解密
10 |      decode(str) {
11 |          // Going backwards: from bytestream, to percent-encoding, to original string.
12 |          return decodeURIComponent(atob(str).split('').map(function (c) {
13 |              return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
14 |          }).join(''));
15 |      }
16 |  }
17 |  export default Base64


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 
13 | <style>
14 | #app { 
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   text-align: center;
18 |   color: #071f36;
19 |   letter-spacing:1px;
20 |   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
21 | }
22 | body {
23 |   margin:0px;
24 | }
25 | #container { 
26 |   position:relative;
27 |   margin-right:auto;
28 | }
29 | ::selection {
30 |     background: #96c7c9; /* Safari */
31 |     color: #ffffff;
32 | }
33 | ::-moz-selection {
34 |     background: #8fbbb9; /* Firefox */
35 |     color: #ffffff;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/utils/highlight.js:
--------------------------------------------------------------------------------
 1 | // highlight.js  代码高亮指令
 2 | import Hljs from 'highlight.js';
 3 | import 'highlight.js/styles/tomorrow-night.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
 4 | 
 5 | let Highlight = {};
 6 | // 自定义插件
 7 | Highlight.install = function (Vue) {
 8 |     // 自定义指令 v-highlight
 9 |     Vue.directive('highlight', {
10 |         // 被绑定元素插入父节点时调用
11 |         inserted: function(el) {
12 |             let blocks = el.querySelectorAll('pre code');
13 |             for (let i = 0; i < blocks.length; i++) {
14 |                 Hljs.highlightBlock(blocks[i]);
15 |             }
16 |         },
17 |         // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
18 |         componentUpdated: function(el) {
19 |             let blocks = el.querySelectorAll('pre code');
20 |             for (let i = 0; i < blocks.length; i++) {
21 |                 Hljs.highlightBlock(blocks[i]);
22 |             }
23 |         }
24 |     })
25 | };
26 | 
27 | export default Highlight;


--------------------------------------------------------------------------------
/src/components/footer/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="m-footer">
 4 |         <div class="m-footer-p">
 5 |           <span class="m-footer-i">Dahuangzi © 2020</span>
 6 |           <span class="m-footer-i">&nbsp; • &nbsp;</span>
 7 |           <span> <a href="http://beian.miit.gov.cn/" class="m-footer-a" target="_blank" rel="noopener">京ICP备2020047706号</a></span>
 8 |         </div>
 9 |       </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |   data() {
16 |     return {
17 | 
18 |     };
19 |   },
20 |   created() {
21 | 
22 |   },
23 |   mounted() {
24 | 
25 |   },
26 |   methods: {
27 | 
28 |   },
29 | }
30 | </script>
31 | 
32 | <style lang="less" scoped>
33 | 
34 | .m-footer{
35 |     width: 100%;
36 |     height: 200px;
37 |     background: #3c6d9e;
38 |     .m-footer-p{
39 |       float: left;
40 |       width:100%;
41 |       margin-top: 80px;
42 |       color: rgb(250, 250, 250); 
43 |       .m-footer-a{
44 |         text-decoration: none;
45 |         color: rgb(250, 250, 250); 
46 |       }
47 |     }
48 | }
49 | 
50 | 
51 | </style>


--------------------------------------------------------------------------------
/src/assets/css/common.less:
--------------------------------------------------------------------------------
 1 | .l-banan{
 2 |     width: 100%;
 3 |     height: 15%;
 4 |     position: relative;
 5 |   }
 6 |   @media screen and (max-width: 2000px) and (min-width: 767px) {
 7 |        .img-content{
 8 |      position: absolute;
 9 |      left:45%;
10 |      top:38%;
11 |      transform: translate(-45%, -38%);
12 |      color:  #faf9f9;
13 |    }
14 | }
15 |  @media screen and (max-width:768px) and (min-width: 100px){ 
16 |    
17 |      .img-content{
18 |          position: absolute;
19 |          left:30%;
20 |          top:30%;
21 |          transform: translate(-45%, -45%);
22 |          color:  #faf9f9;
23 |      }
24 |  }
25 |   .m-hero-content{ 
26 |      color: rgb(218, 216, 216);
27 |   }
28 |   .l-image {
29 |     height: 500px;
30 |     width: 100%;
31 | }
32 | .image{
33 |    width: 100%;
34 |    height: 100%;
35 |     object-fit: cover;
36 | }
37 |   .l-content{
38 |     width: 100%;
39 |     height: 0%;
40 |     background: #ffffff;
41 |     margin-top: 15px;
42 |   }
43 | 
44 |   .l-content-foot{
45 |     font-size: 40px;
46 |     margin-top: 50px;
47 |     height: 120px;
48 |   }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import ElementUI from 'element-ui'
 7 | import 'element-ui/lib/theme-chalk/index.css'
 8 | import axios from 'axios'
 9 | import {post,fetch,patch,put} from './utils/http'
10 | import Highlight from './utils/highlight'
11 | import Base64 from './utils/base64.js' 
12 | import less from 'less'
13 | import VueLazyload from 'vue-lazyload'
14 | 
15 | 
16 | //定义全局变量
17 | 
18 | Vue.prototype.$post=post;
19 | 
20 | Vue.prototype.$fetch=fetch;
21 | Vue.prototype.$Base64 = Base64;
22 | Vue.prototype.$patch=patch; 
23 | Vue.prototype.$put=put;
24 | Vue.prototype.$axios = axios    
25 | Vue.config.productionTip = false
26 | Vue.use(Highlight)
27 | Vue.use(less)
28 | Vue.use(ElementUI)
29 | /* eslint-disable no-new */
30 | Vue.use(VueLazyload, {
31 |   loading: require('./assets/img/loading.gif'),//加载中图片，一定要有，不然会一直重复加载占位图
32 |   error: require('./assets/img//error_img.jpg')  //加载失败图片
33 | });
34 | new Vue({
35 |   el: '#app',
36 |   router,
37 |   components: { App },
38 |   mounted () {
39 |     // You'll need this for renderAfterDocumentEvent.
40 |     
41 |     document.dispatchEvent(new Event('render-event'))
42 |     },
43 |   template: '<App/>',
44 | })
45 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HomeIndex from '@/views/homeIndex'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       redirect: '/home',
12 |     },
13 |     {
14 |       path: '/home',
15 |       component: HomeIndex,
16 |       children: [
17 |         {
18 |           path: '/home',
19 |           name: 'home',
20 |           component:(resolve) =>require(['@/views/home'],resolve)
21 |         },
22 |         {
23 |           path: '/essaydetail/:id',
24 |           name: 'essaydetail',
25 |           component:(resolve) =>require(['@/views/essaydetail'],resolve)
26 |         },  {
27 |           path: '/code',
28 |           name: 'code',
29 |           component:(resolve) =>require(['@/views/code'],resolve)
30 |         },  {
31 |           path: '/life',
32 |           name: 'life',
33 |           component:(resolve) =>require(['@/views/life'],resolve)
34 |         },  {
35 |           path: '/author',
36 |           name: 'author',
37 |           component:(resolve) =>require(['@/views/author'],resolve)
38 |         },{
39 |           path: '/labels/:labelId/:labelName',
40 |           name: 'labels',
41 |           component:(resolve) =>require(['@/views/labels'],resolve)
42 |         }, {
43 |           path: '/message',
44 |           name: 'message',
45 |           component:(resolve) =>require(['@/views/message'],resolve)
46 |         }
47 |       ]
48 |     }
49 |   ]
50 | })
51 | const originalPush = Router.prototype.push
52 |    Router.prototype.push = function push(location) {
53 |    return originalPush.call(this, location).catch(err => err)
54 | }


--------------------------------------------------------------------------------
/src/views/code/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <div class="l-banan">
 4 |         <div class="img-content " data-aos="fade-down">
 5 |           <h1 class="m-hero-title bigger">Code</h1>
 6 |           <p class="m-heading__description">
 7 |             {{essayCount}} articles with this tag
 8 |           </p>
 9 |         </div>
10 |         <div class="l-image">  
11 |           <img src="../../assets/img/code.jpg" class="image">
12 |         </div>
13 |       </div>
14 |       <div class="l-content" data-aos="fade-up">
15 |            <card :essayList="essayList"/>
16 |       </div>
17 |       <div class="l-content-foot"> 
18 |         <el-pagination 
19 |           small
20 |           layout="prev, pager, next"
21 |            @current-change="current_change"
22 |             :page-size="9"
23 |           :total='essayCount'>
24 |         </el-pagination>
25 |       </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>   
30 | import Card from '@/components/card'; 
31 |   export default {
32 |     components: {
33 |       Card
34 |     },
35 |     data() {
36 |       return {
37 |         essayList:[],
38 |         essayCount:0, 
39 |         url:''
40 |       };
41 |     },
42 |     created() {
43 |       this.getListEssay();
44 |     },
45 |     mounted() {
46 |     },
47 |     methods: { 
48 |       current_change(currentPage){  //改变当前页
49 |              this.currentPage = currentPage;
50 |              this.getListEssay(currentPage);
51 |          },
52 |       /**
53 |        * 加载essayList
54 |        */
55 |       getListEssay(currentPage){
56 |             this.$post('/api/blog/findEssay',{
57 |               pageNumber:currentPage,
58 |               labelType:0   
59 |             })
60 |             .then((response) =>{
61 |               this.essayList=response.data.rows;
62 |               this.essayCount=response.data.total;
63 |             })
64 |       },
65 |     },
66 |   }
67 | </script>
68 | 
69 | <style lang="less" scoped>  
70 | @import '../../assets/css/common.less';
71 | </style>


--------------------------------------------------------------------------------
/src/views/life/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <div class="l-banan">
 4 |         <div class="img-content " data-aos="fade-down">
 5 |           <h1 class="m-hero-title bigger">Life</h1>
 6 |           <p class="m-heading__description">
 7 |             Love life , stay safe
 8 |           </p>
 9 |         </div>
10 |         <div class="l-image">
11 |         <img src="../../assets/img/life.jpg" class="image" style="height:500px;">
12 |         </div>
13 |       </div>
14 |       <div class="l-content" data-aos="fade-up">
15 |            <card :essayList="essayList"/>
16 |       </div> 
17 |             <div class="l-content-foot"> 
18 |         <el-pagination 
19 |           small
20 |           layout="prev, pager, next"
21 |            @current-change="current_change"
22 |             :page-size="9"
23 |           :total='essayCount'>
24 |         </el-pagination>
25 |       </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>   
30 | import Card from '@/components/card'
31 |   export default {
32 |     components: {
33 |       Card
34 |     },
35 |     data() {
36 |       return {
37 |         essayList:[],
38 |         essayCount:0, 
39 |       };
40 |     },
41 |     created() {
42 |       this.getListEssay();
43 |     },
44 |     mounted() {
45 |     },
46 |     methods: {
47 |       getEssayDetail(id){
48 |         this.$router.push(`/essaydetail/${id}`)
49 |       },
50 |       current_change(currentPage){  //改变当前页
51 |              this.currentPage = currentPage;
52 |              this.getListEssay(currentPage);
53 |          },
54 |       /**
55 |        * 加载essayList
56 |        */
57 |       getListEssay(currentPage){
58 |             this.$post('/api/blog/findEssay',{
59 |               pageNumber:currentPage,
60 |               labelId:1
61 |             })
62 |             .then((response) =>{
63 |               this.essayList=response.data.rows;
64 |               this.essayCount=response.data.total;
65 |             })
66 |       },
67 |     },
68 |   }
69 | </script>
70 | 
71 |  
72 | <style lang="less" scoped>  
73 | @import '../../assets/css/common.less';
74 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 开发一个简单的个人博客
 2 | 
 3 | **整体风格上，我对设计没有太多的见解，做的时候参考了好多网上现有的博客，总体喜欢简约。**
 4 | ![Image text](https://img-blog.csdnimg.cn/20201223184703472.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5namlhbmdtaW4=,size_16,color_FFFFFF,t_70#pic_center)
 5 | 
 6 | ![Image text](https://img-blog.csdnimg.cn/202012231843361.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5namlhbmdtaW4=,size_16,color_FFFFFF,t_70)
 7 | ![Image text](https://img-blog.csdnimg.cn/20201223184333744.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5namlhbmdtaW4=,size_16,color_FFFFFF,t_70)
 8 | 
 9 | # 项目结构 
10 | 	 -src
11 | 	   -assets 			//公共 css js  img
12 | 	 -components		//公共组件 封装
13 | 	 	-card 			//博客基本信息卡片组件
14 | 	 	-footer			//页脚
15 | 	 	-nav			//页头
16 | 	 -router			//路由
17 | 	 -utils				//工具类
18 | 	 -views				
19 | 	 	-author			
20 | 	 	-code
21 | 	 	-essaydetail		//博客信息页
22 | 	 	-home			
23 | 	 	-labels
24 | 	 	-life
25 | 	 	-message		//留言
26 | 
27 | # 用到的技术
28 |  
29 | ## 前端  
30 | 
31 |   **vue +  vue-router + axios + element ui框架的样式 + aos.css 动画 + less + media 媒体查询 自适应 Web+H5**
32 |  
33 |   **包含技术点：**
34 | 
35 |  
36 |  1.  axios请求封装
37 |  2. aos动画的使用 
38 |  3.  博客代码高亮highlight 
39 |  4. 基本组件封装 
40 |  5. 父子组件传值  
41 |  6. 路由传参 
42 |  7. 传参加密 
43 |  8.  同界面路由变更回到顶部 watch()
44 |  9. 媒体查询@media
45 |  
46 |  
47 | # 后端
48 | 
49 |  
50 | 
51 | ## Java
52 | **springboot + mysql + mybatis + redis**
53 | 
54 |  **包含技术点：（这对后端开发其实没啥技术点）**
55 |  
56 |  1.  springboot+mybatis 实现基本增删改查
57 |  2.  redis工具类
58 |  3.  aop规范控制台日志 
59 |  4.  统一返回 （code,msg,data）
60 |  5. Dockerfile 编写
61 |  
62 | 
63 | ## 服务（部署Java）
64 | 阿里云服务器  **centos8 + docker + dockerfile + nginx+ mysql** 
65 | 
66 |  **包含技术点：**
67 | 
68 |  1.  centos8 安装 docker。
69 |  2. docker + mysql 文件挂载、远程连接。
70 |  3.  docker + nginx 文件挂载、负载、反向。
71 |  4.  docker化 nginx后，SSL证书的配置。
72 |  6. dockerfile 文件，实现项目打包镜像。 
73 | 
74 | ## " 基本实现了一个简单的个人网页 ：  [https://www.dahuangzi.work/](https://www.dahuangzi.work/) "
75 | 
76 | ## 1、获取项目到本地
77 | ## 2、vscode 终端 输入 npm i 下载package.json中的依赖包
78 | ## 3、npm run dev 启动
79 | ## 4、修改 utils 下 https 中封装的 baseURL 为自己的后端接口地址


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuedemo",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "huangjiangmin <13520350513@163.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "aos": "^2.3.4",
14 |     "axios": "^0.20.0",
15 |     "element-ui": "^2.13.2",
16 |     "highlight.js": "^10.4.1",
17 |     "less": "^3.13.0",
18 |     "less-loader": "^4.1.0",
19 |     "prerender-spa-plugin": "^3.4.0",
20 |     "vue": "^2.5.2",
21 |     "vue-axios": "^2.1.5",
22 |     "vue-router": "^3.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "autoprefixer": "^7.1.2",
26 |     "babel-core": "^6.22.1",
27 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
28 |     "babel-loader": "^7.1.1",
29 |     "babel-plugin-syntax-jsx": "^6.18.0",
30 |     "babel-plugin-transform-runtime": "^6.22.0",
31 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
32 |     "babel-preset-env": "^1.3.2",
33 |     "babel-preset-stage-2": "^6.22.0",
34 |     "chalk": "^2.0.1",
35 |     "copy-webpack-plugin": "^4.0.1",
36 |     "css-loader": "^0.28.0",
37 |     "extract-text-webpack-plugin": "^3.0.0",
38 |     "file-loader": "^1.1.4",
39 |     "friendly-errors-webpack-plugin": "^1.6.1",
40 |     "html-webpack-plugin": "^2.30.1",
41 |     "less": "^3.13.0",
42 |     "node-notifier": "^5.1.2",
43 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
44 |     "ora": "^1.2.0",
45 |     "portfinder": "^1.0.13",
46 |     "postcss-import": "^11.0.0",
47 |     "postcss-loader": "^2.0.8",
48 |     "postcss-url": "^7.2.1",
49 |     "rimraf": "^2.6.0",
50 |     "semver": "^5.3.0",
51 |     "shelljs": "^0.7.6",
52 |     "uglifyjs-webpack-plugin": "^1.1.1",
53 |     "url-loader": "^0.5.8",
54 |     "vue-lazyload": "^1.3.3",
55 |     "vue-loader": "^13.3.0",
56 |     "vue-style-loader": "^3.0.1",
57 |     "vue-template-compiler": "^2.5.2",
58 |     "webpack": "^3.6.0",
59 |     "webpack-bundle-analyzer": "^2.9.0",
60 |     "webpack-dev-server": "^2.9.1",
61 |     "webpack-merge": "^4.1.0"
62 |   },
63 |   "engines": {
64 |     "node": ">= 6.0.0",
65 |     "npm": ">= 3.0.0"
66 |   },
67 |   "browserslist": [
68 |     "> 1%",
69 |     "last 2 versions",
70 |     "not ie <= 8"
71 |   ]
72 | }
73 | 


--------------------------------------------------------------------------------
/src/utils/common.js:
--------------------------------------------------------------------------------
 1 | export function before_time(dateTimeStamp) {
 2 |     var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
 3 |     var hour = minute * 60;
 4 |     var day = hour * 24;
 5 |     var week = day * 7;
 6 |     var halfamonth = day * 15;
 7 |     var month = day * 30;
 8 |     var year = day * 365;
 9 |     var now = new Date().getTime(); //获取当前时间毫秒
10 |     // console.log(now);
11 |     var diffValue = now - dateTimeStamp; //时间差
12 | 
13 |     if (diffValue < 0) {
14 |       return;
15 |     }
16 |     var minC = diffValue / minute; //计算时间差的分，时，天，周，月
17 |     var hourC = diffValue / hour;
18 |     var dayC = diffValue / day;
19 |     var weekC = diffValue / week;
20 |     var monthC = diffValue / month;
21 |     var yearC = diffValue / year;
22 |     var result;
23 |     if (yearC >= 1) {
24 |       result = " " + parseInt(yearC) + " years  ago";
25 |     } else if (monthC >= 1 && monthC <= 12) {
26 |       result = " " + parseInt(monthC) + " months ago";
27 |     } else if (weekC >= 1 && weekC <= 4) {
28 |       result = " " + parseInt(weekC) + " weeks ago";
29 |     } else if (dayC >= 1 && dayC <= 7) {
30 |       result = " " + parseInt(dayC) + " days ago";
31 |     } else if (hourC >= 1 && hourC <= 24) {
32 |       result = " " + parseInt(hourC) + " hours ago";
33 |     } else if (minC >= 1 && minC <= 60) {
34 |       result = " " + parseInt(minC) + " minutes ago";
35 |     } else if (diffValue >= 0 && diffValue <= minute) {
36 |       result = "Just Now";
37 |     } else {
38 |       var datetime = new Date();
39 |       datetime.setTime(dateTimeStamp);
40 |       var Nyear = datetime.getFullYear();
41 |       var Nmonth =
42 |         datetime.getMonth() + 1 < 10
43 |           ? "0" + (datetime.getMonth() + 1)
44 |           : datetime.getMonth() + 1;
45 |       var Ndate =
46 |         datetime.getDate() < 10
47 |           ? "0" + datetime.getDate()
48 |           : datetime.getDate();
49 |       var Nhour =
50 |         datetime.getHours() < 10
51 |           ? "0" + datetime.getHours()
52 |           : datetime.getHours();
53 |       var Nminute =
54 |         datetime.getMinutes() < 10
55 |           ? "0" + datetime.getMinutes()
56 |           : datetime.getMinutes();
57 |       var Nsecond =
58 |         datetime.getSeconds() < 10
59 |           ? "0" + datetime.getSeconds()
60 |           : datetime.getSeconds();
61 |       result = Nyear + "-" + Nmonth + "-" + Ndate;
62 |     }
63 |     return result;
64 |   }


--------------------------------------------------------------------------------
/src/assets/css/nav-pc.less:
--------------------------------------------------------------------------------
  1 | .navs{
  2 | 
  3 |   /*
  4 |   屏幕小于768px的
  5 |   */
  6 |   @media screen and (max-width:768px){ 
  7 |     width: 100%;
  8 |     height: 100px;
  9 |     /* line-height: 80px; */
 10 |     background: rgb(254, 254, 254);
 11 |     .nav{
 12 |     display: none;
 13 |     }
 14 |     .changeStyle{
 15 |       font-weight: bold;
 16 |     }
 17 |     .nav-image{
 18 |       float: left;
 19 |       display: inline;
 20 |       margin-top: 20px;
 21 |       margin-left: 15px;
 22 |     }
 23 |     .nav-search{
 24 |     float: left;
 25 |     margin-left: 5px;
 26 |     margin-top: 23px;
 27 |     }
 28 |   }
 29 |   @media screen and (max-width: 2000px) {  
 30 |     width: 100%;
 31 |     height: 100px;
 32 |     /* line-height: 80px; */
 33 |     background: rgb(254, 254, 254);
 34 |     .nav{
 35 |     float:left;
 36 |     margin-left: 40px;
 37 |     font-size: 18px;
 38 |     cursor: pointer;
 39 |     margin-top: 30px;
 40 |     }
 41 |     .changeStyle{
 42 |       font-weight: bold;
 43 |     }
 44 |     .nav-image{
 45 |       margin-top: 20px;
 46 |       margin-left: 200px;
 47 |     }
 48 |     .nav-search{
 49 |     float: left;
 50 |     margin-left: 15px;
 51 |     margin-top: 23px;
 52 |     }
 53 |   } 
 54 |   
 55 | } 
 56 | .show-card{
 57 |    width: 100%;
 58 |    height: 400px;
 59 |    background: rgb(255, 255, 255);
 60 |    z-index: 100; 
 61 |    position:absolute;
 62 |    margin-top: 100px;      
 63 |    border-top: 0.5px solid rgb(214, 212, 212);
 64 |   .card-recent{
 65 |     margin-top: 20px;
 66 |     margin-right: 65%;
 67 |   }
 68 |    .small-card{
 69 |    width:75%;
 70 |    margin: 0 auto;
 71 |     .el-col{
 72 |     width:200px;
 73 |     height:200px; 
 74 |       .nav-show-image{
 75 |         width: 100%; 
 76 |         height:140px; 
 77 |         object-fit: cover;
 78 |         transition: all 0.6s;
 79 |         }
 80 |       .nav-show-image:hover{
 81 |         transform: scale(1.2);
 82 |         }
 83 |       .card-massges{
 84 |         object-fit: cover;
 85 |         height: 20px;
 86 |         font-size: 15px;
 87 |       }
 88 |     }
 89 |   }
 90 |   .nav-tags{
 91 |    margin-top: 30px;
 92 |    margin-right: 72%;
 93 |   }
 94 |    .tags-div{
 95 |     margin-left: 200px;
 96 |   }
 97 |   .tags{
 98 |     float:left;
 99 |     margin-left:3%;
100 |     font-size: 18px;
101 |     cursor: pointer;
102 |     margin-top: 10px;
103 |     font-weight: bold;
104 |     }
105 |  }


--------------------------------------------------------------------------------
/src/utils/http.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios'
  2 | 
  3 | axios.defaults.timeout = 5000;   //设置请求时间
  4 | axios.defaults.baseURL ='http://localhost:8088';   //设置接口公共部分
  5 | 
  6 | //http request 拦截器
  7 | 
  8 | axios.interceptors.request.use(
  9 | 
 10 |   config => {
 11 | 
 12 |     config.data = JSON.stringify(config.data);
 13 | 
 14 |     config.headers = {
 15 | 
 16 |       'Content-Type':'application/json'
 17 | 
 18 |     }
 19 | 
 20 |     return config;
 21 | 
 22 |   },
 23 | 
 24 |   error => {
 25 | 
 26 |     return Promise.reject(err);
 27 | 
 28 |   }
 29 | 
 30 | );
 31 | 
 32 | //http response 拦截器
 33 | 
 34 | axios.interceptors.response.use(
 35 | 
 36 |   response => {
 37 | 
 38 |     if(response.data.errCode ==2){
 39 | 
 40 |       router.push({
 41 | 
 42 |         path:"/login",
 43 | 
 44 |         querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
 45 | 
 46 |       })
 47 | 
 48 |     }
 49 | 
 50 |     return response;
 51 | 
 52 |   },
 53 | 
 54 |   error => {
 55 | 
 56 |     return Promise.reject(error)
 57 | 
 58 |   }
 59 | 
 60 | )
 61 | 
 62 | /**
 63 | 
 64 | * 封装get方法
 65 | 
 66 | * @param url
 67 | 
 68 | * @param data
 69 | 
 70 | * @returns {Promise}
 71 | 
 72 | */
 73 | 
 74 | export function fetch(url,params={}){
 75 | 
 76 |   return new Promise((resolve,reject) => {
 77 | 
 78 |     axios.get(url,{
 79 | 
 80 |       params:params
 81 | 
 82 |     })
 83 | 
 84 |     .then(response => {
 85 | 
 86 |       resolve(response.data);
 87 | 
 88 |     })
 89 | 
 90 |     .catch(err => {
 91 | 
 92 |       reject(err)
 93 | 
 94 |     })
 95 | 
 96 |   })
 97 | 
 98 | }
 99 | 
100 | /**
101 | 
102 | * 封装post请求
103 | 
104 | * @param url
105 | 
106 | * @param data
107 | 
108 | * @returns {Promise}
109 | 
110 | */
111 | 
112 | export function post(url,data = {}){
113 | 
114 |   return new Promise((resolve,reject) => {
115 | 
116 |     axios.post(url,data)
117 | 
118 |           .then(response => {
119 | 
120 |             resolve(response.data);
121 | 
122 |           },err => {
123 | 
124 |             reject(err)
125 | 
126 |           })
127 | 
128 |   })
129 | 
130 | }
131 | 
132 | /**
133 | 
134 | * 封装patch请求
135 | 
136 | * @param url
137 | 
138 | * @param data
139 | 
140 | * @returns {Promise}
141 | 
142 | */
143 | 
144 | export function patch(url,data = {}){
145 | 
146 |   return new Promise((resolve,reject) => {
147 | 
148 |     axios.patch(url,data)
149 | 
150 |         .then(response => {
151 | 
152 |           resolve(response.data);
153 | 
154 |         },err => {
155 | 
156 |           reject(err)
157 | 
158 |         })
159 | 
160 |   })
161 | 
162 | }
163 | 
164 | /**
165 | 
166 | * 封装put请求
167 | 
168 | * @param url
169 | 
170 | * @param data
171 | 
172 | * @returns {Promise}
173 | 
174 | */
175 | 
176 | export function put(url,data = {}){
177 | 
178 |   return new Promise((resolve,reject) => {
179 | 
180 |     axios.put(url,data)
181 | 
182 |         .then(response => {
183 | 
184 |           resolve(response.data);
185 | 
186 |         },err => {
187 | 
188 |           reject(err)
189 | 
190 |         })
191 | 
192 |   })
193 | 
194 | }


--------------------------------------------------------------------------------
/src/views/author/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <div class="l-banan">
 4 |         <div class="img-content " data-aos="fade-down">
 5 |           <h1 class="m-hero-title bigger">Author</h1>
 6 |           <p class="m-heading__description">
 7 |             Sun was shining over me
 8 |           </p>
 9 |         </div>
10 |         <div class="l-image">
11 |         <img 
12 |           v-lazy='"https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/d078ff000f9e4cbfcd4b3be8b0a10bf74d2f3948a85d427ba9506f8040bcdbc98bb2ccdd2fc1fa81557dfd08bb17e012?pictype=scale&from=30013&version=3.3.3.3&uin=2248410897&fname=pexels-sam-lion-5731804.jpg&size=750"' 
13 |           :key='"https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/d078ff000f9e4cbfcd4b3be8b0a10bf74d2f3948a85d427ba9506f8040bcdbc98bb2ccdd2fc1fa81557dfd08bb17e012?pictype=scale&from=30013&version=3.3.3.3&uin=2248410897&fname=pexels-sam-lion-5731804.jpg&size=750"'
14 |          class="image" style="height:500px;">
15 |         </div>
16 |       </div>
17 |       <div class="l-content" data-aos="fade-up">
18 |            <card :essayList="essayList"/>
19 |       </div>
20 |       <div class="l-content-foot"> 
21 |         <el-pagination  v-show="isPage" 
22 |           small
23 |           layout="prev, pager, next"
24 |            @current-change="current_change"
25 |             :page-size="9"
26 |           :total='essayCount'>
27 |         </el-pagination>
28 |       </div>
29 |     </div>
30 | </template>
31 | 
32 | <script>   
33 | import Card from '@/components/card'
34 |   export default {
35 |     components: {
36 |       Card
37 |     },
38 |     data() {
39 |       return {
40 |         isPage:false,
41 |         essayList:[],
42 |         essayCount:0, 
43 |       };
44 |     },
45 |     created() {  
46 |     },
47 |     mounted() {
48 |        // 开启滚动监听
49 | 	  window.addEventListener('scroll', this.handleScroll);
50 |     },
51 |     methods: {
52 |        // 滚动监听  滚动触发的效果写在这里
53 |       handleScroll () {
54 |         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
55 | 
56 |         if (scrollTop >= 30) { 
57 |           this.getListEssay(); 
58 |           this.isPage=true
59 |           window.removeEventListener('scroll', this.handleScroll); // 关闭监听  
60 |         } 
61 |       },
62 |       getEssayDetail(id){
63 |         this.$router.push(`/essaydetail/${id}`)
64 |       },
65 | 
66 |       current_change(currentPage){  //改变当前页
67 |              this.currentPage = currentPage;
68 |              this.getListEssay(currentPage);
69 |          },
70 |       /**
71 |        * 加载essayList
72 |        */
73 |       getListEssay(currentPage){
74 |             this.$post('/api/blog/findEssay',{
75 |               pageNumber:currentPage,
76 |               labelType:2
77 |             })
78 |             .then((response) =>{
79 |               this.essayList=response.data.rows;
80 |               this.essayCount=response.data.total;
81 |             })
82 |       },
83 |     },
84 |   }
85 | </script>
86 | 
87 |  
88 | <style lang="less" scoped>  
89 | @import '../../assets/css/common.less';
90 | </style>


--------------------------------------------------------------------------------
/src/views/labels/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="l-banan">
  4 |         <div class="img-content " data-aos="fade-down">
  5 |           <h1 class="m-hero-title bigger">{{labelName}}</h1>
  6 |           <p class="m-heading__description">
  7 |             {{essayCount}} articles with this tag
  8 |           </p>
  9 |         </div>
 10 |         <div class="image" style="height:500px;">
 11 |         </div>
 12 |       </div>
 13 |         <div class="l-content" data-aos="fade-up">
 14 |            <card :essayList="essayList"/>
 15 |       </div>
 16 |       <div class="l-content-foot"> 
 17 |         <el-pagination 
 18 |           small
 19 |           layout="prev, pager, next"
 20 |            @current-change="current_change"
 21 |             :page-size="9"
 22 |           :total='essayCount'>
 23 |         </el-pagination>
 24 |       </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import Card from '@/components/card'
 30 |   export default {
 31 |     components: {
 32 |       Card
 33 |     },
 34 |   data() {
 35 |     return {
 36 |         labelId : this.$Base64.decode(this.$route.params.labelId), 
 37 |         labelName: this.$route.params.labelName,
 38 |         essayList:[],
 39 |         essayCount:0, 
 40 |     };
 41 |   },
 42 |   created() {
 43 |    this.getListEssay();
 44 |    this.$router.afterEach((to,from,next)=>{
 45 | 　　　　window,scrollTo(0,0)
 46 | 　　})
 47 |   },
 48 |   watch:{
 49 |     $route:{
 50 |         handler(newVal,oldVal){
 51 |             this.labelId=this.$Base64.decode(newVal.params.labelId),
 52 |             this.labelName=this.$route.params.labelName,
 53 |             this.getListEssay()
 54 |         }
 55 |     }
 56 |   },
 57 |   mounted() {
 58 | 
 59 |   },
 60 |   methods: {
 61 |       current_change(currentPage){  //改变当前页
 62 |              this.currentPage = currentPage;
 63 |              this.getListEssay(currentPage);
 64 |          },
 65 |       /**
 66 |        * 加载essayList
 67 |        */
 68 |       getListEssay(currentPage){
 69 |             this.$post('/api/blog/findEssay',{
 70 |               pageNumber:currentPage,
 71 |               labelId:this.$Base64.decode(this.$route.params.labelId), 
 72 |             })
 73 |             .then((response) =>{
 74 |               this.essayList=response.data.rows;
 75 |               this.essayCount=response.data.total;
 76 |             })
 77 |       },
 78 |     },
 79 | }
 80 | </script>
 81 | 
 82 | <style scoped>
 83 |   .l-banan{
 84 |     width: 100%;
 85 |     height: 15%;
 86 |     position: relative;
 87 |   }
 88 |    @media screen and (max-width: 3000px) and (min-width: 767px) {
 89 |           .img-content{
 90 |         position: absolute;
 91 |         left:45%;
 92 |         top:38%;
 93 |         transform: translate(-45%, -38%);
 94 |         color:  #faf9f9;
 95 |       }
 96 |    }
 97 |     @media screen and (max-width:768px) and (min-width: 100px){ 
 98 |         .img-content{
 99 |             position: absolute;
100 |             left:30%;
101 |             top:30%;
102 |             transform: translate(-45%, -45%);
103 |             color:  #faf9f9;
104 |         }
105 |     }
106 |  
107 |   .m-hero-content{ 
108 |      color: rgb(218, 216, 216);
109 |   }
110 | .image{
111 |    width: 100%; 
112 |    background: rgb(190, 207, 203);
113 |     object-fit: cover;
114 | }
115 |   .l-content-foot{
116 |     font-size: 40px;
117 |     margin-top: 50px;
118 |     height: 120px;
119 |   }
120 | </style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 | 
  6 |     <meta name="keywords" content="大黄子,开发个人博客,大黄子的博客">
  7 |     <meta name="description" content="北漂青年——大黄子">
  8 |     <meta name="author" content="大黄子,13520350513@163.com">
  9 |     <meta name="robots" content="all">
 10 | 
 11 |     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
 12 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 13 |     <meta name="baidu-site-verification" content="code-671WICHDtv" />
 14 |     <title>大黄子的博客</title>
 15 |     <link rel="icon" href="./static/favicon.png" type="image/x-icon"/> 
 16 | 
 17 |     <link rel="stylesheet" href="https://www.dahuangzi.work/aos.css"/>
 18 | 
 19 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 20 |     <style>
 21 |        .spinner {
 22 |       margin: 100px auto;
 23 |       width: 50px;
 24 |       height: 60px;
 25 |       text-align: center;
 26 |       font-size: 10px;
 27 |     }
 28 | 
 29 |     .spinner > div {
 30 |       background-color: #cefdf9;
 31 |       height: 100%;
 32 |       width: 6zpx;
 33 |       display: inline-block;
 34 |       -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
 35 |       animation: stretchDelay 1.2s infinite ease-in-out;
 36 |     }
 37 | 
 38 |     .spinner .rect2 {
 39 |       -webkit-animation-delay: -1.1s;
 40 |       animation-delay: -1.1s;
 41 |     }
 42 | 
 43 |     .spinner .rect3 {
 44 |       -webkit-animation-delay: -1.0s;
 45 |       animation-delay: -1.0s;
 46 |     }
 47 | 
 48 |     .spinner .rect4 {
 49 |       -webkit-animation-delay: -0.9s;
 50 |       animation-delay: -0.9s;
 51 |     }
 52 | 
 53 |     .spinner .rect5 {
 54 |       -webkit-animation-delay: -0.8s;
 55 |       animation-delay: -0.8s;
 56 |     }
 57 | 
 58 |     @-webkit-keyframes stretchDelay {
 59 |       0%, 40%, 100% {
 60 |         -webkit-transform: scaleY(0.4)
 61 |       }
 62 |       20% {
 63 |         -webkit-transform: scaleY(1.0)
 64 |       }
 65 |     }
 66 | 
 67 |     @keyframes stretchDelay {
 68 |       0%, 40%, 100% {
 69 |         transform: scaleY(0.4);
 70 |         -webkit-transform: scaleY(0.4);
 71 |       }
 72 |       20% {
 73 |         transform: scaleY(1.0);
 74 |         -webkit-transform: scaleY(1.0);
 75 |       }
 76 |     }
 77 |     </style>
 78 |   </head>
 79 |   <body>
 80 |     <div id="app">
 81 |       <div class="spinner">
 82 |         <div class="rect1"></div>
 83 |         <div class="rect2"></div>
 84 |         <div class="rect3"></div>
 85 |         <div class="rect4"></div>
 86 |         <div class="rect5"></div>
 87 |       </div>
 88 |     </div>
 89 |     <!-- built files will be auto injected -->
 90 |     
 91 | <script src="https://www.dahuangzi.work/aos.js"></script>
 92 | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 93 | <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 94 | 
 95 | <script>
 96 | 	AOS.init({
 97 | 		offset: 200,   
 98 |     duration: 600,   
 99 |     easing: 'ease-in-sine',   
100 |     delay: 100,
101 |   });
102 |   console.log("\n %c 大黄子 🐤 git源码下面 🤞   喜欢或对你有用 点个 Star ❤ "," font-size: .84rem;background: #fcf9ec; padding:5px 0;margin-left: 8px"
103 |   );
104 |   console.log(" %c https://github.com/huangjiangmin/vue_blog",
105 |   " font-size: .84rem;background: #fcf9ec; padding:5px 0;margin-left: 8px");
106 |   
107 | </script>
108 | 
109 |   </body>
110 | </html>
111 | 


--------------------------------------------------------------------------------
/src/views/home/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |       <div class="l-banan">
  4 |         <div class="img-content " data-aos="fade-down">
  5 |           <h1 class="m-hero-title">DaHuangzi</h1>
  6 |           <p class="m-heading__description">
  7 |             Better late than never
  8 |           </p>
  9 |         </div>
 10 |          <div class="l-image">
 11 |         <img 
 12 |         v-lazy='"https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/0386296a30942b399e2916816a520c8d54ccb107a9a6f9452049c44cd0aa4a2cc1210a9aa000402e7ba3b210a858b13e?pictype=scale&from=30013&version=3.3.3.3&uin=2248410897&fname=pexels-simon-migaj-747964.jpg&size=750"' 
 13 |         :key='"https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/0386296a30942b399e2916816a520c8d54ccb107a9a6f9452049c44cd0aa4a2cc1210a9aa000402e7ba3b210a858b13e?pictype=scale&from=30013&version=3.3.3.3&uin=2248410897&fname=pexels-simon-migaj-747964.jpg&size=750"'
 14 |        class="image">
 15 |          </div>
 16 |       </div>
 17 |       <div class="l-content" data-aos="fade-up">
 18 |            <card :essayList="essayList"/>
 19 |       </div>
 20 |       <div class="l-content-foot" > 
 21 |         <el-pagination v-show="isPage" 
 22 |           small
 23 |           layout="prev, pager, next"
 24 |            @current-change="current_change"
 25 |             :page-size="9"
 26 |           :total='essayCount'> 
 27 |         </el-pagination>
 28 |       </div>
 29 |     </div>
 30 | </template>
 31 | 
 32 | <script>   
 33 | import Card from '@/components/card'
 34 |   export default {
 35 |     components: {
 36 |       Card
 37 |     },
 38 |     data() {
 39 |       return {
 40 |         isPage:false,
 41 |         essayList:[],
 42 |         essayCount:0,  
 43 |       };
 44 |     },
 45 |     created() {
 46 |      
 47 |     },
 48 |     mounted() {
 49 |     // 开启滚动监听
 50 | 	  window.addEventListener('scroll', this.handleScroll);
 51 |     },
 52 |     methods: {
 53 |     // 滚动监听  滚动触发的效果写在这里
 54 |       handleScroll () {
 55 |         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 56 | 
 57 |         if (scrollTop >= 20) { 
 58 |           this.getListEssay(); 
 59 |           this.isPage=true
 60 |           window.removeEventListener('scroll', this.handleScroll); // 关闭监听  
 61 |         } 
 62 |       },
 63 | 
 64 |     current_change(currentPage){  //改变当前页
 65 |              this.currentPage = currentPage;
 66 |              this.getListEssay(currentPage);
 67 |          },
 68 |       /**
 69 |        * 加载essayList
 70 |        */
 71 |       getListEssay(currentPage){
 72 |             this.$post('/api/blog/findEssay',{
 73 |               pageNumber:currentPage
 74 |             })
 75 |             .then((response) =>{
 76 |               this.essayList=response.data.rows;
 77 |               this.essayCount=response.data.total;
 78 |             })
 79 |       },
 80 |     },
 81 |   }
 82 | </script>
 83 | 
 84 | 
 85 | <style lang="less" scoped>  
 86 | @import '../../assets/css/common.less';
 87 | 
 88 |  
 89 |    @media screen and (max-width: 2000px) and (min-width: 767px) {
 90 |        .m-hero-title{
 91 |     text-shadow:
 92 |     -1px 1px 0 #ddd,
 93 |     -2px 2px 0 #c8c8c8,
 94 |     -3px 3px 0 #ccc,
 95 |     -4px 4px 0 #b8b8b8,
 96 |     -4px 4px 0 #bbb,
 97 |     0px 1px 1px rgba(0,0,0,.4),
 98 |     0px 2px 2px rgba(0,0,0,.3),
 99 |     -1px 3px 3px rgba(0,0,0,.2),
100 |     -1px 5px 5px rgba(0,0,0,.1),
101 |     -2px 8px 8px rgba(0,0,0,.1),
102 |     -2px 13px 13px rgba(0,0,0,.1)
103 |     ;
104 | }
105 |           .img-content{
106 |         position: absolute;
107 |         left:45%;
108 |         top:38%;
109 |         transform: translate(-45%, -38%);
110 |         color:  #faf9f9;
111 |       }
112 |    }
113 |     @media screen and (max-width:768px) and (min-width: 100px){ 
114 |       
115 |         .img-content{
116 |             position: absolute;
117 |             left:30%;
118 |             top:30%;
119 |             transform: translate(-45%, -45%);
120 |             color:  #faf9f9;
121 |         }
122 |     }
123 | </style>


--------------------------------------------------------------------------------
/src/components/card/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card-t">
  3 |       <el-row>
  4 |         <el-col v-for="(item, index) in essayList" :key="index">
  5 |             <el-card :body-style="{ padding: '0px'}" class="card-blog" shadow="hover">
  6 |                 <img
  7 |                 v-lazy="item.essayImg" :key="item.essayImg"
  8 |                   class="image"  @click="getEssayDetail(item.id)"  >
  9 |                     <div class="card-label" style="padding: 10px;">
 10 |                         <p class="m-card-tag" @click="goLabels(item.labelId,item.labelName)">{{item.labelName}}</p>
 11 |                     </div>
 12 |                     <div class="card-massges" @click="getEssayDetail(item.id)">
 13 |                     <h3 class="card-m" style="height:30px">{{item.essayTitle}}</h3>
 14 |                     <p class="card-m" style="height:60px">{{item.essayAbout}}</p>
 15 |                     </div>
 16 |                     <hr class="l-hr" style="height:0.5px;border:none;border-top:0.5px solid rgb(218, 216, 216) ;width:100%;" />
 17 |                     <!-- <div class="bottom clearfix"> -->
 18 |                         <p class="l-time">{{before_time(item.createTime)}}</p>
 19 |                     <!-- </div> -->
 20 |                 
 21 |             </el-card>
 22 |         </el-col>
 23 |     </el-row>
 24 |     <div class="el-top">
 25 |      <el-backtop :bottom="250" :right="100" :visibility-height="400">
 26 |         <i class="el-icon-thumb"></i>
 27 |      </el-backtop>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import { before_time } from '@/utils/common'
 34 |   export default {
 35 |   data() {
 36 |     return {
 37 | 
 38 |     };
 39 |   },
 40 |   props:{
 41 |       essayList:{
 42 |         type:Array,
 43 |         default:()=>{
 44 |             return []
 45 |         }
 46 |       }
 47 |       
 48 |   },
 49 |   created() {
 50 | 
 51 |   },
 52 |   mounted() {
 53 | 
 54 |   },
 55 |   methods: {
 56 |       before_time,
 57 |       getEssayDetail(bid){
 58 |       let id= this.$Base64.encode(bid);
 59 |         this.$router.push(`/essaydetail/${id}`)
 60 |       },
 61 |       goLabels(blabelId,labelName){
 62 |          let labelId= this.$Base64.encode(blabelId);
 63 |         this.$router.push(`/labels/${labelId}/${labelName}`)
 64 |       }
 65 |   },
 66 | }
 67 | </script>
 68 | 
 69 | <style scoped>
 70 | .card-t{
 71 |   width: 80%; 
 72 |   margin: 0 auto;
 73 |        
 74 | }
 75 | .el-row{
 76 |    /**
 77 |   卡片居中
 78 |   */
 79 |   display: flex;
 80 |   flex-wrap: wrap;
 81 |   align-items: center;
 82 |   justify-content: center;
 83 | }
 84 |  
 85 | .el-col{ 
 86 |     width: 350px;
 87 |     height: 500px; 
 88 |     padding: 20px;
 89 |     margin-top: 40px;
 90 |     border-radius:10px; 
 91 | }
 92 |   /*
 93 |   阴影+鼠标划过浮动
 94 |  */ 
 95 |   .card-blog{
 96 |      border-radius:10px; 
 97 |   }
 98 |   .card-blog:hover{
 99 |     border-radius:10px;  
100 |     transform: translate(0,-7px);
101 | 	  transition-delay: 0s !important; 
102 |   }
103 | .card-m{
104 |     width:100%;
105 |     height: 100px;
106 |     overflow: hidden;/* 超出的文本隐藏 */
107 |     text-overflow: ellipsis; /* 溢出用省略号显示 */
108 | }
109 | 
110 |   .image {
111 |     width: 100%;
112 |     height: 250px;
113 |     display: block;
114 |     object-fit: cover;
115 |     cursor: pointer;
116 |   }
117 |   .card-massges{
118 |     height: 120px;
119 |     text-align: center;
120 |     width: 80%;
121 |     margin:0 auto;
122 |     background: #ffffff;
123 |     
124 |     cursor: pointer;
125 |   }
126 |   .card-label{
127 |     margin-right: 260px; 
128 |   }
129 |   .m-card-tag{
130 |     cursor: pointer;
131 |     margin: 0 auto;
132 |     border-radius: 15px;
133 |     background: #2ec4b6; 
134 |     display: inline-block;
135 |     font-size: 12px;
136 |     font-weight: 700;
137 |     padding: 5px 10px; 
138 |     color: rgb(250, 250, 250);
139 |   }
140 |     .l-time{
141 |    margin-right: 55%; 
142 |    color: rgb(124, 120, 120) ;
143 |   }
144 |    @media screen and (max-width: 3000px) and (min-width: 1000px) {
145 |       
146 |    }
147 |    @media screen and (max-width:1000px) and (min-width: 100px){  
148 |    .el-top{
149 |       visibility: hidden;
150 |      }
151 |    }
152 | 
153 | </style>


--------------------------------------------------------------------------------
/src/views/message/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |       <div class="l-banan">
  4 |         <div class="img-content" data-aos="fade-down">
  5 |           <h1 class="m-hero-title bigger">Message Board</h1>
  6 |           <p class="m-heading__description">
  7 |             Say what you want to say
  8 |           </p>
  9 |         </div>
 10 |         <div class="l-image">
 11 |         <img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/9296859da63c1179144d6ab77e6c046b7f0b14c2c988ab6aa350fc909caab4b03586945644423f05c69c1bc81f1c2360?pictype=scale&from=30013&version=3.3.3.3&uin=2248410897&fname=pexels-tirachard-kumtanom-733854.jpg&size=750" class="image" style="height:500px;">
 12 |         </div>
 13 |       </div>
 14 |        <div class="l-content" data-aos="fade-up"> 
 15 |          <div class="el-drawer-d"> 
 16 |             <el-card class="el-card-d" shadow="always">
 17 |              <div class="infinite-list-wrapper" style="overflow:auto;">
 18 |                 <el-timeline
 19 |                   infinite-scroll-disabled="disabled">
 20 |                 <div v-if="allmessages.length>0"> 
 21 |                   <el-timeline-item v-for="(item,index) in allmessages"  :key="index" :timestamp='item.createTime' placement="top">
 22 |                     <el-card class="el-card-m" style="height:120px">
 23 |                       <h4>{{item.memberName}}：</h4>
 24 |                       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p>
 25 |                     </el-card>
 26 |                   </el-timeline-item>
 27 |                 </div>
 28 |                 <div v-else>
 29 |                    <el-timeline-item placement="top">
 30 |                     <el-card class="el-card-m" style="height:120px">
 31 |                       <h4>大黄子：</h4>
 32 |                       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
 33 |                     </el-card>
 34 |                   </el-timeline-item>
 35 |                 </div>
 36 |               </el-timeline> 
 37 |               </div>
 38 |               <div class="el-card-messages">
 39 |                  <el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="message"></el-input>
 40 |                  <el-button type="info" round class="submit-message" @click="submitMessage">留言</el-button>
 41 |               </div>
 42 |             </el-card> 
 43 |           </div>
 44 |       </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 |   export default {
 50 |   data() {
 51 |     return {
 52 |         message:'',
 53 |         allmessages:[]
 54 |     };
 55 |   },
 56 |   created() {
 57 |    this.findMessage();
 58 |      this.$router.afterEach((to,from,next)=>{
 59 | 　　　　window,scrollTo(0,0)
 60 | 　　})
 61 |   },
 62 |   mounted() {
 63 | 
 64 |   },
 65 |   methods: {
 66 |  submitMessage(){
 67 |       if(this.message=='' || this.message.replace(/(^\s*)|(\s*$)/g, "")==""){
 68 |           this.$message('写点啥提交也行呀😉');
 69 |           return;
 70 |       }
 71 |       this.$post('/api/blog/saveBlogMessage',{
 72 |         content:this.message,
 73 |         contentType:1
 74 |       })
 75 |       .then(res => { 
 76 |           if(res.code=='200'){
 77 |             this.$message('留言成功');
 78 |             this.message="";
 79 |             this.findMessage();
 80 |           }else if(res.code=='-1'){
 81 |             this.$message(res.msg+"😉");
 82 |           }
 83 |       });
 84 |     },
 85 |     findMessage(){
 86 |       this.$post('/api/blog/findMessage',{ 
 87 |           contentType:1
 88 |       })
 89 |       .then(res => {
 90 |         this.allmessages = res.data;
 91 |       });
 92 |     },
 93 |   },
 94 | }
 95 | </script>
 96 | 
 97 | <style lang='less' scoped>
 98 | @import '../../assets/css/common.less';
 99 | @media screen and (max-width: 3000px) and (min-width: 767px) {
100 |           .img-content{
101 |         position: absolute;
102 |         left:39%;
103 |         top:35%;
104 |         transform: translate(-45%, -38%);
105 |         color:  #faf9f9;
106 |       }
107 |    }
108 |     @media screen and (max-width:768px) and (min-width: 100px){ 
109 |         .img-content{
110 |             position: absolute;
111 |             left:20%;
112 |             top:40%;
113 |             transform: translate(-45%, -45%);
114 |             color:  #faf9f9;
115 |         }
116 |     }
117 | .l-content{
118 |     height: 800px;
119 | }
120 | .el-drawer-d{
121 |   width: 100%;
122 |   height: 100%; 
123 |   text-align: left;
124 | }
125 |     .el-card-messages{
126 |       margin-top: 10px;
127 |     }
128 |  
129 |     .infinite-list-wrapper{
130 |       width: 100%;
131 |       height: 500px;
132 |     }
133 |     .submit-message{
134 |         width: 100%; 
135 |         background: rgb(235, 245, 247);
136 |         color: cadetblue;
137 |         letter-spacing:20px;
138 |     }
139 |  @media screen and (max-width: 3000px) and (min-width: 767px) {
140 |     .el-card-d{
141 |       float: left;
142 |       margin-top: 20px;
143 |       margin-left: 10%; 
144 |       width: 80%;
145 |       height: 90%;
146 |     }
147 | 
148 |    }
149 |   /*
150 |   屏幕小于768px的
151 |   */
152 |   @media screen and (max-width:768px) and (min-width: 100px){  
153 |      .el-card-d{
154 | 
155 |       width: 100%;
156 |       height: 100%;
157 |     }
158 |   }
159 | </style>


--------------------------------------------------------------------------------
/src/views/essaydetail/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |       <div class="l-banan">
  4 |         <img 
  5 |         :src="essayImg" class="image"> 
  6 |       </div>
  7 |       <div class="e-content"  data-aos="fade-up" v-highlight>
  8 |         <div>
  9 |           <h1 align='center'  style="font-size:200%;">{{essayDetail.essayTitle}}</h1>
 10 |           <br>
 11 |         </div>
 12 |           <article v-html="essayContent"></article>
 13 |       </div>
 14 |       <div class="e-banan"> 
 15 |       
 16 |          <el-tooltip class="item" effect="light" :content='contente' placement="right-start"> 
 17 |           <img src="../../assets/img/boycontent.png" class="boy-content" @mouseover='mouseover'>
 18 |          </el-tooltip> 
 19 | 
 20 |         <img src="../../assets/img/message.png" @click="drawer = true"  class="mage">
 21 |         <el-drawer
 22 |            direction='btt'
 23 |            size="80%"
 24 |           :visible.sync="drawer"
 25 |           :with-header="false">
 26 |           <div class="el-drawer-d"> 
 27 |             <el-card class="el-card-d" shadow="always">
 28 |              <div class="infinite-list-wrapper" style="overflow:auto;">
 29 |                 <el-timeline
 30 |                   infinite-scroll-disabled="disabled"> 
 31 |                 <div v-if="allmessages.length>0"> 
 32 |                   <el-timeline-item v-for="(item,index) in allmessages"  :key="index" :timestamp='item.createTime' placement="top">
 33 |                     <el-card class="el-card-m" style="height:120px">
 34 |                       <h4>{{item.memberName}}：</h4>
 35 |                       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p>
 36 |                     </el-card>
 37 |                   </el-timeline-item>
 38 |                 </div>
 39 |                 <div v-else>
 40 |                    <el-timeline-item placement="top">
 41 |                     <el-card class="el-card-m" style="height:120px">
 42 |                       <h4>大黄子：</h4>
 43 |                       <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
 44 |                     </el-card>
 45 |                   </el-timeline-item>
 46 |                 </div>
 47 |               </el-timeline> 
 48 |               </div>
 49 |               <div class="el-card-messages">
 50 |                  <el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="message"></el-input>
 51 |                  <el-button type="info" round class="submit-message" @click="submitMessage">留言</el-button>
 52 |               </div>
 53 |             </el-card> 
 54 |           </div>
 55 |         </el-drawer>
 56 |       </div>
 57 |       <h2 style="margin-top:50px">Recommended for you</h2>
 58 |       <div v-if="essayList.length>0" class="essay-card">
 59 |         <card :essayList="essayList"/>
 60 |       </div>
 61 |       <div v-else class="essay-card">
 62 |         <h3>No posts found</h3>
 63 |         <p>
 64 |         Apparently there are no posts at the moment, check again later.
 65 |       </p>
 66 |       </div>
 67 |        
 68 |       <!-- <circle class="progress-ring__circle js-progress" fill="transparent" r="23" stroke-width="3" cx="25" cy="25" style="stroke-dasharray: 157.08, 157.08; stroke-dashoffset: 141.372;"></circle> -->
 69 |      
 70 |   </div>
 71 |   
 72 | </template>
 73 | 
 74 | <script>
 75 | import Card from '@/components/card'
 76 |   export default { 
 77 |     components: {
 78 |       Card
 79 |   },
 80 |   data() {
 81 |     return {
 82 |         essayDetail: {},
 83 |         essayContent: '',
 84 |         essayImg:'',
 85 |         essayList:[],
 86 |         id: this.$Base64.decode(this.$route.params.id),
 87 |         contente:'',
 88 |         drawer: false,
 89 |         count: 10,
 90 |         loading: false,
 91 |         message:'',
 92 |         allmessages:[]
 93 |     };
 94 |   },
 95 |   created() {
 96 |      this.getEssay();
 97 |       this.findMessage();
 98 |      this.$router.afterEach((to,from,next)=>{
 99 | 　　　　window,scrollTo(0,0)
100 | 　　})
101 |   },
102 |   mounted() {
103 | 
104 |   },
105 |   watch:{
106 |     $route:{
107 |         handler(newVal,oldVal){
108 |             this.id=this.$Base64.decode(newVal.params.id),
109 |             this.getEssay()
110 |         }
111 |     }
112 |   },
113 |  
114 |   methods: {
115 |     submitMessage(){
116 |       if(this.message=='' || this.message.replace(/(^\s*)|(\s*$)/g, "")==""){
117 |           this.$message('写点啥提交也行呀😉');
118 |           return;
119 |       }
120 |       this.$post('/api/blog/saveBlogMessage',{
121 |         essayId:this.id,
122 |         content:this.message,
123 |         contentType:0
124 |       })
125 |       .then(res => { 
126 |           if(res.code=='200'){
127 |             this.$message('留言成功');
128 |             this.message="";
129 |             this.findMessage();
130 |           }else if(res.code=='-1'){
131 |             this.$message(res.msg+"😉");
132 |           }
133 |       });
134 |     },
135 |     findMessage(){
136 |       this.$post('/api/blog/findMessage',{
137 |          essayId:this.id,
138 |       })
139 |       .then(res => {
140 |         this.allmessages = res.data;
141 |       });
142 |     },
143 |  
144 | 
145 |     mouseover(){//移进显示
146 |      this.getcontent();
147 |     },
148 | 
149 |     getcontent(){
150 |       let contents=[
151 |         '你能看到这句话一定是个细心的人呀。😁',
152 |         '不管生活如何，一定要充满希望！😝',
153 |         '年轻就要有年轻的样子。😉',
154 |         '哎呀，来看博客呀，怪不得这么有为。😊',
155 |         '看了文章之后有什么要对大黄子说的吗。😊'
156 |         ];
157 |       let cons=contents[Math.floor((Math.random()*contents.length))];
158 |       this.contente="大黄子说：“"+cons+"”";
159 |     },
160 | 
161 |     getEssay(){
162 |           this.$post('/api/blog/findEssayById',{
163 |               id:this.id
164 |           })
165 |           .then(res =>{
166 |             this.essayContent = res.data.essayContent
167 |             this.essayDetail = res.data
168 |             this.essayImg = res.data.essayImg
169 |             this.getListEssay(res.data.labelId,res.data.id);
170 |           })
171 |     },
172 |       /**
173 |        * 加载essayList
174 |        */
175 |       getListEssay(labelId,id){
176 |             this.$post('/api/blog/findEssayByRe',{
177 |               labelId:labelId,
178 |               id:id
179 |             })
180 |             .then((response) =>{
181 |               this.essayList=response.data.rows;
182 |             })
183 |       }
184 |   },
185 | }
186 | </script>
187 | 
188 | <style scoped>
189 | .l-banan{
190 |     margin: 0 auto;
191 |     width: 100%;
192 |     height: 500px;
193 |   }
194 | .image{
195 |    width: 100%; 
196 |    height:100%;
197 |   object-fit: cover;
198 | }
199 |  @media screen and (max-width: 3000px) and (min-width: 767px) {
200 |      .e-content{
201 |     width: 50%;
202 |     height: 70%;
203 |     margin:0 auto;
204 |     text-align:left;
205 |     margin-top: 50px;
206 |     }
207 |    }
208 |   /*
209 |   屏幕小于768px的
210 |   */
211 |   @media screen and (max-width:768px) and (min-width: 100px){ 
212 |     .e-content{
213 |     width: 90%;
214 |     height: 70%;
215 |      margin:0 auto; 
216 |     text-align:left;
217 |     margin-top: 50px;
218 |     }
219 |   }
220 | 
221 | 
222 | .e-banan{
223 |    background: rgb(235, 245, 247);
224 |    width: 100%;
225 |    height: 200px;
226 |    margin-top: 40px;
227 | }
228 | .essay-card{
229 |   margin-bottom: 80px;
230 | }
231 | .boy-content{
232 |   margin-top: 30px; 
233 | }
234 |  
235 | .mage{
236 |   margin-left: 30px;
237 |     cursor: pointer;
238 | }
239 | .el-drawer-d{
240 |   width: 100%;
241 |   height: 100%;
242 |   background: rgb(235, 245, 247);
243 |   text-align: left;
244 | }
245 |     .el-card-messages{
246 |       margin-top: 10px;
247 |     }
248 |     .infinite-list-wrapper{
249 |       width: 100%;
250 |       height: 330px;
251 |     }
252 |     .submit-message{
253 |         width: 100%; 
254 |         background: rgb(235, 245, 247);
255 |         color: cadetblue;
256 |         letter-spacing:20px;
257 |     }
258 |  @media screen and (max-width: 3000px) and (min-width: 767px) {
259 |     .el-card-d{
260 |       float: left;
261 |       margin-top: 20px;
262 |       margin-left: 10%; 
263 |       width: 80%;
264 |       height: 90%;
265 |     }
266 | 
267 |    }
268 |   /*
269 |   屏幕小于768px的
270 |   */
271 |   @media screen and (max-width:768px) and (min-width: 100px){  
272 |      .el-card-d{
273 | 
274 |       width: 100%;
275 |       height: 100%;
276 |     }
277 |   }
278 |   /*
279 |     变更  v-html 中的 img样式
280 |    */
281 | article >>> img{
282 |   width: 100%;
283 |   height: 100%;
284 |   object-fit: cover;
285 | } 
286 | </style>


--------------------------------------------------------------------------------
/src/components/nav/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |       <div class="navs" data-aos="fade-down">
  4 |         
  5 |           <img src='../../assets/img/boy.png' class="nav-image" @click="changeStyle('home')"/>
  6 |           <div class="nav"   :class="{'changeStyle':changeSelectStyle == 'home'}" @click="changeStyle('home')">Home</div>
  7 |           <div class="nav"    :class="{'changeStyle':changeSelectStyle == 'code'}"  @click="changeStyle('code')">Code</div>
  8 |           <div class="nav"   :class="{'changeStyle':changeSelectStyle == 'life'}"  @click="changeStyle('life')">Life</div>
  9 |           <div class="nav"   :class="{'changeStyle':changeSelectStyle == 'author'}"  @click="changeStyle('author')" >Author </div> 
 10 |           <div class="nav-search"  >
 11 |             <i class="el-icon-more-outline" ref="outlineShow" style="font-size:40px;" @click="showCards" v-show="outlineShow"></i>
 12 |               <i class="el-icon-more" style="font-size:40px;" @click="showCards" v-show="outlineNo"></i>
 13 |             <i><img class="el-icon-message" src='../../assets/img/message.png' @click="changeStyle('message')"></i> 
 14 |           </div>
 15 |           <!-- save github  -->
 16 |           <a href="https://github.com/huangjiangmin/vue_blog" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
 17 |             <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 18 |             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 19 |             <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
 20 |             </svg>
 21 |           </a>
 22 |             
 23 |       <transition name="el-zoom-in-top"> 
 24 |          <div class="show-card" v-show="divContent">
 25 |            <h3 class="card-recent"> Recent articles</h3>
 26 |            <div class="small-card">
 27 |               <el-row>
 28 |                 <el-col :span="6" v-for="(item, index) in essayList" :key="index">
 29 |                   <el-card :body-style="{ padding: '0px'}" class="card-blog">
 30 |                     <img :src="item.essayImg" class="nav-show-image"  @click="getEssayDetail(item.id)"> 
 31 |                     <div class="card-massges" @click="getEssayDetail(item.id)">
 32 |                       <p class="card-m" >{{item.essayTitle}}</p>
 33 |                     </div> 
 34 |                   </el-card>
 35 |                 </el-col>
 36 |               </el-row>
 37 |            </div>
 38 |            <div>
 39 |              <h3 class="nav-tags">Tags</h3>
 40 |              <div class="tags-div">
 41 |              <div class="tags" v-for="(item, index) in tags" :key="index" @click="goLabels(item.id,item.labelName)">{{item.labelName}}</div>
 42 |              </div>
 43 |            </div>
 44 |           </div>
 45 |       </transition>
 46 |        </div>
 47 |       </div>
 48 | </template>
 49 | 
 50 | <script>
 51 |   export default {
 52 |   data() {
 53 |     return {
 54 |         changeSelectStyle:'',
 55 |         divContent:false,
 56 |         outlineShow:true,
 57 |         outlineNo:false,
 58 |         essayList:[],
 59 |         tags:[],
 60 |         imgurl:'../../assets/img/boy.png'
 61 |     };
 62 |   },
 63 |   created(){ document.addEventListener('click',(e)=>{
 64 |           if(!this.$refs.outlineShow.contains(e.target)){
 65 |             this.divContent =false;
 66 |             this.outlineShow = true;
 67 |             this.outlineNo = false
 68 |             
 69 |           }   
 70 |       })
 71 |   },
 72 |   mounted() {
 73 |   },
 74 |   methods: {
 75 | 
 76 | 
 77 |       changeStyle(val) {
 78 |          this.changeSelectStyle = val;
 79 |          this.$router.push('/'+val);
 80 |       },
 81 |       showCards(){
 82 |         this.divContent = !this.divContent;
 83 |         this.outlineShow = !this.outlineShow;
 84 |         this.outlineNo = !this.outlineNo;
 85 |         //出现下拉，加载数据
 86 |         if(this.outlineNo==true){
 87 |           this.getListEssay();
 88 |           this.getAllLabel();
 89 |         }
 90 |       },
 91 |       getEssayDetail(bid){
 92 |         let id= this.$Base64.encode(bid);
 93 |         this.$router.push(`/essaydetail/${id}`)
 94 |       },
 95 |       getListEssay(){
 96 |         this.$post('/api/blog/findEssay',{ 
 97 |         })
 98 |         .then((response) =>{
 99 |           this.essayList=response.data.rows.slice(0,4); 
100 |         })
101 |       },
102 |       getAllLabel(){
103 |         this.$post('/api/blog/findAllLabel',{
104 | 
105 |         }).then((res) => {
106 |           this.tags=res.data;
107 |         })
108 |       },
109 |        goLabels(blabelId,labelName){
110 |         let labelId= this.$Base64.encode(blabelId);
111 |         if(labelName=="Author"){
112 |             
113 |             this.$router.push('/author');
114 |         }else if(labelName=="life"){
115 |             this.$router.push('/Life');
116 |         }
117 |         else{
118 |             this.$router.push(`/labels/${labelId}/${labelName}`)
119 |         }
120 |       
121 |       }
122 |     }
123 |   }
124 | </script>
125 | 
126 | <style lang="less" scoped>
127 | 
128 | // @media screen and (max-width: 3000px) and (min-width: 767px) {
129 |     /* GitHub Cornor */
130 |     .github-corner :hover .octo-arm {
131 |         animation: octocat-wave 560ms ease-in-out;
132 |     }
133 |    .github-corner >svg {
134 |      fill: rgb(0, 0, 0) !important;
135 |      color: rgb(255, 255, 255) !important;
136 |    }
137 |     .github-corner .github-corner:hover .octo-arm {
138 |       animation: none;
139 |     }
140 |     .github-corner .github-corner .octo-arm {
141 |       animation: octocat-wave 560ms ease-in-out;
142 |     }
143 |   // }
144 |   @-moz-keyframes octocat-wave {
145 |     0%, 100% {
146 |       -webkit-transform: rotate(0);
147 |       -moz-transform: rotate(0);
148 |       -ms-transform: rotate(0);
149 |       -o-transform: rotate(0);
150 |       transform: rotate(0);
151 |     }
152 |     20%, 60% {
153 |       -webkit-transform: rotate(-25deg);
154 |       -moz-transform: rotate(-25deg);
155 |       -ms-transform: rotate(-25deg);
156 |       -o-transform: rotate(-25deg);
157 |       transform: rotate(-25deg);
158 |     }
159 |     40%, 80% {
160 |       -webkit-transform: rotate(10deg);
161 |       -moz-transform: rotate(10deg);
162 |       -ms-transform: rotate(10deg);
163 |       -o-transform: rotate(10deg);
164 |       transform: rotate(10deg);
165 |     }
166 |   }
167 |   @-webkit-keyframes octocat-wave {
168 |     0%, 100% {
169 |       -webkit-transform: rotate(0);
170 |       -moz-transform: rotate(0);
171 |       -ms-transform: rotate(0);
172 |       -o-transform: rotate(0);
173 |       transform: rotate(0);
174 |     }
175 |     20%, 60% {
176 |       -webkit-transform: rotate(-25deg);
177 |       -moz-transform: rotate(-25deg);
178 |       -ms-transform: rotate(-25deg);
179 |       -o-transform: rotate(-25deg);
180 |       transform: rotate(-25deg);
181 |     }
182 |     40%, 80% {
183 |       -webkit-transform: rotate(10deg);
184 |       -moz-transform: rotate(10deg);
185 |       -ms-transform: rotate(10deg);
186 |       -o-transform: rotate(10deg);
187 |       transform: rotate(10deg);
188 |     }
189 |   }
190 |   @-o-keyframes octocat-wave {
191 |     0%, 100% {
192 |       -webkit-transform: rotate(0);
193 |       -moz-transform: rotate(0);
194 |       -ms-transform: rotate(0);
195 |       -o-transform: rotate(0);
196 |       transform: rotate(0);
197 |     }
198 |     20%, 60% {
199 |       -webkit-transform: rotate(-25deg);
200 |       -moz-transform: rotate(-25deg);
201 |       -ms-transform: rotate(-25deg);
202 |       -o-transform: rotate(-25deg);
203 |       transform: rotate(-25deg);
204 |     }
205 |     40%, 80% {
206 |       -webkit-transform: rotate(10deg);
207 |       -moz-transform: rotate(10deg);
208 |       -ms-transform: rotate(10deg);
209 |       -o-transform: rotate(10deg);
210 |       transform: rotate(10deg);
211 |     }
212 |   }
213 |   @keyframes octocat-wave {
214 |     0%, 100% {
215 |       -webkit-transform: rotate(0);
216 |       -moz-transform: rotate(0);
217 |       -ms-transform: rotate(0);
218 |       -o-transform: rotate(0);
219 |       transform: rotate(0);
220 |     }
221 |     20%, 60% {
222 |       -webkit-transform: rotate(-25deg);
223 |       -moz-transform: rotate(-25deg);
224 |       -ms-transform: rotate(-25deg);
225 |       -o-transform: rotate(-25deg);
226 |       transform: rotate(-25deg);
227 |   }
228 |   40%, 80% {
229 |     -webkit-transform: rotate(10deg);
230 |     -moz-transform: rotate(10deg);
231 |     -ms-transform: rotate(10deg);
232 |     -o-transform: rotate(10deg);
233 |     transform: rotate(10deg);
234 |   }
235 | }
236 | 
237 |   /*
238 |   屏幕小于768px的
239 |   */
240 |   @media screen and (max-width:768px) and (min-width: 100px){ 
241 |      .navs{
242 |       width: 100%;
243 |       height: 80px;
244 |       /* line-height: 80px; */
245 |       background: rgb(254, 254, 254);
246 |  
247 |       .nav{
248 |       display: none;
249 |       }
250 |       .changeStyle{
251 |         font-weight: bold;
252 |       }
253 |       .nav-image{ 
254 |         float: left;
255 |         display: inline; 
256 |         margin-top: 10px;
257 |         margin-left: 30px; 
258 |       }
259 |       
260 |       .nav-search{
261 |       float: left; 
262 |       margin-left:28%;
263 |       margin-top: 23px;
264 |       }
265 |        .el-icon-message{
266 |           margin-left: 70px;
267 |           cursor: pointer;
268 |       }
269 |       .github-corner{
270 |         display: none;
271 |       }
272 |   }
273 |   .show-card{ 
274 |    width: 100%; 
275 |    background-image: url(../../assets/img/tags.jpeg);
276 |    z-index: 100; 
277 |    position:absolute;
278 |    margin-top: 100px;
279 |    height:450px ;      
280 |    border-top: 0.5px solid rgb(214, 212, 212);
281 |   .card-recent{
282 |     display: none;
283 |     margin-top: 20px;
284 |     margin-right: 65%;
285 |   }
286 |   .small-card{
287 |    display: none;
288 |    width:100%;
289 |    margin: 0 auto;
290 |     .el-col{
291 |     float: left;
292 |     margin-left: 20px;
293 |     width:100px;
294 |     height:100px; 
295 |       .nav-show-image{
296 |         width: 100%; 
297 |         height:140px; 
298 |         object-fit: cover;
299 |         transition: all 0.6s;
300 |         }
301 |       .nav-show-image:hover{
302 |         transform: scale(1.2);
303 |         }
304 |       .card-massges{
305 |         object-fit: cover;
306 |         height: 20px;
307 |         font-size: 15px;
308 |       }
309 |     }
310 |   }
311 |   .nav-tags{ 
312 |     float: left;
313 |     margin-top: 30px;
314 |     margin-left: 80px;
315 |     color: rgb(228, 236, 218);
316 |     font-size: 150%;
317 |   }
318 |   .tags-div{
319 |     float: right;
320 |     margin-right: 40%;
321 |     margin-top: 80px;
322 |     .tags{ 
323 |       margin-top: 15px;
324 |       font-size: 20px;
325 |       color: rgb(226, 238, 225);
326 |     }
327 |   }
328 |   }
329 | }
330 |   
331 |   @media screen and (max-width: 3000px) and (min-width: 767px) {
332 |      .navs{
333 |         width: 100%;
334 |         height: 80px;
335 |         /* line-height: 80px; */ 
336 |         .nav{
337 |         float:left;
338 |         margin-left: 40px;
339 |         font-size: 18px;
340 |         cursor: pointer;
341 |         margin-top: 30px;
342 |         }
343 |         .changeStyle{
344 |           font-weight: bold;
345 |         }
346 |         .nav-image{ 
347 |           float: left;
348 |           display: inline; 
349 |           margin-top: 10px; 
350 |           margin-left: 17%;
351 |         }
352 |         
353 |         .nav-search{
354 |         float: left;
355 |         margin-left: 15px;
356 |         margin-top: 23px;
357 |         cursor: pointer;
358 |         }
359 |         .el-icon-message{
360 |           margin-left: 400px;
361 |           cursor: pointer;
362 |         }
363 |     }
364 |      .show-card{
365 |    width: 100%;
366 |    height: 400px;
367 |    background: rgb(255, 255, 255);
368 |    z-index: 100; 
369 |    position:absolute;
370 |    margin-top: 100px;      
371 |    border-top: 0.5px solid rgb(214, 212, 212);
372 |   .card-recent{
373 |     margin-top: 20px;
374 |     margin-right: 65%;
375 |   }
376 |    .small-card{
377 |    width:75%;
378 |    margin: 0 auto;
379 |     .card-blog{ 
380 |     margin-left: 20px;
381 |     width:200px;
382 |     height:200px; 
383 |       .nav-show-image{
384 |         width: 100%; 
385 |         height:140px; 
386 |         object-fit: cover;
387 |         transition: all 0.6s;
388 |         }
389 |       .nav-show-image:hover{
390 |         transform: scale(1.2);
391 |         }
392 |       .card-massges{
393 |         object-fit: cover;
394 |         height: 20px;
395 |         font-size: 15px;
396 |       }
397 |     }
398 |   }
399 |   .nav-tags{
400 |    margin-top: 30px;
401 |    margin-right: 72%;
402 |   }
403 |    .tags-div{
404 |     margin-left: 200px;
405 |   }
406 |   .tags{
407 |     float:left;
408 |     margin-left:3%;
409 |     font-size: 18px;
410 |     cursor: pointer;
411 |     margin-top: 10px;
412 |     font-weight: bold;
413 |     }
414 |  }
415 | } 
416 |  
417 | </style>


--------------------------------------------------------------------------------
/src/assets/css/aos.css:
--------------------------------------------------------------------------------
1 | [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}


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