From d1df82492c9c5089b8a64e0676b97ea3051207e7 Mon Sep 17 00:00:00 2001
From: 13934 <1393446061@qq.com>
Date: Thu, 7 Dec 2023 21:19:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=94=B9?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/community/Carousel.vue     | 169 +++++++++++++--------------
 src/pages/community/CarouselTest.vue |  44 -------
 2 files changed, 84 insertions(+), 129 deletions(-)
 delete mode 100644 src/pages/community/CarouselTest.vue

diff --git a/src/pages/community/Carousel.vue b/src/pages/community/Carousel.vue
index 186554b2..c75b0470 100644
--- a/src/pages/community/Carousel.vue
+++ b/src/pages/community/Carousel.vue
@@ -1,25 +1,27 @@
 <template>
-  <view class="carousel">
-    <view class="carousel-background" />
-    <view class="slides" @touchmove="touchEnd" @touchstart="touchStart">
-      <template v-for="i in 5" :key="i">
-        <view
-          :class="slidesStyle[i - 1]"
-          :style="{
+    <view class="carousel">
+        <view class="carousel-background" />
+        <view class="slides" @touchmove="touchEnd" @touchstart="touchStart">
+            <template v-for="i in 5" :key="i">
+                <view
+                        :class="slidesStyle[i - 1]"
+                        :style="{
             backgroundImage: 'url(' + displayContents[i - 1].imageUrl + ')'
           }"
-          @click="onClickCarousel(displayContents[i - 1])"
-        />
-      </template>
+                        @click="onClickCarousel(displayContents[i - 1])"
+                />
+            </template>
+            <view class="pagination-dots">
+                <view
+                        v-for="(content, index) in contents"
+                        :key="index"
+                        :class="
+            'pagination-dot ' + (index === currentContent ? 'current' : '')
+          "
+                />
+            </view>
+        </view>
     </view>
-    <view class="pagination-dots">
-      <view
-        v-for="(content, index) in contents"
-        :key="index"
-        :class="'pagination-dot ' + (index === currentContent ? 'current' : '')"
-      />
-    </view>
-  </view>
 </template>
 
 <script lang="ts" setup>
@@ -28,7 +30,7 @@ import { News } from "@/apis/schemas";
 import { onClickCarousel } from "@/pages/community/event";
 
 const props = defineProps<{
-  contents: News[];
+    contents: News[];
 }>();
 const contents = reactive(props.contents);
 
