fanghuayuexuan/pages/home/components/home-more-item.vue

<template>
    <view class="bg-white py-6 px-10">
        <view class="fw-400 fs-14 text-333333 text-ellipsis-2">{{ item.title }}</view>
        <view class="fw-400 fs-11 text-D46C0D mt-4">肌肉酸疼、扭伤拉伤</view>
        <view class="fw-400 fs-11 text-999999 flex items-center gap-5 mt-4">
            <text>已售 5485</text>
            <text class="inline-block w-1 h-9 bg-CCCCCC"></text>
            <text>惊艳度 98%</text>
        </view>
        <view class="flex items-center gap-4 text-FF4B33 fs-11 mt-5">
            <view class="px-4 ph-2 border border-FFA599 rounded-2 ">9.5折</view>
            <view class="px-4 ph-2 border border-FFA599 rounded-2 ">限购1份</view>
        </view>
        <view class="flex items-center justify-between mt-8">
            <view class="text-FA341E">
                <text class="fs-10 fw-600">¥</text>
                <text class="fs-18 fw-600">10</text>
                <text class="fs-13 fw-600">.36</text>
            </view>
            <image class="w-20 h-20" src="https://cdn.his.cdwjyyh.com/images/add_car_icon.png"></image>
        </view>
        <view class="w-all h-18 bg-FFF4E8 flex items-center justify-between mt-10 py-3 px-5">
            <view class="flex items-center gap-2">
                <image class="w-12 h-12" src="https://cdn.his.cdwjyyh.com/images/ranking_icon.png">
                </image>
                <text class="text-4D4D4D fs-10 fw-400">健康新品热销榜</text>
                <image class="w-34 h-11" src="https://cdn.his.cdwjyyh.com/images/TOP.2@2x.png"></image>
            </view>
            <image class="w-8 h-8" src="https://cdn.his.cdwjyyh.com/images/purple_right_arrow_right.png"></image>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        itemData: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>