首页

2025-02-10 11:25:48 +08:00
parent 5add1f1282
commit ede860cec3
24 changed files with 2536 additions and 17657 deletions
--- a/pages/index/components/swiper.vue
+++ b/pages/index/components/swiper.vue
@@ -0,0 +1,58 @@
+<template>
+	<view class="viewswiper">
+		<up-swiper :list="carousel" keyName="coverImg" @change="e => current = e.current" indicatorStyle="right: 20px" height='242'>
+			<template #indicator>
+				<view class="indicator">
+					<view class="indicator__dot" v-for="(item, index) in carousel" :key="index"
+						:class="[index === current && 'indicator__dot--active']">
+					</view>
+				</view>
+			</template>
+		</up-swiper>
+	</view>
+</template>
+
+<script setup>
+	import { ref,defineProps } from 'vue';
+	const props = defineProps({
+	  carousel: Array
+	});
+	const current = ref(0)
+</script>
+
+<style scoped lang="scss">
+	.viewswiper {
+		.indicator {
+			margin-bottom: 46rpx;
+			@include flex(row);
+			justify-content: center;
+
+			&__dot {
+				height: 6px;
+				width: 6px;
+				border-radius: 100px;
+				background-color: rgba(255, 255, 255, 0.35);
+				margin: 0 5px;
+				transition: background-color 0.3s;
+
+				&--active {
+					background-color: #ffffff;
+				}
+			}
+		}
+
+		.indicator-num {
+			padding: 2px 0;
+			background-color: rgba(0, 0, 0, 0.35);
+			border-radius: 100px;
+			width: 35px;
+			@include flex;
+			justify-content: center;
+
+			&__text {
+				color: #FFFFFF;
+				font-size: 12px;
+			}
+		}
+	}
+</style>