ai
/
app-gift


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html>
<head>
  <title>卡片组示例</title>
  <style>
    .card-container {
      display: flex;
      flex-wrap: wrap;
    }

    .card {
      width: 300px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
    }

    .card img {
      width: 100%;
      height: auto;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .card p {
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="card-container">
      <div v-for="card in cards" class="card">
        <img :src="card.image" alt="Card Image">
        <p>{{ card.text }}</p>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        cards: [
          {
            image: '1.png',
            text: '布偶猫'
          },
          {
            image: '2.png',
            text: '幼猫'
          },
          {
            image: '3.png',
            text: '健康宠物猫'
          }
        ]
      }
    });
  </script>
</body>
</html>