嘿~国庆更文--博文展示前端页面编写

Huterox
154 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言

今天是国庆第一天，虽然是放假，但是奈何要练车，要写论文，所以事情还是很多。刚好手头上的项目还没做完，后端的东西，算法的东西确实是比较耗费精力，所以，咱们这个节假日就轻松一点，咱们来写写前端，顺便把WhiteHole的前端页面写完。关于这个项目的话，咱们是要上线的但是推荐算法可能在这个版本是之后单纯进行统计数据，而不是通过机器学习进行用户画像的绘制。先把当前的版本做好，这个后面上线还是没什么问题的，技术上实现起来还是很简单的，当然看规模和体量。那么在未来也是立志于人工智能的方向的学习与研究。

那么我们先来看看我们做了个啥。

image.png

image.png

咱们这里是做了一个 博文的展示页面。那么这个社区最大的区别就是博文是可以让大家参与的，也就是说我们将区别与别的平台，博文的推荐不是说你是平台的大V就可以获得推广，而是说看文章的质量，同时我们将时刻推荐最新的博文内容，以便更多优秀的文章不会被埋没，这些我会专门设计一个算法。

那么废话不多说，咱们来看看这个页面是怎么做的。

标题显示

咱们的布局是直接使用ElementUI的布局。这个大家应该是看出来了，那么我们的也是大致分为三大块，左侧边栏，中间和右侧。由于头部有点问题，所以我把Header给删除了，文章的标题是在main里面的。


    <div style="width: 100%">
            <p style="font-size: 20px;font-family: 幼圆;font-weight: bold">WhiteHole项目</p>
              <div style="height:100px">
<!--                <el-avatar shape="circle" style="display:inline-block;"-->
<!--                            :size="100" src="/static/temporary/headpic.jpg">-->

<!--                </el-avatar>-->
                <div  style="width:13%;height: 100%;border-radius: 100px;display:inline-block;">
                  <img
                    style="width:100%;height: 100%;border-radius: 100px"
                    src="/static/temporary/headpic.jpg"
                    class="image"
                  >
                </div>
                <div style="display:inline-block;margin-left: 5%;vertical-align:top">
                  <p>Huterox</p>
                  <p class="message">
                    2022年10月01日 10:37 ·  阅读 4296
                  </p>
                </div>

                <div style="display:inline-block;margin-left: 20%;vertical-align:top">
                  <p>
                    <el-button @click="focusOn"  v-if="focusOnFlag===false" icon="el-icon-plus" type="primary" plain >
                      <span>关注</span>
                    </el-button>
                    <el-button @click="focusOn"  v-else icon="el-icon-check" type="primary" plain >
                      <span>已关注</span>
                    </el-button>
                  </p>
                </div>
              </div>
        </div>

这里的话因为这个 el-avatar 是截取图片的一个部分，所以的话，我还是自己做了一个头像的显示。

值得一提的是，现在这个东西都只是有一个样子，数据什么的都还没有。

内容与评论

内容

内容的模块的话，这个我会使用markdown的插件，这个后面是会将markdown转义成html的，现在这边我们就写死。展示一下。

