路由跳转添加

 src/components/layouts/box1-info.vue

New file
@@ -0,0 +1,61 @@
<template>
        <div class="blog-avatar">
            <img :src="avatar">
            <div class="blog-user-message">
                <span>{{name}}</span>
                <span>{{sentence}}</span>
                <span>
                    <a-icon type="environment" />{{location}}
                </span>
            </div>
        </div>
	 
</template>

<script>
    export default {
        name: "box",
        data() {
            return {
                avatar: "http://t.inleft.com/share/media_photo/xigong.png",
                name: "inleft",
                sentence: "十里寒塘路,烟花一半醒",
                location: "广州"
            }
        }
    }
</script>

</script>

<style lang="less">
	
    /*头像部分*/
    .blog-avatar {
        border-radius: 15px;
        background-color: white;

        img {
            width: 60px;
            height: auto;
            border-radius: 50%;
            display: block;
            margin: 10px auto 10px;
            padding-top: 10px;
        }
    }

    /* 一言 */
    .blog-user-message {
        text-align: center;
        font-size: 15px;
        color: #555;
        padding-top: 10px;
        padding-bottom: 10px;

        span {
            display: block;
            padding-bottom: 5px;
        }
    }
</style>

 src/components/layouts/box2-class.vue

New file
@@ -0,0 +1,105 @@
<template>
    <div class="blog-container ">
        <span class="blog-pigeonhole">分类</span>
        <div class="blog-scroll ">
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list1">
                    <a href="#">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </a>
                </div>
            </div>
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list2">
                    <a href="#">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </a>
                </div>
            </div>
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list2">
                    <a href="#">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: "日志",
                    count: 10
                }, {
                    name: "分类",
                    count: 12
                }, {
                    name: "标签",
                    count: 14
                }],
                list2: [{
                    name: "Tag",
                    count: 133
                }, {
                    name: "专题",
                    count: 10
                }, {
                    name: "偏好",
                    count: 12
                }, {
                    name: "星标",
                    count: 14
                }]
            }
        }
    }
</script>

</script>

<style lang="less">
    /*日志部分*/
    .blog-log-list {
        line-height: 1.6;
        padding-left: 3%;
        padding-right: 3%;

        flex-wrap: wrap;
        /*让弹性盒元素在必要的时候拆行：*/
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .blog-log-item {
        border-left: 2px solid rgba(222, 229, 231, .45);
        width: 23%;
        margin-bottom: 10px;

        :first-child {
            border-left: none;
        }

        a span:first-child {
            color: #999;
        }

        a span:last-child {
            font-weight: 600;
            font-size: 15px;
        }

        span {
            display: block;
        }
    }
</style>

 src/components/layouts/box3-archive.vue

New file
@@ -0,0 +1,160 @@
<template>
    <div class="blog-container">
        <span class="blog-pigeonhole">归档信息</span>
        <div class="blog-scroll ">
            <div class="">
                <p class="blog-pigeonhole-p">2020</p>
                <div class="blog-pigeonhole-list">

                    <div class="blog-pigeonhole-item" v-for="item in list2020">
                        <a href="#">
                            <span>{{item.month}}月</span>
                            <span>{{item.count}}篇</span>
                        </a>
                    </div>
                </div>
            </div>
            <div>
                <p class="blog-pigeonhole-p">2019</p>
                <div class="blog-pigeonhole-list">

                    <div class="blog-pigeonhole-item" v-for="item in list2019">
                        <a href="#">
                            <span>{{item.month}}月</span>
                            <span>{{item.count}}篇</span>
                        </a>
                    </div>
                </div>
            </div>
            <div>
                <p class="blog-pigeonhole-p">2019</p>
                <div class="blog-pigeonhole-list">
			
                    <div class="blog-pigeonhole-item" v-for="item in list2019">
                        <a href="#">
                            <span>{{item.month}}月</span>
                            <span>{{item.count}}篇</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                list2019: [{
                    month: "12",
                    count: 10
                }, {
                    month: "10",
                    count: 11
                }, {
                    month: "9",
                    count: 9
                }],
                list2020: [{
                    month: "12",
                    count: 8
                }, {
                    month: "10",
                    count: 7
                }, {
                    month: "9",
                    count: 6
                }, {
                    month: "8",
                    count: 5
                }, {
                    month: "7",
                    count: 4
                }, {
                    month: "6",
                    count: 3
                }, {
                    month: "5",
                    count: 2
                }, {
                    month: "4",
                    count: 1
                }]
            }
        }
    }
</script>

</script>

<style lang="less">
    /*归档部分*/

    .blog-pigeonhole {
        font-size: 15px;
    }

    .blog-pigeonhole-p {
        width: 20%;
        text-align: center;
        line-height: 20px;
        border-radius: 6px 6px 6px 6px;
        /*background-color: #edf0f3;*/
        margin-left: 3%;
        margin-bottom: 3%;
        opacity: 0.7;
    }

    .blog-pigeonhole-list {
        line-height: 1.6;
        padding-left: 3%;
        padding-right: 3%;
        /*display: flex; !*弹性盒子*!*/
        /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/

        display: flex;
        display: -webkit-flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;

        flex-wrap: wrap;
        /*让弹性盒元素在必要的时候拆行：*/
        align-content: flex-start;
        -webkit-align-content: flex-start;

    }

    .blog-pigeonhole-item {
        min-width: 22%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        margin-bottom: 5%;

        a span:first-child {
            height: 22px;
            background-color: #edf0f3;
            border-radius: 6px 6px 0 0;
            opacity: .8;
            color: #999aaa;
            line-height: 22px;
            margin-bottom: 1px;
            text-align: center;
        }

        a span:last-child {
            height: 22px;
            background-color: #f6f8fa;
            border-radius: 0 0 6px 6px;
            color: #555666;
            line-height: 20px;
            font-weight: 600;
            text-align: center;
        }

        span {
            display: block;
        }
    }
</style>

 src/components/layouts/box4-minibox.vue

New file
@@ -0,0 +1,79 @@
<template>
    <div class="blog-container ">
        <div>
            <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}" >{{title}}</span>
        </div>
        <div class="blog-scroll show-line ">
            <div class="blog-right-side-meta " v-for="item in list">
                <div>
                    <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        props: {
            title: "",
            list: "",
            isShowRemark:false
        },
        data() {
            return {

            }
        }
    }
</script>

</script>

<style lang="less">
    /*右边的部分*/
	
    .blog-right-side-portion-title {
        display: block;
        font-size: 15px;
        padding-bottom: 8px;
	
    }
	
    span.title-remark::after {
        content: "(按字母索引)";
        color: #999;
        font-size: 10px;
    }
	
    .blog-right-side-meta span {
        /*word-break: keep-all;*/
        /*word-wrap: break-word;*/
        color: #999;
        font-size: 13px;
        line-height: 17px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;

        white-space: nowrap;
        /* normal文本换行*/

        word-break: keep-all;
        // transition-property: background-color;
        // transition-duration: .2s;
        // transition-timing-function: ease-in-out;
        // transition-delay: 0s;
    }

    div .blog-right-side-meta a span:hover {
        background: #262a30;;
        color: #fff;
        white-space: normal;
        word-break: break-word;
        /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
        height: 20%;
        z-index: 600;
    }
</style>

 src/components/layouts/box5-article.vue

New file
@@ -0,0 +1,223 @@
<template>
    <div class="blog-article">
        <!-- <div class="index-post-img">
            <a href="#">
                <div class="item-thumb lazy"
                    style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
                </div>
            </a>
        </div> -->

        <div class="article-meta">
            <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></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-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>

                    </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>
            </div>
            <div class="article-split-line"></div>
            <div class="article-read-btn">
                <router-link class="btn" to="/box1">阅读全文 »</router-link>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        props: {
            title: "",
            list: ""
        },
        data() {
            return {

            }
        }
    }
</script>

</script>

<style lang="less">
    /*文章部分*/
    .blog-article {
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 15px;
        border: none;
        /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
    }

    .article-meta {
        padding: 30px 30px 10px;
        background-color: white;
        border-radius: 15px;
    }

    .article-title {
        color: #555;
        font-size: 14px;
        line-height: 14px;
        padding-bottom: 15px;
        margin-top: 0 !important;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
    }

    .article-split-line {
        width: 100%;
        height: 2px;
        overflow: hidden;
        font-size: 0;
        margin-top: 8px;
        margin-bottom: 8px;
        border-color: rgba(237, 241, 242, .6);

        border-bottom: 1px solid rgba(222, 229, 231, .45);
        display: block
    }

    .article-message-info {
        text-align: center;

        li {
            display: inline-block;
            padding-right: 5px;
            padding-left: 5px;

            span {
                padding-left: 0px;
            }
        }
    }


    .article-summary {
        max-height: 200px;
        overflow: hidden;

        p {
            line-height: 17px;
            font-size: 10px;
        }
    }

    .article-summary p {
        text-align: center;
    }

    .article-read-btn {
        text-align: center;
        display: block;
    }

    .btn {
        display: inline-block;
        padding: 0 20px;
        color: #555;
        background: #fff;
        border: 2px solid #555;
        text-decoration: none;
        border-radius: 2px;

        line-height: 2;
        font-size: 14px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        cursor: pointer;

        transition-property: background-color;
        transition-duration: .2s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
    }

    .btn:hover {
        background: #262a30;
        color: #fff;
    }

    /*文章图片部分*/
    .item-thumb {
        min-height: 250px;
        position: relative;
        display: block;
        background-position: 50% 50%;
        background-size: cover;
        border-radius: 15px;
    }

    .item-thumb {
        cursor: pointer;
        transition: all 0.6s;
    }

    .item-thumb:hover {
        transform: scale(1.05);
    }

    .item-thumb-small {
        cursor: pointer;
        transition: all 0.6s;
    }

    .item-thumb-small:hover {
        transform: scale(1.05);
    }
</style>

 src/components/layouts/box6-articleList.vue

New file
@@ -0,0 +1,27 @@
<template>
    <div>
        <box5></box5>
        <box5></box5>
        <a-pagination showQuickJumper  :default-current="current" :defaultPageSize="pageSize" :total="total" />
    </div>
</template>

<script>
    import box5 from "./box5-article.vue"
    export default {
        components: {
            box5
        },
        data() {
            return {
                total: 500,
                pageSize: 20,
                current: 4,
            }
        },

    }
</script>

<style>
</style>

 src/components/layouts/boxLeft.vue

@@ -13,9 +13,9 @@
</template>

