无限列表滚动

 package.json

@@ -18,9 +18,9 @@
        "navigator": "^1.0.1",
        "text-loader": "^0.0.1",
        "vue": "^2.6.14",
        "vue-infinite-scroll": "^2.0.2",
        "vue-markdown": "^2.2.4",
        "vue-router": "^3.5.3",
        "vue-simple-uploader": "^0.7.6",
        "vuex": "^3.6.2"
    },
    "devDependencies": {

 src/assets/baby.htm

New file
@@ -0,0 +1,29 @@
<p>Baby Song - 陈奕迅 (Eason Chan)</p>
<p>词：岑宁儿</p>
<p>曲：岑宁儿</p>
<p>你的眼睛 像颗水晶通透</p>
<p>里面有一个无穷无尽的宇宙</p>
<p>小小的你 在你小小的梦里</p>
<p>把我所有大大的事情都吹进风里</p>
<p>我为我将对你撒的谎先跟你道歉</p>
<p>当你发现黑白不是那么的分明</p>
<p>世界不是那么的公平</p>
<p>别太失望 我讲的是个梦想</p>
<p>不用太听我们的话</p>
<p>不要让任何人告诉你</p>
<p>你该怎样对待世界</p>
<p>或它该怎对你</p>
<p>要跟现在一样随心</p>
<p>让你的眼睛和心依然纯净</p>
<p>可惜世界不及你好</p>
<p>原谅我们 我们都还在找</p>
<p>而时间它只负责流动</p>
<p>不负责 育你成长</p>
<p>不过你只需要倾听</p>
<p>倾听你的心</p>
<p>你的眼睛 像颗水晶通透</p>
<p>里面有一个无穷无尽的宇宙</p>
<p>小小的你 在你小小的梦里</p>
<p>把我所有大大的事情都吹进风里</p>
<p>都吹进风里</p>
<p>-</p>

 src/assets/mowenwei.jpg

 src/assets/shijie.htm

New file
@@ -0,0 +1,12 @@
<p>晚风中闪过 几帧从前啊</p>
<p> 飞驰中旋转 已不见了吗</p>
<p> 远光中走来 你一身晴朗</p>
<p> 身旁那么多人 可世界不声 不响</p>
<p> 笑声中浮过 几张旧模样</p>
<p> 留在梦田里 永远不散场</p>
<p> 暖光中醒来 好多话要讲</p>
<p> 世界那么多人 可是它不声 不响</p>
<p> 这世界有那么个人</p>
<p> 活在我 飞扬的青春</p>
<p> 在泪水里浸湿过的长吻</p>
<p> 常让我 想啊想出神</p>

 src/components/fixed/header.vue

@@ -7,7 +7,7 @@
                <router-link to="/main2">乐谱搜索 »</router-link>
            </a-col>
            <a-col v-bind="showSmall">
                <router-link to="/main3">动漫搜索 »</router-link>
                <router-link to="/main3">我的网盘 »</router-link>
            </a-col>
            <a-col v-bind="showMain">
                <router-link to="/tagInfo">关于我 »</router-link>

 src/components/group/articleList.vue

@@ -1,5 +1,11 @@
<template>
    <div >
    <div class="">
        <!-- <a-button v-if="tagName">{{tagName}}</a-button> -->
        <a-affix :offset-top="80">
            <a-button @click="top += 70">
                Affix top
            </a-button>
        </a-affix>
        <box5></box5>
        <box5></box5>
        <box5></box5>
@@ -13,6 +19,7 @@
<script>
    import box5 from "../mini/box5-article.vue"
    export default {
        props: ['tagName'],
        components: {
            box5
        },
@@ -28,5 +35,19 @@
            }
        }
    }
	
</script>

<style lang="less">
    .container {
        height: 700px;
    }

    .content {
        height: 95%;
        overflow-y: scroll;
    }

    .content::-webkit-scrollbar {
        display: none;
    }
</style>

 src/components/group/articleListScorll.vue

