0821

10 months ago · 193239b1c5
20 changed files with 2161 additions and 71 deletions
--- a/ai_chat.html
+++ b/ai_chat.html
@ -43,11 +43,60 @@
        </div>
      </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/layer/layer.js"></script>
 <script type="text/javascript" src="js/libs/flexible.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script>
  $(document).ready(function() {
      const $sendButton = $('.send-button');
@ -173,7 +222,7 @@
        let messageContent
        if (isLoading) {
            messageContent = '<p class="loading"><i></i><i></i><i></i></p>';
            messageContent = '<p class="loading"><img src="images/loading.webp" alt="" /></p>';
        } else {
            // 当isUserMessage为false时，才添加<span>停止输出</span>
            messageContent = isUserMessage
--- a/css/index.css
+++ b/css/index.css
@ -16,6 +16,10 @@
  background-color: transparent;
 }
 textarea {  
  resize: none; /* 禁止用户手动拖动调整大小 */  
 } 
 textarea::-webkit-input-placeholder { /* Chrome, Opera, Safari */
  color: #fff;
 }
@ -668,12 +672,12 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  cursor: default;
 }
 .chat-message img {
 /* .chat-message img {
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
 }
 } */
 .bot-message {
  display: flex;
@ -695,8 +699,13 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  align-items: center;
  height: .825rem;
 }
 .loading img{
  display: block;
  width: .8375rem;
  margin:  0 .1rem;
 }
 .loading i {
 /* .loading i {
  display: block;
  width: .15rem;
  height: .15rem;
@ -729,8 +738,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   transform: scale(1.1);
   opacity: 0.8;
 }
 }
 } */
 .chat-send {
  width: 100%;
@ -817,4 +825,291 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
 .program-mode .swiper-next{
  right: 1rem;
 }
 /* layer 样式修改 */
 .layui-layer-video{
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  border-radius: 0.1rem !important;
 }
 .layui-layer-video .layui-layer-title{
  font-size: .3rem !important;
  font-weight: 500;
  color: #fff !important;
  background: linear-gradient( 90deg, #5B9DFF 0%, rgba(91,157,255,0) 100%);
  border-bottom: none !important;
  border-radius: 0.1rem .1rem 0 0  !important;
 }
 .layui-layer-setwin{
  right: .125rem !important;
  top: .125rem !important;
 }
 .layui-layer-setwin a.layui-layer-close{
  width: .4rem !important;
  height: .4rem !important;
  color: #fff !important;
  background: url("../../images/index-img3.png") no-repeat left top  !important;
  background-size: .4rem .4rem  !important;
 }
 .layui-layer-video .layui-layer-content{
  padding: .3rem !important;
 }
 .layui-layer-video.layui-layer-iframe iframe{
  height: 8.75rem !important;
 }
 /* pdf页面 */
 .perview-wrapper{
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  font-family: 'PingFang';
 }
 .style-line-top{
  width: 100%;
  height: .05rem;
  background: linear-gradient( 90deg, #5B9DFF 0%, #5B9DFF 100%);
  box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF;
 }
 .perview-wrapper .ai-header-wrapper{
  height: 1rem;
  font-family: 'DOUYU-Regular';
 }
 .perview-wrapper .ai-header{
  height: calc(100% - .05rem);
 }
 .perview-wrapper .header-left{
  top: .15rem;
  left: -0.125rem;
 }
 .perview-wrapper .header-login{
  top: .15rem;
 }
 #my-pdf {
  position: fixed;
  top: 1rem;
  left: 0;
  width: calc(100vw);
  height: calc(100vh - 1rem);
  z-index: 999;
 }
 #leftpdf{
  height: calc(100%);
 }
 .perview-codeVideo{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  height: calc(100vh - 1.3rem);
  padding: 0 .3rem .3rem .3rem;
  background: url("../images/content-bg.png") no-repeat right bottom;
  background-size: 9.2875rem 8.55rem;
 }
 .perview-code{
  position: relative;
  width: 15.7rem;
  height: 12.2rem;
  overflow: hidden;
  background-color: #000;
 }
 .empty-data{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  text-align: center;
  font-size: .35rem;
  color: #fff;
  transform: translate(-50%,-50%);
 }
 .empty-data img{
  display: block;
  width: 100%;
 }
 .perview-video{
  width: 7.4rem;
 }
 .video-content {
  width: 100%;
  height: 4.5rem;
  background-color: #000;
  overflow: hidden;
 }
 .perview-info{
  font-size: .35rem;
  color: #fff;
 }
 .perview-info li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: .525rem;
  margin-top: .5rem;
 }
 .perview-info li i{
  position: relative;
  display: block;
  color: #83D2FE;
  padding-left: .5rem;
 }
 .perview-info li i::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .45rem;
  height: .45rem;
  margin-top: -0.225rem;
 }
 .perview-info li:nth-child(1) i::before {
  background: url("../images/index-img10.png") no-repeat left top;
  background-size: cover;
 }
 .perview-info li:nth-child(2) i::before {
  background: url("../images/index-img11.png") no-repeat left top;
  background-size: cover;
 }
 .perview-info li:nth-child(3) i::before {
  background: url("../images/index-img12.png") no-repeat left top;
  background-size: cover;
 }
 .perview-info li:nth-child(4) i::before {
  background: url("../images/index-img13.png") no-repeat left top;
  background-size: cover;
 }
 .perview-info li:nth-child(5) i::before {
  background: url("../images/index-img14.png") no-repeat left top;
  background-size: cover;
 }
 /* 登录 */
 .layui-layer.layui-layer-login{
  background-color: transparent !important;
 }
 .layui-layer.layui-layer-login .layui-layer-setwin{
  right: 40px !important;
  top: 40px !important;
 }
 .layer-login{
  font-family: 'PingFang';
  width: 400px!important;
  height: 560px!important;
  padding: .5rem !important;
  background: linear-gradient( 180deg, #183375 0%, #122050 100%);
  border-radius: .1rem!important;
  z-index: 9999;
 }
 .layer-login h3{
  font-family: 'DOUYU-Regular';
  text-align: center;
  font-size: .45rem;
  background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%);
  background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0px 0px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68);
 }
 .login-form{
  font-size: .35rem;
  color: #fff;
  padding: .8rem 0 .375rem 0;
 }
 .login-form input{
  display: block;
  width: calc(100% - .4rem);
  height: .8rem;
  line-height: .8rem;
  padding: 0 .2rem;
  border: 1px solid #6078CB;
  background-color: #111E4B;
  border-radius: .1rem;
  font-size: .3rem;
  color: #CCCCCC;
  margin: .075rem 0 .3rem 0;
 }
 ::-ms-reveal {
  filter: invert(100%);
 }
 .login-submit{
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  font-size: .35rem;
  color: #fff;
  background: linear-gradient( 135deg, #06BFFF 0%, #2B74FF 100%);
  text-align: center;
  border-radius: .8rem;
  cursor: pointer;
 }
 .user-info {
  font-size: .35rem;
  color: #fff;
  text-align: center;
 }
 .user-info img{
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
 }
 .user-name{
  margin-top: .3rem;
  font-size: .5rem;
 }
 .user-other{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: .5rem 0 .75rem 0;
 }
 .user-other li span{
  font-size: .3rem;
  color: rgba(255,255,255,0.6);
 }
 .change-accout-btn{
  width: 100%;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  border-radius: .8rem;
  border: 1px solid #06BFFF;
  cursor: pointer;
 }
 .wechat-login{
  padding-top: .8rem;
 }
 .wechat-login img{
  display: block;
  width: 4rem;
  margin: 0 auto;
 }
 .wechat-login span{
  display: block;
  font-size: .35rem;
  color: #fff;
  margin-top: .3rem;
  text-align: center;
 }
--- a/images/loading.webp
+++ b/images/loading.webp
--- a/images/wechat.png
+++ b/images/wechat.png
--- a/index.html
+++ b/index.html
@ -86,10 +86,57 @@
    </div>
    <!-- 退出程序 -->
    <div class="doubleExit"></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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/index2.html
+++ b/index2.html
@ -86,10 +86,57 @@
    </div>
    <!-- 退出程序 -->
    <div class="doubleExit"></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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/index3.html
+++ b/index3.html
@ -86,10 +86,57 @@
    </div>
    <!-- 退出程序 -->
    <div class="doubleExit"></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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/js/index.js
+++ b/js/index.js
@ -1,6 +1,96 @@
 var ajaxUrl = 'http://192.168.99.86:3001'
 $(function () {
  console.log(localStorage.getItem("userName"))
  if(localStorage.getItem("userName")){
    $(".header-login p").html(localStorage.getItem("userName"))
    $(".header-login").removeClass('login-user').addClass('login-active')
  }else{
    $(".header-login").removeClass('login-active').addClass('login-user')
  }
  //登录
  $('.login-user').on('click', function () {
    layer.open({
      type: 1,
      skin: 'layui-layer-login', //样式类名
      title: false,
      anim: 2,
      shade: 0.8,
      shadeClose: false, //开启遮罩关闭
      content: $('#form-layer'),
      cancel: function(index, layero){
        // layer.close(index);
        //  alert("你点击了右上角的X");
      }
    });
  })
  // 登录提交
  $('.login-submit').on('click', function (event) {
    event.preventDefault();
    var username = $('input[type="text"]').val();
    var password = $('input[type="password"]').val();
    if (username === '' || password === '') {
      layer.msg('账号和密码不能为空！', {
        offset: 50,
        anim: 6
      });
      return;
    }
    // 检查账号是否为 "admin" 且密码是否为 "83560792"
    if (username !== 'admin' || password !== '83560792') {
      layer.msg('账号或密码错误！', {
        offset: 50,
        anim: 6
      });
      return;
    }
    layer.msg('登录成功', {
      offset: 50,
      anim: 0
    });
    setTimeout(()=>{
      localStorage.setItem('userName',username)
      window.location.reload();
      layer.closeAll();
    },1000)
  })
  // 查看用户信息
  $('.login-active').on('click', function () {
    layer.open({
      type: 1,
      skin: 'layui-layer-login', //样式类名
      title: false,
      anim: 2,
      shade: 0.8,
      shadeClose: false, //开启遮罩关闭
      content: $('#user-layer')
    });
  })
  // 切换账号
  $(".change-accout-btn").on('click', function () {
    layer.closeAll();
    localStorage.removeItem('userName')
    layer.open({
      type: 1,
      skin: 'layui-layer-login', //样式类名
      title: false,
      anim: 2,
      shade: 0.8,
      shadeClose: false, //开启遮罩关闭
      content: $('#form-layer'),
      cancel: function(index, layero){
        // layer.close(index);
        window.location.reload();
      }
    });
  })
  // 退出程序
  $(".doubleExit").dblclick(function(){
    if (confirm("确定退出？")) {
@ -55,26 +145,4 @@ $(function () {
      },1000)
    }, 300)
  })
 })
 function FetchChatTalk () {
  $.ajax({
    url: ajaxUrl + '/api/v1/workspace/dxhtsg/chat',
    type: 'POST',
    headers: {
      "Authorization": "Bearer XVSPT0T-6P54SZH-QP36QKJ-KK77TN6"
    },
    contentType:'application/json',
    dataType: "json",
    data: JSON.stringify({
      "message": '你是谁',
       "mode":"chat"
    }),
    success: function (res) {
      console.log('res',res)
    },
    error: function (err) {
      console.log(err);
    }
  });
 }
 })
