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

<template>
	<view class="base-container">
		<view class="tree-head">
			<view class="user-info">
				<up-image class="avatar" :fade="false" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="96rpx" height="96rpx" shape="circle"></up-image>
				<view class="level-wrap">
					<text class="name">V1 青铜守护</text>
				</view>
			</view>
			<view class="toogle">切换</view>
		</view>
		<view class="tree-cont">
			
		</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>
</template>

<script setup>
	import config from "@/api/config.js"
	
	const footerList = ["每日阳光","送ta祝福","分享转发","水果订购"]
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	.base-container {
		@include ossBg("tree-bg.png");
		padding: 22rpx 0;
		.tree-head{
			display: flex;
			border-radius: 60rpx 0 0 60rpx;
			padding: 16rpx 20rpx;
			position: relative;
			background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.4), transparent);
			.user-info{
				display: flex;
				.avatar{
					border: 2rpx solid #fff;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.level-wrap{
					.name{
						// color: #fff;
						font-family: 'PangMenZhengDao';
					}
				}
			}
			.toogle{
				position: absolute;
				right: 0;
			}
		}
		.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>