100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<template>
|
|
<v-card flat>
|
|
<v-container bg grid-list-md>
|
|
<v-layout row wrap align-center>
|
|
<v-flex>
|
|
<v-img
|
|
v-if="authorImg !== ''"
|
|
:src="authorImg"
|
|
height="55px"
|
|
width="55px"
|
|
contain
|
|
class="author-image ml-2"
|
|
>
|
|
</v-img>
|
|
<div
|
|
class="author-name font-weight-black"
|
|
>
|
|
{{ authorName }}
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
|
|
<v-container
|
|
fluid
|
|
fill-height
|
|
grid-list-lg
|
|
pb-5
|
|
>
|
|
<v-layout row wrap pb-5 class="books-layout">
|
|
<v-flex
|
|
v-for="(item, index) in items"
|
|
v-bind:key="index"
|
|
xs12 sm6 md4 lg3
|
|
my-1
|
|
>
|
|
<v-card
|
|
hover
|
|
ripple
|
|
@click="bookClick(item)"
|
|
>
|
|
<v-layout>
|
|
<v-flex xs5>
|
|
<v-img
|
|
:src="item.image"
|
|
height="95px"
|
|
width="95px"
|
|
contain
|
|
class="ml-2"
|
|
>
|
|
</v-img>
|
|
</v-flex>
|
|
<v-flex xs7>
|
|
<v-card-title>
|
|
<div>
|
|
<div>{{ item.title }}</div>
|
|
</div>
|
|
</v-card-title>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
authorName: "",
|
|
authorImg: "",
|
|
items: []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
bookClick (val) {
|
|
this.$emit("book_selected", val);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.author-image {
|
|
display: inline-block;
|
|
border-radius: 55px;
|
|
}
|
|
|
|
.author-name {
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin: 15px;
|
|
}
|
|
|
|
.books-layout { min-height: calc(100vh - 250px); }
|
|
</style>
|