Files
nanocode/new-media-platform/website-new/static/honor/index.html
T
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

828 lines
45 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业荣誉墙 — 深圳市飞点健康管理有限公司</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0D9488',
'primary-dark': '#0F766E',
'primary-light': '#CCFBF1',
'primary-bg': '#F0FDFA',
},
animation: {
'float': 'float 3s ease-in-out infinite',
'fade-in': 'fadeIn 0.25s ease-out',
'zoom-in': 'zoomIn 0.3s ease-out',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-6px)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
zoomIn: {
'0%': { transform: 'scale(0.95)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
},
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.lazy-img { opacity: 0; transition: opacity 0.4s ease; background: #f3f4f6; }
.lazy-img.loaded { opacity: 1; }
.lightbox-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center;
padding: 2rem; animation: fadeIn 0.2s ease-out;
}
.lightbox-overlay.hidden { display: none; }
.lightbox-img {
max-width: 90vw; max-height: 85vh; object-fit: contain;
border-radius: 12px; box-shadow: 0 25px 80px rgba(0,0,0,0.5);
animation: zoomIn 0.3s ease-out;
}
.lightbox-close {
position: absolute; top: 1.5rem; right: 1.5rem;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
color: #fff; font-size: 1.5rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-title {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.85); font-size: 0.95rem;
background: rgba(0,0,0,0.5); padding: 0.5rem 1.25rem;
border-radius: 999px; backdrop-filter: blur(10px);
max-width: 90vw; text-align: center;
}
.honor-card {
transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer;
}
.honor-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(13,148,136,0.12); }
.cat-nav {
position: sticky; top: 0; z-index: 100;
backdrop-filter: blur(12px); background: rgba(255,255,255,0.85);
border-bottom: 1px solid #e5e7eb;
}
.thumb-wrapper {
position: relative; overflow: hidden; background: #f9fafb;
}
.thumb-wrapper img {
width: 100%; height: 100%; object-fit: contain;
transition: transform 0.3s ease;
}
.honor-card:hover .thumb-wrapper img { transform: scale(1.05); }
@keyframes countUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-item { animation: countUp 0.6s ease-out forwards; }
.stat-item:nth-child(2) { animation-delay: 0.1s; }
.stat-item:nth-child(3) { animation-delay: 0.2s; }
.stat-item:nth-child(4) { animation-delay: 0.3s; }
</style>
</head>
<body class="bg-white text-gray-800">
<header class="bg-gradient-to-br from-primary to-primary-dark text-white">
<div class="max-w-6xl mx-auto px-4 py-16 md:py-20 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-3 tracking-wide">企业荣誉墙</h1>
<p class="text-xl text-teal-100 mb-2">深圳市飞点健康管理有限公司</p>
<p class="text-teal-200 text-base mb-10">创新驱动 · 专利护城河 · 合规经营 · 权威认可</p>
<div class="flex flex-wrap justify-center gap-6 md:gap-12">
<div class="stat-item text-center">
<div class="text-4xl md:text-5xl font-bold">40</div>
<div class="text-teal-200 text-sm mt-1">资质荣誉</div>
</div>
<div class="stat-item text-center">
<div class="text-4xl md:text-5xl font-bold">15</div>
<div class="text-teal-200 text-sm mt-1">专利证书</div>
</div>
<div class="stat-item text-center">
<div class="text-4xl md:text-5xl font-bold">9</div>
<div class="text-teal-200 text-sm mt-1">荣誉奖项</div>
</div>
<div class="stat-item text-center">
<div class="text-4xl md:text-5xl font-bold">16</div>
<div class="text-teal-200 text-sm mt-1">资质认证</div>
</div>
</div>
</div>
</header>
<nav class="cat-nav">
<div class="max-w-6xl mx-auto px-4 py-3 flex flex-wrap gap-2 justify-center">
<a href="#荣誉奖项" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-primary text-white">🏆 荣誉奖项 (9)</a>
<a href="#发明专利" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">📜 发明专利 (4)</a>
<a href="#实用新型专利" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">🔧 实用新型专利 (5)</a>
<a href="#外观设计专利" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">🎨 外观设计专利 (6)</a>
<a href="#企业资质" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">🏢 企业资质 (3)</a>
<a href="#医疗器械资质" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">⚕️ 医疗器械资质 (6)</a>
<a href="#质量认证" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">✅ 质量认证 (4)</a>
<a href="#其他资质" class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary">📋 其他资质 (3)</a>
</div>
</nav>
<div id="lightbox" class="lightbox-overlay hidden" onclick="closeLightbox()">
<button class="lightbox-close" onclick="closeLightbox()" aria-label="关闭">&times;</button>
<img id="lightbox-img" class="lightbox-img" src="" alt="">
<div id="lightbox-title" class="lightbox-title"></div>
</div>
<section id="荣誉奖项" class="py-16 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">🏆</div>
<h2 class="text-3xl font-bold mb-2">荣誉奖项</h2>
<p class="text-gray-500">政府科技奖、行业大赛奖项、产学研合作成果奖</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
行业奖项
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/中国产学研合作创新与促进奖一等奖.jpg', '中国产学研合作创新与促进奖一等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/中国产学研合作创新与促进奖一等奖.jpg" alt="中国产学研合作创新与促进奖一等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">中国产学研合作创新与促进奖一等奖</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/中国医疗器械创新创业大赛一等奖.jpg', '中国医疗器械创新创业大赛一等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/中国医疗器械创新创业大赛一等奖.jpg" alt="中国医疗器械创新创业大赛一等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">中国医疗器械创新创业大赛一等奖</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/中国医疗器械创新创业大赛二等奖.jpg', '中国医疗器械创新创业大赛二等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/中国医疗器械创新创业大赛二等奖.jpg" alt="中国医疗器械创新创业大赛二等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">中国医疗器械创新创业大赛二等奖</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/中国医疗器械创新创业大赛一等奖_2.jpg', '中国医疗器械创新创业大赛一等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/中国医疗器械创新创业大赛一等奖_2.jpg" alt="中国医疗器械创新创业大赛一等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">中国医疗器械创新创业大赛一等奖</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/松山湖创新创业大赛一等奖.jpg', '松山湖创新创业大赛一等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/松山湖创新创业大赛一等奖.jpg" alt="松山湖创新创业大赛一等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">松山湖创新创业大赛一等奖</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/科创中国第六届创新创业大赛总决赛三等奖.jpg', '科创中国第六届创新创业大赛总决赛三等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/科创中国第六届创新创业大赛总决赛三等奖.jpg" alt="科创中国第六届创新创业大赛总决赛三等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">科创中国第六届创新创业大赛总决赛三等奖</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
政府科技奖
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/深圳市科技进步奖一等奖(社会公益类).jpg', '深圳市科技进步奖一等奖(社会公益类)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/深圳市科技进步奖一等奖(社会公益类).jpg" alt="深圳市科技进步奖一等奖(社会公益类)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">深圳市科技进步奖一等奖(社会公益类)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/深圳市科技进步奖一等奖(社会公益类)_2.jpg', '深圳市科技进步奖一等奖(社会公益类)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/深圳市科技进步奖一等奖(社会公益类)_2.jpg" alt="深圳市科技进步奖一等奖(社会公益类)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">深圳市科技进步奖一等奖(社会公益类)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/自然科学一等奖.jpg', '自然科学一等奖')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/自然科学一等奖.jpg" alt="自然科学一等奖" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">自然科学一等奖</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="发明专利" class="py-16 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">📜</div>
<h2 class="text-3xl font-bold mb-2">发明专利</h2>
<p class="text-gray-500">核心技术发明专利,涵盖AI尿检算法、生物标志物检测等</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
核心算法
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/尿检方法、移动终端及计算机可读存储介质.jpg', '尿检方法、移动终端及计算机可读存储介质')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/尿检方法、移动终端及计算机可读存储介质.jpg" alt="尿检方法、移动终端及计算机可读存储介质" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">尿检方法、移动终端及计算机可读存储介质</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/尿检识别分类器的构造训练方法及装置.jpg', '尿检识别分类器的构造训练方法及装置')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/尿检识别分类器的构造训练方法及装置.jpg" alt="尿检识别分类器的构造训练方法及装置" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">尿检识别分类器的构造训练方法及装置</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
图像识别
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/试纸色块的定位方法及装置.jpg', '试纸色块的定位方法及装置')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/试纸色块的定位方法及装置.jpg" alt="试纸色块的定位方法及装置" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">试纸色块的定位方法及装置</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
生物医药
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/DHFR在检测膀胱癌中的应用.jpg', 'DHFR在检测膀胱癌中的应用')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/DHFR在检测膀胱癌中的应用.jpg" alt="DHFR在检测膀胱癌中的应用" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">DHFR在检测膀胱癌中的应用</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="实用新型专利" class="py-16 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">🔧</div>
<h2 class="text-3xl font-bold mb-2">实用新型专利</h2>
<p class="text-gray-500">检测设备与耗材实用新型专利</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
检测设备
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/一种基于移动终端的便携式尿液检测器.jpg', '一种基于移动终端的便携式尿液检测器')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/一种基于移动终端的便携式尿液检测器.jpg" alt="一种基于移动终端的便携式尿液检测器" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">一种基于移动终端的便携式尿液检测器</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/一种新型尿杯.jpg', '一种新型尿杯')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/一种新型尿杯.jpg" alt="一种新型尿杯" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">一种新型尿杯</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/试纸.jpg', '试纸')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/试纸.jpg" alt="试纸" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">试纸</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/一种家用试管底座.jpg', '一种家用试管底座')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/一种家用试管底座.jpg" alt="一种家用试管底座" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">一种家用试管底座</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/一种尿检套装.jpg', '一种尿检套装')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/一种尿检套装.jpg" alt="一种尿检套装" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">一种尿检套装</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="外观设计专利" class="py-16 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">🎨</div>
<h2 class="text-3xl font-bold mb-2">外观设计专利</h2>
<p class="text-gray-500">产品及用户界面外观设计专利</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
产品外观
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/尿液分析传感器.jpg', '尿液分析传感器')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/尿液分析传感器.jpg" alt="尿液分析传感器" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">尿液分析传感器</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/试纸(早孕检测).jpg', '试纸(早孕检测)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/试纸(早孕检测).jpg" alt="试纸(早孕检测)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">试纸(早孕检测)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/尿检试纸包装盒.jpg', '尿检试纸包装盒')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/尿检试纸包装盒.jpg" alt="尿检试纸包装盒" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">尿检试纸包装盒</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/用于手机的图形用户界面.jpg', '用于手机的图形用户界面')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/用于手机的图形用户界面.jpg" alt="用于手机的图形用户界面" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">用于手机的图形用户界面</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/试纸(新型).jpg', '试纸(新型)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/试纸(新型).jpg" alt="试纸(新型)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">试纸(新型)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/尿杯.jpg', '尿杯')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/尿杯.jpg" alt="尿杯" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">尿杯</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="企业资质" class="py-16 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">🏢</div>
<h2 class="text-3xl font-bold mb-2">企业资质</h2>
<p class="text-gray-500">高新技术企业、专精特新、创新型中小企业认定</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
专精特新
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/专精特新中小企业.png', '专精特新中小企业')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/专精特新中小企业.png" alt="专精特新中小企业" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">专精特新中小企业</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
创新型中小企业
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/创新型中小企业.png', '创新型中小企业')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/创新型中小企业.png" alt="创新型中小企业" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">创新型中小企业</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
高新技术企业
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/国家高新技术企业证书.jpg', '国家高新技术企业证书')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/国家高新技术企业证书.jpg" alt="国家高新技术企业证书" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">国家高新技术企业证书</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="医疗器械资质" class="py-16 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">⚕️</div>
<h2 class="text-3xl font-bold mb-2">医疗器械资质</h2>
<p class="text-gray-500">医疗器械生产、注册、经营全流程合规资质</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
生产许可
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/医疗器械生产许可证.jpg', '医疗器械生产许可证')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/医疗器械生产许可证.jpg" alt="医疗器械生产许可证" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">医疗器械生产许可证</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
产品注册
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/第二类医疗器械注册证(含变更备案).jpg', '第二类医疗器械注册证(含变更备案)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/第二类医疗器械注册证(含变更备案).jpg" alt="第二类医疗器械注册证(含变更备案)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">第二类医疗器械注册证(含变更备案)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/第二类医疗器械注册证(含变更备案)_2.jpg', '第二类医疗器械注册证(含变更备案)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/第二类医疗器械注册证(含变更备案)_2.jpg" alt="第二类医疗器械注册证(含变更备案)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">第二类医疗器械注册证(含变更备案)</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
经营资质
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/医疗器械网络销售备案变更.jpg', '医疗器械网络销售备案变更')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/医疗器械网络销售备案变更.jpg" alt="医疗器械网络销售备案变更" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">医疗器械网络销售备案变更</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/第二类医疗器械经营备案凭证.jpg', '第二类医疗器械经营备案凭证')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/第二类医疗器械经营备案凭证.jpg" alt="第二类医疗器械经营备案凭证" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">第二类医疗器械经营备案凭证</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/第二类医疗器械经营备案凭证202604更新-飞点健康_扫描版.jpg', '第二类医疗器械经营备案凭证')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/第二类医疗器械经营备案凭证202604更新-飞点健康_扫描版.jpg" alt="第二类医疗器械经营备案凭证" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">第二类医疗器械经营备案凭证</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="质量认证" class="py-16 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">✅</div>
<h2 class="text-3xl font-bold mb-2">质量认证</h2>
<p class="text-gray-500">质量管理体系与知识产权管理体系认证</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
质量管理体系
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/质量管理体系认证证书(中文).jpg', '质量管理体系认证证书(中文)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/质量管理体系认证证书(中文).jpg" alt="质量管理体系认证证书(中文)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">质量管理体系认证证书(中文)</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/质量管理体系认证证书(英文).jpg', '质量管理体系认证证书(英文)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/质量管理体系认证证书(英文).jpg" alt="质量管理体系认证证书(英文)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">质量管理体系认证证书(英文)</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
知识产权管理
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/知识产权管理体系认证证书.jpg', '知识产权管理体系认证证书')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/知识产权管理体系认证证书.jpg" alt="知识产权管理体系认证证书" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">知识产权管理体系认证证书</p>
</div>
</div>
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/知识产权管理体系认证证书(英文).jpg', '知识产权管理体系认证证书(英文)')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/知识产权管理体系认证证书(英文).jpg" alt="知识产权管理体系认证证书(英文)" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">知识产权管理体系认证证书(英文)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="其他资质" class="py-16 px-4 bg-gray-50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<div class="text-4xl mb-3">📋</div>
<h2 class="text-3xl font-bold mb-2">其他资质</h2>
<p class="text-gray-500">互联网药品信息服务、食品经营备案等</p>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
互联网资质
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/互联网药品信息服务资格证书.jpg', '互联网药品信息服务资格证书')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/互联网药品信息服务资格证书.jpg" alt="互联网药品信息服务资格证书" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">互联网药品信息服务资格证书</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
食品经营
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/仅销售预包装食品备案凭证.jpg', '仅销售预包装食品备案凭证')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/仅销售预包装食品备案凭证.jpg" alt="仅销售预包装食品备案凭证" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">仅销售预包装食品备案凭证</p>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
经营场所
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
<div class="honor-card bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden" onclick="openLightbox('honor_images/创新谷场地使用证明.jpg', '创新谷场地使用证明')">
<div class="thumb-wrapper aspect-[3/4]">
<img data-src="honor_images/thumbnails/创新谷场地使用证明.jpg" alt="创新谷场地使用证明" class="lazy-img w-full h-full object-contain p-2">
</div>
<div class="p-3 border-t border-gray-50">
<p class="text-sm font-medium text-gray-700 leading-snug line-clamp-2">创新谷场地使用证明</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 px-4 bg-gradient-to-r from-primary to-primary-dark text-white text-center">
<h2 class="text-3xl font-bold mb-4">创新为本,资质为盾</h2>
<p class="text-teal-100 text-lg mb-2">
累计拥有 <strong>15 项专利</strong>,涵盖 AI 尿检算法、生物标志物检测、产品外观设计等领域
</p>
<p class="text-teal-200">
取得医疗器械全流程合规资质,荣获多项政府科技奖与行业权威认可
</p>
</section>
<footer class="bg-gray-800 text-gray-400 py-8 text-center text-sm">
<p>&copy; 2026 深圳市飞点健康管理有限公司 版权所有</p>
<p class="mt-1">网站:<a href="https://niaodaifu.com" class="text-teal-400 hover:underline">niaodaifu.com</a></p>
</footer>
<script>
(function() {
// Lazy loading
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
var src = img.getAttribute('data-src');
if (src) {
img.src = src;
img.addEventListener('load', function() {
img.classList.add('loaded');
}, { once: true });
img.removeAttribute('data-src');
observer.unobserve(img);
}
}
});
}, { rootMargin: '200px', threshold: 0.01 });
document.querySelectorAll('.lazy-img').forEach(function(img) {
observer.observe(img);
});
// Lightbox
window.openLightbox = function(src, title) {
document.getElementById('lightbox-img').src = src;
document.getElementById('lightbox-title').textContent = title;
document.getElementById('lightbox').classList.remove('hidden');
document.body.style.overflow = 'hidden';
};
window.closeLightbox = function() {
document.getElementById('lightbox').classList.add('hidden');
document.body.style.overflow = '';
setTimeout(function() {
document.getElementById('lightbox-img').src = '';
}, 200);
};
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeLightbox();
});
// Active nav on scroll
var sections = document.querySelectorAll('section[id]');
var navLinks = document.querySelectorAll('.cat-nav a');
window.addEventListener('scroll', function() {
var current = '';
sections.forEach(function(s) {
if (window.scrollY >= s.offsetTop - 100) current = s.getAttribute('id');
});
navLinks.forEach(function(link) {
link.classList.remove('bg-primary', 'text-white');
link.classList.add('bg-gray-100', 'text-gray-600');
if (link.getAttribute('href') === '#' + current) {
link.classList.remove('bg-gray-100', 'text-gray-600');
link.classList.add('bg-primary', 'text-white');
}
});
});
})();
</script>
</body>
</html>