<template>
    <div class="getMore" @click="jumpMore">
        <img width="20" :src=" require('@/assets/svg/icon-big-give.svg') " />
        <font>Get More Giveaway</font>
        <img height="20" :src=" require('@/assets/svg/icon-cell-arrow-right.svg') " />
      </div>
</template>

<script setup>
import { getFrontConfig } from "@/http/account";
import { onBeforeMount, ref } from "vue";

// const
const moreUrl = ref('');

onBeforeMount(() => {
    getFrontConfig({
        params: {},
    }).then(res => {
        moreUrl.value = res.data.moreLuckdropsUrl;
    })
})

const jumpMore = () => {
    if (moreUrl.value) {
        window.open(moreUrl.value)
    }
}

</script>

<style lang="scss" scoped>
.getMore {
    display: flex;
    height: 50px;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.06);
    img {
        margin: 0 5px;
    }
    font {
        color: #000;
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
    }
}
</style>