component

<template>
  <div class="inner">
    <!-- <div class="background-hero" :style="{ backgroundImage: 'url(' + post.featured_image + ')' }"></div> -->
    <div class="body clearfix">
      <!-- Text Content -->
      <div class="content">
        <div class="content-title">
          <h1>{{category}}</h1>
          <p>Search Within {{category}}</p>
        </div>
        <div v-for="(post,index) in categoryPosts" :key="post.slug + '_' + index" >
            <div>
              <router-link :to="'/' + post.slug">
                  <div class="clearfix article-container">
                    <div><img :src="post.featured_image" alt="" class="article-image"></div>
                    <div class="article-text">
                      <h4>{{post.categories[0].name}}</h4>
                      <h3>{{post.title}}</h3>
                      <p>{{post.meta_description}}</p>
                    </div>
                  </div>
              </router-link>
            </div>
          </div>
      </div>

      <!-- Sidebar Content -->
      <div class="sidebar">
        <h2 class="sidebar-title">LATEST</h2>
          <div v-for="(posts,index) in postList" :key="posts.slug + '_' + index">
            <router-link :to="'/' + posts.slug">
              <div class="sidebar-block clearfix">
                <img v-if="posts.featured_image" :src="posts.featured_image" alt="" class="sidebar-image">
                <p class="sidebar-text">{{ posts.title }}</p>
              </div>
            </router-link>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { butter } from '@/buttercms'
  export default {
    name: 'PostCategory',
    data() {
      return {
        // post: {},
        postList: {},
        categoryPosts:{},
        category:''
      }
    },
    methods: {
      getCategoryPosts() {
      butter.category.retrieve(this.$route.params.category, {
          include: 'recent_posts'
        })
        .then((res) => {
          this.categoryPosts = res.data.data.recent_posts;
          this.category = this.$route.params.category;
        })
      },
      getPost() {
        butter.post.retrieve(this.$route.params.slug)
          .then((res) => {
            this.post = res.data.data
          }).catch((res) => {
          })
      },
      getPosts() {
        butter.post.list({
          page: 1,
          page_size: 3
        }).then((res) => {
          console.log(res.data)
          this.postList = res.data.data
        })
      },
    },
    watch: {
      '$route' (to, from, next) {
        this.getCategoryPosts();
        this.getPosts();
      }
    },
    created() {
      // this.getPost();
      this.getCategoryPosts();
      this.getPosts();
    }
  }
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .content{
    padding-top:5em;
    width:90%;
    margin:0 auto;
    h3{
      margin:0;
      color:#333;
      text-decoration: none;
      font-size:1.2em;
      &:hover{
        color:rgb(0, 67, 182);
      }
    }
    a{
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
    .article-container{
      display: block;
      margin:1em 0;
      padding:1.5em 0;
      border-bottom: 1px solid rgb(228, 228, 228);
    }
    h4{
      text-transform: uppercase;
      color:rgb(0, 67, 182);
      margin: 0.5em;
    }
  }
  .content p{
    color:#333;
    text-decoration: none;
    font-size:0.9em;
    margin:0;
    opacity:0.9;
    line-height: 25px;
  }
  .content-title h1{
    text-transform: uppercase;
    font-size:2em;
    text-align: left;
    &:after{
      content:'';
      position:absolute;
      top:0;
      width:100px;
      height:5px;
      background:red;
    }
  }
   .sidebar{
    //   z-index: 100;
    //   width:90%;
    //   margin:0 auto;
    //   max-width:850px;
    //   position: relative;
    //   top: -100px;
   display:none;
   }
  .sidebar-title{
    margin:1.4em 0;
  }
  .sidebar-title:after{
    content:'';
    width: 50px;
    height: 5px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 70px;
  }
  .sidebar-block{
    width:90%;
    color:black;
    font-size:1.1em;
    text-decoration:none;
    display: inline-block;
    text-align:center;
    margin:1em 0 0em 0;
  }
  .sidebar-image{
    display: block;
    text-align:center;
    width:35%;
  }
  .article-image{
    width:100%;
    display:block;
  }
  @media only screen and (min-width: 500px) {
    // .content{
    //   width:100%;
    // }
  }

  @media only screen and (min-width: 800px) {
    .body{
      padding:0 4em;
    }
    .content{
    }
    .article-image{
      width: 30%;
      float: left;
      margin: 0 20px 0 0;
    }
    .article-text{
      vertical-align:top;
    }
  }
  @media only screen and (min-width: 1100px) {
    .content{
      width:70%;
      display: inline-block;
      margin-right:5%;
    }
    .sidebar{
      margin-top:5em;
      width:20%;
      display: inline-block;
      vertical-align: top;
      .sidebar-block{
        margin:2em 0;
        display: block;
      }
      .sidebar-image{
        display:inline-block;;
        width:80%;
        margin-right:5px;
      }
      .sidebar-text{
        vertical-align: top;
        display: inline-block;
        width:100%;
        margin:0;
        font-size:0.8em;
      }
    }
  }
</style>