<template>
	<view class="mx-[30rpx] relative overflow-hidden rounded-lg">
		<view class="w-full h-[200rpx]">
			<u-image width="100%" height="200rpx" src="/static/images/user/vip_bg.png"></u-image>
		</view>
		<view class="absolute w-full top-0 flex items-center justify-between px-[30rpx] py-[40rpx]">
			<view class="">
				<view class="flex items-center justify-between text-[#FFE4BC] mb-[30rpx] ">
					<u-icon size="32" name="/static/images/user/viplogo.png"></u-icon>
					<view class="ml-[10rpx]">
						{{t('vip.unlocked')}}
					</view>
				</view>
				<view class="text-[#FFFFFF] text-2xl">
					{{ member.name }}
				</view>
			</view>
			<view class="">
				<navigator hover-class="none" url="/pages/user_vip/index">
					<view class="text-[#FFE4BC]">
						{{t('vip.upgrade')}}
					</view>
				</navigator>
			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
	import { t } from '@/utils/util'
	
	const props = defineProps({
		member: {
			type: Object,
			default: () => ({})
		}
	})
</script>

<style>
	.vip-btn {
		background-color: #ffd200;
	}
</style>