<template>
    <div class="QRcode-box apartment-QRcode flexflex">
        <img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png" />
        <div class="QRcode-case flexcenter">
            <img class="QRcode-img" :src="props['qrcode']" alt="" />
        </div>
        <div class="apartment-QRcode-hint flexacenter">
            <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png" />
            手机查看该{{ props["type"] == "apartment" ? "公寓" : "房源" }}
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue"

const props = defineProps({
    qrcode: String,
    type: String,
})
</script>

<style lang="less" scoped>
.QRcode-box {
    width: 304px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(235, 235, 235, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .scan-icon {
        width: 14px;
        height: 14px;
        margin-right: 7px;
    }

    &.apartment-QRcode {
        padding: 40px 0;

        &.apartment-box {
            box-shadow: none;
        }

        .mini-program-title {
            width: 168px;
            height: 20px;
            margin-bottom: 28px;
        }

        .QRcode-case {
            width: 140px;
            height: 140px;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 50%;
            overflow: hidden;
            -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
            -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
            margin-bottom: 33px;

            .QRcode-img {
                width: 120px;
                // height: 110px;
            }
        }

        .apartment-QRcode-hint {
            font-size: 14px;
            color: #000000;
        }
    }
}
</style>
