|
@@ -1,52 +1,55 @@
|
|
|
<template>
|
|
|
- <div class="mobile-player"
|
|
|
+ <div
|
|
|
+ class="mobile-player"
|
|
|
:style="{
|
|
|
width: playerSize.width + 'px',
|
|
|
height: playerSize.height + 'px',
|
|
|
transform: `rotate(90deg) translateY(-${playerSize.height}px)`,
|
|
|
}"
|
|
|
>
|
|
|
- <div
|
|
|
- class="screen-slide-list"
|
|
|
+ <div
|
|
|
+ class="screen-slide-list"
|
|
|
@click="toolVisible = !toolVisible"
|
|
|
- @touchstart="$event => touchStartListener($event)"
|
|
|
- @touchend="$event => touchEndListener($event)"
|
|
|
+ @touchstart="($event) => touchStartListener($event)"
|
|
|
+ @touchend="($event) => touchEndListener($event)"
|
|
|
>
|
|
|
- <div
|
|
|
+ <div
|
|
|
:class="[
|
|
|
- 'slide-item',
|
|
|
+ 'slide-item',
|
|
|
`turning-mode-${slide.turningMode || 'slideY'}`,
|
|
|
{
|
|
|
- 'current': index === slideIndex,
|
|
|
- 'before': index < slideIndex,
|
|
|
- 'after': index > slideIndex,
|
|
|
- 'hide': (index === slideIndex - 1 || index === slideIndex + 1) && slide.turningMode !== slidesWithTurningMode[slideIndex].turningMode,
|
|
|
- 'last': index === slideIndex - 1,
|
|
|
- 'next': index === slideIndex + 1,
|
|
|
- }
|
|
|
+ current: index === slideIndex,
|
|
|
+ before: index < slideIndex,
|
|
|
+ after: index > slideIndex,
|
|
|
+ hide:
|
|
|
+ (index === slideIndex - 1 || index === slideIndex + 1) &&
|
|
|
+ slide.turningMode !==
|
|
|
+ slidesWithTurningMode[slideIndex].turningMode,
|
|
|
+ last: index === slideIndex - 1,
|
|
|
+ next: index === slideIndex + 1,
|
|
|
+ },
|
|
|
]"
|
|
|
- v-for="(slide, index) in slidesWithTurningMode"
|
|
|
+ v-for="(slide, index) in slidesWithTurningMode"
|
|
|
:key="slide.id"
|
|
|
>
|
|
|
- <div
|
|
|
- class="slide-content"
|
|
|
+ <div
|
|
|
+ class="slide-content"
|
|
|
:style="{
|
|
|
width: slideSize.width + 'px',
|
|
|
height: slideSize.height + 'px',
|
|
|
}"
|
|
|
v-if="Math.abs(slideIndex - index) < 2"
|
|
|
>
|
|
|
- <ThumbnailSlide
|
|
|
- :slide="slide"
|
|
|
- :size="slideSize.width"
|
|
|
- />
|
|
|
+ <ThumbnailSlide :slide="slide" :size="slideSize.width" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<template v-if="toolVisible">
|
|
|
<div class="header">
|
|
|
- <div class="back" @click="changeMode('preview')"><IconLogout /> 退出播放</div>
|
|
|
+ <div class="back" @click="changeMode('preview')">
|
|
|
+ <IconLogout /> 退出播放
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<MobileThumbnails class="thumbnails" />
|
|
|
</template>
|
|
@@ -54,83 +57,86 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, onMounted, ref } from 'vue'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import { useSlidesStore } from '@/store'
|
|
|
-import type { Mode } from '@/types/mobile'
|
|
|
-import useSlidesWithTurningMode from '../Screen/hooks/useSlidesWithTurningMode'
|
|
|
+import { computed, onMounted, ref } from "vue";
|
|
|
+import { storeToRefs } from "pinia";
|
|
|
+import { useSlidesStore } from "@/store";
|
|
|
+import type { Mode } from "@/types/mobile";
|
|
|
+import useSlidesWithTurningMode from "../Screen/hooks/useSlidesWithTurningMode";
|
|
|
|
|
|
-import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
|
|
|
-import MobileThumbnails from './MobileThumbnails.vue'
|
|
|
+import ThumbnailSlide from "@/views/components/ThumbnailSlide/index.vue";
|
|
|
+import MobileThumbnails from "./MobileThumbnails.vue";
|
|
|
|
|
|
defineProps<{
|
|
|
- changeMode: (mode: Mode) => void
|
|
|
-}>()
|
|
|
+ changeMode: (mode: Mode) => void;
|
|
|
+}>();
|
|
|
|
|
|
-const slidesStore = useSlidesStore()
|
|
|
-const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)
|
|
|
+const slidesStore = useSlidesStore();
|
|
|
+const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore);
|
|
|
|
|
|
-const { slidesWithTurningMode } = useSlidesWithTurningMode()
|
|
|
+const { slidesWithTurningMode } = useSlidesWithTurningMode();
|
|
|
|
|
|
-const toolVisible = ref(false)
|
|
|
+const toolVisible = ref(false);
|
|
|
|
|
|
-const playerSize = ref({ width: 0, height: 0 })
|
|
|
+const playerSize = ref({ width: 0, height: 0 });
|
|
|
|
|
|
onMounted(() => {
|
|
|
- if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
|
|
|
+ if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0);
|
|
|
|
|
|
playerSize.value = {
|
|
|
width: document.body.clientHeight,
|
|
|
height: document.body.clientWidth,
|
|
|
- }
|
|
|
-})
|
|
|
+ };
|
|
|
+});
|
|
|
|
|
|
const slideSize = computed(() => {
|
|
|
- const playerRatio = playerSize.value.height / playerSize.value.width
|
|
|
+ const playerRatio = playerSize.value.height / playerSize.value.width;
|
|
|
|
|
|
- let slideWidth = 0
|
|
|
- let slideHeight = 0
|
|
|
+ let slideWidth = 0;
|
|
|
+ let slideHeight = 0;
|
|
|
|
|
|
if (playerRatio >= viewportRatio.value) {
|
|
|
- slideWidth = playerSize.value.width
|
|
|
- slideHeight = slideWidth * viewportRatio.value
|
|
|
- }
|
|
|
- else {
|
|
|
- slideHeight = playerSize.value.height
|
|
|
- slideWidth = slideHeight / viewportRatio.value
|
|
|
+ slideWidth = playerSize.value.width;
|
|
|
+ slideHeight = slideWidth * viewportRatio.value;
|
|
|
+ } else {
|
|
|
+ slideHeight = playerSize.value.height;
|
|
|
+ slideWidth = slideHeight / viewportRatio.value;
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
width: slideWidth,
|
|
|
height: slideHeight,
|
|
|
- }
|
|
|
-})
|
|
|
+ };
|
|
|
+});
|
|
|
|
|
|
-const touchInfo = ref<{ x: number; y: number; } | null>(null)
|
|
|
+const touchInfo = ref<{ x: number; y: number } | null>(null);
|
|
|
const touchStartListener = (e: TouchEvent) => {
|
|
|
touchInfo.value = {
|
|
|
x: e.changedTouches[0].pageX,
|
|
|
y: e.changedTouches[0].pageY,
|
|
|
- }
|
|
|
-}
|
|
|
+ };
|
|
|
+};
|
|
|
const touchEndListener = (e: TouchEvent) => {
|
|
|
- if (!touchInfo.value) return
|
|
|
+ if (!touchInfo.value) return;
|
|
|
|
|
|
- const offsetX = e.changedTouches[0].pageX - touchInfo.value.x
|
|
|
- const offsetY = e.changedTouches[0].pageY - touchInfo.value.y
|
|
|
- const offsetAbsX = Math.abs(offsetX)
|
|
|
- const offsetAbsY = Math.abs(offsetY)
|
|
|
+ const offsetX = e.changedTouches[0].pageX - touchInfo.value.x;
|
|
|
+ const offsetY = e.changedTouches[0].pageY - touchInfo.value.y;
|
|
|
+ const offsetAbsX = Math.abs(offsetX);
|
|
|
+ const offsetAbsY = Math.abs(offsetY);
|
|
|
|
|
|
- if ( offsetAbsX > offsetAbsY && offsetAbsX > 50 ) {
|
|
|
- if (offsetX < 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
|
|
|
- if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
|
|
|
+ if (offsetAbsX > offsetAbsY && offsetAbsX > 50) {
|
|
|
+ if (offsetX < 0 && slideIndex.value > 0)
|
|
|
+ slidesStore.updateSlideIndex(slideIndex.value - 1);
|
|
|
+ if (offsetX > 0 && slideIndex.value < slides.value.length - 1)
|
|
|
+ slidesStore.updateSlideIndex(slideIndex.value + 1);
|
|
|
}
|
|
|
|
|
|
- if ( offsetAbsY > offsetAbsX && offsetAbsY > 50 ) {
|
|
|
- if (offsetY > 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
|
|
|
- if (offsetY < 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
|
|
|
+ if (offsetAbsY > offsetAbsX && offsetAbsY > 50) {
|
|
|
+ if (offsetY > 0 && slideIndex.value > 0)
|
|
|
+ slidesStore.updateSlideIndex(slideIndex.value - 1);
|
|
|
+ if (offsetY < 0 && slideIndex.value < slides.value.length - 1)
|
|
|
+ slidesStore.updateSlideIndex(slideIndex.value + 1);
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -168,11 +174,11 @@ const touchEndListener = (e: TouchEvent) => {
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
&.after {
|
|
|
- transform: translateY(100%);
|
|
|
+ //transform: translateY(100%);
|
|
|
}
|
|
|
}
|
|
|
&.turning-mode-fade {
|
|
|
- transition: opacity .75s;
|
|
|
+ transition: opacity 0.75s;
|
|
|
&.before {
|
|
|
pointer-events: none;
|
|
|
opacity: 0;
|
|
@@ -183,7 +189,7 @@ const touchEndListener = (e: TouchEvent) => {
|
|
|
}
|
|
|
}
|
|
|
&.turning-mode-slideX {
|
|
|
- transition: transform .35s;
|
|
|
+ transition: transform 0.35s;
|
|
|
&.before {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
@@ -192,12 +198,12 @@ const touchEndListener = (e: TouchEvent) => {
|
|
|
}
|
|
|
}
|
|
|
&.turning-mode-slideY {
|
|
|
- transition: transform .35s;
|
|
|
+ transition: transform 0.35s;
|
|
|
&.before {
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
&.after {
|
|
|
- transform: translateY(100%);
|
|
|
+ //transform: translateY(100%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -221,11 +227,11 @@ const touchEndListener = (e: TouchEvent) => {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 99;
|
|
|
- background-color: rgba($color: #1d1d1d, $alpha: .7);
|
|
|
+ background-color: rgba($color: #1d1d1d, $alpha: 0.7);
|
|
|
text-align: right;
|
|
|
font-size: 13px;
|
|
|
color: #fff;
|
|
|
- animation: slideInDown .15s;
|
|
|
+ animation: slideInDown 0.15s;
|
|
|
|
|
|
.back {
|
|
|
height: 100%;
|
|
@@ -237,14 +243,14 @@ const touchEndListener = (e: TouchEvent) => {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 99;
|
|
|
- background-color: rgba($color: #1d1d1d, $alpha: .7);
|
|
|
+ background-color: rgba($color: #1d1d1d, $alpha: 0.7);
|
|
|
overflow: auto !important;
|
|
|
- animation: slideInUp .15s;
|
|
|
+ animation: slideInUp 0.15s;
|
|
|
}
|
|
|
|
|
|
@keyframes slideInUp {
|
|
|
from {
|
|
|
- transform: translateY(100%);
|
|
|
+ //transform: translateY(100%);
|
|
|
}
|
|
|
to {
|
|
|
transform: translateY(0);
|