123

src/components/TopNav/index.vue

@@ -25,11 +25,12 @@
 import Logo1 from '@/assets/img/banner/logo1.png'
 import Logo from '@/assets/img/banner/logo.png'
 import LogoWhite from '@/assets/img/banner/logo3.png'
-import { useSwiperStore, useCountStore } from '@/store'
+import { useSwiperStore, useCountStore, useDetailStore } from '@/store'
 import { onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 const swiperStore = useSwiperStore()
 const countStore = useCountStore()
+const detailStore = useDetailStore()
 const { activeIndex } = storeToRefs(swiperStore)
 
 const getActiveClass = index => {
@@ -40,6 +41,7 @@ const getActiveClass = index => {
 }
 
 const scrollToPage = index => {
+  detailStore.changeRecruitDetail(false)
   // 让数字动
   swiperStore.swiper.slideTo(index, 0, false)
   if (index == 3) {

src/store/modules/detail.js

@@ -8,10 +8,14 @@ export const useDetailStore = defineStore({
       example_id: '1',
       hardwareExampleId: '1',
       hardware_id: '1',
+      showRecruitDetail: false,
     }
   },
   // actions
   actions: {
+    changeRecruitDetail(flag) {
+      this.showRecruitDetail = flag
+    },
     updateHardwareId(hardware_id) {
       this.hardware_id = hardware_id
     },

src/views/Index/components/Recruit/index.vue

@@ -27,7 +27,7 @@
           </div>
           <div
             class="detail animate__animated animate__zoomIn"
-            v-if="showDetail"
+            v-if="detailStore.showRecruitDetail"
             v-on:mouseleave="mouseleave"
             id="post_detail_ani"
           >
@@ -45,10 +45,11 @@ import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
 import { postList } from '@/mock/post'
 import Detail from './Detail'
 import Card from './Card'
-const showDetail = ref(false)
+import { useDetailStore } from '@/store'
+const detailStore = useDetailStore()
 const postId = ref(null)
 const handleDetail = (flag, id) => {
-  showDetail.value = flag
+  detailStore.changeRecruitDetail(flag)
   postId.value = id
 }
 const mouseleave = () => {

src/views/Index/index.vue

@@ -73,7 +73,7 @@
 </template>
 <script>
 import { ref, onMounted } from 'vue'
-import { useSwiperStore, useCountStore } from '@/store'
+import { useSwiperStore, useCountStore, useDetailStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
 // import required modules
@@ -137,6 +137,8 @@ export default {
     }
     const onSlideChange = swiper => {
       const { activeIndex, previousIndex } = swiper
+      const detailStore = useDetailStore()
+      detailStore.changeRecruitDetail(false)
       addAnchor(activeIndex)
       const swiperStore = useSwiperStore()
       const countStore = useCountStore()