|
|
@@ -1,6 +1,24 @@
|
|
|
<template>
|
|
|
<view class="book-V-3-content">
|
|
|
- v-3
|
|
|
+ <view class="book-content">
|
|
|
+ <view class="book-content__box" v-for="(item,index) in dataList" :key="index"
|
|
|
+ @click="clickBook(item,index)">
|
|
|
+ <view class="book-content__box__book-cover">
|
|
|
+ <image class="image" :src="item.book_cover" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="book-content__box__book-info">
|
|
|
+ <view class="book-content__box__book-info__name">
|
|
|
+ {{item.book_name}}
|
|
|
+ </view>
|
|
|
+ <view class="book-content__box__book-info__author book-content__box__book-info__name">
|
|
|
+ 作者:{{item.author_name}}
|
|
|
+ </view>
|
|
|
+ <view class="book-content__box__book-info__readNum book-content__box__book-info__name">
|
|
|
+ 阅读数量:{{item.book_read_num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -17,5 +35,64 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .book-V-3-content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 0px 20rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .book-content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ // background-color: red;
|
|
|
+
|
|
|
+ &__box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ // background-color: green;
|
|
|
+ &__book-cover{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 250rpx;
|
|
|
+ flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__book-info{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ // background-color: red;
|
|
|
+ &__name{
|
|
|
+ margin-top: 10rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ &__author{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 16px;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ }
|
|
|
+ &__readNum{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 15px;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
</style>
|
future