678 lines
22 KiB
HTML
678 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
|
||
<title>Recharge Reward</title>
|
||
<style>
|
||
:root {
|
||
--scale: 0.4;
|
||
--canvas-width: 1080px;
|
||
--canvas-height: 3411px;
|
||
--page-bg: #290e00;
|
||
--gold-text: #f6e0b2;
|
||
--asset-root: "../../assets/recharge";
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
min-height: 100%;
|
||
background: var(--page-bg);
|
||
font-family:
|
||
"Source Han Sans SC", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||
}
|
||
|
||
body {
|
||
color: var(--gold-text);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.page {
|
||
width: calc(var(--canvas-width) * var(--scale));
|
||
max-width: 100vw;
|
||
height: calc(var(--canvas-height) * var(--scale));
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
background: var(--page-bg);
|
||
}
|
||
|
||
.canvas {
|
||
position: relative;
|
||
width: var(--canvas-width);
|
||
height: var(--canvas-height);
|
||
transform: scale(var(--scale));
|
||
transform-origin: left top;
|
||
overflow: hidden;
|
||
background: var(--page-bg);
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.asset {
|
||
position: absolute;
|
||
display: block;
|
||
max-width: none;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.hero {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -29px;
|
||
width: 1080px;
|
||
height: 1027px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg {
|
||
position: absolute;
|
||
left: -11px;
|
||
top: -158px;
|
||
width: 1101px;
|
||
height: 1468px;
|
||
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0) 100%);
|
||
mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0) 100%);
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
}
|
||
|
||
.hero-bg img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.hero-title {
|
||
left: 8px;
|
||
top: 64px;
|
||
width: 1058px;
|
||
height: 790px;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.price-frame {
|
||
position: absolute;
|
||
overflow: visible;
|
||
}
|
||
|
||
.price-frame .price-fill {
|
||
position: absolute;
|
||
left: 1.76%;
|
||
right: 1.76%;
|
||
top: 6%;
|
||
height: 84%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.price-frame .price-fill img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: bottom;
|
||
display: block;
|
||
}
|
||
|
||
.price-frame .price-shade {
|
||
position: absolute;
|
||
left: 1.76%;
|
||
right: 1.76%;
|
||
top: 29%;
|
||
height: 65%;
|
||
overflow: hidden;
|
||
transform: scaleY(-1);
|
||
-webkit-mask-image: url("../../assets/recharge/price-button-mask.png");
|
||
mask-image: url("../../assets/recharge/price-button-mask.png");
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-position: 0 -1px;
|
||
mask-position: 0 -1px;
|
||
-webkit-mask-size: 100% 100%;
|
||
mask-size: 100% 100%;
|
||
}
|
||
|
||
.price-frame .price-shade img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: bottom;
|
||
display: block;
|
||
}
|
||
|
||
.countdown-frame {
|
||
position: absolute;
|
||
left: 43px;
|
||
top: 836px;
|
||
width: 994px;
|
||
height: 350px;
|
||
background:
|
||
linear-gradient(180deg, rgba(84, 27, 7, 0.92), rgba(42, 10, 2, 0.96)) padding-box,
|
||
linear-gradient(90deg, #ffe8bc, #a9562b 13%, #ffd59a 49%, #a9562b 87%, #ffe8bc) border-box;
|
||
border: 8px solid transparent;
|
||
box-shadow:
|
||
inset 0 0 0 4px rgba(104, 38, 17, 0.96),
|
||
inset 0 0 44px rgba(255, 190, 104, 0.12);
|
||
}
|
||
|
||
.countdown-frame .frame-stretch {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: fill;
|
||
display: block;
|
||
opacity: 0.74;
|
||
}
|
||
|
||
.countdown-item {
|
||
position: absolute;
|
||
width: 113px;
|
||
height: 177px;
|
||
text-align: center;
|
||
color: var(--gold-text);
|
||
}
|
||
|
||
.countdown-item img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 113px;
|
||
height: 131px;
|
||
display: block;
|
||
}
|
||
|
||
.countdown-value {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 39px;
|
||
width: 113px;
|
||
font-size: 46px;
|
||
line-height: 46px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.countdown-label {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 141px;
|
||
width: 113px;
|
||
font-size: 28px;
|
||
line-height: 36px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.panel {
|
||
position: absolute;
|
||
left: 15px;
|
||
width: 1050px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.panel-edge {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 1050px;
|
||
height: 191px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.panel-edge.bottom {
|
||
transform: scaleY(-1);
|
||
}
|
||
|
||
.panel-middle {
|
||
position: absolute;
|
||
left: 15.9px;
|
||
width: 1020px;
|
||
height: 236px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.profile-backdrop {
|
||
position: absolute;
|
||
left: 58px;
|
||
top: 1279px;
|
||
width: 967px;
|
||
height: 560px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.profile-backdrop img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -265px;
|
||
width: 967px;
|
||
height: 1290px;
|
||
object-fit: cover;
|
||
opacity: 0.09;
|
||
}
|
||
|
||
.ornate-square {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.ornate-square .square-fill {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.ornate-square .corner {
|
||
position: absolute;
|
||
width: var(--corner-size);
|
||
height: var(--corner-size);
|
||
object-fit: contain;
|
||
}
|
||
|
||
.ornate-square .corner.tl {
|
||
left: calc(var(--corner-size) * -0.04);
|
||
top: calc(var(--corner-size) * -0.04);
|
||
}
|
||
|
||
.ornate-square .corner.tr {
|
||
right: calc(var(--corner-size) * -0.04);
|
||
top: calc(var(--corner-size) * -0.04);
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.ornate-square .corner.bl {
|
||
left: calc(var(--corner-size) * -0.04);
|
||
bottom: calc(var(--corner-size) * -0.04);
|
||
transform: scaleY(-1);
|
||
}
|
||
|
||
.ornate-square .corner.br {
|
||
right: calc(var(--corner-size) * -0.04);
|
||
bottom: calc(var(--corner-size) * -0.04);
|
||
transform: scale(-1);
|
||
}
|
||
|
||
.ornate-square .center-gem {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: var(--gem-width);
|
||
height: var(--gem-height);
|
||
transform: translateX(-50%);
|
||
object-fit: contain;
|
||
}
|
||
|
||
.ornate-square .center-gem.top {
|
||
top: calc(var(--gem-height) * -0.14);
|
||
transform: translateX(-50%) scaleY(-1);
|
||
}
|
||
|
||
.ornate-square .center-gem.bottom {
|
||
bottom: calc(var(--gem-height) * -0.14);
|
||
}
|
||
|
||
.avatar-crop {
|
||
position: absolute;
|
||
left: 411px;
|
||
top: 1341px;
|
||
width: 257px;
|
||
height: 257px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-crop img {
|
||
position: absolute;
|
||
left: -43px;
|
||
top: -22px;
|
||
width: 322px;
|
||
height: 430px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.avatar-frame {
|
||
left: 389px;
|
||
top: 1319px;
|
||
width: 301px;
|
||
height: 301px;
|
||
--corner-size: 56px;
|
||
--gem-width: 75px;
|
||
--gem-height: 45px;
|
||
}
|
||
|
||
.reward-frame-lg {
|
||
width: 360px;
|
||
height: 360px;
|
||
--corner-size: 62px;
|
||
--gem-width: 0;
|
||
--gem-height: 0;
|
||
}
|
||
|
||
.reward-frame-sm {
|
||
width: 240px;
|
||
height: 240px;
|
||
--corner-size: 42px;
|
||
--gem-width: 0;
|
||
--gem-height: 0;
|
||
}
|
||
|
||
.section-badge {
|
||
width: 340px;
|
||
height: 182px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.section-title,
|
||
.figure-text {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--gold-text);
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.section-title {
|
||
width: 340px;
|
||
height: 44px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-name {
|
||
left: 436px;
|
||
top: 1630px;
|
||
width: 207px;
|
||
height: 36px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-id {
|
||
left: 460px;
|
||
top: 1676px;
|
||
width: 158px;
|
||
height: 36px;
|
||
font-size: 24px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-total {
|
||
left: 307px;
|
||
top: 1729px;
|
||
width: 464px;
|
||
height: 36px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.reward-icon {
|
||
position: absolute;
|
||
object-fit: contain;
|
||
display: block;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.reward-price {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 284px;
|
||
height: 100px;
|
||
color: var(--gold-text);
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.reward-price span {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.reward-price .price-fill,
|
||
.reward-price .price-shade {
|
||
display: none;
|
||
}
|
||
|
||
.reward-price .price-frame::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 5px;
|
||
right: 5px;
|
||
top: 28px;
|
||
height: 50px;
|
||
border: 5px solid transparent;
|
||
background:
|
||
linear-gradient(180deg, #2f0b03 0%, #4b1808 55%, #2b0802 100%) padding-box,
|
||
linear-gradient(90deg, #fff1c4, #c06b3e 16%, #ffe5aa 50%, #c06b3e 84%, #fff1c4) border-box;
|
||
box-shadow:
|
||
inset 0 0 0 2px rgba(103, 40, 18, 0.92),
|
||
inset 0 0 18px rgba(255, 182, 91, 0.16);
|
||
}
|
||
|
||
.reward-price .price-frame::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 10px;
|
||
right: 10px;
|
||
top: 33px;
|
||
height: 1px;
|
||
background: rgba(255, 234, 181, 0.75);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<main class="page" aria-labelledby="page-title">
|
||
<div class="canvas" data-node-id="5:692">
|
||
<h1 id="page-title" class="sr-only">Recharge Reward</h1>
|
||
|
||
<div class="hero" data-node-id="5:693">
|
||
<div class="hero-bg">
|
||
<img src="../../assets/recharge/hero-bg.png" alt="" />
|
||
</div>
|
||
<img class="asset hero-title" src="../../assets/recharge/hero-title.png" alt="Recharge Reward" />
|
||
</div>
|
||
|
||
<div class="countdown-frame" aria-hidden="true" data-node-id="5:747">
|
||
<img class="frame-stretch" src="../../assets/recharge/price-button-fill.png" alt="" />
|
||
</div>
|
||
|
||
<div class="countdown-item" style="left: 185px; top: 926px;" data-node-id="5:748">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value">01</div>
|
||
<div class="countdown-label">Days</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 387px; top: 926px;" data-node-id="5:752">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value">01</div>
|
||
<div class="countdown-label">Hours</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 588px; top: 926px;" data-node-id="5:756">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value">01</div>
|
||
<div class="countdown-label">Minutes</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 787px; top: 926px;" data-node-id="5:760">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value">01</div>
|
||
<div class="countdown-label">Seconds</div>
|
||
</div>
|
||
|
||
<div class="profile-backdrop" data-node-id="5:694">
|
||
<img src="../../assets/recharge/profile-panel-bg.png" alt="" />
|
||
</div>
|
||
|
||
<section class="panel" style="top: 1223px; height: 658px;" aria-label="Recharge profile" data-node-id="5:697">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 467px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</section>
|
||
|
||
<div class="avatar-crop" data-node-id="5:703">
|
||
<img src="../../assets/recharge/avatar-photo.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square avatar-frame" aria-hidden="true" data-node-id="5:706">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="center-gem top" src="../../assets/recharge/reward-frame-center.png" alt="" />
|
||
<img class="center-gem bottom" src="../../assets/recharge/reward-frame-center.png" alt="" />
|
||
</div>
|
||
|
||
<div class="figure-text profile-name" data-node-id="5:707">nanfangjian</div>
|
||
<div class="figure-text profile-id" data-node-id="5:709">ID：12345678</div>
|
||
<div class="figure-text profile-total" data-node-id="5:708">Accumlated Recharge:5998</div>
|
||
|
||
<section aria-label="Recharge 100 two rewards" data-node-id="5:710">
|
||
<div class="panel" style="top: 1937px; height: 758px;" aria-hidden="true">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 427px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 567px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</div>
|
||
<img class="asset section-badge" style="left: 370px; top: 1891px;" src="../../assets/recharge/section-badge.png" alt="" />
|
||
<div class="section-title" style="left: 370px; top: 1960px;" data-node-id="5:718">Recharge $100</div>
|
||
|
||
<div class="ornate-square reward-frame-lg" style="left: 118px; top: 2088px;" aria-hidden="true">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-lg" style="left: 602px; top: 2088px;" aria-hidden="true">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<img class="reward-icon" style="left: 148px; top: 2118px; width: 300px; height: 300px;" src="../../assets/recharge/reward-icon.png" alt="" />
|
||
<img class="reward-icon" style="left: 632px; top: 2118px; width: 300px; height: 300px;" src="../../assets/recharge/reward-icon.png" alt="" />
|
||
|
||
<div class="reward-price" style="left: 156px; top: 2458px;" data-node-id="5:725">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span>$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 640px; top: 2458px;" data-node-id="5:726">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span>$100</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-label="Recharge 100 three rewards" data-node-id="5:727">
|
||
<div class="panel" style="top: 2751px; height: 618px;" aria-hidden="true">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</div>
|
||
<img class="asset section-badge" style="left: 370px; top: 2705px;" src="../../assets/recharge/section-badge.png" alt="" />
|
||
<div class="section-title" style="left: 370px; top: 2774px;" data-node-id="5:734">Recharge $100</div>
|
||
|
||
<div class="ornate-square reward-frame-sm" style="left: 118px; top: 2902px;" aria-hidden="true">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm" style="left: 420px; top: 2902px;" aria-hidden="true">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm" style="left: 722px; top: 2902px;" aria-hidden="true">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<img class="reward-icon" style="left: 138px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" />
|
||
<img class="reward-icon" style="left: 440px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" />
|
||
<img class="reward-icon" style="left: 742px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" />
|
||
|
||
<div class="reward-price" style="left: 96px; top: 3152px;" data-node-id="5:744">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span>$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 398px; top: 3152px;" data-node-id="5:745">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span>$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 700px; top: 3152px;" data-node-id="5:746">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span>$100</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
window.__H5_ROUTE_PATH__ = "/activity/recharge";
|
||
|
||
(function () {
|
||
var root = document.documentElement;
|
||
var maxWidth = 432;
|
||
var canvasWidth = 1080;
|
||
|
||
function updateScale() {
|
||
var width = Math.min(window.innerWidth || maxWidth, maxWidth);
|
||
root.style.setProperty("--scale", String(width / canvasWidth));
|
||
}
|
||
|
||
updateScale();
|
||
window.addEventListener("resize", updateScale, { passive: true });
|
||
window.addEventListener("orientationchange", updateScale, { passive: true });
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|