@@ -36,75 +38,73 @@ let touchStartX: number;
 let isSlidesMoving = false;
 
 const touchStart = (ev: any) => {
-  touchStartX = ev.touches[0].clientX;
+    touchStartX = ev.touches[0].clientX;
 };
 
 const touchEnd = (ev: any) => {
-  if (!isSlidesMoving) {
-    if (ev.touches[0].clientX - touchStartX > 30) {
-      isSlidesMoving = true;
-      rightward();
-      setTimeout(() => (isSlidesMoving = false), 1000);
-    } else if (ev.touches[0].clientX - touchStartX < -30) {
-      isSlidesMoving = true;
-      leftward();
-      setTimeout(() => (isSlidesMoving = false), 1000);
+    if (!isSlidesMoving) {
+        if (ev.touches[0].clientX - touchStartX > 50) {
+            isSlidesMoving = true;
+            rightward();
+            setTimeout(() => (isSlidesMoving = false), 1000);
+        } else if (ev.touches[0].clientX - touchStartX < -50) {
+            isSlidesMoving = true;
+            leftward();
+            setTimeout(() => (isSlidesMoving = false), 1000);
+        }
     }
-  }
 };
 setInterval(leftward, 5000);
 const currentContent = ref(0);
 const displayContents = reactive([
-  contents[(currentContent.value + contents.length - 2) % contents.length],
-  contents[(currentContent.value + contents.length - 1) % contents.length],
-  contents[currentContent.value],
-  contents[(currentContent.value + 1) % contents.length],
-  contents[(currentContent.value + 2) % contents.length]
+    contents[(currentContent.value + contents.length - 2) % contents.length],
+    contents[(currentContent.value + contents.length - 1) % contents.length],
+    contents[currentContent.value],
+    contents[(currentContent.value + 1) % contents.length],
+    contents[(currentContent.value + 2) % contents.length]
 ]);
 
 const slidesStyle = reactive([
-  "slide slide-leftest",
-  "slide slide-left",
-  "slide slide-center",
-  "slide slide-right",
-  "slide slide-rightest"
+    "slide slide-leftest",
+    "slide slide-left",
+    "slide slide-center",
+    "slide slide-right",
+    "slide slide-rightest"
 ]);
 
 function leftward() {
-  const index = (currentSlide.value + 1) % 5;
-  slidesStyle[(index + 3) % 5] = "slide slide-leftest";
-  slidesStyle[(index + 4) % 5] = "slide slide-left";
-  slidesStyle[index] = "slide slide-center";
-  slidesStyle[(index + 1) % 5] = "slide slide-right";
-  slidesStyle[(index + 2) % 5] = "slide slide-rightest";
-  currentSlide.value = index;
-  currentContent.value = (currentContent.value + 1) % contents.length;
-  displayContents[(index + 2) % 5] =
-    contents[(currentContent.value + contents.length + 2) % contents.length];
+    const index = (currentSlide.value + 1) % 5;
+    slidesStyle[(index + 3) % 5] = "slide slide-leftest";
+    slidesStyle[(index + 4) % 5] = "slide slide-left";
+    slidesStyle[index] = "slide slide-center";
+    slidesStyle[(index + 1) % 5] = "slide slide-right";
+    slidesStyle[(index + 2) % 5] = "slide slide-rightest";
+    currentSlide.value = index;
+    currentContent.value = (currentContent.value + 1) % contents.length;
+    displayContents[(index + 2) % 5] =
+        contents[(currentContent.value + contents.length + 2) % contents.length];
 }
 
 function rightward() {
-  const index = (currentSlide.value + 4) % 5;
-  slidesStyle[(index + 3) % 5] = "slide slide-leftest";
-  slidesStyle[(index + 4) % 5] = "slide slide-left";
-  slidesStyle[index] = "slide slide-center";
-  slidesStyle[(index + 1) % 5] = "slide slide-right";
-  slidesStyle[(index + 2) % 5] = "slide slide-rightest";
-  currentSlide.value = index;
-  currentContent.value =
-    (currentContent.value - 1 + contents.length) % contents.length;
-  displayContents[(index + 3) % 5] =
-    contents[(currentContent.value + contents.length - 2) % contents.length];
+    const index = (currentSlide.value + 4) % 5;
+    slidesStyle[(index + 3) % 5] = "slide slide-leftest";
+    slidesStyle[(index + 4) % 5] = "slide slide-left";
+    slidesStyle[index] = "slide slide-center";
+    slidesStyle[(index + 1) % 5] = "slide slide-right";
+    slidesStyle[(index + 2) % 5] = "slide slide-rightest";
+    currentSlide.value = index;
+    currentContent.value =
+        (currentContent.value - 1 + contents.length) % contents.length;
+    displayContents[(index + 3) % 5] =
+        contents[(currentContent.value + contents.length - 2) % contents.length];
 }
 
 const currentSlide = ref(2);
 </script>
 
 <style lang="scss" scoped>
-$slideWidthLarge: calc(272 / 390 * 100vw);
-$slideHeightLarge: calc(131 / 390 * 100vw);
-$slideWidthSmall: calc(216 / 390 * 100vw);
-$slideHeightSmall: calc(105 / 390 * 100vw);
+$slideWidthLarge: calc(362 / 390 * 100vw);
+$slideHeightLarge: calc(163 / 390 * 100vw);
 $horizontalMarginOfSlideCenter: calc((100vw - $slideWidthLarge) / 2);
 $verticalPaddingOfCarousel: calc(9 / 390 * 100vw);
 $slideGap: calc(17 / 390 * 100vw);
@@ -120,6 +120,7 @@ $backgroundColor: #f5f5f5;
 }
 
 .slides {
+  overflow-x: hidden;
   display: flex;
   position: relative;
   height: calc($slideHeightLarge + $verticalPaddingOfCarousel * 2);
@@ -132,47 +133,42 @@ $backgroundColor: #f5f5f5;
 
   background-size: 100% 100%;
   position: absolute;
-  width: $slideWidthSmall;
-  height: $slideHeightSmall;
-  top: calc(
-    ($slideHeightLarge - $slideHeightSmall) / 2 + $verticalPaddingOfCarousel
-  );
+  width: $slideWidthLarge;
+  height: $slideHeightLarge;
+  top: $verticalPaddingOfCarousel;
   transition-duration: $transitionDuration;
 
   box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
-  border-radius: 6px;
+  border-radius: 3px;
+  transition: transform 0.5s ease-in-out, z-index 0.5s ease-in-out;
 }
 
 .slide-leftest {
-  left: calc(
-    $horizontalMarginOfSlideCenter - ($slideWidthSmall + $slideGap) * 2
-  );
+  transform: translateX(-200%);
   z-index: 0;
 }
 
 .slide-left {
-  left: calc($horizontalMarginOfSlideCenter - ($slideWidthSmall + $slideGap));
-  z-index: 2;
+  transform: translateX(-100%);
+  z-index: 1;
 }
 
 .slide-center {
+  transform: translateX(0);
   left: $horizontalMarginOfSlideCenter;
   width: $slideWidthLarge;
   height: $slideHeightLarge;
-  z-index: 2;
   top: $verticalPaddingOfCarousel;
+  z-index: 3;
 }
 
 .slide-right {
-  left: calc($horizontalMarginOfSlideCenter + ($slideWidthLarge + $slideGap));
-  z-index: 2;
+  transform: translateX(110%);
+  z-index: 1;
 }
 
 .slide-rightest {
-  left: calc(
-    $horizontalMarginOfSlideCenter + ($slideWidthLarge + $slideGap) +
-      ($slideWidthSmall + $slideGap)
-  );
+  transform: translateX(200%);
   z-index: 0;
 }
 
