You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.5 KiB
75 lines
1.5 KiB
<template>
|
|
<div id="bookshelf">
|
|
<div class="bookshelf-header" style="height:120px">
|
|
<router-link to="/">
|
|
<span class="icon iconfont icon-l"></span>
|
|
</router-link>
|
|
<h2>作者推荐</h2>
|
|
</div>
|
|
<div class="main">
|
|
<div v-for="(item,index) in authorList" :key="index" class="book-rack">
|
|
<span class="author-index">{{ index+1 }}</span>
|
|
<div class="author-brief">
|
|
<h3>{{ item.name }}</h3>
|
|
<p>{{ item.brief }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import data1 from './data1.json'
|
|
export default {
|
|
name: 'AuthorRecommend',
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
authorList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.authorList = data1.authors
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/assets/styles/index.scss";
|
|
.main{
|
|
padding-top: 40px;
|
|
height: calc(100vh - 180px);
|
|
overflow: hidden;
|
|
overflow-y:auto ;
|
|
.book-rack{
|
|
height: 387px;
|
|
margin-bottom: 40px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333;
|
|
.author-index{
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
.author-brief{
|
|
flex: 1;
|
|
padding: 20px 50px 20px 0;
|
|
h3{
|
|
font-size: 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
p{
|
|
font-size: 30px;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|