shuhi-app/pages/index/wms/components/BadOutCard.vue

<template>
    <view class="card">
        <view class="flex w100">
            <view class="flex-d">
                <image style="width: 80px;height: 100px;" :src="item.image" mode="aspectFill"></image>
                <view class="quantity mt-20">数量: {{ item.quantity }}</view>
            </view>
            <view class="book-info ml-20 flex-1">
                <view class="common-title mb-20">{{ item.title }}</view>
                <view class="flex flex-j-b mb-10">
                    <view class="isbn">ISBN: {{ item.isbn }}</view>
                    <view class="set">套装: {{ item.set }}</view>

                </view>
                <view class="flex flex-j-b mb-10">
                    <view class="discount">回收折扣: {{ item.discount }}</view>
                    <view class="review">审核金额: {{ item.review }}</view>
                </view>
                <view class="flex flex-j-b mb-10">
                    <view class="price">定价: {{ item.price }}</view>
                    <view class="estimate">预估单价: {{ item.estimate }}</view>
                </view>

                <view class="quality mb-10">
                    品相: 良好({{ item.good }}) 、 一般({{ item.average }}) 、 极差({{ item.bad }})
                </view>
                <view class="reason color-red">原因: {{ item.reason }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    item: Object,
})
</script>

<style scoped>
.card {
    background-color: rgb(222, 134, 143, 0.5);
    padding: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 6rpx;

    .card-content {
        display: flex;
        width: 100%;
    }
    .book-info{
        font-size: 26rpx;
    }
    .color-red {
        color: #bd3124;
    }
}
</style>