From 91f2b8ffa696d786874b7893c3fa15c4e7d379a5 Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Tue, 25 Apr 2023 11:08:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Carousel/Carousel.vue | 61 ++++++++++++++++++++++++++++
 src/components/Menu/Menu.vue         |  4 +-
 src/views/Index/Middle.vue           | 29 ++++++++-----
 src/views/Index/Top.vue              | 36 ++++++++--------
 4 files changed, 102 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Carousel/Carousel.vue

diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
new file mode 100644
index 0000000..6633b24
--- /dev/null
+++ b/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>
diff --git a/src/components/Menu/Menu.vue b/src/components/Menu/Menu.vue
index bcb922d..da7ab42 100644
--- a/src/components/Menu/Menu.vue
+++ b/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>
diff --git a/src/views/Index/Middle.vue b/src/views/Index/Middle.vue
index abfb056..2dde0a8 100644
--- a/src/views/Index/Middle.vue
+++ b/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 {
diff --git a/src/views/Index/Top.vue b/src/views/Index/Top.vue
index 6dfe47a..f0db0da 100644
--- a/src/views/Index/Top.vue
+++ b/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">