xuhuajiao
/
ftExhibition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

20240820

master
xuhuajiao 10 months ago
parent
f24f342611
commit
ee04f1c938
52 changed files with 1011 additions and 361 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      ai_chat.html
  2. 18
      css/common.css
  3. 443
      css/index.css
  4. 20
      css/plugins/gridNavigation.css
  5. 13
      css/plugins/swiper-bundle.min.css
  6. BIN
      images/animation.webp
  7. BIN
      images/bg.mp4
  8. BIN
      images/bg2.mp4
  9. BIN
      images/blockly3.png
  10. BIN
      images/content-bg.png
  11. BIN
      images/index-img1.png
  12. BIN
      images/index-img10.png
  13. BIN
      images/index-img11.png
  14. BIN
      images/index-img12.png
  15. BIN
      images/index-img13.png
  16. BIN
      images/index-img14.png
  17. BIN
      images/index-img15.png
  18. BIN
      images/index-img16.png
  19. BIN
      images/index-img17.png
  20. BIN
      images/index-img2.png
  21. BIN
      images/index-img3.png
  22. BIN
      images/index-img4.png
  23. BIN
      images/index-img5.png
  24. BIN
      images/index-img6.png
  25. BIN
      images/index-img7.png
  26. BIN
      images/index-img8.png
  27. BIN
      images/index-img9.png
  28. BIN
      images/list-bg.png
  29. BIN
      images/page-box2.png
  30. BIN
      images/page1/1.png
  31. BIN
      images/page1/2.png
  32. BIN
      images/page1/3.png
  33. BIN
      images/page1/4.png
  34. BIN
      images/page1/5.png
  35. BIN
      images/page1/6.png
  36. BIN
      images/page1/7.png
  37. BIN
      images/page1/8.png
  38. BIN
      images/page1/9de4e864ce8de12bc545237c86ceae1a.png
  39. BIN
      images/page1/IMG_0350.png
  40. BIN
      images/python2.png
  41. BIN
      images/return.png
  42. 71
      index.html
  43. 71
      index2.html
  44. 71
      index3.html
  45. 57
      js/index.js
  46. 14
      js/plugins/swiper-bundle.min.js
  47. 64
      page1-1.html
  48. 87
      page1.html
  49. 47
      page2.html
  50. 76
      page3.html
  51. 45
      page4.html
  52. 238
      page5.html

27
ai_chat.html
View File

