<template>
    <div>
        <van-popup custom-style="background-color: transparent;" :show="qrCodeVisable">
            <view :style="{
                backgroundImage: 'url(https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/'+theme+'_ask_popup_bg@2x.png)',
                width: '580rpx',
                height: '865rpx',
                backgroundSize: '100% 100%'

            }">

                <image style="width: 220rpx;position: absolute;top:365rpx;left: 180rpx;" mode="widthFix" :src="codeImg2">
                </image>
            </view>
            <view style="text-align: center;margin-top: 50rpx;">
                <image @click="()=>{
                    qrCodeVisable=false
                }" style="width:64rpx" mode="widthFix" class="code" :src="'/static/icon/'+theme+'_cha@2x.png'"></image>
            </view>


        </van-popup>
        <div @click="() => {
            qrCodeVisable = true
        }" class="content">
            <image class="" style="width: 100%;" mode="widthFix" :src="'/static/icon/' + theme + '_long_rect@2x.png'">
            </image>
            <div class="text">
                <div class="">更多详细测算请点击</div>
                <image class="code" :src="codeImg1"></image>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            codeImg1: "data:image/png;base64,[encoded data, 11580 characters]",
            codeImg2:"data:image/png;base64,[encoded data, 146724 characters]",
            qrCodeVisable: false

        }
    },
    props: {
        theme: {
            type: String,
            default: ''
        },
    },

}
</script>

<style lang="less" scoped>
.more {
    width: 580rpx;

}

.content {
    padding: 30rpx 0rpx;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    position: relative;

    .text {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        top: 0;
        left: 0;


    }

    .code {
        width: 74rpx;
        height: 74rpx;
        margin-left: 26rpx;
        margin-top: 6rpx;
    }
}
</style>