<template>
    <div style="display: flex;">
        <div style="width: 50%;">
            <p>作者：yma16</p>
            <p>代码仓库(gitcode)：<a href="https://gitcode.net/qq_38870145/vue-csdn-grade"
                    target="_blank">https://gitcode.net/qq_38870145/vue-csdn-grade</a>
            </p>
            <p>
                csdn前端新星创作者：<a href="https://blog.csdn.net/qq_38870145?type=blog"
                    target="_blank">https://blog.csdn.net/qq_38870145</a>
            </p>
            <div style="display: flex">
                <div> 请作者喝杯茶(点击放大图片)：</div>
                <div>
                    <a-image :height="70" :width="50" src="https://yongma16.xyz/staticFile/common/img/wx-pay.jpg" ref="imgRef" />
                </div>
            </div>
        </div>
        <div style="width: 50%;text-align: right;line-height: 185px;padding-right: 20px;">
            <a href="https://blog.csdn.net/qq_38870145?type=blog" target="_blank">
                <div class="csdn-img" />
            </a>
        </div>
    </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
const imgRef=ref(null)
onMounted(()=>{
    console.log('imgRef',imgRef)
    try{
        if(imgRef&&imgRef.value){
        imgRef.value.click()
    }
    }
    catch(e){
        console.log(e)
    }
})
</script>
<style>
.csdn-img {
    background: url(../assets/csdn.jpg);
    background-size: 100%;
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
}
</style>