当前位置: 首页 > news >正文

挑战用React封装100个组件【002】

项目地址
https://github.com/hismeyy/react-component-100

组件描述
组件适用于需要展示图文信息的场景,比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示

样式展示

在这里插入图片描述

代码展示

InfoCard.tsx
import './InfoCard.css'interface InfoCardProps {title: string;description: string;imgSrc: string;imgAlt?: string;
}const InfoCard = ({ title, description, imgSrc, imgAlt = title
}: InfoCardProps) => {return (<div className='info-card'><div className='img'>{imgSrc && <img src={imgSrc} alt={imgAlt} />}</div><div className="info"><h6>{title}</h6><p>{description}</p></div></div>)
}export default InfoCard
InfoCard.css
.info-card {box-sizing: border-box;width: 350px;height: 450px;border-radius: 15px;background-color: #F5F5F5;box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;align-items: left;padding: 15px;cursor: pointer;transform-origin: center;position: relative;overflow: hidden;
}.info-card .img {width: 320px;height: 320px;overflow: hidden;display: flex;justify-content: center;align-items: center;border-radius: 8px;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.info-card .img img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}.info-card .info {margin: 20px 5px 0;height: 60px;position: relative;z-index: 1;transition: transform 0.3s ease;
}.info-card .info h6 {all: unset;display: block;width: 100%;font-size: 16px;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color 0.3s ease;
}.info-card .info p {all: unset;display: -webkit-box;width: 100%;margin-top: 10px;font-size: 12px;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;line-height: 1.3;line-clamp: 2;box-orient: vertical;
}.info-card:hover .img {transform: scale(1.02);
}.info-card:hover .img img {transform: scale(1.1);
}.info-card:hover .info h6 {color: #f08a5d;
}

使用

App.tsx
import './App.css'
import InfoCard from './components/card/infoCard02/InfoCard'function App() {return (<><InfoCardtitle="Web全栈开发指南"description="全面的Web开发学习指南,涵盖前端技术、后端开发、数据库设计等多个领域的知识。本课程将帮助你构建完整的开发技能体系。"imgSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&q=80"/></>)
}export default App

相关文章:

挑战用React封装100个组件【002】

项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于需要展示图文信息的场景&#xff0c;比如产品介绍、用户卡片或任何带有标题、描述和可选图片的内容展示 样式展示 代码展示 InfoCard.tsx import ./InfoCard.cssinterface InfoCardProps {t…...

MarkDown-插入图片-图片url地址的生成获取方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、url地址是什么二、如何获取图片的url地址1.了解图床2.使用图床获取图片URL地址2.1进入网站后&#xff0c;点击右下角“Select Image.”按钮&#xff0c;即可…...

插值、拟合和回归分析的相关知识

目录 0 序言 1 分段线性插值 2 多项式插值 3 样条插值 4 最小二乘拟合 5 多元线性回归 0 序言 在生产实践和科学研究中&#xff0c;常常有这些问题: 插值问题&#xff1a;由实验或测量得到变量间的一批离散样点&#xff0c;要求得到变量之间的函数关系或得到样点之外的…...

【小白学机器学习42】进行多次抽样,样本的分布参数和总体的分布参数的关系

目录 1 进行多次抽样&#xff0c;样本的分布参数和总体的分布参数的关系 2 样本容量越大&#xff0c;多次抽样的样本的分布参数和总体的分布参数的关系 3 随着样本容量增大&#xff0c;多次抽样均值的 平均值&#xff0c;方差的变化 4 随着样本容量增大&#xff0c;多次抽…...

链动星海 质引未来|中信银行加码科技金融 “接力式”服务助力“新质生产力”释放

11月26日&#xff0c;第二届中国国际供应链促进博览会&#xff08;以下简称链博会&#xff09;在北京中国国际展览中心开幕。中信集团以“链动星海 质引未来”为主题&#xff0c;亮相先进制造链展区。此次布展由中信金控主办、中信银行承办&#xff0c;携手中信证券、中信建投证…...

黑马2024AI+JavaWeb开发入门Day02-JS-VUE飞书作业

视频地址&#xff1a;哔哩哔哩 讲义作业飞书地址&#xff1a;飞书 一、作业1 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…...

云计算基础-期末复习

第一章&#xff1a;云计算概论 一、云计算的定义与特征 1. 定义&#xff1a; 云计算是一种通过网络以按需、可扩展的方式获取计算资源和服务的模式。它将计算资源视为一种公用事业&#xff0c;用户可以根据需求动态获取和释放资源&#xff0c;而无需了解底层基础设施的细节。…...

Java GET请求 请求参数在Body中使用Json格式传参

业务需要调个三方接口 使用GET请求方式 但是&#xff01;请求参数不在Query中&#xff0c;竟然在Body中&#xff0c;使用Json格式传参 在API调试工具里面可以调通 在java代码里&#xff0c;死活调不通 网上搜了搜&#xff0c;找到一个靠谱的&#xff0c;记录一下 import o…...

AI数据分析工具(一)

Looker Studio&#xff08;谷歌&#xff09;-免费 优点 免费使用&#xff1a;对于中小型企业和个人用户来说&#xff0c;没有任何费用压力&#xff0c;可以免费享受到数据可视化和报表创建的功能。与Google服务集成&#xff1a;特别适合使用Google产品生态的企业&#xff0c;…...

go结构体匿名“继承“方法冲突时继承优先顺序

在 Go 语言中&#xff0c;匿名字段&#xff08;也称为嵌入字段&#xff09;可以用来实现继承的效果。当你在一个结构体中匿名嵌入另一个结构体时&#xff0c;嵌入结构体的方法会被提升到外部结构体中。这意味着你可以直接通过外部结构体调用嵌入结构体的方法。 如果多个嵌入结…...

【049】基于51单片机语音录放【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成&#xff1a;51单片机最小系统ISD4004语音芯片LM386音频放大器喇叭LCD1602液晶显示按键控制LED灯。 1、本设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片&#xff0c;LCD1602液晶显示屏实时显示&#xff1b; 2、系统具有两种模式&#xff1a;录音…...

《软件项目管理》期末-复习题及参考答案

&#xff08;1&#xff09;赶工一个任务时&#xff0c;你应该关注&#xff08; C &#xff09; A. 尽可能多的任务 B. 非关键任务 C. 加速执行关键路径上的任务 D. 通过成本最低化加速执行任务 &#xff08;2&#xff09;下列哪个不是项目管理计划的一部分&#xff1f;&#x…...

milvus 通俗易懂原理

向量值如何生成的 Milvus 是一个开源的向量数据库&#xff0c;专门用于处理高维向量的存储、搜索和分析。向量值本身通常来自于某些机器学习或深度学习模型的输出&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;、计算机视觉&#xff08;CV&#xff09;、推荐系…...

什么是撞库、拖库和洗库?

“撞库”是黑客通过收集互联网已泄露的用户和密码信息&#xff0c;生成对应的字典表&#xff0c;尝试批量登陆其他网站后&#xff0c;得到一系列可以登录的用户。 很多用户在不同网站使用的是相同的帐号密码&#xff0c;因此黑客可以通过获取用户在A网站的账户从而尝试登录B网…...

安卓-碎片的使用入门

1.碎片(Fragment)是什么 Fragment是依赖于Activity的&#xff0c;不能独立存在的,是Activity界面中的一部分&#xff0c;可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间&#xff0c;因而在平板上应用得非常广泛. Fragment不能独立存在&#xff0c;必须…...

华为IPD流程学习之——深入解读123页华为IPD流程体系设计方法论PPT

该方案全面介绍了华为IPD流程体系设计方法论&#xff0c;包括流程体系建设的背景、理念、架构、核心特征、构建模型、与组织和战略的关系、运营机制、数字化转型以及流程管理组织等内容&#xff0c;旨在为企业提供一套系统的流程体系建设指导&#xff0c;以提升运营效率、质量和…...

DriveMLLM:一个专为自动驾驶空间理解任务设计的大规模基准数据集

2024-11-20&#xff0c; 由武汉大学、中国科学院自动化研究所、悉尼科技大学、牛津大学等合创建了DriveMLLM数据集&#xff0c;该数据集是自动驾驶领域首个专为评估多模态大型语言模型&#xff08;MLLMs&#xff09;空间理解能力而设计的基准&#xff0c;对于推动自动驾驶技术的…...

高效处理 iOS 应用中的大规模礼物数据:以直播项目为例(1-礼物池)

引言 在现代iOS应用开发中&#xff0c;处理大规模数据是一个常见的挑战。尤其实在直播项目中&#xff0c;礼物面板作为展示用户互动的重要部分&#xff0c;通常需要实时显示海量的礼物数据。这些数据不仅涉及到不同的区域、主播的动态差异&#xff0c;还需要保证高效的加载与渲…...

python的函数与递归

需求&#xff1a; 编写一个函数&#xff0c;计算斐波那契数列的第 N 项&#xff0c;并使用递归实现。 为了计算斐波那契数列的第 N 项&#xff0c;可以使用递归方法。斐波那契数列的定义是&#xff1a; F(0) 0 F(1) 1 对于 n > 2&#xff0c;F(n) F(n-1) F(n-2)&#xf…...

RabbitMQ学习-Seven

再SpringBoot中使用MQ 1.创建SpringBoot项目 除了我们平常使用的一些工具依赖&#xff0c;还需要选择这个Spring for RabbitMQ依赖 2.需要在application.yml文件中进行配置 server:port :9090 spring:application:name:producerrabbitmq:host: 你的主机名port: 5672virtual-…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...