wow.js 加入

 package.json

@@ -25,7 +25,8 @@
        "vue-infinite-scroll": "^2.0.2",
        "vue-markdown": "^2.2.4",
        "vue-router": "^3.5.3",
        "vuex": "^3.6.2"
        "vuex": "^3.6.2",
        "wowjs": "^1.1.3"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.8.0",

 src/components/fixed/header.vue

@@ -5,7 +5,7 @@
                <router-link to="/">Home</router-link>
                <router-link to="/main2">乐谱搜索</router-link>
                <router-link to="/main3">我的网盘</router-link>
                <router-link to="/main4">友人帐</router-link>
                <router-link to="/link">友人帐</router-link>
                <router-link to="/login">登录</router-link>
                <!-- <router-link to="/comment">测试页</router-link> -->
            </div>

 src/components/group/articleListScorll.vue

@@ -1,14 +1,16 @@
<template>
    <div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div v-for="(temp,index) in data">
                <newArticle v-bind="temp" :index="index"></newArticle>
                <!-- <box5 v-bind="temp"></box5> -->
            </div>
            <div class="mySecret" v-if="data.length==0">
                <p>空空如也..</p>
            </div>
            
            <div v-for="(temp,index) in data" >
                <newArticle v-bind="temp" :index="index"></newArticle>
                <!-- <box5 v-bind="temp"></box5> -->
            </div>


            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
@@ -16,7 +18,7 @@
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;" id="dddadf">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="10" :pageSize="pageSize" :total="total" />
                    :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
            </div>
        </a-row>

