飞天AI数字人展会页面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

323 lines
12 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  8. <meta http-equiv="Pragma" content="no-cache" />
  9. <meta http-equiv="Expires" content="0" />
  10. <link rel="stylesheet" type="text/css" href="css/libs/reset.css" />
  11. <link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" />
  12. <link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" />
  13. <link rel="stylesheet" type="text/css" href="css/index.css" />
  14. <!--[if lt IE 9]>
  15. <script src="js/html5shiv.js"></script>
  16. <script src="js/respond.min.js"></script>
  17. <![endif]-->
  18. <title>AI大模型</title>
  19. </head>
  20. <body>
  21. <div class="ai-wrapper">
  22. <video class="ai-bg" src="images/bg2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
  23. <div class="ai-header-wrapper">
  24. <div class="ai-header">
  25. <div class="header-left">
  26. <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
  27. <div class="header-btn header-return" onclick="history.go(-1); return false;"><span></span><p>返回</p></div>
  28. </div>
  29. <div class="header-title">
  30. <h2>AI大模型</h2>
  31. </div>
  32. <div class="header-btn header-login"><span></span><p>登录</p></div>
  33. </div>
  34. </div>
  35. <!-- AI资源库 - AI大模型 -->
  36. <div class="page-content">
  37. <div id="tj_container" class="tj_container">
  38. <span id="tj_prev" class="page-list-btn tj_prev"></span>
  39. <div class="tj_wrapper">
  40. <ul class="tj_gallery">
  41. <li>
  42. <a href="page-pdf.html">
  43. <div class="tj-list-img mask-active">
  44. <img src="images/img-bg.png" alt="" />
  45. <span></span>
  46. </div>
  47. <p>click --- pdf-全国大学生机器人大赛</p>
  48. </a>
  49. </li>
  50. <li>
  51. <a href="page-codeVideo.html">
  52. <div class="tj-list-img mask-active">
  53. <img src="images/img-bg.png" alt="" />
  54. <span></span>
  55. </div>
  56. <p>click --- 编程视频-全国青少年人工智能创新挑战赛</p>
  57. </a>
  58. </li>
  59. <li class="perviewVideo">
  60. <a href="javascript:;">
  61. <div class="tj-list-img mask-active">
  62. <img src="images/img-bg.png" alt="" />
  63. <span></span>
  64. </div>
  65. <p>click --- 视频-辽宁省青少年机器人竞赛</p>
  66. <input type="hidden" value="media/video/lejurobot/1.CRAIC决赛现场惊现蛄蛹者.mp4" />
  67. </a>
  68. </li>
  69. <li>
  70. <a href="page-pdfVideo.html">
  71. <div class="tj-list-img mask-active">
  72. <img src="images/img-bg.png" alt="" />
  73. <span></span>
  74. </div>
  75. <p>click --- pdf视频-世界青少年机器人奥林匹克竞赛</p>
  76. </a>
  77. </li>
  78. <li>
  79. <a href="javascript:;">
  80. <div class="tj-list-img mask-active">
  81. <img src="images/img-bg.png" alt="" />
  82. <span></span>
  83. </div>
  84. <p>2023世界机器人大赛</p>
  85. </a>
  86. </li>
  87. <li>
  88. <a href="javascript:;">
  89. <div class="tj-list-img mask-active">
  90. <img src="images/img-bg.png" alt="" />
  91. <span></span>
  92. </div>
  93. <p>全国青少年人工智能创新挑战赛</p>
  94. </a>
  95. </li>
  96. <li>
  97. <a href="javascript:;">
  98. <div class="tj-list-img mask-active">
  99. <img src="images/img-bg.png" alt="" />
  100. <span></span>
  101. </div>
  102. <p>颜色识别分类7</p>
  103. </a>
  104. </li>
  105. <li>
  106. <a href="javascript:;">
  107. <div class="tj-list-img mask-active">
  108. <img src="images/img-bg.png" alt="" />
  109. <span></span>
  110. </div>
  111. <p>uLtraArm套装8</p>
  112. </a>
  113. </li>
  114. <li>
  115. <a href="javascript:;">
  116. <div class="tj-list-img mask-active">
  117. <img src="images/img-bg.png" alt="" />
  118. <span></span>
  119. </div>
  120. <p>颜色识别分类9</p>
  121. </a>
  122. </li>
  123. <li>
  124. <a href="javascript:;">
  125. <div class="tj-list-img mask-active">
  126. <img src="images/img-bg.png" alt="" />
  127. <span></span>
  128. </div>
  129. <p>uLtraArm套装10</p>
  130. </a>
  131. </li>
  132. <li>
  133. <a href="javascript:;">
  134. <div class="tj-list-img mask-active">
  135. <img src="images/img-bg.png" alt="" />
  136. <span></span>
  137. </div>
  138. <p>颜色识别分类11</p>
  139. </a>
  140. </li>
  141. <li>
  142. <a href="javascript:;">
  143. <div class="tj-list-img mask-active">
  144. <img src="images/img-bg.png" alt="" />
  145. <span></span>
  146. </div>
  147. <p>uLtraArm套装12</p>
  148. </a>
  149. </li>
  150. <li>
  151. <a href="javascript:;">
  152. <div class="tj-list-img mask-active">
  153. <img src="images/img-bg.png" alt="" />
  154. <span></span>
  155. </div>
  156. <p>颜色识别分类13</p>
  157. </a>
  158. </li>
  159. <li>
  160. <a href="javascript:;">
  161. <div class="tj-list-img mask-active">
  162. <img src="images/img-bg.png" alt="" />
  163. <span></span>
  164. </div>
  165. <p>uLtraArm套装14</p>
  166. </a>
  167. </li>
  168. <li>
  169. <a href="javascript:;">
  170. <div class="tj-list-img mask-active">
  171. <img src="images/img-bg.png" alt="" />
  172. <span></span>
  173. </div>
  174. <p>颜色识别分类15</p>
  175. </a>
  176. </li>
  177. <li>
  178. <a href="javascript:;">
  179. <div class="tj-list-img mask-active">
  180. <img src="images/img-bg.png" alt="" />
  181. <span></span>
  182. </div>
  183. <p>uLtraArm套装16</p>
  184. </a>
  185. </li>
  186. <li>
  187. <a href="javascript:;">
  188. <div class="tj-list-img mask-active">
  189. <img src="images/img-bg.png" alt="" />
  190. <span></span>
  191. </div>
  192. <p>颜色识别分类17</p>
  193. </a>
  194. </li>
  195. <li>
  196. <a href="javascript:;">
  197. <div class="tj-list-img mask-active">
  198. <img src="images/img-bg.png" alt="" />
  199. <span></span>
  200. </div>
  201. <p>uLtraArm套装18</p>
  202. </a>
  203. </li>
  204. </ul>
  205. </div>
  206. <span id="tj_next" class="page-list-btn tj_next"></span>
  207. </div>
  208. </div>
  209. <!-- 账号:admin 密码:83560792 -->
  210. <!-- 登录 -->
  211. <div id="form-layer" class="layer-login" style="display: none;">
  212. <h3>账号登录</h3>
  213. <ul class="login-form">
  214. <li>
  215. <p>账号</p>
  216. <input type="text" placeholder="请输入账号" value="admin" />
  217. </li>
  218. <li>
  219. <p>密码</p>
  220. <input type="password" placeholder="请输入密码" value="83560792" />
  221. </li>
  222. </ul>
  223. <button type="submit" class="login-submit" id="btn-submit-form">立即登录</button>
  224. </div>
  225. <div id="user-layer" class="layer-login" style="display: none;">
  226. <div class="user-info">
  227. <img src="images/index-img2.png" alt="" />
  228. <p class="user-name">Admin</p>
  229. <ul class="user-other">
  230. <li>
  231. <p>8个</p>
  232. <span>代码上传</span>
  233. </li>
  234. <li>
  235. <p>100</p>
  236. <span>积分</span>
  237. </li>
  238. <li>
  239. <p>10</p>
  240. <span>获赞</span>
  241. </li>
  242. </ul>
  243. <div class="change-accout-btn">切换账号</div>
  244. </div>
  245. </div>
  246. <!-- 微信登录 -->
  247. <div id="wechat-layer" class="layer-login" style="display: none;">
  248. <h3>账号登录</h3>
  249. <div class="wechat-login">
  250. <img src="images/wechat.png" alt="" />
  251. <span>请使用微信扫描二维码登录</span>
  252. </div>
  253. </div>
  254. </div>
  255. </body>
  256. <script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
  257. <script type="text/javascript" src="js/libs/flexible.js"></script>
  258. <!-- 弹出框 -->
  259. <script type="text/javascript" src="js/libs/layer/layer.js"></script>
  260. <!-- 模块切换 -->
  261. <script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script>
  262. <script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script>
  263. <script type="text/javascript" src="js/index.js"></script>
  264. <script type="text/javascript">
  265. $(function () {
  266. // 列表切换效果
  267. $('#tj_container').gridnav({
  268. type: {
  269. mode: 'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
  270. speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
  271. easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
  272. factor: 50, // for seqfade, sequpdown, rows
  273. reverse: false, // for sequpdown
  274. },
  275. })
  276. // 点击查看视频
  277. $('.perviewVideo').on('click', function () {
  278. var title = $(this).find('p').html()
  279. var videoSrc = $(this).find('input').val();
  280. // 创建一个临时的 video 元素 测试视频地址
  281. var videoElement = document.createElement('video');
  282. videoElement.src = videoSrc;
  283. videoElement.style.display = 'none';
  284. document.body.appendChild(videoElement);
  285. videoElement.play()
  286. .then(() => {
  287. // 视频成功
  288. layer.open({
  289. type: 1,
  290. skin: 'layui-layer-video',
  291. title: title, // 视频标题部分 - 修改
  292. area: ['15rem', '10rem'],
  293. shade: 0.8,
  294. shadeClose: true,
  295. content: '<div id="videoBox">'
  296. +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
  297. +'<source src="'+videoSrc+'" type="video/mp4">'
  298. +'</video>'
  299. +' </div>',
  300. });
  301. })
  302. .catch(error => {
  303. layer.open({
  304. type: 1,
  305. skin: 'layui-layer-video',
  306. title: title, // 视频标题部分 - 修改
  307. area: ['15rem', '10rem'],
  308. shade: 0.8,
  309. shadeClose: true,
  310. content: '<div class="empty-data">'
  311. +'<img src="images/index-img9.png" alt="" />'
  312. +'<p>视频无法播放,请检查视频源</p>'
  313. +'</div>',
  314. });
  315. });
  316. })
  317. })
  318. </script>
  319. </html>