--- a/page-codeVideo.html
+++ b/page-codeVideo.html
@ -0,0 +1,128 @@
 <!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/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 perview-wrapper">
    <div class="ai-header-wrapper">
      <div class="style-line-top"></div>
      <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-btn header-login"><span></span><p>登录</p></div>
      </div>
    </div>
    <!-- 编码视频 -->
    <div class="perview-codeVideo">
      <div class="perview-code">
        <div class="empty-data">
          <img src="images/index-img9.png" alt="" />
          <p>暂无文件</p>
        </div>
      </div>
      <div class="perview-video">
        <div class="video-content">
          <video width="592" height="360" controls>
            <source  src="media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" type="video/mp4">
          </video>
        </div>
        <ul class="perview-info">
          <li>
            <i>名称：</i>
            <p>六轴机器人-垃圾分类</p>
          </li>
          <li>
            <i>作者：</i>
            <p>李卓俊</p>
          </li>
          <li>
            <i>时间：</i>
            <p>2024/08/13</p>
          </li>
          <li>
            <i>评分：</i>
            <div class="list-star">
              <span class="active-star"></span>
              <span class="active-star"></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </li>
          <li>
            <i>评语：</i>
            <p>设计合理</p>
          </li>
        </ul>
      </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/page-pdf.html
