<template>
    <div class="top-books-authors">
        <el-row>
            <el-col :span="12">
                <h1 class="col-title">Top 6 Books</h1>
                <el-row>
                    <el-col :span="6">
                        <div class = "top_book_cover"><img :scr = "top_6_books[0].icon" :alt="top_6_books[0].name"></div>
                    </el-col>
                    <!-- <el-col :span="6"><div class="grid-content bg-purple-light">AAAAAAA</div></el-col> -->
                </el-row>
            </el-col>
            <el-col :span="12">
                <h1 class="col-title">Top 3 Authors</h1>
            </el-col>
        </el-row>
    </div>
</template>


<script>
    import biography_icon from  '../../assets/images/biography_icon.png'
    import business_icon from  '../../assets/images/business_icon.png'
    import cookbook_icon from  '../../assets/images/cookbook_icon.png'
    import romantic_icon from  '../../assets/images/romantic_icon.png'

    export default {
        name: 'TopBooksAuthors',
        data: () => {
            return {
                top_6_books: [
                    {
                        'name': 'biography',
                        'icon': biography_icon,
                        'color': ['#fbac7e', '#f7cd69']
                    },
                    {
                        'name': 'business',
                        'icon': business_icon,
                        'color': ['#8a94e1', '#6bc0f7']
                    },
                    {
                        'name': 'romantic',
                        'icon': romantic_icon,
                        'color': ['#fc5ccb', '#fc82a2']
                    },
                    {
                        'name': 'cookbooks',
                        'icon': cookbook_icon,
                        'color': ['#fc82a2', '#adc8fe']
                    }
                ]
            }
        }
    }
</script>


<style scoped lang="scss">
    .top-books-authors {

        width: 100%;
        height: 100px;

        .col-title {
            font-size: 50px;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .top_book_cover{
            img {
                width: 100%;
                min-width: 408px;
                min-height: 660px;
            }
        }
    }

</style>