wz-uniapp/pages/military/plan/plan.vue

<template>
	<view class="plan-page">
		<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
			<view class="safe-top"></view>
			<view class="page-body">
			<view class="top-row">
				<view class="back-btn" @click="onTap('返回')">
					<uni-icons type="left" color="#ffffff" :size="18" />
				</view>
				<view class="search-box" @click="onTap('知识搜索')">
					<uni-icons type="search" color="#8ab29a" :size="14" />
					<text>搜索</text>
				</view>
				<view class="capsule">···</view>
			</view>
			<text class="meta-text">棉若启航—共录取了1692条知识</text>

			<view class="map-panel">
				<mind-map-columns
					v-if="treeData"
					:tree-data="treeData"
					accent-color="#2b9c57"
					accent-soft="rgba(43, 156, 87, 0.12)"
					@open-detail="goDetail"
				/>
			</view>

				<view class="bottom-space"></view>
			</view>
		</view>
	</view>
</template>

<script>
import MindMapColumns from '../components/mind-map-columns.vue';
import { planMindMap } from '../data/mindmap';

export default {
	components: {
		MindMapColumns
	},
	data() {
		return {
			enterActive: false,
			treeData: null
		};
	},
	onLoad() {
		this.treeData = this.buildTree(planMindMap);
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		buildTree(tree) {
			return JSON.parse(JSON.stringify(tree));
		},
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		onTap(label) {
			uni.showToast({
				title: `${label} 可点击`,
				icon: 'none'
			});
		},
		goDetail(node) {
			const title = encodeURIComponent(node.title || '详情介绍');
			const desc = encodeURIComponent(node.desc || '暂无详细说明');
			uni.navigateTo({
				url: `/pages/military/plan-detail/plan-detail?title=${title}&desc=${desc}`
			});
		}
	}
};
</script>

<style scoped>
.plan-page {
	min-height: 100vh;
	background: radial-gradient(circle at 30% 0%, #2b7b4c 0%, #1a5635 45%, #123a27 100%);
	position: relative;
	overflow: hidden;
}

.page-content {
	min-height: 100vh;
}

.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) + 8rpx);
}

.page-body {
	padding: 0 24rpx;
	position: relative;
	z-index: 1;
}

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

.back-btn {
	width: 66rpx;
	height: 66rpx;
	border-radius: 18rpx;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-box {
	flex: 1;
	height: 66rpx;
	padding: 0 18rpx;
	border-radius: 18rpx;
	background: #edf8f1;
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	color: #7b9f88;
}

.capsule {
	width: 88rpx;
	height: 66rpx;
	border-radius: 33rpx;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	line-height: 1;
}

.meta-text {
	display: block;
	margin-top: 16rpx;
	font-size: 22rpx;
	color: rgba(231, 247, 236, 0.9);
}

.map-panel {
	margin-top: 20rpx;
	padding: 18rpx 14rpx;
	border-radius: 20rpx;
	background: rgba(220, 245, 229, 0.9);
	height: 68vh;
	min-height: 560rpx;
	box-sizing: border-box;
}

.bottom-space {
	height: 190rpx;
}
</style>