我的静态页完成

pages/my.vue

@@ -1,47 +1,51 @@
 <template>
 	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
 		<cus-header title='我的' bgColor="transparent" :showback="false"></cus-header>
-		<div class="info">
-			<div class="i_top adfac">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/0bdaa978-db1a-4edb-8a41-fc45b096380f.png"></image>
-				<div class="it_texts">
-					<p>{{userName||''}}</p>
-					<p>{{mobile||''}}</p>
-				</div>
-			</div>
-			<div class="i_tips">
-				<p>所属公司：{{enterpriseName||''}}</p>
-				<p>所属团队：{{teamName||''}}</p>
-			</div>
-		</div>
+		<image class="topbg" :src="imgBase+'my_topbg.png'" mode="widthFix"></image>
 		<div class="box">
-			<div class="b_pre adfacjb">
-				<div class="bp_l adfac">
-					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/ecb80887-6d86-420c-b797-7f12c5916871.png"></image>
-					<text>版本</text>
+			<div class="top adfacjb">
+				<div class="top-left adfac">
+					<div class="top-left-img">
+						<image :src="userInfo.avatar"></image>
+					</div>
+					<div class="top-left-info">
+						<div class="top-left-info-name">{{userInfo.name||'未登录'}}</div>
+						<div class="top-left-info-tip">点击立即登录</div>
+					</div>
+				</div>
+				<div class="top-right">
+					<image :src="imgBase+'my_set.png'"></image>
 				</div>
-				<div class="bp_r">1.0.0</div>
 			</div>
-			<div class="b_pre adfacjb" @tap="exitLogin" v-if="logined">
-				<div class="bp_l adfac">
-					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/4d10c9ef-8a13-4502-adfd-d388628446ab.png"></image>
-					<text>退出登录</text>
+			<div class="num adf">
+				<div class="num-pre adffcac">
+					<div class="num-pre-sz">{{0}}</div>
+					<div class="num-pre-text">基础版次数</div>
 				</div>
-				<div class="bp_r">
-					<u-icon name="arrow-right" color="#D3D2D2" size="32"></u-icon>
+				<div class="num-pre adffcac">
+					<div class="num-pre-sz">{{0}}</div>
+					<div class="num-pre-text">专业版次数</div>
 				</div>
-			</div>
-			<div class="b_pre adfacjb" @tap="toLogin" v-else>
-				<div class="bp_l adfac">
-					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/4d10c9ef-8a13-4502-adfd-d388628446ab.png"></image>
-					<text>立即登录</text>
+				<div class="num-pre adffcac">
+					<div class="num-pre-sz">{{0}}</div>
+					<div class="num-pre-text">我的团队</div>
 				</div>
-				<div class="bp_r">
-					<u-icon name="arrow-right" color="#D3D2D2" size="32"></u-icon>
+			</div>
+			<div class="preill adfacjb">
+				<div class="preill-left">{{'尚未激活问卷，无法开始PREILL评估'}}</div>
+				<div class="preill-right">{{'立即激活'}}</div>
+			</div>
+			<div class="menu">
+				<div class="menu-item adfacjb" v-for="(item,index) in menuList" :key="index" @click="handleTurn(item.path)">
+					<div class="menu-item-left adfac">
+						<image :src="item.img"></image>
+						<text>{{item.title}}</text>
+					</div>
+					<image class="menu-item-right" :src="imgBase+'my_arrow_right.png'"></image>
 				</div>
 			</div>
 		</div>
-		<Tabbar :tabbarIndex="1"></Tabbar>
+		<Tabbar :tabbarIndex="2"></Tabbar>
 	</view>
 </template>
 
