<template>
    <view class="">
        <navbar title="充值"></navbar>
        
        <view class="recharge-box">
            <view class="r-desc">
                <view class="r-desc1">请选择充值金额</view>
                <view class="r-desc2">充值金额只能消费，不能提现</view>
            </view>

            <view class="bg-white card" @click="selectCard">
                <view>
                    <view class="card-item">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值1000</view>
                        </view>

                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">9.5</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>

                                        <view class="card-item">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值1000</view>
                        </view>

                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">9.5</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>

                                        <view class="card-item">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值1000</view>
                        </view>

                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">9.5</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>

                                        <view class="card-item">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值1000</view>
                        </view>

                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">9.5</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>

                                        <view class="card-item active">
                        <view class="d-f a-i-c">
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                            <view class="card-balance">充值1000</view>
                        </view>

                        <view class="d-f a-i-c">
                            <view class="d-f a-i-c">
                                <view class="sale">
                                    <text>预存享</text>
                                    <text class="discount">9.5</text>
                                    <text>折</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="r-desc">
                <view class="r-desc1">充值说明</view>
                <view class="r-desc2">a.账户充值仅限在线方式支付，充值金额实时到账；</view>
                <view class="r-desc2">b.有问题请联系客服。</view>
            </view>

            <view class="card-btn" @click="confirmCard">确定</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;
    }

    .recharge-box {
        margin: 0 30rpx;
        margin-top: 24rpx;

        .r-desc {
            .r-desc1 {
                font-size: 32rpx;
                color: #303133;
                line-height: 44rpx;
            }

            .r-desc2 {
                margin-top: 12rpx;
                font-size: 26rpx;
                color: #909399;
                line-height: 36rpx;
            }
        }

        .card {
            margin-top: 28rpx;
            padding-bottom: 64rpx;

            .card-item {
                width: 690rpx;
                height: 104rpx;
                background: #FFFFFF;
                box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.04);
                border-radius: 16rpx;
                border: 2rpx solid #fff;
                margin: 0 0 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30rpx;
                box-sizing: border-box;

                .card-title {
                    font-size: 30rpx;
                    color: #121212;
                    margin-right: 24rpx;
                }
                .sale {
                    font-size: 28rpx;
                    .discount {
                        color: #FF5951;
                    }
                }

                .card-balance {
                    font-size: 30rpx;
                    color: #303133;
                    line-height: 42rpx;
                    margin-left: 26rpx;
                }
            }

            .active {
                border: 2rpx solid #FF5951;
                background: #FFF4F4;

                .card-checkout {
                    .iconfont{
                        color: #365A9A;
                    }
                }
            }

           
        }

        .card-btn {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 22rpx;
            width: 630rpx;
            height: 90rpx;
            background: #365A9A;
            border-radius: 8rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            text-align: center;
        }
    }
</style>
