xs/xs-app/pages/bookshelf/bookshelf-bookList.vue

<template>
	<view class="content">
		<view class="book-list">
			<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
			@click="clickBookItem(item,index)">
				<image class="book-list__item__book-cover" :src="item.book_cover" mode="aspectFill"></image>
				<view class="book-list__item__book-name">
					{{item.book_name}}
				</view>
				<view class="book-list__item__book-info">
					 0章 / 500章
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
    import { BookshelfData } from '../../stores/bookshelfManager';
    import { book_item_data } from '../../data/data';
	
	let book_list = ref(BookshelfData().getBookList())
	console.log('BookshelfData111 =',book_list.value)
	
	function clickBookItem(book_data:book_item_data, index:number) {
		if(index>0) {
			book_list.value.splice(index,1)
			book_list.value.unshift(book_data)
		}
	}
	
</script>

<style lang="scss">
	.content{
		display: flex;	
		flex-direction: column;
		
		.book-list{
			display: flex;
			flex-direction: row; //横向排列
			flex-wrap: wrap;     //换行排列
			padding: 1% 2%;
			// background-color: red;
			&__item {
				display: flex;
				flex-direction: column;
				margin: 2% 2%;
				width: 46%;
				align-items: center;
				// background-color: purple;
				&__book-cover{
					width: 300rpx;
					height: 400rpx;
				}
				&__book-name{
					margin-top: 10rpx;
					
				}
				&__book-info{
					margin-top: 10rpx;
					
				}
			}
		}
	}
</style>