<template>
	<view class="detail-page page-fade" :class="{ 'enter-active': enterActive }">
		<view class="safe-top"></view>
		<view class="page-body">
			<view class="top-row">
				<view class="back-btn" @click="goBack">
					<uni-icons type="left" color="#2d3b50" :size="18" />
				</view>
				<text class="title">详情介绍</text>
			</view>

			<view class="content-card">
				<text class="content-title">{{ title }}</text>
				<text class="content-desc">{{ desc }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			enterActive: false,
			title: '详情介绍',
			desc: '暂无详细说明'
		};
	},
	onLoad(options) {
		if (options && options.title) {
			this.title = decodeURIComponent(options.title);
		}
		if (options && options.desc) {
			this.desc = decodeURIComponent(options.desc);
		}
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.detail-page {
	min-height: 100vh;
	background: #f4f7fb;
}

.page-fade {
	opacity: 0;
	transform: translateY(8rpx);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-fade.enter-active {
	opacity: 1;
	transform: translateY(0);
}

.safe-top {
	height: calc(var(--status-bar-height) + 12rpx);
}

.page-body {
	padding: 0 24rpx;
}

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

.back-btn {
	width: 64rpx;
	height: 64rpx;
	border-radius: 16rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 16rpx rgba(35, 49, 73, 0.08);
}

.title {
	margin-left: 16rpx;
	font-size: 34rpx;
	font-weight: 700;
	color: #28364d;
}

.content-card {
	margin-top: 24rpx;
	padding: 26rpx;
	border-radius: 20rpx;
	background: #ffffff;
	box-shadow: 0 8rpx 22rpx rgba(35, 49, 73, 0.08);
}

.content-title {
	display: block;
	font-size: 30rpx;
	font-weight: 700;
	color: #2c3a4f;
}

.content-desc {
	display: block;
	margin-top: 14rpx;
	font-size: 26rpx;
	line-height: 1.65;
	color: #5f6f88;
}
</style>