@@ -65,6 +67,7 @@
        directives: {
            infiniteScroll
        },

        data() {
            return {
                typeId: "",
@@ -73,8 +76,9 @@
                busy: false,
                size: "small",
                total: 1,
                pageSize: 1,
                pageSize: 10,
                current: 1,
                defaultPageSize:10
            };
        },
        watch: {
@@ -87,8 +91,7 @@
                this.busy = true;
                this.$message.info('loading', 0.3);
                this.onChange(1);
            }

            },
        },
        activated() {
            window.addEventListener('scroll', this);
@@ -99,6 +102,7 @@
        beforeMount() {
            queryBlogArticleList({
                pageNo: this.current,
                pageSize:this.pageSize,
                typeId: this.typeId
            }).then((res) => {
                this.total = Number(res.data.total)
@@ -112,6 +116,7 @@
                this.current = current;
                queryBlogArticleList({
                    pageNo: current,
                    pageSize:this.pageSize,
                    typeId: this.typeId
                }).then((res) => {
                    this.busy = false;
@@ -127,6 +132,7 @@

                queryBlogArticleList({
                    pageNo: this.current + 1,
                    pageSize:this.pageSize,
                    typeId: this.typeId
                }).then((res) => {


 src/components/group/boxRight.vue

@@ -38,7 +38,7 @@
        data() {
            return {
                vo3: {
                    "link": "/main4",
                    "link": "/link",
                    title: "友情链接",
                    isShowRemark: true,
                    list: [{

 src/components/mini/box12-comment.vue

@@ -70,12 +70,15 @@
                    useName: "22",
                    userComment: "11",
                };
                this.$refs.replyBoxId.getMsgInfo(msgInfo);
                this.$nextTick(() => {

                    this.$refs.replyBoxId.getMsgInfo(msgInfo);
                });
            }
        },
        data() {
            return {
                visible: true,
                visible: false,
                commentListData: [{
                    userName: "bimo",
                    userComment: "1+1=2?",

 src/components/mini/box14-video.vue

New file
@@ -0,0 +1,123 @@
<template>

    <div class="test_wow">

            <section class="wow animate__slideOutUp test_wow" data-wow-duration="5s" data-wow-de>

                </section>

                <section class="wow animate__slideOutUp test_wow1" data-wow-duration="5s">

                </section> 

                <section class="wow animate__slideOutUp test_wow2" data-wow-duration="5s">

                </section> 

                <section class="wow animate__slideOutUp test_wow3" data-wow-duration="5s">

                </section> 

                <section class="wow animate__slideOutUp test_wow4" data-wow-duration="5s">

                </section>       

    </div>



</template>

<script>
    export default {

        name: 'Home',

        data() {

            return {

            }

        },

        mounted() {

            new this.$wow.WOW().init()

        }

    }
</script>

<style scoped>
    .test_wow {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #212121;

        margin: 0 auto;

    }

    .test_wow1 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #741919;

        margin: 0 auto;

    }

    .test_wow2 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #2b0f44;

        margin: 0 auto;

    }

    .test_wow3 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #558614;

        margin: 0 auto;

    }

    .test_wow4 {

        position: relative;

        width: 1000px;

        height: 400px;

        background: #440707;

        margin: 0 auto;

    }
</style>

 src/components/mini/tagInfo.vue

@@ -1,11 +1,11 @@
<template>
    <div class="swichTag ">
        <a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
        <h3 class="layui-timeline-title">捏脸</h3>
        <a-timeline pending="...">
            <p slot="pendingDot" style="font-size: 18px;" />
            <a-timeline-item color="">
                <a-icon slot="dot" type="form" style="font-size: 18px;" />
                <!-- <a-icon slot="dot" type="form" style="font-size: 18px;" /> -->
                <a-icon type="message" slot="dot" style="font-size: 18px;" />
                <br>
                <p>
                <ul>
@@ -32,14 +32,27 @@
                </p>

            </a-timeline-item>
            <!-- <a-timeline-item color="">
                <h3 class="layui-timeline-title">后续blog风格设计..</h3>
                <a-icon type="container" slot="dot" style="font-size: 18px;" />
                <br>
                <ul>
                    <li> 第一要义 干净,凝练</li>
                    <li> 交互感:动效(适量,微小,无感知,恰到好处)</li>
                    <li> 响应式布局下,统一页边距,字体,行间距,圆角</li>
                </ul>
            </a-timeline-item>
 -->
            <br>
            <h3 class="layui-timeline-title">那些对我而言,有意义的时刻..</h3>
            <br>
            <a-timeline-item color="">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2022-02-22</h3>
                <span style="text-decoration:line-through" >全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span>
                <span style="text-decoration:line-through">全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span>
                <p class="myTip">(终于是赶在这个全是2的日子前把旧站有用的数据迁移了过来)</p>
            </a-timeline-item>
			

            <a-timeline-item color="">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2022-01-11</h3>

 src/components/swichLabel/main3-show.vue

@@ -3,7 +3,8 @@
        <a-row>
            <a-col v-bind="colApiMain " class="holdHeight">
                <a-page-header title="我的网盘" style="padding: 0px;" @back="() => this.$router.go(-1)" />
                <net-file></net-file>
                <!-- <net-file></net-file> -->
                <myVideo></myVideo>
            </a-col>
        </a-row>
    </div>
@@ -11,9 +12,11 @@

<script>
    import netFile from "../mini/box9-netFile.vue"
    import myVideo from "../mini/box14-video.vue"
    export default {
        components: {
            netFile,
            myVideo,
        },

        data() {

 src/config/router.config.js

@@ -5,7 +5,7 @@
import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'
import main3 from '../components/swichLabel/main3-show.vue'
import main4 from '../components/swichLabel/main4-show.vue'
import link from '../components/swichLabel/main4-show.vue'
import login from '../components/swichLabel/main5-show.vue'

import box1 from '../components/mini/box1-info.vue'
@@ -57,7 +57,7 @@
                        path: '/mdDetail',
                        component: mdDetail,
                    }, {
                        path: '/main4',
                        path: '/link',
                        component: boxFriend,
                    }
                ]
@@ -81,8 +81,8 @@
                component: main3,
            },
            {
                path: '/main4',
                component: main4,
                path: '/link',
                component: link,
            }, {
                path: '/login',
                component: login,

 src/main.js

@@ -8,12 +8,18 @@
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);

import wow from 'wowjs'
import 'animate.css'
Vue.prototype.$wow=wow

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer,{productionTip:false})
Vue.use(APlayer, {
    productionTip: false
})
import './mock/'

Vue.prototype.$axios = axios