@@ -51,115 +55,172 @@
 		components:{ Tabbar },
 		data(){
 			return {
-				userName:'',
-				mobile:'',
-				enterpriseName:'',
-				teamName:'',
-				logined:false
+				userInfo:{
+					avatar:this.$imgBase+'my_avatar.png',
+					name:''
+				},
+				menuList:[
+					{
+						img:this.$imgBase+'my_order.png',
+						title:'我的订单',
+						path:''
+					},
+					{
+						img:this.$imgBase+'my_record.png',
+						title:'推荐记录',
+						path:''
+					},
+					{
+						img:this.$imgBase+'my_program.png',
+						title:'我的项目',
+						path:''
+					},
+					{
+						img:this.$imgBase+'my_teamusers.png',
+						title:'团队成员',
+						path:''
+					},
+					{
+						img:this.$imgBase+'my_friends.png',
+						title:'邀请好友',
+						path:''
+					}
+				]
 			}
 		},
 		onLoad() {
-			if(uni.getStorageSync('userInfo')){
-				this.logined = true;
-				this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName||'';
-				this.mobile = JSON.parse(uni.getStorageSync('userInfo')).mobile||'';
-				this.enterpriseName = JSON.parse(uni.getStorageSync('userInfo')).enterpriseName||'';
-				this.teamName = JSON.parse(uni.getStorageSync('userInfo')).teamName||'';
-				if(this.mobile) this.mobile = this.mobile.replace(this.mobile.substr(3,4),' **** ')
-			}
+			
 		},
 		methods:{
-			exitLogin(){
-				uni.clearStorageSync();
-				uni.reLaunch({
-					url:'/pages/login'
-				})
-			},
-			toLogin(){
-				uni.reLaunch({
-					url:'/pages/login'
-				})
+			handleTurn(url){
+				if(!url) return
 			}
 		}
 	}
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 	.tabPage{
-		background: linear-gradient( 270deg, #EEEFF8 0%, #F6ECF4 100%, #F6ECF4 100%);
-		padding: 0 0 172rpx;
-		box-sizing: border-box;
-		display: flex;
-		flex-direction: column;
-		.info{
-			padding: 54rpx 40rpx;
-			.i_top{
-				image{
-					width: 188rpx;
-					height: 188rpx;
-				}
-				.it_texts{
-					padding-left: 30rpx;
-					p{
-						font-family: PingFang-SC, PingFang-SC;
-						font-weight: bold;
-						font-size: 40rpx;
-						color: #252525;
-						line-height: 40rpx;
-						&:last-child{
+		.topbg{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+		
+		.box{
+			position: relative;
+			padding-top: 40rpx;
+			
+			.top{
+				padding: 0 22rpx 0 16rpx;
+				&-left{
+					&-img{
+						image{
+							width: 128rpx;
+							height: 128rpx;
+						}
+					}
+					&-info{
+						margin-left: 20rpx;
+						&-name{
 							font-family: PingFang-SC, PingFang-SC;
 							font-weight: bold;
-							font-size: 32rpx;
-							color: #646464;
-							line-height: 32rpx;
-							margin-top: 36rpx;
+							font-size: 40rpx;
+							color: #002846;
+							line-height: 40rpx;
+						}
+						&-tip{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 26rpx;
+							color: #86909C;
+							line-height: 26rpx;
+							margin-top: 31rpx;
 						}
 					}
 				}
+				&-right{
+					image{
+						width: 42rpx;
+						height: 42rpx;
+					}
+				}
 			}
-			.i_tips{
+		
+			.num{
 				margin-top: 48rpx;
-				overflow: hidden;
-				p{
-					margin-top: 40rpx;
+				&-pre{
+					width: calc(100% / 3);
+					&-sz{
+						font-family: D-DINCondensed, D-DINCondensed;
+						font-weight: bold;
+						font-size: 48rpx;
+						color: #002846;
+						line-height: 48rpx;
+					}
+					&-text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #86909C;
+						line-height: 26rpx;
+						text-align: center;
+						margin-top: 24rpx;
+					}
+				}
+			}
+		
+			.preill{
+				margin-top: 49rpx;
+				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/my_pinggu_bg.png') no-repeat;
+				background-size: 100% 100%;
+				padding: 34rpx 24rpx;
+				&-left{
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
-					font-size: 28rpx;
-					color: #6B7280;
-					line-height: 28rpx;
+					font-size: 24rpx;
+					color: #B0B7C7;
+					line-height: 24rpx;
+					padding-top: 42rpx;
+				}
+				&-right{
+					padding: 18rpx 26rpx;
+					background: linear-gradient( 270deg, #F0E2C7 0%, #E3CD9E 100%);
+					border-radius: 32rpx;
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #795021;
+					line-height: 26rpx;
 				}
 			}
-		}
-		.box{
-			padding: 30rpx;
-			background: #FFFFFF;
-			flex: 1;
-			.b_pre{
+		
+			.menu{
+				margin-top: 30rpx;
 				background: #FFFFFF;
-				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
-				border-radius: 16rpx 16rpx 0rpx 0rpx;
-				padding: 39rpx 0;
-				.bp_l{
-					image{
+				border-radius: 16rpx;
+				&-item{
+					padding: 35rpx 30rpx;
+					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
+					&-left{
+						image{
+							width: 40rpx;
+							height: 40rpx;
+						}
+						text{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 30rpx;
+							color: #002846;
+							line-height: 32rpx;
+							margin-left: 21rpx;
+						}
+					}
+					&-right{
 						width: 36rpx;
 						height: 36rpx;
 					}
-					text{
-						font-family: PingFangSC, PingFang SC;
-						font-weight: 400;
-						font-size: 30rpx;
-						color: #111111;
-						line-height: 32rpx;
-						margin-left: 30rpx;
-					}
-				}
-				.bp_r{
-					font-family: PingFang-SC, PingFang-SC;
-					font-weight: bold;
-					font-size: 30rpx;
-					color: #111111;
-					line-height: 32rpx;
-					text-align: right;
 				}
 			}
 		}