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.
83 lines
2.0 KiB
83 lines
2.0 KiB
<template>
|
|
<div class="flex flex-row py-[16px]" :class="valueColor ? '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 tokens-select"
|
|
v-if="title === 'Tokens'"
|
|
>
|
|
<el-select v-model="active" placeholder="Select">
|
|
<el-option
|
|
v-for="(item, index) in [1, 2, 3, 4]"
|
|
:key="index"
|
|
:label="item + 'token'"
|
|
:value="item"
|
|
class="text-white"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div
|
|
class="flex flex-1 flex-row justify-start items-center 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]"
|
|
>
|
|
{{ value }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="isLast ? 'hidden' : ''"
|
|
style="border-bottom: 1px solid #3b3b3c"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElSelect, ElOption } from 'element-plus'
|
|
import Icons from '@src/components/icons/index.vue'
|
|
import { onMounted, ref } from 'vue'
|
|
const props = defineProps({
|
|
title: String,
|
|
value: [String, Array] as any,
|
|
valueColor: String,
|
|
isCopy: Boolean,
|
|
isLast: Boolean,
|
|
})
|
|
|
|
onMounted(() => {
|
|
console.log(props.title)
|
|
if (props.title === 'Tokens') {
|
|
list.value = props.value
|
|
}
|
|
})
|
|
|
|
const list = ref<string | number[]>([])
|
|
const active = ref('1token')
|
|
</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>
|
|
|