New file
@@ -0,0 +1,124 @@
<template>
    <div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div v-for="temp in data">
                <box5 v-bind="temp"></box5>
            </div>
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
        </div>
        <div style="position:fixed;bottom: 10px;" id="dddadf">
            <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                :defaultPageSize="pageSize" :total="total" />
        </div>
        <a-back-top>
            <a-icon type="up" />回到顶部
        </a-back-top>
    </div>
</template>
<script>
    import infiniteScroll from 'vue-infinite-scroll';
    import box5 from "../mini/box5-article.vue"
    import babyActicle from '../../assets/baby.htm'
    import shijie from '../../assets/shijie.htm'

    var obj1 = {
        "source": babyActicle,
        "title": "陈奕迅-Body Song 歌词",
        "read": 1101,
        "like": 233,
        "folder": "歌词",
        "publishTime": "2021-05-26",
    }
    var obj2 = {
        "source": shijie,
        "title": "这世界那么多人-吉他谱",
        "read": 3101,
        "like": 113,
        "folder": "吉他谱",
        "publishTime": "2020-05-26",
    }
    var obj3 = {
        "source": shijie,
        "title": "遥远的它-吉他谱",
        "read": 201,
        "like": 13,
        "folder": "吉他谱",
        "publishTime": "2022-07-26",
    }

    export default {
        components: {
            box5
        },
        directives: {
            infiniteScroll
        },
        data() {
            return {

                data: [],
                loading: false,
                busy: false,
                size: "small",
                total: 500,
                pageSize: 20,
                current: 1,
            };
        },
        beforeMount() {
            this.data = [obj1, obj2,obj3];
        },
        methods: {
            onChange(current) {
                this.current = current;
                this.data = [obj2, obj3, obj1, obj2];
            },
            loadMore() {
                const data = this.data;
                this.loading = true;

                this.current += 1;
                console.log(this.current);
                console.log(this.busy);

                if (data.length > 15) {
                    this.$message.warning('没有更多了');
                    this.busy = true;
                    this.loading = false;
                    return;
                }


                setTimeout(function() {
                    this.loading = false;
                }, 1000);

                this.data = data.concat(obj1, obj3, obj2, obj3, obj1);

            },
        },
    };
</script>
<style>
    /* .test {
        overflow: hidden;
        height: 700px;
    }

    .infinite-container {
        overflow: auto;
    }

    .infinite-container::-webkit-scrollbar {
        display: none;
    } */

    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>

 src/components/group/tempScroll.vue

New file
@@ -0,0 +1,121 @@
<template>
    <div v-infinite-scroll="handleInfiniteOnLoad" class="demo-infinite-container" :infinite-scroll-disabled="busy"
        :infinite-scroll-distance="10">
        <a-list :data-source="data">
			
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta :description="item.email">
                    <a slot="title" :href="item.href">{{ item.name.last }}</a>
                    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </a-list-item-meta>
                <div>Content</div>
            </a-list-item>
			
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
        </a-list>
    </div>
</template>
<script>
    import infiniteScroll from 'vue-infinite-scroll';

    var tempData = [{
        "gender": "female",
        "name": {
            "title": "Miss",
            "first": "Alexis",
            "last": "Novak"
        },
        "email": "alexis.novak@example.com",
        "nat": "CA"
    }, {
        "gender": "female",
        "name": {
            "title": "Mrs",
            "first": "Rajaa",
            "last": "Seegers"
        },
        "email": "rajaa.seegers@example.com",
        "nat": "NL"
    }, {
        "gender": "male",
        "name": {
            "title": "Mr",
            "first": "Elias",
            "last": "Pelto"
        },
        "email": "elias.pelto@example.com",
        "nat": "FI"
    }, {
        "gender": "male",
        "name": {
            "title": "Mr",
            "first": "Mille",
            "last": "Christensen"
        },
        "email": "mille.christensen@example.com",
        "nat": "DK"
    }, {
        "gender": "male",
        "name": {
            "title": "Mr",
            "first": "Gerardo",
            "last": "Marquez"
        },
        "email": "gerardo.marquez@example.com",
        "nat": "ES"
    }];

    export default {
        directives: {
            infiniteScroll
        },
        data() {
            return {
                data: [],
                loading: false,
                busy: false,
            };
        },
        beforeMount() {
            this.data = tempData;
        },
        methods: {

            handleInfiniteOnLoad() {
                const data = this.data;
                this.loading = true;
                if (data.length > 10) {
                    this.$message.warning('Infinite List loaded all');
                    console.log(1);
                    this.busy = true;
                    this.loading = false;
                    return;
                }

                setTimeout(function() {
                    this.loading = false;
                }, 2000);
                this.data = data.concat(tempData);

            },
        },
    };
