158 lines
6.6 KiB
Vue
158 lines
6.6 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Hero Section -->
|
|
<section class="container-fluid">
|
|
<div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div>
|
|
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
|
|
<div class="flex" style="font-family: quicksand; font-weight:bold;">
|
|
<h1 class="py-4 font-semibold ">Age: </h1>
|
|
<select class="select max-w-xs bg3" @change="switchSelect($event)">
|
|
<option value="2">Select Age</option>
|
|
<option value="2">2-3 Year</option>
|
|
<option value="3">3-4 Year</option>
|
|
<option value="4">4-5 Year</option>
|
|
<option value="5">5-6 Year</option>
|
|
</select>
|
|
</div>
|
|
<!-- <div class="flex ">
|
|
<h1 class="pt-3 font-semibold py-8">Category: </h1>
|
|
<select class="select max-w-xs">
|
|
<option>Select your Category</option>
|
|
<option>3-4 Year</option>
|
|
<option>4-5 Year</option>
|
|
<option>5-6 Year</option>
|
|
<option>6-7 Year</option>
|
|
</select>
|
|
</div> -->
|
|
</div>
|
|
</section>
|
|
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
|
<span class="h1-text text-color-1 font-semibold">All Worksheet</span>
|
|
<p class="font-20px text-color-2 pt-6 text-justify">In the era of increasing competition, it becomes more essential for every child to be equipped with general understanding of his/her surroundings, which is the why, our worksheet for preschoolers aim at every topic including this to enhance IQ of every child and providing an absolute overview and comprehension of topics like family, senses, body, myself and others. </p>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center my-10 pt-10">
|
|
<div v-for="worksheet in wsWorld" :key="wsWorld.id" class="grid">
|
|
<div class="grid place-items-center">
|
|
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
|
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://management.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
|
</div>
|
|
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
|
<a :href="'https://management.beanstalkedu.com/assets/'+ worksheet.file+'?download'" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<section class="container mx-auto pt-10 px-4 xl:px-24 mb-16">
|
|
<a href="/premium">
|
|
<div class="flex prime-bg p-16 relative">
|
|
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
|
<div class="flex justify-center absolute inset-0 place-items-center">
|
|
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-32 gap-10 place-items-center opacity-20">
|
|
<div v-for="worksheet in wsfWorld" :key="wsfWorld.id" class="grid">
|
|
<div class="grid place-items-center">
|
|
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
|
|
<img class="w-56 h-72 rotate-6 relative" v-if="worksheet.img" :src="'https://management.beanstalkedu.com/assets/'+ worksheet.img" alt=""/>
|
|
</div>
|
|
<h1 class="text-center pt-8 w-fit">{{worksheet.title}}</h1>
|
|
<button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8 "><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
|
|
.bg3 {
|
|
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
|
}
|
|
.font-20px {
|
|
font-size: 20px;
|
|
}
|
|
@media screen and (min-width: 801px) {
|
|
.hero-text {
|
|
font-size: 50px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.hero-text {
|
|
font-size: 25px;
|
|
|
|
}
|
|
}
|
|
@media screen and (min-width: 801px) {
|
|
.h1-text {
|
|
font-size: 40px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.h1-text {
|
|
font-size: 25px;
|
|
|
|
}
|
|
}
|
|
.text-color-1 {
|
|
color: #7C4C23;
|
|
}
|
|
.prime-bg {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
export default {
|
|
setup(){
|
|
// const route = useRoute();
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
page: null,
|
|
worksheets: null,
|
|
wsLiteracy: null,
|
|
wsMath: null,
|
|
wsWorld: null,
|
|
wsfWorld: null,
|
|
isLoading: true,
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
switchSelect(event) {
|
|
// alert(event.target.value)
|
|
this.getWorksheets(event.target.value)
|
|
// this.selected = event.target.value;
|
|
},
|
|
getWorksheets(age=2){
|
|
fetch('https://management.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
|
|
.then(resp => resp.json())
|
|
.then(worksheets => {
|
|
this.wsWorld=worksheets.data.reverse().slice(0, 4)
|
|
// console.log(this.wsLiteracy)
|
|
})
|
|
fetch('https://management.beanstalkedu.com/items/worksheet_menu?filter[age][_eq]='+age+'&filter[Category][_eq]=world')
|
|
.then(resp => resp.json())
|
|
.then(worksheets => {
|
|
this.wsfWorld=worksheets.data.reverse().slice(4, 16)
|
|
// console.log(this.wsfLiteracy)
|
|
})
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getWorksheets()
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|