From d5770d8a06feef9c7c11f83147f673ab034a2c38 Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Thu, 22 Aug 2024 11:29:24 +0800 Subject: [PATCH] 08-22 --- README.md | 35 ++ ai_chat.html | 4 +- css/index.css | 35 +- css/plugins/gridNavigation.css | 5 + css/style.css | 486 --------------- index.html | 12 +- index2.html | 12 +- index3.html | 10 +- js/index.js | 2 - js/libs/layui/css/layui.css | 1 - js/libs/layui/css/modules/code.css | 1 - .../css/modules/laydate/default/laydate.css | 1 - .../css/modules/layer/default/icon-ext.png | Bin 5911 -> 0 bytes .../layui/css/modules/layer/default/icon.png | Bin 11493 -> 0 bytes .../layui/css/modules/layer/default/layer.css | 1 - .../css/modules/layer/default/loading-0.gif | Bin 5793 -> 0 bytes .../css/modules/layer/default/loading-1.gif | Bin 701 -> 0 bytes .../css/modules/layer/default/loading-2.gif | Bin 1787 -> 0 bytes js/libs/layui/font/iconfont.eot | Bin 46684 -> 0 bytes js/libs/layui/font/iconfont.svg | 554 ------------------ js/libs/layui/font/iconfont.ttf | Bin 46508 -> 0 bytes js/libs/layui/font/iconfont.woff | Bin 30628 -> 0 bytes js/libs/layui/font/iconfont.woff2 | Bin 25964 -> 0 bytes js/libs/layui/layui.js | 5 - page-codeVideo.html | 6 +- page-pdf.html | 16 +- page-pdfVideo.html | 16 +- page1-1.html | 8 +- page1.html | 9 +- page2.html | 22 +- page3-1.html | 22 +- page3-2.html | 22 +- page3-3.html | 22 +- page3-4.html | 95 +++ page3.html | 9 +- page4.html | 12 +- page5.html | 11 +- test.html | 332 ----------- 38 files changed, 266 insertions(+), 1500 deletions(-) create mode 100644 README.md delete mode 100644 css/style.css delete mode 100644 js/libs/layui/css/layui.css delete mode 100644 js/libs/layui/css/modules/code.css delete mode 100644 js/libs/layui/css/modules/laydate/default/laydate.css delete mode 100644 js/libs/layui/css/modules/layer/default/icon-ext.png delete mode 100644 js/libs/layui/css/modules/layer/default/icon.png delete mode 100644 js/libs/layui/css/modules/layer/default/layer.css delete mode 100644 js/libs/layui/css/modules/layer/default/loading-0.gif delete mode 100644 js/libs/layui/css/modules/layer/default/loading-1.gif delete mode 100644 js/libs/layui/css/modules/layer/default/loading-2.gif delete mode 100644 js/libs/layui/font/iconfont.eot delete mode 100644 js/libs/layui/font/iconfont.svg delete mode 100644 js/libs/layui/font/iconfont.ttf delete mode 100644 js/libs/layui/font/iconfont.woff delete mode 100644 js/libs/layui/font/iconfont.woff2 delete mode 100644 js/libs/layui/layui.js create mode 100644 page3-4.html delete mode 100644 test.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..588d1be --- /dev/null +++ b/README.md @@ -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+视频 三级内容页 + +``` \ No newline at end of file diff --git a/ai_chat.html b/ai_chat.html index f31efca..ad3b326 100644 --- a/ai_chat.html +++ b/ai_chat.html @@ -51,11 +51,11 @@ diff --git a/css/index.css b/css/index.css index 9839beb..0c7b38b 100644 --- a/css/index.css +++ b/css/index.css @@ -69,7 +69,6 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ height: 1rem; line-height: 1rem; text-align: center; - cursor: pointer; z-index: 9999; } @@ -414,7 +413,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ display: block; width: 5rem; height: 3.5rem; - background: url("../../images/page-box2.png") no-repeat left top; + background: url("../images/page-box2.png") no-repeat left top; background-size: cover; backdrop-filter: blur(10px); } @@ -446,7 +445,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ width: 1692px; height: 948px; margin: -1.425rem auto 0 auto; - background: url("../../images/list-bg.png") no-repeat left top; + background: url("../images/list-bg.png") no-repeat left top; background-size: cover; /* overflow: hidden; */ } @@ -492,13 +491,13 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ } .swiper-prev{ left: -0.875rem; - background: url("../../images/left.png") no-repeat left top; + 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: url("../images/right.png") no-repeat left top; background-size: cover; } @@ -553,13 +552,13 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ width: .4rem; height: .4rem; margin-right: .125rem; - background: url("../../images/index-img5.png") no-repeat left top; + 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: url("../images/index-img4.png") no-repeat left top; background-size: cover; } @@ -579,7 +578,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ .item-handle{ width: 1.75rem; height: 1.1rem; - background: url("../../images/index-img6.png") no-repeat left top; + background: url("../images/index-img6.png") no-repeat left top; background-size: cover; margin-left: -0.125rem; cursor: pointer; @@ -788,7 +787,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ top: 50%; width: .45rem; height: .45rem; - background: url("../../images/index-img8.png") no-repeat left top; + background: url("../images/index-img8.png") no-repeat left top; background-size: .45rem .45rem; transform: translateY(-50%); } @@ -848,7 +847,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ width: .4rem !important; height: .4rem !important; color: #fff !important; - background: url("../../images/index-img3.png") no-repeat left top !important; + background: url("../images/index-img3.png") no-repeat left top !important; background-size: .4rem .4rem !important; } .layui-layer-video .layui-layer-content{ @@ -867,8 +866,8 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ .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; + background: linear-gradient( 90deg, rgba(91, 157, 255, 0.8) 0%, rgba(91, 157, 255, 0.1) 60%); + /* box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF; */ } .perview-wrapper .ai-header-wrapper{ height: 1rem; @@ -1112,4 +1111,14 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; margin-top: .3rem; text-align: center; -} \ No newline at end of file +} + +.page-iframe{ + margin-top: 1rem; + height: calc(100vh - 1rem); +} +.iframe { + background-color: #fff; + border: none; + margin: 0 auto; +} diff --git a/css/plugins/gridNavigation.css b/css/plugins/gridNavigation.css index 7eab6ef..b20a30e 100644 --- a/css/plugins/gridNavigation.css +++ b/css/plugins/gridNavigation.css @@ -105,4 +105,9 @@ line-height: .375rem; color: #fff; text-align: center; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 6f1c23b..0000000 --- a/css/style.css +++ /dev/null @@ -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; } - diff --git a/index.html b/index.html index cc7f1fa..d9b74a6 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@
-
-