</script>
<style>
    .demo-infinite-container {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: auto;
        padding: 8px 24px;
        height: 300px;
    }

    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>

 src/components/layouts/baseLayout.vue

@@ -1,10 +1,10 @@
<template>
    <a-layout>
        <a-layout-header :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
            <tag-Header />
        <a-layout-header class="scrolling-navbar"  :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
            <tag-Header  />
        </a-layout-header>

        <router-view class="fade"></router-view>
        <router-view ></router-view>

        <a-layout-footer>
            <tagFooter />
@@ -60,8 +60,11 @@
        .ant-layout {}

        .ant-layout-header {
			
            // background-color: #ffffff;
            backdrop-filter: saturate(180%) blur(1em);
            -webkit-backdrop-filter: blur(5px);	
			
            background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%);
        }

@@ -89,6 +92,12 @@
        letter-spacing: 0.8px;
        line-height: 22px;
    }
	
    .scrolling-navbar {
        will-change: background, padding,height;
        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    }

    .fade {
        -webkit-animation-name: "fade";

 src/components/mini/box2-class.vue

@@ -4,7 +4,7 @@
        <div class="blog-scroll ">
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list1">
                    <router-link to="/main1">
                    <router-link to='/main1'>
                        <span>{{item.name}}</span>
                    </router-link>

@@ -63,6 +63,30 @@
                }, {
                    name: "星标",
                    count: 14
                },{
                    name: "Tag",
                    count: 133
                }, {
                    name: "专题",
                    count: 10
                }, {
                    name: "偏好",
                    count: 12
                }, {
                    name: "星标",
                    count: 14
                },{
                    name: "Tag",
                    count: 133
                }, {
                    name: "专题",
                    count: 10
                }, {
                    name: "偏好",
                    count: 12
                }, {
                    name: "星标",
                    count: 14
                }]
            }
        }

 src/components/mini/box3-archive.vue

@@ -8,7 +8,7 @@
        <div class="blog-scroll ">
            <div v-for="yearData in myData">
                <router-link to="/tagTime?type=2">
                    <p class="blog-pigeonhole-p">{{yearData.year}}</p>
                    <p class="blog-pigeonhole-p">{{yearData.year}}年</p>
                </router-link>
                <div class="blog-pigeonhole-list">
            
@@ -55,14 +55,6 @@
                            {
                                "month": "10",
                                "count": 7
                            },
                            {
                                "month": "9",
                                "count": 6
                            },
                            {
                                "month": "8",
                                "count": 5
                            },
                            {
                                "month": "7",

 src/components/mini/box5-article.vue

@@ -9,65 +9,45 @@
        </div> -->

        <div class="article-meta">
            <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
            <h2 class="article-title">{{title}}</h2>
            <div class="article-split-line"></div>
            <div class="article-summary blog-scroll">
                <p>Baby Song - 陈奕迅 (Eason Chan)</p>
                <p>词：岑宁儿</p>
                <p>曲：岑宁儿</p>
                <p>你的眼睛 像颗水晶通透</p>
                <p>里面有一个无穷无尽的宇宙</p>
                <p>小小的你 在你小小的梦里</p>
                <p>把我所有大大的事情都吹进风里</p>
                <p>我为我将对你撒的谎先跟你道歉</p>
                <p>当你发现黑白不是那么的分明</p>
                <p>世界不是那么的公平</p>
                <p>别太失望 我讲的是个梦想</p>
                <p>不用太听我们的话</p>
                <p>不要让任何人告诉你</p>
                <p>你该怎样对待世界</p>
                <p>或它该怎对你</p>
                <p>要跟现在一样随心</p>
                <p>让你的眼睛和心依然纯净</p>
                <p>可惜世界不及你好</p>
                <p>原谅我们 我们都还在找</p>
                <p>而时间它只负责流动</p>
                <p>不负责 育你成长</p>
                <p>不过你只需要倾听</p>
                <p>倾听你的心</p>
                <p>你的眼睛 像颗水晶通透</p>
                <p>里面有一个无穷无尽的宇宙</p>
                <p>小小的你 在你小小的梦里</p>
                <p>把我所有大大的事情都吹进风里</p>
                <p>都吹进风里</p>
                <p>-</p>
            </div>
            <div class="article-summary blog-scroll" v-html="source" />
            <div class="article-split-line"></div>
            <div class="article-message-info ">
                <ul>
                    <li>
                        <a-icon type="read" />
                        <!-- <a-icon type="eye" /> -->
                        <span> 101</span>
                    </li>
                    <li>
                        <a-icon type="like" />
                        <span> 233</span>
                <a-row type="flex" justify="center">
                    <a-col>
                        <div class="article-item">
                            <a-icon type="read" />
                            <!-- <a-icon type="eye" /> -->
                            <span> {{read}}</span>
                        </div>
                    </a-col>
                    <a-col>
                        <div class="article-item">
                            <a-icon type="like" />
                            <span> {{like}}</span>
                        </div>

                    </li>
                    <li>
                        <a-icon type="folder-open" />
                        <span> 歌词</span>
                    </li>
                    <li>
                        <a-icon type="clock-circle" />
                        <span> 2020-05-26 18:00:00</span>
                    </li>
                </ul>
                    </a-col>
                    <a-col>
                        <div class="article-item">
                            <a-icon type="folder-open" />
                            <span> {{folder}}</span>
                        </div>
                    </a-col>
                    <a-col>
                        <div class="article-item">
                            <a-icon type="clock-circle" />
                            <span> {{publishTime}}</span>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div class="article-split-line"></div>
            <div class="article-read-btn">
                <router-link class="btn" to="/mdDetail">阅读全文 »</router-link>
                <router-link class="btn" to="/mdDetail">
                    <span>阅读全文 »</span>
                </router-link>
            </div>
        </div>

@@ -76,14 +56,35 @@
</template>

<script>
    import babyActicle from '../../assets/baby.htm'
    export default {
        props: {
            title: "",
            list: ""
            source: {
                default: babyActicle
            },
            "title": {
                default:"陈奕迅-Body Song 歌词",
            },
            "read": {
                default:1011,
            },
            "like": {
                default:233,
            },
            "folder": {
                default:"歌词",
            },
            "publishTime": {
                default:"2020-05-26",
            }
        },
        data() {
            return {

                // "title": "陈奕迅-Body Song 歌词",
                // "read": 1011,
                // "like": 233,
                // "folder": "歌词",
                // "publishTime": "2020-05-26",
            }
        }
    }
@@ -92,12 +93,17 @@
</script>

<style lang="less">
    .article-item {
        padding: 0px 5px;
    }

    /*文章部分*/
    .blog-article {
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 15px;
        border: none;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
    }


 src/components/mini/box8-panal.vue

@@ -1,65 +1,28 @@
<template>
    <div>
        <div class="article-meta ">
    <div class="holdHeight">
        <a-row type="flex" justify="center" >
            <a-col v-for="temp in [1,2,1,1,1,1,1]">
                <div class="myCard"  style="height: 200px;width: 220px; border-radius: 20px;">
                    <a-card :hoverable="true" size="small">
                        <template slot="cover">
                            <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" />
                        </template>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>卡片面板</legend>
            </fieldset>
                        <template slot="actions" class="ant-card-actions">
                            <a-icon key="arrowDown" type="arrow-down" />
                            <a-icon key="edit" type="edit" />
                            <a-icon key="ellipsis" type="ellipsis" />
                        </template>

            <div class="layui-bg-gray" style="padding: 30px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">卡片面板</div>
                            <div class="layui-card-body">
                                卡片式面板面板通常用于非白色背景色的主体内<br>
                                从而映衬出边框投影
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">卡片面板</div>
                            <div class="layui-card-body">
                                结合 layui 的栅格系统<br>
                                轻松实现响应式布局
                            </div>
                        </div>
                    </div>
                        <a-card-meta title="这世界那么多人" description="吉他谱 莫文蔚">
                        </a-card-meta>
                    </a-card>
                </div>
            </div>
            </a-col>

        </div>
        <div class="blog-cell">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>卡片面板</legend>
            </fieldset>

            <div class="layui-bg-gray" style="padding: 30px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">卡片面板</div>
                            <div class="layui-card-body">
                                卡片式面板面板通常用于非白色背景色的主体内<br>
                                从而映衬出边框投影
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">卡片面板</div>
                            <div class="layui-card-body">
                                结合 layui 的栅格系统<br>
                                轻松实现响应式布局
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        </a-row>
        <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
            :total="total" />

    </div>

@@ -70,7 +33,13 @@
        name: "box",
        data() {
            return {

                data: [],
                loading: false,
                busy: false,
                size: "small",
                total: 50,
                pageSize: 10,
                current: 4,
            }
        }
    }
@@ -79,5 +48,16 @@
</script>

<style lang="less">
    .holdHeight {
        // background-color: beige;
		
    }

    .myCard {
        padding: 10px 10px;
    }

    .myCardCover {
        object-fit: scale-down
    }
</style>

 src/components/mini/box9-netFile.vue

@@ -22,8 +22,6 @@

<style>
    .module-box{
        background-color: #FFFFFF;
        border-radius: 20px;
    }
     
</style>

 src/components/mini/tagInfo.vue

@@ -5,50 +5,48 @@
        <a-divider :dashed="true" orientation="left">关于我的一些..小故事</a-divider>

        <a-timeline pending="...">
            <p slot="pendingDot"  style="font-size: 18px;" />
                <a-timeline-item  color="green">
                    <a-icon slot="dot" type="form" style="font-size: 18px;" />
                    <h4 >我是?</h4>
                    <p>
            <p slot="pendingDot" style="font-size: 18px;" />
            <a-timeline-item color="white">
                <a-icon slot="dot" type="form" style="font-size: 18px;" />
                <h4>我...</h4>
                <p>
                    <ul>
                        <li> 尘世间一个迷途小码农</li>
                        <li> 喜欢钢琴~喜欢吉他 </li>
                    </ul>
                    </p>
                </a-timeline-item>
				
                <a-timeline-item  color="green">
                    <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                    <h4 class="layui-timeline-title">202108</h4>
                    <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
                        <br>此刻的心情,也是平静了许多,想来,这周算是近年来比较忙的周末了吧,从周五凌晨1点就开始马不停蹄..
                    </p>
                    <br>然后,从哪里说起好呢,似乎从哪里起头都是一笔坏账啊..
                    <br>临上车前,我靠在车站的栏杆上,她拿着个电动小风扇,倒是自己不吹,直愣愣对着我,在我旁边吱吱说话,不过此刻我早就不记得她说过了什么,
                    <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
                    <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
                    <br>
                    <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
                    <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
                    <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
                    <br>
                    <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
                    <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
                    <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                    <br>
                    <br>end..希望我们的故事还没有终点..
                </a-timeline-item>
			
            <a-timeline-item  color="green">
                <a-icon slot="dot" type="align-center" style="font-size: 18px;" />
                <p>
					
                </p>
            </a-timeline-item>

            <a-timeline-item color="white">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h4 class="layui-timeline-title">202108</h4>
                <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
                    <br>此刻的心情,也是平静了许多,想来,这周算是近年来比较忙的周末了吧,从周五凌晨1点就开始马不停蹄..
                </p>
                <br>然后,从哪里说起好呢,似乎从哪里起头都是一笔坏账啊..
                <br>临上车前,我靠在车站的栏杆上,她拿着个电动小风扇,倒是自己不吹,直愣愣对着我,在我旁边吱吱说话,不过此刻我早就不记得她说过了什么,
                <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
                <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
                <br>
                <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
                <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
                <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
                <br>
                <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
                <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
                <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                <br>
                <br>end..希望我们的故事还没有终点..
            </a-timeline-item>

            <a-timeline-item color="<white></white>">
                <a-icon slot="dot" type="align-left" style="font-size: 18px;" />

                    <br><em>爱她所爱,思她所思,为她承担伤痛</em>
                    <br>度过苦难 无论贫寒,无论卑贱或富贵
                    <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
                    <br>为她收起翅膀
                    <br>不离不弃,直至永远
                </p>
            </a-timeline-item>
        </a-timeline>


 src/components/mini/tagTime.vue

