feat: 🚀 轮播组件

src/components/Carousel/Carousel.vue

@@ -0,0 +1,61 @@
+<template>
+  <swiper
+    v-if="acList.length > 1"
+    :modules="modules"
+    :slides-per-view="1.6"
+    :space-between="20"
+    :observer="true"
+    :centered-slides="true"
+    :initial-slide="acList.length !== 1 ? 1 : 0"
+    :loop="acList.length !== 1 ? true : false"
+    :pagination="{ clickable: false }"
+    :autoplay="acList.length !== 1 ? { delay: 5000, disableOnInteraction: false } : false"
+    :prevent-clicks-propagation="true"
+    :prevent-clicks="false"
+    :dynamic-bullets="true"
+    :threshold="100"
+    class="myswiper"
+  >
+    <swiper-slide v-for="(item, index) in acList" :key="index">
+      <img :src="item.fileUrl" class="img" />
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, Pagination } from 'swiper'
+// Import Swiper styles
+import 'swiper/css'
+import 'swiper/css/pagination'
+const modules = ref([Autoplay, Pagination])
+defineProps(['acList'])
+</script>
+
+<style lang="scss" scoped>
+:deep(.swiper-pagination) {
+  bottom: 0;
+  height: 20px;
+}
+:deep(.swiper-pagination-bullet) {
+  width: 12px;
+  height: 4px;
+  margin-right: 4px;
+  background: #d8d5cf;
+  border-radius: 69px;
+}
+:deep(.swiper-pagination-bullet-active) {
+  background: #84754e;
+  border-radius: 4px;
+}
+.myswiper {
+  width: 1920px;
+  height: 650px;
+  .img {
+    width: 1080px;
+    height: 608px;
+    border-radius: 24px;
+  }
+}
+</style>

src/components/Menu/Menu.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 type MenuItem = {
   title: string
@@ -85,6 +85,8 @@ function changeMenu(item: MenuItem, index: number) {
   current.value = index
   router.push(item.path)
 }
+
+watch(router, to => {})
 </script>
 
 <style lang="scss" scoped>

src/views/Index/Middle.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="middle-container">
-    <div class="brand"></div>
-    <div class="activity"></div>
-    <div class="art"></div>
-    <div class="school"></div>
-    <div class="service"></div>
-    <div class="member"></div>
-    <div class="parking"></div>
-  </div>
+  <Transition name="zoom">
+    <div class="middle-container">
+      <div class="brand" @click="go('brand')"></div>
+      <div class="activity" @click="go('activity')"></div>
+      <div class="art" @click="go('art')"></div>
+      <div class="school" @click="go('school')"></div>
+      <div class="service" @click="go('service')"></div>
+      <div class="member" @click="go('member')"></div>
+      <div class="parking" @click="go('parking')"></div>
+    </div>
+  </Transition>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+function go(path: string) {
+  router.push(path)
+}
+</script>
 
 <style lang="scss" scoped>
 .middle-container {

src/views/Index/Top.vue

@@ -1,24 +1,26 @@
 <template>
-  <div class="top-container">
-    <div class="top-item">
-      <div class="top">
-        <img src="@/assets/images/index/search.png" alt="" />
+  <Transition name="zoom">
+    <div class="top-container">
+      <div class="top-item">
+        <div class="top">
+          <img src="@/assets/images/index/search.png" alt="" />
+        </div>
+        <div class="text">
+          {{ $t('search_home') }}
+        </div>
       </div>
-      <div class="text">
-        {{ $t('search_home') }}
+      <div v-for="item in fac" :key="item.code" class="top-item">
+        <div class="top">
+          <img v-if="item.abbreviation === 'xsj'" src="@/assets/images/index/toilet.png" alt="" />
+          <img v-if="item.abbreviation === 'tcc'" src="@/assets/images/index/parking.png" alt="" />
+          <img v-if="item.abbreviation === 'fwt'" src="@/assets/images/index/service.png" alt="" />
+        </div>
+        <div class="text">
+          {{ switchLanguage(item, 'name') }}
+        </div>
       </div>
     </div>
-    <div v-for="item in fac" :key="item.code" class="top-item">
-      <div class="top">
-        <img v-if="item.abbreviation === 'xsj'" src="@/assets/images/index/toilet.png" alt="" />
-        <img v-if="item.abbreviation === 'tcc'" src="@/assets/images/index/parking.png" alt="" />
-        <img v-if="item.abbreviation === 'fwt'" src="@/assets/images/index/service.png" alt="" />
-      </div>
-      <div class="text">
-        {{ switchLanguage(item, 'name') }}
-      </div>
-    </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">