You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
<template>
|
|
<div
|
|
class="flex flex-col items-start py-[18px]"
|
|
:class="valueColor ? 'desktop:py-[10px]' : ''"
|
|
>
|
|
<div class="flex flex-1 flex-row max-w-[255px] items-center">
|
|
<Icons url="info" :size="14" />
|
|
<p class="ml-[7px] text-gray-BBB text-[14px] font-normal">
|
|
{{ title }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
|
|
v-if="title === 'Tokens'"
|
|
>
|
|
<el-popover placement="bottom" :width="250" trigger="click">
|
|
<template #reference>
|
|
<!-- <el-button style="margin-right: 16px">{}</el-button> -->
|
|
<p
|
|
class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
|
|
>
|
|
{{ list?.length || 0 }} token
|
|
</p>
|
|
</template>
|
|
<template #default>
|
|
<div class="h-[200px] overflow-y-scroll">
|
|
<div
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
class="border-b py-[8px]"
|
|
>
|
|
<p class="ml-[24px]">{{ item?.tokenType }}</p>
|
|
<p class="mt-[12px]">{{ item?.name }} </p>
|
|
<p class="ml-[24px]">
|
|
{{ `${item?.availableBalance}${item?.name}` }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
<div
|
|
class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
|
|
v-else
|
|
>
|
|
<p
|
|
:class="
|
|
valueColor
|
|
? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
|
|
: ''
|
|
"
|
|
class="text-[15px] font-normal leading-[24px] break-all"
|
|
>
|
|
{{ value }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="isLast ? 'desktop:hidden' : ''"
|
|
style="border-bottom: 1px solid #3b3b3c"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Icons from '@src/components/icons/index.vue'
|
|
import { onMounted, ref, watchEffect } from 'vue'
|
|
const props = defineProps({
|
|
title: [String, Number] as any,
|
|
value: [Number, String, Array] as any,
|
|
valueColor: String,
|
|
isCopy: Boolean,
|
|
isLast: Boolean,
|
|
})
|
|
const list = ref<any>([])
|
|
watchEffect(() => {
|
|
if (props.title === 'Tokens') {
|
|
list.value = props.value
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tokens-select {
|
|
.el-input__wrapper {
|
|
background: #19191a;
|
|
.el-input__inner {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.el-select .el-input.is-focus .el-input__wrapper {
|
|
box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
|
|
}
|
|
.el-select .el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
|
|
}
|
|
}
|
|
</style>
|
|
|