@@ -10,7 +10,7 @@
                    {{yearData.year}}年
                </a-divider>

                <a-timeline-item v-for="monthData in yearData.monthList" color="green">
                <a-timeline-item v-for="monthData in yearData.monthList" color="white">
                    <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                    <h3>{{monthData.month}}</h3>
                    <div v-for="article in monthData.list">
@@ -23,6 +23,138 @@
</template>

<script>
    var tempList = [{
            "year": "2022",
            "monthList": [{
                    "month": "9月18日",
                    "list": [{
                            "name": "陈奕迅-Body Song 歌词1",
                            "remark": "随笔"
                        },
                        {
                            "name": "vue动态路由异步加载",
	
                        }
                    ]
                },
                {
                    "month": "9月08日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
                {
                    "month": "8月16日",
                    "list": [{
                            "name": "陈奕迅-Body Song 歌词1",
                            "remark": "111"
                        },
                        {
                            "name": "陈奕迅-Body Song 歌词1",
	
                        },
                        {
                            "name": "陈奕迅-Body Song 歌词2",
                            "remark": "22"
                        }
                    ]
                },
                {
                    "month": "4月09日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
                {
                    "month": "3月18日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
            ]
        },
        {
            "year": "2021",
            "monthList": [{
                    "month": "9月18日",
                    "list": [{
                            "name": "陈奕迅-Body Song 歌词1",
                            "remark": "随笔"
                        },
                        {
                            "name": "vue动态路由异步加载",
	
                        }
                    ]
                },
                {
                    "month": "9月12日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
                {
                    "month": "9月09日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
                {
                    "month": "9月08日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
	
            ]
        },
        {
            "year": "2020",
            "monthList": [{
                    "month": "9月18日",
                    "list": [{
                            "name": "陈奕迅-Body Song 歌词1",
                            "remark": "随笔"
                        },
                        {
                            "name": "vue动态路由异步加载",
	
                        }
                    ]
                },
                {
                    "month": "9月08日",
                    "list": [{
                        "name": "陈奕迅-Body Song 歌词1",
                        "remark": "111"
                    }]
                },
                {
                    "month": "8月16日",
                    "list": [{
                            "name": "陈奕迅-Body Song 歌词1",
                            "remark": "111"
                        },
                        {
                            "name": "陈奕迅-Body Song 歌词1",
	
                        },
                        {
                            "name": "陈奕迅-Body Song 歌词2",
                            "remark": "22"
                        }
                    ]
                }
            ]
        }
    ]
	
    export default {
        props: {
            'type': Number,
@@ -30,126 +162,25 @@
        mounted() {
            console.log(this.$route.query)
        },
		
        data() {
            var tempList = [{
                    "year": "2022",
                    "monthList": [{
                            "month": "9月18日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "随笔"
                                },
                                {
                                    "name": "vue动态路由异步加载",

                                }
                            ]
                        },
                        {
                            "month": "9月08日",
                            "list": [{
                                "name": "陈奕迅-Body Song 歌词1",
                                "remark": "111"
                            }]
                        },
                        {
                            "month": "8月16日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "111"
                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词1",

                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词2",
                                    "remark": "22"
                                }
                            ]
                        }
                    ]
                },
                {
                    "year": "2021",
                    "monthList": [{
                            "month": "9月18日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "随笔"
                                },
                                {
                                    "name": "vue动态路由异步加载",

                                }
                            ]
                        },
                        {
                            "month": "9月08日",
                            "list": [{
                                "name": "陈奕迅-Body Song 歌词1",
                                "remark": "111"
                            }]
                        },
                        {
                            "month": "8月16日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "111"
                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词1",

                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词2",
                                    "remark": "22"
                                }
                            ]
                        }
                    ]
                },
                {
                    "year": "2020",
                    "monthList": [{
                            "month": "9月18日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "随笔"
                                },
                                {
                                    "name": "vue动态路由异步加载",

                                }
                            ]
                        },
                        {
                            "month": "9月08日",
                            "list": [{
                                "name": "陈奕迅-Body Song 歌词1",
                                "remark": "111"
                            }]
                        },
                        {
                            "month": "8月16日",
                            "list": [{
                                    "name": "陈奕迅-Body Song 歌词1",
                                    "remark": "111"
                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词1",

                                },
                                {
                                    "name": "陈奕迅-Body Song 歌词2",
                                    "remark": "22"
                                }
                            ]
                        }
                    ]
        watch: {
            '$route'(to, from) {
                var type = this.$route.query.type;
                var list = [];
                if (type == 1) {
                    list = tempList;
                } else if (type == 2) {
                    list.push(tempList[0]);
                } else if (type == 3) {
                    list.push(tempList[1]);
                }
            ]

                this.list = list
            }
        },

        data() {
		

            var list = [];
            var type = this.$route.query.type;
@@ -157,7 +188,6 @@
                list = tempList;
            } else if (type == 2) {
                list.push(tempList[0]);
                list.push(tempList[1]);
            } else if (type == 3) {
                list.push(tempList[1]);
            }

 src/components/swichLabel/main1-show.vue

