<template>
  <div class="grid grid-cols-3 md:grid-cols-1 gap-y-6 gap-x-[1.5%] justify-start px-12 py-4">
    <div class="" v-for="(item, index) in plinkList" :key="index" @click="plink(item.url)">
      <div class="flex items-center hover:shadow-[0px_0px_5px_1px_#8A2BE2] mt-2 py-6 px-4 relative border-pp-200 border-[2px] rounded">
        <div class="absolute left-0 bottom-0 z-10 px-3 opacity-60 rounded bg-pp-300 text-[white] text-xs" >{{ item.name }}</div>
        <div class="absolute top-0 right-0 z-10 px-3 opacity-60 rounded bg-pp-300 text-[white] text-xs">{{ item.tagname }}</div>
        <div class="left mr-4">
          <n-avatar round :size="60" :src="item.avater" />
        </div>
        <div class="right">
          <div class="title text-pp-300 text-[20px]">
            {{ item.title }}
          </div>
          <div class="desc text-[12px] text-[#777]">
            {{ item.desc }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup async>
import { onMounted } from 'vue';

//mark import

//mark data
const plinkList = ref([])
//mark method
function plink(url) {
  window.open(url,"_blank","noopener")
}
//mark 周期、内置函数等
onMounted(async () => {
  let res = await $http.plink.listPlink()
  plinkList.value = res.data
})

</script>

<style scoped lang="less"></style>