1

common/css/styles.scss

@@ -118,4 +118,12 @@ $mall-text-color: #12C277;
 // 		word-break: break-all;
 // 		@include fontStyle(28rpx,#333333,left,500,48rpx);
 // 	}
+// }
+
+
+// scrollbar-width: none;
+
+/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
+// &::-webkit-scrollbar {
+// 	display: none;
 // }

components/tabbar/tabbar.vue

@@ -52,13 +52,13 @@ import util from '../../common/js/util'
 
 <style lang="scss" scoped>
 	.all{
+		width: 100%;
+	}
+	.tabbar{
 		position: fixed;
 		left: 0;
 		bottom: 0;
-		width: 100%;
 		z-index: 500;
-	}
-	.tabbar{
 		width: 100%;
 		height: 180rpx;
 		background: #FFFFFF;

pages/shop/index.vue

@@ -2,13 +2,151 @@
 	<view class="shopPage">
 		<image class="indexBG" src="/static/shop/indexBG.png" mode="widthFix"></image>
 		<view class="head" :style="{'top': (indexStore.screen.total)+'px'}">
-			<uni-search-bar :radius="5" v-model="searchText" class="searchBar" placeholder="请输入您正在找的商品..." bgColor="#FFFFFF"
-				@confirm="search" cancelButton="none" style="flex: 1;"/>
+			<uni-search-bar :radius="5" v-model="searchText" class="searchBar" placeholder="请输入您正在找的商品..."
+				bgColor="#FFFFFF" @confirm="search" cancelButton="none" style="flex: 1;" />
 			<view class="carBox">
 				<image class="carIcon" src="/static/shop/carIcon.png" mode="aspectFill"></image>
 				<text>购物车</text>
-			</view>	
-			
+			</view>
+		</view>
+		<view class="body">
+			<view class="content1">
+				<view class="card1">
+					<view class="cardItem" v-for="item in 5">
+						<view class="cardItemHead">
+							<image src="/static/test/test.png" mode="aspectFill"></image>
+						</view>
+						<view class="cardItemBody">
+							<text class="title">刮刮烫圆标镭射防伪标签</text>
+							<text class="yuan"><text class="yuanIcon">￥</text>3600</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="retangle">
+					<image class="yingxiao" src="/static/shop/c1BG.png" mode="widthFix"></image>
+					<view class="textBox">
+						<text>营销系统定制开发</text>
+						<image class="mobile" src="/static/shop/mobile.png" mode="widthFix"></image>
+						<button class="checkBtn">查看</button>
+					</view>
+
+				</view>
+			</view>
+
+			<view class="content2">
+				<view class="left">
+					<swiper style="height: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000"
+						:duration="1000" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#3A71FF">
+						<swiper-item v-for="item in 3">
+							<view class="swiperItem">
+								<image class="swiperImg" src="/static/shop/swiperImg.png" mode="aspectFill"></image>
+								<button class="customBtn">
+									定制方案
+									<image class="rightIcon" src="/static/shop/rightsanjiao.png" mode="aspectFill">
+									</image>
+								</button>
+							</view>
+						</swiper-item>
+					</swiper>
+				</view>
+				<view class="right">
+					<view class="card">
+						<view class="cardHead">
+							<text>防伪溯源系统</text>
+						</view>
+						<view class="cardBody">
+							<view class="imgList">
+								<view class="imgItem">
+									<image src="/static/shop/c1.png" mode="aspectFill"></image>
+								</view>
+								<view class="imgItem">
+									<image src="/static/shop/c2.png" mode="aspectFill"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="card">
+						<view class="cardHead">
+							<text>云监码</text>
+						</view>
+						<view class="cardBody">
+							<view class="imgList1">
+								<view class="imgItem">
+									<image src="/static/shop/yunjianma.png" mode="aspectFill"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="content3" >
+				<view class="headbar" :style="{ 'top': indexStore.screen.total + 'px' }">
+					<view class="barItem" :class="activeIndex === 0?'active':''" @click.stop="changeBar(0)">
+						<text>为你推荐</text>
+						<view class="xiahuaxian" v-if="activeIndex === 0"></view>
+					</view>
+					<view class="barItem" :class="activeIndex === 1?'active':''" @click.stop="changeBar(1)">
+						<text>防伪标签</text>
+						<view class="xiahuaxian" v-if="activeIndex === 1"></view>
+					</view>
+					<view class="barItem" :class="activeIndex === 2?'active':''" @click.stop="changeBar(2)">
+						<text>防伪溯源系统</text>
+						<view class="xiahuaxian" v-if="activeIndex === 2"></view>
+					</view>
+					<view class="barItem" :class="activeIndex === 3?'active':''" @click.stop="changeBar(3)">
+						<text>产线升级</text>
+						<view class="xiahuaxian" v-if="activeIndex === 3"></view>
+					</view>
+					<view class="barItem" :class="activeIndex === 4?'active':''" @click.stop="changeBar(4)">
+						<text>云监码</text>
+						<view class="xiahuaxian" v-if="activeIndex === 4"></view>
+					</view>
+				</view>
+				
+				<scroll-view 
+					id="listScroll"
+				    class="list-scroll" 
+				    scroll-y 
+				    :scroll-with-animation="true"
+					style="height:1000rpx"
+				    ref="scrollViewRef"
+					:show-scrollbar="false"	
+					:scroll-into-view="targetID"	
+				    @scroll="onScroll" 
+				>
+					<view class="list">
+						<view class="listItem" v-for="(item,index) in categories" :id='`list-${index}`'>
+							<view class="listItemHead">
+								<view class="titleBox">
+									<text>{{ item.name }}</text>
+									<view class="purpleBox"></view>
+								</view>
+								<text class="seeMore">查看更多></text>
+							</view>
+							<view class="listItemBody">
+								<view class="card" v-for="item in 5">
+									<view class="cardHead">
+										<image src="/static/test/test.png" mode="aspectFill"></image>
+									</view>
+									<view class="cardBody">
+										<text class="title">智能产线升级改造配套方案定制</text>
+										<text class="subTitle">单一线缆提供丰富IO接口，可接入多路输入、输出信号顶部环形指示灯，快速观察工作状态</text>
+										<view class="">
+											<text class="yuan"><text class="yuanText">￥</text>12333</text>
+											<text class="yuan1"><text class="yuanText1">￥</text>12333</text>
+										</view>
+									</view>
+								</view>
+							</view>
+					
+						</view>
+					</view>
+				</scroll-view>
+				
+				
+			</view>
 		</view>
 		<tabbar :tabIndex="1"></tabbar>
 	</view>
@@ -17,7 +155,9 @@
 <script setup>
 	import {
 		onMounted,
-		ref
+		nextTick,
+		ref,
+		watch,
 	} from 'vue';
 	import {
 		useIndexStore
@@ -25,9 +165,14 @@
 	const indexStore = useIndexStore()
 
 	const searchText = ref('')
+	const activeIndex = ref(0)
 	const search = () => {
 		console.log("search")
 	}
+	// const changeBar = (index) => {
+	// 	if (activeIndex.value === index) return;
+	// 	activeIndex.value = index
+	// }
 	onMounted(() => {
 		uni.getSystemInfo({
 			success: (e) => {
@@ -41,6 +186,136 @@
 			}
 		})
 	})
+
+	const categories = ref([{
+			name: '为你推荐',
+			items: ['推荐1', '推荐2', '推荐3', '推荐4', '推荐5', '推荐6', '推荐7']
+		},
+		{
+			name: '防伪标签',
+			items: ['标签1', '标签2', '标签3', '标签4', '标签5']
+		},
+		{
+			name: '防伪溯源系统',
+			items: ['系统1', '系统2', '系统3', '系统4']
+		},
+		{
+			name: '产线升级',
+			items: ['升级1', '升级2', '升级3', '升级4', '升级5']
+		},
+		{
+			name: '云监码',
+			items: ['监码1', '监码2', '监码3']
+		} // 新增第5项，对应索引4
+	])
+
+	const categoryHeights = ref([])
+
+	const testRef = ref(null)
+
+	const initHeights = async () => {
+		await nextTick()
+		const query = wx.createSelectorQuery()
+		categories.value.forEach((item, index) => {
+			query
+				.select(`#list-${index}`) // 选择id为"test-id"的元素
+				.boundingClientRect((data) => { // 回调函数：获取元素布局信息
+					if (!data) {
+						console.error("未找到id为test-id的元素")
+						return
+					}
+					categoryHeights.value.push(data.height)
+				})
+				.exec() // 执行查询
+		})
+		console.log("total", categoryHeights.value)
+
+	}
+
+	// 响应式变量
+	const scrollViewRef = ref(null)
+	const targetID = ref(null)
+	// 存储每个 listItem 的关键信息：相对 scroll-view 的顶部偏移 + 自身高度
+	const itemPositions = ref([]) 
+	// scroll-view 自身的可视高度
+	const scrollViewHeight = ref(0)
+	
+	// 封装：通过选择器获取元素信息（返回 Promise）
+	const getElementsInfo = (selector) => {
+	  return new Promise(resolve => {
+	    wx.createSelectorQuery()
+	      .selectAll(selector)
+	      .boundingClientRect(resolve)
+	      .exec()
+	  })
+	}
+	
+	// 初始化：动态获取每个 listItem 的位置和高度（相对于 scroll-view 内部）
+	const initItemPositions = async () => {
+	  await nextTick()
+	  await new Promise(resolve => setTimeout(resolve, 100)) // 确保动态内容渲染完成	
+
+	  // 1. 获取 scroll-view 自身的位置和高度
+	  const [scrollViewInfo] = await getElementsInfo('.list-scroll')
+	  if (!scrollViewInfo) return
+	
+	  const scrollViewTop = scrollViewInfo.top // scroll-view 顶部在视口中的位置
+	  scrollViewHeight.value = scrollViewInfo.height // scroll-view 可视高度
+	
+	  // 2. 获取所有 listItem 的位置和高度（动态高度）
+	  const listItemsInfo = await getElementsInfo('.listItem')
+	  if (!listItemsInfo || listItemsInfo.length === 0) return
+	
+	  // 3. 计算每个 listItem 相对于 scroll-view 内部的信息
+	  itemPositions.value = listItemsInfo.map((item, index) => ({
+	    index,
+	    // 相对 scroll-view 顶部的偏移（内部坐标）
+	    topInScroll: item.top - scrollViewTop,
+	    // 自身实际高度（动态获取）
+	    height: item.height,
+	    // 相对 scroll-view 底部的偏移（内部坐标）= 顶部偏移 + 自身高度
+	    bottomInScroll: (item.top - scrollViewTop) + item.height
+	  }))
+	
+	  console.log("动态获取的 listItem 信息：", itemPositions.value)
+	}
+	
+	// 点击分类跳转
+	const changeBar = async (index) => {
+	  if (activeIndex.value === index) return
+	  activeIndex.value = index
+	   const target = `list-${index}`
+	    targetID.value = target
+	    await nextTick() // 等待滚动触发
+	}
+	
+	// 滚动时判断：根据动态高度和位置激活对应分类
+	const onScroll = (e) => {
+	  const scrollTop = e.detail.scrollTop // scroll-view 内部滚动距离
+	  // 遍历所有 listItem，找到当前视口内最顶部的项
+	  for (let i = 0; i < itemPositions.value.length; i++) {
+	    const { topInScroll, bottomInScroll, index } = itemPositions.value[i]
+	    // 视口判断条件（适配动态高度）：
+	    // 1. 元素顶部 <= 滚动距离 + 100rpx（允许轻微误差）
+	    // 2. 元素底部 > 滚动距离（确保元素至少有一部分在视口内）
+	    if (topInScroll <= scrollTop + 200 && bottomInScroll > scrollTop) {
+	      activeIndex.value = index
+	      break // 优先激活视口内最顶部的元素
+	    }
+	  }
+	}
+	
+	// 监听数据变化：若 categories 动态更新，重新计算位置
+	watch(categories, async () => {
+	  await initItemPositions()
+	}, { deep: true })
+	
+	// 页面挂载后初始化
+	onMounted(async () => {
+	  await initItemPositions()
+	})
+	
+	
 </script>
 
 <style lang="scss" scoped>
@@ -48,6 +323,8 @@
 		width: 100%;
 		min-height: 100vh;
 		position: relative;
+		background-color: #EFF6FF;
+		// padding-bottom: 100rpx;
 	}
 
 	.indexBG {
@@ -61,11 +338,13 @@
 		z-index: 2;
 		box-sizing: border-box;
 		padding: 16rpx 26rpx;
-		@include flexBox(between,center);
-		.carBox{
-			@include fontStyle(20rpx,#3A71FF,center,400,30rpx);
+		@include flexBox(between, center);
+
+		.carBox {
+			@include fontStyle(20rpx, #3A71FF, center, 400, 30rpx);
 			margin-left: 16rpx;
-			.carIcon{
+
+			.carIcon {
 				width: 44rpx;
 				height: 44rpx;
 				display: block;
@@ -73,4 +352,365 @@
 			}
 		}
 	}
+
+	.body {
+		width: 100%;
+
+		.content1 {
+			margin: 26rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
+			border-radius: 18rpx 18rpx 18rpx 18rpx;
+			box-sizing: border-box;
+			padding: 26rpx;
+			@include flexBox(start, center);
+
+			.card1 {
+				@include flexBox(start, center);
+				width: 84%;
+				overflow-x: auto;
+				white-space: nowrap;
+				scrollbar-width: none;
+
+				/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
+				&::-webkit-scrollbar {
+					display: none;
+					/* 直接隐藏滚动条 */
+				}
+
+				.cardItem {
+					width: 226rpx;
+					background: #F5F5F5;
+					border-radius: 18rpx 18rpx 18rpx 18rpx;
+					margin-right: 16rpx;
+
+					.cardItemHead {
+						box-sizing: border-box;
+						padding: 16rpx;
+						@include flexBox();
+
+						image {
+							width: 192rpx;
+							height: 192rpx;
+							border-radius: 18rpx;
+						}
+					}
+
+					.cardItemBody {
+						background: #E1EDFC;
+						box-sizing: border-box;
+						padding: 16rpx;
+						border-radius: 0rpx 0rpx 18rpx 18rpx;
+
+						.title {
+							@include fontStyle(24rpx, #000000, left, 500, 38rpx);
+							@include truncateText(1);
+						}
+
+						.yuan {
+							@include fontStyle(34rpx, #3A71FF, left, bold, 50rpx);
+						}
+
+						.yuanIcon {
+							@include fontStyle(24rpx, #3A71FF, left, 500, 38rpx);
+						}
+					}
+				}
+			}
+
+			.retangle {
+				width: 30%;
+				position: relative;
+				min-height: 340rpx;
+
+				.yingxiao {
+					position: absolute;
+					top: 0;
+					right: -26rpx;
+					z-index: 2;
+					transform: translate(0, -10%);
+					width: 254rpx;
+					height: auto;
+				}
+
+				.textBox {
+					@include fontStyle(26rpx, #FFFFFF, left, bold, 38rpx);
+					position: absolute;
+					top: 0;
+					right: -26rpx;
+					transform: translate(0, -10%);
+					box-sizing: border-box;
+					padding: 26rpx;
+					z-index: 10;
+					width: 254rpx;
+					@include flexBox(end, end, column);
+
+					.mobile {
+						width: 120rpx;
+						height: auto;
+						margin: 16rpx 0;
+					}
+
+					.checkBtn {
+						width: 124rpx;
+						height: 54rpx;
+						background: #FFFFFF;
+						border-radius: 54rpx 54rpx 54rpx 54rpx;
+						font-weight: 400;
+						font-size: 25rpx;
+						color: #0C53FF;
+						@include flexBox();
+						margin: 0;
+					}
+				}
+
+
+			}
+		}
+
+		.content2 {
+			margin: 40rpx 16rpx 26rpx;
+			margin-right: 10rpx;
+			@include flexBox(between, center);
+
+			.left {
+				width: 410rpx;
+				height: 570rpx;
+
+				.swiperItem {
+					position: relative;
+
+					.swiperImg {
+						width: 410rpx;
+						height: 566rpx;
+						border-radius: 18rpx;
+						display: block;
+					}
+
+					.customBtn {
+						position: absolute;
+						bottom: 56rpx;
+						left: 50%;
+						transform: translate(-50%, 0);
+						width: 194rpx;
+						height: 58rpx;
+						background: linear-gradient(180deg, #3A71FF 0%, #739CFF 100%);
+						border-radius: 54rpx 54rpx 54rpx 54rpx;
+						font-weight: 500;
+						font-size: 25rpx;
+						color: #FFFFFF;
+						@include flexBox();
+
+						.rightIcon {
+							width: 36rpx !important;
+							height: 36rpx !important;
+						}
+					}
+				}
+			}
+
+			.right {
+				flex: 1;
+				height: 570rpx;
+				@include flexBox(between, center, column);
+
+				.card {
+					width: 300rpx;
+					background: #FFFFFF;
+					box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
+					border-radius: 18rpx 18rpx 18rpx 18rpx;
+
+					.cardHead {
+						box-sizing: border-box;
+						padding: 18rpx;
+						@include fontStyle(30rpx, #000000, left, 500, 38rpx);
+
+					}
+
+					.cardBody {
+						box-sizing: border-box;
+						padding: 18rpx 0;
+
+						.imgList {
+							@include flexBox(start, center);
+							overflow-x: auto;
+
+							.imgItem {
+								width: 50%;
+								text-align: center;
+
+								image {
+									width: 118rpx;
+									height: 158rpx;
+								}
+							}
+						}
+
+						.imgList1 {
+							height: 100%;
+							box-sizing: border-box;
+							padding: 40rpx 16rpx;
+							@include flexBox(center, center);
+
+							.imgItem {
+								image {
+									width: 244rpx;
+									height: 80rpx;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.content3 {
+			margin: 26rpx;
+			
+			.headbar {
+				position: sticky;
+				left: 0;
+				width: 100%;
+				height: 92rpx;
+				background: #FFFFFF;
+				box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
+				border-radius: 18rpx;
+				@include flexBox(start, center);
+				flex-wrap: nowrap;
+				box-sizing: border-box;
+				padding: 20rpx 16rpx;
+				overflow-x: auto;
+				scrollbar-width: none;
+
+				/* 隐藏 WebKit 内核浏览器（Chrome、Safari、小程序等）的滚动条 */
+				&::-webkit-scrollbar {
+					display: none;
+					/* 直接隐藏滚动条 */
+				}
+
+				.barItem {
+					height: 100%;
+					position: relative;
+					@include fontStyle(30rpx, #333333, center, 400, 40rpx);
+					margin-right: 26rpx;
+					white-space: nowrap;
+
+					.xiahuaxian {
+						position: absolute;
+						left: 50%;
+						transform: translate(-50%, 0);
+						bottom: 0rpx;
+						width: 54rpx;
+						height: 4rpx;
+						background: #333333;
+						border-radius: 9rpx 9rpx 9rpx 9rpx;
+					}
+				}
+
+				.active {
+					font-weight: bold;
+					font-size: 32rpx;
+				}
+			}
+			.list-scroll{
+				margin-top: 26rpx;
+			}
+			.list {
+				.listItem {
+					.listItemHead {
+						margin: 26rpx 0 16rpx;
+						@include flexBox(between, center);
+						@include fontStyle(34rpx, #000000, left, bold, 44rpx);
+
+						.seeMore {
+							@include fontStyle(26rpx, #666666, right, 400, 44rpx);
+						}
+
+						.titleBox {
+							position: relative;
+							text {
+								position: relative;
+								z-index: 2;
+							}
+							.purpleBox {
+								position: absolute;
+								top: 50%;
+								left: 50%;
+								transform: translate(-50%, 0%);
+								width: 92rpx;
+								height: 28rpx;
+								background: linear-gradient(180deg, #86AAFA 0%, #C9D6FF 100%);
+								opacity: 0.9;
+								z-index: 1;
+							}
+						}
+					}
+
+					.listItemBody {
+						@include flexBox(between, center);
+						flex-wrap: wrap;
+
+						.card {
+							width: 334rpx;
+							background: #FFFFFF;
+							box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
+							border-radius: 24rpx 24rpx 24rpx 24rpx;
+							margin-top: 26rpx;
+
+							.cardHead {
+								image {
+									width: 100%;
+									height: 334rpx;
+									display: block;
+									margin: 0;
+								}
+							}
+
+							.cardBody {
+								box-sizing: border-box;
+								padding: 16rpx 26rpx;
+
+								.title {
+									@include fontStyle(28rpx, #000000, left, 500, 48rpx);
+									@include truncateText(1);
+								}
+
+								.subTitle {
+									@include fontStyle(26rpx, #666666, left, 500, 38rpx);
+									@include truncateText();
+								}
+
+								.yuan {
+									@include fontStyle(36rpx, #3A71FF, left, bold, 48rpx);
+									padding-right: 20rpx;
+
+									.yuanText {
+										@include fontStyle(26rpx, #3A71FF, left, bold, 48rpx);
+									}
+								}
+
+								.yuan1 {
+									@include fontStyle(26rpx, #666666, left, 400, 48rpx);
+									text-decoration: line-through;
+
+									.yuanText1 {
+										@include fontStyle(24rpx, #666666, left, 400, 48rpx);
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+
+
+		}
+
+
+
+	}
+
+
+
+	
 </style>