前端合同管理

unimall-app/pageB/contract/look.vue

@@ -1,60 +1,87 @@
 <template>
 	<view class="container">
-		<view style='background:#fff;' class='flex justify-between padding-xl' @click='unfold1()'>
+		<view style='background:#E6F3F9;border-bottom:1px solid #ccc;' class='flex justify-between padding-xl' @click='unfold1()'>
 			<view style='width:92%;margin-top: -4px;text-align:center;' class='flex justify-between'>
-				<view>
+				<view style='text-align:center;'>
 					结算总价
 					<view>({{contractInfo.sumTotal}}元)</view>
 				</view>
-				<view>
+				<view style='text-align:center;'>
 					结算吨数<view>({{contractInfo.sumNet}}吨)</view>
 				</view>
-				<view>
+				<view style='text-align:center;'>
 					已收<view>({{contractInfo.payMoney}}元)</view>
 				</view>
-				<view>
+				<view style='text-align:center;'>
 					未收<view>({{contractInfo.notPayMoney}}元)</view>
 				</view>
 			</view>
 			<view :class="isOpen1 ? 'cuIcon-unfold' : 'cuIcon-right'" ></view>
 		</view>
 		<view :class="isOpen1 ? 'content-open' : 'content-close'" class='content1'>
-			<view class='flex justify-between padding-xs'>
-				<view>车牌号</view>
-				<view>净重(吨)</view>
-				<view>应收(元)</view>
-				<view>已收(元)</view>
-				<view>未收(元)</view>
+			<view class="table">
+				<view class="tr bg-w">
+					<view class="th">车牌号</view>
+					<view class="th">净重(吨)</view>
+					<view class="th">应收(元)</view>
+					<view class="th ">已收(元)</view>
+					<view class="th ">未收(元)</view>
+				</view>
+				<view class='tbody'>
+					<block v-for='(item,index) in contractInfo.taskDTOList' >
+						<view class="tr" >
+							<view class="td">{{item.carNo}}</view>
+							<view class="td">{{item.netWeight}}</view>
+							<view class="td">{{item.sumPrice}}</view>
+							<view class="td">{{item.sumPrice - item.notPay}}</view>
+							<view class="td">{{item.notPay}}</view>
+						</view>
+					</block>
+				</view>
 			</view>
-			<view class='flex justify-between padding-xs' v-for='item in contractInfo.taskDTOList'>
+			<!-- <view class='flex justify-between padding-xs' v-for='item in contractInfo.taskDTOList'>
 				<view>{{item.carNo}}</view>
 				<view>{{item.netWeight}}</view>
 				<view>{{item.sumPrice}}</view>
 				<view>{{item.sumPrice - item.notPay}}</view>
 				<view>{{item.notPay}}</view>
-			</view>
+			</view> -->
 		</view>
-		<view style='background:#fff;' class='flex justify-between padding-xl' @click='unfold2()'>
+		<view style='background:#E6F3F9;border-bottom:1px solid #ccc;' class='flex justify-between padding-xl' @click='unfold2()'>
 			<view style='width:92%;margin-top: -4px;' class='flex justify-between'>
-				<text>平仓({{contractInfo.sumNetClose}}吨)</text>
-				<text>结算总价({{contractInfo.sumTotalClose}}元)</text>
-				<text>已收({{contractInfo.payMoneyClose}}元)</text>
-				<text>未收({{contractInfo.notPayMoneyClose}}元)</text>
+				<view style='text-align:center;'>
+					平仓<view>({{contractInfo.sumNetClose}}吨)</view>
+				</view style='text-align:center;'>
+				<view style='text-align:center;'>
+					结算总价<view>({{contractInfo.sumTotalClose}}元)</view>
+				</view>
+				<view style='text-align:center;'>
+					已收<view>({{contractInfo.payMoneyClose}}元)</view>
+				</view>
+				<view style='text-align:center;'>
+					未收<view>({{contractInfo.notPayMoneyClose}}元)</view>
+				</view>
 			</view>
 			<view :class="isOpen2 ? 'cuIcon-unfold' : 'cuIcon-right'" ></view>
 		</view>
 		<view :class="isOpen2 ? 'content-open' : 'content-close'" class='content2'>
-			<view class='flex justify-between padding-xs'>
-				<view>平仓吨数(吨)</view>
-				<view>应收(元)</view>
-				<view>已收(元)</view>
-				<view>未收(元)</view>
-			</view>
-			<view class='flex justify-between padding-xs' v-for='item in contractInfo.taskDTOList1'>
-				<view>{{item.closeTon}}</view>
-				<view>{{item.sumPriceClose}}</view>
-				<view>{{item.sumPriceClose - item.notPayClose}}</view>
-				<view>{{item.notPayClose}}</view>
+			<view class="table">
+				<view class="tr bg-w">
+					<view class="th">平仓吨数(吨)</view>
+					<view class="th">应收(元)</view>
+					<view class="th ">已收(元)</view>
+					<view class="th ">未收(元)</view>
+				</view>
+				<view class='tbody'>
+					<block v-for='(item,index) in contractInfo.taskDTOList1' >
+						<view class="tr" >
+							<view class="td">{{item.closeTon}}</view>
+							<view class="td">{{item.sumPriceClose}}</view>
+							<view class="td">{{item.sumPriceClose - item.notPayClose}}</view>
+							<view class="td">{{item.notPayClose}}</view>
+						</view>
+					</block>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -168,9 +195,55 @@
 		display:block;
 	}
 	.content1,.content2{
-		padding: 10rpx 50rpx;
+		padding: 10rpx 18rpx;
 	}
 	.content-close{
 		display:none;
 	}
+	.table {
+	 border: 0px solid darkgray;
+	}
+	.tr {
+	 display: flex;
+	 width: 100%;
+	 justify-content: center;
+	 height: 3rem;
+	 align-items: center;
+	}
+	.td {
+	 width:40%;
+	 justify-content: center;
+	 text-align: center;
+	}
+	.bg-w{
+	 background: snow;
+	}
+	.bg-g{
+	 background: #E6F3F9;
+	}
+	.th {
+	 width: 40%;
+	 justify-content: center;
+	 /* background: #3366FF; */
+	 /* color: #fff; */
+	 display: flex;
+	 height: 3rem;
+	 align-items: center;
+	 border-bottom:1px solid #ccc;
+	 border-top:1px solid #ccc;
+	 text-align:center;
+	 padding:10px;
+	 font-weight:600;
+	}
+	.tr .th:first-child{
+		border-left:1px solid #ccc;
+	}
+	.tr .th:last-child{
+		border-right:1px solid #ccc;
+	}
+	.tbody .tr{
+		border-bottom:1px solid #ccc;
+		border-left:1px solid #ccc;
+		border-right:1px solid #ccc;
+	}
 </style>