|
@@ -12,6 +12,7 @@
|
|
|
@rendered="handlePptRendered"
|
|
@rendered="handlePptRendered"
|
|
|
:animation="true"
|
|
:animation="true"
|
|
|
:animation-speed="1.0"
|
|
:animation-speed="1.0"
|
|
|
|
|
+ :key="pptKey"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -41,7 +42,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted, defineProps } from 'vue'
|
|
|
|
|
|
|
+import { ref, onMounted, onUnmounted, defineProps } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
|
// 导入图标
|
|
// 导入图标
|
|
|
import leftImg from '@/assets/icon/videoImage01.png'
|
|
import leftImg from '@/assets/icon/videoImage01.png'
|
|
@@ -86,7 +87,20 @@ const handlePageChange = (newPage) => {
|
|
|
|
|
|
|
|
// 新增滚动控制变量
|
|
// 新增滚动控制变量
|
|
|
const pptContainer = ref(null)
|
|
const pptContainer = ref(null)
|
|
|
-const pageHeight = ref(620) // 单页高度
|
|
|
|
|
|
|
+const pageHeight = ref(0) // 单页高度,初始设为0
|
|
|
|
|
+const pptKey = ref(0) // 添加key用于重新渲染
|
|
|
|
|
+
|
|
|
|
|
+// 窗口大小变化处理函数
|
|
|
|
|
+const handleResize = () => {
|
|
|
|
|
+ if (pptContainer.value) {
|
|
|
|
|
+ // 更新页面高度
|
|
|
|
|
+ pageHeight.value = pptContainer.value.clientHeight || 620;
|
|
|
|
|
+ // 通过更新key强制重新渲染PPT
|
|
|
|
|
+ pptKey.value += 1;
|
|
|
|
|
+ // 重新定位到当前页
|
|
|
|
|
+ scrollToPage(currentPage.value);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
const nextPage = () => {
|
|
const nextPage = () => {
|
|
|
if (currentPage.value < totalPages.value) {
|
|
if (currentPage.value < totalPages.value) {
|
|
@@ -124,8 +138,18 @@ const scrollToPage = (pageNum) => {
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
// 获取容器元素
|
|
// 获取容器元素
|
|
|
pptContainer.value = document.querySelector('.carousel-wrapper');
|
|
pptContainer.value = document.querySelector('.carousel-wrapper');
|
|
|
|
|
+ // 初始化页面高度
|
|
|
|
|
+ if (pptContainer.value) {
|
|
|
|
|
+ pageHeight.value = pptContainer.value.clientHeight || 620;
|
|
|
|
|
+ }
|
|
|
// 初始滚动到第一页
|
|
// 初始滚动到第一页
|
|
|
scrollToPage(1);
|
|
scrollToPage(1);
|
|
|
|
|
+ // 添加窗口大小监听
|
|
|
|
|
+ window.addEventListener('resize', handleResize);
|
|
|
|
|
+})
|
|
|
|
|
+// 组件卸载时移除监听
|
|
|
|
|
+onUnmounted(() => {
|
|
|
|
|
+ window.removeEventListener('resize', handleResize);
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// PPT错误处理事件
|
|
// PPT错误处理事件
|
|
@@ -169,7 +193,9 @@ const handlePptError = (error) => {
|
|
|
|
|
|
|
|
.carousel-wrapper {
|
|
.carousel-wrapper {
|
|
|
width: 70%;
|
|
width: 70%;
|
|
|
- height: rpx(290);
|
|
|
|
|
|
|
+ //height: rpx(290);
|
|
|
|
|
+
|
|
|
|
|
+ height: 100%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
border-radius: rpx(12);
|
|
border-radius: rpx(12);
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -287,7 +313,9 @@ const handlePptError = (error) => {
|
|
|
|
|
|
|
|
// 确保每张幻灯片占满容器高度
|
|
// 确保每张幻灯片占满容器高度
|
|
|
::v-deep .slide-item {
|
|
::v-deep .slide-item {
|
|
|
- height: rpx(620) !important;
|
|
|
|
|
|
|
+ //height: rpx(620) !important;
|
|
|
|
|
+
|
|
|
|
|
+ height: 100% !important;
|
|
|
width: 100% !important;
|
|
width: 100% !important;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|