1.myteam

operatingCompany/pages/team/myTeam.vue

@@ -10,12 +10,30 @@
 
 		<!-- 团队数量 -->
 		<view class="teamTop">
-				<image class="iconTeam" src="../../static/img/icon_team.png" mode=""></image>
-				<view class="teamCount">我的团队：<text style="color: #FF4F00;">3</text>人</view> 
-		
-		</view>
-		
-		
+			<image class="iconTeam" src="../../static/img/icon_team.png" mode=""></image>
+			<view class="teamCount">我的团队：<text style="color: #FF4F00;">3</text>人</view>
+		</view>
+
+		<!-- 内容 -->
+		<view class="teamContent">
+			<view v-for="(item,index) in data" :key="index">
+				<view class="team">
+					<!-- 第一行 -->
+					<view class="customer">
+						<view class="name">姓名 手机号</view>
+						<view class="shopCount" style="color: #FF4F00;">管理门店：3
+							<image src="../../static/img/icon_arrow_go.png" mode=""
+								style="width: 12rpx; height: 22rpx; margin-left: 5rpx;"></image>
+						</view>
+					</view>
+
+					<!-- 报告数量 -->
+					<view class="informCount">已提交报告：<text style="color: #FF4F00;">3</text>条</view>
+				</view>
+			</view>
+
+		</view>
+
 	</view>
 </template>
 
@@ -23,7 +41,8 @@
 	export default {
 		data() {
 			return {
-				searchValue:'',
+				data: [1, 2, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
+				searchValue: '',
 			}
 		},
 		onLoad() {
@@ -44,15 +63,18 @@
 
 	.searchBoxBg {
 		position: fixed;
-		width: 100%;
-		background-color: #FFFFFF;
 		left: 0;
 		top: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		z-index: 99;
 	}
+
 	/* #ifdef H5 */
-		.searchBoxBg{
-			top: 44px;
-		}
+	.searchBoxBg {
+		top: 44px;
+	}
+
 	/* #endif */
 	.searchBox {
 		display: flex;
@@ -63,7 +85,7 @@
 	}
 
 	.searchImg {
-		margin-top:20rpx;
+		margin-top: 20rpx;
 		margin-left: 20rpx;
 		width: 32rpx;
 		height: 32rpx;
@@ -73,35 +95,78 @@
 		height: 72rpx;
 		font-size: 28rpx;
 		padding-left: 16rpx;
-	
+		width: 80%;
 	}
 
-	.teamTop {
-		height: 80rpx;
+	.teamTop {
+		background-color: #F4F5F7;
+		height: 80rpx;
 		position: fixed;
 		left: 0;
-		top: 120rpx;
+		top: 120rpx;
 		display: flex;
 		align-items: center;
-		padding-left: 24rpx;
-	}
-	.teamTopBox{
-		display: flex;
+		padding-left: 24rpx;
+		z-index: 99;
+		width: 100%;
 	}
+
 	/* #ifdef H5 */
-		.teamTop{
-			top: calc(120rpx + 44px);
-		}
-	/* #endif */
-	.iconTeam{
-		width: 32rpx;
-		height: 32rpx;
-	}
-	.teamCount{
-		font-size: 30rpx;
-		font-weight: bold;
+	.teamTop {
+		top: calc(120rpx + 44px);
+	}
+
+	/* #endif */
+	.iconTeam {
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.teamCount {
+		font-size: 30rpx;
+		font-weight: bold;
 		color: #3C3C3C;
 		line-height: 32rpx;
-		padding-left: 8rpx;
-	} 
+		padding-left: 8rpx;
+
+	}
+
+	.teamContent {
+		background-color: #F4F5F7;
+		position: relative;
+		top: 200rpx;
+		left: 0rpx;
+		right: 0rpx;
+		padding: 0rpx 24rpx;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.team {
+		background-color: #FFFFFF;
+		margin: 10rpx 0rpx;
+		border-radius: 10rpx;
+	}
+
+	.customer {
+		padding: 30rpx 20rpx 16rpx 20rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.name {
+		font-size: 28rpx;
+		margin-right: 10rpx;
+	}
+
+	.shopCount {
+		font-size: 28rpx;
+
+	}
+
+	.informCount {
+		padding: 0rpx 20rpx 30rpx 20rpx;
+		color: #666666;
+		font-size: 24rpx;
+	}
 </style>