样式调整

pagesHome/components/report/generateList.vue

@@ -7,34 +7,34 @@
 						<view class="gbox-item-top-type">{{typeCfg[item.type]||'个人版'}}</view>
 						<view class="gbox-item-top-title">{{item.reportName||''}}</view>
 					</view>
-					<view class="gbox-item-p adf">
-						<view class="gbox-item-p-left">团队名称：</view>
-						<view class="gbox-item-p-right">{{item.teamName||''}}</view>
+					<view class="gbox-item-ps">
+						<view class="gbox-item-p adfac">
+							<view class="gbox-item-p-left">团队名称：</view>
+							<view class="gbox-item-p-right">{{item.teamName||''}}</view>
+						</view>
+						<view class="gbox-item-p adf">
+							<view class="gbox-item-p-left">报告状态：</view>
+							<view class="gbox-item-p-right" :style="{'color':stateColor[item.state]}">{{stateDict[item.state]}}</view>
+						</view>
+						<view class="gbox-item-p adf">
+							<view class="gbox-item-p-left">创建时间：</view>
+							<view class="gbox-item-p-right">{{item.createDate||''}}</view>
+						</view>
+						<image class="gbox-item-ask" :src="imgBase+'report_ask.png'" @click="askReport(item)" v-if="item.state==1&&item.fileUrl"></image>
 					</view>
-					<view class="gbox-item-p adf">
-						<view class="gbox-item-p-left">报告状态：</view>
-						<view class="gbox-item-p-right" :style="{'color':stateColor[item.state]}">{{stateDict[item.state]}}</view>
-					</view>
-					<view class="gbox-item-p adf">
-						<view class="gbox-item-p-left">创建时间：</view>
-						<view class="gbox-item-p-right">{{item.createDate||''}}</view>
-					</view>
-					<image class="gbox-item-ask" :src="imgBase+'report_ask.png'" @click="askReport(item)" v-if="item.state==1&&item.fileUrl"></image>
 					<view class="gbox-item-bottom adfacjb">
-						<view class="gbox-item-bottom-left adfac"></view>
-						<div class="gbox-item-bottom-rightbox adfac" v-if="item.type==1">
-							<!-- <view class="gbox-item-bottom-right" @click="forwardReport(item)" v-if="item.state==1&&item.fileUrl">发送邮件</view> -->
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reviewPdf(item)" v-if="item.state==1">预览报告</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reviewReport(item)" v-if="item.state==1&&item.fileUrl">查看报告</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reSendReport(item)" v-if="item.state==-1">重新生成</view>
-						</div>
-						<div class="gbox-item-bottom-rightbox adfac" v-else-if="item.type==2">
+						<view class="gbox-item-bottom-rightbox adfac" v-if="item.type==1">
+							<view class="gbox-item-bottom-right" @click="reviewPdf(item)" v-if="item.state==1">预览报告</view>
+							<view class="gbox-item-bottom-right" @click="reviewReport(item)" v-if="item.state==1&&item.fileUrl">查看报告</view>
+							<view class="gbox-item-bottom-right" @click="reSendReport(item)" v-if="item.state==-1">重新生成</view>
+						</view>
+						<view class="gbox-item-bottom-rightbox adfac" v-else-if="item.type==2">
 							<view class="gbox-item-bottom-right" @click="forwardReport(item)" v-if="item.state==1&&item.fileUrl">发送邮件</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reviewPdf(item)" v-if="item.state==1">预览报告</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reviewReport(item)" v-if="item.state==1&&item.fileUrl">查看报告</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="sendReport(item)" v-if="item.state!=-1">发送报告</view>
-							<view class="gbox-item-bottom-right" style="margin-left: 27rpx;" @click="reSendReport(item)" v-if="item.state==-1">重新生成</view>
-						</div>
+							<view class="gbox-item-bottom-right" @click="reviewPdf(item)" v-if="item.state==1">预览报告</view>
+							<view class="gbox-item-bottom-right" @click="reviewReport(item)" v-if="item.state==1&&item.fileUrl">查看报告</view>
+							<view class="gbox-item-bottom-right" @click="sendReport(item)" v-if="item.state!=-1">发送报告</view>
+							<view class="gbox-item-bottom-right" @click="reSendReport(item)" v-if="item.state==-1">重新生成</view>
+						</view>
 					</view>
 				</view>
 			</u-list-item>
@@ -270,8 +270,7 @@
 			margin-top: 20rpx;
 			background: #FFFFFF;
 			border-radius: 24rpx;
-			padding: 40rpx 24rpx 10rpx;
-			position: relative;
+			padding: 40rpx 20rpx 20rpx;
 			&-top{
 				&-type{
 					width: 98rpx;
@@ -297,8 +296,19 @@
 				}
 			}
 			
