<template>
	<mobile-sub-layout :title="$t('deposit.title')" :lineHeight="4" :bgColor="themeStore.theme.bgColor">
		<view class="self-utr-info-container">
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text1') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text2') }}
			</view>
			<!-- <view class="ft16 mt32 mb16" :style="{ color: themeStore.theme.text.highlight }">
				{{ $t('deposit.utrPage.title1') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text3') }}
			</view> -->
			<view class="ft16 mt32 mb16" :style="{ color: themeStore.theme.text.highlight }">
				{{ $t('deposit.utrPage.title2') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text4') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text5') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text6') }}
			</view>
			<view class="ft13" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('deposit.utrPage.text7') }}
			</view>
			<view class="noraml-bottom-action-container" :style="{ 'background': themeStore.theme.bgColor }" @click.stop="handleBtnClick">
				<view class="normal-theme-btn-radius" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal  }">
					<view>
						{{ $t('deposit.button.gotoDepositHistory') }}
					</view>
				</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	
	const handleBtnClick = () => {
		uni.navigateTo({
			url: '/pages/wallet/DepositHistory'
		})
	}
</script>

<style lang="scss" scoped>
	.self-utr-info-container {
		padding: 30rpx 30rpx;
		line-height: 1.5;
	}
</style>