1

components/DIYScrollView/DIYScrollView.vue

@@ -9,6 +9,8 @@
     :scroll-into-view="targetId"
     @scroll="handleScroll"
 	:enable-flex="direction === 'x'?true:false"	
+	@touchmove.prevent="handleTouchMove"
+	style="touch-action: none;"
   >
     <slot></slot>
   </scroll-view>
@@ -53,6 +55,13 @@ const targetId = ref(null);
 const itemPositions = ref([]); // 存储每个项的位置信息
 const scrollViewInfo = ref(null); // 滚动容器信息
 
+const handleTouchMove = (e)=> {
+	e.preventDefault(); // 强制阻止默认滚动行为
+	return false; // 增强阻止效果
+	
+    
+}
+
 // 获取元素信息的工具函数
 const getElementsInfo = (selector) => {
     return new Promise(resolve => {
@@ -167,6 +176,6 @@ defineExpose({
 
 <style scoped lang="scss">
 .scroll-container {
-  width: 100%;
+	width: 100%;
 }
 </style>

components/signPopup/signPopup.vue

@@ -0,0 +1,158 @@
+<template>
+	<uni-popup ref="signPopupRef">
+		<view class="popup-content">
+			<image class="signBG" src="/static/signBG.png" mode="aspectFill"></image>
+			<view class="popup-main">
+				<view class="main1">
+					<view class="titleBox">
+						<text>已连续签到0天</text>
+						<button class="signBtn">立即签到</button>
+					</view>
+					<view class="tipsText">
+						<text>签到立即获得10积分</text>
+						<text>连续签到三天奖励翻倍</text>
+					</view>
+				</view>
+				<view class="main2">
+					<view class="signList">
+						<view class="item">
+							<view class="iconBox">
+								<image class="coin" src="/static/coin.png" mode="aspectFill"></image>
+								<!-- <uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons> -->
+							</view>
+							<text>第一天</text>
+						</view>
+						<view class="item">
+							<view class="iconBox">
+								<uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons>
+							</view>
+							<text>第二天</text>
+						</view>
+						<view class="item">
+							<view class="iconBox">
+								<uni-icons type="locked-filled" color="#FFFFFF" size="32"></uni-icons>
+							</view>
+							<text>第三天</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</uni-popup>
+
+</template>
+
+<script setup>
+	import {ref,watch} from 'vue'
+	defineOptions({
+		name: "signPopup"
+	})
+	const props = defineProps({
+		isOpen: {
+			type: Boolean,
+			default: false
+		}
+	})
+	const signPopupRef = ref(null)
+
+	watch(() => props.isOpen, (newVal, oldVal) => {
+			if (!signPopupRef.value) { // 确保组件实例已存在（避免null错误）
+				console.warn('弹窗组件尚未初始化完成');
+				return;
+			}
+			if (newVal) { // 根据新值控制弹窗
+				signPopupRef.value.open(); // 显示弹窗
+			} else {
+				signPopupRef.value.close(); // 隐藏弹窗
+			}
+		}, // 3. 初始化时立即执行一次（处理初始isOpen值）
+		{
+			immediate: true
+		})
+</script>
+
+<style lang="scss" scoped>
+	.popup-content {
+		width: 100vw;
+		height: 822rpx;
+		position: relative;
+		.signBG {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 822rpx;
+		}
+	}
+	.popup-main{
+		position: relative;
+		z-index: 10;
+		width: 68%;
+		margin: 0 auto;
+		padding-top: 220rpx;
+		.main1{
+			width: 100%;
+			.titleBox{
+				@include flexBox(between,center);
+				@include fontStyle(34rpx,#FFFFFF,center,500,46rpx);
+				.signBtn{
+					min-width: 180rpx;
+					height: 62rpx;
+					background: #FFFFFF;
+					border-radius: 45rpx 45rpx 45rpx 45rpx;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #1059FF;
+					@include flexBox();
+					margin: 0;
+				}
+			}
+			.tipsText{
+				@include fontStyle(28rpx,#FFFFFF,left,500,46rpx);
+				text{
+					display: block;
+				}
+			}
+		}
+		.main2{
+			width: 100%;
+			height: 260rpx;
+			@include flexBox();
+			.signList{
+				width: 100%;
+				@include flexBox(around,center);
+				.item{
+					@include fontStyle(28rpx,#FFFFFF,center,500,46rpx);
+					.iconBox{
+						width: 94rpx;
+						height: 94rpx;
+						border-radius: 50%;
+						box-sizing: border-box;
+						border: 2rpx dashed #FFFFFF;
+						@include flexBox();
+						margin-bottom: 10rpx;
+						position: relative;
+						.coin{
+							width: 94rpx;
+							height: 94rpx;
+							border-radius: 50%;
+						}
+					}
+					// 给每个iconBox（除最后一个）添加右侧连接线
+					&:not(:last-child) .iconBox::after {
+						content: '';
+						position: absolute;
+						top: 50%; // 垂直居中
+						left: 100%; // 从当前iconBox的右侧开始（关键）
+						transform: translateY(-50%); // 精确垂直居中
+						height: 2rpx; // 线条粗细
+						background-color: #FFFFFF; // 白色实线
+						width: 80rpx;
+					}
+					
+				}
+				
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -287,11 +287,13 @@
 				direction="x"
 				:itemCount="4"
 				:activeIndex="activeOne"
+				:scroll-into-view="`scroll-${activeOne}`"
 				@update:activeIndex="val => activeOne = val"
 				itemSelector=".scroll-item"
 				class="list-scroll scrollView"
+				style="display: none;"
 			>
-				<view class="list" style="margin: 0 26rpx;">
+				<view class="scroll-list" style="">
 					<view class="scroll-item" v-for="(item,index) in 4" :id="`scroll-${index}`">
 						<image class="swiper-img" src="/static/test/test3.png" mode="widthFix"></image>
 						<text>{{index}}</text>
@@ -301,14 +303,17 @@
 			</DIYScrollView>
 		</view>
 		
+		<signPopup :isOpen="signOpen"></signPopup>
 		<tabbar :tabIndex="0"></tabbar>
+		
 	</view>
 </template>
 
 <script setup>
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';
 import diamondLine from '../../components/diamondLine/diamondLine.vue';
 import DIYScrollView from '../../components/DIYScrollView/DIYScrollView.vue';
+import signPopup from '../../components/signPopup/signPopup.vue';
 const activeOne = ref(0)
 
 const changeBar = (index)=>{
@@ -321,6 +326,12 @@ const handleTouchMove = (e)=> {
     e.preventDefault(); // 强制阻止默认滚动行为
     return false; // 增强阻止效果
 }
+const signOpen = ref(false)
+onMounted(()=>{
+	nextTick(()=>{
+		signOpen.value = true
+	}) 
+})
 </script>
 
 <style lang="scss" scoped>
@@ -919,22 +930,25 @@ const handleTouchMove = (e)=> {
 }
 .scroll11{
 	width: 100%;
-	.scrollView{
+	
+}
+.scrollView{
+	@include flexBox(start,start);
+	// flex-wrap: nowrap;
+	overflow: auto;
+	.scroll-item{
 		width: 100%;
-		@include flexBox(start,start);
-		// flex-wrap: nowrap;
-		overflow: auto;
-		.scroll-item{
+		flex-shrink: 0; /* 核心：禁止子元素被压缩 */
+		box-sizing: border-box;
+		padding: 26rpx;
+		.swiper-img{
 			width: 100%;
-			flex-shrink: 0; /* 核心：禁止子元素被压缩 */
-			box-sizing: border-box;
-			padding: 26rpx;
-			.swiper-img{
-				width: 100%;
-				height: auto;
-			}
+			height: auto;
 		}
-		
+	}
+	.scroll-list{
+		width: 100%;
+		@include flexBox(start,start);
 	}
 }
 </style>