+			&-ps{
+				margin-top: 20rpx;
+				background: #F5F8FA;
+				border-radius: 5px;
+				padding: 20rpx 20rpx 30rpx;
+				position: relative;
+			}
+			
 			&-p{
 				margin-top: 32rpx;
+				&:first-child{
+					margin-top: 0;
+				}
 				&>view{
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
@@ -345,14 +355,18 @@
 				width: 64rpx;
 				height: 64rpx;
 				position: absolute;
-				right: 24rpx;
-				top: 180rpx;
+				right: 20rpx;
+				bottom: 42rpx;
 			}
 			
 			&-bottom{
-				margin-top: 30rpx;
-				border-top: 1rpx solid #EFEFEF;
-				padding-top: 18rpx;
+				margin-top: 20rpx;
+				overflow: hidden;
+				&-rightbox{
+					flex: 1;
+					margin-left: -35rpx;
+					justify-content: flex-end;
+				}
 				&-left{
 					&>view{
 						font-family: PingFangSC, PingFang SC;
@@ -363,15 +377,17 @@
 					}
 				}
 				&-right{
-					padding: 17rpx 20rpx;
+					width: calc(25% - 35rpx);
+					padding: 15rpx 20rpx;
+					box-sizing: border-box;
 					background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
-					border-radius: 30rpx;
+					border-radius: 20rpx;
 					font-family: PingFang-SC, PingFang-SC;
 					font-weight: bold;
 					font-size: 24rpx;
 					color: #FFFFFF;
 					line-height: 26rpx;
-					letter-spacing: 2rpx;
+					margin-left: 35rpx;
 				}
 			}
 		}

pagesHome/components/report/receiveList.vue

@@ -1,28 +1,31 @@
 <template>
-	<view class="rbox">
+	<view class="gbox">
 		<u-list @scrolltolower="scrolltolower" height="100%">
 			<u-list-item v-for="(item, index) in list" :key="item.id">
-				<view class="rbox-item">
-					<view class="rbox-item-top adfac">
-						<view class="rbox-item-top-type">{{typeCfg[item.type]||'个人版'}}</view>
-						<view class="rbox-item-top-title">{{item.reportName||''}}</view>
+				<view class="gbox-item">
+					<view class="gbox-item-top adfac">
+						<view class="gbox-item-top-type">{{typeCfg[item.type]||'个人版'}}</view>
+						<view class="gbox-item-top-title">{{item.reportName||''}}</view>
 					</view>
-					<view class="rbox-item-p adf">
-						<view class="rbox-item-p-left">团队名称：</view>
-						<view class="rbox-item-p-right">{{item.teamName||''}}</view>
+					<view class="gbox-item-ps">
+						<view class="gbox-item-p adf">
+							<view class="gbox-item-p-left">团队名称：</view>
+							<view class="gbox-item-p-right">{{item.teamName||''}}</view>
+						</view>
+						<view class="gbox-item-p adf">
+							<view class="gbox-item-p-left">发送教练：</view>
+							<view class="gbox-item-p-right">{{item.coachName||''}}</view>
+						</view>
+						<view class="gbox-item-p adf">
+							<view class="gbox-item-p-left">报告时间：</view>
+							<view class="gbox-item-p-right">{{item.createDate||''}}</view>
+						</view>
+						<image class="gbox-item-ask" :src="imgBase+'report_ask.png'" @click="askReport(item)"></image>
 					</view>
-					<view class="rbox-item-p adf">
-						<view class="rbox-item-p-left">发送教练：</view>
-						<view class="rbox-item-p-right">{{item.coachName||''}}</view>
-					</view>
-					<view class="rbox-item-p adf">
-						<view class="rbox-item-p-left">报告时间：</view>
-						<view class="rbox-item-p-right">{{item.createDate||''}}</view>
-					</view>
-					<image class="rbox-item-ask" :src="imgBase+'report_ask.png'" @click="askReport(item)"></image>
-					<view class="rbox-item-bottom adfacjb">
-						<view class="gbox-item-bottom-left adfac"></view>
-						<view class="rbox-item-bottom-right" @click="reviewReport(item)">查看报告</view>
+					<view class="gbox-item-bottom adfacjb">
+						<view class="gbox-item-bottom-rightbox adfac">
+							<view class="gbox-item-bottom-right" @click="reviewReport(item)">查看报告</view>
+						</view>
 					</view>
 				</view>
 			</u-list-item>
@@ -119,17 +122,19 @@
 </script>
 
 <style scoped lang="scss">
