<!-- 文章模板 -->
<template>
  <div>
    <div class="button-example" @click="aericleClick(items.aur) " v-for="items in datas">
      <div v-if="items.mg == ''">
        <h2>{{ items.title }}</h2>
        <el-text class="mx-1">{{ items.author }}</el-text>
        <p>{{ items.publishedAt }}</p>
      </div>
      <div  v-else="items.mg != ''">
        <h2>{{ items.title }}</h2>
        <el-text class="mx-1">{{ items.author }}</el-text>
        <div>mg</div>
        <p>{{ items.publishedAt }}</p>
      </div>
    </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'
  },
]
</script>
<style scoped>
.button-example {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 15px;
  margin-bottom: 30px;
}

.button-example {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.button-example::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;
}

.button-example: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);
}

.button-example:hover::before {
    opacity: 1;
}
</style>
