增加follow界面和设置界面的入口

pages.json

@@ -1,5 +1,5 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [ 
 
 		{
 			"path": "pages/index/index",
@@ -207,8 +207,13 @@
 				"navigationBarTitleText": "您的消息",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
+		}, {
+			"path": "pages/my/follow",
+			"style": {
+				"navigationBarTitleText": "关注",
+				"navigationBarBackgroundColor": "#ffffff"
+			}
 		}
-
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/my/follow.scss

@@ -0,0 +1,79 @@
+.page {
+	min-height: 100vh;
+	background-color: #fff;
+	padding-top: 10px;
+}
+
+.tabs {
+	display: flex;
+	padding: 0 40px;
+	margin-bottom: 20px;
+	
+	.tab {
+		position: relative;
+		padding: 0 20px;
+		font-size: 16px;
+		color: #666;
+		
+		&.active {
+			color: #000;
+			font-weight: bold;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				left: 20px;
+				right: 20px;
+				bottom: -6px;
+				height: 2px;
+				background-color: #5c5cff;
+			}
+		}
+	}
+}
+
+.follow-list {
+	padding: 0 20px;
+	
+	.follow-item {
+		display: flex;
+		align-items: center;
+		padding: 15px 0;
+		
+		.avatar {
+			width: 50px;
+			height: 50px;
+			border-radius: 25px;
+			margin-right: 12px;
+		}
+		
+		.info {
+			flex: 1;
+			
+			.name {
+				font-size: 16px;
+				font-weight: 500;
+				margin-bottom: 4px;
+			}
+			
+			.desc {
+				font-size: 12px;
+				color: #999;
+			}
+		}
+		
+		.unfollow-btn {
+			font-size: 14px;
+			color: #666;
+			background: none;
+			border: 1px solid #ddd;
+			border-radius: 15px;
+			padding: 4px 12px;
+			margin: 0;
+			
+			&::after {
+				border: none;
+			}
+		}
+	}
+}

pages/my/follow.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="page">
+		<view class="tabs">
+			<view class="tab active">关注</view>
+			<view class="tab">粉丝</view>
+		</view>
+		
+		<view class="follow-list">
+			<view class="follow-item" v-for="(item, index) in followList" :key="index">
+				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+				<view class="info">
+					<view class="name">{{item.name}}</view>
+					<view class="desc">{{item.description}}</view>
+				</view>
+				<button class="unfollow-btn">取消关注</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				followList: [
+					{
+						avatar: '/static/demo/avatar1.jpg',
+						name: '冷落',
+						description: 'AI设计师'
+					},
+					{
+						avatar: '/static/demo/avatar2.jpg',
+						name: '雾里',
+						description: '感谢你的关注，远方的陌生人'
+					}
+				]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'follow.scss';
+</style>

pages/my/my.scss

@@ -27,17 +27,33 @@ page {
 		z-index: 0;
 		position: absolute;
 	}
-	
-	.top_num {
+	/* 新增设置按钮 */
+	.settingBtn {
 		position: absolute;
-		top: 20rpx;
+		top: 24rpx;
 		right: 30rpx;
+		z-index: 11;
+		width: 48rpx;
+		height: 48rpx;
+		/* 新增点击态 */
+		&:active {
+			opacity: 0.7;
+			transform: scale(0.95);
+		}
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.top_num {
+		position: absolute;
+		top: 24rpx;  // 垂直对齐设置按钮
+		right: 98rpx; // 30+48+20=98 预留按钮空间
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-end;
 		align-items: center;
 		z-index: 10;
-		
 		.num_1, .num_2 {
 			display: flex;
 			flex-direction: row;
@@ -47,12 +63,14 @@ page {
 			border-radius: 30rpx;
 			padding: 10rpx 20rpx;
 			margin-left: 20rpx;
-			
+			.num_1, .num_2 {
+				margin-left: 10rpx;  // 缩小间距
+				padding: 8rpx 16rpx; // 调整内边距
+			}
 			text:first-child {
 				font-size: 24rpx;line-height: 32rpx;
 				color: #666;
 			}
-			
 			text:last-child {
 				font-size: 32rpx;line-height: 32rpx;
 				font-weight: bold;
@@ -60,7 +78,6 @@ page {
 			}
 		}
 	}
-	
 	.infoBg {
 		display: flex;
 		flex-direction: column;
@@ -75,14 +92,12 @@ page {
 		border-radius: 24rpx;
 		padding-top: calc(var(--status-bar-height) + 0rpx);
 		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
-		
 		.top_row {
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: flex-start;
 			padding: 20rpx 0;
-			
 			.left {
 				padding-left: 30rpx;padding-right: 0rpx;
 				width:200rpx;
@@ -149,45 +164,37 @@ page {
 				}
 			}
 		}
-		
 		.bottom_row {
 			padding: 20rpx 50rpx;
-			
 			.intro_row {
 				display: flex;
 				flex-direction: row;
 				align-items: center;
 				margin-bottom: 20rpx;
-				
 				.intro_text {
 					color: #999;
 					font-size: 28rpx;
 				}
-				
 				.add_icon {
 					width: 28rpx;
 					margin-left: 10rpx;
 				}
 			}
-			
 			.follow_info {
 				display: flex;
 				flex-direction: row;
 				align-items: center;
 				justify-content: flex-start;
-				
 				.num {
 					font-size: 36rpx;
 					font-weight: bold;
 					color: #333;
 					margin-right: 8rpx;
 				}
-				
 				.label {
 					font-size: 28rpx;
 					color: #999;
 				}
-				
 				.separator {
 					width: 2rpx;
 					height: 24rpx;
@@ -223,8 +230,6 @@ page {
 	flex-direction: column;
 	margin:30rpx 30rpx 60rpx;
 	justify-content: flex-start;
-	
-	
 	.numlist {
 		display: flex;
 		flex-direction: row;
@@ -237,7 +242,6 @@ page {
 			border-radius: 38rpx;
 			width:316rpx;
 			height:186rpx;
-			
 			image {
 				width:64rpx;
 			}
@@ -257,7 +261,6 @@ page {
 			}
 		}
 	}
-	
 	.numlist2 {
 		display: flex;
 		flex-direction: row;
@@ -272,7 +275,6 @@ page {
 			border-radius: 2rpx;
 			width:340rpx;
 			background: rgba(120, 120, 120, 0.09);margin:2rpx;
-			
 			image {
 				width:224rpx;
 			}
@@ -291,7 +293,6 @@ page {
 			}
 		}
 	}
-	
 	.tablist {
 		display: flex;
 		flex-direction: row;
@@ -299,7 +300,6 @@ page {
 		align-items: center;
 		margin: 20rpx 0;
 		position: relative;
-		
 		.item {
 			flex: 1;
 			height: 80rpx;
@@ -307,19 +307,16 @@ page {
 			justify-content: center;
 			align-items: center;
 			position: relative;
-			
 			.name {
 				font-size: 32rpx;
 				color: #666;
 				transition: all 0.3s;
 			}
-			
 			&.active {
 				.name {
 					color: #2B65D9;
 					font-weight: bold;
 				}
-				
 				&::after {
 					content: '';
 					position: absolute;
@@ -332,7 +329,6 @@ page {
 					border-radius: 3rpx;
 				}
 			}
-			
 			&:active {
 				opacity: 0.8;
 			}

pages/my/my.vue

@@ -3,6 +3,9 @@
 		<view class="topBody">
 			<view class="header">
 				<view class="topBg"></view>
+				<view class="settingBtn" @click="navigateToSettings">
+					<image src="/static/home/icon_vip.png"></image>
+				</view>
 				<view class="top_num">
 					<view class="num_1">
 						<text>M币</text>
@@ -376,6 +379,11 @@
 					};
 				});
 			},
+			navigateToSettings() {
+				uni.navigateTo({
+						url: '/pages/my/setting' 
+					});
+			},
 		}
 	}
 </script>