From a1ed6c4b12436746c2cbbea7dcef4924c970c9ad Mon Sep 17 00:00:00 2001 From: yuyongdong Date: Mon, 26 Aug 2024 18:41:24 +0800 Subject: [PATCH] cec claim --- src/components/assets/cenCard.vue | 2 +- src/components/assets/imgs.vue | 2 +- src/views/ClaimView.vue | 319 +++++++++++++++++++++--------- 3 files changed, 228 insertions(+), 95 deletions(-) diff --git a/src/components/assets/cenCard.vue b/src/components/assets/cenCard.vue index 6e47c09..9f61ae6 100644 --- a/src/components/assets/cenCard.vue +++ b/src/components/assets/cenCard.vue @@ -31,7 +31,7 @@
Mint
-
Unlock
+
Unlocked
diff --git a/src/components/assets/imgs.vue b/src/components/assets/imgs.vue index 2d81b1e..f945297 100644 --- a/src/components/assets/imgs.vue +++ b/src/components/assets/imgs.vue @@ -74,7 +74,7 @@ const props = defineProps({ text-align: center; font-size: 18px; font-weight: 700; - background: url('src/assets/img/marketplace/hero_lockBg.png') no-repeat; + background: url('@/assets/img/marketplace/hero_lockBg.png') no-repeat; background-size: 100% 100%; } .imgs-day { diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue index 06b7c8b..f42ea22 100644 --- a/src/views/ClaimView.vue +++ b/src/views/ClaimView.vue @@ -24,12 +24,8 @@ Unavailable: {{ Number(cecInfo.unavailable) == 0 ? 0 : priceCalculated(cecInfo.unavailable,18) }}
-

XXXXXXXXXXXXXXXX

-

XXXXXXXXXXXXXXXX

-

XXXXXXXXXXXXXXXX

-

XXXXXXXXXXXXXXXX

-

XXXXXXXXXXXXXXXX

-

XXXXXXXXXXXXXXXX

+

Available for claiming in the future.

+

Stay tuned for updates.

@@ -50,7 +46,48 @@
-
  • +
    +
  • +
    +
    + +
    +

    Deposit to Bitget

    + Free gas +
    +
    + Aug 30, 18:00 UTC - Sep 3, 18:00 UTC +
    + +
    +
    +

    CounterFire & Bitget

    +

    0 gas fee, 100k $CEC rewards to share.

    +

    Can claim $CEC to your wallet after the event.

    +
    +
    +
    +
    +
    • +
  • +
    +

    Grab a share of $100,000 $CEC

    +
    +
    • +
    +
    +
    +
  • +
    +
    + Claim to your wallet +
    +
    + Coming soon +
    +
    • +
    +
    @@ -105,11 +140,9 @@
    -

    XXXXXXXXXXXXXXXX

    -

    XXXXXXXXXXXXXXXX

    -

    XXXXXXXXXXXXXXXX

    -

    XXXXXXXXXXXXXXXX

    -

    XXXXXXXXXXXXXXXX

    +

    CounterFire & Bitget

    +

    0 gas fee, 100k $CEC rewards to share.

    +

    Can claim $CEC to your wallet after the event.

    @@ -450,18 +483,16 @@ onMounted(() => { .unavailable-tips { display: block; position: absolute; - right: -235px; - top: -40px; - width: 233px; - height: 159px; - display: flex; - justify-content: center; - align-items: center; - background: url('@/assets/img/cec_claim/Whitelist.png') no-repeat; - background-size: 100% 100%; + right: -300px; + top: -20px; + width: 280px; + height: 70px; + padding: 20px; + border: 1px solid #B966FF; + border-radius: 20px; + background: #1a1821; + box-shadow: 0px 0px 10px #B966FF; div { - width: 140px; - height: 80px; font-family: 'Poppins'; font-weight: 500; font-size: 13px; @@ -551,7 +582,7 @@ onMounted(() => { } .content-time { width: 824px; - height: 177px; + height: 197px; margin: 40px auto; background: #241d2f; background: url('@/assets/img/cec_claim/Counterfire_bg01.png') no-repeat; @@ -560,82 +591,184 @@ onMounted(() => { border-radius: 40px; box-sizing: border-box; color: #fff; - li { - display: flex; - align-items: center; - height: 60px; - border-bottom: 2px solid #3f3455; - div { - font-weight: 700; - font-size: 18px; - } - .left { - width: 350px; - // padding-left: 100px; + .content-time-top { + li { display: flex; align-items: center; - font-family: 'Poppins'; - font-weight: 600; - font-size: 24px; - div { - width: 30px; - height: 30px; - margin: 0 20px; - border-radius: 50%; - overflow: hidden; - img { - width: 100%; - height: 100%; + justify-content: space-between; + .left { + display: flex; + align-items: center; + div { + width: 30px; + height: 30px; + border-radius: 50%; + overflow: hidden; + img { + width: 100%; + height: 100%; + } + } + h3 { + font-family: "Poppins"; + font-size: 24px; + font-weight: 700; + margin: 0 10px 0 20px; + } + span { + display: inline-block; + color: #000; + background: #31FFF3; + font-size: 12px; + font-family: "Poppins"; + padding: 0 5px; + border-radius: 10px; + } + p { + color: #a59dab; + font-size: 16px; + margin: 10px 0; + margin-left: 50px; } } - span {} - } - .right { - display: flex; - align-items: center; - .tips { - position: relative; - margin-left: 50px; - cursor: pointer; - img { - width: 28px; - height: 27px; - cursor: pointer; + .right { + display: flex; + align-items: center; + span { + font-weight: 700; + font-size: 18px; } - .tips-box { - display: none; - width: 233px; - height: 159px; - background: url('@/assets/img/cec_claim/Whitelist.png') no-repeat; - background-size: 100% 100%; - position: absolute; - top: -40px; - left: 10px; - padding: 45px; - div { - p { - font-family: 'Poppins'; - font-weight: 500; - font-size: 13px; - line-height: 1.1; + .tips { + position: relative; + margin-left: 10px; + cursor: pointer; + img { + width: 28px; + height: 27px; + cursor: pointer; + } + .tips-box { + display: none; + } + &:hover { + .tips-box { + display: block; + position: absolute; + right: -360px; + top: -80px; + width: 350px; + height: 85px; + padding: 20px; + border: 1px solid #B966FF; + border-radius: 20px; + background: #1a1821; + box-shadow: 0px 0px 10px #B966FF; + div { + font-family: 'Poppins'; + font-weight: 500; + font-size: 13px; + line-height: 1.2; + } } } } - &:hover { - .tips-box { - display: block; - } - } } } - &:last-child { - border: 0px; + } + .content-time-line { + width: 100%; + height: 2px; + background: #44375c; + } + .content-time-btm { + li { + display: flex; + justify-content: space-between; + margin-top: 20px; + font-size: 18px; font-family: 'Poppins'; - font-weight: 600; - font-size: 24px; - color: #8D8598; + color: #8d8598; + .left { + margin-left: 50px; + } } } + // li { + // display: flex; + // align-items: center; + // height: 60px; + // border-bottom: 2px solid #3f3455; + // div { + // font-weight: 700; + // font-size: 18px; + // } + // .left { + // width: 350px; + // // padding-left: 100px; + // display: flex; + // align-items: center; + // font-family: 'Poppins'; + // font-weight: 600; + // font-size: 24px; + // div { + // width: 30px; + // height: 30px; + // margin: 0 20px; + // border-radius: 50%; + // overflow: hidden; + // img { + // width: 100%; + // height: 100%; + // } + // } + // span {} + // } + // .right { + // display: flex; + // align-items: center; + // .tips { + // position: relative; + // margin-left: 50px; + // cursor: pointer; + // img { + // width: 28px; + // height: 27px; + // cursor: pointer; + // } + // .tips-box { + // display: none; + // } + // &:hover { + // .tips-box { + // display: block; + // position: absolute; + // right: -360px; + // top: -80px; + // width: 350px; + // height: 85px; + // padding: 20px; + // border: 1px solid #B966FF; + // border-radius: 20px; + // background: #1a1821; + // box-shadow: 0px 0px 10px #B966FF; + // div { + // font-family: 'Poppins'; + // font-weight: 500; + // font-size: 13px; + // line-height: 1.2; + // } + // } + // } + // } + // } + // &:last-child { + // border: 0px; + // font-family: 'Poppins'; + // font-weight: 600; + // font-size: 24px; + // color: #8D8598; + // } + // } } .content-title { display: flex;