@@ -181,7 +177,7 @@ $backgroundColor: #f5f5f5;
   position: absolute;
   width: 100vw;
   height: calc($verticalPaddingOfCarousel * 2 + $slideHeightLarge);
-  z-index: 1;
+  z-index: 2;
 }
 
 .none {
@@ -189,11 +185,14 @@ $backgroundColor: #f5f5f5;
 }
 
 .pagination-dots {
-  background-color: #fafcff;
+  background-color: transparent;
   padding: 0;
   display: flex;
   width: 100vw;
+  margin-top: 40vw;
+  margin-left: -35vw;
   justify-content: center;
+  z-index: 99;
 }
 
 .pagination-dot {
diff --git a/src/pages/community/CarouselTest.vue b/src/pages/community/CarouselTest.vue
deleted file mode 100644
index 1497c231..00000000
--- a/src/pages/community/CarouselTest.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <view class="carouseltest">
-    <uni-swiper-dot
-      :info="info"
-      :current="current"
-      :field="content"
-      :mode="mode"
-      :dots-styles="dotsStyles"
-    >
-      <swiper class="swiper-box">
-        <swiper-item v-for="(item, index) in info()" :key="index">
-          <view class="swiper-item">
-            {{ item.content }}
-          </view>
-        </swiper-item>
-      </swiper>
-    </uni-swiper-dot>
-  </view>
-</template>
-
-<script>
-//import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
-import { info } from "sass";
-//import Swiper from "swiper/bundle";
-//import "swiper/swiper-bundle.css";
-export default {
-  //components: { uniSwiperDot },
-  methods: {
-    info() {
-      return info;
-    },
-    change(e) {
-      this.current = e.detail.current;
-    }
-  }
-};
-</script>
-
-<style>
-.swiper-box {
-  border-radius: 0px;
-  padding: 0px;
-}
-</style>