<template>
    <div class="QRcode-box group-QRcode flexflex" v-if="true">
        <img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
        <div class="QRcode-case flexcenter">
            <img class="QRcode-img" :src="wechat['wechatqrcode']" alt="">
        </div>

        <div class="group-QRcode-hint flexacenter">
            <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
            入群请添加
            <b>方同学的小助手</b>
            <!-- <b>{{ wechat['nickname'] }}</b> -->
        </div>
    </div>
</template>

<script setup>
import { toRefs } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const { wechat } = toRefs(store.state);

</script>

<style lang="less" scoped>
.QRcode-box {
    width: 304px;
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    // height: 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;
    }

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

        .group-title {
            width: 140px;
            height: 26px;
            margin-bottom: 26px;
        }

        .QRcode-case {
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 15px;
            -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: 28px;

            .QRcode-img {
                width: 100px;
                height: 100px;
            }
        }

        .group-QRcode-hint {
            color: #555555;
            font-size: 14px;

            b {
                font-size: 14px;
                color: #000;
                font-weight: 650;
                margin-left: 5px;
            }
        }
    }
}
</style>