<template>
|
<section class="fx-pair">
|
<div class="flex" @click="itemClick">
|
<div class="relative mx-2" ref="htmlRefHook">
|
<!-- <img class="w-8 h-8 absolute left-0 top-0 z-10" src="./EUR.png" alt="EUR" />
|
<img class="w-8 h-8 absolute bottom-0 right-0" src="./GBP.png" alt="GBP" /> -->
|
<!-- <img :src="`${IMG_PATH}/symbol/${item.symbol}.png`" alt=""> -->
|
</div>
|
<div class="flex flex-col">
|
<p class="text-primary text-lg font-semibold title">{{ item.symbol || '--' }}<span class=" text-xs ml-2">{{
|
type
|
}}</span></p>
|
<p class="font-14 text-gray whitespace-nowrap long-text-fix">{{ item.name || '--' }}</p>
|
</div>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
import { IMG_PATH } from '@/config'
|
const props = defineProps({
|
type: {
|
type: String,
|
default: ''
|
},
|
item: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
})
|
|
const handImg = (symbol) => {
|
return new URL(`../../assets/image/exchange/${symbol}.png`, import.meta.url).href
|
}
|
|
const emits = defineEmits(['click-item'])
|
|
const itemClick = () => {
|
emits('click-item')
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.long-text-fix {
|
width: 160px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.title{
|
color: $text_color;
|
}
|
</style>
|
