1、提交视频页面

src/views/AIDevelop.vue

@@ -2,32 +2,43 @@
   <!-- AI发展历程 -->
   <div class="home-container">
     <!-- 展开收起侧边栏 -->
-    <div class="icon-expand">
-      <el-icon
-          @click="toggleDrawer"
-          :style="{ color: drawerVisible ? 'white' : '#B6B0D8' }"
+    <div
+        class="icon-expand"
+        :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0'
+      }"
+        @click="toggleDrawer"
+    >
+      <span
+          class="vertical-lines"
+          :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+      >||</span
       >
-        <component :is="drawerVisible ? Fold : Expand" />
-        <!-- <Tickets /> -->
-      </el-icon>
     </div>
 
-    <transition name="drawer-slide">
-      <div class="main-content" v-if="drawerVisible">
+      <el-drawer
+          v-model="drawerVisible"
+          direction="ltr"
+          size="18%"
+          :with-header="false"
+      >
         <!-- 添加抽屉 -->
         <div class="drawer-box">
           <el-row class="tac">
             <el-col :span="12">
-              <h3 class="mb-2">
-                <el-icon><Memo /></el-icon>
-                课程小节
-              </h3>
+            <span class="mb-2">
+              <img :src="classImages" alt="课程小节图标" />
+              课程小节
+            </span>
               <el-menu
