From e08f597f5880dc99584038533a56a69155327617 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Wed, 21 Aug 2024 11:31:43 +0800
Subject: [PATCH] =?UTF-8?q?Style(=E4=B8=93=E9=A2=98=E9=A1=B5):=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF2=E7=9A=84=E8=BD=AE=E6=92=AD=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg_product/components/ThemePageTemplate1.vue |   5 +-
 pkg_product/components/ThemePageTemplate2.vue |  16 ++-
 pkg_product/components/ThemePageTemplate4.vue |   3 +
 .../vear-carousel/vear-carousel.vue           | 112 ++++++++++++++++++
 4 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 pkg_product/components/vear-carousel/vear-carousel.vue

diff --git a/pkg_product/components/ThemePageTemplate1.vue b/pkg_product/components/ThemePageTemplate1.vue
index 770eac7..1896239 100644
--- a/pkg_product/components/ThemePageTemplate1.vue
+++ b/pkg_product/components/ThemePageTemplate1.vue
@@ -141,7 +141,10 @@ export default {
         display: block;
         width: 330rpx;
         height: 540rpx;
-        margin: 0 30rpx 30rpx 0;
+        margin: 0 20rpx 30rpx 0;
+        &:nth-child(2n + 1) {
+          margin-right: 0;
+        }
       }
     }
   }
diff --git a/pkg_product/components/ThemePageTemplate2.vue b/pkg_product/components/ThemePageTemplate2.vue
index eef970e..9815de5 100644
--- a/pkg_product/components/ThemePageTemplate2.vue
+++ b/pkg_product/components/ThemePageTemplate2.vue
@@ -7,7 +7,7 @@
     />
     <view class="page-wrap">
       <view class="page-2">
-        <swiper
+        <!-- <swiper
           class="swiper"
           circular
           autoplay
@@ -24,7 +24,12 @@
               @click="itemClick(swiperItem)"
             />
           </swiper-item>
-        </swiper>
+        </swiper> -->
+        <carousel
+          :img-list="templateProperties.page2Links"
+          url-key="image"
+          @selected="itemClick"
+        />
       </view>
     </view>
     <!-- 第三页 -->
@@ -94,8 +99,12 @@
  * 模板2
 */
 import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+import carousel from './vear-carousel/vear-carousel'
 export default {
   name: 'ThemePageTemplate2',
+  components: {
+    carousel
+  },
   mixins: [themeTemplateMixins]
 }
 </script>
@@ -155,6 +164,9 @@ export default {
         width: 330rpx;
         height: 540rpx;
         margin: 0 30rpx 25rpx 0;
+        &:nth-child(2n) {
+          margin-right: 0;
+        }
       }
     }
   }
diff --git a/pkg_product/components/ThemePageTemplate4.vue b/pkg_product/components/ThemePageTemplate4.vue
index a494abe..ce3cd24 100644
--- a/pkg_product/components/ThemePageTemplate4.vue
+++ b/pkg_product/components/ThemePageTemplate4.vue
@@ -133,6 +133,9 @@ export default {
         width: 330rpx;
         height: 540rpx;
         margin: 0 22rpx 22rpx 0;
+        &:nth-child(2n) {
+          margin-right: 0;
+        }
       }
     }
   }
diff --git a/pkg_product/components/vear-carousel/vear-carousel.vue b/pkg_product/components/vear-carousel/vear-carousel.vue
new file mode 100644
index 0000000..6a5025d
--- /dev/null
+++ b/pkg_product/components/vear-carousel/vear-carousel.vue
@@ -0,0 +1,112 @@
+<template>
+	<swiper
+		class="image-container"
+		previous-margin="145rpx"
+		next-margin="145rpx"
+		circular
+		autoplay
+		indicatorDots="true"
+		indicator-color="#ddd"
+		indicator-active-color="#777"
+		@change="swiperChange"
+	>
+		<swiper-item
+			v-for="(item, index) in imgList"
+			:key="item[urlKey]"
+			:class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
+		>
+			<image
+				:src="item[urlKey]"
+				:class="currentIndex == index ? 'item-img' : 'item-img-side'"
+				:style="dontFirstAnimation ? 'animation: none;' : ''"
+				lazy-load
+				mode="aspectFill"
+				@click="clickImg(item)"
+			/>
+		</swiper-item>
+	</swiper>
+</template>
+<script>
+	export default {
+		props: {
+			imgList: {
+				type: Array,
+				default() {
+					return []
+				}
+			},
+			urlKey: {
+				type: String,
+				default() {
+					return ''
+				}
+			},
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				dontFirstAnimation: true
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current
+			},
+			clickImg(item) {
+				this.$emit('selected', item, this.currentIndex)
+			}
+		}
+	}
+</script>
+<style scoped>
+	.image-container {
+		width: 750rpx;
+		height: 840rpx;
+	}
+
+	.item-img {
+		width: 430rpx;
+		height: 700rpx;
+		border-radius: 14rpx;
+	}
+
+	.swiper-item {
+		width: 430rpx;
+		height: 700rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.item-img-side {
+		width: 344rpx;
+		height: 560rpx;
+		border-radius: 14rpx;
+	}
+
+	.swiper-item-side {
+		width: 430rpx;
+		height: 560rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	@keyframes to-mini
+	{
+		from {
+			height: 700rpx;
+		}
+		to {
+			height: 560rpx;
+		}
+	}
+	@keyframes to-big
+	{
+		from {
+			height: 560rpx;
+		}
+		to {
+			height: 700rpx;
+		}
+	}
+</style>