博客园调用网易新闻接口实现动态网页

<!-- run -->
<div id="app">
  <div style="height: 10px;"></div>
  <el-row :gutter="10">
    <el-col :span="isMobile?24:8" v-for="(item,i) in news" :key="i">
      <el-card shadow="hover" style="margin-bottom:10px;width: 100%;position: relative;">
        <el-link :underline="false" :href="item.path" style="width: 100%;">
          <el-image :src="item.image" fit="fill" style="width:100%;height:128px;"></el-image>
          <div style="margin: 8px auto;font-weight: bold;font-size: 0.9rem;" v-cloak>{{item.title}}</div>
          <span style="font-size: small;float: right;position: relative;bottom: 1px;">{{item.passtime}}</span>
        </el-link>
      </el-card>
    </el-col>
  </el-row>
  <div style="height: 10px;"></div>
</div>
<script>
  var news = []
  var isMobile = window.fn.isMobile()
  $.ajax('https://api.apiopen.top/getWangYiNews').then((data) => {
    if (data.code === 200) {
      news = data.result
      new Vue({
        el: '#app',
        data: {
          news: news,
          isMobile: isMobile,
        },
      })
    }
  })
</script>

点我查看 Markdown 源码