-                :default-active="course.key"
-                @open="handleOpen"
-                @close="handleClose"
-                @select="handleSelect"
-                :default-openeds="['3']"
+                  :default-active="course.key"
+                  @open="handleOpen"
+                  @close="handleClose"
+                  @select="handleSelect"
+                  :default-openeds="['3']"
               >
                 <template v-for="item in menuItems" :key="item.key">
                   <el-menu-item v-if="!item.children" :index="item.key">{{
@@ -38,13 +49,10 @@
                       <span>{{ item.title }}</span>
                     </template>
                     <el-menu-item-group v-if="item.children">
-                      <template
-                          v-for="child in item.children"
-                          :key="child.index"
-                      >
-                        <el-menu-item :index="child.index">{{
-                            child.title
-                          }}</el-menu-item>
+                      <template v-for="child in item.children" :key="child.index">
+                        <el-menu-item :index="child.index"
+                        >• {{ child.title }}</el-menu-item
+                        >
                       </template>
                     </el-menu-item-group>
                   </el-sub-menu>
@@ -53,8 +61,7 @@
             </el-col>
           </el-row>
         </div>
-      </div>
-    </transition>
+      </el-drawer>
 
     <div class="content-box">
       <div class="box-1">
@@ -79,7 +86,6 @@
         </div>
       </div>
 
-
       <div class="box-2">
         <!-- 课程标题 autoplay自动播放   @ended="playNextVideo"-->
         <div class="small-title">
@@ -104,11 +110,17 @@
         <div class="video-switch">
           <!-- 上一个视频 -->
           <div class="caret-left" @click="playPreviousVideo">
-            <el-button type="warning" round>上一节</el-button>
+            <el-button type="warning" round>
+              <img :src="leftImg" alt="Left" />
+              上一节</el-button
+            >
           </div>
           <!-- 下一个视频 -->
           <div class="caret-right" @click="playNextVideo">
-            <el-button type="warning" round>下一节</el-button>
+            <el-button type="warning" round
+            >下一节
+              <img :src="rightImg" alt="Right" />
+            </el-button>
           </div>
         </div>
       </div>
@@ -159,13 +171,17 @@
               >
             </div>
             <!-- 右侧小图标 -->
-            <div class="ai-icon-container" @click="handleAIClick">
+            <div
+                v-if="courseConfig.ccAiAnswer !== null"
+                class="ai-icon-container"
+                @click="handleAIClick"
+            >
               <img
                   src="@/assets/images/xiaozhi.png"
                   alt="AI对话"
                   class="ai-icon"
               />
-              <span class="ai-text">AI助手</span>
+              <span class="ai-text">小智智能助手</span>
             </div>
           </div>
         </div>
@@ -178,7 +194,9 @@
       >
         <div class="ai-dialog">
           <div class="ai-dialog-header">
-            <h3>小智智能助手</h3>
+            <h3>
+              <img :src="auto" alt="">
+              小智智能助手</h3>
             <el-button @click="showAIDialog = false" class="close-btn"
             >×</el-button
             >
@@ -215,12 +233,11 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import {
   Expand,
@@ -228,9 +245,21 @@ import {
   Memo
 } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
+import {
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  valueEquals
+} from 'element-plus'
+
+import classImages from '@/assets/icon/class.png'
+import leftImg from '@/assets/icon/backward.png'
+import rightImg from '@/assets/icon/f-backward.png'
 
-import {ClassType} from "@/api/class.js";
-import {Message} from "@/utils/message/Message.js";
+import auto from '@/assets/icon/auto_awesome.png'
+
+import { ClassType } from '@/api/class.js'
+import { Message } from '@/utils/message/Message.js'
 
 const router = useRouter() // 获取当前路由对象
 // 搜索框
@@ -238,7 +267,7 @@ const SearchInput = ref('')
 // 添加按钮显示状态
 const buttonVisible = ref(false)
 // 添加抽屉显示状态
-const drawerVisible = ref(true)
+const drawerVisible = ref(false)
 // 添加切换抽屉显示状态的函数
 const toggleDrawer = () => {
   drawerVisible.value = !drawerVisible.value
@@ -317,6 +346,10 @@ onMounted(async () => {
   if (title) {
     boxIconTitle.value = String(title)
   }
+  // 在视频元素上添加时间更新事件监听
+  // if (videoRef.value) {
+  //   // videoRef.value.addEventListener('timeupdate', onTimeUpdate)
+  // }
 })
 
 // 菜单打开和关闭的处理函数
@@ -611,7 +644,7 @@ const handleCloseAIDialog = () => {
 $primary-color: rgba(106, 90, 205, 0.52); // 主色调：蓝紫色
 $secondary-color: rgba(147, 112, 219, 0.66); // 辅助色：亮蓝紫色
 $accent-color: rgb(133, 89, 220); // 强调色：暗蓝紫色
-$light-color: #e6e6fa; // 浅色背景：淡紫色
+$light-color: #ffffff; // 浅色背景：淡紫色
 $text-color: #483d8b; // 文本颜色：靛蓝色
 
 /* 添加过渡样式 */
@@ -624,7 +657,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   transform: translateX(-100%);
   opacity: 0;
 }
-.main-content {
+.home-container ::v-deep(.el-drawer__body) {
   width: rpx(135);
   height: 100%;
   position: relative;
@@ -635,29 +668,28 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   height: 100%;
   display: flex;
   flex-direction: column; /* 子元素上下排列 */
-  background: linear-gradient(
-    to bottom,
-    #e2ddfc,
-    #f1effd
-  ); /* 设置悬停、聚焦、点击状态下的背景色 */
+  background: linear-gradient(to bottom, #001169, #8a78d0);
 }
 .icon-expand {
-  width: rpx(135);
-  height: rpx(30);
-  //  background: rgb(15, 28, 116, 0.4);
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
   z-index: 9999;
   position: absolute;
+  top: 50%;
+  left: 18%;
+  transform: translateY(-50%);
   cursor: pointer; // 添加鼠标指针样式
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
-.icon-expand .el-icon {
-  font-size: rpx(15);
-  position: absolute;
-  color: white;
-  left: rpx(9);
-  margin-top: rpx(17);
-}
-.icon-expand .el-icon:active {
-  color: black;
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
 }
 .home-container {
   position: fixed;
@@ -667,18 +699,16 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   bottom: 0;
   background: linear-gradient(to bottom, #001169, #b4a8e1);
   display: flex;
-  flex-direction: row;
-  gap: rpx(0);
 }
 .el-row {
   margin: auto;
-  margin-top: rpx(40);
-  margin-left: rpx(20);
+  margin-top: rpx(20);
 }
 .tac ::v-deep(.el-menu) {
   background-color: transparent;
   border: none;
   width: 100%;
+  margin-top: rpx(8);
 }
 
 /* 取消点击后的蓝色字体 el-sub-menu__title*/
@@ -699,13 +729,19 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   background: linear-gradient(to bottom, #fee78a, #ffce1b);
   background-color: transparent;
 }
+.el-menu ::v-deep(.el-icon svg) {
+  font-size: rpx(8);
+}
+
 .mb-2 {
   color: white;
-  margin-top: rpx(1);
+  font-size: rpx(8);
 }
-.mb-2 .el-icon {
-  font-size: rpx(10);
-  margin-left: rpx(5);
+.mb-2 img {
+  width: rpx(12);
+  height: rpx(12);
+  vertical-align: middle;
+  margin-top: rpx(-2);
 }
 .el-menu-item {
   width: rpx(100);
@@ -738,7 +774,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
 }
 .el-menu .el-menu-item.is-active {
-   background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
   color: black;
   font-size: rpx(8);
   box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
@@ -748,21 +784,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   display: flex;
   align-items: center;
   height: 100%;
-  width: 100%;
-  overflow-y: auto; /* 添加垂直滚动条 */
-  max-height: 100%; /* 设置最大高度 */
-  /* 添加滚动条样式 */
-  &::-webkit-scrollbar {
-    width: rpx(1);
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #b4a8e1;
-    border-radius: rpx(5);
-  }
-  &::-webkit-scrollbar-track {
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: rpx(5);
-  }
+  width: 80%;
 }
 .drawer-box .toggle-button {
   width: rpx(10);
@@ -819,10 +841,9 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   flex: 1;
   display: flex; // 添加 flex 布局
   align-items: center; // 垂直居中
-  color: black; // 设置图标颜色为白色
+  color: white; // 设置图标颜色为白色
   padding-left: rpx(15);
   font-size: rpx(10); // 设置图标大小，可按需调整
-  z-index: 9999;
 }
 .box-icon .left-icon {
   margin-left: rpx(10);
@@ -832,7 +853,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 .left-box span {
   position: absolute;
   font-size: rpx(11); // 默认字体大小
-  color: black;
+  color: white;
 }
 
 .right-box {
@@ -853,14 +874,14 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
     background-color: rgb(255, 255, 255, 0.5);
     border-radius: rpx(12);
     border: white 1px solid;
-    color: #aaa5c5;
+    color: white;
   }
   ::v-deep(.el-input__icon) {
-    color: #aaa5c5; // 设置输入框图标颜色为白色
+    color: white; // 设置输入框图标颜色为白色
   }
   // 添加占位符样式
   ::v-deep(.el-input__inner::placeholder) {
-    color: #aaa5c5;
+    color: white;
   }
   // 添加输入框文字颜色样式
   ::v-deep(.el-input__inner) {
@@ -887,13 +908,10 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   width: 100%;
   height: rpx(300);
   video.full-box-video {
-    // width: 100%;
     height: rpx(280);
     margin: 0 auto;
     border-radius: rpx(12);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
     object-fit: cover;
-    // object-fit: contain;
   }
 }
 
@@ -906,7 +924,7 @@ video::-webkit-media-controls-panel {
   width: 100%;
   margin-top: rpx(-20);
   height: rpx(20);
-  color: black;
+  color: white;
   font-size: rpx(10);
   justify-content: center; //使子元素水平居中
 }
@@ -929,12 +947,17 @@ video::-webkit-media-controls-panel {
 .caret-right ::v-deep(.el-button.is-round) {
   width: rpx(50);
   height: rpx(15);
-  color: #aaa5c5;
+  color: white;
+  font-size: rpx(7);
   border-radius: none;
   border: 1px white solid;
   background-color: rgb(255, 255, 255, 0.5); // 进度条背景颜色，调浅为半透明白色
   box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
 }
+.caret-right img,
+.caret-left img {
+  width: rpx(12);
+}
 
 // 儿童风格试题弹框样式
 .child-dialog {
@@ -951,6 +974,7 @@ video::-webkit-media-controls-panel {
     border-top: none;
     padding: rpx(10) rpx(20);
     text-align: center;
+    margin-top: auto; // 使底部按钮位于底部
   }
 
   .el-dialog__wrapper {
@@ -962,15 +986,14 @@ video::-webkit-media-controls-panel {
     border: none;
     border-radius: rpx(20);
     background: linear-gradient(
-      135deg,
-      $light-color,
-      #d8bfd8
+            135deg,
+            $light-color,
+            #d8bfd8
     ); // 柔和的蓝紫色渐变
-    // 添加边框边晕效果
-    box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
-      0 0 40px 10px rgba($primary-color, 0.4),
-      0 0 60px 15px rgba($primary-color, 0.2);
     overflow: hidden;
+    display: flex; // 添加 flex 布局
+    flex-direction: column; // 设置垂直布局
+    min-height: 0; // 防止子元素溢出
     // 添加装饰元素
     &::before {
       content: '';
@@ -979,33 +1002,22 @@ video::-webkit-media-controls-panel {
       left: 0;
       width: 100%;
       height: rpx(10);
-      background: linear-gradient(
-        90deg,
-        $primary-color,
-        $secondary-color,
-        $accent-color
-      );
+      background: linear-gradient(90deg, $secondary-color, $accent-color);
     }
   }
 }
 
 // 问题标题样式
 .question-title {
-  background: linear-gradient(
-    90deg,
-    rgba($primary-color, 0.2),
-    rgba($secondary-color, 0.2)
-  );
   padding: rpx(15);
   border-radius: rpx(12);
   margin-bottom: rpx(20);
-  color: $accent-color;
+  color: #483d8b;
   font-weight: bold;
-  font-size: rpx(14);
-  box-shadow: 0 rpx(3) rpx(10) rgba($primary-color, 0.1);
+  font-size: rpx(12);
   position: relative;
   display: flex;
-  align-items: center;
+  // align-items: center;
 
   .question-icon {
     background-color: $accent-color;
@@ -1073,25 +1085,24 @@ video::-webkit-media-controls-panel {
 .child-button {
   min-width: rpx(80);
   height: rpx(30);
-  border-radius: rpx(15);
+  border-radius: rpx(8);
   font-size: rpx(12);
   font-weight: 500;
   transition: all 0.3s ease;
   box-shadow: 0 rpx(2) rpx(8) rgba(0, 0, 0, 0.1);
 
   &.confirm {
-    background: linear-gradient(to right, $primary-color, $secondary-color);
+    background: linear-gradient(to bottom, #ab81ff, #8559dc);
     border: none;
     border-right: 15px;
     color: white;
 
     &:hover {
       background: linear-gradient(
-        to right,
-        color.adjust($primary-color, $lightness: -5%),
-        color.adjust($secondary-color, $lightness: -5%)
+              to bottom,
+              color.adjust(#ab81ff, $lightness: -5%),
+              color.adjust(#8559dc, $lightness: -5%)
       );
-      box-shadow: 0 rpx(3) rpx(10) rgba($primary-color, 0.4);
       transform: translateY(-rpx(1));
       color: white;
     }
@@ -1161,7 +1172,7 @@ video::-webkit-media-controls-panel {
     margin-right: rpx(10);
     background-color: $primary-color;
     padding: rpx(5);
-    box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.2);
+    // box-shadow: 0 rpx(2) rpx(5) rgba($primary-color, 0.2);
   }
 
   .ai-text-content {
@@ -1171,16 +1182,17 @@ video::-webkit-media-controls-panel {
     font-size: rpx(10);
     color: $text-color;
     max-width: 80%;
-    box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
+    // box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
   }
 }
 
 // 用户输入框样式
 .user-input {
   ::v-deep(.el-input__wrapper) {
-    border-radius: rpx(15);
+    height: rpx(23);
+    border-top-left-radius: rpx(5);
+    border-bottom-left-radius: rpx(5);
     border-color: rgba($primary-color, 0.3);
-    margin-right: 10px;
 
     &:focus-within {
       box-shadow: 0 0 0 rpx(1) rgba($primary-color, 0.5);
@@ -1189,9 +1201,16 @@ video::-webkit-media-controls-panel {
 
   ::v-deep(.el-input__inner) {
     font-size: rpx(10);
-    color: $text-color;
+    // color: $text-color;
     text-indent: 1em;
   }
+  ::v-deep(.el-input-group__append, .el-input-group__prepend) {
+    background: linear-gradient(to bottom, #ab81ff, #8559dc);
+    border-top-right-radius: rpx(5);
+    border-bottom-right-radius: rpx(5);
+    color: white;
+    font-size: rpx(9);
+  }
 }
 /* 定义淡入和缩放动画 */
 .fade-scale-enter-active,
@@ -1221,18 +1240,12 @@ video::-webkit-media-controls-panel {
 
 .child-dialog {
   border: none;
-  border-radius: rpx(20);
-  background: linear-gradient(
-    135deg,
-    $light-color,
-    #d8bfd8
-  ); // 柔和的蓝紫色渐变
-  box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
-    0 0 40px 10px rgba($primary-color, 0.4),
-    0 0 60px 15px rgba($primary-color, 0.2);
+  border-radius: rpx(15);
+  background: rgb(255, 255, 255, 0.8); // 柔和的蓝紫色渐变
   overflow: hidden;
-  padding: rpx(20);
-  width: 60%;
+  padding: rpx(15);
+  width: 40%;
+  // height: 60%;
   position: relative;
 }
 
@@ -1252,11 +1265,8 @@ video::-webkit-media-controls-panel {
 
 .ai-dialog {
   border: none;
-  border-radius: rpx(20);
-  background: linear-gradient(135deg, $light-color, #d8bfd8);
-  box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
-    0 0 40px 10px rgba($primary-color, 0.4),
-    0 0 60px 15px rgba($primary-color, 0.2);
+  border-radius: rpx(15);
+  background: rgb(255, 255, 255, 0.8);
   overflow: hidden;
   padding: rpx(20);
   width: 30%;
@@ -1275,23 +1285,22 @@ video::-webkit-media-controls-panel {
     left: 0;
     width: 100%;
     height: rpx(10);
-    background: linear-gradient(
-      90deg,
-      $primary-color,
-      $secondary-color,
-      $accent-color
-    );
   }
 }
 
 .ai-dialog-header {
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-bottom: rpx(15);
+  margin-top: rpx(-10);
+  img{
+    width: rpx(15);
+  }
 
   h3 {
-    color: $text-color;
+    color: black;
     font-size: rpx(12);
   }
 
@@ -1301,6 +1310,10 @@ video::-webkit-media-controls-panel {
     height: rpx(20);
     font-size: rpx(16);
     line-height: 1;
+    position: absolute;
+    background-color: transparent;
+    border: none;
+    margin-left: rpx(200);
   }
 }
 
@@ -1317,7 +1330,7 @@ video::-webkit-media-controls-panel {
   margin-bottom: rpx(15);
   // 可以根据实际情况调整最大高度
   max-height: 50vh;
-  padding: 5px 10px;
+  // padding: 5px 10px;
 
   .message {
     display: flex;
@@ -1341,12 +1354,10 @@ video::-webkit-media-controls-panel {
     }
 
     .message-content {
-      background-color: $light-color;
-      padding: rpx(8) rpx(12);
-      border-radius: rpx(10);
+      background-color: #ffffff;
       font-size: rpx(10);
-      color: $text-color;
       max-width: 80%;
+      color: black;
       box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
     }
   }
@@ -1389,11 +1400,11 @@ video::-webkit-media-controls-panel {
     }
 
     .message-content {
-      background-color: $light-color;
+      background-color: white;
       padding: rpx(8) rpx(12);
-      border-radius: rpx(10);
+      border-radius: rpx(5);
       font-size: rpx(10);
-      color: $text-color;
+      color: black;
       max-width: 80%;
       box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
     }