PageSourceSearch

https://ycaviation.com/

html ycaviation.com collected 2026-10-01 13:03:31 UTC 61,601 bytes, 1,346 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-CN">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>玉成创新 - 智能穿戴设备领导者</title>
8    <link rel="icon" href="./images/yc.png" type="image/x-icon">
9    <link rel="shortcut icon" href="./images/yccx.png" type="image/x-icon"> <!-- 兼容旧浏览器 -->
10    
10<script src="https://cdn.tailwindcss.com"></script>
10
11    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
12    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13    <style>
14        body {
15            background-color: #0F172A;
16            color: #F1F5F9;
17            font-family: 'Inter', sans-serif;
18        }
19
20        .gradient-text {
21            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
22            -webkit-background-clip: text;
23            background-clip: text;
24            color: transparent;
25        }
26
27        .gradient-bg {
28            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
29        }
30
31        /* 导航栏样式 */
32        .nav-container {
33            max-width: 7xl;
34            margin: 0 auto;
35        }
36
37        .nav-wrapper {
38            background-color: rgba(255, 255, 255, 0.1);
39            backdrop-filter: blur(10px);
40            border-radius: 15px;
41            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
42                0 4px 10px rgba(0, 0, 0, 0.05);
43            border: 1px solid rgba(255, 255, 255, 0.2);
44            padding: 0 1rem;
45        }
46
47        .nav-link {
48            color: rgba(255, 255, 255, 0.8);
49            transition: all 0.3s ease;
50            padding: 0.5rem 1rem;
51            border-radius: 8px;
52        }
53
54        .nav-button {
55            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
56            color: white;
57            padding: 0.5rem 1.5rem;
58            border-radius: 8px;
59            font-weight: 500;
60            transition: all 0.3s ease;
61        }
62
63        .nav-button:hover {
64            transform: translateY(-2px);
65            box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
66        }
67
68        .nav-wrapper:hover {
69            border: 1px solid rgba(56, 189, 248, 0.4);
70            box-shadow: 0 12px 35px rgba(56, 189, 248, 0.15);
71        }
72
73        .nav-link {
74            color: rgba(255, 255, 255, 0.8);
75            transition: all 0.3s ease;
76            padding: 0.5rem 1rem;
77            border-radius: 8px;
78            position: relative;
79        }
80
81        .nav-link::after {
82            content: '';
83            position: absolute;
84            bottom: 0;
85            left: 50%;
86            width: 0;
87            height: 2px;
88            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
89            transform: translateX(-50%);
90            transition: width 0.3s ease;
91        }
92
93        .nav-link:hover::after,
94        .nav-link.active::after {
95            width: 80%;
96        }
97
98        .nav-link:hover,
99        .nav-link.active {
100            color: #fff;
101            background-color: rgba(255, 255, 255, 0.1);
102        }
103
104        .nav-button {
105            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
106            color: white;
107            padding: 0.5rem 1.5rem;
108            border-radius: 8px;
109            font-weight: 500;
110            transition: all 0.3s ease;
111            position: relative;
112            z-index: 1;
113            overflow: hidden;
114        }
115
116        .nav-button::before {
117            content: '';
118            position: absolute;
119            top: 0;
120            left: -100%;
121            width: 100%;
122            height: 100%;
123            background: linear-gradient(90deg, #8B5CF6, #38BDF8);
124            transition: left 0.4s ease;
125            z-index: -1;
126        }
127
128        .nav-button:hover::before {
129            left: 0;
130        }
131
132        .nav-button:hover {
133            transform: translateY(-2px);
134            box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
135        }
136
137        .feature-card {
138            background: rgba(30, 41, 59, 0.5);
139            border-radius: 16px;
140            backdrop-filter: blur(5px);
141            border: 1px solid rgba(56, 189, 248, 0.3);
142            transition: all 0.3s ease;
143        }
144
145        .feature-card:hover {
146            transform: translateY(-5px);
147            box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2);
148            border: 1px solid rgba(56, 189, 248, 0.6);
149        }
150
151        .hero-image {
152            height: 400px;
153            width: auto;
154            animation: float 3s ease-in-out infinite;
155        }
156
157        @keyframes float {
158            0% {
159                transform: translateY(0px);
160            }
161
162            50% {
163                transform: translateY(-15px);
164            }
165
166            100% {
167                transform: translateY(0px);
168            }
169        }
170
171        @media (min-width: 1024px) {
172            .lg\:px-8 {
173                padding-left: 0;
174                padding-right: 0;
175            }
176        }
177
178        /* SDK接入区块样式 */
179        .sdk-container {
180            max-width: 900px;
181            margin: 0 auto;
182            border: 1px solid #20506f;
183        }
184
185        .platform-tab.active {
186            background-color: #13283f;
187            position: relative;
188            color: white;
189        }
190
191        .platform-tab {
192            background-color: #0f172a;
193            color: #839aaf;
194        }
195
196        .platform-tab.active::after {
197            content: '';
198            position: absolute;
199            bottom: 0;
200            left: 0;
201            width: 100%;
202            height: 3px;
203            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
204        }
205
206        .platform-tab:hover {
207            background-color: #13283f;
208            color: white;
209            position: relative;
210        }
211
212        .platform-tab:hover::after {
213            content: '';
214            position: absolute;
215            bottom: 0;
216            left: 0;
217            width: 100%;
218            height: 3px;
219            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
220        }
221
222        .code-block {
223            white-space: pre-wrap;
224            text-align: left;
225            font-family: 'Courier New', monospace;
226            background-color: rgba(30, 41, 59, 0.8);
227            padding: 1rem;
228            border-radius: 0.5rem;
229            width: 100%;
230            max-width: 800px;
231        }
232
233        /* 用户评价 */
234        .evaluate {
235            display: -webkit-box;
236            line-clamp: 3;
237            -webkit-line-clamp: 3;
238            -webkit-box-orient: vertical;
239            overflow: hidden;
240            text-overflow: ellipsis;
241        }
242
243        /* 视频播放器样式 */
244        .video-container {
245            position: relative;
246            display: inline-block;
247        }
248
249        .play-button {
250            position: absolute;
251            top: 50%;
252            left: 50%;
253            transform: translate(-50%, -50%);
254            width: 80px;
255            height: 80px;
256            background: linear-gradient(135deg, #38BDF8, #8B5CF6);
257            border-radius: 50%;
258            display: flex;
259            align-items: center;
260            justify-content: center;
261            cursor: pointer;
262            transition: all 0.3s ease;
263            z-index: 10;
264            backdrop-filter: blur(10px);
265            border: 2px solid rgba(255, 255, 255, 0.3);
266            box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
267        }
268
269        .play-button:hover {
270            background: linear-gradient(135deg, #0EA5E9, #7C3AED);
271            transform: translate(-50%, -50%) scale(1.1);
272            box-shadow: 0 8px 25px rgba(56, 189, 248, 0.5);
273        }
274
275        .play-button i {
276            color: white;
277            font-size: 28px;
278            margin-left: 4px;
279            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
280        }
281
282        /* 悬浮层样式 */
283        .video-overlay {
284            position: fixed;
285            top: 0;
286            left: 0;
287            width: 100%;
288            height: 100%;
289            background: rgba(0, 0, 0, 0.9);
290            z-index: 1000;
291            display: none;
292            align-items: center;
293            justify-content: center;
294            backdrop-filter: blur(5px);
295        }
296
297        .video-modal {
298            position: relative;
299            width: 75%;
300            height: 75%;
301            max-width: 1200px;
302            max-height: 800px;
303            background: #000;
304            border-radius: 12px;
305            overflow: hidden;
306            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
307        }
308
309        .video-modal video {
310            width: 100%;
311            height: 100%;
312            object-fit: contain;
313        }
314
315        .video-controls {
316            position: absolute;
317            top: 20px;
318            right: 20px;
319            display: flex;
320            gap: 15px;
321            z-index: 1001;
322        }
323
324        .control-btn {
325            width: 45px;
326            height: 45px;
327            background: linear-gradient(135deg, #38BDF8, #8B5CF6);
328            border: none;
329            border-radius: 50%;
330            color: white;
331            cursor: pointer;
332            display: flex;
333            align-items: center;
334            justify-content: center;
335            transition: all 0.3s ease;
336            backdrop-filter: blur(10px);
337            box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
338            border: 2px solid rgba(255, 255, 255, 0.2);
339        }
340
341        .control-btn:hover {
342            background: linear-gradient(135deg, #0EA5E9, #7C3AED);
343            transform: scale(1.1);
344            box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
345        }
346
347        .control-btn i {
348            font-size: 16px;
349            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
350        }
351
352        /* 响应式设计 */
353        @media (max-width: 768px) {
354            .video-modal {
355                width: 90%;
356                height: 60%;
357            }
358
359            .play-button {
360                width: 60px;
361                height: 60px;
362            }
363
364            .play-button i {
365                font-size: 20px;
366            }
367
368            .control-btn {
369                width: 40px;
370                height: 40px;
371            }
372
373            .video-controls {
374                top: 15px;
375                right: 15px;
376                gap: 10px;
377            }
378        }
379
380        /* 产品选项卡样式 */
381        .product-tab {
382            position: relative;
383            width: 68px;
384            height: 68px;
385            border-radius: 12px;
386            overflow: hidden;
387            cursor: pointer;
388            transition: all 0.3s ease;
389            border: 2px solid rgba(56, 189, 248, 0.2);
390            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
391        }
392
393        .product-tab.active {
394            border: 2px solid rgba(56, 189, 248, 0.8);
395            box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3);
396            transform: translateY(-5px);
397        }
398
399        .product-tab::after {
400            content: '';
401            position: absolute;
402            bottom: 0;
403            left: 0;
404            width: 100%;
405            height: 4px;
406            background: linear-gradient(90deg, #38BDF8, #8B5CF6);
407            transform: scaleX(0);
408            transition: transform 0.3s ease;
409            transform-origin: center;
410        }
411
412        .product-tab.active::after {
413            transform: scaleX(1);
414        }
415
416        .product-tab:hover {
417            border-color: rgba(56, 189, 248, 0.5);
418            transform: translateY(-3px);
419        }
420
421        .product-tab:hover::after {
422            transform: scaleX(0.7);
423        }
424
425        .product-tab img {
426            width: 100%;
427            height: 100%;
428            object-fit: cover;
429            transition: all 0.3s ease;
430        }
431
432        .product-tab.active img {
433            filter: brightness(1.1);
434        }
435
436        /* 产品视频容器 */
437        .product-video-container {
438            transition: opacity 0.5s ease, transform 0.5s ease;
439            transform: translateY(20px);
440            opacity: 0;
441            display: none;
442            text-align: center;
443        }
444
445        .product-video-container.active {
446            transform: translateY(0);
447            opacity: 1;
448            display: block;
449        }
450    </style>
451</head>
452
453<body>
454    <!-- 导航栏 -->
455    <div class="fixed w-full z-30 top-4">
456        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
457            <div class="nav-wrapper">
458                <div class="flex justify-between items-center h-16 px-0">
459                    <div class="flex items-center">
460                        <a href="./home.html" class="flex-shrink-0 flex items-center">
461                            <img src="./images/yccx.png" alt="玉成创新" class="w-24 h-1w-24 ml-2 mt-2">
462                        </a>
463                    </div>
464                    <div class="hidden md:flex items-center space-x-1">
465                        <a href="./home.html" class="nav-link active font-medium">首页</a>
466                        <a href="./products.html" class="nav-link">产品</a>
467                        <a href="./sdk.html" class="nav-link">SDK</a>
468                        <a href="./hire.html" class="nav-link">招聘</a>
469                        <a href="./about.html" class="nav-link">关于我们</a>
470                        <a href="./app.html" class="nav-button ml-4">APP下载</a>
471                    </div>
472                    <div class="md:hidden flex items-center">
473                        <button id="mobile-menu-btn" class="text-white hover:text-gray-300">
474                            <i class="fas fa-bars text-xl"></i>
475                        </button>
476                    </div>
477                </div>
478                <!-- 移动端菜单 -->
479                <div id="mobile-menu" class="md:hidden hidden py-2">
480                    <div class="flex flex-col space-y-2 px-4 pb-3 pt-2">
481                        <a href="./home.html" class="nav-link active font-medium py-2">首页</a>
482                        <a href="./products.html" class="nav-link py-2">产品</a>
483                        <a href="./sdk.html" class="nav-link py-2">SDK</a>
484                        <a href="./hire.html" class="nav-link py-2">招聘</a>
485                        <a href="./about.html" class="nav-link py-2">关于我们</a>
486                        <a href="./app.html"
487                            class="gradient-bg text-white py-2 px-4 rounded-lg text-center font-medium mt
487-2">APP下载</a>
488                    </div>
489                </div>
490            </div>
491        </div>
492    </div>
493
494    <!-- 视频区 -->
495    <section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8">
496        <div class="max-w-7xl mx-auto">
497            <div class="grid md:grid-cols-2 gap-12 items-center">
498                <div class="space-y-8">
499                    <div>
500                        <h1 class="text-4xl sm:text-5xl font-bold leading-tight mb-8">
501                            <span class="gradient-text">匠心凝于板</span>,
502                            <span class="text-white">创新永不停</span>
503                        </h1>
504                        <h1 class="text-4xl sm:text-5xl font-bold leading-tight">
505                            <span class="gradient-text">智能穿戴</span>,
506                            <span class="text-white">改变生活</span>
507                        </h1>
508                    </div>
509                    <p id="product-slogan" class="mt-4 text-xl text-gray-300">高度集成的智能硬件核心,定制化解决方案,为您的产品赋能。</p>
510                    <div class="flex flex-wrap gap-4">
511                        <button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium text-lg">
512                            <a href="./products.html">了解产品 <i class="fas fa-arrow-right ml-2"></i></a>
513                        </button>
514                        <button id="play-button"
515                            class="bg-white bg-opacity-10 text-white border border-blue-400/30 px-6 py-3 rounded-lg font-medium text-lg">
516                            观看视频 <i class="fas fa-play ml-2"></i>
517                        </button>
518                    </div>
519
520                    <!-- 产品切换选项卡 -->
521                    <div class="flex mt-8 space-x-4">
522                        <div class="product-tab active" data-product="pcb">
523                            <img src="./images/product/S26-pcb_1.png" alt="PCB板"
524                                class="w-16 h-16 rounded-lg object-cover">
525                            <span
526                                class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg opacity-0 transition-opacity"></span>
527                        </div>
528                        <div class="product-tab" data-product="watch">
529                            <img src="./images/product/watch.png" alt="智能手表" class="w-16 h-16 rounded-lg object-cover">
530                            <span
531                                class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg opacity-0 transition-opacity"></span>
532                        </div>
533                        <div class="product-tab" data-product="ring">
534                            <img src="./images/product/ring.png" alt="智能戒指" class="w-16 h-16 rounded-lg object-cover">
535                            <span
536                                class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg opacity-0 transition-opacity"></span>
537                        </div>
538                    </div>
539
540                </div>
541                <div class="relative">
542                    <div class="absolute inset-0 bg-blue-500 rounded-full opacity-10 blur-3xl"></div>
543                    <!-- 产品视频容器 -->
544                    <div id="product-pcb" class="product-video-container active">
545                        <h3 id="product-title-pcb" class="text-2xl font-bold text-center mb-4 text-white">PCB智能板</h3>
546                        <div class="video-container">
547                            <video id="hero-video-pcb"
548                                class="hero-image relative z-[2] mx-auto rounded-2xl shadow-2xl cursor-pointer"
549                                preload="metadata" muted poster="./images/product/S26-pcb_1.png">
550                                <source src="./images/video/pcb.mp4" type="video/mp4">
551                                你的浏览器不支持播放此视频。
552                            </video>
553                            <div class="play-button" data-video="pcb">
554                                <i class="fas fa-play"></i>
555                            </div>
556                        </div>
557                    </div>
558
559                    <div id="product-watch" class="product-video-container hidden">
560                        <h3 id="product-title-watch" class="text-2xl font-bold text-center mb-4 text-white">S26 气泵血压智能手表
561                        </h3>
562                        <div class="video-container">
563                            <video id="hero-video-watch"
564                                class="hero-image relative z-[2] mx-auto rounded-2xl shadow-2xl cursor-pointer"
565                                preload="metadata" muted poster="./images/product/watch.png">
566                                <source src="./images/video/TK65.mp4" type="video/mp4">
567                                你的浏览器不支持播放此视频。
568                            </video>
569                            <div class="play-button" data-video="watch">
570                                <i class="fas fa-play"></i>
571                            </div>
572                        </div>
573                    </div>
574
575                    <div id="product-ring" class="product-video-container hidden">
576                        <h3 id="product-title-ring" class="text-2xl font-bold text-center mb-4 text-white">R11M 智能戒指
577                        </h3>
578                        <div class="video-container">
579                            <video id="hero-video-ring"
580                                class="hero-image relative z-[2] mx-auto rounded-2xl shadow-2xl cursor-pointer"
581                                preload="metadata" muted poster="./images/product/ring.png">
582                                <source src="./images/video/ring.mp4" type="video/mp4">
583                                你的浏览器不支持播放此视频。
584                            </video>
585                            <div class="play-button" data-video="ring">
586                                <i class="fas fa-play"></i>
587                            </div>
588                        </div>
589                    </div>
590
591                </div>
592            </div>
593        </div>
594    </section>
595
596    <!-- 产品特点 -->
597    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900/50">
598        <div class="max-w-7xl mx-auto">
599            <div class="text-center mb-12">
600                <h2 class="text-3xl font-bold mb-4">先进科技,<span class="gradient-text">智能体验</span></h2>
601                <p class="text-gray-400 max-w-2xl mx-auto">我们的穿戴设备集成了最先进的技术,为您提供全方位的健康监测和智能辅助功能</p>
602            </div>
603            <div class="grid md:grid-cols-3 gap-8">
604                <div class="feature-card p-6">
605                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
606                        <i class="fas fa-heartbeat text-white text-xl"></i>
607                    </div>
608                    <h3 class="text-xl font-semibold mb-2">24小时健康监测</h3>
609                    <p class="text-gray-400">全天候监测心率、血氧、睡眠质量及压力水平,为您的健康保驾护航。</p>
610                </div>
611                <div class="feature-card p-6">
612                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
613                        <i class="fas fa-running text-white text-xl"></i>
614                    </div>
615                    <h3 class="text-xl font-semibold mb-2">多种运动模式</h3>
616                    <p class="text-gray-400">支持50+种运动模式,精确记录各项运动数据,科学指导您的运动计划。</p>
617                </div>
618                <div class="feature-card p-6">
619                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
620                        <i class="fas fa-mobile-alt text-white text-xl"></i>
621                    </div>
622                    <h3 class="text-xl font-semibold mb-2">智能通知</h3>
623                    <p class="text-gray-400">实时接收手机通知,轻松管理日程安排,让您不错过任何重要信息。</p>
624                </div>
625                <div class="feature-card p-6">
626                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
627                        <i class="fas fa-tint text-white text-xl"></i>
628                    </div>
629                    <h3 class="text-xl font-semibold mb-2">防水设计</h3>
630                    <p class="text-gray-400">IP68级防水,游泳、冲浪等水上活动无需取下,全天候伴随您。</p>
631                </div>
632                <div class="feature-card p-6">
633                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
634                        <i class="fas fa-battery-full text-white text-xl"></i>
635                    </div>
636                    <h3 class="text-xl font-semibold mb-2">超长续航</h3>
637                    <p class="text-gray-400">单次充电可使用7天+,支持长续航,为您的生活保驾护航。</p>
638                </div>
639                <div class="feature-card p-6">
640                    <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
641                        <i class="fas fa-cog text-white text-xl"></i>
642                    </div>
643                    <h3 class="text-xl font-semibold mb-2">可定制界面</h3>
644                    <p class="text-gray-400">丰富的表盘库,支持自定义显示内容和样式,满足您的个性化需求ã€
644‚</p>
645                </div>
646            </div>
647        </div>
648    </section>
649
650    <!-- 产品展示 -->
651    <section class="py-16 px-4 sm:px-6 lg:px-8">
652        <div class="max-w-7xl mx-auto">
653            <div class="text-center mb-12">
654                <h2 class="text-3xl font-bold mb-4">我们的<span class="gradient-text">明星产品</span></h2>
655                <p class="text-gray-400 max-w-2xl mx-auto">精心设计的智能穿戴设备系列,满足您的各种需求</p>
656            </div>
657            <div class="grid md:grid-cols-2 gap-12">
658                <div
659                    class="bg-gray-800/50 p-6 rounded-2xl border border-blue-500/20 hover:border-blue-500/40 transition">
660                    <div class="relative mb-6">
661                        <div
662                            class="absolute top-4 left-4 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
663                            热销</div>
664                        <img src="./images/product/S26_1.png" alt="S26" class="w-full h-80 object-cover rounded-xl">
665                    </div>
666                    <h3 class="text-2xl font-bold mb-2">S26</h3>
667                    <p class="text-gray-400 mb-4">气泵+气囊式真血压精准测试,1.43英寸AMOLED视网膜触摸屏,心电纳米玻璃,血压语音播报,蓝牙通话。</p>
668                    <div class="flex items-center justify-between">
669                        <span class="text-2xl font-bold text-white"></span>
670                        <a href="./product-detail.html?product=S26&type=watch"
671                            class="gradient-bg text-white px-4 py-2 rounded-lg font-medium">查看详情</a>
672                    </div>
673                </div>
674                <div
675                    class="bg-gray-800/50 p-6 rounded-2xl border border-blue-500/20 hover:border-blue-500/40 transition">
676                    <div class="relative mb-6">
677                        <div
678                            class="absolute top-4 left-4 bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium">
679                            新品</div>
680                        <img src="./images/product/R11M.png" alt="R11M" class="w-full h-80 object-cover rounded-xl">
681                    </div>
682                    <h3 class="text-2xl font-bold mb-2">R11M</h3>
683                    <p class="text-gray-400 mb-4">采用抗菌奥氏体不锈钢外壳,环保透明氧化树脂外壳</p>
684                    <div class="flex items-center justify-between">
685                        <span class="text-2xl font-bold text-white"></span>
686                        <a href="./product-detail.html?product=R11M&type=ring"
687                            class="gradient-bg text-white px-4 py-2 rounded-lg font-medium">查看详情</a>
688                    </div>
689                </div>
690            </div>
691            <div class="text-center mt-10">
692                <a href="products.html"
693                    class="inline-flex items-center text-blue-400 hover:text-blue-300 text-lg font-medium">
694                    查看全部产品
695                    <i class="fas fa-arrow-right ml-2"></i>
696                </a>
697            </div>
698        </div>
699    </section>
700
701    <!-- SDK接入 -->
702    <section class="py-16 px-4 sm:px-6 lg:px-8">
703        <div class="max-w-7xl mx-auto">
704            <div class="text-center mb-12">
705                <h2 class="text-3xl font-bold mb-4">SDK<span class="gradient-text">接入指南</span></h2>
706                <p class="text-gray-400 max-w-2xl mx-auto">多平台支持,简单集成,助力您的应用快速获取健康数据能力</p>
707            </div>
708
709            <div class="sdk-container bg-gray-800/50 rounded-lg overflow-hidden border shadow-lg">
710                <!-- 平台选项卡 -->
711                <div class="platform-tabs flex flex-wrap">
712                    <button data-platform="ios"
713                        class="platform-tab py-3 px-3 sm:px-6 text-sm sm:text-base focus:outline-none transition-all duration-300 active">ios</button>
714                    <button data-platform="android"
715                        class="platform-tab py-3 px-3 sm:px-6 text-sm sm:text-base focus:outline-none transition-all duration-300">android</button>
716                    <button data-platform="miniapp"
717                        class="platform-tab py-3 px-3 sm:px-6 text-sm sm:text-base focus:outline-none transition-all duration-300">小程序</button>
718                    <button data-platform="flutter"
719                        class="platform-tab py-3 px-3 sm:px-6 text-sm sm:text-base focus:outline-none transition-all duration-300">flutter</button>
720                    <!-- <button data-platform="uniapp"
721                        class="platform-tab py-3 px-3 sm:px-6 text-sm sm:text-base focus:outline-none transition-all duration-300">uniApp</button> -->
722                </div>
723
724                <!-- 分隔线 -->
725
726                <!-- 代码区域 -->
727                <div class="code-container bg-gray-700/50 p-4 sm:p-10 min-h-[200px] flex items-center overflow-x-auto">
728                    <pre class="code-block text-gray-200 text-sm sm:text-lg font-mono">代码片段</pre>
729                </div>
730
731                <!-- 描述区域 -->
732                <div class="description-container bg-gray-800/30 p-4 text-center text-gray-300">
733                    <p>描述信息</p>
734                </div>
735
736                <!-- 按钮 -->
737                <div class="flex justify-center pb-6 pt-4">
738                    <button id="sdkButton"
739                        class="action-button bg-green-600 text-white py-2 px-6 rounded-lg hover:bg-green-700 transition-all duration-300 font-medium">立即接入</button>
740                </div>
741            </div>
742        </div>
743    </section>
744
745    <!-- 用户数据 -->
746    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900/50">
747        <div class="max-w-7xl mx-auto">
748            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
749                <div>
750                    <div class="text-4xl font-bold mb-2 gradient-text">5M+</div>
751                    <p class="text-gray-400">全球用户</p>
752                </div>
753                <div>
754                    <div class="text-4xl font-bold mb-2 gradient-text">98%</div>
755                    <p class="text-gray-400">客户满意度</p>
756                </div>
757                <div>
758                    <div class="text-4xl font-bold mb-2 gradient-text">24/7</div>
759                    <p class="text-gray-400">健康监测</p>
760                </div>
761                <div>
762                    <div class="text-4xl font-bold mb-2 gradient-text">50+</div>
763                    <p class="text-gray-400">运动模式</p>
764                </div>
765            </div>
766        </div>
767    </section>
768
769    <!-- 用户评价 -->
770    <section class="py-16 px-4 sm:px-6 lg:px-8">
771        <div class="max-w-7xl mx-auto">
772            <div class="text-center mb-12">
773                <h2 class="text-3xl font-bold mb-4">用户的<span class="gradient-text">真实评价</span></h2>
774                <p class="text-gray-400 max-w-2xl mx-auto">听听我们的用户怎么说</p>
775            </div>
776            <div class="grid md:grid-cols-3 gap-8">
777                <div class="bg-gray-800/30 p-6 rounded-2xl border border-blue-500/20">
778                    <div class="flex items-center mb-4">
779                        <div class="text-yellow-400">
780                            <i class="fas fa-star"></i>
781                            <i class="fas fa-star"></i>
782                            <i class="fas fa-star"></i>
783                            <i class="fas fa-star"></i>
784                            <i class="fas fa-star"></i>
785                        </div>
786                        <span class="ml-2 text-gray-300">5.0</span>
787                    </div>
788                    <p class="evaluate text-gray-300 h-19 mb-6 overflow-hidden text-ellipsis whitespace-pre-wrap"
789                        style="height: 70px;">智能手表Pro超出了我的预期!电池续航非常惊人,一周充电一次就够了,而且健康监测功能非常全面。</p>
790                    <div class="flex items-center">
791                        <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
792                            alt="用户头像" class="w-12 h-12 rounded-full mr-4">
793                        <div>
794                            <h4 class="font-medium">Zane</h4>
795                            <p class="text-gray-500 text-sm">S26用户</p>
796                        </div>
797                    </div>
798                </div>
799                <div class="bg-gray-800/30 p-6 rounded-2xl border border-blue-500/20">
800                    <div class="flex items-center mb-4">
801                        <div class="text-yellow-400">
802                            <i class="fas fa-star"></i>
803                            <i class="fas fa-star"></i>
804                            <i class="fas fa-star"></i>
805                            <i class="fas fa-star"></i>
806                            <i class="fas fa-star"></i>
807                        </div>
808                        <span class="ml-2 text-gray-300">5.0</span>
809                    </div>
810                    <p class="evaluate text-gray-300 h-19 mb-6 overflow-hidden text-ellipsis whitespace-pre-wrap"
811                        style="height: 70px;">作为一个健身爱好者,这款智能戒指Mini完美满足了我对健康数据监测的需求,而且佩戴非常舒适。</p>
812                    <div class="flex items-center">
813                        <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
814                            alt="用户头像" class="w-12 h-12 rounded-full mr-4">
815                        <div>
816                            <h4 class="font-medium">Lyra</h4>
817                            <p class="text-gray-500 text-sm">R11M用户</p>
818                        </div>
819                    </div>
820                </div>
821                <div class="bg-gray-800/30 p-6 rounded-2xl border border-blue-500/20">
822                    <div class="flex items-center mb-4">
823                        <div class="text-yellow-400">
824                            <i class="fas fa-star"></i>
825                            <i class="fas fa-star"></i>
826                            <i class="fas fa-star"></i>
827                            <i class="fas fa-star"></i>
828                            <i class="fas fa-star-half-alt"></i>
829                        </div>
830                        <span class="ml-2 text-gray-300">4.5</span>
831                    </div>
832                    <p class="evaluate text-gray-300 h-19 mb-6 overflow-hidden text-ellipsis whitespace-pre-wrap"
833                        style="height: 70px;">玉成创新的APP设计简洁易用,数据同步迅速,分析也很专业。手表防水性能很赞,游泳时可以放心使用。</p>
834                    <div class="flex items-center">
835                        <img src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80"
836                            alt="用户头像" class="w-12 h-12 rounded-full mr-4">
837                        <div>
838                            <h4 class="font-medium">Orin</h4>
839                            <p class="text-gray-500 text-sm">ET310用户</p>
840                        </div>
841                    </div>
842                </div>
843            </div>
844        </div>
845    </section>
846
847    <!-- APP下载推广区域 -->
848    <section class="py-16 px-4 sm:px-6 lg:px-8">
849        <div class="max-w-7xl mx-auto bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl overflow-hidden">
850            <div class="grid md:grid-cols-2 items-center p-8 md:p-12">
851                <div style="width: 115%;">
852                    <h2 class="text-3xl font-bold text-white mb-4">下载我们的APP<br>获取更全面的健康管理</h2>
853                    <p class="text-blue-100 mb-6">我们提供两款专业APP,满足您不同的健康管理需求:</p>
854
855                    <div class="space-y-4 mb-6">
856                        <div class="flex flex-col sm:flex-row items-start sm:items-center bg-black/30 p-3 rounded-xl">
857                            <img src="images/SmartHealth.png" alt="SmartHealth"
858                                class="w-12 h-12 rounded-xl mr-3 mb-2 sm:mb-0">
859                            <div class="mb-3 sm:mb-0 w-48">
860                                <h3 class="text-white font-bold">SmartHealth</h3>
861                                <p class="text-blue-100 text-sm">全面的健康数据管理与分析</p>
862                            </div>
863                            <div class="flex flex-wrap gap-2 sm:ml-6">
864                                <a href="https://apps.apple.com/us/app/smarthealth/id1450500729" target="_blank"
865                                    class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
866                                    <i class="fab fa-apple text-xl mr-2"></i>
867                                    <div>
868                                        <div class="text-xs">下载</div>
869                                        <div style="font-size: small;">App Store</div>
870                                    </div>
871                                </a>
872                                <a href="https://play.google.com/store/apps/details?id=com.zhuoting.healthyucheng"
873                                    target="_blank" class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
874                                    <i class="fab fa-google-play text-xl mr-2"></i>
875                                    <div>
876                                        <div class="text-xs">下载</div>
877                                        <div style="font-size: small;">Google Play</div>
878                                    </div>
879                                </a>
880                                <a href="https://staticpage.ycaviation.com/app/smart/androidapk/SmartHealth.apk"
881                                    class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
882                                    <i class="fab fa-android text-xl mr-2"></i>
883                                    <div>
884                                        <div class="text-xs">下载</div>
885                                        <div style="font-size: small;">Android</div>
886                                    </div>
887                                </a>
888                            </div>
889                        </div>
890
891                        <div class="flex flex-col sm:flex-row items-start sm:items-center bg-black/30 p-3 rounded-xl">
892                            <img src="images/HealthWear.png" alt="HealthWear"
893                                class="w-12 h-12 rounded-xl mr-3 mb-2 sm:mb-0">
894                            <div class="mb-3 sm:mb-0 w-48">
895                                <h3 class="text-white font-bold">HealthWear</h3>
896                                <p class="text-blue-100 text-sm">智能穿戴设备控制与数据同步</p>
897                            </div>
898                            <div class="flex flex-wrap gap-2 sm:ml-5">
899                                <a href="https://apps.apple.com/us/app/HealthWear/id1507145903" target="_blank"
900                                    class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
901                                    <i class="fab fa-apple text-xl mr-2"></i>
902                                    <div>
903                                        <div class="text-xs">下载</div>
904                                        <div style="font-size: small;">App Store</div>
905                                    </div>
906                                </a>
907                                <a href="https://play.google.com/store/apps/details?id=com.yucheng.HealthWear"
908                                    target="_blank" class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
909                                    <i class="fab fa-google-play text-xl mr-2"></i>
910                                    <div>
911                                        <div class="text-xs">下载</div>
912                                        <div style="font-size: small;">Google Play</div>
913                                    </div>
914                                </a>
915                                <a href="https://staticpage.ycaviation.com/app/smart/androidapk/HealthWear.apk"
916                                    class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
917                                    <i class="fab fa-android text-xl mr-2"></i>
918                                    <div>
919                                        <div class="text-xs">下载</div>
920                                        <div style="font-size: small;">Android</div>
921                                    </div>
922                                </a>
923                            </div>
924                        </div>
925
926                        <div class="flex flex-col sm:flex-row items-start sm:items-center bg-black/30 p-3 rounded-xl">
927                            <img src="images/SmartLiving.png" alt="HealthWear"
928                                class="w-12 h-12 rounded-xl mr-3 mb-2 sm:mb-0">
929                            <div class="mb-3 sm:mb-0 w-48">
930                                <h3 class="text-white font-bold">SmartLiving</h3>
931                                <p class="text-blue-100 text-sm">智能戒指的健康管理</p>
932                            </div>
933                            <div class="flex flex-wrap gap-2 sm:ml-5">
934                                <div
935                                    style="background: black; width: 200px; height: 55px; display: flex; justify-content: center; align-items: center; color: white; font-size: 20px; margin-left: 100px; border-radius: 10px;">
936                                    敬请期待
937                                </div>
938                                <!-- <a href="https://apps.apple.com/us/app/HealthWear/id1507145903" target="_blank" class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
939                                    <i class="fab fa-apple text-xl mr-2"></i>
940                                    <div>
941                                        <div class="text-xs">下载</div>
942                                        <div style="font-size: small;">App Store</div>
943                                    </div>
944                                </a>
945                                <a href="https://play.google.com/store/apps/details?id=com.yucheng.HealthWear" target="_blank" class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
946                                    <i class="fab fa-google-play text-xl mr-2"></i>
947                                    <div>
948                                        <div class="text-xs">下载</div>
949                                        <div style="font-size: small;">Google Play</div>
950                                    </div>
951                                </a>
952                                <a href="https://staticpage.ycaviation.com/app/smart/androidapk/HealthWear.apk" class="bg-black text-white px-4 py-2 rounded-lg flex items-center">
953                                    <i class="fab fa-android text-xl mr-2"></i>
954                                    <div>
955                                        <div class="text-xs">下载</div>
956                                        <div style="font-size: small;">Android</div>
957                                    </div>
958                                </a> -->
959                            </div>
960                        </div>
961
962
963                    </div>
964                </div>
965                <div class="relative flex justify-center mt-8 md:mt-0 hidden sm:flex"
966                    style="width: 90%;margin-left: 10%;">
967                    <div class="relative z-10 transform -rotate-6">
968                        <img src="images/SmartHealth.png" alt="SmartHealth APP" class="w-48 h-48 rounded-xl shadow-2xl">
969                    </div>
970                    <div class="absolute z-10 transform rotate-6 translate-x-16 translate-y-8">
971                        <img src="images/HealthWear.png" alt="HealthWear APP" class="w-48 h-48 rounded-xl shadow-2xl">
972                    </div>
973                    <div class="absolute inset-0 bg-blue-500 rounded-full opacity-10 blur-3xl"></div>
974                </div>
975            </div>
976        </div>
977    </section>
978
979    <!-- 页脚 -->
980    <footer class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-900">
981        <div class="max-w-7xl mx-auto">
982            <div class="grid md:grid-cols-4 gap-4">
983                <div>
984                    <div class="flex items-center mb-4">
985                        <span class="gradient-text text-2xl ">玉成创新科技有限公司</span>
986                    </div>
987                    <p class="text-gray-400 mb-4">连接健康与科技,让生活更加智能</p>
988                    <div class="flex space-x-5">
989                        <i class="fab fa-weixin text-xl"></i>
990                        <i class="fab fa-weibo text-xl"></i>
991                        <i class="fab fa-bilibili text-xl"></i>
992                        <i class="fab fa-tiktok text-xl"></i>
993                    </div>
994                </div>
995                <div>
996                    <h4 class="text-lg font-medium text-white mb-4">快速链接</h4>
997                    <ul class="space-y-2">
998                        <li><a href="#" class="text-gray-400 hover:text-blue-400">首页</a></li>
999                        <li><a href="products.html" class="text-gray-400 hover:text-blue-400">产品</a></li>
1000                        <li><a href="sdk.html" class="text-gray-400 hover:text-blue-400">SDK</a></li>
1001                        <li><a href="app.html" class="text-gray-400 hover:text-blue-400">APP下载</a></li>
1002                        <li><a href="hire.html" class="text-gray-400 hover:text-blue-400">招聘</a></li>
1003                        <li><a href="about.html" class="text-gray-400 hover:text-blue-400">关于我们</a></li>
1004                    </ul>
1005                </div>
1006                <div>
1007                    <h4 class="text-lg font-medium text-white mb-4">联系我们</h4>
1008                    <ul class="space-y-2">
1009                        <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2 text-blue-400"></i>
1010                            深圳市宝安区西乡街道共乐社区铁仔路50号凤凰智谷A栋311</li>
1011                        <li class="text-gray-400"><i class="fas fa-phone mr-2 text-blue-400"></i>销售: 18926536706</li>
1012                        <li class="text-gray-400"><i class="fas fa-phone mr-2 text-blue-400"></i>采购: 19129310620</li>
1013                        <li class="text-gray-400"><i class="fas fa-envelope mr-2 text-blue-400"></i>
1014                            [email protected]</li>
1015
1016                    </ul>
1017                </div>
1018                <div>
1019                    <h4 class="text-lg font-medium text-white mb-4">支持</h4>
1020                    <ul class="space-y-2">
1021                        <li class="text-gray-400"><img src="./images/support.png" alt="技术支持群" class="w-36 h-36"></li>
1022                    </ul>
1023                </div>
1024
1025            </div>
1026            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
1027                <p class="mb-1">Copyright © 2024-2027 YUCHENG</p>
1028                <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">粤ICP备15084417号</a> </p>
1029            </div>
1030        </div>
1031    </footer>
1032
1033    <!-- 视频悬浮层 -->
1034    <div class="video-overlay" id="video-overlay">
1035        <div class="video-modal">
1036            <div class="video-controls">
1037                <div class="video-title text-white text-lg font-medium absolute left-6 top-6">产品视频</div>
1038                <button class="control-btn" id="pause-btn" title="暂停/播放">
1039                    <i class="fas fa-pause"></i>
1040                </button>
1041                <button class="control-btn" id="close-btn" title="关闭">
1042                    <i class="fas fa-times"></i>
1043                </button>
1044            </div>
1045            <video id="modal-video" controls>
1046                <source src="./images/video/TK65.mp4" type="video/mp4">
1047                你的浏览器不支持播放此视频。
1048            </video>
1049        </div>
1050    </div>
1051
1052    
1052<script>
1053        document.addEventListener('DOMContentLoaded', function () {
1054            // 产品数据
1055            const productData = {
1056                'watch': {
1057                    title: '智能手表 Pro',
1058                    slogan: '探索我们创新的智能穿戴设备,连接健康与科技,让生活更加智能。',
1059                    videoId: 'hero-video-watch',
1060                    videoSrc: './images/video/TK65.mp4'
1061                },
1062                'ring': {
1063                    title: '智能戒指 Mini',
1064                    slogan: '微型智能,随时监测健康数据,舒适佩戴与精准监控的完美结合。',
1065                    videoId: 'hero-video-ring',
1066                    videoSrc: './images/video/ring.mp4'
1067                },
1068                'pcb': {
1069                    title: 'PCB智能板',
1070                    slogan: '高度集成的智能硬件核心,定制化解决方案,为您的产品赋能。',
1071                    videoId: 'hero-video-pcb',
1072                    videoSrc: './images/video/pcb.mp4'
1073                }
1074            };
1075
1076            // 产品切换功能
1077            const productTabs = document.querySelectorAll('.product-tab');
1078            const productContainers = document.querySelectorAll('.product-video-container');
1079            const productSlogan = document.getElementById('product-slogan');
1080
1081            productTabs.forEach(tab => {
1082                tab.addEventListener('click', function () {
1083                    productType = this.getAttribute('data-product');
1084
1085                    // 更新选项卡状态
1086                    productTabs.forEach(t => t.classList.remove('active'));
1087                    this.classList.add('active');
1088
1089                    // 更新视频容器显示
1090                    productContainers.forEach(container => {
1091                        container.classList.remove('active');
1092                    });
1093                    document.getElementById(`product-${productType}`).classList.add('active');
1094
1095                    // 更新口号
1096                    productSlogan.textContent = productData[productType].slogan;
1097                });
1098            });
1099
1100            // 视频播放功能
1101            const playButtons = document.querySelectorAll('.play-button');
1102            const playButton = document.getElementById('play-button');
1103            const videoOverlay = document.getElementById('video-overlay');
1104            const modalVideo = document.getElementById('modal-video');
1105            const pauseBtn = document.getElementById('pause-btn');
1106            const closeBtn = document.getElementById('close-btn');
1107            const videoTitle = document.querySelector('.video-title');
1108            // 默认视频类型
1109            let productType = 'pcb';
1110
1111            // 更新播放按钮点击事件
1112            playButtons.forEach(button => {
1113                button.addEventListener('click', function () {
1114                    productType = this.getAttribute('data-video');
1115                    modalVideo.querySelector('source').src = productData[productType].videoSrc;
1116                    modalVideo.load(); // 重新加载视频源
1117                    videoTitle.textContent = productData[productType].title; // 更新视频标题
1118
1119                    videoOverlay.style.display = 'flex';
1120                    modalVideo.play();
1121                    document.body.style.overflow = 'hidden'; // 禁止页面滚动
1122                });
1123            });
1124            playButton.addEventListener('click', function () {
1125                modalVideo.querySelector('source').src = productData[productType].videoSrc;
1126                modalVideo.load(); // 重新加载视频源
1127                videoTitle.textContent = productData[productType].title; // 更新视频标题
1128
1129                videoOverlay.style.display = 'flex';
1130                modalVideo.play();
1131                document.body.style.overflow = 'hidden';
1132
1133            })
1134
1135            // 视频点击事件
1136            document.querySelectorAll('.hero-image').forEach(video => {
1137                video.addEventListener('click', function () {
1138                    videoId = this.id;
1139                    productType = videoId.split('-').pop(); // 获取视频ID的最后一部分
1140
1141                    modalVideo.querySelector('source').src = productData[productType].videoSrc;
1142                    modalVideo.load(); // 重新加载视频源
1143                    videoTitle.textContent = productData[productType].title; // 更新视频标题
1144
1145                    videoOverlay.style.display = 'flex';
1146                    modalVideo.play();
1147                    document.body.style.overflow = 'hidden';
1148                });
1149            });
1150
1151            // 暂停/播放按钮
1152            pauseBtn.addEventListener('click', function () {
1153                if (modalVideo.paused) {
1154                    modalVideo.play();
1155                    pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
1156                } else {
1157                    modalVideo.pause();
1158                    pauseBtn.innerHTML = '<i class="fas fa-play"></i>';
1159                }
1160            });
1161
1162            // 关闭按钮
1163            closeBtn.addEventListener('click', function () {
1164                videoOverlay.style.display = 'none';
1165                modalVideo.pause();
1166                modalVideo.currentTime = 0;
1167                pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
1168                document.body.style.overflow = 'auto'; // 恢复页面滚动
1169            });
1170
1171            // 点击悬浮层背景关闭
1172            videoOverlay.addEventListener('click', function (e) {
1173                if (e.target === videoOverlay) {
1174                    closeBtn.click();
1175                }
1176            });
1177
1178            // ESC键关闭
1179            document.addEventListener('keydown', function (e) {
1180                if (e.key === 'Escape' && videoOverlay.style.display === 'flex') {
1181                    closeBtn.click();
1182                }
1183            });
1184
1185            // 视频播放状态监听
1186            modalVideo.addEventListener('play', function () {
1187                pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
1188            });
1189
1190            modalVideo.addEventListener('pause', function () {
1191                pauseBtn.innerHTML = '<i class="fas fa-play"></i>';
1192            });
1193
1194            // SDK相关代码
1195            const platformTabs = document.querySelectorAll('.platform-tab');
1196            const codeBlock = document.querySelector('.code-block');
1197            const descriptionContainer = document.querySelector('.description-container p');
1198            let platform = 'ios';
1199
1200            // 示例代码和描述
1201            const sdkExamples = {
1202                'android': {
1203                    code: `正在开发,敬请期待!`,
1204                    description: '正在开发,敬请期待!'
1205                },
1206                'ios': {
1207                    code: `// 引入YCProductSDK Framework
1208import YCProductSDK
1209
1210 // 在AppDelegate中设置日志级别
1211 YCProduct.setLogLevel(.normal)
1212 
1213 // 搜索设备
1214 YCProduct.scanningDevice { [weak self] devices, error in  }
1215
1216 // 连接设备
1217 YCProduct.connectDevice(device) { [weak self] state, error in }
1218
1219 // 断开连接
1220 YCProduct.disconnectDevice { state, error in }
1221 `,
1222                    description: 'iOS SDK提供完整的健康功能支持,轻松集成至您的App中。'
1223                },
1224                'flutter': {
1225                    code: `//初始化  
1226YcProductPlugin().initPlugin(isReconnectEnable: true, isLogEnable: true);
1227
1228    // ble state change
1229    YcProductPlugin().onListening((event) {
1230
1231      if (event.keys.contains(NativeEventType.bluetoothStateChange)) {
1232        final int st = event[NativeEventType.bluetoothStateChange];
1233        debugPrint('蓝牙状态变化 $st');
1234        debugPrint(YcProductPlugin().connectedDevice?.deviceFeature?.isSupportBloodPressure.toString());
1235        setState(() {
1236          _st = st;
1237        });
1238      }
1239    });
1240
1241//搜索设备
1242
1243
1244YcProductPlugin()
1245    .scanDevice(time: 3)
1246    .then((devices) {
1247// debugPrint("=== 设备 $devices");
1248
1249setState(() {
1250    devices?.sort((a, b) =>  (b?.rssiValue.toInt() ?? 0) - (a?.rssiValue.toInt() ?? 0));
1251    _devices = devices ?? [];
1252    EasyLoading.dismiss();
1253});
1254});
1255
1256//连接设备
1257 YcProductPlugin().connectDevice(item).then((value) {
1258
1259    if (value == true) {
1260    Navigator.pop(context);
1261    EasyLoading.showSuccess("Connected");
1262
1263    } else {
1264    debugPrint("连接失败");
1265    EasyLoading.showError("Connect failed");
1266    }
1267});`,
1268                    description: '提供便捷、高效的工具集,快速集成至 Flutter 应用,提升跨平台开发效率与质量,降低多端开发成本与难度。'
1269                },
1270                '小程序': {
1271                    code: `// 小程序SDK接入示例
1272// app.json 中添加插件配置
1273"plugins": {
1274  "ychealth": {
1275    "version": "1.2.3",
1276    "provider": "wx12345678"
1277  }
1278}
1279
1280// 初始化
1281const healthPlugin = requirePlugin('ychealth');
1282healthPlugin.init({ appKey: "YOUR_APP_KEY" });`,
1283                    description: '微信小程序SDK,提供轻量级健康数据服务,满足用户需求。'
1284                },
1285                'uniApp': {
1286                    code: `// uniApp SDK接入示例
1287// 引入插件
1288var ble = uni.requireNativePlugin('bluetooth-ycSdkPlugin');
1289
1290// 初始化
1291ble.initPlugin((res) => {});
1292
1293// 搜索设备
1294ble.scanDevice(5, (res) => {});
1295
1296// 连接设备
1297ble.connectDevice((res) => {});
1298
1299// 断开连接
1300ble.disconnectDevice((res) => {});
1301 `,
1302                    description: 'uniApp SDK支持多平台发布,轻松实现一次开发,多平台运行。'
1303                }
1304            };
1305
1306            document.getElementById("sdkButton").addEventListener("click", () => {
1307                window.location.href = `./sdk-docs.html?platform=${platform}`;
1308            });
1309
1310            // 点击选项卡切换内容
1311            platformTabs.forEach(tab => {
1312
1313                tab.addEventListener('click', function () {
1314                    platform = tab.getAttribute('data-platform');
1315                    console.log("当前平台:" + platform);
1316
1317                    console.log('Clicked tab:', this.textContent);
1318
1319                    // 移除所有active类
1320                    platformTabs.forEach(t => t.classList.remove('active'));
1321                    // 添加active类到当前点击的选项卡
1322                    this.classList.add('active');
1323                    // 更新代码和描述
1324                    if (sdkExamples[this.textContent]) {
1325                        codeBlock.textContent = sdkExamples[this.textContent].code;
1326                        descriptionContainer.textContent = sdkExamples[this.textContent].description;
1327                    }
1328                });
1329            });
1330
1331            // 初始化显示内容
1332            codeBlock.textContent = sdkExamples[platform].code;
1333            descriptionContainer.textContent = sdkExamples[platform].description;
1334
1335            // 移动端菜单切换
1336            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
1337            const mobileMenu = document.getElementById('mobile-menu');
1338
1339            mobileMenuBtn.addEventListener('click', function () {
1340                mobileMenu.classList.toggle('hidden');
1341            });
1342        });
1343    </script>
1343
1344</body>
1345
1346</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.