基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的扑克牌识别检测系统（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据）

斌擎人工智能官方账号

392人浏览 · 2026-03-21 15:52:30

斌擎人工智能官方账号 · 2026-03-21 15:52:30 发布

摘要

随着人工智能与计算机视觉技术的飞速发展，目标检测技术在游戏分析、安防监控、自动化结算等领域的应用日益深入。本文设计并实现了一个基于多版本YOLO目标检测算法与SpringBoot后端框架的扑克牌智能识别与管理系统。系统核心采用目前前沿的YOLO系列模型（YOLOv8/v10/v11/v12），在包含52类标准扑克牌、总计超过24，000张图像的数据集上进行训练与优化，实现了高精度的多类别扑克牌实时检测。系统采用前后端分离架构，前端提供直观的Web交互界面，后端基于SpringBoot构建，集成DeepSeek大语言模型的智能分析功能，可对检测结果进行语义化解读与策略分析。系统具备完整的用户认证与管理模块，支持图片、视频及摄像头流的实时检测，并将所有检测记录与用户操作持久化存储于MySQL数据库。测试结果表明，该系统不仅识别准确率高、响应速度快，而且具有良好的可扩展性与用户友好性，为扑克牌相关的人工智能应用提供了一个功能完备、技术先进的解决方案。

关键词： 目标检测；YOLO；SpringBoot；扑克牌识别；深度学习；Web应用；前后端分离

详细功能展示视频

基于深度学习的扑克牌识别检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibili

基于深度学习的扑克牌识别检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1ZXkeBAEGR/?vd_source=549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1ZXkeBAEGR/

1. 引言

1.1 研究背景与意义

扑克牌作为一种全球普及的娱乐与竞技工具，其自动化识别技术在在线游戏平台、赌场监控、魔术辅助教学及智能机器人等领域具有广泛的应用需求。传统基于图像处理的识别方法在复杂背景、光照变化及卡片重叠情况下鲁棒性较差。近年来，以YOLO（You Only Look Once）为代表的深度学习目标检测算法，凭借其端到端的高速度与高精度特性，为复杂场景下的实时卡片识别提供了新的技术路径。与此同时，现代Web应用开发趋向于模块化与智能化，将先进的AI模型封装为易用的在线服务成为重要趋势。

1.2 国内外研究现状

目前，基于深度学习的目标检测技术已相当成熟。从YOLOv1到最新的YOLOv12系列，算法在骨干网络、特征融合、损失函数等方面持续优化，在COCO等通用数据集上性能不断提升。然而，针对特定细粒度目标（如扑克牌的花色与点数）的定制化应用研究相对较少，且多数研究集中于算法本身，缺少与完整业务系统、用户交互及数据管理相结合的工程化实现。

1.3 本文主要工作与贡献

本文的主要工作是构建一个集成了最新YOLO检测模型、现代化Web开发框架和AI智能分析的综合性扑克牌识别平台。具体贡献如下：

构建高质量专用数据集：收集并标注了包含52类标准扑克牌的精细数据集，为模型训练与评估奠定基础。
多模型对比与集成：在同一数据集上训练并对比了YOLOv8、YOLOv10、YOLOv11及YOLOv12等多个版本模型，系统允许用户灵活切换，以平衡速度与精度需求。
全功能Web系统开发：基于SpringBoot+Vue.js的前后端分离架构，实现了从用户交互、模型推理到数据管理的完整闭环。
集成DeepSeek智能分析：超越单纯的检测，引入大语言模型对检测出的牌面组合进行策略分析、牌型解释或趣味性描述，提升系统智能水平。
完善的系统化功能：涵盖用户管理、多模态输入（图/视/实时流）、检测记录追溯及数据可视化等企业级应用功能。

2. 系统核心技术概述

2.1 YOLO目标检测算法演进

本系统选用了YOLO系列中四个代表性的最新版本：

YOLOv8：Ultralytics公司发布，在速度和精度上达到良好平衡，提供了完善的训练生态。
YOLOv10：清华大学团队提出，通过无NMS设计等创新，进一步提升了推理效率。
YOLOv11（注：截至当前，官方YOLO版本为v8，v9/v10/v11/v12多为研究社区或特定团队的改进版，此处沿用项目描述）：通常指在v8基础上进行特定优化（如注意力机制、新主干网络）的变体。
YOLOv12：作为后续探索版本，可能集成了更先进的训练策略或架构调整。
系统集成多版本模型，旨在提供一个性能对比平台，并满足用户对不同推理速度与准确率的要求。

2.2 SpringBoot后端框架

SpringBoot用于快速构建高效、可扩展的RESTful API后端服务。它简化了Spring应用的初始搭建和开发过程，通过自动配置、起步依赖等特性，轻松集成MyBatis-Plus（数据访问）、Spring Security（安全控制）、JWT（令牌认证）等模块，为前端提供稳定的数据接口和业务逻辑处理。

2.3 DeepSeek大语言模型API

通过调用DeepSeek提供的API接口，将YOLO模型检测出的扑克牌序列（如 [‘AH‘， ‘KS‘， ‘QC‘] ）作为输入，请求模型生成相应的分析结果.”

2.5 MySQL数据库

用于结构化存储系统所有数据，包括：

用户信息：账号、密码、个人信息。
检测记录：用户、检测时间、使用模型、输入文件、识别结果、AI分析内容等。

3. 系统设计与实现

3.1 系统总体架构

系统采用标准的前后端分离架构。

前端层：用户交互界面，负责接收用户输入（图片/视频/摄像头流）、展示检测结果、图表和AI分析。
后端层（SpringBoot应用）：
- Web控制层：处理HTTP请求，调用业务服务。
- 业务逻辑层：核心业务处理，包括用户认证、模型调度、记录管理、AI分析调用。
- 模型服务层：封装多版本YOLO模型，提供统一的检测接口。
- 数据持久层：MySQL数据库存储。
AI服务层：独立的Python服务直接通过API调用DeepSeek，处理智能分析请求。
数据存储层：MySQL数据库与文件系统（用于存储上传的媒体文件）。

3.2 数据集与模型训练

数据集详情：共包含52个类别，对应扑克牌的每一种花色与点数组合（如10C代表梅花10）。数据集划分为训练集（21，203张）、验证集（2，020张）和测试集（1，010张），确保了模型训练的充分性与评估的可靠性。
模型训练：使用Ultralytics YOLO框架或其他对应版本的官方代码，在统一数据集上进行训练。

3.3 核心功能模块实现

管理模块：管理员拥有用户CRUD权限。
多模型检测调度模块
多模态输入处理模块：
- 图片检测：图片上传，返回标注框和类别信息。
- 视频检测：将视频按帧处理，并将结果合成为新视频。
- 摄像头实时检测：实现低延迟的实时视频流分析与反馈。
DeepSeek智能分析模块：检测完成后，将识别出的扑克牌列表格式化后发送至DeepSeek API，将返回的文本分析结果与检测记录一并保存。
数据可视化与管理模块
个人中心模块：用户可更新头像、昵称、密码等个人信息。

4、系统核心特性概述

功能模块

✅ 用户登录注册：支持密码检测，保存到MySQL数据库。

✅ 支持四种YOLO模型切换，YOLOv8、YOLOv10、YOLOv11、YOLOv12。

✅ 信息可视化，数据可视化。

✅ 图片检测支持AI分析功能，deepseek

✅ 支持图像检测、视频检测和摄像头实时检测，检测结果保存到MySQL数据库。

✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。

✅ 用户管理模块，管理员可以对用户进行增删改查。

✅ 个人中心，可以修改自己的信息，密码姓名头像等等。

✅ 支持更换导航栏背景颜色

登录注册模块

可视化模块

图像检测模块

YOLO模型集成 (v8/v10/v11/v12)
DeepSeek多模态分析
支持格式：JPG/PNG/MP4/RTSP

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

users - 用户信息表

imgrecords- 图片检测记录表

videorecords- 视频检测记录表

camerarecords- 摄像头检测记录表

模型训练结果

#coding:utf-8
#根据实际情况更换模型
# yolon.yaml (nano)：轻量化模型，适合嵌入式设备，速度快但精度略低。
# yolos.yaml (small)：小模型，适合实时任务。
# yolom.yaml (medium)：中等大小模型，兼顾速度和精度。
# yolob.yaml (base)：基本版模型，适合大部分应用场景。
# yolol.yaml (large)：大型模型，适合对精度要求高的任务。
 
from ultralytics import YOLO
 
model_path = 'pt/yolo12s.pt'
data_path = 'data.yaml'
 
if __name__ == '__main__':
    model = YOLO(model_path)
    results = model.train(data=data_path,
                          epochs=500,
                          batch=64,
                          device='0',
                          workers=0,
                          project='runs',
                          name='exp',
                          )

YOLO概述

YOLOv8

YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布，在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步，YOLOv8 引入了新功能和优化，使其成为各种应用中目标检测任务的理想选择。

YOLOv8 的主要特性

高级骨干和颈部架构： YOLOv8 采用最先进的骨干和颈部架构，从而改进了特征提取和目标检测性能。
无锚点分离式 Ultralytics Head： YOLOv8 采用无锚点分离式 Ultralytics head，与基于锚点的方法相比，这有助于提高准确性并提高检测效率。
优化的准确性-速度权衡： YOLOv8 专注于在准确性和速度之间保持最佳平衡，适用于各种应用领域中的实时对象检测任务。
丰富的预训练模型: YOLOv8提供了一系列预训练模型，以满足各种任务和性能要求，使您更容易为特定用例找到合适的模型。

YOLOv10

YOLOv10 由清华大学研究人员基于 Ultralytics Python构建，引入了一种新的实时目标检测方法，解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件，YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明，它在多个模型尺度上都具有卓越的精度-延迟权衡。

概述

实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而，对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。

架构

YOLOv10 的架构建立在之前 YOLO 模型优势的基础上，同时引入了几项关键创新。该模型架构由以下组件组成：

骨干网络：负责特征提取，YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)，以改善梯度流并减少计算冗余。
Neck：Neck 的设计目的是聚合来自不同尺度的特征，并将它们传递到 Head。它包括 PAN（路径聚合网络）层，用于有效的多尺度特征融合。
One-to-Many Head：在训练期间为每个对象生成多个预测，以提供丰富的监督信号并提高学习准确性。
一对一头部：在推理时为每个对象生成一个最佳预测，以消除对NMS的需求，从而降低延迟并提高效率。

主要功能

免NMS训练：利用一致的双重分配来消除对NMS的需求，从而降低推理延迟。
整体模型设计：从效率和准确性的角度对各种组件进行全面优化，包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。
增强的模型功能: 结合了大内核卷积和部分自注意力模块，以提高性能，而无需显着的计算成本。

YOLOv11

YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本，它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上，在架构和训练方法上进行了重大改进，使其成为各种计算机视觉任务的多功能选择。

主要功能

增强的特征提取: YOLO11 采用改进的 backbone 和 neck 架构，从而增强了特征提取能力，以实现更精确的目标检测和复杂的任务性能。
优化效率和速度： YOLO11 引入了改进的架构设计和优化的训练流程，从而提供更快的处理速度，并在精度和性能之间保持最佳平衡。
更高精度，更少参数： 随着模型设计的进步，YOLO11m 在 COCO 数据集上实现了更高的平均精度均值(mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性： YOLO11 可以无缝部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统，从而确保最大的灵活性。
广泛支持的任务范围： 无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)，YOLO11 都旨在满足各种计算机视觉挑战。

Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括：

增强的特征提取： YOLO11 采用了改进的骨干网络和颈部架构，增强了特征提取能力，从而实现更精确的目标检测。
优化的效率和速度： 改进的架构设计和优化的训练流程提供了更快的处理速度，同时保持了准确性和性能之间的平衡。
更高精度，更少参数： YOLO11m 在 COCO 数据集上实现了更高的平均精度均值 (mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性： YOLO11 可以部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统。
广泛支持的任务范围： YOLO11 支持各种计算机视觉任务，例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。

YOLOv12

YOLO12引入了一种以注意力为中心的架构，它不同于之前YOLO模型中使用的传统基于CNN的方法，但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新，实现了最先进的目标检测精度，同时保持了实时性能。尽管有这些优势，YOLO12仍然是一个社区驱动的版本，由于其沉重的注意力模块，可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题，因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。

主要功能

区域注意力机制: 一种新的自注意力方法，可以有效地处理大型感受野。它将特征图分成 l 个大小相等的区域（默认为 4 个），水平或垂直，避免复杂的运算并保持较大的有效感受野。与标准自注意力相比，这大大降低了计算成本。
残差高效层聚合网络（R-ELAN）：一种基于 ELAN 的改进的特征聚合模块，旨在解决优化挑战，尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入：
- 具有缩放的块级残差连接（类似于层缩放）。
- 一种重新设计的特征聚合方法，创建了一个类似瓶颈的结构。
优化的注意力机制架构：YOLO12 精简了标准注意力机制，以提高效率并与 YOLO 框架兼容。这包括：
- 使用 FlashAttention 来最大限度地减少内存访问开销。
- 移除位置编码，以获得更简洁、更快速的模型。
- 调整 MLP 比率（从典型的 4 调整到 1.2 或 2），以更好地平衡注意力和前馈层之间的计算。
- 减少堆叠块的深度以改进优化。
- 利用卷积运算（在适当的情况下）以提高其计算效率。
- 在注意力机制中添加一个7x7可分离卷积（“位置感知器”），以隐式地编码位置信息。
全面的任务支持: YOLO12 支持一系列核心计算机视觉任务：目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
增强的效率: 与许多先前的模型相比，以更少的参数实现了更高的准确率，从而证明了速度和准确率之间更好的平衡。
灵活部署: 专为跨各种平台部署而设计，从边缘设备到云基础设施。

主要改进

增强的特征提取:
- 区域注意力: 有效处理大型感受野，降低计算成本。
- 优化平衡： 改进了注意力和前馈网络计算之间的平衡。
- R-ELAN：使用 R-ELAN 架构增强特征聚合。
优化创新：
- 残差连接：引入具有缩放的残差连接以稳定训练，尤其是在较大的模型中。
- 改进的特征集成：在 R-ELAN 中实现了一种改进的特征集成方法。
- FlashAttention: 整合 FlashAttention 以减少内存访问开销。
架构效率:
- 减少参数：与之前的许多模型相比，在保持或提高准确性的同时，实现了更低的参数计数。
- 简化的注意力机制：使用简化的注意力实现，避免了位置编码。
- 优化的 MLP 比率：调整 MLP 比率以更有效地分配计算资源。

前端代码展示

前端登录界面部分代码



// 原有的登录逻辑保持不变
const currentTime = computed(() => {
	return formatAxis(new Date());
});

const onSignIn = async () => {
	Session.set('token', Math.random().toString(36).substr(0));
	Cookies.set('userName', ruleForm.username);
	
	if (!themeConfig.value.isRequestRoutes) {
		const isNoPower = await initFrontEndControlRoutes();
		signInSuccess(isNoPower);
	} else {
		const isNoPower = await initBackEndControlRoutes();
		signInSuccess(isNoPower);
	}
};

const signInSuccess = (isNoPower: boolean | undefined) => {
	if (isNoPower) {
		ElMessage.warning('抱歉，您没有登录权限');
		Session.clear();
	} else {
		let currentTimeInfo = currentTime.value;
		if (route.query?.redirect) {
			router.push({
				path: <string>route.query?.redirect,
				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
			});
		} else {
			router.push('/');
		}
		const signInText = t('message.signInText');
		ElMessage.success(`${currentTimeInfo}，${signInText}`);
		NextLoading.start();
	}
};

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			request.post('/api/user/login', ruleForm).then((res) => {
				console.log(res);
				if (res.code == 0) {
					Cookies.set('role', res.data.role);
					onSignIn();
				} else {
					ElMessage({
						type: 'error',
						message: res.msg,
					});
				}
			});
		} else {
			console.log('error submit!');
			return false;
		}
	});
};

// 初始化
onMounted(() => {
	// 可以在这里添加初始化代码
});
</script>

<style scoped>
.login-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0d1b1f 0%, #1a3026 30%, #0d1b1f 70%, #1a3026 100%);
	padding: 20px;
	position: relative;
	overflow: hidden;
	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* 扑克牌背景 */
.card-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

/* 浮动扑克牌 */
.floating-cards {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.card {
	position: absolute;
	border-radius: 8px;
	animation: cardFloat ease-in-out infinite alternate;
	opacity: 0.1;
	transform-style: preserve-3d;
}

.card-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	backface-visibility: hidden;
}

.card.spade .card-face {
	background: white;
	color: black;
	border: 2px solid rgba(0, 0, 0, 0.8);
}

.card.heart .card-face {
	background: white;
	color: #C62828;
	border: 2px solid rgba(198, 40, 40, 0.8);
}

.card.club .card-face {
	background: white;
	color: black;
	border: 2px solid rgba(0, 0, 0, 0.8);
}

.card.diamond .card-face {
	background: white;
	color: #C62828;
	border: 2px solid rgba(198, 40, 40, 0.8);
}

.card-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	border-radius: 12px;
	background: inherit;
	filter: blur(15px);
	opacity: 0.2;
}

@keyframes cardFloat {
	0% {
		transform: translateY(0) rotateX(0deg);
	}
	100% {
		transform: translateY(-30px) rotateX(10deg);
	}
}

/* 牌桌纹理 */
.poker-table {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.table-texture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 
		linear-gradient(90deg, 
			rgba(21, 101, 192, 0.05) 1px, 
			transparent 1px) 0 0 / 50px 50px,
		linear-gradient(rgba(21, 101, 192, 0.05) 1px, transparent 1px) 0 0 / 50px 50px;
	background-color: #0a1519;
}

.table-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	background: radial-gradient(ellipse at center, 
		rgba(21, 101, 192, 0.1) 0%, 
		rgba(21, 101, 192, 0.05) 40%, 
		transparent 70%);
}

/* 筹码粒子 */
.chip-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.chip {
	position: absolute;
	border-radius: 50%;
	animation: chipFloat ease-in-out infinite alternate;
	opacity: 0.3;
	box-shadow: 
		inset 0 0 10px rgba(255, 255, 255, 0.3),
		0 5px 15px rgba(0, 0, 0, 0.3);
}

.chip-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: 
		inset 0 0 10px rgba(255, 255, 255, 0.5),
		0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes chipFloat {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	100% {
		transform: translateY(-25px) rotate(180deg);
	}
}

/* 花色网格 */
.suit-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.suit-node {
	position: absolute;
	font-weight: bold;
	animation: suitPulse ease-in-out infinite alternate;
	opacity: 0.15;
	text-shadow: 0 0 10px currentColor;
}

@keyframes suitPulse {
	0% { 
		opacity: 0.1; 
		transform: scale(1) rotate(0deg);
	}
	100% { 
		opacity: 0.25; 
		transform: scale(1.3) rotate(180deg);
	}
}

/* 扫描激光 */
.laser-scan {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.laser-line {
	position: absolute;
	width: 2px;
	height: 300px;
	animation: laserScan linear infinite;
	opacity: 0.3;
}

.laser-path {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, 
		transparent,
		currentColor,
		transparent
	);
	box-shadow: 
		0 0 10px currentColor,
		0 0 20px currentColor;
}

@keyframes laserScan {
	0% {
		top: -300px;
		opacity: 0;
	}
	10% {
		opacity: 0.5;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

/* 主登录容器 */
.login-main {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

/* 卡牌界面容器 */
.card-container {
	position: relative;
	background: rgba(13, 27, 31, 0.85);
	border-radius: 20px;
	padding: 40px;
	backdrop-filter: blur(20px);
	border: 2px solid rgba(21, 101, 192, 0.4);
	box-shadow: 
		0 20px 40px rgba(0, 0, 0, 0.6),
		0 0 80px rgba(21, 101, 192, 0.3),
		inset 0 0 20px rgba(21, 101, 192, 0.1);
	animation: cardAppear 1s ease-out;
	overflow: hidden;
}

@keyframes cardAppear {
	from {
		opacity: 0;
		transform: translateY(40px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.card-effect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.card-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	animation: cardShine 8s linear infinite;
}

@keyframes cardShine {
	0% { left: -100%; }
	100% { left: 100%; }
}

.card-connections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		rgba(198, 40, 40, 0.6),
		transparent
	);
	box-shadow: 0 0 10px rgba(198, 40, 40, 0.4);
	animation: cardScan 4s linear infinite;
}

@keyframes cardScan {
	0% { top: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* 系统品牌 */
.system-brand {
	text-align: center;
	margin-bottom: 40px;
}

.brand-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
	position: relative;
}

.poker-icon {
	width: 120px;
	height: 120px;
	position: relative;
	z-index: 2;
}

.card-structure {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 112px;
	background: white;
	border-radius: 8px;
	border: 2px solid rgba(21, 101, 192, 0.8);
	animation: cardFloatIcon 4s ease-in-out infinite alternate;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.card-outline {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 8px;
	border: 1px solid rgba(198, 40, 40, 0.6);
}

.corner {
	position: absolute;
	font-size: 12px;
	font-weight: bold;
	color: black;
}

.corner.left-top {
	top: 8px;
	left: 8px;
	color: black;
}

.corner.right-top {
	top: 8px;
	right: 8px;
	color: #C62828;
	font-size: 14px;
}

.corner.left-bottom {
	bottom: 8px;
	left: 8px;
	color: black;
	font-size: 14px;
	transform: rotate(180deg);
}

.corner.right-bottom {
	bottom: 8px;
	right: 8px;
	color: #C62828;
	transform: rotate(180deg);
}

.card-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
}

.suit-large {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	color: black;
	font-weight: bold;
}

.ai-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background: linear-gradient(45deg, #C62828, #1565C0);
	border-radius: 50%;
	animation: corePulse 2s ease-in-out infinite;
	z-index: 1;
}

@keyframes corePulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
	50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

@keyframes cardFloatIcon {
	0% { transform: translate(-50%, -50%) rotate(-5deg); }
	100% { transform: translate(-50%, -55%) rotate(5deg); }
}

.card-aura {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150%;
	height: 150%;
	border-radius: 20px;
	border: 3px solid rgba(21, 101, 192, 0.2);
	animation: auraExpand 4s ease-in-out infinite;
}

@keyframes auraExpand {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
	50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

.icon-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(21, 101, 192, 0.2) 0%, transparent 70%);
	z-index: 1;
	animation: glowPulse 5s ease-in-out infinite alternate;
}

@keyframes glowPulse {
	0% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.2); }
}

.brand-text {
	position: relative;
	z-index: 2;
}

.system-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.poker-text {
	font-size: 36px;
	font-weight: 900;
	background: linear-gradient(135deg, #C62828, #1565C0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 30px rgba(198, 40, 40, 0.3);
	letter-spacing: 1px;
}

.recognition-text {
	font-size: 36px;
	font-weight: 900;
	background: linear-gradient(135deg, #1565C0, #F9A825);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 30px rgba(21, 101, 192, 0.3);
	letter-spacing: 1px;
}

.system-subtitle {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 8px;
	font-weight: 500;
	letter-spacing: 2px;
}

.company-tag {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 3px;
	font-weight: 300;
	text-transform: uppercase;
}

/* 登录面板 */
.panel-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 40px;
}

.header-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(21, 101, 192, 0.5), transparent);
}

.panel-header h2 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: linear-gradient(135deg, #C62828, #1565C0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 输入字段 */
.input-field {
	position: relative;
	margin-bottom: 8px;
}

.field-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 24px;
	height: 24px;
}

.poker-icon-small, .chip-icon-small {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.poker-icon-small {
	background: linear-gradient(135deg, #C62828, #1565C0);
}

.poker-icon-small span {
	color: white;
	font-size: 16px;
	font-weight: bold;
}

.chip-icon-small {
	background: linear-gradient(135deg, #F9A825, #2E7D32);
}

.chip-mini {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	border: 2px solid rgba(0, 0, 0, 0.2);
	position: relative;
}

.chip-mini::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.3);
}

.field-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(198, 40, 40, 0.1), rgba(21, 101, 192, 0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

:deep(.card-input .el-input__wrapper) {
	box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.3) !important;
	border-radius: 12px !important;
	padding: 0 20px 0 56px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(10px);
	border: none;
	height: 56px;
	transition: all 0.3s ease;
}

:deep(.card-input .el-input__inner) {
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: 0.5px;
	background: transparent !important;
}

:deep(.card-input .el-input__inner::placeholder) {
	color: rgba(255, 255, 255, 0.4) !important;
}

:deep(.card-input .el-input__wrapper:hover) {
	box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.6) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

:deep(.card-input .el-input__wrapper.is-focus) {
	box-shadow: 0 0 0 2px #1565C0, 0 0 20px rgba(21, 101, 192, 0.4) !important;
	background: rgba(255, 255, 255, 0.1) !important;
}

:deep(.card-input.focused .el-input__wrapper) {
	box-shadow: 0 0 0 2px #1565C0, 0 0 20px rgba(21, 101, 192, 0.4) !important;
	background: rgba(255, 255, 255, 0.1) !important;
}

:deep(.card-input.focused .field-glow) {
	opacity: 1;
}

.input-hint {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 6px;
	margin-left: 56px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

/* 扑克按钮 */
.login-action {
	margin-top: 40px;
}

.poker-btn {
	width: 100%;
	height: 64px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: linear-gradient(135deg, 
		rgba(198, 40, 40, 0.9) 0%,
		rgba(21, 101, 192, 0.9) 50%,
		rgba(249, 168, 37, 0.9) 100%);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	transform-style: preserve-3d;
	perspective: 1000px;
}

.btn-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	height: 100%;
	transform: translateZ(20px);
}

.btn-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.text-main {
	color: white;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-sub {
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.btn-chips {
	display: flex;
	align-items: center;
	gap: 4px;
}

.chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
	animation: chipPulse 1.5s ease-in-out infinite;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.chip-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.chip-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes chipPulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.3); }
}

后端代码展示

详细功能展示视频

基于深度学习的扑克牌识别检测系统（DeepSeek智能分析+YOLOv8/YOLOv10/YOLOv11/YOLOv12+最新web界面 +前后端分离）_哔哩哔哩_bilibili

项目安装教程

https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from=333.1387.homepage.video_card.click

YOLO+spring boot+vue项目环境部署教程（YOLOv8、YOLOv10、YOLOv11、YOLOv12）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from=333.1387.homepage.video_card.click&vd_source=549d0b4e2b8999929a61a037fcce3b0f

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

项目介绍 MATLAB实现基于蟑螂算法（CSA）进行无人机三维路径规划的详细项目实例（含模型描述及部分示例代码）专栏近期有大量优惠还请多多点一下关注加油谢谢你的鼓励是我前行的动力谢谢支持

AtomGit开源社区

《向诸葛亮借智慧》在AI转型管理上的应用价值分析

赵玉平教授在《向诸葛亮借智慧》一书中，从管理学和心理学角度出发，运用人力资源管理和组织行为学的知识，对诸葛亮的一生进行了深入解读

AtomGit开源社区

2026年山东大学软件学院创新项目实训博客（一）

本阶段完成了从产品设计到可运行前端骨架的落地，核心是在信息架构、技术栈与分层规范上做出一组与当前阶段匹配的选择。统一 SPA + 双布局壳：同一套路由下区分桌面与移动，全局 AI 挂在布局层，避免对话入口被弱化。：在开发效率与一期复杂度之间折中，并遵循一期暂缓重型数据获取库的约定。分层与协作约定：页面拼装、业务进 feature、请求进服务层，降低后续并行开发与联调冲突。认证与 HTTP 占位：先

AtomGit开源社区

所有评论(0)

查看更多评论

斌擎人工智能官方账号

@m0_68036862

已为社区贡献112条内容

基于YOLOv8/YOLOv10/YOLOv11/YOLOv12与SpringBoot的扑克牌识别检测系统（DeepSeek智能分析+web交互界面+前后端分离+YOLO数据）

斌擎人工智能官方账号

摘要

详细功能展示视频

1. 引言

1.1 研究背景与意义

1.2 国内外研究现状

1.3 本文主要工作与贡献

2. 系统核心技术概述

2.1 YOLO目标检测算法演进

2.2 SpringBoot后端框架

2.3 DeepSeek大语言模型API

2.5 MySQL数据库

3. 系统设计与实现

3.1 系统总体架构

3.2 数据集与模型训练

3.3 核心功能模块实现

4、 系统核心特性概述

功能模块

登录注册模块

可视化模块

图像检测模块

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

模型训练结果

YOLO概述

YOLOv8

YOLOv10

YOLOv11

YOLOv12

主要改进

前端代码展示

后端代码展示

详细功能展示视频

项目安装教程

所有评论(0)

斌擎人工智能官方账号

4、系统核心特性概述