school_uni/package1/ieBrowser/friends.vue

<template>
	<view class="archive-page">
		<view class="glow glow-a"></view>
		<view class="glow glow-b"></view>
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="title">我的夜间档案</view>
			<view class="safe-dot">Safe</view>
		</view>

		<view class="profile-card">
			<view class="avatar-orb">夜</view>
			<view class="profile-title">半匿名漂流者</view>
			<view class="profile-desc">不经营人设，不展示粉丝。这里只记录你更喜欢怎样被陪伴。</view>
			<view class="profile-stats">
				<view>
					<text class="stat-num">3</text>
					<text class="stat-label">今日机会</text>
				</view>
				<view>
					<text class="stat-num">长期</text>
					<text class="stat-label">聊天保留</text>
				</view>
				<view>
					<text class="stat-num">0</text>
					<text class="stat-label">公开资料</text>
				</view>
			</view>
		</view>

		<view class="section-card">
			<view class="section-title">此刻偏好</view>
			<view class="preference-grid">
				<view class="preference-card" v-for="item in preferences" :key="item.title">
					<view class="preference-title">{{ item.title }}</view>
					<view class="preference-desc">{{ item.desc }}</view>
				</view>
			</view>
		</view>

		<view class="section-card">
			<view class="section-title">安全设置</view>
			<view class="setting-row" v-for="item in settings" :key="item.title" @tap="handleSetting(item)">
				<view>
					<view class="setting-title">{{ item.title }}</view>
					<view class="setting-desc">{{ item.desc }}</view>
				</view>
				<view class="setting-arrow">›</view>
			</view>
		</view>

		<view class="principle-card">
			<view class="principle-title">产品原则</view>
			<view class="principle-line" v-for="item in principles" :key="item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				preferences: [{
					title: '更常选择 i',
					desc: '安静、慢回复、允许沉默。'
				}, {
					title: '夜间更活跃',
					desc: '22:00 后更需要轻陪伴。'
				}, {
					title: '聊天可回访',
					desc: '匹配成功后保留聊天入口和历史消息。'
				}, {
					title: '不开放主页',
					desc: '没有访客、关注、粉丝和点赞。'
				}],
				settings: [{
					title: '举报记录',
					desc: '查看你提交过的安全反馈。'
				}, {
					title: '黑名单',
					desc: '被拉黑对象不会再随机出现。'
				}, {
					title: '隐私说明',
					desc: '半匿名资料和聊天保留规则。'
				}],
				principles: [
					'不做好友列表，做轻关系保护。',
					'不做动态广场，做当下状态入口。',
					'不做颜值筛选，做半匿名陪伴。',
					'不做无限刷匹配，已匹配的人可以继续聊。'
				]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			handleSetting(item) {
				uni.showToast({
					title: item.title,
					icon: 'none'
				})
			},
			back() {
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			}
		}
	}
</script>

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

	.archive-page {
		min-height: 100vh;
		padding: 0 28rpx 56rpx;
		box-sizing: border-box;
		color: #161b2e;
		background:
			radial-gradient(circle at 82% 12%, rgba(169, 255, 231, 0.38), rgba(169, 255, 231, 0) 300rpx),
			radial-gradient(circle at 18% 40%, rgba(255, 214, 165, 0.32), rgba(255, 214, 165, 0) 320rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 62%, #fff4e8 100%);
		position: relative;
		overflow: hidden;
	}

	.glow {
		position: absolute;
		border-radius: 50%;
		filter: blur(10rpx);
	}

	.glow-a {
		left: -130rpx;
		top: 260rpx;
		width: 340rpx;
		height: 340rpx;
		background: rgba(119, 99, 255, 0.22);
	}

	.glow-b {
		right: -120rpx;
		bottom: 180rpx;
		width: 300rpx;
		height: 300rpx;
		background: rgba(255, 184, 209, 0.24);
	}

	.nav {
		position: relative;
		z-index: 1;
		height: 92rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 58rpx;
		color: rgba(22, 27, 46, 0.62);
		font-size: 56rpx;
		line-height: 56rpx;
	}

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

	.safe-dot {
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 22rpx;
		border-radius: 999rpx;
		color: #09101f;
		background: #a9ffe7;
		font-size: 22rpx;
		font-weight: 800;
	}

	.profile-card,
	.section-card,
	.principle-card {
		position: relative;
		z-index: 1;
		border: 1rpx solid rgba(255, 255, 255, 0.78);
		background: rgba(255, 255, 255, 0.62);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 20rpx 64rpx rgba(96, 112, 160, 0.12);
	}

	.profile-card {
		padding: 38rpx;
		border-radius: 46rpx;
		text-align: center;
	}

	.avatar-orb {
		width: 132rpx;
		height: 132rpx;
		margin: 0 auto;
		border-radius: 50%;
		text-align: center;
		line-height: 132rpx;
		color: #09101f;
		background: linear-gradient(145deg, #effffb, #a9ffe7);
		font-size: 42rpx;
		font-weight: 800;
	}

	.profile-title {
		margin-top: 24rpx;
		font-size: 40rpx;
		font-weight: 800;
	}

	.profile-desc {
		width: 520rpx;
		margin: 14rpx auto 0;
		color: rgba(22, 27, 46, 0.54);
		font-size: 24rpx;
		line-height: 38rpx;
	}

	.profile-stats {
		display: flex;
		margin-top: 34rpx;
		padding-top: 28rpx;
		border-top: 1rpx solid rgba(22, 27, 46, 0.08);
	}

	.profile-stats view {
		flex: 1;
	}

	.stat-num,
	.stat-label {
		display: block;
	}

	.stat-num {
		font-size: 34rpx;
		font-weight: 800;
	}

	.stat-label {
		margin-top: 8rpx;
		color: rgba(22, 27, 46, 0.42);
		font-size: 21rpx;
	}

	.section-card,
	.principle-card {
		margin-top: 26rpx;
		padding: 30rpx;
		border-radius: 36rpx;
	}

	.section-title,
	.principle-title {
		margin-bottom: 22rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.preference-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
	}

	.preference-card {
		width: calc(50% - 9rpx);
		padding: 24rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.56);
		box-sizing: border-box;
	}

	.preference-title {
		color: #6c69d8;
		font-size: 25rpx;
		font-weight: 800;
	}

	.preference-desc {
		margin-top: 12rpx;
		color: rgba(22, 27, 46, 0.52);
		font-size: 22rpx;
		line-height: 34rpx;
	}

	.setting-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-top: 1rpx solid rgba(22, 27, 46, 0.08);
	}

	.setting-row:first-of-type {
		border-top: 0;
	}

	.setting-title {
		font-size: 27rpx;
		font-weight: 800;
	}

	.setting-desc {
		margin-top: 8rpx;
		color: rgba(22, 27, 46, 0.48);
		font-size: 22rpx;
	}

	.setting-arrow {
		color: rgba(22, 27, 46, 0.42);
		font-size: 42rpx;
	}

	.principle-line {
		position: relative;
		padding-left: 24rpx;
		margin-top: 18rpx;
		color: rgba(22, 27, 46, 0.62);
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.principle-line::before {
		content: '';
		position: absolute;
		left: 0;
		top: 14rpx;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: #a9ffe7;
	}
</style>