+++ b/page-pdf.html
@ -0,0 +1,99 @@
 <!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/index.css" />
 		<!--[if lt IE 9]>
 			<script src="js/html5shiv.js"></script>
 			<script src="js/respond.min.js"></script>
 		<![endif]-->
 		<title>pdf预览</title>
 	</head>
 <body>
  <div class="ai-wrapper perview-wrapper">
    <div class="ai-header-wrapper">
      <div class="style-line-top"></div>
      <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-btn header-login"><span></span><p>登录</p></div>
      </div>
    </div>
    <!-- pdf预览 -->
    <div class="page-content">
      <div id="my-pdf"></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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
  function showPDF2() {
    PDFObject.embed(
      '/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf',
      '#my-pdf'
    )
  }
  showPDF2()
 </script>
 </html>
--- a/page-pdfVideo.html
+++ b/page-pdfVideo.html
@ -0,0 +1,139 @@
 <!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/index.css" />
 		<!--[if lt IE 9]>
 			<script src="js/html5shiv.js"></script>
 			<script src="js/respond.min.js"></script>
 		<![endif]-->
 		<title>pdf视频</title>
 	</head>
 <body>
  <div class="ai-wrapper perview-wrapper">
    <div class="ai-header-wrapper">
      <div class="style-line-top"></div>
      <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-btn header-login"><span></span><p>登录</p></div>
      </div>
    </div>
    <!-- pdf视频 -->
    <div class="perview-codeVideo">
      <div class="perview-code">
        <div id="leftpdf"></div>
        <!-- <div class="empty-data">
          <img src="images/index-img9.png" alt="" />
          <p>暂无文件</p>
        </div> -->
      </div>
      <div class="perview-video">
        <div class="video-content">
          <video width="592" height="360" controls>
            <source  src="media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" type="video/mp4">
          </video>
        </div>
        <!-- <ul class="perview-info">
          <li>
            <i>名称：</i>
            <p>六轴机器人-垃圾分类</p>
          </li>
          <li>
            <i>作者：</i>
            <p>李卓俊</p>
          </li>
          <li>
            <i>时间：</i>
            <p>2024/08/13</p>
          </li>
          <li>
            <i>评分：</i>
            <div class="list-star">
              <span class="active-star"></span>
              <span class="active-star"></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </li>
          <li>
            <i>评语：</i>
            <p>设计合理</p>
          </li>
        </ul> -->
      </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.js"></script>
 <!-- 弹出框 -->
 <script type="text/javascript" src="/js/libs/layer/layer.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
  function showPDF2() {
    PDFObject.embed(
      '/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf',
      '#leftpdf'
    )
  }
  showPDF2()
 </script>
 </html>
--- a/page1-1.html
+++ b/page1-1.html
@ -57,8 +57,57 @@
        <div class="swiper-btn swiper-next"></div> -->
      </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/page1.html
+++ b/page1.html
@ -106,6 +106,52 @@
        <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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
@ -113,6 +159,9 @@
 <!-- 模块切换 -->
 <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/libs/layer/layer.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
  $(function () {
    $('#tj_container').gridnav({
@ -124,17 +173,6 @@
        reverse: false, // for sequpdown
      },
    })
    // $('.tj_gallery li').on('click', function () {
    //   layer.open({
    //     type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
    //     title: '测试视频layer',
    //     area: ['12.5rem', '10rem'],
    //     // shade: 0.8, // 默认0.3 不想显示遮罩设置为0
    //     // maxmin: true, //开启最大化最小化按钮
    //     shadeClose: true,
    //     content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
    //   })
    // })
  })
 </script>
 </html>
--- a/page2.html
+++ b/page2.html
@ -44,16 +44,16 @@
                  <img src="images/page1/7.png" alt="" />
                  <span></span>
                </div>
                <p>颜色识别分类1</p>
                <p>视频-颜色识别分类1</p>
              </a>
            </li>
            <li>
              <a href="javascript:;">
              <a href="page-codeVideo.html">
                <div class="tj-list-img mask-active">
                  <img src="images/img-bg.png" alt="" />
                  <span></span>
                </div>
                <p>uLtraArm套装2</p>
                <p>编程工具视频-uLtraArm套装2</p>
              </a>
            </li>
            <li>
@ -205,13 +205,64 @@
        <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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.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({
@ -223,17 +274,19 @@
        reverse: false, // for sequpdown
      },
    })
    // $('.tj_gallery li').on('click', function () {
    //   layer.open({
    //     type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
    //     title: '测试视频layer',
    //     area: ['12.5rem', '10rem'],
    //     // shade: 0.8, // 默认0.3 不想显示遮罩设置为0
    //     // maxmin: true, //开启最大化最小化按钮
    //     shadeClose: true,
    //     content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
    //   })
    // })
    // 点击查看视频
    $('.tj_gallery li').on('click', function () {
      layer.open({
        type: 2,
        skin: 'layui-layer-video',
        title: '视频标题',
        area: ['15rem', '10rem'],
        shade: 0.8,
        // maxmin: true, //开启最大化最小化按钮
        shadeClose: true,
        content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
      })
    })
  })
 </script>
 </html>
--- a/page3-1.html
+++ b/page3-1.html
@ -0,0 +1,294 @@
 <!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>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>编程视频-全国青少年人工智能创新挑战赛</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>视频-辽宁省青少年机器人竞赛</p>
              </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>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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.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 () {
      layer.open({
        type: 2,
        skin: 'layui-layer-video',
        title: '视频标题',
        area: ['15rem', '10rem'],
        shade: 0.8,
        // maxmin: true, //开启最大化最小化按钮
        shadeClose: true,
        content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
      })
    })
  })
 </script>
 </html>
