-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
595 lines (495 loc) · 29.2 KB
/
Copy pathindex.html
File metadata and controls
595 lines (495 loc) · 29.2 KB
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeTestX - 在线编程训练平台</title>
<script src="/ast/3.4.16.js"></script>
<link href="/ast/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="/package/chart.umd.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
dark: '#1D2129',
light: '#F2F3F5',
success: '#52C41A',
warning: '#FAAD14',
danger: '#FF4D4F'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace']
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-custom {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
::-webkit-scrollbar{
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb{
background-color: #ccc;
border-radius: 10px;
}
</style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-custom">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<span class="text-primary text-2xl mr-2"><i class="fa fa-code"></i></span>
<span class="text-xl font-bold text-dark">Code-TestX</span>
</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="text-gray-600 hover:text-primary transition-custom font-medium">特色功能</a>
<a href="#problems" class="text-gray-600 hover:text-primary transition-custom font-medium">题库概览</a>
<a href="#path" class="text-gray-600 hover:text-primary transition-custom font-medium">学习路径</a>
<a href="#community" class="text-gray-600 hover:text-primary transition-custom font-medium">社区动态</a>
</nav>
<div class="flex items-center space-x-4">
<a href="/users/"
class="hidden sm:block px-4 py-2 text-primary border border-primary rounded-md hover:bg-primary/5 transition-custom font-medium">登录</a>
<a href="/users/"
class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 shadow-md hover:shadow-lg transition-custom font-medium">免费注册</a>
<button type="button" class="md:hidden text-gray-600 hover:text-primary" id="mobile-menu-button">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
</div>
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#features" class="block px-3 py-2 text-gray-600 hover:text-primary rounded-md">特色功能</a>
<a href="#problems" class="block px-3 py-2 text-gray-600 hover:text-primary rounded-md">题库概览</a>
<a href="#path" class="block px-3 py-2 text-gray-600 hover:text-primary rounded-md">学习路径</a>
<a href="#community" class="block px-3 py-2 text-gray-600 hover:text-primary rounded-md">社区动态</a>
<a href="/users/" class="block px-3 py-2 text-primary rounded-md">登录</a>
</div>
</div>
</div>
</header>
<main>
<section class="pt-32 pb-20 bg-gradient-to-br from-primary/5 to-secondary/5">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6">
提升编程技能的<br>
<span class="text-primary">最佳实践平台</span>
</h1>
<p class="text-gray-600 text-lg mb-8 max-w-xl">
支持多种编程语言在线评测，助你快速成长为编程高手
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="/users/"
class="px-8 py-3 bg-primary text-white text-center rounded-md hover:bg-primary/90 shadow-lg hover:shadow-xl transition-custom font-medium text-lg">
登录开始刷题
</a>
<a href="#path"
class="px-8 py-3 border border-gray-300 text-center rounded-md hover:border-primary hover:text-primary transition-custom font-medium text-lg">
了解学习路径
</a>
</div>
</div>
<div class="lg:w-1/2 relative">
<svg viewBox="0 0 800 500" class="w-full h-auto" xmlns="http://www.w3.org/2000/svg">
<rect x="300" y="420" width="200" height="10" rx="3" fill="#9CA3AF" />
<rect x="350" y="430" width="100" height="8" rx="2" fill="#6B7280" />
<rect x="100" y="50" width="600" height="370" rx="12" fill="#1F2937" />
<rect x="115" y="65" width="570" height="340" rx="8" fill="#111827" />
<rect x="130" y="80" width="540" height="310" rx="4" fill="#1E293B" />
<rect x="155" y="110" width="120" height="8" rx="3" fill="#3B82F6" opacity="0.6" />
<rect x="155" y="135" width="200" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="155" y="160" width="160" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="155" y="185" width="250" height="8" rx="3" fill="#34D399" opacity="0.6" />
<rect x="155" y="210" width="140" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="155" y="235" width="180" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="155" y="260" width="300" height="8" rx="3" fill="#FBBF24" opacity="0.6" />
<rect x="155" y="285" width="90" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="155" y="310" width="220" height="8" rx="3" fill="#60A5FA" opacity="0.5" />
<rect x="300" y="195" width="160" height="30" rx="4" fill="#10B981" opacity="0.3" />
<text x="380" y="216" font-family="'Fira Code', monospace" font-size="20" fill="#10B981"
text-anchor="middle" font-weight="bold">hello world</text>
<rect x="460" y="197" width="2" height="26" fill="#10B981" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.2;0.8" dur="1.2s"
repeatCount="indefinite" />
</rect>
<rect x="350" y="400" width="100" height="3" rx="2" fill="#4B5563" />
<circle cx="400" cy="58" r="4" fill="#374151" />
<circle cx="400" cy="58" r="2" fill="#1F2937" />
</svg>
</div>
</div>
</div>
</section>
<section id="features" class="py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">为什么选择 Code-TestX</h2>
<p class="text-gray-600 max-w-2xl mx-auto">我们提供全面的编程练习解决方案，帮助你高效提升编程能力</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-light rounded-xl p-6 hover:shadow-lg transition-custom group">
<div
class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5 group-hover:bg-primary/20 transition-custom">
<i class="fa fa-check-square-o text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">海量优质题库</h3>
<p class="text-gray-600">精选编程题，覆盖从入门到竞赛的各个难度级别，持续更新。</p>
</div>
<div class="bg-light rounded-xl p-6 hover:shadow-lg transition-custom group">
<div
class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5 group-hover:bg-primary/20 transition-custom">
<i class="fa fa-code text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">多语言支持</h3>
<p class="text-gray-600">支持 Python、C++、JavaScript 等多种主流编程语言的在线评测。</p>
</div>
<div class="bg-light rounded-xl p-6 hover:shadow-lg transition-custom group">
<div
class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5 group-hover:bg-primary/20 transition-custom">
<i class="fa fa-line-chart text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">学习进度跟踪</h3>
<p class="text-gray-600">实时记录你的答题数据，追踪不足</p>
</div>
<div class="bg-light rounded-xl p-6 hover:shadow-lg transition-custom group">
<div
class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5 group-hover:bg-primary/20 transition-custom">
<i class="fa fa-book text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">智能助手辅导</h3>
<p class="text-gray-600">遇到不会的题就问问AI吧</p>
</div>
<div class="bg-light rounded-xl p-6 hover:shadow-lg transition-custom group">
<div
class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-5 group-hover:bg-primary/20 transition-custom">
<i class="fa fa-trophy text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">定期编程竞赛</h3>
<p class="text-gray-600">每月举办在线编程竞赛，模拟真实比赛环境，检验学习成果。</p>
</div>
</div>
</div>
</section>
<section id="problems" class="py-20 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">题库概览(仅供参考)</h2>
<p class="text-gray-600 max-w-2xl mx-auto">多样化的题目分类，满足不同阶段的学习需求</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold mb-4">题目分类分布</h3>
<div class="h-80">
<canvas id="categoryChart"></canvas>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold mb-4">题目难度分布</h3>
<div class="h-80">
<canvas id="difficultyChart"></canvas>
</div>
</div>
</div>
<div class="mt-16">
<h3 class="text-xl font-semibold mb-6 text-center">查看样例题目（登录后可提交解答）</h3>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-6 border-b border-gray-100">
<div class="flex justify-between items-center mb-4">
<h4 class="text-lg font-semibold">两数之和</h4>
<span class="px-3 py-1 bg-success/10 text-success text-sm rounded-full">简单</span>
</div>
<p class="text-gray-600 mb-4">
给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。
</p>
<p class="text-gray-600 mb-4">
你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。
</p>
<p class="text-gray-600 mb-4">
你可以按任意顺序返回答案。
</p>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<p class="text-sm text-gray-500 mb-2">示例 1：</p>
<p class="font-mono text-sm">输入：nums = [2,7,11,15], target = 9</p>
<p class="font-mono text-sm">输出：[0,1]</p>
<p class="text-sm text-gray-500 mt-2">解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。</p>
</div>
<a href="/login"
class="inline-flex items-center text-primary hover:text-primary/80 transition-custom">
登录查看完整题目和提交解答
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="path" class="py-20 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">学习路径</h2>
<p class="text-gray-600 max-w-2xl mx-auto">系统化的学习路线，助你从编程小白成长为算法高手</p>
</div>
<div class="relative">
<div
class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform -translate-x-1/2">
</div>
<div class="space-y-12 relative">
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
<h3 class="text-xl font-semibold mb-2">编程入门</h3>
<p class="text-gray-600">掌握基本编程语法，了解变量、数据类型、循环和条件判断等基础知识。</p>
<div class="mt-4">
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">基础语法</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">简单算法</span>
</div>
</div>
<div
class="hidden md:block absolute left-1/2 w-10 h-10 bg-primary rounded-full transform -translate-x-1/2 flex items-center justify-center text-white font-bold">
1</div>
<div class="md:block md:w-1/2 md:pl-12 hidden">
</div>
</div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-12 hidden">
</div>
<div
class="hidden md:block absolute left-1/2 w-10 h-10 bg-primary rounded-full transform -translate-x-1/2 flex items-center justify-center text-white font-bold">
2</div>
<div class="md:w-1/2 md:pl-12">
<h3 class="text-xl font-semibold mb-2">数据结构基础</h3>
<p class="text-gray-600">学习数组、链表、栈、队列、哈希表等基本数据结构，掌握其特性和应用场景。</p>
<div class="mt-4">
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">数组</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">链表</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">哈希表</span>
</div>
</div>
</div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
<h3 class="text-xl font-semibold mb-2">算法进阶</h3>
<p class="text-gray-600">深入学习排序、查找、递归、分治等算法思想，提升问题解决能力。</p>
<div class="mt-4">
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">排序算法</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">二分查找</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">递归</span>
</div>
</div>
<div
class="hidden md:block absolute left-1/2 w-10 h-10 bg-primary rounded-full transform -translate-x-1/2 flex items-center justify-center text-white font-bold">
3</div>
<div class="md:block md:w-1/2 md:pl-12 hidden">
</div>
</div>
<div class="md:flex items-center">
<div class="md:w-1/2 md:pr-12 hidden">
</div>
<div
class="hidden md:block absolute left-1/2 w-10 h-10 bg-primary rounded-full transform -translate-x-1/2 flex items-center justify-center text-white font-bold">
4</div>
<div class="md:w-1/2 md:pl-12">
<h3 class="text-xl font-semibold mb-2">高级算法与竞赛</h3>
<p class="text-gray-600">学习动态规划、贪心、图论等高级算法，为编程竞赛做准备。</p>
<div class="mt-4">
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">动态规划</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">图论</span>
<span
class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full mr-2 mb-2">贪心算法</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="/users/"
class="inline-flex items-center px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 shadow-md hover:shadow-lg transition-custom font-medium">
登录查看完整学习路径
<i class="fa fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<section class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6">准备好提升你的编程技能了吗？</h2>
<p class="text-white/90 text-lg max-w-2xl mx-auto mb-8">
加入我们的编程社区，开始你的训练之旅
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="/users/"
class="px-8 py-3 bg-white text-primary rounded-md hover:bg-gray-100 shadow-lg hover:shadow-xl transition-custom font-medium text-lg">
立即注册
</a>
<a href="/users/"
class="px-8 py-3 border border-white text-white text-center rounded-md hover:bg-white/10 transition-custom font-medium text-lg">
已有账号？登录
</a>
</div>
</div>
</section>
</main>
<footer class="bg-dark text-white pt-16 pb-8">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center mb-6">
<span class="text-primary text-2xl mr-2"><i class="fa fa-code"></i></span>
<span class="text-xl font-bold">Code-TestX</span>
</div>
<p class="text-gray-400 mb-6">
专注于提供高质量的编程练习和算法训练平台，帮助开发者提升编程技能。
</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">快速链接</h4>
<ul class="space-y-3">
<li><a href="#features" class="text-gray-400 hover:text-white transition-custom">特色功能</a></li>
<li><a href="#problems" class="text-gray-400 hover:text-white transition-custom">题库概览</a></li>
<li><a href="#path" class="text-gray-400 hover:text-white transition-custom">学习路径</a></li>
<li><a href="#community" class="text-gray-400 hover:text-white transition-custom">社区动态</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-6">联系我们</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fa fa-envelope-o text-primary mt-1 mr-3"></i>
<span class="text-gray-400">yh-gzs@vip.qq.com</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8">
<p class="text-gray-500 text-center text-sm">
© 2025 Code-TestX. 保留所有权利。
</p>
</div>
</div>
</footer>
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function () {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
window.addEventListener('scroll', function () {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('shadow-md');
header.classList.remove('shadow-sm');
} else {
header.classList.remove('shadow-md');
header.classList.add('shadow-sm');
}
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
window.addEventListener('load', function () {
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
new Chart(categoryCtx, {
type: 'doughnut',
data: {
labels: ['数组', '字符串', '链表', '树', '图', '动态规划', '贪心', '其他'],
datasets: [{
data: [250, 200, 180, 220, 150, 300, 150, 550],
backgroundColor: [
'#165DFF',
'#36CFC9',
'#722ED1',
'#FAAD14',
'#F5222D',
'#52C41A',
'#FA8C16',
'#8C8C8C'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right'
}
}
}
});
const difficultyCtx = document.getElementById('difficultyChart').getContext('2d');
new Chart(difficultyCtx, {
type: 'bar',
data: {
labels: ['简单', '中等', '困难', '极难'],
datasets: [{
label: '题目数量',
data: [600, 900, 400, 100],
backgroundColor: [
'#52C41A',
'#FAAD14',
'#FA8C16',
'#F5222D'
],
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>