首页静态页完成

App.vue

@@ -109,8 +109,8 @@
 	}
 	
 	.tabPage{
-		width: 100%;
-		padding-bottom: 172rpx;
+		background: #F7F7F7;
+		padding: 0 24rpx 194rpx;
 		box-sizing: border-box;
 	}
 	
@@ -131,6 +131,11 @@
 	  align-items: center;
 	  justify-content: space-between;
 	}
+	.adffcac{
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	}
 	.adffcacjc{
 	  display: flex;
 	  flex-direction: column;

components/CusTabbar/index.vue

@@ -60,7 +60,6 @@
 		background-position: left bottom;
 		background-repeat: no-repeat;
 		background-size: 100% 100%;
-		background: #FFFFFF;
 		display: flex;
 		position: fixed;
 		left: 0;

pages/home.vue

@@ -1,59 +1,75 @@
 <template>
 	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
-		<!-- <cus-header title='创衡汇教练AI智能体' bgColor="transparent" :showback="false"></cus-header> -->
 		<u-navbar bgColor="transparent">
 			<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/01/ed8615d1-5cf5-4bfd-977a-c654b2eb6560.png" style="width: 200rpx;height: 54rpx;"></image>
+				<image :src="imgBase+'home_logo.png'" style="width: 200rpx;height: 54rpx;margin-left: 12rpx;"></image>
 			</view>
 		</u-navbar>
-		<image class="topbg" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/dbb693be-c302-4848-8e2e-a4eb263aa60c.png"></image>
-		<div class="home_top">
-			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/12c326b4-7328-4282-9175-a87903adbf12.png"></image>
-			<p>Hi，我是AI团队教练助手</p>
-			<p class="tip">可以为你提供全方位多角度的PREILL团队分析</p>
+		<div class="lunbo">
+			<u-swiper
+				:list="bannarList"
+				@change="e => current = e.current"
+				:autoplay="false"
+				height="368rpx"
+			>
+				<template #indicator>
+					<view class="indicator adf">
+						<view class="indicator__dot" v-for="(item, index) in bannarList" :key="index"
+							:class="[index === current && 'indicator__dot--active']">
+						</view>
+					</view>
+				</template>
+			</u-swiper>
 		</div>
-		<div class="order">
-			<div class="pre" @tap="toTurn('/pages/questionnaire')">
-				<div class="top">
-					<div class="left">
-						<p>我的问卷</p>
-						<p>{{wjDwc}}/{{wjYwc}}</p>
-					</div>
-					<div class="right">
-						<p>待完成：<span>{{wjDwc}}</span></p>
-						<p>已完成：<span>{{wjYwc}}</span></p>
-					</div>
+		<div class="preill adfacjb">
+			<div class="preill-box">
+				<div class="preill-box-title">我的PREILL评估</div>
+				<div class="preill-box-num">{{3}}</div>
+				<div class="preill-box-state adfacjb">
+					<div class="preill-box-state-pre adfac grey">已完成：<span>{{2}}</span></div>
+					<div class="preill-box-state-pre adfac yellow">待完成：<span>{{1}}</span></div>
 				</div>
-				<div class="bottom">
-					<div class="jd" :style="{'width':(wjDwc/(wjDwc+wjYwc)*100)+'%'}"></div>
+				<div class="preill-box-progress">
+					<div class="preill-box-progress-current pbp-yellow" :style="{'width':(2/(2+1)*100)+'%'}"></div>
 				</div>
 			</div>
-			<div class="pre" @tap="toTurn('/pages/report')">
-				<div class="top">
-					<div class="left">
-						<p>我的报告</p>
-						<p>{{reportCount}}</p>
-					</div>
-					<div class="right"></div>
+			<div class="preill-box">
+				<div class="preill-box-title">我的PREILL报告</div>
+				<div class="preill-box-num">{{3}}</div>
+				<div class="preill-box-state adfacjb">
+					<div class="preill-box-state-pre adfac green">我收到：<span>{{2}}</span></div>
+					<div class="preill-box-state-pre adfac grey">我发送：<span>{{1}}</span></div>
 				</div>
-				<div class="bottom" style="margin-top: 40rpx;">
-					<div class="jd green" :style="{'width':(reportCount?100:0)+'%'}"></div>
+				<div class="preill-box-progress">
+					<div class="preill-box-progress-current pbp-green" :style="{'width':(2/(2+1)*100)+'%'}"></div>
 				</div>
 			</div>
 		</div>
-		<div class="title">快速访问</div>
-		<div class="menus adfacjb">
-			<div class="m_pre adffcacjc" @tap="toTurn('/pages/dialog')">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/b86ddd7a-6111-48d8-a9db-54a62a3446c4.png"></image>
-				<p>智能问答</p>
+		<div class="boxs adfacjb">
+			<div class="boxs-pre bp1">
+				<div class="boxs-pre-title">AI督导对话</div>
+				<div class="boxs-pre-tip">全球顶尖团队教练</div>
 			</div>
-			<div class="m_pre adffcacjc" @tap="toTurn('/pages/report')">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/35023203-f2d3-4c09-bd13-31047ec68d9e.png"></image>
-				<p>我的报告</p>
+			<div class="boxs-pre bp2">
+				<div class="boxs-pre-title">人工报告解读</div>
+				<div class="boxs-pre-tip">团队诊断和提升</div>
 			</div>
-			<div class="m_pre adffcacjc" @tap="toTurn('/pages/questionnaire')">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/79bf1765-b520-43c7-9ed0-ab1d1a84fe64.png"></image>
-				<p>我的问卷</p>
+		</div>
+		<div class="common">
+			<div class="common-title">常用功能</div>
+			<div class="common-menu adf">
+				<div class="common-menu-pre adffcac">
+					<image :src="imgBase+'home_img_pinggu.png'"></image>
+					<text>PREILL评估</text>
+				</div>
+				<div class="common-menu-pre adffcac">
+					<image :src="imgBase+'home_img_baogao.png'"></image>
+					<text>PREILL报告</text>
+				</div>
+				<div class="common-menu-pre adffcac">
+					<image :src="imgBase+'home_img_guanli.png'"></image>
+					<text>问卷管理</text>
+				</div>
 			</div>
 		</div>
 		<Tabbar :tabbarIndex="0"></Tabbar>
@@ -66,21 +82,20 @@
 		components:{ Tabbar },
 		data(){
 			return {
-				wjDwc:0,
-				wjYwc:0,
-				reportCount:0
+				current:0,
+				bannarList:[
+					this.$imgBase+'home_lb.png',
+					this.$imgBase+'home_lb.png',
+					this.$imgBase+'home_lb.png'
+				]
 			}
 		},
 		onLoad(options) {
 			if(options.q){
 				try{
-					console.log("扫码进入参数：", options.q);
 					const decodedUrl = decodeURIComponent(options.q);
-					console.log("decodedUrl：", decodedUrl);
 					const codeMatch = decodedUrl.match(/type=([^&]+)/);
-					console.log("codeMatch：", codeMatch);
 					const stationCode = codeMatch ? codeMatch[1] : null;
-					console.log("stationCode：", stationCode);
 					if(stationCode) uni.setStorageSync('channelType',stationCode)
 				}catch(e){
 					console.log(e,'e');
@@ -117,12 +132,23 @@
 	}
 </script>
 
-<style scoped lang="less">
-	.tabPage{
+<style scoped lang="scss">
+	::v-deep .indicator__dot{
+		width: 12rpx;
+		height: 12rpx;
+		background: transparent;
+		border: 2rpx solid #FFFFFF;
+		border-radius: 6rpx;
+		margin: 0 8rpx;
+	}
+	::v-deep .indicator__dot--active{
+		width: 12rpx;
+		height: 12rpx;
 		background: #FFFFFF;
-		padding: 0 30rpx 192rpx;
-		box-sizing: border-box;
-		
+	}
+	
+	.tabPage{
+		background-image: linear-gradient(to bottom,#EAE7FC 500rpx,#F6F4FF 744rpx,#F7F7F7 100%);
 		.topbg{
 			width: 100%;
 			height: 720rpx;
@@ -131,155 +157,163 @@
 			left: 0;
 		}
 	
-		.home_top{
+		.lunbo{
 			width: 100%;
-			height: 288rpx;
+			height: 368rpx;
+			margin-top: 30rpx;
 			position: relative;
-			background:url(https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/537756e6-f473-479e-ab0a-1a56cce38cd2.png) no-repeat;
-			background-size: 100% 100%;
-			padding-left: 275rpx;
-			box-sizing: border-box;
-			padding-top: 71rpx;
-			margin-top: 52rpx;
-			&>image{
-				width: 184rpx;
-				height: 312rpx;
-				position: absolute;
-				left: 31rpx;
-				bottom: 19rpx;
-			}
-			&>p{
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 34rpx;
-				color: #252525;
-				line-height: 48rpx;
-				&.tip{
-					font-family: PingFangSC, PingFang SC;
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #6B7280;
-					line-height: 40rpx;
-					margin-top: 11rpx;
-				}
-			}
 		}
 	
-		.order{
-			display: flex;
-			justify-content: space-between;
-			position: relative;
-			margin-top: 20rpx;
+		.preill{
+			margin-top: 30rpx;
 			position: relative;
-			.pre{
-				width: calc(50% - 9rpx);
-				background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);
-				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131,52,120,0.08);
-				border-radius: 12rpx;
-				padding: 40rpx 24rpx;
+			&-box{
+				width: calc(50% - 11rpx);
+				background: #FFFFFF;
+				border-radius: 24rpx;
+				padding: 36rpx 24rpx 26rpx;
 				box-sizing: border-box;
-				.top{
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					.left{
-						p{
-							font-family: PingFangSC, PingFang SC;
-							font-weight: 400;
-							font-size: 28rpx;
-							color: #252525;
-							line-height: 28rpx;
-							&:last-child{
-								font-family: DINAlternate, DINAlternate;
-								font-weight: bold;
-								font-size: 40rpx;
-								color: #333333;
-								line-height: 40rpx;
-								margin-top: 30rpx;
+				&-title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 28rpx;
+					color: #002846;
+					line-height: 28rpx;
+				}
+				&-num{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: 800;
+					font-size: 40rpx;
+					color: #002846;
+					line-height: 40rpx;
+					margin-top: 24rpx;
+				}
+				&-state{
+					margin-top: 30rpx;
+					&-pre{
+						padding-left: 16rpx;
+						position: relative;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #657588;
+						line-height: 20rpx;
+						span{
+							color: #1D2129;
+						}
+						&::before{
+							content: '';
+							width: 10rpx;
+							height: 10rpx;
+							border-radius: 5rpx;
+							position: absolute;
+							left: 0;
+							top: 50%;
+							margin-top: -5rpx;
+						}
+						&.grey{
+							&::before{
+								background: #DDE0E6;
 							}
 						}
-					}
-					.right{
-						p{
-							font-family: PingFangSC, PingFang SC;
-							font-weight: 400;
-							font-size: 24rpx;
-							color: #657588;
-							position: relative;
-							padding-left: 16rpx;
+						&.yellow{
 							&::before{
-								content: '';
-								width: 10rpx;
-								height: 10rpx;
-								background: #FEA400;
-								border-radius: 50%;
-								position: absolute;
-								left: 0;
-								top: 50%;
-								margin-top: -5rpx;
+								background: #FFD750;
 							}
-							&.gr::before{
+						}
+						&.green{
+							&::before{
 								background: #31D1D6;
 							}
-							&:last-child{
-								margin-top: 44rpx;
-								&::before{
-									background: #DDE0E6;
-								}
-							}
-							span{
-								color: #1D2129;
-							}
 						}
 					}
 				}
-				.bottom{
+				&-progress{
+					margin-top: 20rpx;
 					width: 100%;
 					height: 10rpx;
 					background: #DFE5EE;
-					border-radius: 3rpx;
-					margin-top: 30rpx;
+					border-radius: 5rpx;
 					position: relative;
-					.jd{
+					&-current{
 						height: 10rpx;
-						background: #FEA400;
-						border-radius: 3rpx;
+						border-radius: 4rpx;
 						position: absolute;
 						left: 0;
 						top: 0;
-						&.green{
-							background: #31D1D6;
-						}
+					}
+					.pbp-yellow{
+						background: #FFD750;
+					}
+					.pbp-green{
+						background: #31D1D6;
 					}
 				}
 			}
 		}
 	
-		&>.title{
-			font-family: PingFang-SC, PingFang-SC;
-			font-weight: bold;
-			font-size: 34rpx;
-			color: #111111;
-			line-height: 48rpx;
-			margin-top: 44rpx;
-		}
-		
-		.menus{
-			margin-top: 64rpx;
-			.m_pre{
-				width: calc(100% / 3);
-				image{
-					width: 110rpx;
-					height: 110rpx;
+		.boxs{
+			margin-top: 20rpx;
+			&-pre{
+				width: calc(50% -11rpx);
+				padding: 36rpx 124rpx 36rpx 24rpx;
+				box-sizing: border-box;
+				height: 184rpx;
+				&-title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					line-height: 45rpx;
 				}
-				p{
+				&-tip{
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
-					font-size: 26rpx;
-					color: #252525;
-					line-height: 37rpx;
-					text-align: center;
-					margin-top: 24rpx;
+					font-size: 24rpx;
+					color: #657588;
+					line-height: 33rpx;
+					margin-top: 20rpx;
+				}
+				&.bp1{
+					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/home_box_bg1.png') no-repeat;
+					background-size: 100% 100%;
+				}
+				&.bp2{
+					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/home_box_bg2.png') no-repeat;
+					background-size: 100% 100%;
+				}
+			}
+		}
+	
+		.common{
+			margin-top: 20rpx;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 40rpx 24rpx 48rpx;
+			&-title{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 34rpx;
+				color: #002846;
+				line-height: 48rpx;
+			}
+			&-menu{
+				margin-top: 45rpx;
+				&-pre{
+					width: calc(100% / 3);
+					image{
+						width: 62rpx;
+						height: 62rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #193D59;
+						line-height: 26rpx;
+						text-align: center;
+						margin-top: 27rpx;
+					}
 				}
 			}
 		}