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.
109 lines
3.5 KiB
109 lines
3.5 KiB
<template>
|
|
<div class="flex desktop:flex-row mobile:flex-col">
|
|
<div
|
|
class="flex flex-col desktop:px-[34px] desktop:py-[24px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:w-[698px] mobile:w-full"
|
|
>
|
|
<p class="text-white desktop:text-[26px] mobile:text-[18px] font-medium">
|
|
{{ title }}
|
|
</p>
|
|
<div
|
|
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:justify-between desktop:items-center pt-[20px] pb-[28px] border-b border-black-3B3B3C break-all"
|
|
>
|
|
<p class="text-white mobile:text-[16px] font-medium">{{ value }}</p>
|
|
<div class="flex flex-row mobile:justify-end mobile:mt-[12px]">
|
|
<div @click="handleCopy">
|
|
<Icons :url="'copyAddress'" :size="32" />
|
|
</div>
|
|
<div @click="open">
|
|
<Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:py-[24px] mobile:py-[18px] border-b border-black-3B3B3C"
|
|
>
|
|
<p
|
|
v-for="(item, index) in options"
|
|
class="text-white text-[15px] flex justify-center items-center"
|
|
:class="index == 0 ? '' : 'desktop:ml-[72px] mobile:mt-[18px]'"
|
|
>
|
|
{{ `${item?.value} ${item?.key}` }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-1 flex-row pt-[24px] items-center">
|
|
<Icons url="viewContact" :size="30" />
|
|
<p class="text-blue-65B5FF ml-[12px]">View Contact</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] mack-bg desktop:ml-[40px] mobile:mt-[36px]"
|
|
:class="url ? 'hidden' : ''"
|
|
>
|
|
<div
|
|
class="flex flex-1 flex-col w-full h-full bg-cover bg-center bg-no-repeat bg-mack-group pt-[52px] pl-[40px]"
|
|
>
|
|
<p class="text-white font-semibold text-[18px]">Total Supply</p>
|
|
<p class="text-white font-semibold text-[32px] mt-[36px]">
|
|
{{ totalSupply }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] desktop:py-[42px] desktop:px-[39px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:ml-[40px] mobile:mt-[36px]"
|
|
:class="url ? '' : 'hidden'"
|
|
>
|
|
<img class="w-full h-full" :src="url" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Icons from '@src/components/icons/index.vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import Qrcode from 'qrcode'
|
|
import useClipboard from 'vue-clipboard3'
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
value: String,
|
|
totalSupply: String,
|
|
options: Array as any,
|
|
url: String,
|
|
qrcodeurl: String,
|
|
})
|
|
|
|
let open = async () => {
|
|
const res = await Qrcode.toDataURL(props?.qrcodeurl as string)
|
|
// 二维码生成之后
|
|
ElMessageBox.alert(`<img src="${res}" class="w-[318px]" />`, {
|
|
showClose: false,
|
|
closeOnClickModal: true,
|
|
dangerouslyUseHTMLString: true,
|
|
confirmButtonText: 'close',
|
|
confirmButtonClass: 'text-white btn_modal',
|
|
customClass: 'bg-modal-wrap',
|
|
})
|
|
}
|
|
// 复制
|
|
const { toClipboard } = useClipboard()
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await toClipboard(props?.value as string)
|
|
ElMessage({
|
|
message: 'copy success!',
|
|
type: 'success',
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mack-bg {
|
|
background: linear-gradient(230.77deg, #733efb 8.52%, #4917c1 72.48%);
|
|
box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
|