基于css的Grid布局和vue实现点击左移右移轮播过渡动画效果

直接上代码，以下代码基于vue2,需要Vue3或者react可以使用国内直连GPT/Claude来帮你转换下

代码如下：

// ScrollCardsGrid.vue
<template><div class="scroll-cards-container"><!-- 左箭头 --><div v-show="showLeftArrow" class="scroll-arrow left-arrow" @click="handleScrollLeft"><i class="arrow-icon">←</i></div><!-- 卡片容器 --><div class="cards-container" ref="cardsContainer" @scroll="handleScroll"><div class="cards-grid"><div v-for="(card, index) in cards" :key="index" class="card"><div class="card-content"><img :src="card.icon" class="card-icon" :alt="card.title" /><div class="card-info"><h3 class="card-title">{{ card.title }}</h3><p class="card-description">{{ card.description }}</p></div></div></div></div></div><!-- 右箭头 --><div v-show="showRightArrow" class="scroll-arrow right-arrow" @click="handleScrollRight"><i class="arrow-icon">→</i></div></div>
</template><script>
export default {name: 'ScrollCardsGrid',data() {return {showLeftArrow: false,showRightArrow: false,scrollStep: 300,cards: [{icon: '/path/to/llama.png',title: 'Llama-3.1-405B',description: '作为Meta的Llama 3.1系列的巅峰之作...'},{icon: '/path/to/claude.png',title: 'Claude-3.5-Hai',description: 'The latest generation of Anthropic\'s fastest...'},{icon: '/path/to/chatgpt.png',title: 'ChatGPT-4o-La',description: 'OpenAI的最强大的模型...'},{icon: '/path/to/gpt4.png',title: 'GPT-4o-Mini',description: 'OpenAI的最新模型...'},{icon: '/path/to/gemini.png',title: 'Gemini-1.5-Pro',description: 'Google的Gemini系列多模态模型...'},{icon: '/path/to/mistral.png',title: 'Mistral-Medium',description: 'Mistral AI的中等大小模型...'},{icon: '/path/to/gemini-flash.png',title: 'Gemini-1.5-Flash',description: 'Powered by gemini-1.5-flash-002...'},{icon: '/path/to/llama70b.png',title: 'Llama-3.1-70B',description: '作为Meta的Llama 3.1系列的中型成员...'}]}},mounted() {this.checkArrows()window.addEventListener('resize', this.checkArrows)},beforeDestroy() {window.removeEventListener('resize', this.checkArrows)},methods: {checkArrows() {const container = this.$refs.cardsContainerif (!container) returnthis.showLeftArrow = container.scrollLeft > 0this.showRightArrow = container.scrollLeft < (container.scrollWidth - container.clientWidth)},handleScroll() {this.checkArrows()},handleScrollLeft() {const container = this.$refs.cardsContainercontainer.scrollBy({left: -this.scrollStep,behavior: 'smooth'})},handleScrollRight() {const container = this.$refs.cardsContainercontainer.scrollBy({left: this.scrollStep,behavior: 'smooth'})}}
}
</script><style scoped>
.scroll-cards-container {position: relative;width: 600px;margin: 0 auto;margin-top: 200px;display: flex;align-items: center;
}.cards-container {width: 100%;overflow-x: auto;scroll-behavior: smooth;/* 隐藏滚动条但保持功能 */scrollbar-width: none;-ms-overflow-style: none;padding: 16px 0;
}.cards-container::-webkit-scrollbar {display: none;
}.cards-grid {display: grid;/* 固定两行 */grid-template-rows: repeat(2, 1fr);/* 自动填充列，每列最小宽度280px */grid-auto-flow: column;grid-auto-columns: 280px;gap: 16px;padding: 0 16px;
}.card {background: #ffffff;border: 1px solid #e5e7eb;border-radius: 12px;padding: 16px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);/* 确保卡片高度一致 */height: 88px;box-sizing: border-box;
}.card-content {display: flex;gap: 12px;height: 100%;
}.card-icon {width: 48px;height: 48px;border-radius: 8px;object-fit: cover;
}.card-info {flex: 1;display: flex;flex-direction: column;justify-content: center;
}.card-title {margin: 0 0 4px 0;font-size: 16px;font-weight: 600;line-height: 1.2;
}.card-description {margin: 0;font-size: 14px;color: #6b7280;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.3;
}.scroll-arrow {position: absolute;width: 40px;height: 40px;background: rgba(255, 255, 255, 0.9);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);z-index: 1;transition: all 0.3s ease;
}.scroll-arrow:hover {background: rgba(255, 255, 255, 1);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}.left-arrow {left: -20px;
}.right-arrow {right: -20px;
}.arrow-icon {font-style: normal;color: #374151;
}/* 适配移动端 */
@media (max-width: 640px) {.cards-grid {grid-template-rows: 1fr; /* 在移动端切换为单行 */}.scroll-arrow {display: none; /* 在移动端隐藏箭头 */}
}
</style>