<template>

	<view>
		<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image>
		<!-- 3+13+7+4 =27 -->
		<view style="display: flex;flex-direction: column;margin-top: -40vw;">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;">
					<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;">
						{{data.state}}
					</view>
					<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;">
						{{data.name}}
					</view>
					<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;">
						{{data.time}}
					</view>
				</view>
				<image src='../../static/gift2.png'
					style="width: 40px;height: 40px;padding-right: 20px;flex-shrink: 0;">
				</image>
			</view>

			<view
				style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;">
				<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image>
				<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					remarks: ''
				},
				data: {
					time: "2023.10.20-2025.10.20",
					name: "卡号:123456789",
					pname: "闭包名称",
					state: "已失效",
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	uni-page-body,
	page {
		background: #F1F2F3;
	}
</style>