-	.rbox{
+	.gbox{
 		height: 100%;
 		&-item{
 			margin-top: 20rpx;
 			background: #FFFFFF;
 			border-radius: 24rpx;
-			padding: 40rpx 24rpx 10rpx;
-			position: relative;
+			padding: 40rpx 20rpx 20rpx;
 			&-top{
 				&-type{
+					width: 98rpx;
+					height: 36rpx;
 					padding: 2rpx 13rpx;
+					box-sizing: border-box;
 					background: #FFF7DC;
 					border-radius: 6rpx;
 					font-family: PingFangSC, PingFang SC;
@@ -139,6 +144,7 @@
 					line-height: 33rpx;
 				}
 				&-title{
+					width: calc(100% - 98rpx);
 					font-family: PingFang-SC, PingFang-SC;
 					font-weight: bold;
 					font-size: 32rpx;
@@ -147,8 +153,20 @@
 					text-indent: 17rpx;
 				}
 			}
+			
+			&-ps{
+				margin-top: 20rpx;
+				background: #F5F8FA;
+				border-radius: 5px;
+				padding: 20rpx 20rpx 30rpx;
+				position: relative;
+			}
+			
 			&-p{
-				margin-top: 36rpx;
+				margin-top: 32rpx;
+				&:first-child{
+					margin-top: 0;
+				}
 				&>view{
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
@@ -162,18 +180,51 @@
 				&-right{
 					width: calc(100% - 134rpx);
 				}
+				&-progress{
+					width: calc(100% - 134rpx);
+					&-l{
+						width: 410rpx;
+						height: 12rpx;
+						background: #F0F2F8;
+						border-radius: 6rpx;
+						position: relative;
+						&-current{
+							height: 12rpx;
+							background: #FFDF73;
+							border-radius: 6rpx;
+							position: absolute;
+							left: 0;
+							top: 0;
+						}
+					}
+					&-r{
+						width: calc(100% - 410rpx);
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #002846;
+						line-height: 24rpx;
+						text-align: right;
+					}
+				}
 			}
+			
 			&-ask{
 				width: 64rpx;
 				height: 64rpx;
 				position: absolute;
-				right: 24rpx;
-				top: 180rpx;
+				right: 20rpx;
+				bottom: 42rpx;
 			}
+			
 			&-bottom{
-				margin-top: 30rpx;
-				border-top: 1rpx solid #EFEFEF;
-				padding-top: 18rpx;
+				margin-top: 20rpx;
+				overflow: hidden;
+				&-rightbox{
+					flex: 1;
+					margin-left: -35rpx;
+					justify-content: flex-end;
+				}
 				&-left{
 					&>view{
 						font-family: PingFangSC, PingFang SC;
@@ -184,32 +235,17 @@
 					}
 				}
 				&-right{
-					padding: 17rpx 20rpx;
+					width: calc(25% - 35rpx);
+					padding: 15rpx 20rpx;
+					box-sizing: border-box;
 					background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
-					border-radius: 30rpx;
+					border-radius: 20rpx;
 					font-family: PingFang-SC, PingFang-SC;
 					font-weight: bold;
 					font-size: 24rpx;
 					color: #FFFFFF;
 					line-height: 26rpx;
-					letter-spacing: 2rpx;
-				}
-			}
-			&-btn{
-				padding: 17rpx 20rpx;
-				background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
-				border-radius: 30rpx;
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 24rpx;
-				color: #FFFFFF;
-				line-height: 26rpx;
-				letter-spacing: 2rpx;
-				position: absolute;
-				bottom: 40rpx;
-				right: 24rpx;
-				&.ask{
-					right: 180rpx;
+					margin-left: 35rpx;
 				}
 			}
 		}

pagesHome/components/report/sendList.vue

@@ -5,7 +5,6 @@
 				<view class="sbox-item">
 					<view class="sbox-item-top adfacjb">
 						<view class="sbox-item-top-left adfac">
-							<image :src="imgBase+'avatar.png'"></image>
 							<text>{{item.memberName||''}}</text>
 							<view class="type">{{item.categoryName}}</view>
 						</view>
@@ -78,7 +77,6 @@
 						font-size: 32rpx;
 						color: #002846;
 						line-height: 32rpx;
-						margin-left: 20rpx;
 					}
 					.type{
 						padding: 5rpx 16rpx;
@@ -90,12 +88,14 @@
 						font-size: 22rpx;
 						color: #BA9B31;
 						line-height: 30rpx;
+						margin-top: 2rpx;
 					}
 				}
 				&-right{
 					image{
 						width: 26rpx;
 						height: 26rpx;
+						margin-top: 2rpx;
 					}
 					text{
 						font-family: PingFangSC, PingFang SC;