<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>
<template>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center relative">
    <image
      src="@/static/images/purse/topbg.png"
      class="w-690rpx h-710rpx absolute top-30rpx"
    ></image>
    <view class="w-690rpx flex z-1 mt-50rpx flex-col items-center">
      <text class="w-630rpx text-32rpx font-700 text-white ml-40rpx">Total amount of tokens</text>
      <view class="w-630rpx flex items-center ml-40rpx mt-40rpx">
        <image src="@/static/images/trophy/jinbi.png" class="w-70rpx h-70rpx mr-20rpx"></image>
        <text class="text-56rpx font-700 text-white">219.45K</text>
      </view>
      <view class="w-630rpx h-1rpx bg-#3D537C mt-50rpx"></view>
      <view class="w-630rpx flex flex-wrap items-center justify-between mt-30rpx">
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/1.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Total proft per hour</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/2.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Profit per hour</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/3.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Task reward</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/4.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Team Sharing</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/5.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Share rewards</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
        <view
          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
        >
          <image src="@/static/images/purse/6.png" class="w-45rpx h-52rpx mr-20rpx"></image>
          <view class="flex flex-col text-white w-182rpx">
            <text class="text-24rpx font-400">Resource placement</text>
            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
          </view>
        </view>
      </view>
    </view>
    <view class="w-690rpx mt-70rpx">
      <text class="text-32rpx fw-700 text-white">{{ $t('production.purse') }}</text>
    </view>
    <view class="flex flex-col justify-center items-center w-full">
      <view
        class="w-690rpx h-110rpx mt-40rpx rounded-20rpx bg-cardlight flex items-center justify-between"
      >
        <view class="flex items-center ml-20rpx">
          <image src="@/static/images/purse/u.png" class="w-70rpx h-70rpx mr-29rpx"></image>
          <text class="text-42rpx text-[#fff] fw-550">11</text>
        </view>
        <view
          class="fw-550 w-230rpx h-70rpx bg-[#999999] flex justify-center rounded-10rpx items-center text-white relative mr-10rpx"
        >
          <view
            class="w-74rpx h-30rpx rounded-15rpx bg-[#D4243E] absolute right-0 top-[-10rpx] flex items-center justify-center"
          >
            <text class="text-20rpx">SOON</text>
          </view>
          <text>{{ $t('purse.Withdraw') }}</text>
        </view>
      </view>
    </view>
    <view class="flex flex-col justify-center items-center w-full mb-20rpx">
      <view
        class="w-690rpx h-110rpx mt-40rpx rounded-20rpx bg-cardlight flex items-center justify-between"
      >
        <view class="flex items-center ml-20rpx">
          <image src="@/static/images/trophy/jinbi.png" class="w-70rpx h-70rpx mr-29rpx"></image>
          <text class="text-42rpx text-[#fff] fw-550">11</text>
        </view>
        <view
          class="fw-550 w-230rpx h-70rpx bg-[#999999] flex justify-center rounded-10rpx items-center text-white relative mr-10rpx"
        >
          <view
            class="w-74rpx h-30rpx rounded-15rpx bg-[#D4243E] absolute right-0 top-[-10rpx] flex items-center justify-center"
          >
            <text class="text-20rpx">SOON</text>
          </view>
          <text>{{ $t('purse.Withdraw') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useTelegramBackButton } from '@/hooks/useTelegramBackButton'

useTelegramBackButton(() => {
  uni.switchTab({
    url: '/pages/index/index',
  })
})
</script>

<style scoped></style>
