156 lines
6.6 KiB
Vue
156 lines
6.6 KiB
Vue
<template>
|
||
<div>
|
||
<!-- Hero Section -->
|
||
<section class="container-fluid">
|
||
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
|
||
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 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=" text-lg text-color-2 text-base md:text-2xl text-justify">Practice every component of English literacy including letters, vowels, consonants and much more with the Literacy worksheet for preschoolers that keep a child’s ability to grasp mastery over literacy as the center of attention. Each worksheet contains suitable practice to promote learning and understanding. </p>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-10 place-items-center pt-10 my-10">
|
||
<div v-for="worksheet in wsLiteracy" :key="wsLiteracy.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 w-full">
|
||
<div v-for="worksheet in wsfLiteracy" :key="wsfLiteracy.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,
|
||
wsfLiteracy: 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]=literacy')
|
||
.then(resp => resp.json())
|
||
.then(worksheets => {
|
||
this.wsLiteracy=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]=literacy')
|
||
.then(resp => resp.json())
|
||
.then(worksheets => {
|
||
this.wsfLiteracy=worksheets.data.reverse().slice(4, 16)
|
||
// console.log(this.wsfLiteracy)
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.getWorksheets()
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|