74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<script lang='ts' setup>
|
|
import type { TradableData } from "@/api/types";
|
|
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
|
|
|
|
defineProps<{
|
|
data: TradableData[];
|
|
}>();
|
|
|
|
const router = useRouter();
|
|
|
|
function gotoTokenized(id: string) {
|
|
router.push(`/trade-tokenized/${id}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3 antialiased mt-5">
|
|
<ion-grid>
|
|
<ion-row class="ion-align-items-center text-xs text-text-500">
|
|
<ion-col size="6">
|
|
<div>名称/代码</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="text-right">
|
|
涨跌幅
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="text-right">
|
|
交易价估算
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
<div v-for="item in data" :key="item.id" @click="gotoTokenized(item.id)">
|
|
<ion-grid>
|
|
<ion-row class="ion-align-items-center my-5">
|
|
<ion-col size="6" class="flex items-center">
|
|
<div class="mr-3">
|
|
<CryptocurrencyColorNuls class="text-3xl" />
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-semibold mb-1 truncate">
|
|
{{ item.product?.name }}
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="text-xs text-text-500">
|
|
{{ item.product?.code }}
|
|
</div>
|
|
<div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
|
|
{{ item.product?.category?.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
|
|
<ion-col>
|
|
<div class="text-xs text-right">
|
|
+12.6%
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div class="text-xs text-right">
|
|
连涨3天
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|