<template>
    <view class="w-all h-250 relative mb-11 rounded-8 overflow-hidden">
        <image class="w-all h-250 bg-img" src="/static/images/home/sales_ranking_bg@2x.png" mode="aspectFill"></image>
        <view class="absolute top-0 left-0 w-all h-all zi-10 ">
            <view class="fw-500 fs-16 text-333333 mt-9 ml-10 flex items-center">
                <text>实时销量榜</text>
                <image class="w-12 h-12 mt-2" src="/static/images/home/sales_ranking_arrow_right_icon12@2x.png"></image>
            </view>
            <view class="fw-400 fs-11 text-D46C0D mt-3 ml-10">
                今日销量2.8万件
            </view>
            <view class="p-8 rounded-8 bg-white mt-7 flex flex-column gap-4 w-167 m-auto">
                <view class="flex gap-6" v-for="(item, index) in 3" :key="item.id">
                    <view class="w-52 h-52 rounded-4 overflow-hidden bg-img relative">
                        <image class="w-52 h-52"
                            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422">
                        </image>
                        <view
                            class="w-12 h-12  rounded-4 absolute top-0 left-0 flex items-center justify-center text-white fs-10"
                            :class="bgColor[index + 1]">
                            {{ index + 1 }}</view>
                    </view>
                    <view class="flex-1 flex flex-column justify-between">
                        <view class="fs-10 text-333333 fw-400 text-ellipsis-2">
                            乌灵胶SAKJDFHAJKSD囊81粒养心安神失眠健忘改善</view>
                        <view class="flex items-center justify-between mt-4">
                            <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="/static/images/home/add_car_icon20@2x.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>
<script>
export default {
    props: {

    },
    data() {
        return {
            bgColor: {
                1: 'bg-ED4B17',
                2: 'bg-0069D9',
                3: 'bg-28A745',
            }
        }
    }
}
</script>
