|
|
@@ -136,52 +136,41 @@
|
|
|
<template v-if="curToolbarIcon === 'audit'">
|
|
|
<AuditRemark :remark-list="remark_list" :is-audit="isShowAudit" @deleteRemarks="deleteRemarks" />
|
|
|
</template>
|
|
|
- <el-drawer
|
|
|
- custom-class="custom-drawer"
|
|
|
- :visible="drawerType.length > 0"
|
|
|
- :with-header="false"
|
|
|
- :modal="false"
|
|
|
- size="240"
|
|
|
- direction="ltr"
|
|
|
- :style="drawerStyle"
|
|
|
- >
|
|
|
- <div class="infinite-list-wrapper">
|
|
|
- <h5>{{ drawerTitle }}</h5>
|
|
|
- <ul
|
|
|
- v-infinite-scroll="loadMore"
|
|
|
- class="scroll-container"
|
|
|
- infinite-scroll-disabled="disabled"
|
|
|
- :infinite-scroll-immediate="false"
|
|
|
+ <div v-if="['image', 'audio', 'video'].includes(curToolbarIcon)" class="resource_box">
|
|
|
+ <h5>{{ drawerTitle }}</h5>
|
|
|
+ <div style="height: 40px"></div>
|
|
|
+ <ul
|
|
|
+ v-infinite-scroll="loadMore"
|
|
|
+ class="scroll-container"
|
|
|
+ infinite-scroll-disabled="disabled"
|
|
|
+ :infinite-scroll-immediate="false"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in file_list"
|
|
|
+ :key="index"
|
|
|
+ class="list-item"
|
|
|
+ @click="handleFileClick(item?.courseware_id, item?.component_id)"
|
|
|
>
|
|
|
- <li
|
|
|
- v-for="(item, index) in file_list"
|
|
|
- :key="index"
|
|
|
- class="list-item"
|
|
|
- @click="handleFileClick(item?.courseware_id, item?.component_id)"
|
|
|
- >
|
|
|
- <template v-if="parseInt(drawerType) === 0">
|
|
|
- <el-image :src="item.file_url" fit="contain" />
|
|
|
- <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
|
|
|
- </template>
|
|
|
- <template v-else-if="parseInt(drawerType) === 1">
|
|
|
- <AudioPlay
|
|
|
- view-size="middle"
|
|
|
- :file-id="item.file_id"
|
|
|
- :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
|
|
|
- :show-slider="true"
|
|
|
- :audio-index="index"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else-if="parseInt(drawerType) === 2">
|
|
|
- <VideoPlay view-size="small" :file-id="item.file_id" :video-index="index" />
|
|
|
- <!-- <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span> -->
|
|
|
- </template>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <p v-if="loading">加载中...</p>
|
|
|
- <p v-if="noMore">没有更多了</p>
|
|
|
- </div>
|
|
|
- </el-drawer>
|
|
|
+ <template v-if="parseInt(drawerType) === 0">
|
|
|
+ <el-image :src="item.file_url" fit="contain" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="parseInt(drawerType) === 1">
|
|
|
+ <AudioPlay
|
|
|
+ view-size="middle"
|
|
|
+ :file-id="item.file_id"
|
|
|
+ :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
|
|
|
+ :show-slider="true"
|
|
|
+ :audio-index="index"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="parseInt(drawerType) === 2">
|
|
|
+ <VideoPlay view-size="small" :file-id="item.file_id" :video-index="index" />
|
|
|
+ </template>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p v-if="loading">加载中...</p>
|
|
|
+ <p v-if="noMore">没有更多了</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="back-top" @click="backTop">
|
|
|
@@ -365,7 +354,7 @@ export default {
|
|
|
cur_page: 1,
|
|
|
file_list: [],
|
|
|
total_count: 0,
|
|
|
- loading: true,
|
|
|
+ loading: false,
|
|
|
lastLoadTime: 0,
|
|
|
minLoadInterval: 3 * 1000,
|
|
|
isShowGroup: false,
|
|
|
@@ -677,7 +666,7 @@ export default {
|
|
|
}
|
|
|
// 重置所有加载状态
|
|
|
this.resetLoadState();
|
|
|
- this.drawerType = type; // 假设这是你的类型变量
|
|
|
+ this.drawerType = type;
|
|
|
this.$nextTick(() => {
|
|
|
// 确保DOM更新后触发加载
|
|
|
this.loadMore();
|
|
|
@@ -718,7 +707,7 @@ export default {
|
|
|
.then(({ total_count, resource_list }) => {
|
|
|
this.total_count = total_count;
|
|
|
// 记录加载前的滚动高度
|
|
|
- const scrollContainer = this.$el.querySelector('.el-drawer__body');
|
|
|
+ const scrollContainer = this.$el.querySelector('.scroll-container');
|
|
|
const isAtBottom = this.isScrollAtBottom(scrollContainer);
|
|
|
|
|
|
this.file_list = this.cur_page === 1 ? resource_list : [...this.file_list, ...resource_list];
|
|
|
@@ -1168,60 +1157,57 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
|
|
|
flex: 1;
|
|
|
background-color: #fff;
|
|
|
|
|
|
- :deep .el-drawer {
|
|
|
- width: 240px !important;
|
|
|
+ .resource_box {
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
- transition: none !important;
|
|
|
- animation: none !important;
|
|
|
-
|
|
|
- .el-drawer__body {
|
|
|
- height: calc(100vh - 200px);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- h5 {
|
|
|
- padding: 0 5px;
|
|
|
- margin: 0;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 40px;
|
|
|
- background: #f2f3f5;
|
|
|
- }
|
|
|
|
|
|
- .scroll-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- row-gap: 8px;
|
|
|
- margin: 6px;
|
|
|
+ h5 {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ width: 240px;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
|
|
|
- .list-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 8px;
|
|
|
+ .scroll-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 8px;
|
|
|
+ margin: 6px;
|
|
|
|
|
|
- :deep .el-slider {
|
|
|
- .el-slider__runway {
|
|
|
- background-color: #eee;
|
|
|
- }
|
|
|
- }
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
- .el-image {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- min-width: 100%;
|
|
|
- height: 90px;
|
|
|
- background-color: #ccc;
|
|
|
- border-radius: 8px;
|
|
|
+ :deep .el-slider {
|
|
|
+ .el-slider__runway {
|
|
|
+ background-color: #eee;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .video-play {
|
|
|
- width: 100%;
|
|
|
- min-width: 100%;
|
|
|
- }
|
|
|
+ .el-image {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ min-width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ background-color: #ccc;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
|
|
|
- .text-box {
|
|
|
- word-break: break-word;
|
|
|
- }
|
|
|
+ .video-play {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ word-break: break-word;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1248,34 +1234,38 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-:deep .scroll-container .audio-wrapper .audio-middle {
|
|
|
- width: 210px !important;
|
|
|
- padding: 6px 8px !important;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
+:deep .scroll-container .audio-wrapper {
|
|
|
+ width: 100% !important;
|
|
|
|
|
|
- .audio-name {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ .audio-middle {
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 6px 8px !important;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
- .slider-area {
|
|
|
- column-gap: 8px !important;
|
|
|
- }
|
|
|
+ .audio-name {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
- :deep .remark-dialog {
|
|
|
- .el-dialog__body {
|
|
|
- padding: 5px 20px;
|
|
|
+ .slider-area {
|
|
|
+ column-gap: 8px !important;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- :deep .audit-dialog {
|
|
|
- .el-dialog__body {
|
|
|
- height: calc(100vh - 260px);
|
|
|
- padding: 5px 20px;
|
|
|
+ :deep .remark-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 5px 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .mind-map-container .mind-map {
|
|
|
- height: calc(100vh - 310px);
|
|
|
+ :deep .audit-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ height: calc(100vh - 260px);
|
|
|
+ padding: 5px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mind-map-container .mind-map {
|
|
|
+ height: calc(100vh - 310px);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
zq