-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (201 loc) · 10.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>幻想乡 - 首页</title>
<script>
const jumpToDetail = (info) => {
localStorage.setItem('detailInfo', JSON.stringify(info))
location.href = '/pages/detail.html'
}
</script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary shadow-lg mb sticky-top border-bottom">
<div class="container-fluid">
<a class="navbar-brand flex flex-items-center" href="javascript:;">
<img src="/img/logo.jpg" alt="Logo" width="50" height="50" class="d-inline-block align-text-top b-rd" />
<span class="ml-5">幻想乡</span>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active important-flex" aria-current="page" href="javascript:;">
<div class="i-ant-design-home-twotone text-xl mt-0.6"></div>
首页
</a>
</li>
<li class="nav-item">
<a class="nav-link important-flex" href="#">
<div class="i-ant-design-fire-twotone text-xl mt-0.6"></div>
TV动画
</a>
</li>
<li class="nav-item">
<a class="nav-link important-flex" href="#">
<div class="i-ant-design-video-camera-twotone text-xl mt-0.6"></div>
剧场版
</a>
</li>
<li class="nav-item">
<a class="nav-link important-flex" href="/pages/rank.html">
<div class="i-ant-design-crown-twotone text-xl mt-0.6"></div>
排行榜
</a>
</li>
<li class="nav-item">
<a class="nav-link important-flex" href="/pages/board.html">
<div class="i-ant-design-message-twotone text-xl mt-0.6"></div>
留言板
</a>
</li>
</ul>
<!-- 右侧操作区 -->
<div class="input-group important-w-40 mr-10 mb mt">
<span class="input-group-text" id="basic-addon1">
<div class="i-ant-design-search-outlined text-xl"></div>
</span>
<input type="text" class="form-control" placeholder="搜索..." aria-label="search" aria-describedby="basic-addon1" />
</div>
<div class="nav-op mb mt">
<button type="button" id="loginBtn" class="btn btn-outline-primary rounded-pill">登录</button>
<button type="button" class="btn btn-primary swiper-btn rounded-pill">下载APP</button>
</div>
</div>
</div>
</nav>
<!-- 导航栏 END -->
<!-- 首页主体 -->
<div class="container-fluid">
<!-- 轮播 -->
<div class="swiper hot-swiper rounded-4">
<div class="swiper-wrapper">
<!-- 轮播 1 -->
<div class="swiper-slide">
<div class="swiper-img swiper-img-3"></div>
<div class="swiper-inner">
<div class="swiper-cate">
<span class="pl-2">连载新番</span>
</div>
<h1 class="swiper-name mt-2">咒术回战 第二季</h1>
<div class="swiper-badge-block mt-3">
<span class="swiper-badge">2023</span>
<span class="swiper-badge ml-4">更新至 16 集</span>
</div>
<p class="swiper-intro">
最强2人，回不去的青春。2017年12月，乙骨忧太解除了祈本里香的诅咒。追溯到2006年（春天），高专时代的五条悟与夏油杰。作为咒术师活跃着，所向披靡的2人，接受来自咒术界拥有不死术式的要·天元的委托。委托有两个，天元的的适合者——被选中成为“星浆体”的天内理子，对那个少女的“护卫”和“抹去”两人为了维持咒术界而进行护卫任务，在那里自称伏黑的“术师杀手”以暗杀“星浆体”为目标介入。在之后被称为最强的咒术师和最恶的咒术师，五条与夏油，两人的过去被揭开…
</p>
<button type="button" class="btn btn-primary swiper-btn">立即播放</button>
</div>
</div>
<!-- 轮播 2 -->
<div class="swiper-slide">
<div class="swiper-img swiper-img-2"></div>
<div class="swiper-inner">
<div class="swiper-cate">
<span class="pl-2">连载新番</span>
</div>
<h1 class="swiper-name mt-2">超超超超超喜欢你的100个女朋友</h1>
<div class="swiper-badge-block mt-3">
<span class="swiper-badge">2023</span>
<span class="swiper-badge ml-4">更新至 06 集</span>
</div>
<p class="swiper-intro">
初中的毕业典礼上，爱城恋太郎进行了人生的第100次告白，但和先前的99次一样，都被拒绝了。恋太郎在男女间的评价一直都很好，但总是无法被女孩当作恋爱对象。这天，恋太郎来到了祈求缘分的神社，在他虔诚膜拜时，神出现了。神告诉恋太郎，在升上高中后恋太郎将会遇到命运之人，并且总共有100人……。DEAD·OR·LOVE的学园新生活开幕！！
</p>
<button type="button" class="btn btn-primary swiper-btn">立即播放</button>
</div>
</div>
<!-- 轮播 3 -->
<div class="swiper-slide">
<div class="swiper-img swiper-img-1"></div>
<div class="swiper-inner">
<div class="swiper-cate">
<span class="pl-2">连载新番</span>
</div>
<h1 class="swiper-name mt-2">葬送的芙莉莲</h1>
<div class="swiper-badge-block mt-3">
<span class="swiper-badge">2023</span>
<span class="swiper-badge ml-4">更新至 10 集</span>
</div>
<p class="swiper-intro">
改编自原作山田钟人，作画阿部司的同名漫画。在打倒了魔王的勇者一行人当中，魔法使芙莉莲是一位精灵，她和另外三人有着不一样的地方。生活在“之后”的世界里，她感受到了什么；留下来的人们所编织的葬送与祈祷又意味着什么……故事将从“冒险的结束”开始。这是讲述英雄们的活法的，日后谈奇幻作品！
</p>
<button type="button" class="btn btn-primary swiper-btn">立即播放</button>
</div>
</div>
<!-- 轮播 4 -->
<div class="swiper-slide">
<div class="swiper-img swiper-img-4"></div>
<div class="swiper-inner">
<div class="swiper-cate">
<span class="pl-2">连载新番</span>
</div>
<h1 class="swiper-name mt-2">间谍过家家 第二季</h1>
<div class="swiper-badge-block mt-3">
<span class="swiper-badge">2023</span>
<span class="swiper-badge ml-4">更新至 06 集</span>
</div>
<p class="swiper-intro">
每个人都有不可告人的一面——这是一个世界各国均暗地里进行激烈情报战的时代。东国（Ostania）与西国（Westalis）的冷战状态已经持续数十年。“黄昏”是西国情报局东国对策科“WISE”的一名优秀间谍。为调查威胁东西两国和平的人物——东国国家统一党总裁多诺万·德斯蒙，上级给予了他一个绝密任务。任务名为：“枭”（Strix）行动。内容是“一周之内组建家庭，潜入德斯蒙儿子就读的名门学校的联谊会”。于是“黄昏”扮演成精神科医生劳埃德·福杰，开始组建家庭。然而，他找来的女儿阿尼亚是个能读心的超能力者，妻子约尔是个杀手。三人利害关系一致，便互相隐瞒身份，开始了共同生活。世界的和平，就掌握在这意外不断的临时一家人手中。
</p>
<button type="button" class="btn btn-primary swiper-btn">立即播放</button>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- 连载新番 -->
<section>
<h2 class="mt-8 mb">连载新番（周人气）</h2>
<div>
<div class="row row-cols-2 mb mt-8" id="section-lz1"></div>
<div class="row row-cols-2 mb mt-8" id="section-lz2"></div>
</div>
</section>
<!-- 连载新番 END -->
<!-- 完结番剧 -->
<section>
<h2 class="mt-8 mb">完结番剧（周人气）</h2>
<div>
<div class="row row-cols-2 mb mt-8" id="section-wj1"></div>
<div class="row row-cols-2 mb mt-8" id="section-wj2"></div>
</div>
</section>
<!-- 完结番剧 END -->
<!-- 动漫剧场 -->
<section>
<h2 class="mt-8 mb">动漫剧场（周人气）</h2>
<div>
<div class="row row-cols-2 mb mt-8" id="section-jc1"></div>
<div class="row row-cols-2 mb mt-8" id="section-jc2"></div>
</div>
</section>
<!-- 动漫剧场 END -->
</div>
<!-- 首页主体 END -->
<!-- Footer -->
<footer>
<p>©2023 By baby李</p>
<p>苏 ICP 备 2022010832 号 - 1</p>
</footer>
<!-- Footer END -->
<!-- 隐藏域 -->
<div class="icon i-ant-design-play-circle-filled" style="display: none"></div>
<!-- 隐藏域 END -->
<script type="module" src="/src/entries/main.ts"></script>
</body>
</html>