feiniao-youwei-uniapp/pages/tabBar/tree/tree.vue

<template>
	<view class="base-container">
		<member-level>
			<view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff"
					size="12"></up-icon></view>
		</member-level>
		<view class="tree-cont">
			<image class="drone-icon" :src="`${config.BASIC_IMG}img/treePage/drone-icon.png`"></image>
			<view class="tool-wrap">
				<view class="tool-left">
					<view :class="['tool-item',item.className]" v-for="(item,index) in toolLeftList" :key="index">
						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/l-tree-icon-${index+1}.png`"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				<view class="tool-right">
					<view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index"
						@click="handleToolItem(item)">
						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/r-tree-icon-${index+1}.png`"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tree-footer">
			<view class="footer-item" v-for="(item,index) in footerList" :key="index">
				<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`"></image>
				<view class="name">{{item}}</view>
			</view>
		</view>
	</view>
	<!-- 切换 -->
	<up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel"
		@confirm="handleConfirm"></up-picker>
	<!-- 编辑树名称 -->
	<editNamePopup></editNamePopup>
</template>

<script setup>
	import config from "@/api/config.js"
	import memberLevel from "./components/memberLevel.vue"
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	const name = ref('荔枝')
	const showPicker = ref(false)
	const columns = reactive([
		['荔枝', '香蕉', '苹果']
	]);
	const handleShow = () => {
		showPicker.value = true
	}
	const handleCancel = () => {
		showPicker.value = false
	}
	const handleConfirm = (e) => {
		name.value = e.value[0]
		handleCancel()
	}

	const toolLeftList = [{
			name: "相册",
		},
		{
			name: "日记",
		},
		{
			name: "海报",
			className: 'blue'
		},
		{
			name: "礼物",
			className: 'gift'
		}
	]
	const toolRightList = [{
			name: "好友",
			className: 'friend',
			path: 'rank'
		},
		{
			name: "认养",
		},
		{
			name: "果园",
		},
		{
			name: "动态",
			className: 'dynamic',
			path: 'dynamic'
		}
	]

	const handleToolItem = ({
		path
	}) => {
		uni.navigateTo({
			url: `/pages/tabBar/tree/subPages/${path}`
		});
	}
	const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.base-container {
		@include ossBg("tree-bg.png");
		// background-position: top left;
		padding: 22rpx 0;

		.toogle {
			position: absolute;
			right: 0;
			top: calc(50% - 32rpx);
			font-size: 24rpx;
			color: #fff;
			border-radius: 50rpx 0 0 50rpx;
			background: rgba(0, 0, 0, 0.2);
			padding: 12rpx 20rpx;
			display: flex;

			.icon {
				margin-left: 10rpx;
			}
		}

		.tree-cont {
			width: 100%;
			margin-top: 10rpx;

			.drone-icon {
				width: 376rpx;
				height: 384rpx;
				margin-left: 26rpx;
			}

			.tool-wrap {
				width: 100%;
				padding: 14rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: calc(50% - 350rpx);
				display: flex;
				justify-content: space-between;

				.tool-left,
				.tool-right {
					.tool-item {
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
						text-align: center;
						width: 100rpx;
						margin-bottom: 16rpx;
						text-shadow:
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A;

						&.blue {
							text-shadow:
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8;
						}

						.icon {
							width: 100%;
							height: 82rpx;
							position: relative;
						}

						.name {
							margin-top: -24rpx;
							position: relative;
							z-index: 2;
						}

						&.gift {
							.icon {
								height: 114rpx;
								margin-top: -5rpx;
							}

							.name {
								margin-top: -44rpx;
							}
						}

						&.friend {
							.icon {
								height: 90rpx;
							}

							.name {
								margin-top: -35rpx;
							}
						}

						&.dynamic {
							.icon {
								height: 96rpx;
							}

							.name {
								margin-top: -32rpx;
							}
						}
					}
				}
			}
		}

		.tree-footer {
			position: absolute;
			left: 0;
			bottom: 76rpx;
			width: 100%;
			display: flex;
			justify-content: center;

			.footer-item {
				width: 18%;
				text-align: center;

				.icon {
					width: 96rpx;
					height: 96rpx;
				}

				.name {
					font-size: 24rpx;
					font-weight: 500;
					padding: 2rpx 16rpx;
					background-image: linear-gradient(0deg, #FFFFFF, #FFE079);
					border-radius: 50rpx;
					border: 2rpx solid #fff;
				}
			}

			.footer-item+.footer-item {
				margin-left: 30rpx;
			}
		}
	}
</style>