@ -18,12 +18,14 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<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-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div>
<div class="header-left">
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
</div>
<div class="header-title">
<h2>AI编程机器人体验系统</h2>
<h2>AI数字人</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
@ -33,10 +35,11 @@
<div class="chat-content">
</div>
<div class="chat-send">
<textarea cols="50" rows="7"></textarea>
<textarea cols="50" rows="7" placeholder="请输入你想咨询的问题"></textarea>
<!-- <div class="send-button">send</div> -->
<div class="send-button-container">
<input type="button" value="发送" class="send-button">
<span class="send-button">发送</span>
<!-- <input type="button" value="发送" class="send-button"> -->
</div>
</div>
</div>
@ -166,11 +169,11 @@
function appendMessage(content, isUserMessage, isLoading, isWelcomeMessage) {
const className = isUserMessage ? 'user-message' : 'bot-message';
const avatarSrc = isUserMessage ? 'images/other/pic1.jpg' : 'images/other/pic2.jpg';
// const avatarSrc = isUserMessage ? 'images/other/pic1.jpg' : 'images/other/pic2.jpg';
let messageContent
if (isLoading) {
messageContent = '<p class="loading"><img src="images/other/loading.png" alt="loading"></p>';
messageContent = '<p class="loading"><i></i><i></i><i></i></p>';
} else {
// 当isUserMessage为false时，才添加<span>停止输出</span>
messageContent = isUserMessage
@ -180,12 +183,16 @@
: `<p>${content}<span id="stop-btn">停止输出</span></p>`;
}
// const messageHtml = `
// <div class="chat-message ${className}">
// ${messageContent}
// <img src="${avatarSrc}" alt="${isUserMessage ? '用户' : 'AI数字人'}">
// </div>`;
const messageHtml = `
<div class="chat-message ${className}">
${messageContent}
<img src="${avatarSrc}" alt="${isUserMessage ? '用户' : 'AI数字人'}">
</div>
`;
</div>`;
$chatContent.append(messageHtml);
$chatContent.scrollTop($chatContent[0].scrollHeight);

18
css/common.css
View File

@ -1,18 +0,0 @@
/* 粒子背景 */
#particles-js {
width: 100%;
height: calc(100vh);
background-color: #000000;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
}
.particles-js-canvas-el {
position: fixed;
top: 0;
left: 0;
z-index: 9;
}

443
css/index.css
View File

@ -1,3 +1,39 @@
/**滚动条的宽度*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/**滚动条的滑块*/
::-webkit-scrollbar-thumb {
background-color: #13439E;
border-radius: 4px;
}
/**只需要加上这一行*/
::-webkit-scrollbar-corner {
background-color: transparent;
}
textarea::-webkit-input-placeholder { /* Chrome, Opera, Safari */
color: #fff;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: #fff;
opacity: 1; /* 修复老版本Firefox的不透明度问题 */
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: #fff;
opacity: 1; /* 修复Firefox的不透明度问题 */
}
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
@font-face {
font-family: "DOUYU-Regular";
src: url('../fonts/斗鱼追光体.ttf');
@ -21,6 +57,18 @@
overflow: hidden;
}
.doubleExit{
position: fixed;
bottom: 0;
left: 0;
width: 1rem;
height: 1rem;
line-height: 1rem;
text-align: center;
cursor: pointer;
z-index: 9999;
}
.ai-bg{
width: 100%;
height: 100%;
@ -46,10 +94,14 @@
width: 100%;
height: 100%;
}
.header-btn{
.header-left{
position: absolute;
top: .45rem;
left: 0;
display: flex;
justify-content: flex-start;
}
.header-btn{
display: flex;
justify-content: center;
width: 2.2875rem;
@ -69,16 +121,23 @@
margin-right: .025rem;
}
.header-home{
left: 0;
}
.header-home span{
background: url('../images/icon_home_full.png') no-repeat left top;
background-size:cover;
}
.header-return{
margin-left: -0.75rem;
}
.header-return span{
background: url('../images/return.png') no-repeat left top;
background-size:cover;
}
.header-login{
position: absolute;
top: .45rem;
right: 0;
}
@ -336,70 +395,277 @@
font-family: 'PingFang';
}
/* AI资源库 */
.ai-resource{
width: calc(100% - 2.5rem);
height: calc(100% - 2.5rem);
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
.ai-resource li a{
display: block;
width: 5rem;
height: 3.5rem;
background: url("../../images/page-box2.png") no-repeat left top;
background-size: cover;
backdrop-filter: blur(10px);
}
.list-img {
width: 4.6rem;
height: 2.725rem;
padding-top: .2rem;
margin: 0 auto .125rem auto;
border-radius: .1rem;
overflow: hidden;
}
.list-img img{
display: block;
height: 2.725rem;
border-radius: .1rem;
}
.ai-resource li p{
font-size: .25rem;
height: .375rem;
line-height: .375rem;
color: #fff;
text-align: center;
}
/* 作品展示 */
.work-wrapper{
width: 1692px;
height: 948px;
margin: -1.425rem auto 0 auto;
background: url("../../images/list-bg.png") no-repeat left top;
background-size: cover;
/* overflow: hidden; */
}
.work-content{
position: relative;
padding: .125rem .5rem 0 .5rem;
}
.work-header{
display: flex;
justify-content: flex-start;
padding: .35rem .5rem .125rem .4rem;
height: .525rem;
line-height: .525rem;
font-size: .35rem;
color: #90B6FF;
text-align: left;
}
.work-header p:first-child{
width: .8rem;
}
.work-header p.item-name{
width: 6.725rem;
}
.work-header p:last-child{
flex: 1;
}
.swiper-container {
padding-top: .1875rem;
height: 10.25rem;
}
.swiper-btn {
position: absolute;
top: 50%;
width: .5rem;
height: 2.5rem;
margin-top: -1.25rem;
cursor: pointer;
}
.swiper-prev{
left: -0.875rem;
background: url("../../images/left.png") no-repeat left top;
background-size: cover;
}
.swiper-next{
right: -0.875rem;
background: url("../../images/right.png") no-repeat left top;
background-size: cover;
}
.work-list li a{
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: .5rem;
margin-bottom: .275rem;
height: 1.25rem;
line-height: 1.25rem;
font-size: .35rem;
color: #fff;
text-align: left;
background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
border-radius: .2rem;
}
.item-num{
width: .525rem;
height: .525rem;
border-radius: 100%;
text-align: center;
line-height: .525rem;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 60%);
}
.item-name {
width: 6.875rem;
margin: 0 .25rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.item-author,
.item-time{
width: 3rem;
margin-right: .25rem;
}
.list-star{
display: flex;
justify-content: flex-start;
width: 3rem;
}
.list-star span{
display: block;
width: .4rem;
height: .4rem;
margin-right: .125rem;
background: url("../../images/index-img5.png") no-repeat left top;
background-size: cover;
}
.list-star span.active-star{
position: relative;
display: block;
background: url("../../images/index-img4.png") no-repeat left top;
background-size: cover;
}
.list-star span.active-star::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: .25rem;
height: .25rem;
border-radius: 100%;
background-color: rgba(255,183,76,0.3);
box-shadow: 0px 0px 12px 0px rgba(255,183,76,0.34), 0px 0px 24px 0px #FFB74C;
filter: blur(4px);
transform: translate(-50%,-50%);
}
.item-handle{
width: 1.75rem;
height: 1.1rem;
background: url("../../images/index-img6.png") no-repeat left top;
background-size: cover;
margin-left: -0.125rem;
cursor: pointer;
}
/* ai数字人 start */
.chat-wrapper {
position: relative;
width: 10rem;
height: 10rem;
margin: 1.75rem auto 0 auto;
background-color: #fff;
border-radius: .125rem;
position: absolute;
right: .5rem;
top: 1.4rem;
width: 14.8125rem;
height: 11rem;
padding: .3rem;
background: url("../images/list-bg.png") no-repeat left top;
background-size: 100% 100%;
z-index: 99;
font-family: 'PingFang';
}
.chat-content {
width: 100%;
height: calc(100% - 2.5rem);
height: calc(100% - 2.8rem);
overflow: hidden;
overflow-y: scroll;
/* border: 1px solid red; */
}
.chat-message {
display: flex;
justify-content: flex-end;
margin: .125rem;
padding: .125rem;
line-height: .5rem;
font-size: .25rem;
color: #000;
font-size: .35rem;
color: #fff;
}
.chat-message p {
position: relative;
line-height: .5rem;
padding: 0 .125rem;
line-height: .825rem;
padding: 0 .2rem;
margin-right: .125rem;
background-color: burlywood;
border-radius: .05rem;
background: rgba(0,0,0,0.2);
border-radius: .35rem .1rem .35rem .35rem;
}
.chat-message p span{
position: absolute;
left: 0;
bottom: -0.45rem;
left: .05rem;
bottom: -0.5rem;
width: 1rem;
height: .375rem;
padding-left: .3rem;
height: .4rem;
text-align: center;
line-height: .375rem;
border: 1px solid #000;
border-radius: .05rem;
font-size: .175rem;
line-height: .4rem;
border: 1px solid #4CA7FF;
color: #4CA7FF;
border-radius: .075rem;
font-size: .2rem;
cursor: pointer;
}
.chat-message p span::before{
content: '';
position: absolute;
left: .05rem;
top: 50%;
width: .3rem;
height: .3rem;
background: url("../images/index-img7.png") no-repeat left top;
background-size: 100% 100%;
margin-top: -0.15rem;
}
.chat-message p span:hover{
background-color: #999;
background-color: rgba(255,255,255,.2);
}
.chat-message p span.remove-btn{
padding-left: 0;
border: none;
color: #999;
}
.chat-message p span.remove-btn::before{
border: none;
color: #999;
background: none;
}
.chat-message p span.remove-btn:hover{
background-color: #fff;
background-color: transparent;
cursor: default;
}
.chat-message img {
@ -416,62 +682,139 @@
}
.bot-message p {
line-height: .825rem;
margin-left: .125rem;
background-color: rgb(0, 209, 112);
background-color: rgb(255,255,255,0.2);
border-radius: .1rem .35rem .35rem .35rem;
}
.loading{
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
height: .825rem;
}
.loading img {
.loading i {
display: block;
width: .25rem;
height: .25rem;
margin-top: .125rem;
width: .15rem;
height: .15rem;
margin: 0 .075rem;
border-radius: 50%;
background-color: #fff;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
.loading i:nth-child(1) {
animation: jump 1.2s -0.4s linear infinite;
}
.loading i:nth-child(2) {
animation: jump 1.2s -0.2s linear infinite;
}
to {
transform: rotate(360deg);
.loading i:nth-child(3) {
animation: jump 1.2s linear infinite;
}
@keyframes jump {
0%,
80%,
100% {
transform: scale(0.8);
opacity: 1.0;
}
40% {
transform: scale(1.1);
opacity: 0.8;
}
}
.chat-send {
width: 100%;
height: 2.5rem;
background-color: #fff;
border-radius: .125rem;
margin-top: .3rem;
background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
border-radius: .2rem;
}
.chat-send textarea {
display: block;
width: calc(100% - .5rem);
height: 1.25rem;
height: 1rem;
font-size: .3rem;
line-height: .375rem;
border: none;
padding: .25rem;
background-color: #e4e4e4;
background-color: transparent;
color: #fff;
/* border: 1px solid red; */
}
.send-button-container {
text-align: right;
padding: 0 .25rem 0 0;
}
.send-button {
margin: .125rem .25rem 0 0;
padding: 0 .25rem;
line-height: .5rem;
position: relative;
display: inline-block;
width: .9rem;
height: .725rem;
line-height: .725rem;
padding-left: .75rem;
font-size: .325rem;
color: #000;
text-align: left;
color: #fff;
background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%);
border-radius: .725rem;
cursor: pointer;
}
.send-button::before {
content: "";
position: absolute;
left: .2rem;
top: 50%;
width: .45rem;
height: .45rem;
background: url("../../images/index-img8.png") no-repeat left top;
background-size: .45rem .45rem;
transform: translateY(-50%);
}
.send-disabled-button {
color: #7c7c7c;
background: rgba(255,255,255,.2);
cursor: not-allowed;
}
/* ai数字人 end */
.page-big-ai{
display: block;
height: 7.5rem;
margin: -1rem auto 0 auto;
}
.program-mode {
position: relative;
/* margin: 0 auto; */
}
.program-mode .ai-resource{
justify-content: center;
}
.program-mode .ai-resource li{
margin: 0 .5rem;
}
.program-mode .swiper-prev{
left: 1rem;
}
.program-mode .swiper-next{
right: 1rem;
}

20
css/plugins/gridNavigation.css
View File

@ -53,14 +53,32 @@
display: block;
width: 5rem;
height: 3.5rem;
background: url("../../images/page-box.png") no-repeat left top;
background: url("../../images/page-box2.png") no-repeat left top;
background-size: cover;
backdrop-filter: blur(10px);
}
.tj-list-img {
position: relative;
width: 4.6rem;
height: 2.725rem;
margin: .2rem auto .125rem auto;
border-radius: .1rem;
overflow: hidden;
}
.tj-list-img.mask-active::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tj-list-img.mask-active:hover::before {
/* background-color: transparent; */
background-color: rgba(0,0,0,.3);
}
.tj-list-img img {

13
css/plugins/swiper-bundle.min.css
File diff suppressed because it is too large
View File

BIN
images/animation.webp
View File

BIN
images/bg.mp4
View File

BIN
images/bg2.mp4
View File

BIN
images/blockly3.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 26 KiB

BIN
images/content-bg.png
View File

Side by Side

After

Width: 743  |  Height: 684  |  Size: 349 KiB

BIN
images/index-img1.png
View File

Side by Side

After

Width: 368  |  Height: 206  |  Size: 49 KiB

BIN
images/index-img10.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 822 B

BIN
images/index-img11.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 771 B

BIN
images/index-img12.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 827 B

BIN
images/index-img13.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 998 B

BIN
images/index-img14.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 793 B

BIN
images/index-img15.png
View File

Side by Side

After

Width: 368  |  Height: 206  |  Size: 120 KiB

BIN
images/index-img16.png
View File

Side by Side

After

Width: 368  |  Height: 206  |  Size: 147 KiB

BIN
images/index-img17.png
View File

Side by Side

After

Width: 368  |  Height: 206  |  Size: 115 KiB

BIN
images/index-img2.png
View File

Side by Side

After

Width: 200  |  Height: 200  |  Size: 43 KiB

BIN
images/index-img3.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 315 B

BIN
images/index-img4.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 3.2 KiB

BIN
images/index-img5.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 523 B

BIN
images/index-img6.png
View File

Side by Side

After

Width: 141  |  Height: 88  |  Size: 12 KiB

BIN
images/index-img7.png
View File

Side by Side

After

Width: 24  |  Height: 24  |  Size: 751 B

BIN
images/index-img8.png
View File

Side by Side

After

Width: 36  |  Height: 36  |  Size: 716 B

BIN
images/index-img9.png
View File

Side by Side

After

Width: 170  |  Height: 150  |  Size: 14 KiB

BIN
images/list-bg.png
View File

Side by Side

After

Width: 1692  |  Height: 948  |  Size: 840 KiB

BIN
images/page-box2.png
View File

Side by Side

After

Width: 400  |  Height: 280  |  Size: 84 KiB

BIN
images/page1/1.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 160 KiB

BIN
images/page1/2.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 59 KiB

BIN
images/page1/3.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 52 KiB

BIN
images/page1/4.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 139 KiB

BIN
images/page1/5.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 186 KiB

BIN
images/page1/6.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 165 KiB

BIN
images/page1/7.png
View File

Side by Side

After

Width: 367  |  Height: 218  |  Size: 187 KiB

BIN
images/page1/8.png
View File

Side by Side

After

Width: 11744  |  Height: 8826  |  Size: 20 MiB

BIN
images/page1/9de4e864ce8de12bc545237c86ceae1a.png
View File

Side by Side

After

Width: 1604  |  Height: 1587  |  Size: 584 KiB

BIN
images/page1/IMG_0350.png
View File

Side by Side

After

Width: 8880  |  Height: 14080  |  Size: 33 MiB

BIN
images/python2.png
View File

Side by Side

After

Width: 368  |  Height: 218  |  Size: 30 KiB

BIN
images/return.png
View File

Side by Side

After

Width: 20  |  Height: 20  |  Size: 331 B

71
index.html
View File

@ -9,7 +9,6 @@
<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/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
@ -19,7 +18,7 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="ai-bg" src="images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="ai-header-wrapper">
<div class="ai-header">
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> -->
@ -37,7 +36,7 @@
<a id="page1" href="javascript:;">
<p>编程体验</p>
<span>Programming experience</span>
<img src="./images/index-an1.webp" alt="编程体验" />
<img src="images/index-an1.webp" alt="编程体验" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
@ -45,20 +44,20 @@
<a id="page2" href="javascript:;">
<p>场景演示</p>
<span>Scene presentation</span>
<img src="./images/index-an2.webp" alt="场景演示" />
<img src="images/index-an2.webp" alt="场景演示" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
<a href="javascript:;">
<a id="page3" href="javascript:;">
<p>AI资源库</p>
<span>AI resource library</span>
<img src="./images/index-an3.webp" alt="AI资源库" />
<img src="images/index-an3.webp" alt="AI资源库" />
</a>
</li>
</ul>
<div class="index-middle">
<img class="ai-human" src="./images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" />
<img class="ai-human" src="images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="images/an-bottom.webp" alt="底部光效" />
</div>
<!-- no-box-style -->
<ul class="index-list list-right no-box-style">
@ -66,73 +65,31 @@
<a id="page4" href="javascript:;">
<p>实战竞赛</p>
<span>Actual combat</span>
<img src="./images/index-an4.webp" alt="实战竞赛" />
<img src="images/index-an4.webp" alt="实战竞赛" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a href="javascript:;">
<a id="page5" href="javascript:;">
<p>作品展示</p>
<span>Work display</span>
<img src="./images/index-an5.webp" alt="作品展示" />
<img src="images/index-an5.webp" alt="作品展示" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a id="aiChat" href="javascript:;">
<p>AI数字人</p>
<span>AI digital human</span>
<img src="./images/index-an6.webp" alt="AI数字人" />
<img src="images/index-an6.webp" alt="AI数字人" />
</a>
</li>
</ul>
</div>
<!-- 退出程序 -->
<div class="doubleExit"></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">
$(function () {
$('.list-left li').hover(
function() {
$(this).removeClass('animate__backInLeft').addClass('animate__bounce');
},
function() {
$(this).removeClass('animate__bounce')
}
);
<script type="text/javascript" src="js/index.js"></script>
$('.list-right li').hover(
function() {
$(this).removeClass('animate__backInRight').addClass('animate__headShake');
},
function() {
$(this).removeClass('animate__headShake')
}
);
$('.index-list li').on('click', function () {
const _this = $(this)
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash')
setTimeout(function () {
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft')
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight')
setTimeout(function(){
// window.top.location.href = 'ai_chat.html';
const href = _this.find('a').attr('id');
if (href === 'page1') {
window.location.href = 'page1.html';
} else if (href === 'page2') {
window.location.href = 'page2.html';
} else if (href === 'page4') {
window.location.href = 'page4.html';
} else if (href === 'aiChat') {
window.location.href = 'ai_chat.html';
} else {
// 其他情况的处理逻辑
}
return false;
},1000)
}, 1000)
})
})
</script>
</html>

71
index2.html
View File

@ -9,7 +9,6 @@
<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/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
@ -19,7 +18,7 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="ai-bg" src="images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="ai-header-wrapper">
<div class="ai-header">
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> -->
@ -37,7 +36,7 @@
<a id="page1" href="javascript:;">
<p>编程体验</p>
<span>Programming experience</span>
<img src="./images/index-an1.webp" alt="编程体验" />
<img src="images/index-an1.webp" alt="编程体验" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
@ -45,20 +44,20 @@
<a id="page2" href="javascript:;">
<p>场景演示</p>
<span>Scene presentation</span>
<img src="./images/index-an2.webp" alt="场景演示" />
<img src="images/index-an2.webp" alt="场景演示" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
<a href="javascript:;">
<a id="page3" href="javascript:;">
<p>AI资源库</p>
<span>AI resource library</span>
<img src="./images/index-an3.webp" alt="AI资源库" />
<img src="images/index-an3.webp" alt="AI资源库" />
</a>
</li>
</ul>
<div class="index-middle">
<img class="ai-human" src="./images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" />
<img class="ai-human" src="images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="images/an-bottom.webp" alt="底部光效" />
</div>
<!-- no-box-style -->
<ul class="index-list list-right">
@ -66,73 +65,31 @@
<a id="page4" href="javascript:;">
<p>实战竞赛</p>
<span>Actual combat</span>
<img src="./images/index-an4.webp" alt="实战竞赛" />
<img src="images/index-an4.webp" alt="实战竞赛" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a href="javascript:;">
<a id="page5" href="javascript:;">
<p>作品展示</p>
<span>Work display</span>
<img src="./images/index-an5.webp" alt="作品展示" />
<img src="images/index-an5.webp" alt="作品展示" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a id="aiChat" href="javascript:;">
<p>AI数字人</p>
<span>AI digital human</span>
<img src="./images/index-an6.webp" alt="AI数字人" />
<img src="images/index-an6.webp" alt="AI数字人" />
</a>
</li>
</ul>
</div>
<!-- 退出程序 -->
<div class="doubleExit"></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">
$(function () {
$('.list-left li').hover(
function() {
$(this).removeClass('animate__backInLeft').addClass('animate__bounce');
},
function() {
$(this).removeClass('animate__bounce')
}
);
<script type="text/javascript" src="js/index.js"></script>
$('.list-right li').hover(
function() {
$(this).removeClass('animate__backInRight').addClass('animate__headShake');
},
function() {
$(this).removeClass('animate__headShake')
}
);
$('.index-list li').on('click', function () {
const _this = $(this)
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash')
setTimeout(function () {
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft')
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight')
setTimeout(function(){
// window.top.location.href = 'ai_chat.html';
const href = _this.find('a').attr('id');
if (href === 'page1') {
window.location.href = 'page1.html';
} else if (href === 'page2') {
window.location.href = 'page2.html';
} else if (href === 'page4') {
window.location.href = 'page4.html';
} else if (href === 'aiChat') {
window.location.href = 'ai_chat.html';
} else {
// 其他情况的处理逻辑
}
return false;
},1000)
}, 1000)
})
})
</script>
</html>

71
index3.html
View File

@ -9,7 +9,6 @@
<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/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
@ -19,7 +18,7 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="ai-bg" src="images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="ai-header-wrapper">
<div class="ai-header">
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> -->
@ -37,7 +36,7 @@
<a id="page1" href="javascript:;">
<p>编程体验</p>
<span>Programming experience</span>
<img src="./images/index-an1.webp" alt="编程体验" />
<img src="images/index-an1.webp" alt="编程体验" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
@ -45,20 +44,20 @@
<a id="page2" href="javascript:;">
<p>场景演示</p>
<span>Scene presentation</span>
<img src="./images/index-an2.webp" alt="场景演示" />
<img src="images/index-an2.webp" alt="场景演示" />
</a>
</li>
<li class="animate__animated animate__backInLeft">
<a href="javascript:;">
<a id="page3" href="javascript:;">
<p>AI资源库</p>
<span>AI resource library</span>
<img src="./images/index-an3.webp" alt="AI资源库" />
<img src="images/index-an3.webp" alt="AI资源库" />
</a>
</li>
</ul>
<div class="index-middle">
<img class="ai-human" src="./images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" />
<img class="ai-human" src="images/animation.webp" alt="机器人" />
<img class="ai-bottom" src="images/an-bottom.webp" alt="底部光效" />
</div>
<!-- no-box-style -->
<ul class="index-list list-right other-bg">
@ -66,73 +65,31 @@
<a id="page4" href="javascript:;">
<p>实战竞赛</p>
<span>Actual combat</span>
<img src="./images/index-an4.webp" alt="实战竞赛" />
<img src="images/index-an4.webp" alt="实战竞赛" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a href="javascript:;">
<a id="page5" href="javascript:;">
<p>作品展示</p>
<span>Work display</span>
<img src="./images/index-an5.webp" alt="作品展示" />
<img src="images/index-an5.webp" alt="作品展示" />
</a>
</li>
<li class="animate__animated animate__backInRight">
<a id="aiChat" href="javascript:;">
<p>AI数字人</p>
<span>AI digital human</span>
<img src="./images/index-an6.webp" alt="AI数字人" />
<img src="images/index-an6.webp" alt="AI数字人" />
</a>
</li>
</ul>
</div>
<!-- 退出程序 -->
<div class="doubleExit"></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">
$(function () {
$('.list-left li').hover(
function() {
$(this).removeClass('animate__backInLeft').addClass('animate__bounce');
},
function() {
$(this).removeClass('animate__bounce')
}
);
<script type="text/javascript" src="js/index.js"></script>
$('.list-right li').hover(
function() {
$(this).removeClass('animate__backInRight').addClass('animate__headShake');
},
function() {
$(this).removeClass('animate__headShake')
}
);
$('.index-list li').on('click', function () {
const _this = $(this)
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash')
setTimeout(function () {
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft')
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight')
setTimeout(function(){
// window.top.location.href = 'ai_chat.html';
const href = _this.find('a').attr('id');
if (href === 'page1') {
window.location.href = 'page1.html';
} else if (href === 'page2') {
window.location.href = 'page2.html';
} else if (href === 'page4') {
window.location.href = 'page4.html';
} else if (href === 'aiChat') {
window.location.href = 'ai_chat.html';
} else {
// 其他情况的处理逻辑
}
return false;
},1000)
}, 1000)
})
})
</script>
</html>

57
js/index.js
View File

@ -1,5 +1,62 @@
var ajaxUrl = 'http://192.168.99.86:3001'
$(function () {
// 退出程序
$(".doubleExit").dblclick(function(){
if (confirm("确定退出？")) {
console.log("确定");
} else {
console.log("取消");
}
});
// 首页样式操作
$('.list-left li').hover(
function() {
$(this).removeClass('animate__backInLeft').addClass('animate__headShake');
},
function() {
$(this).removeClass('animate__headShake')
}
);
$('.list-right li').hover(
function() {
$(this).removeClass('animate__backInRight').addClass('animate__headShake');
},
function() {
$(this).removeClass('animate__headShake')
}
);
// 首页菜单点击操作
$('.index-list li').on('click', function () {
const _this = $(this)
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash')
setTimeout(function () {
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft')
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight')
setTimeout(function(){
const href = _this.find('a').attr('id');
if (href === 'page1') {
window.location.href = 'page1.html';
} else if (href === 'page2') {
window.location.href = 'page2.html';
} else if (href === 'page3') {
window.location.href = 'page3.html';
} else if (href === 'page4') {
window.location.href = 'page4.html';
} else if (href === 'page5') {
window.location.href = 'page5.html';
} else if (href === 'aiChat') {
window.location.href = 'ai_chat.html';
}
return false;
},1000)
}, 300)
})
})
function FetchChatTalk () {
$.ajax({
url: ajaxUrl + '/api/v1/workspace/dxhtsg/chat',

14
js/plugins/swiper-bundle.min.js
File diff suppressed because it is too large
View File

64
page1-1.html
View File

@ -0,0 +1,64 @@
<!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">
<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>
<!-- 编程体验 -->
<div class="page-content">
<img class="page-big-ai" src="images/page1/9de4e864ce8de12bc545237c86ceae1a.png" alt="">
<div class="program-mode">
<ul class="ai-resource">
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/blockly3.png" alt="" />
</div>
<p>Blockly</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/python2.png" alt="" />
</div>
<p>python</p>
</a>
</li>
</ul>
<!-- <div class="swiper-btn swiper-prev"></div>
<div class="swiper-btn swiper-next"></div> -->
</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>
</html>

87
page1.html
View File

@ -9,7 +9,6 @@
<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/common.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]>
@ -20,12 +19,14 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<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-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div>
<div class="header-left">
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
</div>
<div class="header-title">
<h2>AI编程机器人体验系统</h2>
<h2>编程体验</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
@ -37,10 +38,19 @@
<span id="tj_prev" class="page-list-btn tj_prev"></span>
<div class="tj_wrapper">
<ul class="tj_gallery">
<li>
<a href="page1-1.html">
<div class="tj-list-img mask-active">
<img src="images/page1/7.png" alt="" />
<!-- <span></span> -->
</div>
<p>颜色识别</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/1.png" alt="" />
<!-- <span></span> -->
</div>
<p>六轴机械臂</p>
@ -48,8 +58,8 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/2.png" alt="" />
<!-- <span></span> -->
</div>
<p>双足机器人1</p>
@ -57,8 +67,8 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/3.png" alt="" />
<!-- <span></span> -->
</div>
<p>双足机器人2</p>
@ -66,8 +76,8 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/4.png" alt="" />
<!-- <span></span> -->
</div>
<p>双足机器人3</p>
@ -75,8 +85,8 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/5.png" alt="" />
<!-- <span></span> -->
</div>
<p>四足机器狗</p>
@ -84,58 +94,13 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/6.png" alt="" />
<!-- <span></span> -->
</div>
<p>无人驾驶车</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<!-- <span></span> -->
</div>
<p>六轴机械臂2</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<!-- <span></span> -->
</div>
<p>四足机器狗2</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<!-- <span></span> -->
</div>
<p>无人驾驶车2</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<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">
<img src="images/img-bg.png" alt="" />
<!-- <span></span> -->
</div>
<p>颜色识别分类11</p>
</a>
</li>
</ul>
</div>
<span id="tj_next" class="page-list-btn tj_next"></span>

47
page2.html
View File

@ -9,7 +9,6 @@
<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/common.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]>
@ -20,12 +19,14 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<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-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div>
<div class="header-left">
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
</div>
<div class="header-title">
<h2>AI编程机器人体验系统</h2>
<h2>场景演示</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
@ -39,8 +40,8 @@
<ul class="tj_gallery">
<li>
<a href="javascript:;">
<div class="tj-list-img">
<img src="images/img-bg.png" alt="" />
<div class="tj-list-img mask-active">
<img src="images/page1/7.png" alt="" />
<span></span>
</div>
<p>颜色识别分类1</p>
@ -48,7 +49,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -57,7 +58,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -66,7 +67,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -75,7 +76,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -84,7 +85,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -93,7 +94,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -102,7 +103,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -111,7 +112,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -120,7 +121,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -129,7 +130,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -138,7 +139,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -147,7 +148,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -156,7 +157,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -165,7 +166,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -174,7 +175,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -183,7 +184,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -192,7 +193,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>

76
page3.html
View File

@ -0,0 +1,76 @@
<!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/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>
<div class="header-title">
<h2>AI资源库</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
</div>
<!-- AI资源库 -->
<div class="page-content">
<ul class="ai-resource">
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/index-img15.png" alt="" />
</div>
<p>人工智能</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/index-img16.png" alt="" />
</div>
<p>机器人</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/index-img17.png" alt="" />
</div>
<p>AI大模型</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="list-img mask-active">
<img src="images/index-img1.png" alt="" />
</div>
<p>AI阅行</p>
</a>
</li>
</ul>
</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>
</html>

45
page4.html
View File

@ -9,7 +9,6 @@
<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/common.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]>
@ -20,12 +19,14 @@
</head>
<body>
<div class="ai-wrapper">
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<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-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div>
<div class="header-left">
<div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
</div>
<div class="header-title">
<h2>AI编程机器人体验系统</h2>
<h2>实战竞赛</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
@ -39,7 +40,7 @@
<ul class="tj_gallery">
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -48,7 +49,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -57,7 +58,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -66,7 +67,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -75,7 +76,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -84,7 +85,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -93,7 +94,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -102,7 +103,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -111,7 +112,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -120,7 +121,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -129,7 +130,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -138,7 +139,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -147,7 +148,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -156,7 +157,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -165,7 +166,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -174,7 +175,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -183,7 +184,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>
@ -192,7 +193,7 @@
</li>
<li>
<a href="javascript:;">
<div class="tj-list-img">
<div class="tj-list-img mask-active">
<img src="images/img-bg.png" alt="" />
<span></span>
</div>

238
page5.html
View File

@ -0,0 +1,238 @@
<!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/swiper-bundle.min.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>
<div class="header-title">
<h2>作品展示</h2>
</div>
<div class="header-btn header-login"><span></span><p>登录</p></div>
</div>
</div>
<!-- 作品展示 -->
<div class="page-content">
<div class="work-wrapper">
<div class="work-content">
<div class="work-header">
<p>序号</p>
<p class="item-name">作品名称</p>
<p class="item-author">作者</p>
<p class="item-time">创建时间</p>
<p class="list-star">评分</p>
<p>操作</p>
</div>
<div class="swiper-container">
<ul class="work-list swiper-wrapper">
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">1</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">2</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">3</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">4</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">5</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">6</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">7</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">8</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">9</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<p class="item-num">10</p>
<p class="item-name">六轴机器人-垃圾分类</p>
<p class="item-author">李卓俊</p>
<p class="item-time">2024/08/13</p>
<div class="list-star">
<span class="active-star"></span>
<span class="active-star"></span>
<span class="active-star"></span>
<span></span>
<span></span>
</div>
<p class="item-handle"></p>
</a>
</li>
</ul>
</div>
<div class="swiper-btn swiper-prev"></div>
<div class="swiper-btn swiper-next"></div>
</div>
</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>
var mySwiper = new Swiper('.swiper-container',{
direction: 'vertical', // 垂直滚动
loop: true,
speed: 1000,
autoplay: {
disableOnInteraction: false,
},
onlyExternal: true,
slidesPerView: 7,
slidesPerGroup: 7,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
</script>
</html>
Write Preview
Loading…
Cancel
Save