<template>  
  <view class="card-list">  
    <view class="card" v-for="(item, index) in cardList" :key="index">  
      <!-- 卡片内容，同上 -->  
	  <view class="card-content">  
	        <text class="card-title">{{ item.title }}</text>  
	        <text class="card-description">{{ item.description }}</text>  
	        <button class="card-button" @click="handleButtonClick">操作</button>  
	      </view>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      cardList: [  
        { id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' }, 
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' }, 
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' }, 
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' }, 
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' },  
		{ id: 1, title: '卡片标题1', description: '卡片描述1', image: 'https://example.com/image1.jpg' }, 
        // 其他卡片数据...  
      ]  
    }  
  },  
  methods: {  
    handleButtonClick(event) {  
      // 处理按钮点击事件  
      console.log('按钮被点击', event);  
    }  
  }  
}  
</script>