基于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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Springboot如何打包部署服务器

文章目的&#xff1a;java项目打包成jar包或war包&#xff0c; 放在服务器上去运行 一、编写打包配置 1. pom.xml 在项目中的pom.xml文件里面修改<build>...</build>的代码 >> 简单打包成Jar形式&#xff0c;参考示例&#xff1a; <build><fina…

RabbitMQ-死信队列(golang)

1、概念 死信&#xff08;Dead Letter&#xff09;&#xff0c;字面上可以理解为未被消费者成功消费的信息&#xff0c;正常来说&#xff0c;生产者将消息放入到队列中&#xff0c;消费者从队列获取消息&#xff0c;并进行处理&#xff0c;但是由于某种原因&#xff0c;队列中的…

ALSA - (高级Linux声音架构)是什么?

ALSA是Linux声音系统的核心组件&#xff0c;让用户可以精细控制声音硬件和声音进出。它通过抽象层屏蔽了硬件复杂性&#xff0c;使开发者能够专注于功能实现。这篇文章将逐步解析ALSA的基础知识&#xff0c;包括其运作原理、应用场景&#xff0c;以及如何完成一个基本配置和使用…

Ceph层次架构分析

Ceph的层次结构可以从逻辑上自下向上分为以下几个层次&#xff1a; 一、基础存储系统RADOS层 功能&#xff1a;RADOS&#xff08;Reliable Autonomic Distributed Object Store&#xff09;是Ceph的底层存储系统&#xff0c;提供了分布式存储的核心功能。它是一个完整的对象存…

在连锁零售行业中远程控制软件的应用

在连锁零售行业&#xff0c;远程控制软件正逐渐成为提高效率和降低成本的重要工具。作为零售经理&#xff0c;您可能已经注意到这种技术带来的变化。试想一下&#xff0c;无论您身在何处&#xff0c;都可以实时监控商店的运营情况&#xff0c;甚至在远离的地方解决顾客的问题。…

JS学习日记(jQuery库)

前言 今天先更新jQuery库的介绍&#xff0c;它是一个用来帮助快速开发的工具 介绍 jQuery是一个快速&#xff0c;小型且功能丰富的JavaScript库&#xff0c;jQuery设计宗旨是“write less&#xff0c;do more”&#xff0c;即倡导写更少的代码&#xff0c;做更多的事&#xf…

支持用户注册和登录、发布动态、点赞、评论、私信等功能的社交媒体平台创建!!!

需要整体源代码的可以在我的代码仓下载https://gitcode.com/speaking_me/social-media-platformTest.git 社交媒体平台 描述&#xff1a;社交媒体平台需要支持用户注册、发布动态、点赞、评论、私信等功能。 技术栈&#xff1a; 前端&#xff1a;React, Angular, Vue.js后端…

数字IC后端实现之Innovus specifyCellEdgeSpacing和ICC2 set_placement_spacing_rule的应用

昨天帮助社区IC训练营学员远程协助解决一个Calibre DRC案例。通过这个DRC Violation向大家分享下Innovus和ICC2中如何批量约束cell的spacing rule。 数字IC后端手把手实战教程 | Innovus verify_drc VIA1 DRC Violation解析及脚本自动化修复方案 下图所示为T12nm A55项目的Ca…

【时间之外】IT人求职和创业应知【37】-AIGC私有化

目录 新闻一&#xff1a;2024智媒体50人成都会议暨每经20周年财经媒体峰会召开 新闻二&#xff1a;全球机器学习技术大会在北京召开 新闻三&#xff1a;区块链技术在金融领域的应用取得新突破 不知不觉的坚持了1个月&#xff0c;按照心理学概念&#xff0c;还要坚持2个月&am…

基于单片机智能温室大棚监测系统

本设计以单片机为核心的智能温室大棚监测系统&#xff0c;用于监测大棚内的温湿度、土壤湿度、CO2浓度和光照强度。该系统以STM32F103C8T6芯片为核心控制单元&#xff0c;涵盖电源、按键、NB-IoT模块、显示屏模块、空气温湿度检测、土壤湿度检测、二氧化碳检测和光敏电阻等模块…

JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)

目录 一、编码与加密原理 1.1 ASCII 编码1.2 详解 Base64 1.2.1 Base64 的编码过程和计算方法1.2.2 基于编码的反爬虫设计1.2.3 Python自带base64模块实现base64编码解码类封装 1.3 MD5消息摘要算法 1.3.1 MD5 介绍1.3.2 Python实现md5以及其他常用消息摘要算法封装 1.4 对称加…

RHCSA学习超详细知识点2命令篇

输入命令行的语法 终端中执行命令需要遵照一定的语法&#xff0c;输入命令的格式如下&#xff1a; 命令 参数命令 -选项 参数 输入命令时可以包含多个选项&#xff0c;假如一个命令有-a,-b,-c,-d四个选项&#xff0c;可以写作 命令 -a -b -c -d 参数 这里的多个选项可以“提…

Java结合ElasticSearch根据查询关键字,高亮显示全文数据。

由于es高亮显示机制的问题。当全文内容过多&#xff0c;且搜索中标又少时&#xff0c;就会出现高亮结果无法覆盖全文。因此需要根据需求手动替换。 1.根据es的ik分词器获取搜索词的分词结果。 es部分&#xff1a; //中文分词解析 post /_analyze {"analyzer":"…

5. langgraph中的react agent使用 (从零构建一个react agent)

1. 定义 Agent 状态 首先&#xff0c;我们需要定义 Agent 的状态&#xff0c;这包括 Agent 所持有的消息。 from typing import (Annotated,Sequence,TypedDict, ) from langchain_core.messages import BaseMessage from langgraph.graph.message import add_messagesclass …

STL序列式容器之list

相较于vector的连续性空间&#xff0c;list相对比较复杂&#xff1b;list内部使用了双向环形链表的方式对数据进行存储&#xff1b;list在增加元素时&#xff0c;采用了精准的方式分配一片空间对数据及附加指针等信息进行存储&#xff1b; list节点定义如下 template<clas…

Science Robotics 封面论文:视触觉传感器的手内操作

现在&#xff0c;随便丢给机械手一个陌生物体&#xff0c;它都可以像人类一样轻松拿捏了。除了苹果&#xff0c;罐头、乐高积木、大象玩偶、骰子&#xff0c;都不在话下&#xff1a; 这就是来自Meta FAIR团队最新的NeuralFeels技术&#xff0c;通过融合触觉和视觉&#xff0c;机…

定时器简介

TIM(Timer定时器)简介 在第一部分,我们主要讲的是定时器基本定时的功能&#xff0c;也就是定一个时间&#xff0c;然后让定时器每隔这个时间产生一个中断&#xff0c;来实现每隔一个固定时间执行一段程序的目的&#xff0c;比如你要做个时钟、秒表&#xff0c;或者使用一些程序…

【电子设计】按键LED控制与FreeRTOS

1. 安装Keilv5 打开野火资料,寻找软件包 解压后得到的信息 百度网盘 请输入提取码 提取码:gfpp 安装526或者533版本都可以 下载需要的 F1、F4、F7、H7 名字的 DFP pack 芯片包 安装完 keil 后直接双击安装 注册操作,解压注册文件夹后根据里面的图示步骤操作 打开说明 STM…

阅读2020-2023年《国外军用无人机装备技术发展综述》笔记_技术趋势

目录 文献基本信息 序言 1 发展概况 2 重点技术发展 2.1 人工智能技术 2.1.1 应用深化 2.1.2 作战效能提升 2.2 航空技术 2.2.1螺旋桨设计创新 2.2.2 发射回收技术进步 2.3 其他相关技术 2.3.1 远程控制技术探 2.3.2 云地控制平台应用 3 装备系统进展 3.1 无人作…

redis类型介绍

1. 字符串&#xff08;String&#xff09;&#xff1a; • 简介&#xff1a;最基础的数据类型&#xff0c;可以存储任何形式的字符串&#xff0c;包括文本数据和数字数据。 • 常用操作&#xff1a;SET、GET、INCR、DECR等。 2. 列表&#xff08;List&#xff09;&#xff1a; …