<template>
  <view class="card mb-4 relative overflow-hidden" @click="goToVip">
    <view class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-yellow-300 opacity-40"></view>
    <view class="p-2 relative z-10">
      <view class="flex justify-between items-center">
        <view>
          <view class="text-lg font-bold text-yellow-800">会员专享特权</view>
          <view class="text-sm text-yellow-700 mt-1">升级VIP获得更多收益</view>
        </view>
        <view class="bg-yellow-500 px-3 py-1 rounded-full text-white text-sm shadow-sm">
          立即查看
        </view>
      </view>
    </view>
    <!-- 装饰元素 -->
    <view class="absolute -right-4 -top-4 w-16 h-16 bg-yellow-200 rounded-full opacity-60"></view>
    <view class="absolute right-5 -bottom-4 w-12 h-12 bg-yellow-100 rounded-full opacity-40"></view>
  </view>
</template>

<script setup>
// 跳转到VIP页面
const goToVip = () => {
  uni.navigateTo({
    url: '/pages/agentVip'
  })
}
</script>

<style scoped>
.card {
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>
