Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement