分享空间内容新增 首页下滑吸顶修改

pages/homePage/homePage.vue

@@ -1,10 +1,16 @@
 <template>
 	<view>
+		 <!-- 吸顶搜索框 -->
+		<view class="sticky" v-if="flag">
+			<input type="text" placeholder="请输入搜索内容">
+		</view>
 		<!-- 轮播图 -->
 		<view class="slideshow">
 			<view class="wrap">
-				<u-search color="black" search-icon-color="#fff" placeholder-color="#fff" bg-color="#8a7170"
-					placeholder="请输入搜索内容" :show-action="false" input-align="center"></u-search>
+				<view class="search-box">
+					<u-search color="black" search-icon-color="#fff" placeholder-color="#fff" bg-color="#8a7170"
+						placeholder="请输入搜索内容" :show-action="false" input-align="center"></u-search>
+				</view>
 				<u-swiper mode="none" :list="list" :title="true" height="422"></u-swiper>
 			</view>
 		</view>
@@ -103,6 +109,8 @@
 		},
 		data() {
 			return {
+				flag:false,
+				scrollTop:"",
 				list: [{
 						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
 						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
@@ -120,8 +128,22 @@
 			}
 		},
 		methods: {
-
-		}
+       onPageScroll(e) {
+   	this.scrollTop = e.scrollTop;
+   		console.log(this.scrollTop);
+   		if(this.scrollTop>=200){
+   			this.flag=true;
+   		} else{
+   			this.flag=false;
+   		}
+   		
+   		
+   },
+		 
+		},
+		
+	
+		
 	}
 </script>
 
@@ -129,20 +151,31 @@
 	page{
 		padding-bottom: 50px;
 	}
-	.u-search {
-		position: absolute;
-		top: 14px;
-		left: 20px;
-		right: 20px;
-		line-height: 32px;
-		border-radius: 8px;
-		color: #ffffff !important;
-		opacity: 0.4;
-		z-index: 99;
-
+	.sticky{
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
+		border-bottom:1px solid #fff ;
+		padding: 16rpx 40rpx;
+		background-color: #fff;
+		uni-input{
+			background-color: #E8E8E8;
+			height: 32px;
+			line-height: 32px;
+			border-radius: 8px;
+			text-align: center;
+		}
 	}
+		
+		
 
-	/deep/.uni-input-placeholder {
+	.u-search {
+		
+		
+/deep/.uni-input-placeholder {
 		font-weight: bold;
 	}
 
@@ -150,6 +183,19 @@
 		color: #ffffff !important;
 		font-weight: bold;
 	}
+	}
+.search-box{
+			width: 100%;
+			background-color:#4F3C27;
+			padding: 16rpx 40rpx;
+			position: absolute;
+			line-height: 32px;
+			color: #ffffff !important;
+			opacity: 0.4;
+			z-index: 999;
+			opacity: 0.4;
+		} 
+	
 
 	// 公告
 	.notice {

pages/mine/mine.vue

@@ -1,6 +1,13 @@
 <template>
 	<view>
-		我的
+			<view class="container">
+				<u-sticky>
+					<!-- 只能有一个根元素 -->
+					<view class="sticky">
+						宝剑锋从磨砺出,梅花香自苦寒来
+					</view>
+				</u-sticky>
+			</view>
 		<tabbar current="2"></tabbar>
 	</view>
 </template>
@@ -22,6 +29,17 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.container {
+		// height: 200vh;
+		// margin-top: 150rpx;
+	}
+	
+	.sticky {
+		width: 750rpx;
+		height: 120rpx;
+		background-color: #2979ff;
+		color: #fff;
+		padding: 24rpx;
+	}
 </style>

pages/staffHome/filesonic.vue

@@ -32,6 +32,9 @@
 					<img src="../../assets/img/sharePic1.png" alt="">
 					<img src="../../assets/img/sharePic2.png" alt="">
 					<img src="../../assets/img/sharePic3.png" alt="">
+					<img src="../../assets/img/sharePic1.png" alt="">
+					<img src="../../assets/img/sharePic2.png" alt="">
+					<img src="../../assets/img/sharePic3.png" alt="">
 				</view>
 
 				<view class="tag">
@@ -62,7 +65,7 @@
 				<view class="pictures">
 					<img src="../../assets/img/sharePic1.png" alt="">
 					<img src="../../assets/img/sharePic2.png" alt="">
-					<img src="../../assets/img/sharePic3.png" alt="">
+					
 				</view>
 
 				<view class="tag">
@@ -73,6 +76,36 @@
 					</text>
 				</view>
 			</view>
+			
+			<view class="item">
+				<view class="infos">
+					<view class="person">
+						<view class="photo">
+							<img src="../../assets/img/shareP.png" alt="">
+						</view>
+						<view class="name">
+							韩梅梅
+						</view>
+					</view>
+					<view class="date">
+						2023-01-15
+					</view>
+				</view>
+				<view class="share-text">
+					周末去爬山健身记录的vlog!
+				</view>
+				<view class="video">
+					<video src="https://vdn6.vzuu.com/SD/570f1e5a-fc19-11eb-956a-56aebd1ce234-v4_t11-vinhB9Swhp.mp4?pkey=AAX-trEwUxxPAWVGDP6SzK2Jjrg2p1KOjq4n0zdiuGb3Rjulc6i7S2Mxh2VY_0uyJNB4laXobuAQ-G2xnRxZX0_m&c=avc.0.0&f=mp4&pu=da4bec50&bu=http-da4bec50&expiration=1673840583&v=ks6"></video>
+				</view>
+			
+				<view class="tag">
+					<text class="symbol">#</text>
+					<text class="text">2023年度春季职工运动会</text>
+					<text class="icon">
+						<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
+					</text>
+				</view>
+			</view>
 		</view>
 		<u-divider border-color="#CFD2D5">已经到底了</u-divider>
 		
@@ -176,13 +209,24 @@
 
 			.pictures {
 				display: flex;
-				justify-content: space-between;
+				justify-content: start;
+				flex-wrap: wrap;
 				margin-top: 16rpx;
 
 				img {
-					width: 31.4%;
+					width: 31%;
 					height: 216rpx;
 					border-radius: 16rpx;
+					margin-bottom: 16rpx;
+					margin-left: 16rpx;
+				}
+			}
+			.video{
+				margin-top: 16rpx;
+				uni-video{
+					width: 100%;
+					height: 380rpx;
+					border-radius: 8px;
 				}
 			}
 

pages/staffHome/staffHome.vue

@@ -90,7 +90,7 @@
 		background: url(../../assets/img/banner.png) no-repeat;
 		background-size: 100% 200rpx;
 		color: rgba(255, 255, 255, 1);
-		font-size: 20px;
+		font-size: 40rpx;
 		text-align: center;
 		padding: 44rpx 0;
 	}