<template>
	<view class="" v-if="market.length>0">
		<view class="float-left bg-[#2C326B] rounded-lg w-[49%] mb-[20rpx] p-[20rpx]" v-for="(item,key) in market"
			:key="item.id" :class="key%2==0?'mr-[2%]':''">
			<view class="flex justify-start items-center">
				<u-icon class="mr-[15rpx]" width="60rpx" height="60rpx" :name="item.logo"></u-icon>
				<text class="">{{item.name}}</text>
			</view>
			<view class="text-xl font-bold my-[10rpx]">
				<view v-if="item.rise>=0" class="text-[#17cdaf] mr-[20rpx]">
					+{{item.rise}}
				</view>
				<view v-if="item.rise<0" class="text-[#f85963] mr-[20rpx]">
					{{item.rise}}
				</view>
			</view>
			<view class="text-muted">
				<view v-if="item.rise>=0" class="text-[#17cdaf] mr-[20rpx]">
					{{item.price}}
				</view>
				<view v-if="item.rise<0" class="text-[#f85963] mr-[20rpx]">
					{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		market: {
			type: Object,
			default: () => ({})
		},
	})
</script>

<style></style>