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.
324 lines
12 KiB
324 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
|
<!--[if lt IE 9]>
|
|
<script src="js/html5shiv.js"></script>
|
|
<script src="js/respond.min.js"></script>
|
|
<![endif]-->
|
|
<title>机器人</title>
|
|
</head>
|
|
<body>
|
|
<div class="ai-wrapper">
|
|
<video class="ai-bg" src="images/bg2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
|
|
<div class="ai-header-wrapper">
|
|
<div class="ai-header">
|
|
<div class="header-left">
|
|
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
|
|
<div class="header-btn header-return" onclick="history.go(-1); return false;"><span></span><p>返回</p></div>
|
|
</div>
|
|
<div class="header-title">
|
|
<h2>机器人</h2>
|
|
</div>
|
|
<div class="header-btn header-login"><span></span><p>登录</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI资源库 - 机器人 -->
|
|
<div class="page-content">
|
|
<div id="tj_container" class="tj_container">
|
|
<span id="tj_prev" class="page-list-btn tj_prev"></span>
|
|
<div class="tj_wrapper">
|
|
<ul class="tj_gallery">
|
|
<li>
|
|
<a href="page-pdf.html">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>click --- pdf -全国大学生机器人大赛</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="page-codeVideo.html">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>click --- 编程视频 -全国青少年人工智能创新挑战赛</p>
|
|
</a>
|
|
</li>
|
|
<li class="perviewVideo">
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>click --- 视频 -辽宁省青少年机器人竞赛</p>
|
|
<input type="hidden" value="media/video/elephant/入门级开源机械臂ultraArm套装.mp4" />
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="page-pdfVideo.html">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>click --- pdf视频 -世界青少年机器人奥林匹克竞赛</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>2023世界机器人大赛</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>全国青少年人工智能创新挑战赛</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类7</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装8</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类9</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装10</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类11</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装12</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类13</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装14</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类15</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装16</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>颜色识别分类17</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;">
|
|
<div class="tj-list-img mask-active">
|
|
<img src="images/img-bg.png" alt="" />
|
|
<span></span>
|
|
</div>
|
|
<p>uLtraArm套装18</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<span id="tj_next" class="page-list-btn tj_next"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 账号：admin 密码：83560792 -->
|
|
<!-- 登录 -->
|
|
<div id="form-layer" class="layer-login" style="display: none;">
|
|
<h3>账号登录</h3>
|
|
<ul class="login-form">
|
|
<li>
|
|
<p>账号</p>
|
|
<input type="text" placeholder="请输入账号" value="admin" />
|
|
</li>
|
|
<li>
|
|
<p>密码</p>
|
|
<input type="password" placeholder="请输入密码" value="83560792" />
|
|
</li>
|
|
</ul>
|
|
<button type="submit" class="login-submit" id="btn-submit-form">立即登录</button>
|
|
</div>
|
|
<div id="user-layer" class="layer-login" style="display: none;">
|
|
<div class="user-info">
|
|
<img src="images/index-img2.png" alt="" />
|
|
<p class="user-name">Admin</p>
|
|
<ul class="user-other">
|
|
<li>
|
|
<p>8个</p>
|
|
<span>代码上传</span>
|
|
</li>
|
|
<li>
|
|
<p>100</p>
|
|
<span>积分</span>
|
|
</li>
|
|
<li>
|
|
<p>10</p>
|
|
<span>获赞</span>
|
|
</li>
|
|
</ul>
|
|
<div class="change-accout-btn">切换账号</div>
|
|
</div>
|
|
</div>
|
|
<!-- 微信登录 -->
|
|
<div id="wechat-layer" class="layer-login" style="display: none;">
|
|
<h3>账号登录</h3>
|
|
<div class="wechat-login">
|
|
<img src="images/wechat.png" alt="" />
|
|
<span>请使用微信扫描二维码登录</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
|
|
<script type="text/javascript" src="js/libs/flexible.js"></script>
|
|
<!-- 弹出框 -->
|
|
<script type="text/javascript" src="js/libs/layer/layer.js"></script>
|
|
<!-- 模块切换 -->
|
|
<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script>
|
|
<script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script>
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
// 列表切换效果
|
|
$('#tj_container').gridnav({
|
|
type: {
|
|
mode: 'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
|
|
speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
|
|
easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
|
|
factor: 50, // for seqfade, sequpdown, rows
|
|
reverse: false, // for sequpdown
|
|
},
|
|
})
|
|
// 点击查看视频
|
|
$('.perviewVideo').on('click', function () {
|
|
var title = $(this).find('p').html()
|
|
var videoSrc = $(this).find('input').val();
|
|
|
|
// 创建一个临时的 video 元素 测试视频地址
|
|
var videoElement = document.createElement('video');
|
|
videoElement.src = videoSrc;
|
|
videoElement.style.display = 'none';
|
|
document.body.appendChild(videoElement);
|
|
|
|
videoElement.play()
|
|
.then(() => {
|
|
// 视频成功
|
|
layer.open({
|
|
type: 1,
|
|
skin: 'layui-layer-video',
|
|
title: title, // 视频标题部分 - 修改
|
|
area: ['15rem', '10rem'],
|
|
shade: 0.8,
|
|
shadeClose: true,
|
|
content: '<div id="videoBox">'
|
|
+'<video id="myVideo" width="100%" height="100%" controls autoplay>'
|
|
+'<source src="'+videoSrc+'" type="video/mp4">'
|
|
+'</video>'
|
|
+' </div>',
|
|
});
|
|
})
|
|
.catch(error => {
|
|
layer.open({
|
|
type: 1,
|
|
skin: 'layui-layer-video',
|
|
title: title, // 视频标题部分 - 修改
|
|
area: ['15rem', '10rem'],
|
|
shade: 0.8,
|
|
shadeClose: true,
|
|
content: '<div class="empty-data">'
|
|
+'<img src="images/index-img9.png" alt="" />'
|
|
+'<p>视频无法播放，请检查视频源</p>'
|
|
+'</div>',
|
|
});
|
|
});
|
|
})
|
|
})
|
|
</script>
|
|
|
|
</html>
|