update
This commit is contained in:
Suvodip Ghosh
@@ -1,166 +1,150 @@
|
||||
<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">
|
||||
<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 to="/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 to="/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 to="/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 to="/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 to="/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 to="/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 to="/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 to="/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>
|
||||
<div class="p-5">
|
||||
<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://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&height=280'" alt="" >
|
||||
<div class="flex 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-1">{{ 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 line-clamp-3 text-xl" v-html="item.preview_text"></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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<style>
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
|
||||
}
|
||||
.text-color-2 {
|
||||
color: #333333;
|
||||
line-clamp: 2;
|
||||
|
||||
}
|
||||
.line-clamp-3 {
|
||||
/* display: -webkit-box; */
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
export default {
|
||||
// setup(){
|
||||
// // const route = useRoute();
|
||||
// useHead({
|
||||
// title: 'Teenybeans Preschool Curriculum - Blog',
|
||||
// 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://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum')
|
||||
.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
|
||||
})
|
||||
<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">
|
||||
<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>
|
||||
<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://curriculum-app-api.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">{{ 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-4" 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;
|
||||
|
||||
}
|
||||
</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://curriculum-app-api.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>
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user