<script>
    import box1 from "./box1.vue"
    import box2 from "./box2.vue"
    import box3 from "./box3.vue"
    import box1 from "./box1-info.vue"
    import box2 from "./box2-class.vue"
    import box3 from "./box3-archive.vue"
    export default {
        components: {
            box1,

 src/components/layouts/boxRight.vue

@@ -19,7 +19,7 @@
</template>

<script>
    import box4 from "./box4.vue"
    import box4 from "./box4-minibox.vue"
    export default {
        components: {
            box4,
@@ -56,6 +56,7 @@
                },
                vo3: {
                    title: "友情链接",
                    isShowRemark:true,
                    list: [{
                        name: "inleft.com",
                    }, {

 src/components/layouts/main.vue

@@ -1,96 +1,63 @@
<template>
    <div id="components-layout-basic">
        <a-layout>
            <a-layout-header>Header</a-layout-header>
            <a-layout-header>
                <tag-Header></tag-Header>
            </a-layout-header>
            <a-layout>
                <div class="blog-main">
                    <a-row>
                        <a-col v-bind="colApiLeft">
                            <boxLeft></boxLeft>
                        </a-col>
                        <a-col v-bind="colApiMain ">
                            <box5></box5>
                            <box5></box5>
                            <a-pagination v-model="current" :total="50" show-less-items />
                        </a-col>
                        <a-col v-bind="colApiRight">
                            <boxRight></boxRight>
                        </a-col>
                    </a-row>
                </div>
                <!-- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider>
                <a-layout-content>Content</a-layout-content>
                <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider> -->
                <router-view class="fade"></router-view>
            </a-layout>
            <a-layout-footer>Footer</a-layout-footer>
            <a-layout-footer>
                <div>
                    <p>备案号:
                        <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a>
                    </p>
                </div>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import boxLeft from "./boxLeft.vue"
    import boxRight from "./boxRight.vue"
    import box5 from "./box5.vue"
    import tagHeader from "./tag-header.vue"
    export default {
        components: {
            boxLeft,
            boxRight,
            box5
            tagHeader
        },
		
        data() {
            return {
                current: 2,
                sliderApi: {
                    collapsible: true, //是否可收起

                    collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
                },
                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,
                }
            }
        }

    }
</script>

<style lang="less">
    #components-layout-basic {
        text-align: center;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;

        .ant-layout-header,
        .ant-layout-footer {
            background: #7dbcea;
            color: #fff;
        .ant-layout {}

        .ant-layout-header {
            background-color: #001529;
        }

        .ant-layout-footer {
            line-height: 1.5;
            background-color: #edf1f299;
            padding: 0px;

            p {
                margin: auto;
                color: #757575;
            }

            a {
                opacity: 0.8;
                color: #757575;
            }
        }

        .ant-layout-sider {
@@ -104,14 +71,7 @@
            height: 100%;
        }

        // >.ant-layout {
        //     width: 100%;
        //     min-height: 100%;
        // }

        // >.ant-layout:last-child {
        //     margin: 0;
        // }
    }


@@ -134,7 +94,13 @@
    p {
        font-size: 17px;
        letter-spacing: 0.8px;
        line-height: 30px;
        line-height: 22px;
    }

    .fade {
        -webkit-animation-name: "fade";
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
    }

    .fadeInLeft {
@@ -147,117 +113,6 @@
        -webkit-animation-name: "fadeInRight";
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
    }

    .blog-main {
        padding-left: 5%;
        padding-right: 5%;
    }



    /*左右两边的盒子容器*/
    .blog-cell {
        opacity: 0.8;
        padding: 0px 25px 10px;
    }

    /*左边部分*/
    .blog-left-side {
        position: sticky;
        // top: 80px;
        padding-left: 2%;
        /*padding-right: 2%;*/
        z-index: 100;
    }

    /*中间部分*/
    .blog-body {
        padding-top: 10px;
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
    }

    /*右边部分*/
    .blog-right-side {
        position: sticky;
        top: -19%;
        padding-top: 10px;
        /*padding-left: 2%;*/
        /*padding-right: 2%;*/
        z-index: 100;
    }

    div .blog-right-side-meta div {
        padding-left: 6%;
        padding-right: 6%;
        margin-bottom: 3%;
    }


    /*---------------------
        |   核心盒子构成start   |
        ------- ---------------*/
    .blog-container {
        border-radius: 15px;
        background-color: white;

        line-height: 1.4;
        white-space: nowrap;
        /*规定段落中的文本不进行换行：*/
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        max-height: 300px;
        /*margin-top: 10px;*/
        /*min-height: 200px;*/

        // overflow-x: hidden;
        // overflow-y: overlay;
        // display: block;

        padding-top: 10px;
        padding-bottom: 20px;
        overflow: hidden;


    }

    .show-line {
        border-top: 1px solid #999;
    }

    .blog-scroll {
        padding-top: 10px;
        max-height: 200px;

        overflow-x: hidden;
        overflow-y: overlay;
    }


    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll::-webkit-scrollbar {
        width: 5px;
        display: none;
    }

    .blog-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(153, 154, 170, 0.3);
        border-radius: 2px;
    }

    /*margin滚动条上偏移*/
    .blog-scroll::-webkit-scrollbar-track {
        margin-top: 5px;
        margin-bottom: 5px;
    }



 src/components/layouts/main1-show.vue

New file
@@ -0,0 +1,172 @@
<template>
    <div class="blog-main">
        <a-row>
            <a-col v-bind="colApiLeft">
                <boxLeft></boxLeft>
            </a-col>
            <a-col v-bind="colApiMain ">
                <router-view></router-view>
            </a-col>
            <a-col v-bind="colApiRight">
                <boxRight></boxRight>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import boxLeft from "./boxLeft.vue"
    import boxRight from "./boxRight.vue"
    import box6 from "./box6-articleList.vue"
    export default {
        components: {
            boxLeft,
            boxRight,
            box6
        },

        data() {
            return {
                sliderApi: {
                    collapsible: true, //是否可收起

                    collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
                },
                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,
                }
            }
        }
    }
</script>

<style lang="less">
    .blog-main {
        padding-left: 5%;
        padding-right: 5%;
    }

    /*左右两边的盒子容器*/
    .blog-cell {
        opacity: 0.8;
        padding: 0px 25px 10px;
    }

    /*左边部分*/
    .blog-left-side {
        position: sticky;
        // top: 80px;
        padding-left: 2%;
        /*padding-right: 2%;*/
        z-index: 100;
    }

    /*中间部分*/
    .blog-body {
        padding-top: 10px;
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
    }

    /*右边部分*/
    .blog-right-side {
        position: sticky;
        top: -19%;
        padding-top: 10px;
        /*padding-left: 2%;*/
        /*padding-right: 2%;*/
        z-index: 100;
    }

    div .blog-right-side-meta div {
        padding-left: 6%;
        padding-right: 6%;
        margin-bottom: 3%;
    }


    /*---------------------
        |   核心盒子构成start   |
        ------- ---------------*/
    .blog-container {
        border-radius: 15px;
        background-color: white;

        line-height: 1.4;
        white-space: nowrap;
        /*规定段落中的文本不进行换行：*/
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        max-height: 300px;
        /*margin-top: 10px;*/
        /*min-height: 200px;*/

        // overflow-x: hidden;
        // overflow-y: overlay;
        // display: block;

        padding-top: 10px;
        padding-bottom: 20px;
        overflow: hidden;
        box-shadow: 1px 1px 1px 2px #1196c459
    }

    .show-line {
        border-top: 1px solid #999;
    }

    .blog-scroll {
        padding-top: 10px;
        max-height: 200px;

        overflow-x: hidden;
        overflow-y: overlay;
    }


    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll::-webkit-scrollbar {
        width: 5px;
        display: none;
    }

    .blog-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(153, 154, 170, 0.3);
        border-radius: 2px;
    }

    /*margin滚动条上偏移*/
    .blog-scroll::-webkit-scrollbar-track {
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>

 src/components/layouts/main2-show.vue

New file
@@ -0,0 +1,174 @@
<template>
    <div class="blog-main">
        <a-row>
            <a-col v-bind="colApiLeft">
                <boxLeft></boxLeft>
            </a-col>
            <a-col v-bind="colApiMain ">
                <boxLeft></boxLeft>
            </a-col>
            <a-col v-bind="colApiRight">
                <boxLeft></boxLeft>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import boxLeft from "./boxLeft.vue"
    import boxRight from "./boxRight.vue"
    import box6 from "./box6-articleList.vue"
    export default {
        components: {
            boxLeft,
            boxRight,
            box6
        },

        data() {
            return {
                sliderApi: {
                    collapsible: true, //是否可收起

                    collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
                },
                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,
                }
            }
        }
    }
</script>

<style lang="less">
    .blog-main {
        padding-left: 5%;
        padding-right: 5%;
    }



    /*左右两边的盒子容器*/
    .blog-cell {
        opacity: 0.8;
        padding: 0px 25px 10px;
    }

    /*左边部分*/
    .blog-left-side {
        position: sticky;
        // top: 80px;
        padding-left: 2%;
        /*padding-right: 2%;*/
        z-index: 100;
    }

    /*中间部分*/
    .blog-body {
        padding-top: 10px;
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
    }

    /*右边部分*/
    .blog-right-side {
        position: sticky;
        top: -19%;
        padding-top: 10px;
        /*padding-left: 2%;*/
        /*padding-right: 2%;*/
        z-index: 100;
    }

    div .blog-right-side-meta div {
        padding-left: 6%;
        padding-right: 6%;
        margin-bottom: 3%;
    }


    /*---------------------
        |   核心盒子构成start   |
        ------- ---------------*/
    .blog-container {
        border-radius: 15px;
        background-color: white;

        line-height: 1.4;
        white-space: nowrap;
        /*规定段落中的文本不进行换行：*/
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        max-height: 300px;
        /*margin-top: 10px;*/
        /*min-height: 200px;*/

        // overflow-x: hidden;
        // overflow-y: overlay;
        // display: block;

        padding-top: 10px;
        padding-bottom: 20px;
        overflow: hidden;
        box-shadow: 1px 1px 1px 2px #1196c459
    }

    .show-line {
        border-top: 1px solid #999;
    }

    .blog-scroll {
        padding-top: 10px;
        max-height: 200px;

        overflow-x: hidden;
        overflow-y: overlay;
    }


    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll:hover::-webkit-scrollbar {
        display: block;
    }

    .blog-scroll::-webkit-scrollbar {
        width: 5px;
        display: none;
    }

    .blog-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(153, 154, 170, 0.3);
        border-radius: 2px;
    }

    /*margin滚动条上偏移*/
    .blog-scroll::-webkit-scrollbar-track {
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>

 src/components/layouts/tag-header.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div>
        <a-row type="flex" justify="start">
            <a-col v-bind="showSmall">
                <router-link class="btn" to="/main1">Home »</router-link>
            </a-col>
            <a-col v-bind="showSmall">
                <router-link class="btn" to="/main1">Home2 »</router-link>
            </a-col>
            <a-col v-bind="showSmall">
                <router-link class="btn" to="/main2">我的信息 »</router-link>
            </a-col>
            <a-col v-bind="showMain">
                <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
                    <a-input>
                        <a-icon slot="suffix" type="search" class="certain-category-icon" />
                    </a-input>
                </a-auto-complete>
            </a-col>
            <a-col v-bind="showMain">
                <router-link class="btn" to="/main2">我的信息 »</router-link>
            </a-col>
        </a-row>
    </div>

</template>

<script>
    export default {

        data() {
            return {
                search: {
                    placeholder: "全局搜索..",
                    allowClear: true,
                    // autoFocus: true,
                    backfill: true,
                    dataSource: [],
                },
                showSmall: {
                    xs: 6,
                    sm: 6,
                    md: 6,
                    lg: 6,
                    xl: 6,
                    xxl: 6,
                },
                showMain: {
                    xs: 0,
                    sm: 0,
                    md: 2,
                    lg: 2,
                    xl: 2,
                    xxl: 2,
                }
            }

        },
        watch: {
            value(val) {
                console.log('值:', val);
            },
        },
        methods: {
            onSearch(searchText) {
                this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
                console.log("补全..");
            },
            onSelect(value) {
                console.log('回车', value);
            },
            onChange(value) {
                console.log('修改', value);
            },
            keyListener(value) {
                console.log('ref', this.$refs.mySearch);
                console.log('键盘', value);
            },
        },
    }
</script>

</script>

<style lang="less">
    /*头像部分*/
    .blog-avatar {
        border-radius: 15px;
        background-color: white;

        img {
            width: 60px;
            height: auto;
            border-radius: 50%;
            display: block;
            margin: 10px auto 10px;
            padding-top: 10px;
        }
    }

    /* 一言 */
    .blog-user-message {
        text-align: center;
        font-size: 15px;
        color: #555;
        padding-top: 10px;
        padding-bottom: 10px;

        span {
            display: block;
            padding-bottom: 5px;
        }
    }
</style>

 src/config/router.config.js

@@ -1,43 +1,61 @@
import BasicLayout from '../layouts/BasicLayout.vue'
import main from '../components/layouts/main.vue'
import main1 from '../components/layouts/main1-show.vue'
import main2 from '../components/layouts/main2-show.vue'
import box6 from '../components/layouts/box6-articleList.vue'
import box1 from '../components/layouts/box1-info.vue'
import box2 from '../components/layouts/box2-class.vue'


export const asyncRouterMap = [{
        path: '/',
        component: main,
        meta: {
            title: "在你左边,听风及雨"
        },
        path: '*',
        // redirect: '/404',
        component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404'),
        hidden: true
    },
    {
        path: '/home',
        name: 'BasicLayout.vue',
        component: BasicLayout,
        meta: {
            title: '在你左边,听风及雨'
        },
        children: [
        path: '/',
        component: main,
        children: [{
                path: '/',
                component: main1,
                children: [{
                        path: '/',
                        component: box6,
                    },
                    {
                        path: '/box1',
                        component: box1,
                    }
                ]
            },
            {
                path: '/main1',
                component: main1,
                children: [{
                    path: '/',
                    component: box6,
                }]
            },
            {
                path: '/main2',
                component: main2,

            },

        ]
    },
    {
        path: '*',
        redirect: '/404',
        hidden: true
    }


]


/**
 * 基础路由
 * @type { *[] }
 */
export const constantRouterMap = [


    {
export const constantRouterMap = [{
        path: '/404',
        component: () => import( /* webpackChunkName: "fail" */ '@/views/exception/404')
    }

]