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.