166 lines
8.6 KiB
Vue
166 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<!-- <div class="container-fluid z-0" style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
|
|
<div class="flex justify-center">
|
|
<div class="mt-9 inline-flex p-2">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
|
|
<span class="text-blue-600" >Teeny Beans Curriculum </span> <span class=" text-yellow-900" > Blog </span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="mb-9 inline-flex p-1">
|
|
<form>
|
|
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
|
|
<div class="relative w-96">
|
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
</div>
|
|
<input type="search" id="default-search" class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
|
|
<button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="mt-9 inline-flex p-2">
|
|
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<section class="container mx-auto">
|
|
<!-- <section class="container mx-auto">
|
|
<div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
|
|
<div class="ml-12 mr-9 pl-9 pr-9 md:hidden"> </div>
|
|
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> </div>
|
|
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> </div>
|
|
<div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> </div>
|
|
<div class="ml-9 mr-9 md:hidden"> </div>
|
|
<a href="/blog/?category=classroom-solution" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Classroom Solution </a >
|
|
<a href="/blog/?category=preschool-solution" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Preschool Solution </a>
|
|
<a href="/blog/?category=technology" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Technology </a>
|
|
<a href="/blog/?category=curriculum" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Curriculum </a>
|
|
<a href="/blog/?category=marketting" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Marketing </a>
|
|
<a href="/blog/?category=lesson-plans" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Lesson Plans </a>
|
|
<a href="/blog/?category=video-articles" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Video Articles </a>
|
|
<a href="/blog/?category=occassion" class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 "> Occassion </a>
|
|
</div>
|
|
</section> -->
|
|
|
|
<div class="xl:px-24">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
|
<div v-for="(item, index) in tbBlog" class="shadow-md rounded p-2 m-2">
|
|
<figure class=" p-4 ">
|
|
<img class="w-full" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img" alt="" style="width:100%; height: 205px;">
|
|
<!-- '?width=420&height=280' -->
|
|
<div class="flex place-items-center bg-yellow-200 absolute -mt-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{item.date}}</div>
|
|
<div class="pt-6 space-y-4">
|
|
<blockquote>
|
|
<p class="text-3xl font-medium text-color-1 line-clamp-2">{{ item.title }}</p>
|
|
</blockquote>
|
|
<figcaption class="font-medium">
|
|
<!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
|
|
<div class="text-color-2 text-xl position-fixed line-clamp-3" v-html="item.meta_description"></div>
|
|
<div class="text-slate-700 p-2 shadow-md rounded text-center">
|
|
<a :href="'/blog/' + item.slug" class="text-blue-600"> Read More >> </a>
|
|
</div>
|
|
</figcaption>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<!-- <FaqSection /> -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</template>
|
|
<style>
|
|
.text-color-1 {
|
|
color: #7C4C23;
|
|
|
|
}
|
|
.text-color-2 {
|
|
color: #333333;
|
|
}
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-align: justify;
|
|
padding: 4px;
|
|
}
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
setup(){
|
|
// const route = useRoute();
|
|
// useHead({
|
|
// title: 'Teenybeans Preschool Curriculum',
|
|
// meta: [
|
|
// {
|
|
// name: `title`,
|
|
// content: `Blogs - Teeny Beans Preschool Curriculum`
|
|
// },
|
|
// {
|
|
// name: `description`,
|
|
// content: `Get detailed information about the preschool industry and the challenges it faces.`
|
|
// },
|
|
// ],
|
|
// })
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
tbBlog: {},
|
|
tbBlog_classroom_solution: [],
|
|
tbBlog_preschool_solution: {},
|
|
tbBlog_technology: {},
|
|
tbBlog_curriculum: {},
|
|
tbBlog_marketting: {},
|
|
tbBlog_lession_plan: {},
|
|
tbBlog_video_articles: {},
|
|
tbBlog_occassion: {}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getItemByCategory()
|
|
// console.log(this.smProducts)
|
|
// console.log(this.$route.query.cat)
|
|
// console.log(this.fruits)
|
|
},
|
|
methods: {
|
|
getItemByCategory() {
|
|
fetch('https://management.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum&sort=sort,-date_created')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.tbBlog = data.data
|
|
// console.log(data)
|
|
this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
|
|
this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });
|
|
this.tbBlog_technology = data.data.filter(item => { if (item.category == "technology") return item });
|
|
this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
|
|
this.tbBlog_marketting = data.data.filter(item => { if (item.category == "marketting") return item });
|
|
this.tbBlog_lession_plan = data.data.filter(item => { if (item.category == "lession-plan") return item });
|
|
this.tbBlog_video_articles = data.data.filter(item => { if (item.category == "video-articles") return item });
|
|
this.tbBlog_occassion = data.data.filter(item => { if (item.category == "occassion") return item });
|
|
|
|
this.isLoading = false
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |