<template>
    <!-- 有疑问 -->
    <div class="flexcenter" style="padding: 78px 0;">
        <el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="hover"
            popper-style="border-radius: 14px;padding: 20px;">
            <template #reference>
                <div class="have-questions flexcenter">
                    <div class="have-questions-text flexacenter">有疑问？来找<img class="smiling"
                            src="@/assets/img/publicImage/smiling.png">{{ wechat['nickname'] }}！</div>
                    <div class="have-questions-btn flexcenter">
                        <img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信
                    </div>
                </div>
            </template>
            <img class="QR-code" :src="wechat['wechatqrcode']" alt="">
        </el-popover>
    </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>
.have-questions {
    display: inline-flex;
    flex-direction: column;

    .QR-code {
        width: 100%;
    }

    .have-questions-text {
        color: #7F7F7F;
        font-size: 14px;
        margin-bottom: 14px;

        .smiling {
            width: 16px;
            height: 16px;
            margin: 0 5px;
        }
    }

    .have-questions-btn {
        width: 166px;
        height: 40px;
        border-radius: 40px;
        font-size: 18px;
        font-weight: 650;
        color: #333;
        border: 1px solid #7f7f7f;
        cursor: pointer;

        .have-questions-icon {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
    }
}
</style>