<div>
  <hr style="margin:0px;background-color:#eee;height:0.5px;border:none;" />
  <div class="stackedit__html"><h1><a id="WhiteHole_0"></a>WhiteHole</h1>
    <p>whitehole是一个由Huterox团队开发的致力于社区交流，知识共享的社区交流平台。同时也是Huterox本人用于技术成长的中型项目。</p>
    <h1><a id="_4"></a>期望</h1>
    <p>我们希望这个项目是最终用于上线的WhiteHole项目，本次将采用符合企业的开发的标准流程进行开发，并作为用于记录成长的开源项目。我们期望这个项目将成为一个合格的基于分布式的优秀项目，未来也期望得益于分布式架构，我们将集成人工智能模块，完成完整的用户推荐系统，流量检测分析，AI用户检测行为检测等。最后本团队Huterox希望能够在大三学期末完成基本功能构建并上线。同时也希望和别的小伙伴一起努力去经营这个项目。</p>
    <h1><a id="_8"></a>立项</h1>
    <p>本项目从Huterox在大学本科阶段二年级就开始筹划，技术栈从基于Python的Django体系至基于SpringBoot+vue的体系，到如今的基于分布式微服务构建的体系。当前历经了3个技术版本的迭代，前两次均为技术验证，本次为第三次，目标为上线。</p>
    <p>不同版本之间的区别如下：</p>
    <ol>
      <li>
        <p>Django版本，基于Python 采用MVT设计模式，纯原生html css js开发<br>
          项目地址：<a href="https://gitee.com/Huterox/WhiteHole">https://gitee.com/Huterox/WhiteHole</a></p>
      </li>
      <li>
        <p>SpringBoot+vue 版本，采用前后端分离模式设计，主要亮点在于前端。<br>
          项目地址：<a href="https://github.com/Huterox/WhiteHoleBoot">https://github.com/Huterox/WhiteHoleBoot</a></p>
      </li>
      <li>
        <p>当前版本，使用分布式架构并将结合多种算法用于网站体验，同时将推出小程序，安卓，ios端。<br>
          项目地址（前端）：<a href="https://gitee.com/Huterox/white-hole-vue">https://gitee.com/Huterox/white-hole-vue</a><br>
          项目地址（后端）：<a href="https://gitee.com/Huterox/white-hole-cloud">https://gitee.com/Huterox/white-hole-cloud</a></p>
      </li>
    </ol>
    <h1><a id="_23"></a>作者</h1>
    <p>Huterox</p>
    <p>csdn地址：<a href="https://blog.csdn.net/FUTEROX">https://blog.csdn.net/FUTEROX</a><br>
      邮箱： 3139541502@qq.com<br>
      掘金地址： <a href="https://juejin.cn/user/2542529912789694">https://juejin.cn/user/2542529912789694</a></p>
  </div>

评论

咱们的这个评论的话是满大街copy过来的。

这个部分咱们就真的是没啥好说的。 这个的话我调整了一下，作为组件使用。

