updates

src/components/base/AppVideoPlayer.vue

@@ -64,6 +64,7 @@ export default {
       this.initPlayer()
     }
     this.player && this.initPlayer()
+    // this.$emit()
   },
   beforeUnmount() {
     this.player && this.player.dispose()
@@ -77,6 +78,8 @@ export default {
       const self = this
       this.player = videojs(document.querySelector('#videoJS'), this.videoOptions, function onPlayerReady() {
         self.$emit('ready', this)
+        self.$emit('videoHeight', document.getElementById('videoJS')?.offsetHeight)
+        self.$emit('videoWidth', document.getElementById('videoJS')?.offsetWidth)
         const DEFAULT_EVENTS = [
           'abort',
           'canplay',

src/modules/admin/class/views/List.vue

@@ -103,6 +103,7 @@ const handleFresh = () => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
+          :disabled="!isAdmin"
         ></el-switch>
       </template>
       <template #table-operate="{ row }">

src/modules/admin/pro/views/List.vue

 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { getProList, updatePro } from '../api'
+import { useUserStore } from '@/stores/user'
 import AddPro from '../components/AddPro.vue'
-
+// 判断当前用户是不是超级管理员
+const user = useUserStore().roles
+const isAdmin = !!user.find((item: any) => item.name === '超级管理员')
 const appList = ref()
 const title = ref('')
 const id = ref('')
@@ -71,6 +74,7 @@ const handleChangeStatus = (row: any) => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
+          :disabled="!isAdmin"
         ></el-switch>
       </template>
       <template #table-operate="{ row }">

src/modules/admin/semester/views/List.vue

@@ -92,6 +92,7 @@ const handleChangeStatus = (row: any) => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
+          :disabled="!isAdmin"
         ></el-switch>
       </template>
       <template #table-operate="{ row }">

src/modules/admin/staff/views/List.vue

@@ -102,6 +102,7 @@ const handleChangeStatus = (row: any) => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
+          :disabled="!isAdmin"
         ></el-switch>
       </template>
       <template #table-operate="{ row }">

src/modules/admin/student/views/List.vue

@@ -138,6 +138,8 @@ const handleSelectionChange = (val: any) => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
+          :disabled="!isAdmin"
+
         ></el-switch>
       </template>
       <template #table-operate="{ row }">

src/modules/course/create/views/StepTwo.vue

@@ -12,7 +12,7 @@ const route = useRoute()
 const router = useRouter()
 const isEditCourse = route.query.isEditCourse as string
 const id = route.query.id as string
-const dataSource = ref([])
+const dataSource: any = ref([])
 const isShowDialog = ref(false)
 const isShowSectionDialog = ref(false)
 const isShowLiveDialog = ref(false)
@@ -68,6 +68,8 @@ onMounted(() => {
 const handleChapterList = () => {
   getCharacter({ course_id: id, type: 'tree' }).then((res: any) => {
     dataSource.value = res.data[0]?.children
+    console.log(dataSource, 'dataSource')
+    defaultExpandedKeys.value = [dataSource.value[0]?.id]
     dataSource.value?.forEach((item: any) => {
       if (item.children.length) {
         item.children.forEach((it: any) => {
@@ -250,6 +252,7 @@ const nodeType = (node: any) => {
   }
 }
 const handleNodeExpand = (data: any) => {
+  console.log(data, '0000000')
   defaultExpandedKeys.value = [data.id]
   console.log(defaultExpandedKeys.value)
 }
@@ -276,10 +279,11 @@ const handleNodeCollapse = () => {
       :default-expanded-keys="defaultExpandedKeys"
       :expand-on-click-node="false"
       @node-drop="handleDrop"
+      style="min-width: 100%"
       @node-expand="handleNodeExpand"
       @node-collapse="handleNodeCollapse"
-      style="min-width: 100%"
     >
+      <!--  -->
       <template #default="{ node, data }">
         <span class="custom-tree-node">
           <span>

src/modules/course/my/components/ViewCourseChapter.vue

@@ -11,7 +11,9 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
 
     <div class="chapter-list">
       <div class="item" v-for="(item, index) in data" :key="item.id">
-        <div class="order">{{ index + 1 }}</div>
+        <div class="order">
+          <div class="order-number">{{ index + 1 }}</div>
+        </div>
         <div class="chapter-text">
           <div class="chapter">{{ item.name }}</div>
           <div class="sections" v-for="child in item.children" :key="child.id">
@@ -37,10 +39,8 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
   &.active-black {
     background: #1f1e24;
     border-radius: 0px;
-    max-height: 506px;
     overflow-y: auto;
     margin-left: 0px;
-
     .chapter-list {
       .item {
         border-bottom: 1px dashed #fff;
@@ -78,14 +78,17 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
       margin-top: 30px;
       .order {
         width: 26px;
-        height: 26px;
-        background: rgba(255, 255, 255, 1);
-        border-radius: 50%;
-        font-size: 16px;
-        line-height: 26px;
-        color: #aa1941;
-        text-align: center;
         margin-right: 7px;
+        .order-number {
+          width: 26px;
+          height: 26px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 50%;
+          font-size: 16px;
+          line-height: 26px;
+          color: #aa1941;
+          text-align: center;
+        }
       }
       .chapter-text {
         .chapter {
@@ -103,7 +106,10 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
           color: #ffffff;
           margin-bottom: 20px;
           cursor: pointer;
-          text-indent: 1em;
+          margin-left: 15px;
+          cursor: pointer;
+          word-break: break-all;
+          text-align: left;
         }
       }
     }

src/modules/course/my/components/ViewCourseInfo.vue

@@ -189,17 +189,16 @@ const liveOptions = computed(() => {
         display: block;
       }
       .label {
-        font-size: 14px;
-        line-height: 100%;
-        color: #666666;
         padding-top: 10px;
         padding-bottom: 13px;
         text-align: left;
         margin-left: 15px;
+        font-size: 14px;
+        line-height: 100%;
+        color: #999999;
       }
       .value {
-        font-size: 16px;
-        font-weight: 500;
+        font-size: 14px;
         line-height: 100%;
         color: #333333;
         margin-bottom: 10px;

src/modules/course/my/components/ViewDetailsVideo.vue

@@ -49,84 +49,108 @@ watch(
 const changeVideo = (index: number) => {
   videoIndex = index
 }
+const chapterHeight: any = ref(0)
+const chapterWidth: any = ref(0)
+// onMounted(() => {
+//   setTimeout(() => {
+//     chapter.value = document.getElementById('video_con')?.offsetHeight
+//     console.log(document.getElementById('video_con')?.offsetHeight, 'ppp')
+//   }, 2000)
+// })
+const videoHeight = (h: number) => {
+  chapterHeight.value = h
+}
+const videoWidth = (h: number) => {
+  chapterWidth.value = h
+}
 </script>
 <template>
-  <div class="main_content">
-    <div class="content_top">
-      <AppVideoPlayer :options="videoOptions" class="video_con" height="506" width=" 75%"></AppVideoPlayer>
-      <div class="chapter_con">
-        <ViewCourseChapter :isBlack="true" :data="props.chapterTree"></ViewCourseChapter>
+  <el-card>
+    <div class="main_content">
+      <div class="content_top">
+        <AppVideoPlayer
+          @videoHeight="videoHeight"
+          @videoWidth="videoWidth"
+          :options="videoOptions"
+          id="video_con"
+          class="video_con"
+        ></AppVideoPlayer>
+        <div class="chapter_con">
+          <ViewCourseChapter
+            :style="{ height: chapterHeight + 'px' }"
+            :isBlack="true"
+            :data="props.chapterTree"
+          ></ViewCourseChapter>
+        </div>
       </div>
-    </div>
-    <div></div>
-    <div style="margin-top: 20px">本小节视频资源：</div>
-    <div class="cover-list">
-      <div class="cover-box">
-        <div
-          class="cover-img"
-          :style="`background-image: url(${item.cover})`"
-          v-for="(item, index) in props.data"
-          :key="item.id"
-          @click="changeVideo(index)"
-        >
-          <div :class="index === videoIndex ? 'border active' : 'border'"></div>
-          <div class="cover-name">{{ item.name }}</div>
+      <div class="content_bottom" :style="{ width: chapterWidth + 300 + 'px' }">
+        <div style="margin-top: 20px">本小节视频资源：</div>
+        <div class="cover-list">
+          <div class="cover-box">
+            <div
+              class="cover-img"
+              :style="`background-image: url(${item.cover})`"
+              v-for="(item, index) in props.data"
+              :key="item.id"
+              @click="changeVideo(index)"
+            >
+              <div :class="index === videoIndex ? 'border active' : 'border'"></div>
+              <div class="cover-name">{{ item.name }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </el-card>
 </template>
 <style lang="scss" scoped>
 .main_content {
   display: flex;
   flex-direction: column;
   .content_top {
-    height: 506px;
     display: flex;
     .video_con {
       width: 75%;
-      // height: 506px;
-    }
-    .chapter_con {
-      height: 506px;
     }
   }
 }
-.cover-list {
-  overflow-x: auto;
-}
-.cover-box {
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 30px;
-}
-.cover-img {
-  min-width: 200px;
-  min-height: 100px;
-  background-size: cover;
-  margin: 20px 10px 0;
-  cursor: pointer;
-  box-sizing: border-box;
-  .border {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    &.active {
-      border-top: 5px solid #aa1941;
-      border-left: 5px solid #aa1941;
-      border-right: 5px solid #aa1941;
+.content_bottom {
+  .cover-list {
+    overflow-x: auto;
+
+    .cover-box {
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 30px;
+    }
+    .cover-img {
+      min-width: 200px;
+      min-height: 100px;
+      background-size: cover;
+      margin: 20px 10px 0;
+      cursor: pointer;
+      box-sizing: border-box;
+      .border {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        &.active {
+          border-top: 5px solid #aa1941;
+          border-left: 5px solid #aa1941;
+          border-right: 5px solid #aa1941;
+        }
+      }
+    }
+    .cover-name {
+      width: 100%;
+      background: #aa1941;
+      text-align: center;
+      line-height: 30px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: #fff;
     }
   }
 }
-.cover-name {
-  width: 100%;
-  // height: 30px;
-  background: #aa1941;
-  text-align: center;
-  line-height: 30px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: #fff;
-}
 </style>

src/modules/course/my/views/ViewDetails.vue

@@ -221,17 +221,15 @@ const handleExamDetail = (row: any) => {
     <div class="chapter-box">
       <div class="title">{{ chapterDetails?.name }}</div>
       <div class="chapter-content">
-        <el-card>
-          <div class="content-top">
-            <ViewDetailsVideo
-              v-if="Object.keys(resourceData.videoData).length"
-              :data="resourceData.videoData"
-              :chapterTree="chapterTree"
-              class="video_con"
-            ></ViewDetailsVideo>
-            <el-empty description="暂无数据" v-else />
-          </div>
-        </el-card>
+        <div class="content-top">
+          <ViewDetailsVideo
+            v-if="Object.keys(resourceData.videoData).length"
+            :data="resourceData.videoData"
+            :chapterTree="chapterTree"
+            class="video_con"
+          ></ViewDetailsVideo>
+          <el-empty description="暂无数据" v-else />
+        </div>
 
         <div class="content-bottom">
           <el-tabs :lazy="true" v-model="activeName" class="demo-tabs">
@@ -276,32 +274,10 @@ const handleExamDetail = (row: any) => {
 </template>
 <style lang="scss" scoped>
 .chapter-box {
-  // max-width: 1200px;
-  // margin: auto;
-  // padding: 0 42px;
-
   .title {
     font-size: 20px;
     font-weight: 500;
     color: #333333;
   }
-  .chapter-content {
-    max-width: 1200px;
-    min-width: 960px;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-
-    .content-top {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      height: 700px;
-      .video_con {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
 }
 </style>