0823-1

6 months ago · 9f003ba350
5 changed files with 104 additions and 4 deletions
--- a/README.md
+++ b/README.md
@ -30,6 +30,7 @@ ftExhibition
 ├─ ai_chat.html         AI数字人
 ├─ page-codeVideo.html  编码+视频  三级内容页
 ├─ page-pdf.html        pdf        三级内容页
-└─ page-pdfVideo.html   pdf+视频  三级内容页
+├─ page-pdfVideo.html   pdf+视频  三级内容页
+└─ page-contentInfo.html 编程模式下只有视频和信息内容

 ```
--- a/css/index.css
+++ b/css/index.css
@ -56,7 +56,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  position: relative;
  width: 100vw;
  height: 100vh;
-  background-color: #0F1B46;
+  /* background-color: #0F1B46; */
  font-family: 'DOUYU-Regular';
  overflow: hidden;
 }
@ -827,6 +827,33 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  cursor: not-allowed;
 }

+.run-btn {
+  position: relative;
+  width: 1.25rem;
+  height: .725rem;
+  line-height: .725rem;
+  padding-left: .75rem;
+  font-size: .325rem;
+  text-align: center;
+  color: #fff;
+  background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%);
+  border-radius: .725rem;
+  cursor: pointer;
+  margin: .5rem 0 0 .25rem;
+}
+
+.run-btn::before {
+  content: "";
+  position: absolute;
+  left: .375rem;
+  top: 50%;
+  width: .45rem;
+  height: .45rem;
+  background: url("../images/run.png") no-repeat left top;
+  background-size: .45rem .45rem;
+  transform: translateY(-50%);
+}
+
 /* ai数字人 end */

 .page-big-ai{
@ -976,7 +1003,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  width: 7.4rem;
 }

-.video-content {
+.perview-video .video-content {
  width: 100%;
  height: 4.5rem;
  background-color: #000;
@ -1034,6 +1061,18 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  background-size: cover;
 }

+.perview-contentInfo{
+  width: 100%;
+}
+
+.perview-contentInfo .video-content {
+  background-color: #000;
+}
+
+.perview-contentInfo .perview-info {
+  margin-left: .25rem;
+}
+
 /* 登录 */
 .layui-layer.layui-layer-login{
  background-color: transparent !important;
--- a/css/libs/reset.css
+++ b/css/libs/reset.css
@ -4,7 +4,6 @@

 html {
  color: #727272;
-  background: #f5f5f5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
 }
--- a/images/run.png
+++ b/images/run.png
--- a/page-contentInfo.html
+++ b/page-contentInfo.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+		<link rel="stylesheet" type="text/css" href="css/libs/reset.css" />
+		<link rel="stylesheet" type="text/css" href="css/index.css" />
+		<!--[if lt IE 9]>
+			<script src="js/html5shiv.js"></script>
+			<script src="js/respond.min.js"></script>
+		<![endif]-->
+		<title>编码视频</title>
+	</head>
+<body>
+  <div class="ai-wrapper perview-wrapper">
+    <div class="perview-contentInfo">
+      <div class="video-content">
+        <video  width="100%"  src="media/video/elephant/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
+      </div>
+      <ul class="perview-info">
+        <li>
+          <i>名称：</i>
+          <p>六轴机器人-垃圾分类</p>
+        </li>
+        <li>
+          <i>作者：</i>
+          <p>李卓俊</p>
+        </li>
+        <li>
+          <i>时间：</i>
+          <p>2024/08/13</p>
+        </li>
+        <li>
+          <i>评分：</i>
+          <div class="list-star">
+            <span class="active-star"></span>
+            <span class="active-star"></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </li>
+        <li>
+          <i>评语：</i>
+          <p>设计合理</p>
+        </li>
+      </ul>
+      <div class="run-btn">运行</div>
+    </div>
+  </div>
+</body>
+<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script>
+<script type="text/javascript" src="js/libs/flexible.js"></script>
+<!-- 弹出框 -->
+<script type="text/javascript" src="js/libs/layer/layer.js"></script>
+<script type="text/javascript" src="js/index.js"></script>
+</html>