72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<v-card flat>
|
|
<v-container
|
|
fluid
|
|
grid-list-lg
|
|
pb-5
|
|
class="authors-container"
|
|
>
|
|
<v-layout row wrap pb-5>
|
|
<v-flex
|
|
v-for="(item, index) in items"
|
|
v-bind:key="index"
|
|
xs12 sm5 md3 lg2
|
|
my-1
|
|
>
|
|
<v-card
|
|
hover
|
|
ripple
|
|
@click="authorClick(item)"
|
|
>
|
|
<v-layout>
|
|
<v-flex xs5>
|
|
<v-img
|
|
:src="item.image"
|
|
height="95px"
|
|
width="95px"
|
|
contain
|
|
class="author-image ml-2"
|
|
>
|
|
</v-img>
|
|
</v-flex>
|
|
<v-flex xs7>
|
|
<v-card-title>
|
|
<div>
|
|
<div>{{ item.author }}</div>
|
|
</div>
|
|
</v-card-title>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
items: []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
authorClick (val) { this.$emit("author_selected", val); }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.author-image
|
|
border-radius: 125px
|
|
border: solid #fff 2px
|
|
box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)
|
|
|
|
.authors-container
|
|
min-height: calc(100vh - 190px)
|
|
</style>
|