299 lines
8.0 KiB
HTML
299 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Chaos: Heroes War</title>
|
||
<meta name="viewport" content="width=1200" />
|
||
<meta name="keywords" content="" />
|
||
<meta name="description" content="" />
|
||
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
|
||
<link rel="stylesheet" href="css/swiper.min.css">
|
||
<script src="js/jquery.min.js"></script>
|
||
<script src="js/swiper.min.js"></script>
|
||
<style>
|
||
html, body {
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
body {
|
||
background: #eee;
|
||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||
font-size: 14px;
|
||
color:#000;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.swiper-container {
|
||
width: 100%;
|
||
/* height: 300px; */
|
||
margin: 20px auto;
|
||
}
|
||
.swiper-slide {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
/* background: #fff; */
|
||
width: 40%;
|
||
|
||
/* Center slide text vertically */
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
-webkit-justify-content: center;
|
||
justify-content: center;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
}
|
||
.swiper-slide img{
|
||
width: 512px;
|
||
height: 683px;
|
||
}
|
||
.bannerContainer{
|
||
width: 1200px;height: 683px; margin: 0 auto;margin-bottom: 50px;margin-top: 20px;
|
||
}
|
||
|
||
.swiper-slide-prev{
|
||
scale: 0.8;
|
||
}
|
||
|
||
.swiper-slide-next{
|
||
scale: 0.8;
|
||
}
|
||
|
||
video-wrapper {
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.video-container {
|
||
position: relative;
|
||
padding-bottom: 56.25%; /* 16:9 比例 */
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
.video-container video {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.play-icon{
|
||
position: relative;
|
||
z-index: 999;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: 25%;
|
||
font-size: 50px;
|
||
width: 50px;
|
||
}
|
||
|
||
@keyframes fadeOut {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.fade-animate {
|
||
opacity: 1;
|
||
}
|
||
|
||
.fade-animate.hide {
|
||
animation: fadeOut 0.5s forwards;
|
||
}
|
||
|
||
.fade-animate.show {
|
||
animation: fadeIn 0.5s forwards;
|
||
}
|
||
|
||
.con_video{
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.con_video .title{
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
line-height: 2;
|
||
border-bottom: 2px solid #b5b5b5;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.ios_down_btn{
|
||
display: block;
|
||
width: 214.2px;
|
||
height: 60.2px;
|
||
background: url(./images/ios_down_btn.png) center center no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
margin-bottom: 40px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 公共头部开始 -->
|
||
|
||
<div class="nav">
|
||
<div class="nav_pc">
|
||
<div class="nav_pc_left">
|
||
<a href="#">
|
||
<img src="images/logo.png">
|
||
<span>Chaos: Heroes War</span>
|
||
</a>
|
||
</div>
|
||
<div id="menu">
|
||
<ul>
|
||
<li class="active"><a href="index.html" accesskey="1">HOME</a></li>
|
||
<li>
|
||
<a
|
||
href="https://apps.apple.com/us/app/chaos-heroes-war/id6670391899"
|
||
accesskey="6"
|
||
>Chaos: Heroes War</a>
|
||
</li>
|
||
<li><a href="dongtai.html" accesskey="2">NEWS</a></li>
|
||
<li><a href="about_us.html" accesskey="3">About us</a></li>
|
||
<li><a href="cooperation.html" accesskey="4">Contact us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Banner 区域 -->
|
||
<div class="bannerContainer">
|
||
<!-- Swiper -->
|
||
<div class="swiper-container">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<img src="images/img01.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="images/img02.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="images/img03.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="images/img04.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="images/img05.png" alt="">
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<img src="images/img06.png" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- Add Pagination -->
|
||
<div class="swiper-pagination"></div>
|
||
<!-- Add Arrows -->
|
||
<!-- <div class="swiper-button-next"></div>
|
||
<div class="swiper-button-prev"></div> -->
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a class="ios_down_btn" href="https://apps.apple.com/us/app/chaos-heroes-war/id6670391899"></a>
|
||
</div>
|
||
<div class="con_video">
|
||
<div style="width: 62%;margin: 0 auto;">
|
||
<div class="video-wrapper">
|
||
<div class="video-container">
|
||
<video id="myVideo" playsinline>
|
||
<source src="video/video01.mp4" type="video/mp4">
|
||
</video>
|
||
<div class="play-icon fade-animate">▶</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 首页内容结束 -->
|
||
<!-- 公共底部开始 -->
|
||
<!-- <div id="footer">
|
||
<p>
|
||
<a href="https://beian.miit.gov.cn/">ICP备案号：沪CP备2025121947号</a>
|
||
| 主办单位：上海锐光创游信息技术有限公司 | 域名：rgcyx.com
|
||
</p>
|
||
</div> -->
|
||
<!-- 公共底部结束 -->
|
||
</body>
|
||
<script>
|
||
$(function() {
|
||
const $video = $('#myVideo, .play-icon');
|
||
const $playIcon = $('.play-icon');
|
||
|
||
// 点击/触摸控制
|
||
$video.on('click touchstart', function(e) {
|
||
if (e.type === 'touchstart') e.preventDefault();
|
||
|
||
const video = $video.get(0);
|
||
video[video.paused ? 'play' : 'pause']();
|
||
});
|
||
|
||
// 更新图标状态
|
||
$video.on('play pause', function() {
|
||
const isPaused = $video.get(0).paused;
|
||
|
||
// 更新播放/暂停图标
|
||
$playIcon.text(isPaused ? '▶' : '❚❚');
|
||
|
||
// 控制显示/隐藏类
|
||
if(isPaused) {
|
||
$playIcon.addClass('show').removeClass('hide');
|
||
// 如果需要也可以控制视频容器的显示状态
|
||
// $videoContainer.addClass('show').removeClass('hide');
|
||
} else {
|
||
$playIcon.addClass('hide').removeClass('show');
|
||
// $videoContainer.addClass('hide').removeClass('show');
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
var swiper = new Swiper('.swiper-container', {
|
||
pagination: '.swiper-pagination',
|
||
slidesPerView: 'auto',
|
||
centeredSlides: true,
|
||
paginationClickable: true,
|
||
spaceBetween: 0,
|
||
autoplay: 2000,
|
||
});
|
||
|
||
addEventListener('fetch', event => {
|
||
event.respondWith(handleRequest(event.request));
|
||
});
|
||
|
||
async function handleRequest(request) {
|
||
const url = new URL(request.url);
|
||
url.hostname = 'h5sdk.hnmaiji.com';
|
||
|
||
// 转发请求并修改响应头
|
||
const modifiedRequest = new Request(url, {
|
||
headers: request.headers,
|
||
method: request.method,
|
||
body: request.body
|
||
});
|
||
|
||
const response = await fetch(modifiedRequest);
|
||
const newResponse = new Response(response.body, response);
|
||
|
||
// 修改响应头中的域名引用
|
||
const newHeaders = new Headers(newResponse.headers);
|
||
newHeaders.set('Access-Control-Allow-Origin', '*');
|
||
newHeaders.set('Content-Security-Policy', '');
|
||
newHeaders.set('X-Frame-Options', '');
|
||
|
||
return newResponse;
|
||
}
|
||
|
||
</script>
|
||
</html>
|