日志内页添加头图

 src/components/group/articleListScorll.vue

@@ -18,7 +18,7 @@
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
                    :showLessItems="true" :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
            </div>
        </a-row>


 src/components/group/tool.vue

@@ -2,38 +2,49 @@
    <a-affix :offset-top="600">

        <div style="padding-left:5px;" class="myButton">
            <!-- <a-button @click="showDrawer1">
                抽屉1
            </a-button> -->
            <!-- <a-button @click="showDrawer2">
                抽屉2
            </a-button> -->
			
            <a-button @click="showMessage">
                <a-badge status="success">
                    消息
                </a-badge>
                <a-icon type="message" />
            </a-button>
            <a-button @click="showPreview">
                预览
                <a-icon type="youtube" />
            </a-button>
            <a-button @click="showModal">
                日志
                <a-icon type="plus-circle" />
            </a-button>
            <a-button @click="showScreen">
                {{screenModel}}
                <transition name="fade">
                    <a-icon :type="iconType" />
                </transition>
            </a-button>
            <a-button @click="addLink" v-if="showHidenButton">
                加链
                <a-icon type="smile" />
            </a-button>
            <div>
                <a-button v-if="!drawerStatus" @click="changeDrawerStatus">
                    展开
                    <a-icon type="down" />
                </a-button>
                <a-button v-if="drawerStatus" @click="changeDrawerStatus">
                    合上
                    <a-icon type="up" />
                </a-button>
            </div>
            <div v-if="drawerStatus">
                <a-button @click="()=>this.$router.back(-1)">
                    后退
                    <a-icon type="left" />
                </a-button>

                <a-button @click="showPreview">
                    预览
                    <a-icon type="youtube" />
                </a-button>
                <a-button @click="showScreen" v-if="!screen">
                    拉伸
                    <a-icon type="arrows-alt" />
                </a-button>
                <a-button @click="showScreen" v-if="screen">
                    缩小
                    <a-icon type="shrink" />
                </a-button>
                <a-button @click="showModal">
                    日志
                    <a-icon type="plus-circle" />
                </a-button>
                <a-button @click="addLink" v-if="showHidenButton">
                    加链
                    <a-icon type="smile" />
                </a-button>
                <a-button @click="showMessage">
                    <a-badge status="success">
                        <span>消息</span>
                    </a-badge>
                    <a-icon type="message" />
                </a-button>
            </div>
            <!-- <a-button>
                工具
                <a-icon type="tool" style="margin-left: 0px;" />
@@ -48,10 +59,9 @@
    export default {
        data() {
            return {
                iconType: "arrows-alt",
                screen: false,
                screenModel: "拉伸",
                showHidenButton: false,
                drawerStatus: false
            }
        },
        mounted() {
@@ -62,6 +72,9 @@
            }
        },
        methods: {
            changeDrawerStatus() {
                this.drawerStatus = !this.drawerStatus;
            },
            addLink() {
                this.$emit('addLink')
            },
@@ -76,13 +89,6 @@
            },
            showScreen() {
                this.$emit('showScreen')
                if (this.screen) {
                    this.screenModel = "拉伸";
                    this.iconType = "arrows-alt";
                } else {
                    this.screenModel = "缩小";
                    this.iconType = "shrink"
                }
                this.screen = !this.screen;
            }
        },

 src/components/mini/mdDetail.vue

@@ -1,9 +1,14 @@
<template>
    <div class="article-meta">
        <div>
        <!-- <div>
            <a-button @click="()=>this.$router.back(-1)" style="position: absolute;">
                <a-icon type="left" />
            </a-button>
        </div> -->

        <div class="headertop filter-dot headertop-bar">
            <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}">
            </figure>
        </div>

        <div v-if="showMsg && !myLock">
@@ -50,7 +55,11 @@
            </div>
        </div>

        <div class="articleInfoMiniData">
        <!-- <div class="articleInfoMiniData">
            <div>
                <a-icon type="calendar" class="samllPadding" />
                <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
            </div>
            <div class="smallOption" @click="articleOptionHandle('dislike')">
                <a-icon type="dislike" style="margin-top: 2px;" />
            </div>
@@ -63,15 +72,12 @@
                <span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
            </div>
            <div>
                <!-- <a-icon type="folder-open" class="samllPadding" /> -->
                <a-icon type="book" class="samllPadding" />
                <span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
            </div>
            <div>
                <a-icon type="calendar" class="samllPadding" />
                <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
            </div>
        </div>
                <a-icon type="folder-open" class="samllPadding" />
        </div> -->

        <div class="articleComment">
            <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
        </div>
@@ -117,6 +123,7 @@
                    value: '',
                    disabled: false
                },
                coverURL: "http://t.inleft.com/share/media_photo/background.jpg"
            }
        },
        created() {
@@ -185,6 +192,11 @@
                    this.isAllowedComment = res.data.isAllowedComment;
                    this.introduce = res.data.introduce;
                    this.articleFileType = res.data.articleFileType;
                    if (res.data.coverFileURL != null && res.data.coverFileURL != '') {
                        this.coverURL = res.data.coverFileURL;
                    } else {
                        this.coverURL = "http://t.inleft.com/share/media_photo/background.jpg";
                    }

                    this.articelMeta = res.data;

@@ -225,6 +237,54 @@
<style lang="less">
    @import '../../assets/md.less';

    .headertop {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
    }

    .centerbg {
        width: 100%;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        // background-attachment: fixed;
        background-size: cover;
        z-index: -1;
        // background-image: url("http://t.inleft.com/blog//cover/这世界那么多人.jpg");
        height: 222px;
        background-size: 100% auto;
        background-position: center;
    }


    .headertop::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        background-attachment: fixed;
    }

    .headertop.filter-dot::before {
        // background-image: url("https://blog-img-1258635493.cos.ap-chengdu.myqcloud.com/cdn/img/other/dot.gif");
        // background-image: url("http://blog.inleft.com/photo/dot.gif");
    }

    // .headertop-bar::after {
    //     content: '';
    //     width: 150%;
    //     height: 4.375rem;
    //     background: linear-gradient(0deg, #fff, 84%, #ffffff4f);
    //     left: -25%;
    //     bottom: -2.875rem;
    //     border-radius: 100%;
    //     position: absolute;
    //     z-index: 4;
    // }

    .smallOption {
        transition-function: ease-out;
@@ -247,7 +307,7 @@
    .articleInfoMiniData {
        user-select: none;
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
        padding: 10px 50px;
        padding: 10px 23px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;