update
parent
9f886fd223
commit
195b7b37f6
|
|
@ -9,220 +9,220 @@
|
|||
<div class="flex flex-wrap -m-1 md:-m-2">
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/3.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/4.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/5.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/6.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/7.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/8.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/9.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/11.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/12.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/13.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/14.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/15.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/16.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/17.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/18.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/19.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/20.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/21.jpeg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/22.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/23.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/24.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/25.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/26.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/27.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/28.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/29.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/30.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/31.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/32.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/32.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/33.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/34.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/35.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap w-1/3">
|
||||
<div class="w-full p-1 md:p-2">
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
|
||||
<img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
|
||||
src="/img/36.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="container-fluid bg-white mx-auto mt-3 p-0">
|
||||
<div v-if="isLoading">
|
||||
<h2 class="ml-28 text-4xl"> Page Loading ...</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<div class="grid p-6"><h2 class="text-2xl font-semibold"> {{page[0].name}}</h2>
|
||||
<h2 class="text-blue-700">By. {{page[0].author}}</h2>
|
||||
<h2 class="text-2xl font-semibold">Price. {{page[0].Price}}</h2>
|
||||
<img :src="'https://api8.siliconpin.com/assets/'+page[0].img" alt="">
|
||||
<h2 class="text-red-900 font-bold text-xl mt-8">Book Details</h2>
|
||||
<div class="text-justify text-center " v-html="page[0].details"></div>
|
||||
<h2 class="text-xl font-semibold text-blue-700">Publishing Year {{page[0].Publishing_Year}}</h2>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
isLoading: true
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function (){
|
||||
fetch('https://api8.siliconpin.com/items/books?filter[slug][_in]='+this.$route.params.id)
|
||||
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.page = data.data
|
||||
this.isLoading = false
|
||||
console.log(this.page.Publishingyear)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="isLoading">
|
||||
<h2 class="text-center text-4xl text-pink-600 font-extrabold">Loading......</h2></div>
|
||||
<div v-else>
|
||||
<div class="container mx-auto text-blue-800 " v-for="(item, index) in page">
|
||||
<router-link :to="'/nn/'+item.slug"><h3>{{item.name}} </h3></router-link>
|
||||
|
||||
|
||||
|
||||
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
isLoading: true
|
||||
}
|
||||
},
|
||||
mounted: function (){
|
||||
fetch('https://api8.siliconpin.com/items/books?')
|
||||
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.page = data.data
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -44,6 +44,8 @@ declare module 'vue-router/auto/routes' {
|
|||
'/documents/[id]': RouteRecordInfo<'/documents/[id]', '/documents/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'/gallery': RouteRecordInfo<'/gallery', '/gallery', Record<never, never>, Record<never, never>>,
|
||||
'/index2': RouteRecordInfo<'/index2', '/index2', Record<never, never>, Record<never, never>>,
|
||||
'/nn/': RouteRecordInfo<'/nn/', '/nn', Record<never, never>, Record<never, never>>,
|
||||
'/nn/[id]': RouteRecordInfo<'/nn/[id]', '/nn/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'/notice/': RouteRecordInfo<'/notice/', '/notice', Record<never, never>, Record<never, never>>,
|
||||
'/notice/[id]': RouteRecordInfo<'/notice/[id]', '/notice/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'/temp/google': RouteRecordInfo<'/temp/google', '/temp/google', Record<never, never>, Record<never, never>>,
|
||||
|
|
|
|||
Loading…
Reference in New Issue