Update index.html
Browse files- index.html +41 -6
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title
|
| 7 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
* {
|
|
@@ -309,6 +309,19 @@
|
|
| 309 |
:-ms-fullscreen {
|
| 310 |
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%);
|
| 311 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 312 |
</style>
|
| 313 |
</head>
|
| 314 |
<body>
|
|
@@ -399,7 +412,6 @@
|
|
| 399 |
</div>
|
| 400 |
</div>
|
| 401 |
</div>
|
| 402 |
-
|
| 403 |
<!-- 社会价值 -->
|
| 404 |
<div class="slide" id="slide5">
|
| 405 |
<h2 class="section-title">社会价值</h2>
|
|
@@ -454,8 +466,25 @@
|
|
| 454 |
</div>
|
| 455 |
</div>
|
| 456 |
|
| 457 |
-
<!--
|
| 458 |
<div class="slide" id="slide7">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 459 |
<div class="flex flex-col items-center justify-center h-full">
|
| 460 |
<h2 class="title">谢谢聆听</h2>
|
| 461 |
<p class="subtitle">用科技照亮每个人的世界</p>
|
|
@@ -467,7 +496,7 @@
|
|
| 467 |
<!-- 导航按钮 -->
|
| 468 |
<button class="nav-button prev" onclick="prevSlide()">←</button>
|
| 469 |
<button class="nav-button next" onclick="nextSlide()">→</button>
|
| 470 |
-
<div class="slide-number">1 /
|
| 471 |
|
| 472 |
<!-- 全屏按钮 -->
|
| 473 |
<button class="fullscreen-button" onclick="toggleFullScreen()">
|
|
@@ -478,9 +507,15 @@
|
|
| 478 |
|
| 479 |
<script>
|
| 480 |
let currentSlide = 1;
|
| 481 |
-
const totalSlides =
|
| 482 |
|
| 483 |
function showSlide(n) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 484 |
document.querySelectorAll('.slide').forEach(slide => {
|
| 485 |
slide.classList.remove('active');
|
| 486 |
});
|
|
@@ -513,7 +548,7 @@
|
|
| 513 |
label.textContent = size + '%';
|
| 514 |
}
|
| 515 |
|
| 516 |
-
//
|
| 517 |
document.addEventListener('keydown', function(event) {
|
| 518 |
switch(event.key) {
|
| 519 |
case 'ArrowRight':
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>智言视寻 - 演示文稿</title>
|
| 7 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
* {
|
|
|
|
| 309 |
:-ms-fullscreen {
|
| 310 |
background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%);
|
| 311 |
}
|
| 312 |
+
|
| 313 |
+
/* 视频容器样式 */
|
| 314 |
+
.video-container {
|
| 315 |
+
background: rgba(255, 255, 255, 0.1);
|
| 316 |
+
padding: 1rem;
|
| 317 |
+
border-radius: 1rem;
|
| 318 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
video {
|
| 322 |
+
border-radius: 0.5rem;
|
| 323 |
+
background: #000;
|
| 324 |
+
}
|
| 325 |
</style>
|
| 326 |
</head>
|
| 327 |
<body>
|
|
|
|
| 412 |
</div>
|
| 413 |
</div>
|
| 414 |
</div>
|
|
|
|
| 415 |
<!-- 社会价值 -->
|
| 416 |
<div class="slide" id="slide5">
|
| 417 |
<h2 class="section-title">社会价值</h2>
|
|
|
|
| 466 |
</div>
|
| 467 |
</div>
|
| 468 |
|
| 469 |
+
<!-- 视频展示页 -->
|
| 470 |
<div class="slide" id="slide7">
|
| 471 |
+
<h2 class="section-title">项目演示</h2>
|
| 472 |
+
<div class="content-container flex justify-center items-center">
|
| 473 |
+
<div class="video-container w-full max-w-4xl">
|
| 474 |
+
<video
|
| 475 |
+
controls
|
| 476 |
+
class="w-full rounded-lg shadow-lg"
|
| 477 |
+
style="max-height: 70vh;"
|
| 478 |
+
>
|
| 479 |
+
<source src="WeChat_20241023122858.mp4" type="video/mp4">
|
| 480 |
+
您的浏览器不支持 video 标签。
|
| 481 |
+
</video>
|
| 482 |
+
</div>
|
| 483 |
+
</div>
|
| 484 |
+
</div>
|
| 485 |
+
|
| 486 |
+
<!-- 结束页 -->
|
| 487 |
+
<div class="slide" id="slide8">
|
| 488 |
<div class="flex flex-col items-center justify-center h-full">
|
| 489 |
<h2 class="title">谢谢聆听</h2>
|
| 490 |
<p class="subtitle">用科技照亮每个人的世界</p>
|
|
|
|
| 496 |
<!-- 导航按钮 -->
|
| 497 |
<button class="nav-button prev" onclick="prevSlide()">←</button>
|
| 498 |
<button class="nav-button next" onclick="nextSlide()">→</button>
|
| 499 |
+
<div class="slide-number">1 / 8</div>
|
| 500 |
|
| 501 |
<!-- 全屏按钮 -->
|
| 502 |
<button class="fullscreen-button" onclick="toggleFullScreen()">
|
|
|
|
| 507 |
|
| 508 |
<script>
|
| 509 |
let currentSlide = 1;
|
| 510 |
+
const totalSlides = 8; // 更新为8页
|
| 511 |
|
| 512 |
function showSlide(n) {
|
| 513 |
+
// 在切换页面时暂停视频（如果正在播放）
|
| 514 |
+
const videos = document.querySelectorAll('video');
|
| 515 |
+
videos.forEach(video => {
|
| 516 |
+
video.pause();
|
| 517 |
+
});
|
| 518 |
+
|
| 519 |
document.querySelectorAll('.slide').forEach(slide => {
|
| 520 |
slide.classList.remove('active');
|
| 521 |
});
|
|
|
|
| 548 |
label.textContent = size + '%';
|
| 549 |
}
|
| 550 |
|
| 551 |
+
// 修改后的键盘事件监听，支持上下键和全屏
|
| 552 |
document.addEventListener('keydown', function(event) {
|
| 553 |
switch(event.key) {
|
| 554 |
case 'ArrowRight':
|