feat：添加守护页面

pages/tabBar/shopping/shopping.vue

@@ -79,7 +79,10 @@
 			display: flex;
 			align-items: center;
 			padding: 16rpx 24rpx;
-			box-sizing: border-box;
+			box-sizing: border-box;
+			.manage{
+				margin-left: 20rpx;
+			}
 		}
 		.shop-list {
 			height: calc(100vh - 100rpx - 120rpx);

pages/tabBar/tree/tree.vue

@@ -1,9 +1,88 @@
 <template>
-	<view>tree</view>
+	<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>
+<script setup>
+	import config from "@/api/config.js"
+	
+	const footerList = ["每日阳光","送ta祝福","分享转发","水果订购"]
 </script>
 
-<style>
+<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>

static/style/common.scss

@@ -14,11 +14,13 @@
 }
 /* #endif */
 
+
+//字体
 @font-face {
   font-family: "PangMenZhengDao";
   src: url("https://birdseye-img.sysuimars.com/youwei-uniapp/font/PangMenZhengDao.TTF");
-}
-
+}
+
 .ellipsis-l2 {
 	white-space: pre-line;
 	overflow: hidden;

static/style/mixin.scss

@@ -0,0 +1,7 @@
+//变量
+@mixin ossBg($name) {
+    background-image: url('https://birdseye-img.sysuimars.com/youwei-uniapp/img/'+$name);
+    background-size: 100% 100%;
+	background-repeat: no-repeat;
+	background-position: center center;
+}