school_uni/package1/ieBrowser/chat.vue

<template>
	<view class="chat-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="user">
				<view class="name">奶茶研究员</view>
				<view class="meta">同校 · 90% 匹配 · 在线</view>
			</view>
			<view class="more">···</view>
		</view>

		<view class="topic-card">
			<view class="topic-label">今日破冰问题</view>
			<view class="topic-text">如果校园里突然多了一个隐藏副本，你希望它是什么？</view>
		</view>

		<view class="messages">
			<view class="msg-row other">
				<view class="avatar">E</view>
				<view class="bubble">你好，你也是重度米线爱好者吗？</view>
			</view>
			<view class="msg-row mine">
				<view class="bubble">对啊！但我更想知道哪家汤底最稳。</view>
			</view>
			<view class="msg-row other">
				<view class="avatar">E</view>
				<view class="bubble">那我们可以开一个“北门米线测评局”。</view>
			</view>
			<view class="msg-row mine">
				<view class="bubble strong">今晚 6 点？我可以带拍照技能。</view>
			</view>
		</view>

		<view class="input-bar">
			<view class="tool">＋</view>
			<input class="input" placeholder="输入消息..." />
			<view class="emoji">☺</view>
			<view class="send">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				}
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

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

	.chat-page {
		min-height: 100vh;
		padding: 0 28rpx 150rpx;
		box-sizing: border-box;
		background:
			radial-gradient(circle at 12% 9%, rgba(131, 255, 216, 0.28), rgba(131, 255, 216, 0) 240rpx),
			linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
	}

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

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

	.user {
		flex: 1;
		text-align: center;
	}

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

	.meta {
		margin-top: 6rpx;
		color: #8c9995;
		font-size: 21rpx;
	}

	.more {
		width: 58rpx;
		text-align: right;
		font-size: 34rpx;
		font-weight: 900;
	}

	.topic-card {
		margin-top: 12rpx;
		padding: 24rpx;
		border-radius: 28rpx;
		background: linear-gradient(135deg, #111, #35413f);
		color: #fff;
		box-shadow: 0 18rpx 36rpx rgba(33, 45, 72, 0.12);
	}

	.topic-label {
		color: #bdfce9;
		font-size: 22rpx;
		font-weight: 900;
	}

	.topic-text {
		margin-top: 10rpx;
		font-size: 27rpx;
		font-weight: 800;
		line-height: 42rpx;
	}

	.messages {
		padding-top: 34rpx;
	}

	.msg-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.msg-row.mine {
		justify-content: flex-end;
	}

	.avatar {
		width: 72rpx;
		height: 72rpx;
		margin-right: 16rpx;
		border-radius: 50%;
		background: #ffe69a;
		color: #a45c00;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		font-weight: 900;
	}

	.bubble {
		max-width: 480rpx;
		padding: 22rpx 26rpx;
		border-radius: 28rpx;
		background: #fff;
		box-shadow: 0 14rpx 30rpx rgba(33, 45, 72, 0.08);
		color: #26322f;
		font-size: 27rpx;
		line-height: 42rpx;
	}

	.mine .bubble {
		background: #111;
		color: #fff;
	}

	.bubble.strong {
		background: linear-gradient(135deg, #7f6cff, #3f2dcf);
	}

	.input-bar {
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: 34rpx;
		height: 94rpx;
		padding: 12rpx;
		box-sizing: border-box;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 16rpx 42rpx rgba(33, 45, 72, 0.12);
		display: flex;
		align-items: center;
	}

	.tool,
	.emoji {
		width: 58rpx;
		text-align: center;
		font-size: 34rpx;
		color: #6c7a75;
	}

	.input {
		flex: 1;
		height: 70rpx;
		padding: 0 20rpx;
		border-radius: 999rpx;
		background: #f3f6f8;
		font-size: 26rpx;
	}

	.send {
		height: 64rpx;
		line-height: 64rpx;
		margin-left: 10rpx;
		padding: 0 24rpx;
		border-radius: 999rpx;
		background: #111;
		color: #fff;
		font-size: 24rpx;
		font-weight: 900;
	}
</style>