@@ -2,13 +2,13 @@
    <div>
        <div class="blog-drawer">
            <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
                :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="10" :width=270
                :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
                :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
                <boxLeft></boxLeft>
            </a-drawer>

            <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'"
                :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="10" :width=270
                :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="90" :width=270
                :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
                <boxRight></boxRight>
            </a-drawer>
@@ -28,7 +28,8 @@
                    <a-button @click="showDrawer2">
                        小抽屉2
                    </a-button>
                    <router-view></router-view>
                    <articleListScorll/>
                    <!-- <router-view class="fade"></router-view> -->
                </a-col>
                
                <a-col v-bind="colApiRight" ref="myDrawer">
@@ -44,13 +45,16 @@
    import boxLeft from "../group/boxLeft.vue"
    import boxRight from "../group/boxRight.vue"
    import articleList from "../group/articleList.vue"
    import articleListScorll from "../group/articleListScorll.vue"

    export default {

        components: {
            boxLeft,
            boxRight,
            articleList
            articleList,
            articleListScorll,
			
        },
        methods: {
            afterVisibleChange(val) {},
@@ -140,6 +144,9 @@
        background-color: white;
        border-radius: 15px;
    }
    .holdHeight{
        min-height: 780px;
    }

    .article-detail {
        max-height: 750px;
@@ -155,7 +162,7 @@
    /*左右两边的盒子容器*/
    .blog-cell {
        opacity: 0.8;
        padding: 0px 25px 10px;
        padding: 0px 14px 10px;
    }

    /*左边部分*/

 src/components/swichLabel/main2-show.vue

@@ -2,14 +2,13 @@
    <div class="blog-main">
        <a-row>
            <a-col v-bind="colApiLeft">
                <box7 :searchType="searchType"></box7>
                <box7 :searchType="searchType" class="fade"></box7>
            </a-col>
            <a-col v-bind="colApiMain ">
            <a-col v-bind="colApiMain" class="holdHeight">
                <box8></box8>
                <!-- <boxLeft></boxLeft> -->
            </a-col>
            <a-col v-bind="colApiRight">
            </a-col>
			
        </a-row>
    </div>
</template>
@@ -29,28 +28,54 @@
            return {
                searchType:"乐谱搜索",
                colApiLeft: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 8,
                    xl: 8,
                    xxl: 6,
                },
                colApiRight: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 0,
                    xl: 0,
                    xxl: 4,
                },
                colApiMain: {
                    xs: 24,
                    sm: 24,
                    md: 24,
                    lg: 14,
                    xl: 14,
                    xxl: 14,
                    sm: {
                        span: 10,
                        offset: 1,
                    },
                    md: {
                        span: 14,
                        offset: 5,
                    },
                    lg: {
                        span: 10,
                        offset: 7,
                    },
                    xl: {
                        span: 6,
                        offset: 1,
                    },
                    xxl: {
                        span: 5,
                        offset: 1,
                    },
                },
				
                colApiMain: {
                    xs: {
                        span: 24,
                        offset: 0,
                    },
                    sm: {
                        span: 22,
                        offset: 1,
                    },
                    md: {
                        span: 22,
                        offset: 1,
                    },
                    lg: {
                        span: 22,
                        offset: 1,
                    },
                    xl: {
                        span: 15,
                        offset: 1,
                    },
                    xxl: {
                        span: 15,
                        offset: 1,
                    },
                }
            }
        }

 src/components/swichLabel/main3-show.vue

