疫情数据分析平台（九）：新闻推送网页

疫情数据平台中，有一部分页面能够推送相应的新闻内容。设计时，设计成可以通过导航栏跳转，或者通过首页相应的板块跳转。对于新闻，我的设想是设计新闻栏目一条一条呈现，首先的新闻图片放在轮播图上，每一条新闻可以点击跳转到外部链接。

由于主要功能并非新闻，数据分析和可视化也不涉及新闻。因此我的工作只需要把后端传输过来的新闻列表贴出来。展示到相应位置即可。首先是主页上的新闻部分：

<div class="news-part-box">

    <el-row>
    <h2 class="news-part-title">新闻推送</h2>
    <el-button round class="button-element" type="primary" plain @click="onSubmit">更多</el-button>
    </el-row>

    <div class="block-box">
      <el-carousel height="360px" indicator-position="none" class="carousel-box">
        <el-carousel-item v-for="item in this.trueNewsList" :key="item">
          <el-image
            style="width: 100%; height: 100%"
            :src="item.imgsrc"
            :fit="fit"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="block-box" id="block2">
      <ul>
        <li v-for="one in trueNewsList"><i class="el-icon-caret-right"><a :href="one.url">{{one.title}}</a>
          <el-divider></el-divider>
        </i>

        </li>
      </ul>
    </div>

  </div>

同时获取后端数据，由于后端获取的新闻链接，只给出了对应的id号，需要我们自己手动拼接网址：

loadnews(){
      var _this=this
      this.$axios.get('/news/1').then(resp=>{
        if(resp&&resp.status===200){
          _this.newslist=resp.data.data.items
          for(var i=3;i<7;i++){
            var obj=_this.newslist[i]
            obj.url="https://3g.163.com/news/article/"+obj.docid+".html"
            _this.trueNewsList.push(obj)
            //"https://3g.163.com/news/article/H7J4AOPN0001899O.html",
          }
        }
      }).catch((e)=>{})

自己手动构造对应的新闻链接。

效果如下：

 新闻推送页面中，我首先设计了一个新闻卡片，用来放上所需要的新闻内容（新闻标题、新闻图片、新闻发布者）：

 具体的代码是实现：

<el-card class="card-itself">
    <div class="card-inner">
      <div class="card-inner-img">
        <el-image
          style="width: 200px; height: 180px"
          :src="one.imgsrc"
          :fit="fit"></el-image>
      </div>
      <div class="card-inner-title">
        <ul>
          <li><i class="el-icon-thumb"></i><a :href="one.url" class="card-inner-a">{{one.title}}</a></li>
          <li>&nbsp;&nbsp;&nbsp;&nbsp;来源于:{{one.source}}</li>
        </ul>
      </div>
    </div>
  </el-card>

对每一个卡片依照想要的排布进行设计，图案选择element-ui提供的素材。

之后申请数据：

loadnewslist(){
      var _this=this
      this.$axios.get('/news/1').then(resp=>{
        if(resp&&resp.status===200){
          _this.news=resp.data.data.items
          for(var i=3;i<_this.news.length;i++){
            var obj=_this.news[i]
            obj.url="https://3g.163.com/news/article/"+obj.docid+".html"
            _this.newslist.push(obj)
          }
        }
      })
    }

传入vue声明的数组后，借助vue的v-for进行遍历，循环展现：

<div v-for="one in this.newslist" class="one-card">

最后效果如下：