Left页面

Js部分

<template>
  <div id="" class="left_box">
    <Lunbo></Lunbo>
    <div class="article_ListView">
      <p class="article_alltitle st">
        <span>最新文章</span>
        <span>New article</span>
      </p>
      <ArticleList></ArticleList>
    </div>
  </div>
</template>

<script>
import Lunbo from './Lunbo.vue'
import ArticleList from './ArticleList.vue'

export default {
  name: 'LeftBox',
  components: {
    Lunbo,
    ArticleList
  }
}
</script>

<style lang="less" scoped>
.left_box {
  .article_ListView {
    margin-top: 20px;
  }
}
  .article_alltitle {
    font-weight: bolder;
    font-size: 3rem;
  }
@media only screen and (min-width: 755px) {
  .left_box{
    width: 100%;
  }
  .article_alltitle span:nth-child(2) {
    top: 18px;
  }
}
@media only screen and (max-width: 755px) {
  .left_box{
    margin-top: 56px;
  }
  .article_alltitle span:nth-child(2) {
    top: 18px;
  }
}
</style>

当你看到这篇文章时，访问Windows窗口页面的主页左侧，分为上下两部分，上部分是轮播，下部分则就是最新文章组件，每一个文章都是一个独立的单独组件，通过这个Left向服务端发送请求获取文章Item来进行列表渲染。