feat(邀请新用户页): 对接接口

This commit is contained in:
hzj 2025-12-05 11:39:52 +08:00
parent 749e6d8284
commit d28977202a
3 changed files with 429 additions and 343 deletions

View File

@ -60,13 +60,13 @@ export const getMyInviteUsers = async () => {
}
}
// 邀请用户奖励池
export const getInviteAwardPool = async () => {
// 获取绑定用户奖励
export const apiGetBindingUserRewards = async (data) => {
try {
const response = await get(`/activity/invite/user/award/pool`)
const response = await post(`/props-activity/reward/client/map/config-info`, data)
return response
} catch (error) {
console.error('Failed to fetch get my invite award pool:', error)
console.error('Failed to fetch get binding user rewards:', error)
console.error('error:' + error.response.errorMsg)
throw error
}

View File

@ -43,7 +43,6 @@ const RankingPage = [
// 活动页面
const ACTIVITIES = [
'/invitation-to-register', //邀请新用户(邀请码)
'/recharge-reward', //充值奖励页面
'/Lebanon-independence-day', //黎巴嫩独立日

View File

@ -11,11 +11,11 @@
</div>
<!-- 确认邀请码 -->
<div style="padding: 87% 0 5%">
<div class="leftBt">
<img
v-if="showBindingBt"
v-smart-img
:src="imageUrl('enterCode')"
:src="imageUrl(getImgName('enterCode'))"
alt=""
width="40%"
@click="enterCodeShow = true"
@ -24,7 +24,7 @@
<img
v-else-if="myInviter.inviterInfo?.userId"
v-smart-img
:src="imageUrl('privateChat')"
:src="imageUrl(getImgName('privateChat'))"
alt=""
width="40%"
@click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
@ -34,28 +34,24 @@
<!-- 主体内容 -->
<div
style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
style="
padding: 91vw 3vw 0;
display: flex;
flex-direction: column;
gap: 2vw;
"
>
<!-- 我的邀请码 -->
<div
style="
width: 100%;
border-radius: 8px;
background: rgba(194, 174, 232, 0.2);
backdrop-filter: blur(32px);
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
"
@click.stop
<itemCenter
style=""
:imgUrl="imageUrl(getImgName('myCode'))"
:contentStyle="`padding: 26vw 6vw 16vw;`"
>
<div style="font-weight: 590">My invitation code:</div>
<div
style="
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
padding: 12px;
width: 100%;
padding: 3vw 1vw;
display: flex;
justify-content: center;
align-items: center;
@ -67,22 +63,39 @@
v-smart-img
src="../../assets/icon/copy.png"
alt=""
width="24px"
style="display: block; width: 2em; object-fit: cover"
@click="copyCode(myInviteInfo.inviteCode || '')"
/>
</div>
<div style="font-weight: 510; font-size: 0.7em">
*Copy your invitation code and send it to your new friends.
</div>
</div>
</itemCenter>
<!-- 模块切换按钮 -->
<div style="display: flex; justify-content: space-around; align-items: center">
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl(getImgName('processBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: showModule === 'process' ? 0 : 1 }"
@click="showModule = 'process'"
/>
<img
v-smart-img
:src="imageUrl(getImgName('processBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: showModule === 'process' ? 1 : 0 }"
@click="showModule = 'process'"
/>
</div>
<!-- 列表按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('listBt')"
:src="imageUrl(getImgName('listBt'))"
alt=""
style="display: block; width: 100%"
:style="{ opacity: showModule === 'list' ? 0 : 1 }"
@ -90,58 +103,63 @@
/>
<img
v-smart-img
:src="imageUrl('listBtActive')"
:src="imageUrl(getImgName('listBtActive'))"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: showModule === 'list' ? 1 : 0 }"
@click="showModule = 'list'"
/>
</div>
<!-- 奖励按钮 -->
<div style="width: 40%; position: relative">
<img
v-smart-img
:src="imageUrl('rewardBt')"
alt=""
style="display: block; width: 100%"
:style="{ opacity: showModule === 'reward' ? 0 : 1 }"
@click="showModule = 'reward'"
/>
<img
v-smart-img
:src="imageUrl('rewardBtActive')"
alt=""
style="display: block; width: 100%; position: absolute; top: 0; left: 0"
:style="{ opacity: showModule === 'reward' ? 1 : 0 }"
@click="showModule = 'reward'"
/>
</div>
</div>
<!-- 邀请列表模块 -->
<div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 12px">
<div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 2vw">
<!-- 收入展示 -->
<div style="display: flex; justify-content: space-around; align-items: center">
<div style="position: relative; width: 47%">
<img
v-smart-img
:src="imageUrl('totalIncome')"
alt=""
width="100%"
style="display: block"
/>
<div
style="
position: absolute;
top: 40%;
width: 100%;
height: 60%;
display: flex;
justify-content: center;
align-items: center;
"
>
<itemCenter
style=""
:imgUrl="imageUrl(getImgName('incomeBg'))"
:contentStyle="`padding: 32vw 6vw 18vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 3.8vw;`"
>
<!-- 总邀请人数 -->
<div
style="
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2vw;
"
>
<div>Total invitations:</div>
<div>{{ myInviteIncome.validInviteCount || 0 }}</div>
</div>
<!-- 今日邀请人数 -->
<div
style="
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2vw;
"
>
<div>Today's invitation:</div>
<div>{{ myInviteIncome.todayInviteCount || 0 }}</div>
</div>
<!-- 总收入 -->
<div
style="
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2vw;
"
>
<div>Total income:</div>
<div style="display: flex; align-items: center">
<img
v-smart-img
src="/src/assets/icon/coin.png"
@ -152,25 +170,19 @@
<div style="font-weight: 590">{{ myInviteIncome.totalIncome || 0 }}</div>
</div>
</div>
<div style="position: relative; width: 47%">
<img
v-smart-img
:src="imageUrl('todayIncome')"
alt=""
width="100%"
style="display: block"
/>
<div
style="
position: absolute;
top: 40%;
width: 100%;
height: 60%;
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- 今日邀请人数 -->
<div
style="
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2vw;
"
>
<div>Today's income:</div>
<div style="display: flex; align-items: center">
<img
v-smart-img
src="/src/assets/icon/coin.png"
@ -181,198 +193,142 @@
<div style="font-weight: 590">{{ myInviteIncome.todayIncome || 0 }}</div>
</div>
</div>
</div>
<!-- 邀请人数 -->
<div
style="
border-radius: 8px;
background: rgba(194, 174, 232, 0.2);
backdrop-filter: blur(32px);
padding: 12px;
display: flex;
align-items: center;
gap: 4px;
"
>
<div
style="
width: 3px;
height: 12px;
flex-shrink: 0;
background: radial-gradient(323.25% 50.32% at 50% 50%, #d58ef4 0%, #7a5aff 100%);
"
></div>
<div style="font-weight: 590">
Number of valid users invited: {{ myInviteIncome.validInviteCount || 0 }}
</div>
</div>
</itemCenter>
<!-- 列表 -->
<div
style="
border-radius: 8px;
background: rgba(194, 174, 232, 0.2);
backdrop-filter: blur(32px);
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
"
<itemCenter
style=""
:imgUrl="imageUrl(getImgName('listBg'))"
:contentStyle="`padding: 25vw 6vw 10vw;`"
>
<!-- 头部 -->
<div style="width: 100%; display: flex; align-items: center">
<div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
<div
style="
flex: 1;
font-weight: 590;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
<div style="font-weight: 590; font-size: 0.82em">Remaining time</div>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
</div>
<div style="flex: 1; font-weight: 590; text-align: end; font-size: 0.82em">
Prowide income
</div>
</div>
<!-- 列表项 -->
<div
v-for="user in myInviteUsers"
style="width: 100%; display: flex; align-items: center"
>
<div style="flex: 1; font-weight: 590; font-size: 0.7em">
ID:{{ user.invitedUserAccount || '-' }}
</div>
<div
style="
flex: 1;
font-weight: 590;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
<div style="font-weight: 590; font-size: 0.7em">{{ user.remainingDays || 0 }}Day</div>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
</div>
<div
style="
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
"
>
<img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
<div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
{{ user.provideIncome || 0 }}
</div>
</div>
</div>
</div>
</div>
<!-- 奖励说明模块 -->
<div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
<div style="position: relative" v-for="poolItem in inviteAwardPool">
<img
v-smart-img
:src="imageUrl(`reward${poolItem.quantity}people`)"
alt=""
width="100%"
style="display: block"
/>
<div
style="
position: absolute;
inset: 12% 0 0;
align-self: stretch;
width: 100%;
border-radius: 8px;
background: rgba(194, 174, 232, 0.2);
backdrop-filter: blur(32px);
padding: 8px;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 4px;
"
>
<div style="display: flex; justify-content: space-around">
<!-- 头部 -->
<div style="width: 100%; display: flex; align-items: center">
<div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
<div
style="width: 45%; position: relative"
v-for="(award, index) in poolItem.activityRewardPropsList"
style="
flex: 1;
font-weight: 590;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<img v-smart-img :src="imageUrl('rewardItemBg')" alt="" width="100%" />
<div
style="
position: absolute;
inset: 0;
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
<div style="font-weight: 590; font-size: 0.82em">Remaining time</div>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
</div>
<div style="flex: 1; font-weight: 590; text-align: end; font-size: 0.82em">
Prowide income
</div>
</div>
<!-- 列表项 -->
<div class="overflow-y-auto" style="align-self: stretch; width: 100%">
<div
v-for="user in myInviteUsers"
style="width: 100%; display: flex; align-items: center"
>
<div style="flex: 1; font-weight: 590; font-size: 0.7em">
ID:{{ user.invitedUserAccount || '-' }}
</div>
<div
style="
flex: 1;
font-weight: 590;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
align-items: center;
"
>
<img v-smart-img :src="award.cover" alt="" width="50%" />
<div>{{ showAwardText(award) }}</div>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
<div style="font-weight: 590; font-size: 0.7em">
{{ user.remainingDays || 0 }}Day
</div>
<div
style="
width: 1px;
height: 16px;
background: linear-gradient(
rgba(217, 217, 217, 0) 0%,
#d9d9d9 50%,
rgba(217, 217, 217, 0) 100%
);
"
></div>
</div>
<div
style="
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
"
>
<img v-smart-img src="/src/assets/icon/coin.png" alt="" width="15%" />
<div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
{{ user.provideIncome || 0 }}
</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: center">
<img
v-if="poolItem.state == '1'"
v-smart-img
:src="imageUrl('receiveBtActive')"
alt=""
width="35%"
@click="receiveAward(poolItem.id)"
/>
<img v-else v-smart-img :src="imageUrl('receiveBt')" alt="" width="35%" />
</div>
</div>
</div>
</itemCenter>
</div>
<!-- 流程说明模块 -->
<div v-if="showModule == 'process'" style="position: relative">
<img
v-smart-img
:src="imageUrl(getImgName('example'))"
alt=""
width="100%"
style="display: block"
/>
</div>
</div>
@ -380,11 +336,13 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- 帮助模块 -->
<div v-if="helpInfoShow" style="margin: 20% 10%; position: relative" @click.stop>
<img v-smart-img :src="imageUrl('helpInfo')" alt="" width="100%" />
<div
style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 3.8%; right: 7%"
@click="closedPopup"
></div>
<img
v-smart-img
:src="imageUrl(getImgName('helpInfo'))"
alt=""
width="100%"
style="display: block"
/>
</div>
<!-- 输入邀请码模块 -->
@ -394,53 +352,95 @@
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
@click="closedPopup"
>
<div
style="
width: 80%;
border-radius: 12px;
background: #fff;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
"
<itemCenter
style=""
:imgUrl="imageUrl(getImgName('enterCodeBg'))"
:contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: space-between;`"
@click.stop
>
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Enter Invitation Code</div>
<div style="display: flex; justify-content: space-between; align-items: center; gap: 8px">
<!-- 邀请码 -->
<div style="flex: 1">
<input
v-model="invitationCode"
type="text"
<!-- 邀请码 -->
<div class="bindingUserCode">
<!-- 输入框 -->
<input
v-model="invitationCode"
type="text"
style="
width: 44.5vw;
min-width: 0;
align-self: stretch;
color: rgba(0, 0, 0, 0.4);
font-weight: 510;
padding: 4px 8px;
border: none;
outline: none;
background-color: transparent;
"
@keyup.enter="confirmInvitationCode"
/>
<!-- 按钮 -->
<div style="width: 16vw" @click="confirm"></div>
</div>
<!-- 礼物 -->
<div
style="
width: 100%;
height: 28vw;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5vw;
"
>
<div
v-for="reward in bindingUserRewards"
style="align-self: stretch; display: flex; flex-direction: column"
>
<div
style="
width: 100%;
height: 100%;
color: rgba(0, 0, 0, 0.4);
font-weight: 510;
border-radius: 8px;
padding: 4px 8px;
border: 1px solid rgba(0, 0, 0, 0.4);
outline: none;
background-color: transparent;
"
@keyup.enter="confirmInvitationCode"
/>
</div>
min-width: 0;
aspect-ratio: 1/1;
<!-- 确认按钮 -->
<img v-smart-img :src="imageUrl('confirm')" alt="" width="25%" @click="confirm" />
display: flex;
justify-content: center;
align-items: center;
"
>
<img
v-smart-img
:src="reward.cover || ''"
alt=""
width="70%"
style="display: block; object-fit: cover"
@error="(e) => handleImageError(e, reward.type)"
/>
</div>
<div
style="
width: 100%;
min-width: 0;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ showDetail(reward) }}
</div>
</div>
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
*Only users who registered within 72 hours can fill in the invitation code. Once the
invitation code is flled in, itcannot be modifed.
</div>
</div>
</itemCenter>
</div>
</maskLayer>
@ -459,27 +459,42 @@
</template>
<script setup>
import { gotoPrivateChat } from '@/utils/appBridge.js'
import { computed, onMounted, ref } from 'vue'
import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '../../components/MaskLayer.vue'
import { useLangStore } from '@/stores/lang'
import { gotoPrivateChat } from '@/utils/appBridge.js'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
import { useClipboard } from '@vueuse/core'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import {
getMyInviteCode, //
bindInviteCode, //
getMyInviteIncome, //
getMyInviteUsers, //
getInviteAwardPool, //
apiGetBindingUserRewards, //
getInviteReceiveAward, //
getMyInviter, //
} from '@/api/invitation.js'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'
import GeneralHeader from '@/components/GeneralHeader.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
const langStore = useLangStore()
//
const currentLangType = computed(() => {
return langStore.selectedLang?.type || 'en'
})
//
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
// OSSURL
const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser/', filename)
const imageUrl = (filename) => getPngUrl('invitation/InviteNewUser2/', filename)
const { copy, isSupported } = useClipboard()
@ -492,9 +507,9 @@ const myInviteInfo = ref({}) //我的邀请信息
const myInviter = ref({}) //
const myInviteIncome = ref({}) //
const myInviteUsers = ref([]) //
const inviteAwardPool = ref({})
const bindingUserRewards = ref([]) //
const showModule = ref('list') //
const showModule = ref('process') //
const showBindingBt = computed(() => {
return !myInviter.value.myInfo?.expired && !myInviter.value.inviterInfo
@ -511,6 +526,30 @@ const closedPopup = () => {
enterCodeShow.value = false
}
//
const handleImageError = (e, type) => {
console.log('图片资源出错')
e.target.onerror = null //
if (type == 'GOLD') {
e.target.src = new URL('/src/assets/icon/coin.png', import.meta.url).href
}
if (type == 'DOLLARS') {
e.target.src = new URL('/src/assets/icon/dollar.png', import.meta.url).href
}
}
//
const showDetail = (reward) => {
let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
if (showamount.includes(reward.type)) {
return reward.content
} else if (reward.type === 'DOLLARS') {
return `$${reward.content}`
} else {
return `${reward.quantity}Days`
}
}
//
const copyCode = (text) => {
if (isSupported.value) {
@ -595,14 +634,17 @@ const apiGetMyInviteUsers = async () => {
const resUserList = await getMyInviteUsers()
if (resUserList.status && resUserList.body) {
myInviteUsers.value = resUserList.body
// myInviteUsers.value = Array(2).fill(resUserList.body).flat()
// myInviteUsers.value = []
}
}
//
const apiGetInviteAwardPool = async () => {
const resAwardPool = await getInviteAwardPool()
//
const getBindingUserRewards = async () => {
let data = ['1983474358707736577']
const resAwardPool = await apiGetBindingUserRewards(data)
if (resAwardPool.status && resAwardPool.body) {
inviteAwardPool.value = resAwardPool.body
bindingUserRewards.value = resAwardPool.body['1983474358707736577']
}
}
@ -610,11 +652,10 @@ const apiGetInviteAwardPool = async () => {
const receiveAward = async (awardId) => {
try {
await getInviteReceiveAward(awardId)
// apiGetInviteAwardPool() //
} catch (error) {
console.error('Failed to fetch receive award:', error)
} finally {
apiGetInviteAwardPool() //
getBindingUserRewards() //
}
}
@ -623,31 +664,40 @@ const preloadCriticalImages = () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('enterCode'),
imageUrl('privateChat'),
imageUrl('listBtActive'),
imageUrl('rewardBt'),
imageUrl('listBt'),
imageUrl('rewardBtActive'),
imageUrl('totalIncome'),
imageUrl('todayIncome'),
imageUrl('enterCodeBg'),
imageUrl('example'),
imageUrl('helpInfo'),
imageUrl('confirm'),
imageUrl('rewardItemBg'),
imageUrl('receiveBtActive'),
imageUrl('receiveBt'),
imageUrl('reward5people'),
imageUrl('reward10people'),
imageUrl('reward15people'),
imageUrl('incomeBg'),
imageUrl('listBg'),
imageUrl('listBt'),
imageUrl('listBtActive'),
imageUrl('myCode'),
imageUrl('privateChat'),
imageUrl('processBt'),
imageUrl('processBtActive'),
]
//
if (inviteAwardPool.value && Array.isArray(inviteAwardPool.value)) {
inviteAwardPool.value.forEach((poolItem) => {
criticalImages.push(imageUrl(`reward${poolItem.quantity}people`))
})
}
const criticalImages_ar = [
imageUrl('bg'),
imageUrl('enterCode_ar'),
imageUrl('enterCodeBg_ar'),
imageUrl('example_ar'),
imageUrl('helpInfo_ar'),
imageUrl('incomeBg_ar'),
imageUrl('listBg_ar'),
imageUrl('listBt_ar'),
imageUrl('listBtActive_ar'),
imageUrl('myCode_ar'),
imageUrl('privateChat_ar'),
imageUrl('processBt_ar'),
imageUrl('processBtActive_ar'),
]
preloadImages(criticalImages)
if (currentLangType.value == 'en') {
preloadImages(criticalImages)
} else if (currentLangType.value == 'ar') {
preloadImages(criticalImages_ar)
}
}
//
@ -656,7 +706,7 @@ const initData = () => {
apiGetMyInviter() //
apiGetMyInviteIncome() //
apiGetMyInviteUsers() //
apiGetInviteAwardPool() //
getBindingUserRewards() //
}
// 使APP
@ -689,6 +739,14 @@ onMounted(() => {
position: relative;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-auto::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 360px) {
* {
font-size: 10px;
@ -697,7 +755,7 @@ onMounted(() => {
@media screen and (min-width: 360px) {
* {
font-size: 16px;
font-size: 12px;
}
}
@ -712,4 +770,33 @@ onMounted(() => {
font-size: 32px;
}
}
.leftBt {
position: absolute;
top: 75vw;
left: 0;
width: 100vw;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bindingUserCode {
width: 100%;
padding-left: 3.5vw;
padding-right: 5vw;
height: 8vw;
display: flex;
justify-content: space-between;
}
[dir='rtl'] .leftBt {
align-items: flex-end;
}
[dir='rtl'] .bindingUserCode {
padding-left: 5vw;
padding-right: 3.5vw;
}
</style>