<template>
    <div>
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
            <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
            <div class="reply-info" >
                <div
                        tabindex="0"
                        contenteditable="true"
                        id="replyInput"
                        spellcheck="false"
                        placeholder="输入评论..."
                        class="reply-input"
                        @focus="showReplyBtn"
                        @input="onDivInput($event)"
                >
                </div>
            </div>
            <div class="reply-btn-box" v-show="btnShow">
                <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
            </div>
        </div>
        <div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
            <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
            <div class="author-info">
                <span class="author-name">{{item.name}}</span>
                <span class="author-time">{{item.time}}</span>
            </div>
            <div class="icon-btn">
                <span @click="showReplyInput(i,item.name,item.id)">
                  <i style="font-size: 6px" class="iconfont el-icon-s-comment">回复</i>
                </span>
            </div>
            <div class="talk-box">
                <p>
                    <span class="reply">{{item.comment}}</span>
                </p>
            </div>
            <div class="reply-box">
                <div v-for="(reply,j) in item.reply" :key="j" class="author-title">
                    <el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar>
                    <div class="author-info">
                        <span class="author-name">{{reply.from}}</span>
                        <span class="author-time">{{reply.time}}</span>
                    </div>
                    <div class="icon-btn">
                        <span @click="showReplyInput(i,reply.from,reply.id)">
                          <i style="font-size: 6px" class="iconfont el-icon-s-comment">回复</i>
                        </span>
                    </div>
                    <div class="talk-box">
                        <p>
                            <span style="font-size: 8px">@ {{reply.to}}:</span>
                            <span class="reply">{{reply.comment}}</span>
                        </p>
                    </div>
                    <div class="reply-box">

                    </div>
                </div>
            </div>
            <div  v-show="_inputShow(i)" class="my-reply my-comment-reply">
                <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                <div class="reply-info" >
                    <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."   @input="onDivInput($event)"  class="reply-input reply-comment-input"></div>
                </div>
                <div class=" reply-btn-box">
                    <el-button class="reply-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
  name:'comment_ans',
  data(){
    return{
      btnShow: false,
      index:'0',
      replyComment:'',
      myName:'Lana Del Rey',
      myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
      myId:19870621,
      to:'',
      toId:-1,
      comments:[
        {
          name:'Lana Del Rey',
          id:19870621,
          headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
          comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
          time:'2019年9月16日 18:43',
          inputShow:false,
          reply:[
            {
              from:'Taylor Swift',
              fromId:19891221,
              fromHeadImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
              to:'Lana Del Rey',
              toId:19870621,
              comment:'我很喜欢你的新专辑！！',
              time:'2019年9月16日 18:43',
              inputShow:false
            },
            {
              from:'Ariana Grande',
              fromId:1123,
              fromHeadImg:'https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg',
              to:'Lana Del Rey',
              toId:19870621,
              comment:'别忘记宣传我们的合作单曲啊',
              time:'2019年9月16日 18:43',
              inputShow:false

            }
          ]
        },
        {
          name:'Taylor Swift',
          id:19891221,
          headImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
          comment:'我发行了我的新专辑Lover',
          time:'2019年9月16日 18:43',
          inputShow:false,
          reply:[
            {
              from:'Lana Del Rey',
              fromId:19870621,
              fromHeadImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
              to:'Taylor Swift',
              toId:19891221,
              comment:'新专辑和speak now 一样棒！',
              time:'2019年9月16日 18:43',
              like:5,
              inputShow:false

            }
          ]
        },
        {
          name:'Norman Fucking Rockwell',
          id:20190830,
          headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg',
          comment:'Plz buy Norman Fucking Rockwell on everywhere',
          time:'2019年9月16日 18:43',
          inputShow:false,
          reply:[]
        },
      ]
    }
  },
  directives: {clickoutside},
  methods: {
    inputFocus(){
      var replyInput = document.getElementById('replyInput');
      replyInput.style.padding= "8px 8px"
      replyInput.style.border ="2px solid blue"
      replyInput.focus()
    },
    showReplyBtn(){
      this.btnShow = true
    },
    hideReplyBtn(){
      this.btnShow = false
      replyInput.style.padding= "10px"
      replyInput.style.border ="none"
    },
    showReplyInput(i,name,id){
      this.comments[this.index].inputShow = false
      this.index =i
      this.comments[i].inputShow = true
      this.to = name
      this.toId = id
    },
    _inputShow(i){
      return this.comments[i].inputShow
    },
    sendComment(){
      if(!this.replyComment){
        this.$message({
          showClose: true,
          type:'warning',
          message:'评论不能为空'
        })
      }else{
        let a ={}
        let input =  document.getElementById('replyInput')
        let timeNow = new Date().getTime();
        let time= this.dateStr(timeNow);
        a.name= this.myName
        a.comment =this.replyComment
        a.headImg = this.myHeader
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments.push(a)
        this.replyComment = ''
        input.innerHTML = '';

      }
    },
    sendCommentReply(i,j){
      if(!this.replyComment){
        this.$message({
          showClose: true,
          type:'warning',
          message:'评论不能为空'
        })
      }else{
        let a ={}
        let timeNow = new Date().getTime();
        let time= this.dateStr(timeNow);
        a.from= this.myName
        a.to = this.to
        a.fromHeadImg = this.myHeader
        a.comment =this.replyComment
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments[i].reply.push(a)
        this.replyComment = ''
        document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
      }
    },
    onDivInput: function(e) {
      this.replyComment = e.target.innerHTML;
    },
    dateStr(date){
      //获取js 时间戳
      var time=new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time=parseInt((time-date)/1000);
      //存储转换值
      var s;
      if(time<60*10){//十分钟内
        return '刚刚';
      }else if((time<60*60)&&(time>=60*10)){
        //超过十分钟少于1小时
        s = Math.floor(time/60);
        return  s+"分钟前";
      }else if((time<60*60*24)&&(time>=60*60)){
        //超过1小时少于24小时
        s = Math.floor(time/60/60);
        return  s+"小时前";
      }else if((time<60*60*24*30)&&(time>=60*60*24)){
        //超过1天少于30天内
        s = Math.floor(time/60/60/24);
        return s+"天前";
      }else{
        //超过30天ddd
        var date= new Date(parseInt(date));
        return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.my-reply
  padding 10px
  background-color #fafbfc
  .header-img
    display inline-block
    vertical-align top
  .reply-info
    display inline-block
    margin-left 5px
    width 90%
    @media screen and (max-width:1200px) {
      width 80%
    }
    .reply-input
      min-height 20px
      line-height 22px
      padding 10px 10px
      color #ccc
      background-color #fff
      border-radius 5px
      &:empty:before
        content attr(placeholder)
      &:focus:before
        content none
      &:focus
        padding 8px 8px
        border 2px solid blue
        box-shadow none
        outline none
  .reply-btn-box
    height 25px
    margin 10px 0
    .reply-btn
      position relative
      float right
      margin-right 15px
.my-comment-reply
  margin-left 50px
  .reply-input
    width flex
.author-title:not(:last-child)
  border-bottom: 1px solid rgba(178,186,194,.3)
.author-title
  padding 10px
  .header-img
    display inline-block
    vertical-align top
  .author-info
    display inline-block
    margin-left 5px
    width 60%
    height 40px
    line-height 20px
    >span
      display block
      cursor pointer
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    .author-name
      color #000
      font-size 10px
      font-weight bold
    .author-time
      font-size 8px
  .icon-btn
    width 30%
    padding 0 !important
    float right
    @media screen and (max-width : 1200px){
      width 20%
      padding 7px
    }
    >span
      cursor pointer
    .iconfont
      margin 0 5px
  .talk-box
    margin 0 50px
    >p
      margin 0
    .reply
      font-size 8px
      color #000
  .reply-box
    margin 10px 0 0 50px
    background-color #efefef
</style>

之后的话我们引用就好了。

<div>
  <hr style="margin:1px;background-color:#eee;height:5px;border:none;" />
  <comment_article></comment_article>
</div>

右侧栏

这个就是咱们的这个贡献栏和日志栏。 啊这个我们就是仿造gitee。博文嘛大家都要有参与感，如果能够活下来，我们在搞一个专门的检索库，谁的博文相似度>60% 发都发不出去。

<el-aside width="25%">

  <div class="show">
    <p>
      <el-tooltip content="参与文章Pull，并通过作者审核后可上榜" placement="bottom" effect="light">
        <el-button icon="el-icon-trophy" type="primary" round size="big">贡献墙</el-button>
      </el-tooltip>
    </p>
    <div>
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      <el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
      <el-avatar src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-avatar>
    </div>
  </div>
    <div class="show">
      <p>日志</p>
      <el-timeline v-if="Message.length>0" v-infinite-scroll="load"
                   v-bind:infinite-scroll-distance="long"
                   infinite-scroll-disabled="busy"
                   class="infinite-list">
        <el-timeline-item
          v-for="(message, index) in Message"
          :key="index"
          :color=message.color
          :timestamp="message.data"
        >
          {{message.content}}
        </el-timeline-item>
      </el-timeline>
    </div>

</el-aside>

左侧栏

这个就更简单了，不过注意目前都是没写好的假数据。只是看看样子的。

<el-aside width="8%">
  <div>
    <br><br>
    <div>
      <el-badge :value="11" class="item" type="primary">
        <el-button size="big" icon="el-icon-check"></el-button>
      </el-badge>
    </div>
    <br>
    <div>
      <el-badge :value="11" class="item" type="primary">
        <el-button size="big" icon="el-icon-star-off"></el-button>
      </el-badge>
    </div>
    <br>
    <div>
      <el-badge :value="12" class="item" type="primary">
        <el-button size="big" icon="el-icon-chat-dot-square"></el-button>
      </el-badge>
    </div>
    <br>
    <div>
      <el-badge :value="12" class="item" type="primary">
        <el-button size="big" icon="el-icon-upload2"></el-button>
      </el-badge>
    </div>
    <br>

    <div>
        <el-button class="share-button" icon="el-icon-share" type="primary" plain></el-button>
    </div>
    <br>
    <div>
      <el-button class="share-button"  type="primary" plain>Fork</el-button>
    </div>

  </div>
</el-aside>

完整代码

最后我们来看看完整的代码。

<template>
<div style="width: 85%;margin: 0 auto">

  <el-container>
    <el-container>
      <el-aside width="8%">
        <div>
          <br><br>
          <div>
            <el-badge :value="11" class="item" type="primary">
              <el-button size="big" icon="el-icon-check"></el-button>
            </el-badge>
          </div>
          <br>
          <div>
            <el-badge :value="11" class="item" type="primary">
              <el-button size="big" icon="el-icon-star-off"></el-button>
            </el-badge>
          </div>
          <br>
          <div>
            <el-badge :value="12" class="item" type="primary">
              <el-button size="big" icon="el-icon-chat-dot-square"></el-button>
            </el-badge>
          </div>
          <br>
          <div>
            <el-badge :value="12" class="item" type="primary">
              <el-button size="big" icon="el-icon-upload2"></el-button>
            </el-badge>
          </div>
          <br>

          <div>
              <el-button class="share-button" icon="el-icon-share" type="primary" plain></el-button>
          </div>
          <br>
          <div>
            <el-button class="share-button"  type="primary" plain>Fork</el-button>
          </div>

        </div>
      </el-aside>
      <el-main>
          <div style="width: 100%">
            <p style="font-size: 20px;font-family: 幼圆;font-weight: bold">WhiteHole项目</p>
              <div style="height:100px">
<!--                <el-avatar shape="circle" style="display:inline-block;"-->
<!--                            :size="100" src="/static/temporary/headpic.jpg">-->

<!--                </el-avatar>-->
                <div  style="width:13%;height: 100%;border-radius: 100px;display:inline-block;">
                  <img
                    style="width:100%;height: 100%;border-radius: 100px"
                    src="/static/temporary/headpic.jpg"
                    class="image"
                  >
                </div>
                <div style="display:inline-block;margin-left: 5%;vertical-align:top">
                  <p>Huterox</p>
                  <p class="message">
                    2022年10月01日 10:37 ·  阅读 4296
                  </p>
                </div>

                <div style="display:inline-block;margin-left: 20%;vertical-align:top">
                  <p>
                    <el-button @click="focusOn"  v-if="focusOnFlag===false" icon="el-icon-plus" type="primary" plain >
                      <span>关注</span>
                    </el-button>
                    <el-button @click="focusOn"  v-else icon="el-icon-check" type="primary" plain >
                      <span>已关注</span>
                    </el-button>
                  </p>
                </div>
              </div>
        </div>
        <br><br>
<!--         文章的主体内容，这部分的话应该是markdown插件去渲染的-->
        <div>
          <hr style="margin:0px;background-color:#eee;height:0.5px;border:none;" />
          <div class="stackedit__html"><h1><a id="WhiteHole_0"></a>WhiteHole</h1>
            <p>whitehole是一个由Huterox团队开发的致力于社区交流，知识共享的社区交流平台。同时也是Huterox本人用于技术成长的中型项目。</p>
            <h1><a id="_4"></a>期望</h1>
            <p>我们希望这个项目是最终用于上线的WhiteHole项目，本次将采用符合企业的开发的标准流程进行开发，并作为用于记录成长的开源项目。我们期望这个项目将成为一个合格的基于分布式的优秀项目，未来也期望得益于分布式架构，我们将集成人工智能模块，完成完整的用户推荐系统，流量检测分析，AI用户检测行为检测等。最后本团队Huterox希望能够在大三学期末完成基本功能构建并上线。同时也希望和别的小伙伴一起努力去经营这个项目。</p>
            <h1><a id="_8"></a>立项</h1>
            <p>本项目从Huterox在大学本科阶段二年级就开始筹划，技术栈从基于Python的Django体系至基于SpringBoot+vue的体系，到如今的基于分布式微服务构建的体系。当前历经了3个技术版本的迭代，前两次均为技术验证，本次为第三次，目标为上线。</p>
            <p>不同版本之间的区别如下：</p>
            <ol>
              <li>
                <p>Django版本，基于Python 采用MVT设计模式，纯原生html css js开发<br>
                  项目地址：<a href="https://gitee.com/Huterox/WhiteHole">https://gitee.com/Huterox/WhiteHole</a></p>
              </li>
              <li>
                <p>SpringBoot+vue 版本，采用前后端分离模式设计，主要亮点在于前端。<br>
                  项目地址：<a href="https://github.com/Huterox/WhiteHoleBoot">https://github.com/Huterox/WhiteHoleBoot</a></p>
              </li>
              <li>
                <p>当前版本，使用分布式架构并将结合多种算法用于网站体验，同时将推出小程序，安卓，ios端。<br>
                  项目地址（前端）：<a href="https://gitee.com/Huterox/white-hole-vue">https://gitee.com/Huterox/white-hole-vue</a><br>
                  项目地址（后端）：<a href="https://gitee.com/Huterox/white-hole-cloud">https://gitee.com/Huterox/white-hole-cloud</a></p>
              </li>
            </ol>
            <h1><a id="_23"></a>作者</h1>
            <p>Huterox</p>
            <p>csdn地址：<a href="https://blog.csdn.net/FUTEROX">https://blog.csdn.net/FUTEROX</a><br>
              邮箱： 3139541502@qq.com<br>
              掘金地址： <a href="https://juejin.cn/user/2542529912789694">https://juejin.cn/user/2542529912789694</a></p>
          </div>
<!--          评论部分-->
          <br><br>
          <div>
            <hr style="margin:1px;background-color:#eee;height:5px;border:none;" />
            <comment_article></comment_article>
          </div>

        </div>

      </el-main>
      <el-aside width="25%">

        <div class="show">
          <p>
            <el-tooltip content="参与文章Pull，并通过作者审核后可上榜" placement="bottom" effect="light">
              <el-button icon="el-icon-trophy" type="primary" round size="big">贡献墙</el-button>
            </el-tooltip>
          </p>
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
            <el-avatar src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-avatar>
          </div>
        </div>
          <div class="show">
            <p>日志</p>
            <el-timeline v-if="Message.length>0" v-infinite-scroll="load"
                         v-bind:infinite-scroll-distance="long"
                         infinite-scroll-disabled="busy"
                         class="infinite-list">
              <el-timeline-item
                v-for="(message, index) in Message"
                :key="index"
                :color=message.color
                :timestamp="message.data"
              >
                {{message.content}}
              </el-timeline-item>
            </el-timeline>
          </div>

      </el-aside>
    </el-container>
  </el-container>

</div>
</template>

<script>
import comment_article from "../../components/comment/comment_article";
export default {
  name: "blogshow",
  components:{
    comment_article
  },
  data(){
    return{
      focusOnFlag:false,
      long: 2,
      Message: [
        {
          //颜色由后端传递
          content: 'Huterox 修改了博文',
          data: '2022-10-2',
          color:'#0f6cc9'
        }, {
          content: 'Dx pull了博文',
          data: '2022-05-02',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
        {
          content: 'Huterox 修改博文',
          data: '2022-05-01',
          color:'#69d3b4'
        },
      ],
    }
  },
  methods:{
    focusOn(){
      this.focusOnFlag=!this.focusOnFlag;
      if(this.focusOnFlag){
        alert("关注成功")
      }else {
        alert("取关成功")
      }

    },

    load () {
      //这部分让你的axios去动态加载
      let temp=[
        {
          content: '加载了',
          data: '2022-03-27',
        },
        {
          content: '加载了',
          data: '2022-03-27',
        }

      ]
      for (let i = 0; i < temp.length; i++) {
        this.Message.push(temp[i])
      }

    },
  }
}
</script>

<style  lang="stylus" scoped>
.show{
  margin: 20px auto;
  width: 90%;

  border: 2px solid #81badc;
  transition: all 0.9s;
  border-radius: 10px;

}
.show:hover{
  box-shadow: 0px 15px 30px rgb(12, 132, 224);
  margin-top: 10px;

}
.el-header, .el-footer {

  text-align: center;
}

.el-aside {
  background-color:#f9fafc;
  color: #333;
  text-align: center;
  line-height: 50px;
}

.el-main {
  background-color: white;
  color: #333;

}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
avatar
文章
阅读
粉丝