38 changed files with 266 additions and 1500 deletions
-
35README.md
-
4ai_chat.html
-
35css/index.css
-
5css/plugins/gridNavigation.css
-
486css/style.css
-
12index.html
-
12index2.html
-
10index3.html
-
2js/index.js
-
1js/libs/layui/css/layui.css
-
1js/libs/layui/css/modules/code.css
-
1js/libs/layui/css/modules/laydate/default/laydate.css
-
BINjs/libs/layui/css/modules/layer/default/icon-ext.png
-
BINjs/libs/layui/css/modules/layer/default/icon.png
-
1js/libs/layui/css/modules/layer/default/layer.css
-
BINjs/libs/layui/css/modules/layer/default/loading-0.gif
-
BINjs/libs/layui/css/modules/layer/default/loading-1.gif
-
BINjs/libs/layui/css/modules/layer/default/loading-2.gif
-
BINjs/libs/layui/font/iconfont.eot
-
554js/libs/layui/font/iconfont.svg
-
BINjs/libs/layui/font/iconfont.ttf
-
BINjs/libs/layui/font/iconfont.woff
-
BINjs/libs/layui/font/iconfont.woff2
-
5js/libs/layui/layui.js
-
6page-codeVideo.html
-
16page-pdf.html
-
16page-pdfVideo.html
-
8page1-1.html
-
9page1.html
-
22page2.html
-
22page3-1.html
-
22page3-2.html
-
22page3-3.html
-
95page3-4.html
-
9page3.html
-
12page4.html
-
11page5.html
-
332test.html
@ -0,0 +1,35 @@ |
|||
|
|||
``` |
|||
ftExhibition |
|||
├─ css |
|||
│ ├─ index.css 主css样式表 |
|||
│ ├─ libs |
|||
│ └─ plugins |
|||
├─ fonts |
|||
├─ images |
|||
├─ js |
|||
│ ├─ index.js 页面js 登录 / 切换账号 / 查看用户信息 / 退出应用程序 / 首页动态样式 / 首页菜单跳转 |
|||
│ ├─ libs |
|||
│ └─ plugins |
|||
├─ media 资源文件夹（可根据自身情况来） |
|||
│ ├─ pdf |
|||
│ └─ video |
|||
├─ index.html 正边框首页 |
|||
├─ index2.html 无边框首页 |
|||
├─ index3.html 异形边框首页 |
|||
├─ page1.html 编程体验 |
|||
├─ page1-1.html 编程体验 - 三级内容页 |
|||
├─ page2.html 场景演示 |
|||
├─ page3.html AI资源库 |
|||
├─ page3-1.html AI资源库 - 人工智能 |
|||
├─ page3-2.html AI资源库 - 机器人 |
|||
├─ page3-3.html AI资源库 - AI大模型 |
|||
├─ page3-4.html AI资源库 - AI阅行 |
|||
├─ page4.html 实战竞赛 |
|||
├─ page5.html 作品展示 |
|||
├─ ai_chat.html AI数字人 |
|||
├─ page-codeVideo.html 编码+视频 三级内容页 |
|||
├─ page-pdf.html pdf 三级内容页 |
|||
└─ page-pdfVideo.html pdf+视频 三级内容页 |
|||
|
|||
``` |
|||
@ -1,486 +0,0 @@ |
|||
.contanier{ |
|||
width: 100%; |
|||
height: calc(100vh); |
|||
background: url('../images/bg.gif') no-repeat top left; |
|||
background-size: cover; |
|||
overflow: hidden; |
|||
} |
|||
.return { |
|||
position: fixed; |
|||
bottom: 50%; |
|||
right: 20px; |
|||
width: 1.25rem; |
|||
height: 1.25rem; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
font-size: .375rem; |
|||
line-height: 1.25rem; |
|||
background-color: yellow; |
|||
font-weight: bold; |
|||
color: #000; |
|||
z-index: 9999; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* nav部分 */ |
|||
.flex-container { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
justify-items: center; |
|||
margin: 30px; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.flex-container .flex-middle{ |
|||
width: 500px; |
|||
height: 400px; |
|||
line-height: 400px; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: .25rem; |
|||
font-weight: bold; |
|||
border: 1px solid #fff; |
|||
} |
|||
|
|||
.flex-container ul { |
|||
position: relative; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
flex-direction: row; |
|||
width: calc((100% - 600px) / 2); |
|||
height: 400px; |
|||
} |
|||
|
|||
|
|||
/* .flex-container ul.flex-left { |
|||
position: relative; |
|||
border: 1px solid red; |
|||
} */ |
|||
|
|||
.flex-container ul.flex-left li:nth-child(1) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.flex-container ul.flex-left li:nth-child(2) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 140px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.flex-container ul.flex-left li:nth-child(3) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 280px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
|
|||
.flex-container ul.flex-right li:nth-child(1) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.flex-container ul.flex-right li:nth-child(2) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 140px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.flex-container ul.flex-right li:nth-child(3) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 280px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.flex-container ul li{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 1.25rem; |
|||
line-height: 1.25rem; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: .25rem; |
|||
font-weight: bold; |
|||
background-color: rgb(0, 174, 255); |
|||
border: 1px solid #000; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.flex-container ul li img{ |
|||
display: block; |
|||
margin-left: .375rem; |
|||
height: .625rem; |
|||
} |
|||
|
|||
.flex-item-link img.active{ |
|||
position: fixed; |
|||
top: 50%; |
|||
left: -50%; |
|||
width: 400px; |
|||
height: 400px; |
|||
margin: -200px 0 0 -200px; |
|||
} |
|||
|
|||
.flex-container ul li a{ |
|||
display: block; |
|||
} |
|||
|
|||
/* pdf预览 */ |
|||
.pdfobject-container { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: calc(100vw); |
|||
height: calc(100vh); |
|||
z-index: 999; |
|||
} |
|||
|
|||
.chat-wrapper { |
|||
position: relative; |
|||
width: 10rem; |
|||
height: 10rem; |
|||
margin: .375rem auto; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.chat-content { |
|||
width: 100%; |
|||
height: calc(100% - 2.5rem); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.chat-message { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin: .125rem; |
|||
padding: .125rem; |
|||
line-height: .5rem; |
|||
font-size: .25rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.chat-message p { |
|||
position: relative; |
|||
line-height: .5rem; |
|||
padding: 0 .125rem; |
|||
margin-right: .125rem; |
|||
background-color: burlywood; |
|||
border-radius: .05rem; |
|||
} |
|||
|
|||
.chat-message p span{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -0.45rem; |
|||
width: 1rem; |
|||
height: .375rem; |
|||
text-align: center; |
|||
line-height: .375rem; |
|||
border: 1px solid #000; |
|||
border-radius: .05rem; |
|||
font-size: .175rem; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.chat-message p span:hover{ |
|||
background-color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn{ |
|||
border: none; |
|||
color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn:hover{ |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.chat-message img { |
|||
display: block; |
|||
width: .5rem; |
|||
height: .5rem; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.bot-message { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.bot-message p { |
|||
margin-left: .125rem; |
|||
background-color: rgb(0, 209, 112); |
|||
} |
|||
.loading{ |
|||
position: relative; |
|||
} |
|||
.loading img { |
|||
display: block; |
|||
width: .25rem; |
|||
height: .25rem; |
|||
margin-top: .125rem; |
|||
animation: rotate 2s linear infinite; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.chat-send { |
|||
width: 100%; |
|||
height: 2.5rem; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
} |
|||
|
|||
.chat-send textarea { |
|||
display: block; |
|||
width: calc(100% - .5rem); |
|||
height: 1.25rem; |
|||
font-size: .3rem; |
|||
line-height: .375rem; |
|||
border: none; |
|||
padding: .25rem; |
|||
background-color: #e4e4e4; |
|||
} |
|||
|
|||
.send-button-container { |
|||
text-align: right; |
|||
} |
|||
|
|||
.send-button { |
|||
margin: .125rem .25rem 0 0; |
|||
padding: 0 .25rem; |
|||
line-height: .5rem; |
|||
font-size: .325rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.send-disabled-button { |
|||
color: #7c7c7c; |
|||
} |
|||
|
|||
.scene-wrapper{ |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
flex-wrap: wrap; |
|||
width: calc(100vw - .525rem); |
|||
height: calc(100vh - .525rem); |
|||
padding: .25rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.scene-item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-self: center; |
|||
width: calc(100% / 3 - .525rem); |
|||
margin: .25rem; |
|||
} |
|||
|
|||
.scene-item img{ |
|||
display: block; |
|||
width: 2.5rem; |
|||
height: 2.5rem; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.scene-item p{ |
|||
margin-top: .25rem; |
|||
font-size: .3rem; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 菜单3D */ |
|||
.show-nav{ |
|||
position: relative; |
|||
width: 1000px; |
|||
height: 460px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto; |
|||
z-index: 99; |
|||
} |
|||
|
|||
#showcase { |
|||
width: 100%; |
|||
height: 360px; |
|||
/* border-radius: 8px; */ |
|||
position: absolute; |
|||
transform-style: preserve-3d; |
|||
transition: transform 1s; |
|||
} |
|||
|
|||
.menu-item{ |
|||
position: absolute; |
|||
width: 240px; |
|||
height: 240px; |
|||
border-radius: 100%; |
|||
background-color: #fff; |
|||
text-align: center; |
|||
line-height: 240px; |
|||
font-size: 26px; |
|||
font-weight: bold; |
|||
color: #000; |
|||
cursor: pointer; |
|||
} |
|||
/* |
|||
.a { |
|||
transform: rotateY(0deg); |
|||
background: #ed1c24; |
|||
} |
|||
.b { |
|||
transform: rotateY(60deg); |
|||
background: #0072bc; |
|||
} |
|||
.c { |
|||
transform: rotateY(120deg); |
|||
background: #39b54a; |
|||
} |
|||
.d { |
|||
transform: rotateY(180deg); |
|||
background: #f26522; |
|||
} |
|||
.e { |
|||
transform: rotateY(240deg); |
|||
background: #630460; |
|||
} |
|||
.f { |
|||
transform: rotateY(300deg); |
|||
background: #8c6239; |
|||
} |
|||
*/ |
|||
|
|||
#nav { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
} |
|||
#nav > button { |
|||
width: 64px; |
|||
height: 36px; |
|||
color: #666; |
|||
font: bold 16px arial; |
|||
text-align: center; |
|||
margin: 5px; |
|||
text-shadow: 0px 1px 0px #f5f5f5; |
|||
background: #f6f6f6; |
|||
border: solid 2px rgba(0, 0, 0, 0.4); |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
-webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
-moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
cursor: pointer; |
|||
} |
|||
#nav > button:active, |
|||
#nav > button.down { |
|||
background: #dfdfdf; |
|||
border: solid 2px rgba(0, 0, 0, 0.6); |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.container { |
|||
width: 250px; |
|||
height: 200px; |
|||
position: relative; |
|||
perspective: 1000px; |
|||
} |
|||
|
|||
.carousel { |
|||
height: 100%; |
|||
width: 100%; |
|||
position: absolute; |
|||
transform-style: preserve-3d; |
|||
transition: transform 1s; |
|||
} |
|||
|
|||
.item { |
|||
display: block; |
|||
position: absolute; |
|||
background: #000; |
|||
width: 250px; |
|||
height: 200px; |
|||
line-height: 200px; |
|||
font-size: .375rem; |
|||
text-align: center; |
|||
color: #FFF; |
|||
opacity: 0.95; |
|||
border-radius: 10px; |
|||
cursor: pointer; |
|||
} |
|||
.item a{ |
|||
/* display: block; */ |
|||
} |
|||
|
|||
.a { |
|||
transform: rotateY(0deg) translateZ(250px); |
|||
background: #ed1c24; |
|||
} |
|||
.b { |
|||
transform: rotateY(60deg) translateZ(250px); |
|||
background: #0072bc; |
|||
} |
|||
.c { |
|||
transform: rotateY(120deg) translateZ(250px); |
|||
background: #39b54a; |
|||
} |
|||
.d { |
|||
transform: rotateY(180deg) translateZ(250px); |
|||
background: #f26522; |
|||
} |
|||
.e { |
|||
transform: rotateY(240deg) translateZ(250px); |
|||
background: #630460; |
|||
} |
|||
.f { |
|||
transform: rotateY(300deg) translateZ(250px); |
|||
background: #8c6239; |
|||
} |
|||
|
|||
.next, .prev { |
|||
color: #444; |
|||
position: absolute; |
|||
top: 50%; |
|||
padding: 15px 30px; |
|||
cursor: pointer; |
|||
background: #CCC; |
|||
border-radius: 5px; |
|||
border-top: 1px solid #FFF; |
|||
box-shadow: 0 5px 0 #999; |
|||
transition: box-shadow 0.1s, top 0.1s; |
|||
z-index: 999; |
|||
} |
|||
.next:hover, .prev:hover { color: #000; } |
|||
.next:active, .prev:active { |
|||
top: 51%; |
|||
box-shadow: 0 1px 0 #999; |
|||
} |
|||
.next { right: .75rem; } |
|||
.prev { left: .75rem; } |
|||
|
|||
1
js/libs/layui/css/layui.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1 +0,0 @@ |
|||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none} |
|||
1
js/libs/layui/css/modules/laydate/default/laydate.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
Before Width: 180 | Height: 100 | Size: 5.8 KiB |
|
Before Width: 210 | Height: 61 | Size: 11 KiB |
1
js/libs/layui/css/modules/layer/default/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
Before Width: 60 | Height: 24 | Size: 5.7 KiB |
|
Before Width: 37 | Height: 37 | Size: 701 B |
|
Before Width: 32 | Height: 32 | Size: 1.7 KiB |
554
js/libs/layui/font/iconfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
5
js/libs/layui/layui.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,95 @@ |
|||
<!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 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="window.location.href='page3.html';"><span></span><p>返回</p></div> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- AI资源库 - AI阅行 --> |
|||
<div class="page-iframe"> |
|||
<!-- https://www.aiyxlib.com/#/ --> |
|||
<!-- https://webh.aiyxlib.com?sid=aiyxlibmultimediaadmin --> |
|||
<iframe class="iframe" src="https://www.aiyxlib.com/#/" title="AI阅行" width="100%" height="100%"></iframe> |
|||
</div> |
|||
|
|||
<!-- 账号：admin 密码：83560792 --> |
|||
<!-- 登录 --> |
|||
<div id="form-layer" class="layer-login" style="display: none;"> |
|||
<h3>账号登录</h3> |
|||
<ul class="login-form"> |
|||
<li> |
|||
<p>账号</p> |
|||
<input type="text" placeholder="请输入账号" value="admin" /> |
|||
</li> |
|||
<li> |
|||
<p>密码</p> |
|||
<input type="password" placeholder="请输入密码" value="83560792" /> |
|||
</li> |
|||
</ul> |
|||
<button type="submit" class="login-submit" id="btn-submit-form">立即登录</button> |
|||
</div> |
|||
<div id="user-layer" class="layer-login" style="display: none;"> |
|||
<div class="user-info"> |
|||
<img src="images/index-img2.png" alt="" /> |
|||
<p class="user-name">Admin</p> |
|||
<ul class="user-other"> |
|||
<li> |
|||
<p>8个</p> |
|||
<span>代码上传</span> |
|||
</li> |
|||
<li> |
|||
<p>100</p> |
|||
<span>积分</span> |
|||
</li> |
|||
<li> |
|||
<p>10</p> |
|||
<span>获赞</span> |
|||
</li> |
|||
</ul> |
|||
<div class="change-accout-btn">切换账号</div> |
|||
</div> |
|||
</div> |
|||
<!-- 微信登录 --> |
|||
<div id="wechat-layer" class="layer-login" style="display: none;"> |
|||
<h3>账号登录</h3> |
|||
<div class="wechat-login"> |
|||
<img src="images/wechat.png" alt="" /> |
|||
<span>请使用微信扫描二维码登录</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 弹出框 --> |
|||
<script type="text/javascript" src="js/libs/layer/layer.js"></script> |
|||
<!-- pdf控件 --> |
|||
<script type="text/javascript" src="js/plugins/pdfobject.js"></script> |
|||
<script type="text/javascript" src="js/index.js"></script> |
|||
|
|||
</html> |
|||
@ -1,332 +0,0 @@ |
|||
<!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="shortcut icon" type="image/x-icon" href="images/logo.png"> --> |
|||
<link rel="stylesheet" type="text/css" href="./css/libs/reset.css" /> |
|||
<!-- <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css"> |
|||
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"> --> |
|||
<!-- <link rel="stylesheet" type="text/css" href="./js/libs/layui/css/layui.css" media="all"> --> |
|||
<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/style.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>首页</title> |
|||
</head> |
|||
|
|||
<!-- <div class="box_pdf"> |
|||
<a |
|||
href="/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf" |
|||
>编程学习 看pdf open</a |
|||
> |
|||
</div> --> |
|||
<!-- https://animate.style/ --> |
|||
<body> |
|||
<div class="contanier"> |
|||
<div class="return">返回</div> |
|||
<div class="flex-container"> |
|||
<ul class="flex-left"> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a href="javascript:;" alt="">编程系统</a> |
|||
<img src="/images/browsers/chrome.png" alt="" /> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a style="color: yellow;" href="scene_presentation.html" alt="">场景演示</a> |
|||
<img src="/images/browsers/iexplore.png" alt="" /> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a style="color: yellow;" onclick="showPDF2()">编程学习</a> |
|||
<img src="/images/browsers/safari.png" alt="" /> |
|||
</li> |
|||
</ul> |
|||
<div class="flex-middle">中间机器人图</div> |
|||
<ul class="flex-right"> |
|||
<li class="flex-item animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/iexplore.png" alt="" /> |
|||
<a href="javascript:;" alt="">实战竞赛</a> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/chrome.png" alt="" /> |
|||
<a href="javascript:;" alt="">作品展示</a> |
|||
</li> |
|||
<li class="flex-item flex-item-link animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/safari.png" alt="" /> |
|||
<!-- ai_chat.html --> |
|||
<a style="color: yellow;" href="javascript:;" alt="">AI数字人</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div id="my-pdf"></div> |
|||
|
|||
|
|||
<!-- 静态图片 --> |
|||
<img src="./images/33e2e72d9a0c855f036b4cb55448f44af67a0635.webp" alt="静态webp"> |
|||
<img src="./images/azpx0-52d5m.webp" alt="动态webp"> |
|||
|
|||
<!-- <picture> |
|||
<source media="(min-width:650px)" srcset="./images/azpx0-52d5m.webp"> |
|||
<source media="(min-width:465px)" srcset="https://static.jyshare.com/libs/images/code-icon-script.png"> |
|||
<img src="./images/azpx0-52d5m.webp" style="width:auto;"> |
|||
</picture> --> |
|||
|
|||
<!-- 动态图片 --> |
|||
<!-- <video autoplay loop muted playsinline> |
|||
<source src="./images/azpx0-52d5m.webp" type="image/webp"> |
|||
Your browser does not support the video tag. |
|||
</video> --> |
|||
|
|||
<!-- 菜单3D效果 --> |
|||
<!-- <div class="show-nav"> |
|||
<ul id="showcase"> |
|||
<li class="menu-item a">编程系统</li> |
|||
<li class="menu-item b">场景演示</li> |
|||
<li class="menu-item c">编程学习</li> |
|||
<li class="menu-item d">实战竞赛</li> |
|||
<li class="menu-item e">作品展示</li> |
|||
<li class="menu-item f">AI数字人</li> |
|||
</ul> |
|||
<div id="nav" class="noselect"> |
|||
<button class="left">←</button> |
|||
<button class="right">→</button> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<div class="show-nav"> |
|||
<div class="container"> |
|||
<div class="carousel"> |
|||
<div class="item a">编程系统</div> |
|||
<div class="item b"><a href="scene_presentation.html" alt="">场景演示</a></div> |
|||
<div class="item c"><a onclick="showPDF2()">编程学习</a></div> |
|||
<div class="item d">实战竞赛</div> |
|||
<div class="item e">作品展示</div> |
|||
<div class="item f"><a href="ai_chat.html" alt="">AI数字人</a></div> |
|||
</div> |
|||
</div> |
|||
<div class="next">Next</div> |
|||
<div class="prev">Prev</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> |
|||
<!-- 粒子插件2个 --> |
|||
<!-- <script type="text/javascript" src="/js/plugins/particles.min.js"></script> |
|||
<script type="text/javascript" src="/js/plugins/app.js"></script> --> |
|||
<!-- 菜单3D效果2个 --> |
|||
<script type="text/javascript" src="js/plugins/jquery.reflection.js"></script> |
|||
<script type="text/javascript" src="js/plugins/jquery.cloud9carousel.js"></script> |
|||
|
|||
<script type="text/javascript"> |
|||
function showPDF() { |
|||
var pdf = document.createElement('embed') |
|||
pdf.src = |
|||
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf' |
|||
pdf.type = 'application/pdf' |
|||
pdf.width = '100%' |
|||
pdf.height = 'calc(100vh)' |
|||
document.getElementById('pdf-container').appendChild(pdf) |
|||
} |
|||
|
|||
function showPDF2() { |
|||
PDFObject.embed( |
|||
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf', |
|||
'#my-pdf' |
|||
) |
|||
} |
|||
|
|||
$('.flex-item-link').on('click', function () { |
|||
$(this).find('img').addClass('active animate__animated animate__zoomInDown'); |
|||
// $(this).find('img').on('click', function () { |
|||
// const _this = $(this) |
|||
// setTimeout(function () { |
|||
// _this.removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight') |
|||
// setTimeout(function(){ |
|||
// window.top.location.href = 'ai_chat.html'; |
|||
// return false; |
|||
// },1000) |
|||
// }, 1000) |
|||
// }) |
|||
|
|||
const _this = $(this) |
|||
setTimeout(function () { |
|||
_this.find('img').removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight') |
|||
setTimeout(function(){ |
|||
window.top.location.href = 'ai_chat.html'; |
|||
return false; |
|||
},1000) |
|||
}, 2000) |
|||
}) |
|||
|
|||
$('.return').on('click', function () { |
|||
$('#my-pdf').removeClass('pdfobject-container') |
|||
$('#my-pdf').children().remove() |
|||
window.location.reload(); |
|||
}) |
|||
// 菜单切换 |
|||
var showcase = $('#showcase') |
|||
showcase.Cloud9Carousel({ |
|||
yOrigin: 52, |
|||
yRadius: 40, |
|||
itemClass: 'menu-item', |
|||
// mirror: { |
|||
// gap: 12, |
|||
// height: 0.2 |
|||
// }, |
|||
buttonLeft: $('#nav > .left'), |
|||
buttonRight: $('#nav > .right'), |
|||
autoPlay: 1, |
|||
bringToFront: true, |
|||
onLoaded: function () { |
|||
showcase.css('visibility', 'visible') |
|||
showcase.css('display', 'none') |
|||
showcase.fadeIn(1500) |
|||
}, |
|||
}) |
|||
|
|||
$('#nav > button').click(function (e) { |
|||
var b = $(e.target).addClass('down') |
|||
setTimeout(function () { |
|||
b.removeClass('down') |
|||
}, 80) |
|||
}) |
|||
|
|||
$(document).keydown(function (e) { |
|||
switch (e.keyCode) { |
|||
/* left arrow */ |
|||
case 37: |
|||
$('#nav > .left').click() |
|||
break |
|||
|
|||
/* right arrow */ |
|||
case 39: |
|||
$('#nav > .right').click() |
|||
} |
|||
}) |
|||
|
|||
|
|||
// 菜单3D效果 |
|||
var carousel = $(".carousel"), |
|||
items = $(".item"), // 轮播图的每一项 |
|||
itemCount = items.length, |
|||
currdeg = 0, |
|||
autoRotateInterval, |
|||
autoRotateEnabled = true; // 标记是否启用自动旋转 |
|||
rotationDuration = 2000; // 旋转时间，单位为毫秒 |
|||
|
|||
$(".next").on("click", { d: "n" }, btnRotate); |
|||
$(".prev").on("click", { d: "p" }, btnRotate); |
|||
|
|||
// 绑定点击事件 |
|||
items.on("click", function() { |
|||
var index = $(this).index(); // 获取被点击项的索引 |
|||
rotateToItem(index); // 旋转到指定项 |
|||
}); |
|||
|
|||
// 开始自动旋转 |
|||
function startAutoRotate() { |
|||
if (autoRotateInterval) { |
|||
clearInterval(autoRotateInterval); |
|||
} |
|||
|
|||
autoRotateInterval = setInterval(function() { |
|||
// 6个60 |
|||
// 4个90 |
|||
currdeg = currdeg - 60; // 向左旋转，每次 60 度 |
|||
updateTransform(); |
|||
}, rotationDuration); |
|||
} |
|||
|
|||
// 停止自动旋转 |
|||
function stopAutoRotate() { |
|||
clearInterval(autoRotateInterval); |
|||
} |
|||
|
|||
// 旋转到指定项 |
|||
function rotateToItem(index) { |
|||
var itemAngle = 360 / itemCount; // 计算每一项的角度 |
|||
var targetDeg = -index * itemAngle; // 计算目标角度 |
|||
var deltaDeg = targetDeg - currdeg; // 计算旋转的角度差 |
|||
|
|||
// 6个 如果旋转角度差大于 180 度，则选择顺时针旋转 |
|||
// 4个 90 |
|||
if (Math.abs(deltaDeg) > 180) { |
|||
deltaDeg = (deltaDeg > 0 ? deltaDeg - 360 : deltaDeg + 360); |
|||
} |
|||
|
|||
// 设置旋转的时间和缓动效果 |
|||
carousel.css({ |
|||
// transition: "transform " + (rotationDuration / 1000) + "s ease-out", |
|||
"-webkit-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"-moz-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"-o-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"transform": "rotateY(" + (currdeg + deltaDeg) + "deg)" |
|||
}); |
|||
|
|||
// 更新当前旋转角度 |
|||
currdeg += deltaDeg; |
|||
|
|||
// 触发旋转后停止自动旋转 |
|||
stopAutoRotate(); |
|||
|
|||
// 确保在旋转完成后继续自动旋转 |
|||
setTimeout(function() { |
|||
if (autoRotateEnabled) { |
|||
startAutoRotate(); |
|||
} |
|||
}, rotationDuration); // 旋转时间与自动旋转间隔匹配 |
|||
} |
|||
|
|||
// 更新 transform 样式 |
|||
function updateTransform() { |
|||
carousel.css({ |
|||
"-webkit-transform": "rotateY(" + currdeg + "deg)", |
|||
"-moz-transform": "rotateY(" + currdeg + "deg)", |
|||
"-o-transform": "rotateY(" + currdeg + "deg)", |
|||
"transform": "rotateY(" + currdeg + "deg)" |
|||
}); |
|||
} |
|||
|
|||
function btnRotate(e){ |
|||
// 6个60 |
|||
// 4个90 |
|||
if(e.data.d=="n"){ |
|||
currdeg = currdeg - 60; |
|||
} |
|||
if(e.data.d=="p"){ |
|||
currdeg = currdeg + 60; |
|||
} |
|||
|
|||
updateTransform() |
|||
|
|||
// 触发旋转后停止自动旋转 |
|||
stopAutoRotate(); |
|||
|
|||
// 确保在旋转完成后继续自动旋转 |
|||
setTimeout(function() { |
|||
if (autoRotateEnabled) { |
|||
startAutoRotate(); |
|||
} |
|||
}, rotationDuration); // 旋转时间与自动旋转间隔匹配 |
|||
} |
|||
|
|||
// 页面加载完成后开始自动旋转 |
|||
$(document).ready(function() { |
|||
startAutoRotate(); |
|||
}); |
|||
</script> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue