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

<template>
	<view class="sub-base-container">
		<member-level></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 toolList" :key="index">
						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/${item.icon}.png`"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tree-footer">
			<view class="blessing" @click="handleBlessing">
				<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-2.png`"></image>
				<text>送ta祝福</text>
			</view>
			<view class="button">去看看我的树</view>
		</view>
	</view>
	<!-- 编辑树名称 -->
	<editNamePopup></editNamePopup>
	<!-- 祝福弹窗 -->
	<blessingsPopup :show="showBlessingsPopup"></blessingsPopup>
</template>

<script setup>
	import config from "@/api/config.js"
	import memberLevel from "../components/memberLevel.vue"
	import blessingsPopup from "../components/blessingsPopup.vue"
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	
	const showBlessingsPopup = ref(false)
	const handleBlessing = () => {
		showBlessingsPopup.value = !showBlessingsPopup.value
	}

	const toolList = [{
			name: "相册",
			icon:'l-tree-icon-1'
		},
		{
			name: "日记",
			icon:'l-tree-icon-2'
		},
		{
			name: "果园",
			icon:'r-tree-icon-3'
		}
	]

	const handleToolItem = ({
		path
	}) => {
		uni.navigateTo({
			url: `/pages/tabBar/tree/subPages/${path}`
		});
	}
</script>

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

	.sub-base-container {
		@include ossBg("tree-bg.png");
		padding: 22rpx 0;

		.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-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;


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

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

		.tree-footer {
			position: absolute;
			left: 0;
			bottom: 130rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			.blessing{
				display: flex;
				align-items: center;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 50rpx;
				padding: 6rpx 60rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.6);
				.icon{
					width: 86rpx;
					height: 86rpx;
					margin-right: 10rpx;
				}
			}

			.button{
				padding: 26rpx 80rpx;
				border-radius: 50rpx;
				border: 2rpx solid #fff;
				background-image: linear-gradient(120deg,#FFD887,#ED9E1E);
				margin-top: 20rpx;
			}
		}
	}
</style>