|
|
@@ -1,14 +1,82 @@
|
|
|
<template>
|
|
|
<view class="list_content">
|
|
|
- 列表
|
|
|
+ <view class="item" v-for="(item,index) in dataList" :key="index">
|
|
|
+ <view class="item__book-cover">
|
|
|
+ <image class="image" :src="item.book_cover" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="item__info">
|
|
|
+ <text class="item__info__book-name" v-html="highlightText(item.book_name)"></text>
|
|
|
+ <view class="item__info__author">
|
|
|
+ {{item.author_name}} 著 | {{item.book_is_action==1?'完结':'连载'}}
|
|
|
+ </view>
|
|
|
+ <view class="item__info__brief">
|
|
|
+ {{item.book_brief}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
+<script setup lang="ts">
|
|
|
+ const props = defineProps({
|
|
|
+ searchContent:String,
|
|
|
+ dataList: Object,
|
|
|
+ })
|
|
|
+
|
|
|
+ function highlightText(text:string) {
|
|
|
+ let searchText = props.searchContent.toLowerCase()
|
|
|
+ if (searchText && text.toLowerCase().includes(searchText)) {
|
|
|
+ const replaceText = text.toLowerCase().replace(new RegExp(searchText, 'gi'), match => `<span style="color: #FE4977;">${match}</span>`);
|
|
|
+ return replaceText
|
|
|
+ }
|
|
|
+ return text
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.list_content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ // background-color: green;
|
|
|
+ &__book-cover{
|
|
|
+ width: 194rpx;
|
|
|
+ height: 259rpx;
|
|
|
+ flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ &__book-name{
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ &__author{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #6F6F6F;
|
|
|
+ }
|
|
|
+ &__brief{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #6F6F6F;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
future