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 class="progress-wrap">
						<view class="progress-value">
							<view class="total"></view>
						</view>
						<view class="progress-score">
							<text class="cur-val">80</text>/100分
						</view>
					</view>
					<view class="level-desc">
						再累计能量<text class="level-text"> 20分 </text>即可升级到 青铜等级
					</view>
				</view>
			</view>
			<view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff" size="12"></up-icon></view>
		</view>
		<view class="tree-cont">
			<view class="tree-info">
				<view class="info-text">
					<view>汕尾妙荔</view>
					<text>现代农业产业园</text>
				</view>
				<view class="info-text">
					<view>16年老树</view>
					<text class="text">妃子笑荔枝</text>
				</view>
				<view class="info-text">
					<view>成熟期</view>
					<text class="text">温度适宜-梢期杀虫</text>
				</view>
			</view>
			<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">
						<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>
</template>

<script setup>
	import config from "@/api/config.js"
	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'
		},
		{
			name: "认养",
		},
		{
			name: "果园",
		},
		{
			name: "动态",
			className: 'dynamic'
		}
	]
	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;

		.tree-head {
			display: flex;
			border-radius: 70rpx 0 0 70rpx;
			padding: 16rpx 20rpx;
			margin-left: 24rpx;
			position: relative;
			width: calc(100% - 24rpx);
			box-sizing: border-box;
			background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);

			.user-info {
				width: 100%;
				display: flex;

				.avatar {
					border: 2rpx solid #fff;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.level-wrap {
					line-height: 32rpx;
					width: 54%;
					.name {
						// color: #fff;
						font-family: 'PangMenZhengDao';
					}
					.progress-wrap{
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.8);
						display: flex;
						align-items: center;
						justify-content: space-between;
						.progress-value{
							width: calc(100% - 120rpx);
							height: 16rpx;
							background: #E7E7E7;
							border-radius: 40rpx;
							border: 2rpx solid #fff;
							.total{
								width: 80%;
								height: 100%;
								border-radius: 20rpx;
								background-image: linear-gradient(120deg,#FDE492,#FB9C03);
							}
						}
						.cur-val{
							font-size: 26rpx;
							font-weight: 500;
							color: #fff;
						}
					}
					.level-desc{
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.84);
						.level-text{
							color: #fff;
						}
					}
				}
			}

			.toogle {
				position: absolute;
				right: 0;
				top: calc(50% - 36rpx);
				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;

			.tree-info {
				width: 95%;
				height: 160rpx;
				box-sizing: border-box;
				padding: 0 50rpx 20rpx;
				@include ossBg("treePage/tree-info-bg.png");
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 26rpx;
				font-weight: 500;
				margin: auto;

				.info-text {
					text-align: center;
					line-height: 32rpx;
					position: relative;

					.text {
						font-size: 20rpx;
					}
				}

				.info-text+.info-text {
					&::before {
						content: '';
						position: absolute;
						left: -26rpx;
						top: 14rpx;
						width: 1rpx;
						height: 38rpx;
						background: rgba(0, 0, 0, 0.26);
					}
				}
			}

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