二次优化界面

 package-lock.json

File was deleted

 src/App.vue

@@ -1,77 +1,51 @@
<template>
    <div id="app" class="app app1">
        <!-- vue router
        axios
        less
        vuex
        vuels -->
        <!-- <demo/> -->
        <!-- <div id="nav">
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
        </div>
        <router-view/> -->

        <!-- 将上传组件全局注册 -->
        <!-- <global-uploader></global-uploader> -->
        <pp></pp>
        <router-view class="scrollbar"></router-view>
    </div>
</template>

<script>
    import globalUploader from '@/components/globalUploader.vue'
    import HelloWorld from '@/components/HelloWorld.vue'
    import demo from '@/components/demo.vue'
    // import pp from '@/components/test1/parent1.vue'
    import pp from '@/components/layouts/test.vue'

    export default {
        name: 'app',
        components: {},
        data() {
            return {}
        },
        components: {
            globalUploader,
            HelloWorld,
            demo,
            pp

        },
        components: {},
        computed: {},
        created() {},
        watch: {},
        methods: {}
    }
</script>


<style>
    .app {
        overflow: auto;
        border: none;
    }
	
    #app,body,html {
      height: 100%;
    }
	

    .scrollbar {
        margin: 0 auto;
    }

    .app1::-webkit-scrollbar {
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 8px;
        height: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
    }

    .app1::-webkit-scrollbar-thumb {
    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: #aaa;
    }

    .app1::-webkit-scrollbar-track {
    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 8px;
        background: #FFFFFF;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>

 src/components/layouts/blog-main.css

File was deleted

 src/components/layouts/box2.vue

@@ -1,6 +1,7 @@
<template>
    <div class="blog-left-side-scroll-portion">
        <div>
    <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="#">
@@ -17,6 +18,14 @@
                    </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>


 src/components/layouts/box3.vue

@@ -1,31 +1,44 @@
<template>
    <div class="blog-left-side-scroll-portion">
    <div class="blog-container">
        <span class="blog-pigeonhole">归档信息</span>
        <div>
            <p class="blog-pigeonhole-p">2020</p>
            <div class="blog-pigeonhole-list">
        <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 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>
            <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>

</template>
@@ -144,6 +157,4 @@
            display: block;
        }
    }
	
	
</style>

 src/components/layouts/box4.vue

@@ -1,10 +1,10 @@
<template>
    <div class="blog-right-side-container">
    <div class="blog-container ">
        <div>
            <span class="blog-right-side-portion-title">{{title}}</span>
            <span class="blog-right-side-portion-title title-remark">{{title}}</span>
        </div>
        <div class="blog-right-side-scroll-portion">
            <div class="blog-right-side-meta" v-for="item in list">
        <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>
@@ -22,7 +22,7 @@
        },
        data() {
            return {
				

            }
        }
    }
@@ -32,11 +32,26 @@

<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;
@@ -45,14 +60,14 @@
        /* normal文本换行*/

        word-break: keep-all;
        transition-property: background-color;
        transition-duration: .2s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
        // 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: #5FB878;
        background: #262a30;;
        color: #fff;
        white-space: normal;
        word-break: break-word;

 src/components/layouts/box5.vue

New file
@@ -0,0 +1,221 @@
<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"><a class="btn" href="#" rel="contents">阅读全文 »</a></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/boxLeft.vue

@@ -1,12 +1,12 @@
<template>
    <div class="blog-left-side-portion fadeInLeft">
        <div class="blog-cell-main-container ">
    <div class="blog-left-side fadeInLeft">
        <div class="blog-cell ">
            <box1></box1>
        </div>
        <div class="blog-cell-main-container ">
        <div class="blog-cell ">
            <box2></box2>
        </div>
        <div class="blog-cell-main-container ">
        <div class="blog-cell ">
            <box3></box3>
        </div>
    </div>
@@ -28,6 +28,3 @@
    }
</script>

</script>
<style lang="less">
</style>

 src/components/layouts/boxRight.vue

@@ -1,17 +1,17 @@
<template>
    <div class="blog-right-side-portion fadeInRight">
        <div class="blog-cell-main-container ">
    <div class="blog-right-side fadeInRight">
        <div class="blog-cell ">
            <box4 v-bind="vo1"></box4>
        </div>
        <div class="blog-cell-main-container ">
        <div class="blog-cell ">
            <box4 v-bind="vo2"></box4>
        </div>
        <div class="blog-cell-main-container ">
        <div class="blog-cell ">
            <box4 v-bind="vo3"></box4>
            <div class="blog-right-side-exchange">
            </div>
        </div>
        <div class="blog-cell-main-container ">
        <div class="blog-cell ">
            <box4 v-bind="vo4"></box4>
        </div>

@@ -66,6 +66,56 @@
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }, {
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }, {
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }, {
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }, {
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }, {
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }]
                },
                vo4: {
@@ -86,5 +136,3 @@
</script>

</script>
<style lang="less">
</style>

 src/components/layouts/main.vue

New file
@@ -0,0 +1,332 @@
<template>
    <div id="components-layout-basic">
        <a-layout>
            <a-layout-header>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> -->
            </a-layout>
            <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import boxLeft from "./boxLeft.vue"
    import boxRight from "./boxRight.vue"
    import box5 from "./box5.vue"
    export default {
        components: {
            boxLeft,
            boxRight,
            box5
        },
		
        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-footer {
            line-height: 1.5;
        }

        .ant-layout-sider {
            background: #3ba0e9;
            color: #fff;
            line-height: 120px;
        }

        .ant-col,
        .ant-layout-content {
            height: 100%;
        }

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

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


    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 400;
    }

    span,
    p {
        font-size: 17px;
        letter-spacing: 0.8px;
        line-height: 30px;
    }

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

    .fadeInRight {
        -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;
    }


    // 动画
    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-120px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translateX(-120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(120px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translateX(120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @-webkit-keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
</style>

 src/components/layouts/test.vue

File was deleted

 src/config/router.config.js

New file
@@ -0,0 +1,43 @@
import BasicLayout from '../layouts/BasicLayout.vue'
import main from '../components/layouts/main.vue'


export const asyncRouterMap = [{
        path: '/',
        component: main,
        meta: {
            title: "在你左边,听风及雨"
        },
    },
    {
        path: '/home',
        name: 'BasicLayout.vue',
        component: BasicLayout,
        meta: {
            title: '在你左边,听风及雨'
        },
        children: [

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

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


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

]


 src/router/router.js

New file
@@ -0,0 +1,25 @@
import Vue from 'vue';
import Router from 'vue-router'

import {
    constantRouterMap,
    asyncRouterMap
} from '@/config/router.config.js'


Vue.use(Router)

/*实例化路由*/
const router = new Router({
    mode: "history", //模式修改  
    routes: asyncRouterMap
})

router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title == undefined?'默认标题':to.meta.title
    next();
})


/*导出路由模块*/
export default router

 src/views/exception/404.vue

New file
@@ -0,0 +1,13 @@
<template>
    <div>404</div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>