update icon

src/views/website/home/index.vue

@@ -2,33 +2,33 @@
   <div ref="fullPageRef" v-loading="loading" class="fullPage">
     <div class="indicator">
       <div
-        v-for="idx in 6"
-        :id="idx.toString()"
-        :key="idx"
-        :class="`${indicatorActiveIndex == idx ? 'active' : ''}`"
-        class="point"
-        @click="handleIndicatorClick(idx)"
+          v-for="idx in 7"
+          :id="idx.toString()"
+          :key="idx"
+          :class="`${indicatorActiveIndex === idx ? 'active' : ''}`"
+          class="point"
+          @click="handleIndicatorClick(idx)"
       ></div>
     </div>
     <div
-      ref="fullPageContainerRef"
-      :data-index="state.fullpage.current"
-      class="fullPageContainer"
-      @mousewheel="mouseWheelHandle"
+        ref="fullPageContainerRef"
+        :data-index="state.fullpage.current"
+        class="fullPageContainer"
+        @mousewheel="mouseWheelHandle"
     >
       <!-- @DOMMouseScroll="mouseWheelHandle" -->
       <div
-        v-for="(item, $index) in state.boxList"
-        :key="$index"
-        :style="`z-index: ${item.zIndex};`"
-        class="section"
+          v-for="(item, $index) in state.boxList"
+          :key="$index"
+          :style="`z-index: ${item.zIndex};`"
+          class="section"
       >
         <!-- v-if="`index${state.fullpage.current}` == item.title" -->
         <component
-          :is="item.comp"
-          v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
-          :map-index="mapIndex"
-          @changeMapIndex="mapIndex = $event"
+            :is="item.comp"
+            v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
+            :map-index="mapIndex"
+            @changeMapIndex="mapIndex = $event"
         ></component>
       </div>
     </div>
@@ -52,10 +52,11 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref, shallowRef } from "vue";
+import {computed, onMounted, reactive, ref, shallowRef} from "vue";
 import index0 from "./comp/index0.vue";
 import index1 from "./comp/index1.vue";
 import index8 from "./comp/index8.vue";
+import index9 from "@/views/website/home/comp/index9.vue";
 
 const loading = ref(true);
 setTimeout(() => {
@@ -67,8 +68,8 @@ const mapIndex = ref(0); // 0-3
 const mapRef = ref();
 onMounted(() => {
   fullPageContainerRef.value.addEventListener(
-    "DOMMouseScroll",
-    mouseWheelHandle
+      "DOMMouseScroll",
+      mouseWheelHandle
   );
 });
 // onUnmounted(() => {
@@ -153,6 +154,11 @@ let state = reactive({
       zIndex: 1,
       title: "index1",
     },
+    {
+      comp: shallowRef(index9),
+      zIndex: 1,
+      title: "index9",
+    },
     {
       comp: shallowRef(index0),
       zIndex: 1,
@@ -174,7 +180,9 @@ const indicatorActiveIndex = computed(() => {
   if (state.fullpage.current === 1) {
     return 1;
   } else if (state.fullpage.current === 2) {
-    return mapIndex.value + 2;
+    return 2
+  } else if (state.fullpage.current === 3) {
+    return mapIndex.value + 3;
   } else {
     return state.fullpage.current + 3;
   }