<template>
	<view class="fate-page">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="title">今日缘分</view>
			<view class="ghost"></view>
		</view>
		<view class="hero">
			<view class="hero-title">今天的 3 次轻连接</view>
			<view class="hero-sub">它们不会变成关系压力，只留下一点情绪轨迹。</view>
		</view>
		<view class="timeline">
			<view class="line"></view>
			<view class="fate-card" v-for="item in fates" :key="item.time">
				<view class="node" :class="item.type">{{ item.type }}</view>
				<view class="card-main">
					<view class="card-top">
						<text class="name">{{ item.name }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<view class="feeling">{{ item.feeling }}</view>
					<view class="remeet" v-if="item.remeet">24 小时内可再遇见一次</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				fates: [
					{ type: 'i', name: '月台旁的影子', time: '23:18', feeling: '沉默不尴尬，像有人坐在旁边。', remeet: true },
					{ type: 'e', name: '便利店灯光', time: '21:42', feeling: '聊了一句夜宵废话，心情被拉亮一点。', remeet: false },
					{ type: 'i', name: '耳机里的风', time: '昨天', feeling: '不用解释低落，也被轻轻听见。', remeet: false }
				]
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.fate-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 84% 12%, rgba(139,124,255,.22), transparent 300rpx), linear-gradient(180deg, #fbfdff, #eef4ff); }
	.nav { height: 90rpx; display: flex; align-items: center; }
	.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.64); }
	.title { flex: 1; text-align: center; font-size: 31rpx; font-weight: 800; }
	.hero { margin-top: 22rpx; padding: 36rpx; border-radius: 44rpx; background: rgba(255,255,255,.58); border: 1rpx solid rgba(255,255,255,.86); backdrop-filter: blur(24rpx); }
	.hero-title { font-size: 44rpx; font-weight: 800; }
	.hero-sub { margin-top: 14rpx; color: rgba(21,26,45,.52); font-size: 25rpx; line-height: 40rpx; }
	.timeline { position: relative; margin-top: 36rpx; }
	.line { position: absolute; left: 37rpx; top: 30rpx; bottom: 30rpx; width: 2rpx; background: rgba(139,124,255,.2); }
	.fate-card { position: relative; display: flex; margin-bottom: 24rpx; }
	.node { z-index: 1; width: 76rpx; height: 76rpx; border-radius: 50%; text-align: center; line-height: 76rpx; font-size: 30rpx; font-weight: 800; }
	.node.i { color: #fff; background: #7771d8; }
	.node.e { color: #11162a; background: #a9ffe7; }
	.card-main { flex: 1; margin-left: 20rpx; padding: 28rpx; border-radius: 34rpx; background: rgba(255,255,255,.64); box-shadow: 0 22rpx 54rpx rgba(96,112,160,.12); }
	.card-top { display: flex; }
	.name { flex: 1; font-size: 28rpx; font-weight: 800; }
	.time { color: rgba(21,26,45,.4); font-size: 22rpx; }
	.feeling { margin-top: 14rpx; color: rgba(21,26,45,.62); font-size: 25rpx; line-height: 40rpx; }
	.remeet { display: inline-block; margin-top: 18rpx; padding: 8rpx 18rpx; border-radius: 999rpx; color: #11162a; background: #dffef4; font-size: 21rpx; }
</style>
