如何使用vue做出竖版的卡包卡片排列层叠在一起的效果

要实现竖版的卡包卡片排列层叠在一起的效果，可以使用 Vue 和 CSS 来实现。以下是一个简单的实现步骤：

1. 在 Vue 组件中定义一个数组 cardList，用于存放卡片数据

   data() {
     return {
       cardList: [
         {id: 1, title: 'Card 1', imgUrl: 'image1.jpg'},
         {id: 2, title: 'Card 2', imgUrl: 'image2.jpg'},
         {id: 3, title: 'Card 3', imgUrl: 'image3.jpg'},
         {id: 4, title: 'Card 4', imgUrl: 'image4.jpg'},
         {id: 5, title: 'Card 5', imgUrl: 'image5.jpg'}
       ]
     }
   }

2. 在模板中使用 v-for 指令根据 cardList 渲染卡片

   <div class="card-stack">
     <div v-for="(card, index) in cardList" :key="card.id" :style="{zIndex: 100 - index}" class="card">
       <img :src="card.imgUrl" alt="Card Image">
       <h3>{{card.title}}</h3>
     </div>
   </div>

这里的 card-stack 和 card 是两个 CSS 类，card-stack 用于定位和控制卡片层叠效果，card 用于控制单个卡片的样式。

3. 在 CSS 中定义 card-stack 和 card 的样式

   .card-stack {
     position: relative;
     margin: 0 auto;
     width: 300px;
     height: 450px;
   }

   .card {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
     background-color: #fff;
     transition: transform 0.3s ease-in-out;
   }

   .card:hover {
     transform: translateY(-20px);
   }

   .card img {
     width: 100%;
     height: 60%;
     object-fit: cover;
     border-radius: 5px;
   }

   .card h3 {
     margin-top: 10px;
     font-size: 1.2rem;
     font-weight: bold;
   }

这里的样式通过 position、z-index、box-shadow、transition 等属性来实现层叠效果和交互效果。

这样就可以实现简单的竖版卡包卡片排列层叠效果了。具体实现还需要根据实际需求进行调整和优化。