<template>
    <view class="" style="padding-bottom: 20rpx;">
        <navbar title="充值卡列表"></navbar>

        <view class="card-box">
            <view class="card-item">
                <image src="@/static/bjk.png" class="card-img" alt="" />

                <view class="card-title">白金卡</view>
                <view class="card-balance">￥1602.00</view>
                <view class="card-discount">
                    <text class="card-discount1">9.5</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="@/static/bjk.png" class="card-img" alt="" />

                <view class="card-title">白金卡</view>
                <view class="card-balance">￥1602.00</view>
                <view class="card-discount">
                    <text class="card-discount1">9.5</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="@/static/bjk.png" class="card-img" alt="" />

                <view class="card-title">白金卡</view>
                <view class="card-balance">￥1602.00</view>
                <view class="card-discount">
                    <text class="card-discount1">9.5</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="@/static/bjk.png" class="card-img" alt="" />

                <view class="card-title">白金卡</view>
                <view class="card-balance">￥1602.00</view>
                <view class="card-discount">
                    <text class="card-discount1">9.5</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="@/static/bjk.png" class="card-img" alt="" />

                <view class="card-title">白金卡</view>
                <view class="card-balance">￥1602.00</view>
                <view class="card-discount">
                    <text class="card-discount1">9.5</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
    export default {
        components: {
            navbar,
        },

        data() {
            return {}
        },
        
        methods: {
            // 选择会员卡
            selectCard() {
                console.log("选择会员卡");
            },

            // 确认选择
            confirmCard() {
                console.log("确认选择");
            }
        }
    }

</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .card-box {
        margin: 40rpx 30rpx;

        .card-item {
            width: 690rpx;
            height: 260rpx;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .card-img {
                width: 690rpx;
                height: 260rpx;
            }

            .card-title {
                position: absolute;
                top: 42rpx;
                left: 38rpx;
                font-size: 40rpx;
                color: #303133;
                line-height: 56rpx
            }

            .card-balance {
                position: absolute;
                bottom: 30rpx;
                left: 38rpx;
                font-weight: 500;
                font-size: 40rpx;
                color: #303133;
                line-height: 56rpx;
            }

            .card-discount {
                position: absolute;
                top: 20rpx;
                right: 78rpx;
                color: #FE6752;
                font-weight: bold;
                
                .card-discount1 {
                    font-size: 44rpx;
                    margin-right: 10rpx;
                }

                .card-discount2 {
                    font-size: 30rpx;
                }
            }
        }
    }
</style>
