32 lines
1.5 KiB
Vue
32 lines
1.5 KiB
Vue
<template>
|
||
<view class="card expiry-banner" :class="`expiry-${reminder.level}`" role="status">
|
||
<view class="banner-heading">
|
||
<view class="banner-title">{{ reminder.level_name || '套餐临期提醒' }}</view>
|
||
<button class="banner-close" aria-label="关闭临期提醒" @tap="$emit('close')">关闭</button>
|
||
</view>
|
||
<view class="banner-body">当前资产套餐剩余 {{ reminder.remaining_days }} 天，请及时续费。</view>
|
||
<view class="banner-expiry">预计到期：{{ formatShanghaiExpiry(reminder.expires_at) }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { formatShanghaiExpiry } from '@/utils/expiry-reminder.js';
|
||
defineProps({ reminder: { type: Object, required: true } });
|
||
defineEmits(['close']);
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.expiry-banner {
|
||
border-left: 8rpx solid var(--reminder-color);
|
||
.banner-heading { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
|
||
.banner-title { color: var(--reminder-color); font-size: 30rpx; font-weight: 600; }
|
||
.banner-close { margin: 0; padding: 8rpx 16rpx; font-size: 24rpx; line-height: 1.5; color: var(--text-secondary); background: var(--gray-100); }
|
||
.banner-close::after { border: none; }
|
||
.banner-body { margin-top: 12rpx; font-size: 28rpx; line-height: 1.6; color: var(--text-primary); }
|
||
.banner-expiry { margin-top: 8rpx; font-size: 24rpx; color: var(--text-secondary); }
|
||
}
|
||
.expiry-red { --reminder-color: var(--danger); }
|
||
.expiry-purple { --reminder-color: var(--purple); }
|
||
.expiry-pink { --reminder-color: var(--pink); }
|
||
</style>
|