school_uni/package1/ieBrowser/chatList.vue

<template>
	<view class="records-page">
		<view class="glow glow-a"></view>
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="title">感受记录</view>
			<view class="filter">仅自己可见</view>
		</view>

		<view class="summary-card">
			<view>
				<view class="summary-label">Tonight Archive</view>
				<view class="summary-title">今晚被轻轻接住了 2 次</view>
				<view class="summary-sub">这里不保存完整聊天，只留下当时的情绪温度。</view>
			</view>
			<view class="moon">月</view>
		</view>

		<view class="feeling-picker">
			<view class="section-title">结束后，你现在感觉</view>
			<view class="feeling-row">
				<view class="feeling-chip" v-for="item in feelings" :key="item"
					:class="{ active: currentFeeling === item }" @tap="currentFeeling = item">
					{{ item }}
				</view>
			</view>
		</view>

		<view class="record-card" v-for="item in records" :key="item.time">
			<view class="record-top">
				<view class="record-orb" :class="item.type">{{ item.type }}</view>
				<view>
					<view class="record-name">{{ item.name }}</view>
					<view class="record-meta">{{ item.time }} · {{ item.duration }}</view>
				</view>
			</view>
			<view class="record-text">{{ item.feeling }}</view>
			<view class="record-tags">
				<text v-for="tag in item.tags" :key="tag">{{ tag }}</text>
			</view>
		</view>

		<view class="empty-note">
			不是消息列表，也不是社交关系。只是给夜晚留一点柔软的痕迹。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				currentFeeling: '轻了一点',
				feelings: ['轻了一点', '还是安静', '被听见了', '想睡了'],
				records: [{
					type: 'i',
					name: '月台旁的影子',
					time: '23:18',
					duration: '15 分钟',
					feeling: '对方没有催我讲话，沉默变得没那么尴尬。',
					tags: ['安静陪伴', '想安静', '半匿名']
				}, {
					type: 'e',
					name: '便利店灯光',
					time: '21:42',
					duration: '12 分钟',
					feeling: '聊了一个很小的夜宵话题，心情被拉亮了一点。',
					tags: ['轻轻热闹', '想说话', '限时']
				}, {
					type: 'i',
					name: '耳机里的风',
					time: '昨天',
					duration: '15 分钟',
					feeling: '像有人坐在旁边，不需要解释为什么低落。',
					tags: ['慢回复', '听着呢', '低压力']
				}]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			}
		}
	}
</script>

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

	.records-page {
		min-height: 100vh;
		padding: 0 28rpx 56rpx;
		box-sizing: border-box;
		color: #161b2e;
		background:
			radial-gradient(circle at 14% 8%, rgba(139, 124, 255, 0.2), rgba(139, 124, 255, 0) 280rpx),
			radial-gradient(circle at 86% 18%, rgba(169, 255, 231, 0.38), rgba(169, 255, 231, 0) 320rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 62%, #fff4e8 100%);
		position: relative;
		overflow: hidden;
	}

	.glow {
		position: absolute;
		right: -120rpx;
		top: 240rpx;
		width: 320rpx;
		height: 320rpx;
		border-radius: 50%;
		background: rgba(255, 184, 209, 0.26);
		filter: blur(10rpx);
	}

	.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;
	}

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

	.summary-card,
	.feeling-picker,
	.record-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);
	}

	.summary-card {
		display: flex;
		justify-content: space-between;
		padding: 34rpx;
		border-radius: 42rpx;
	}

	.summary-label {
		color: #6c69d8;
		font-size: 21rpx;
		letter-spacing: 3rpx;
	}

	.summary-title {
		margin-top: 14rpx;
		font-size: 40rpx;
		line-height: 52rpx;
		font-weight: 800;
	}

	.summary-sub {
		width: 460rpx;
		margin-top: 12rpx;
		color: rgba(22, 27, 46, 0.52);
		font-size: 24rpx;
		line-height: 38rpx;
	}

	.moon {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 104rpx;
		color: #09101f;
		background: linear-gradient(145deg, #effffb, #a9ffe7);
		font-size: 34rpx;
		font-weight: 800;
	}

	.feeling-picker {
		margin-top: 28rpx;
		padding: 28rpx;
		border-radius: 34rpx;
	}

	.section-title {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 800;
	}

	.feeling-row {
		display: flex;
		flex-wrap: wrap;
	}

	.feeling-chip {
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 22rpx;
		margin: 0 14rpx 14rpx 0;
		border-radius: 999rpx;
		color: rgba(22, 27, 46, 0.55);
		background: rgba(255, 255, 255, 0.58);
		font-size: 23rpx;
	}

	.feeling-chip.active {
		color: #09101f;
		background: #a9ffe7;
	}

	.record-card {
		margin-top: 22rpx;
		padding: 28rpx;
		border-radius: 34rpx;
	}

	.record-top {
		display: flex;
		align-items: center;
	}

	.record-orb {
		width: 78rpx;
		height: 78rpx;
		margin-right: 18rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 78rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.record-orb.i {
		color: #f7f4ff;
		background: linear-gradient(145deg, #8b7cff, #dde7ff);
	}

	.record-orb.e {
		color: #07101e;
		background: linear-gradient(145deg, #a9ffe7, #fff0b8);
	}

	.record-name {
		font-size: 29rpx;
		font-weight: 800;
	}

	.record-meta {
		margin-top: 8rpx;
		color: rgba(22, 27, 46, 0.44);
		font-size: 22rpx;
	}

	.record-text {
		margin-top: 22rpx;
		color: rgba(22, 27, 46, 0.72);
		font-size: 26rpx;
		line-height: 42rpx;
	}

	.record-tags {
		margin-top: 20rpx;
	}

	.record-tags text {
		display: inline-block;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		margin: 0 10rpx 10rpx 0;
		border-radius: 999rpx;
		color: #6c69d8;
		background: rgba(139, 124, 255, 0.1);
		font-size: 20rpx;
	}

	.empty-note {
		position: relative;
		z-index: 1;
		width: 560rpx;
		margin: 34rpx auto 0;
		text-align: center;
		color: rgba(22, 27, 46, 0.36);
		font-size: 23rpx;
		line-height: 38rpx;
	}
</style>