@@ -1,58 +1,42 @@
<template>
    <div class="blog-main">
        <a-row>
            <a-col v-bind="colApiLeft">
                <box7 :searchType="searchType"></box7>
            </a-col>
            <a-col v-bind="colApiMain ">
                <box9></box9>
                <!-- <boxLeft></boxLeft> -->
            </a-col>
            <a-col v-bind="colApiRight">
            <a-col v-bind="colApiMain " class="holdHeight">
                <a-page-header title="我的网盘" style="padding: 0px;" @back="() => this.$router.go(-1)" />
                <net-file></net-file>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import box7 from "../mini/box7-search.vue"
    import box8 from "../mini/box8-panal.vue"
    import box9 from "../mini/box9-netFile.vue"
    import boxLeft from "../group/boxLeft.vue"
    import netFile from "../mini/box9-netFile.vue"
    export default {
        components: {
            box7,
            box8,
            box9,
            boxLeft,
            netFile,
        },

        data() {
            return {
                searchType:"动漫搜索",
                colApiLeft: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 8,
                    xl: 8,
                    xxl: 6,
                },
                colApiRight: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 0,
                    xl: 0,
                    xxl: 4,
                },
                colApiMain: {
                    xs: 24,
                    sm: 24,
                    md: 24,
                    lg: 14,
                    xl: 14,
                    xxl: 14,
                    md: {
                        span: 24,
                        offset: 0,
                    },
                    lg: {
                        span: 20,
                        offset: 2,
                    },
                    xl: {
                        span: 20,
                        offset: 2,
                    },
                    xxl: {
                        span: 20,
                        offset: 2,
                    },
                }
            }
        }
@@ -60,5 +44,5 @@
</script>

<style lang="less">
	

</style>

 src/config/router.config.js

@@ -27,6 +27,7 @@
                children: [{
                        path: '/',
                        component: articleList,
                        props:true
                    },
                    {
                        path: '/box1',

 src/main.js

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

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

Vue.prototype.$axios = axios

new Vue({

 vue.config.js

@@ -2,7 +2,7 @@
module.exports = {
    configureWebpack: (config) => {
        config.module.rules.push({
            test: /\.md$/,
            test: /\.(md|htm)$/,
            use: [{
                loader: 'text-loader', // 解决ivew组件 忽略前缀i的问题
                options: {