|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="thumbnail-child-page" @click="handleClick">
|
|
|
|
|
|
|
+ <div class="thumbnail-child-page" @click="handleClick" :class="{ 'active': slideIndexStore === props.slideIndex || 0 }">
|
|
|
<div class="child-page-icon">
|
|
<div class="child-page-icon">
|
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
@@ -26,17 +26,18 @@ const props = defineProps<{
|
|
|
const mainStore = useMainStore()
|
|
const mainStore = useMainStore()
|
|
|
const { setChildPageState } = mainStore
|
|
const { setChildPageState } = mainStore
|
|
|
const slidesStore = useSlidesStore()
|
|
const slidesStore = useSlidesStore()
|
|
|
-const { slideIndex } = storeToRefs(slidesStore)
|
|
|
|
|
|
|
+const { currentSlide, slideIndex: slideIndexStore } = storeToRefs(slidesStore)
|
|
|
|
|
|
|
|
// 切换页面
|
|
// 切换页面
|
|
|
const changeSlideIndex = (index: number) => {
|
|
const changeSlideIndex = (index: number) => {
|
|
|
mainStore.setActiveElementIdList([])
|
|
mainStore.setActiveElementIdList([])
|
|
|
|
|
|
|
|
- if (slideIndex.value === index) return
|
|
|
|
|
|
|
+ if (slideIndexStore.value === index) return
|
|
|
slidesStore.updateSlideIndex(index)
|
|
slidesStore.updateSlideIndex(index)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const handleClick = () => {
|
|
const handleClick = () => {
|
|
|
|
|
+ if (slideIndexStore.value === props.slideIndex) return
|
|
|
console.log(props.slideIndex)
|
|
console.log(props.slideIndex)
|
|
|
changeSlideIndex(props.slideIndex || 0)
|
|
changeSlideIndex(props.slideIndex || 0)
|
|
|
setChildPageState(false, [], props.slideIndex || 0)
|
|
setChildPageState(false, [], props.slideIndex || 0)
|
|
@@ -66,6 +67,10 @@ const pendingCount = computed(() => {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ border-style: solid;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
&:hover {
|
|
&:hover {
|
|
|
background-color: #fef3c7;
|
|
background-color: #fef3c7;
|
|
|
border-style: solid;
|
|
border-style: solid;
|