<template>
	<view class="self-service-utr-container">
		<view class="self-service-utr-card plr30 ptb24 flex-acenter flex-sbetween" style="border-radius: 30rpx;"
			:style="{ background: themeStore.theme.lightBgColor }" @click.stop="handleClick">
			<!-- <theme-image src="@/static/home/icon-service.png" mode="aspectFit" style="width: 76rpx; height: 76rpx;" /> -->
			<view>
				<view class="ft12">
					{{ $t('deposit.message.tips4') }}
				</view>
				<view class="mt12 ft10" :style="{ color: themeStore.theme.text.theme }">
					{{ $t('deposit.message.tips5') }}
				</view>
			</view>
			<theme-image src="@/static/wallet/icon-arrow-right-red.png" mode="aspectFit"
				style="width: 16rpx; height: 30rpx;" />
		</view>
	</view>
</template>

<script setup>
import { useThemeStore } from '@/store/useThemeStore.js'
import { useUserStore } from '@/store/useUserStore'
import { openUrl } from '@/module/utils/openUrl'

const themeStore = useThemeStore()
const userStore = useUserStore()

const handleClick = () => {
	// openUrl(userStore.serviceUrl)
	uni.navigateTo({
		url: '/pages/account/CustomService'
	})
}
</script>

<style lang="scss" scoped>
.self-service-utr-container {

	.self-service-utr-card {
		height: 130rpx;
	}
}
</style>