school_uni/package1/ieBrowser/friends.vue

<template>
	<view class="friends-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="title">好友列表</view>
			<view class="add">＋</view>
		</view>

		<view class="profile-card">
			<view class="profile-title">我的社交雷达</view>
			<view class="profile-desc">已连接 28 位同校同学，今天有 6 位正在找搭子</view>
			<view class="radar">
				<view class="radar-dot dot1"></view>
				<view class="radar-dot dot2"></view>
				<view class="radar-dot dot3"></view>
			</view>
		</view>

		<view class="group-tabs">
			<view class="group-tab active">全部好友</view>
			<view class="group-tab">饭搭子</view>
			<view class="group-tab">学习搭子</view>
		</view>

		<view class="friend-card" v-for="friend in friends" :key="friend.name" @tap="goChat">
			<view class="avatar" :class="friend.type">
				{{ friend.type.toUpperCase() }}
				<view class="online" v-if="friend.online"></view>
			</view>
			<view class="friend-main">
				<view class="friend-line">
					<text class="friend-name">{{ friend.name }}</text>
					<text class="friend-type">{{ friend.type.toUpperCase() }}人</text>
				</view>
				<view class="friend-status">{{ friend.status }}</view>
				<view class="friend-tags">
					<text v-for="tag in friend.tags" :key="tag">{{ tag }}</text>
				</view>
			</view>
			<view class="chat-btn">聊</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				friends: [{
					name: '橘子汽水',
					type: 'e',
					online: true,
					status: '正在寻找今晚饭搭子',
					tags: ['北门', '新店', '话题王']
				}, {
					name: 'DChuo',
					type: 'i',
					online: true,
					status: '图书馆三楼自习中',
					tags: ['自习', '安静', '高匹配']
				}, {
					name: '奶茶研究员',
					type: 'e',
					online: false,
					status: '收藏了 12 家校园奶茶',
					tags: ['探店', '拍照', '奶茶']
				}, {
					name: '凌晨两点半',
					type: 'i',
					online: false,
					status: '想找一个电影搭子',
					tags: ['电影', '散步', '慢热']
				}]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goChat() {
				uni.navigateTo({
					url: '/package1/ieBrowser/chat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f6f8ff;
	}

	.friends-page {
		min-height: 100vh;
		padding: 0 28rpx 48rpx;
		box-sizing: border-box;
		background:
			radial-gradient(circle at 85% 10%, rgba(255, 223, 117, 0.34), rgba(255, 223, 117, 0) 260rpx),
			linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 58rpx;
		font-size: 56rpx;
		line-height: 56rpx;
	}

	.title {
		flex: 1;
		font-size: 34rpx;
		font-weight: 900;
	}

	.add {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background: #111;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 34rpx;
	}

	.profile-card {
		padding: 36rpx;
		border-radius: 42rpx;
		background: linear-gradient(135deg, #7f6cff 0%, #111 100%);
		color: #fff;
		box-shadow: 0 24rpx 52rpx rgba(93, 70, 209, 0.18);
		position: relative;
		overflow: hidden;
	}

	.profile-title {
		font-size: 42rpx;
		font-weight: 900;
	}

	.profile-desc {
		width: 430rpx;
		margin-top: 12rpx;
		color: rgba(255, 255, 255, 0.72);
		font-size: 24rpx;
		line-height: 38rpx;
	}

	.radar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 2rpx dashed rgba(255, 255, 255, 0.38);
		position: absolute;
		right: 28rpx;
		top: 28rpx;
		animation: radarRotate 8s linear infinite;
	}

	.radar-dot {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: #bdfce9;
		position: absolute;
	}

	.dot1 {
		left: 28rpx;
		top: 46rpx;
	}

	.dot2 {
		right: 36rpx;
		top: 68rpx;
		background: #ffdf75;
	}

	.dot3 {
		left: 74rpx;
		bottom: 24rpx;
		background: #ff91c8;
	}

	.group-tabs {
		display: flex;
		margin: 28rpx 0;
	}

	.group-tab {
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 24rpx;
		margin-right: 16rpx;
		border-radius: 999rpx;
		background: #fff;
		color: #71807b;
		font-size: 24rpx;
		font-weight: 900;
		box-shadow: 0 12rpx 24rpx rgba(33, 45, 72, 0.06);
	}

	.group-tab.active {
		background: #111;
		color: #fff;
	}

	.friend-card {
		display: flex;
		align-items: center;
		margin-bottom: 18rpx;
		padding: 24rpx;
		border-radius: 34rpx;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 18rpx 38rpx rgba(33, 45, 72, 0.07);
	}

	.avatar {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 92rpx;
		font-size: 34rpx;
		font-weight: 900;
		position: relative;
	}

	.avatar.i {
		background: #c9fff0;
		color: #08705c;
	}

	.avatar.e {
		background: #ffe69a;
		color: #a45c00;
	}

	.online {
		width: 20rpx;
		height: 20rpx;
		border: 4rpx solid #fff;
		border-radius: 50%;
		background: #19d887;
		position: absolute;
		right: 2rpx;
		bottom: 6rpx;
	}

	.friend-main {
		flex: 1;
		margin-left: 20rpx;
		min-width: 0;
	}

	.friend-line {
		display: flex;
		align-items: center;
	}

	.friend-name {
		font-size: 30rpx;
		font-weight: 900;
	}

	.friend-type {
		margin-left: 12rpx;
		padding: 4rpx 10rpx;
		border-radius: 999rpx;
		background: rgba(127, 108, 255, 0.1);
		color: #7f6cff;
		font-size: 20rpx;
		font-weight: 900;
	}

	.friend-status {
		margin-top: 8rpx;
		color: #53615d;
		font-size: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.friend-tags {
		margin-top: 10rpx;
	}

	.friend-tags text {
		margin-right: 8rpx;
		color: #87938f;
		font-size: 21rpx;
	}

	.chat-btn {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		background: #111;
		color: #fff;
		text-align: center;
		line-height: 62rpx;
		font-size: 24rpx;
		font-weight: 900;
	}

	@keyframes radarRotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>