<template>
    <van-popup class="connect-page" v-model:show="show" closeable round position="bottom" :style="{ maxHeight: '70%' }">
        <img class="img1" src="@/assets/png-kefuliaotian.png" alt="" />
        <img class="img2" src="@/assets/png-kefu-bg.png" alt="" />
        <div class="flex justify-center pt-[50px]">
            <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                <span class="z-[1] relative">聯系客服</span>
                <img class="w-[78px] h-[16px] absolute bottom-0 left-0 z-0" src="@/assets/png-xiantiao1.png" alt="" />
            </div>
        </div>

        <div class="connect-list">
            <div class="connect-info">
                <img src="@/assets/png-kefu-bg1.png" class="connect-img" alt="" />
                <div class="connect-content flex items-center px-[16px]">
                    <img class="w-[40px] h-[40px]" src="@/assets/icon_kefu 2.png" alt="" />
                    <div class="connect-text flex-1 ml-[13px]">
                        <div class="text-[#121325] text-[13px]">客服</div>
                        <div class="text-[#386459] text-xs">whatsapp：+16272899</div>
                    </div>
                    <van-button color="#121325" class="w-[60px]" size="mini" round>複製</van-button>
                </div>
            </div>
            <div class="connect-info">
                <img src="@/assets/png-kefu-bg1.png" class="connect-img" alt="" />
                <div class="connect-content flex items-center px-[16px]">
                    <img class="w-[40px] h-[40px]" src="@/assets/icon_youxiang.png" alt="" />
                    <div class="connect-text flex-1 ml-[13px]">
                        <div class="text-[#121325] text-[13px]">郵箱</div>
                        <div class="text-[#386459] text-xs">11727272636378@139.com</div>
                    </div>
                    <van-button color="#121325" class="w-[60px]" size="mini" round>複製</van-button>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
// const props = defineProps({
//     show: {
//         type: Boolean,
//         default: false
//     }
// })
// const emit = defineEmits(['update:show'])
function changeShow(val) {
    show.value = val
}
defineExpose({ changeShow })
</script>

<style lang="less" scoped>
.connect-page {
    --van-popup-background: #20223c;
    padding: 21px 18px 100px;
    overflow: visible;

    .img1 {
        width: 120px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .img2 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.connect-info {
    position: relative;
    margin-top: 15px;
    .connect-img {
        width: 100%;
        display: block;
    }

    .connect-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
</style>
