个人主页页面

pages.json

@@ -140,6 +140,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/mine/personalPage",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/homePage/homePage.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		 <!-- 吸顶搜索框 -->
+		<!-- 吸顶搜索框 -->
 		<view class="sticky" v-if="flag">
 			<input type="text" placeholder="请输入搜索内容">
 		</view>
@@ -26,7 +26,7 @@
 				2022-12-08
 			</view>
 		</view>
-        <!-- 宫格 -->
+		<!-- 宫格 -->
 		<view class="grid">
 			<u-grid :col="4" :border="false">
 				<u-grid-item>
@@ -63,7 +63,7 @@
 				</u-grid-item>
 			</u-grid>
 		</view>
-	    <!-- 新闻资讯 -->
+		<!-- 新闻资讯 -->
 		<view class="news">
 			<view class="title">
 				<view class="icon">
@@ -72,7 +72,7 @@
 				<view class="text">
 					新闻资讯
 				</view>
-				
+
 			</view>
 			<view class="news-item" v-for="item in 4">
 				<view class="content">
@@ -86,31 +86,31 @@
 						<view class="date">
 							2020-12-30
 						</view>
-						
+
 					</view>
 				</view>
-				
+
 				<view class="img">
 					<img src="../../assets/img/newsPic.png" alt="">
 				</view>
-				
+
 			</view>
-		   </view>
-		   <u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
-	<tabbar current="0"></tabbar>
+		</view>
+		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
+		<tabbar current="0"></tabbar>
 	</view>
 </template>
 
 <script>
 	import tabbar from "../../components/Tabbar.vue"
 	export default {
-		components:{
+		components: {
 			tabbar
 		},
 		data() {
 			return {
-				flag:false,
-				scrollTop:"",
+				flag: false,
+				scrollTop: "",
 				list: [{
 						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
 						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
@@ -128,40 +128,42 @@
 			}
 		},
 		methods: {
-       onPageScroll(e) {
-   	this.scrollTop = e.scrollTop;
-   		console.log(this.scrollTop);
-   		if(this.scrollTop>=200){
-   			this.flag=true;
-   		} else{
-   			this.flag=false;
-   		}
-   		
-   		
-   },
-		 
+			onPageScroll(e) {
+				this.scrollTop = e.scrollTop;
+				console.log(this.scrollTop);
+				if (this.scrollTop >= 200) {
+					this.flag = true;
+				} else {
+					this.flag = false;
+				}
+
+
+			},
+
 		},
-		
-	
-		
+
+
+
 	}
 </script>
 
 <style scoped lang="scss">
-	page{
+	page {
 		padding-bottom: 50px;
 	}
-	.sticky{
+
+	.sticky {
 		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		z-index: 100;
-		border-bottom:1px solid #fff ;
+		border-bottom: 1px solid #fff;
 		padding: 16rpx 40rpx;
 		background-color: #fff;
-		uni-input{
+
+		uni-input {
 			background-color: #E8E8E8;
 			height: 32px;
 			line-height: 32px;
@@ -169,33 +171,34 @@
 			text-align: center;
 		}
 	}
-		
-		
+
+
 
 	.u-search {
-		
-		
-/deep/.uni-input-placeholder {
-		font-weight: bold;
+
+
+		/deep/.uni-input-placeholder {
+			font-weight: bold;
+		}
+
+		/deep/.uni-input-input {
+			color: #ffffff !important;
+			font-weight: bold;
+		}
 	}
 
-	/deep/.uni-input-input {
+	.search-box {
+		width: 100%;
+		background-color: #4F3C27;
+		padding: 16rpx 40rpx;
+		position: absolute;
+		line-height: 32px;
 		color: #ffffff !important;
-		font-weight: bold;
-	}
+		opacity: 0.4;
+		z-index: 999;
+		opacity: 0.4;
 	}
-.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 {
@@ -225,66 +228,74 @@
 		}
 	}
 
-// 宫格
-.grid{
-	img{
-		width: 80rpx;
-		height: 80rpx;
-	}
-	.grid-text{
-		color: rgba(51, 51, 51, 1);
-		margin-top: 8rpx;
-	}
-}
+	// 宫格
+	.grid {
+		img {
+			width: 80rpx;
+			height: 80rpx;
+		}
 
-// 新闻资讯
-.news{
-	padding: 40rpx 32rpx;
-	background-color: rgba(244, 244, 244, 1);
-	.title{
-		display: flex;
-		align-items: center;
-		margin-bottom: 40rpx;
-		img{
-			width: 40rpx;
-			height: 40rpx;
-			margin-right: 8rpx;
+		.grid-text {
+			color: rgba(51, 51, 51, 1);
+			margin-top: 8rpx;
 		}
 	}
-  .news-item{
-	  display: flex;
-	  justify-content: space-between;
-	  margin-bottom: 40rpx;
-	  .content{
-		  display: flex;
-		  flex-direction: column;
-		  justify-content: space-between;
-		  .news-title{
-			  color: rgba(51, 51, 51, 1);
-			  font-size: 16px;
-			  text-align: justify;
-			  width: 438rpx;
-			  white-space: nowrap;
-			  overflow: hidden;
-			  text-overflow: ellipsis;
-		  }
-		  
-		  .information{
-			  margin-top: 44rpx;
-			  display: flex;
-			  justify-content: space-between;
-			  color: #777777;
-		  }
-	  }
-  }
-.img{
-	width: 224rpx;
-	border-radius: 5px;
-	overflow: hidden;
-	img{
-        width: 100%;
-		height: 100%;
+
+	// 新闻资讯
+	.news {
+		padding: 40rpx 32rpx;
+		background-color: rgba(244, 244, 244, 1);
+
+		.title {
+			display: flex;
+			align-items: center;
+			margin-bottom: 40rpx;
+
+			img {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 8rpx;
+			}
+		}
+
+		.news-item {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 40rpx;
+
+			.content {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.news-title {
+					color: rgba(51, 51, 51, 1);
+					font-size: 16px;
+					text-align: justify;
+					width: 438rpx;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.information {
+					margin-top: 44rpx;
+					display: flex;
+					justify-content: space-between;
+					color: #777777;
+				}
+			}
+		}
+
+		.img {
+			width: 224rpx;
+			border-radius: 5px;
+			overflow: hidden;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
 	}
-}
-}
 </style>

pages/mine/mine.vue

@@ -235,22 +235,27 @@
 						img {
 							width: 28rpx;
 							height: 28rpx;
-							vertical-align: middle;
+							
 						}
 					}
 
 					.department {
 						display: flex;
-						align-items: center;
+						
+						.text{
+							line-height: 16px;
+						}
 
 
 					}
 
 					.position {
 						display: flex;
-						align-items: center;
+						
 						margin-left: 24rpx;
-
+                .text{
+                	line-height: 16px;
+                }
 
 
 					}

pages/mine/personalPage.vue

@@ -0,0 +1,340 @@
+<template>
+	<view>
+		<view class="header">
+			<!-- 导航 -->
+			<view :class="flag?'sticky':'navbar'">
+				<view class="back">
+					<u-icon name="arrow-left" size="40"></u-icon>
+				</view>
+				<view class="title">
+					个人主页
+				</view>
+				<view class="camera">
+					<u-icon name="camera-fill" size="48"></u-icon>
+				</view>
+			</view>
+			<!-- 个人信息 -->
+			<view class="person-infos">
+				 <view class="photo">
+				 	<img src="../../assets/img/shareP.png" alt="">
+				 </view>
+				<view class="infos">
+					<view class="name">
+						王泽
+					</view>
+					<view class="department-position">
+						<view class="department">
+							<view class="icon">
+								<img src="../../assets/img/department2.png" alt="">
+							</view>
+							<view class="text">
+								采购部
+							</view>
+						</view>
+						<view class="position">
+							<text class="icon">
+								<img src="../../assets/img/position2.png" alt="">
+							</text>
+							<text class="text">
+								员工
+							</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="grid">
+				<view class="item">
+					<view class="amout">
+						999
+					</view>
+					<view class="text">
+						发布
+					</view>
+				</view>
+				<view class="item">
+					<view class="amout">
+						999
+					</view>
+					<view class="text">
+						点赞
+					</view>
+				</view>
+				<view class="item">
+					<view class="amout">
+						999
+					</view>
+					<view class="text">
+						评论
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		<!-- 分享 -->
+		<view class="share">
+			<view class="item">
+				<view class="date">
+					<view class="day">
+						15
+					</view>
+					<view class="year-month">
+						2023.1
+					</view>
+				</view>
+				<view class="content">
+					<view class="title">
+						周末去参加了公司组织的羽毛球赛~
+					</view>
+					<view class="photos">
+						<img src="../../assets/img/sharePic2.png" alt="">
+						<img src="../../assets/img/sharePic3.png" alt="">
+						
+					</view>
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="date">
+					<view class="day">
+						15
+					</view>
+					<view class="year-month">
+						2023.1
+					</view>
+				</view>
+				<view class="content">
+					<view class="title">
+						周末去参加了公司组织的羽毛球赛~
+					</view>
+					<view class="photos">
+						<img src="../../assets/img/sharePic2.png" alt="">
+						<img src="../../assets/img/sharePic3.png" alt="">
+						<img src="../../assets/img/sharePic3.png" alt="">
+					</view>
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="date">
+					<view class="day">
+						15
+					</view>
+					<view class="year-month">
+						2023.1
+					</view>
+				</view>
+				<view class="content">
+					<view class="title">
+						打工人必备！提高工作效率的电脑快捷键。~
+					</view>
+					
+				</view>
+				
+			</view>
+		</view>
+		<u-divider border-color="#CFD2D5">已经到底了</u-divider>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				flag: false,
+				scrollTop: "",
+			}
+		},
+		methods: {
+			onPageScroll(e) {
+				this.scrollTop = e.scrollTop;
+				console.log(this.scrollTop);
+				console.log(this.flag);
+				if (this.scrollTop >=44) {
+					this.flag = true;
+				} else {
+					this.flag = false;
+				}
+			
+			
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	page{
+		background-color: #fff;
+		padding-bottom: 50px;
+	}
+	.header{
+		padding: 0 0 48rpx 0;
+		background: linear-gradient(180deg, rgba(183,208,255,1) 0%,rgba(244,244,246,1) 100%);
+		.navbar{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 44px;
+			padding: 0 32rpx;
+			.title{
+				font-size: 16px;
+				color: rgba(16, 16, 16, 1);
+			}
+		}
+		.sticky{
+			background-color: #fff;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 44px;
+			padding: 0 32rpx;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			.title{
+				font-size: 16px;
+				color: rgba(16, 16, 16, 1);
+			}
+			
+		}
+		// 个人信息
+		.person-infos{
+			margin-top: 32rpx;
+			padding: 0 48rpx;
+			display: flex;
+			align-items: center;
+			margin-bottom: 48rpx;
+			.photo {
+				box-shadow: 0px 2px 8px 0px rgba(35, 72, 75, 15);
+				border: 2px solid rgba(255, 255, 255, 1);
+				border-radius: 50px;
+				width: 120rpx;
+				height: 120rpx;
+				overflow: hidden;
+				img {
+				     vertical-align: middle;
+					border-radius: 50px; 
+					width: 120rpx;
+					height: 120rpx;
+				}
+			
+			}
+			
+			.infos {
+				margin-left:32rpx;
+			
+				.name {
+					line-height: 28px;
+					font-size: 20px;
+				}
+			
+				.department-position {
+					display: flex;
+					margin-top: 16rpx;
+			       color: rgba(119, 119, 119, 1);  
+			
+					.icon {
+						margin-right: 8rpx;
+			
+						img {
+							width: 28rpx;
+							height: 28rpx;
+							
+						}
+					}
+					
+			
+					.department {
+						display: flex;
+						
+			           .text{
+			           	line-height: 16px;
+			           }
+			           
+					}
+			
+					.position {
+						display: flex;
+						
+						margin-left: 24rpx;
+			.text{
+				line-height: 16px;
+			}
+					}
+				}
+			}
+		}
+	
+	.grid {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		margin-top: 24rpx;
+	  justify-content: space-between;
+		.item {
+			width: 33.3%;
+			text-align: center;
+	
+			.amout {
+				font-size: 48rpx;
+				line-height: 64rpx;
+	
+			}
+	
+			.text {
+				font-size: 32rpx;
+				line-height: 44rpx;
+			}
+		}
+	}
+	}
+    
+	.share{
+		padding: 32rpx;
+		.item{
+			margin-bottom: 48rpx;
+			display: flex;
+			.date{
+				.day{
+					color: rgba(51, 51, 51, 1);
+					font-size: 18px;
+					font-weight:bold;
+					line-height: 25px;
+				}
+				.year-month{
+					color: rgba(51, 51, 51, 1);
+
+				}
+			}
+			.content{
+				margin-left: 52rpx;
+				border-bottom: 1px solid rgba(232, 232, 232, 1);
+				padding-bottom: 32rpx;
+				 .title{
+					 color: rgba(51, 51, 51, 1);
+					 font-size: 16px;
+					 margin-bottom: 16rpx;
+					 line-height: 22px;
+				 }
+				 .photos{
+					 
+					 img{
+						 width: 248rpx;
+						 height: 248rpx;
+						 border-radius: 16rpx;
+						 margin-right: 16rpx;
+					 }
+				 }
+			}
+			
+		}
+		.item:last-of-type{
+			.content{
+				border: none;
+			}
+		}
+	}
+</style>