<!-- 文章模板 -->
<template>
  <div>
    <div
      class="article-card"
      v-for="item in datas"
      :key="item.title + item.publishedAt"
      @click="aericleClick(item.aur)"
    >
      <h2>{{ item.title }}</h2>
      <el-text class="mx-1">{{ item.author }}</el-text>
      <div v-if="item.mg">mg</div>
      <p>{{ item.publishedAt }}</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 跳转到文章详情
const aericleClick = (aur) => {
  router.push({
    path: '/articlecontents/:url',
    query: { url: aur }
  })
}

// 文章数据
const datas = [
  {
    title: '测试1',
    author: '这是文章模块测试',
    aur: '链接',
    mg: '11',
    publishedAt: '2016-04-10'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
  {
    title: '测试2',
    author: '这是img模块测试',
    aur: '链接',
    mg: '',
    mg_b: '',
    publishedAt: '2016-04-12'
  },
]
</script>

<style scoped>
.article-card {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 15px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
            rgba(255,255,255,0.6) 0%, 
            rgba(255,255,255,0.2) 50%,
            rgba(255,255,255,0.05) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.article-card:hover {
  transform: translateY(-5px) perspective(2000px) rotateX(0);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
              0 0 50px rgba(255, 255, 255, 0.3);
}
.article-card:hover::before {
  opacity: 1;
}
</style>
