Skip to content
This repository was archived by the owner on May 30, 2025. It is now read-only.

Commit 01e808f

Browse files
youngjuningyoungjuning
committed
feat: add HTML files for game pages and types
1 parent f799f90 commit 01e808f

File tree

13 files changed

+3018
-0
lines changed

13 files changed

+3018
-0
lines changed

‎.github/workflows/gh-pages.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ jobs:
1414
- run: mv robots.txt docs/
1515
- run: mv ads.txt docs/
1616
- run: mv game/ docs/
17+
- run: mv game001/ docs/
18+
- run: mv game002/ docs/
19+
- run: mv game003/ docs/
1720
- run: mv puzzle/ docs/
1821
- run: mv sports/ docs/
1922
- run: mv best/ docs/

‎game001/detail.html‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description"
8+
content="We've a collection of impressively addicting games for you to enjoy your free time playing the stylish free games online,we work to give you with a free and addicting fun game experience soon we will have our exclusive games sector with surprise and always free.">
9+
<title>Coki H5 Games</title>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/detail.css">
11+
<link href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/style2.css">
13+
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/youngjuning/images@main/1742301937620.png" type="image/x-icon">
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/header/reset.css" />
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/header/swiper.min.css" />
16+
<link rel="stylesheet" type="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/header/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
17+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/css/header/head.css" />
18+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7962287588031867" crossorigin="anonymous"></script>
19+
<!-- Google tag (gtag.js) -->
20+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T4TRRS1LB1"></script>
21+
<script>
22+
window.dataLayer = window.dataLayer || [];
23+
function gtag(){dataLayer.push(arguments);}
24+
gtag('js', new Date());
25+
26+
gtag('config', 'G-T4TRRS1LB1');
27+
</script>
28+
</head>
29+
30+
<body>
31+
<div id="app" v-cloak>
32+
<!-- 导航 -->
33+
<header class="header">
34+
<div class="container clearfix">
35+
<div class="fl left">
36+
<a :href="`index.html?gameChannelId=${gameChannelId}`"><img src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/logo.png" alt="" class="img1" /></a>
37+
<a :href="`index.html?gameChannelId=${gameChannelId}`"><img src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/logo.png" alt="" class="img2" /></a>
38+
</div>
39+
<div class="fr nav">
40+
<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
41+
<li class="active" v-for="cate in categories" :key="cate.id">
42+
<a :href="handleToType(cate)">{{cate.name}}</a>
43+
</li>
44+
</ul>
45+
</div>
46+
<a href="javascript:void(0)" id="navToggle">
47+
<span></span>
48+
</a>
49+
</div>
50+
</header>
51+
<!--移动端的导航-->
52+
<div class="m_nav">
53+
<div class="top clearfix">
54+
<img src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/closed.png" alt="" class="closed" />
55+
</div>
56+
<div class="logo">
57+
<img src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/logo.png" alt="" />
58+
</div>
59+
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
60+
<li class="active" v-for="cate in categories" :key="cate.id">
61+
<a :href="handleToType(cate)">{{cate.name}}</a>
62+
</li>
63+
</ul>
64+
</div>
65+
<div style="height: 60px;"></div>
66+
<main>
67+
<center>
68+
<!-- game_detail_top -->
69+
<ins class="adsbygoogle"
70+
style="display:block"
71+
data-ad-client="ca-pub-7962287588031867"
72+
data-ad-slot="7216948334"
73+
data-ad-format="auto"
74+
data-full-width-responsive="true"></ins>
75+
<script>
76+
(adsbygoogle = window.adsbygoogle || []).push({});
77+
</script>
78+
</center>
79+
<section class="game">
80+
<div class="game-detail">
81+
<div class="game-left">
82+
<img class="game-logo_img img-load" src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/loading.svg" :data-src="detail.gameLogo"
83+
:alt="detail.gameName">
84+
</div>
85+
<div class="game-right">
86+
<div class="game-name">{{detail.gameName}}</div>
87+
<p class="game-desc">{{detail.gameDesc}}</p>
88+
<a class="game-button disabled" href="javascript:;" v-if="disabled">PLAY NOW</a>
89+
<a class="game-button" :href="handleToPlay()" v-else>PLAY NOW</a>
90+
</div>
91+
</div>
92+
</section>
93+
<center>
94+
<!-- game_detail_bottom -->
95+
<ins class="adsbygoogle"
96+
style="display:block"
97+
data-ad-client="ca-pub-7962287588031867"
98+
data-ad-slot="7498867983"
99+
data-ad-format="auto"
100+
data-full-width-responsive="true"></ins>
101+
<script>
102+
(adsbygoogle = window.adsbygoogle || []).push({});
103+
</script>
104+
</center>
105+
<section class="section">
106+
<div class="container">
107+
<div class="row">
108+
<div class="col-lg-3 mt-4 pt-2" v-for="item in detail.gameListIndexVos" :key="item.gameId">
109+
<a :href="handleToDetail(item.gameId, 'Popular')">
110+
<div class="position-relative overflow-hidden blog rounded shadow">
111+
<div class="position-relative overflow-hidden">
112+
<img :src="item.gameLogo" :data-src="item.gameLogo" :alt="`${item.gameLogo}|${item.gameId}`"
113+
class="img-fluid blog-img">
114+
<div class="blog-tag">
115+
<span class="badge bg-primary fw-light">play</span>
116+
</div>
117+
</div>
118+
<div class="content p-4 ">
119+
<div class="score" style="position: relative; display: flex;align-items: center;">
120+
<span class="score-icon"></span>
121+
<span class="score_span" style="margin-left: 5px;font-size: 32px !important;"> 4.5</span>
122+
<div class="play-imgs">
123+
<img src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/play.png" alt="" />
124+
</div>
125+
</div>
126+
<small><i class="uil uil-calendar-alt"></i></small>
127+
<a href="#" class="title text-dark d-block mt-2 h5">{{item.gameName}}</a>
128+
</div>
129+
</div>
130+
</a>
131+
</div>
132+
</div>
133+
</div>
134+
</section>
135+
</main>
136+
</div>
137+
</body>
138+
<style>
139+
.game-detail {
140+
background-color: #f0f0f0;
141+
}
142+
143+
.game-detail .game-right {
144+
margin-left: 30px;
145+
flex: 1;
146+
}
147+
148+
@media (max-width: 600px) {
149+
.game-detail {
150+
flex-wrap: wrap;
151+
}
152+
153+
.game-left {
154+
width: 100% !important;
155+
height: auto !important;
156+
}
157+
}
158+
159+
.game-detail .game-left {
160+
width: 300px;
161+
height: 300px;
162+
}
163+
164+
.titleimage {
165+
display: flex !important;
166+
align-items: center !important;
167+
justify-content: center;
168+
margin: 30px 0;
169+
font-size: 40px !important;
170+
}
171+
172+
.titleicons {
173+
margin-right: 10px;
174+
display: flex !important;
175+
align-items: center !important;
176+
}
177+
178+
.content-title img {
179+
width: 50px;
180+
height: 50px;
181+
}
182+
183+
.games-item_a .games-item_img {
184+
height: auto !important;
185+
border-radius: 15px 15px 0 0;
186+
}
187+
188+
.title-text {
189+
position: absolute;
190+
left: 0;
191+
bottom: 5px;
192+
display: flex;
193+
justify-content: center;
194+
width: 100%;
195+
}
196+
197+
.title-overflow {
198+
white-space: nowrap;
199+
overflow: hidden;
200+
text-overflow: ellipsis;
201+
}
202+
203+
.categories a {
204+
font-size: 26px !important;
205+
}
206+
207+
.categories {
208+
flex: 1 !important;
209+
display: flex;
210+
justify-content: center;
211+
}
212+
213+
header {
214+
background: url(https://www.4399.com/images/h5xyx/top-mask.png) repeat-x;
215+
}
216+
217+
.content {
218+
background-color: #fff;
219+
}
220+
221+
.play-imgs {
222+
cursor: pointer;
223+
position: absolute;
224+
right: 0;
225+
}
226+
227+
.play-imgs img {
228+
width: 50px;
229+
}
230+
231+
.img-fluid {
232+
width: 100%;
233+
}
234+
235+
.score-icon {
236+
display: inline-block;
237+
width: 24px;
238+
height: 24px;
239+
background-image: url(https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/imgs/start.svg);
240+
background-repeat: no-repeat;
241+
background-size: contain;
242+
}
243+
</style>
244+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/main.js"></script>
245+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/vue.min.js"></script>
246+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/axios.min.js"></script>
247+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/bootstrap.bundle.min.js"></script>
248+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/jquery-1.10.2.js"></script>
249+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/bootstrap-3.3.4.js"></script>
250+
<script src="https://cdn.jsdelivr.net/gh/youngjuning/cdn@main/poki/js/header/swiper.min.js"></script>
251+
<script>
252+
$(function () {
253+
//超过一定高度导航添加类名
254+
var nav = $("header"); //得到导航对象
255+
var win = $(window); //得到窗口对象
256+
var sc = $(document); //得到document文档对象。
257+
win.scroll(function () {
258+
if (sc.scrollTop() >= 100) {
259+
nav.addClass("on");
260+
} else {
261+
nav.removeClass("on");
262+
}
263+
})
264+
265+
//移动端展开nav
266+
$('#navToggle').on('click', function () {
267+
$('.m_nav').addClass('open');
268+
})
269+
//关闭nav
270+
$('.m_nav .top .closed').on('click', function () {
271+
$('.m_nav').removeClass('open');
272+
})
273+
274+
//二级导航 移动端
275+
$(".m_nav .ul li").click(function () {
276+
$(this).children("div.dropdown_menu").slideToggle('slow')
277+
$(this).siblings('li').children('.dropdown_menu').slideUp('slow');
278+
});
279+
})
280+
</script>
281+
<script>
282+
var vm = new Vue({
283+
el: '#app',
284+
data() {
285+
return {
286+
disabled: true,
287+
showCate: false,
288+
type: 'null',
289+
detail: {},
290+
gameChannelId: 0,
291+
categories: [
292+
{
293+
name: 'Beauty',
294+
id: 1
295+
},
296+
{
297+
name: 'Puzzle',
298+
id: 2
299+
},
300+
{
301+
name: 'Sports',
302+
id: 4
303+
},
304+
{
305+
name: 'New',
306+
id: 5
307+
},
308+
{
309+
name: 'Action',
310+
id: 8
311+
},
312+
{
313+
name: 'Best',
314+
id: 14
315+
},
316+
{
317+
name: 'Home',
318+
id: 15
319+
},
320+
]
321+
}
322+
},
323+
created() {
324+
this.getDetail()
325+
},
326+
mounted() {
327+
this.init()
328+
},
329+
methods: {
330+
init() {
331+
window.addEventListener("scroll", debounce(handleScroll, 500), true)
332+
this.type = getQueryVariable('type') ? getQueryVariable('type') : null
333+
},
334+
handleToPlay() {
335+
return `play.html?gameChannelId=${this.gameChannelId}&gameFileName=${this.detail.gameFileName}`
336+
},
337+
getDetail() {
338+
const gameId = getQueryVariable('gameId') ? getQueryVariable('gameId') : 1506
339+
axios({
340+
method: "post",
341+
url: "https://www.migame.vip/gamefront/gameList/tempGameDetails",
342+
data: {
343+
gameChannelId: this.gameChannelId,
344+
gameId
345+
}
346+
}).then(res => {
347+
this.detail = res.data.data
348+
this.disabled = false
349+
this.gameSrc = `https://www.datinginfo.top/game/index.html?gameFileName=${this.detail.gameFileName}/`
350+
this.$nextTick(() => {
351+
handleScroll()
352+
})
353+
})
354+
},
355+
handleToType({
356+
id,
357+
name
358+
}) {
359+
return `type.html?type=${id}&typeName=${name}&gameChannelId=${this.gameChannelId}`;
360+
},
361+
handleToDetail(gameId, type) {
362+
return `detail.html?gameId=${gameId}&gameChannelId=${this.gameChannelId}&type=${type}`
363+
}
364+
}
365+
})
366+
</script>
367+
</html>

0 commit comments

Comments
 (0)