book-hi/pages-car/components/arrival-reminder-item.vue

<template>
    <view class="arrival-reminder-item">
        <image class="book-cover" :src="info.cover || defaultCover" mode="aspectFill" />
        <view class="info-box">
            <view class="book-title">{{ info.title || info.bookName }}</view>
            <view class="action-box">
                <view class="btn-cancel" @click="onCancel">取消到货提醒</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "arrival-reminder-item",
    props: {
        info: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            defaultCover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/default-book.png' // Placeholder
        };
    },
    methods: {
        onCancel() {
            this.$emit('cancel', this.info);
        }
    }
}
</script>

<style lang="scss" scoped>
.arrival-reminder-item {
    display: flex;
    background-color: #ffffff;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5; // Separator
    
    // If it's card style with margin
    // margin: 20rpx;
    // border-radius: 12rpx;
    
    // Based on the image, it looks like a list with white background items, possibly separated by small gap or just lines.
    // The image shows items with some spacing between them or just a clean white list.
    // Let's assume white background list items.
    background-color: #fff;
    margin-bottom: 20rpx; // Space between items as seen in the image (gray background showing through)

    .book-cover {
        width: 140rpx;
        height: 190rpx; // Approx aspect ratio
        border-radius: 8rpx;
        flex-shrink: 0;
        margin-right: 24rpx;
        background-color: #eee;
    }

    .info-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .book-title {
            font-size: 30rpx;
            color: #333;
            line-height: 1.4;
            font-weight: 500;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .action-box {
            display: flex;
            justify-content: flex-end;
            margin-top: 20rpx; // Ensure spacing if title is short
            
            .btn-cancel {
                font-size: 24rpx;
                color: #fff;
                background-color: $app-theme-color;
                padding: 12rpx 24rpx;
                border-radius: 30rpx;
                line-height: 1;
            }
        }
    }
}
</style>