--- a/page3-2.html
+++ b/page3-2.html
@ -0,0 +1,294 @@
 <!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>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>编程视频-全国青少年人工智能创新挑战赛</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>视频-辽宁省青少年机器人竞赛</p>
              </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>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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.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 () {
      layer.open({
        type: 2,
        skin: 'layui-layer-video',
        title: '视频标题',
        area: ['15rem', '10rem'],
        shade: 0.8,
        // maxmin: true, //开启最大化最小化按钮
        shadeClose: true,
        content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
      })
    })
  })
 </script>
 </html>
--- a/page3-3.html
+++ b/page3-3.html
@ -0,0 +1,294 @@
 <!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>AI大模型</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>AI大模型</h2>
        </div>
        <div class="header-btn header-login"><span></span><p>登录</p></div>
      </div>
    </div>
    <!-- AI资源库 - 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>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>编程视频-全国青少年人工智能创新挑战赛</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>视频-辽宁省青少年机器人竞赛</p>
              </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>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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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>
 <!-- pdf控件 -->
 <script type="text/javascript" src="/js/plugins/pdfobject.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 () {
      layer.open({
        type: 2,
        skin: 'layui-layer-video',
        title: '视频标题',
        area: ['15rem', '10rem'],
        shade: 0.8,
        // maxmin: true, //开启最大化最小化按钮
        shadeClose: true,
        content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
      })
    })
  })
 </script>
 </html>
--- a/page3.html
+++ b/page3.html
@ -35,7 +35,7 @@
    <div class="page-content">
      <ul class="ai-resource">
        <li>
          <a href="javascript:;">
          <a href="page3-1.html">
            <div class="list-img mask-active">
              <img src="images/index-img15.png" alt="" />
            </div>
@ -43,7 +43,7 @@
          </a>
        </li>
        <li>
          <a href="javascript:;">
          <a href="page3-2.html">
            <div class="list-img mask-active">
              <img src="images/index-img16.png" alt="" />
            </div>
@ -51,7 +51,7 @@
          </a>
        </li>
        <li>
          <a href="javascript:;">
          <a href="page3-3.html">
            <div class="list-img mask-active">
              <img src="images/index-img17.png" alt="" />
            </div>
@ -68,9 +68,58 @@
        </li>
      </ul>
    </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/index.js"></script>
 </html>
--- a/page4.html
+++ b/page4.html
@ -205,13 +205,62 @@
        <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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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({
@ -223,17 +272,19 @@
        reverse: false, // for sequpdown
      },
    })
    // $('.tj_gallery li').on('click', function () {
    //   layer.open({
    //     type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
    //     title: '测试视频layer',
    //     area: ['12.5rem', '10rem'],
    //     // shade: 0.8, // 默认0.3 不想显示遮罩设置为0
    //     // maxmin: true, //开启最大化最小化按钮
    //     shadeClose: true,
    //     content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
    //   })
    // })
    // 点击查看视频
    $('.tj_gallery li').on('click', function () {
      layer.open({
        type: 2,
        skin: 'layui-layer-video',
        title: '视频标题',
        area: ['15rem', '10rem'],
        shade: 0.8,
        // maxmin: true, //开启最大化最小化按钮
        shadeClose: true,
        content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4'
      })
    })
  })
 </script>
 </html>
--- a/page5.html
+++ b/page5.html
@ -47,7 +47,7 @@
          <div class="swiper-container">
            <ul class="work-list swiper-wrapper">
              <li class="swiper-slide">
                <a href="javascript:;">
                <a href="page-codeVideo.html">
                  <p class="item-num">1</p>
                  <p class="item-name">六轴机器人-垃圾分类</p>
                  <p class="item-author">李卓俊</p>
@ -63,7 +63,7 @@
                </a>
              </li>
              <li class="swiper-slide">
                <a href="javascript:;">
                <a href="page-codeVideo.html">
                  <p class="item-num">2</p>
                  <p class="item-name">六轴机器人-垃圾分类</p>
                  <p class="item-author">李卓俊</p>
@ -213,11 +213,60 @@
        </div>
      </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="请输入账号" />
        </li>
        <li>
          <p>密码</p>
          <input  type="password"  placeholder="请输入密码" />
        </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/plugins/swiper-bundle.min.js"></script>
 <!-- 弹出框 -->
 <script type="text/javascript" src="/js/libs/layer/layer.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script>
  var mySwiper = new Swiper('.swiper-container',{
    direction: 'vertical', // 垂直滚动