负数

hdApp/src/pagesStorehouse/stockWarn/detailed.vue

@@ -5,58 +5,38 @@
 				 <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='选日期' /> 
 			</view>
 			<scroll-view scroll-y scroll-with-animation class="main-view">
-				<view class="space-view ex-table">
+				<view class="space-view">
 					<block v-if="!$util.isEmpty(list.data)">
-						<t-table :headerBackgroundColor="'#F0F2F6'">
-							<view style="width:100%;">
-							<t-tr header>
-								<t-th><view style="width:130upx;color:#333333;font-size:30upx;font-weight:bold;">时间</view></t-th>
-								<t-th><view style="width:120upx;color:#333333;font-size:30upx;font-weight:bold;">名称</view></t-th>
-								<t-th><view style="width:190upx;color:#333333;font-size:30upx;font-weight:bold;">事项</view></t-th>
-								<t-th><view style="color:#333333;font-size:30upx;font-weight:bold;">变动</view></t-th>
-								<t-th><view style="color:#333333;font-size:30upx;font-weight:bold;">剩余</view></t-th>
-							</t-tr>
+						<view class="stock-table">
+							<view class="table-header table-row">
+								<view class="table-cell cell-time">时间</view>
+								<view class="table-cell cell-name">名称</view>
+								<view class="table-cell cell-event">事项</view>
+								<view class="table-cell cell-change">变动</view>
+								<view class="table-cell cell-remaining">剩余</view>
 							</view>
-							<view style="margin-top:20upx;">
-								<view v-for="(item, index) in list.data" :key="index">
-									<t-tr>
-										<t-td align="center" color="info">
-											<view style="width:130upx;color:#333333;font-size:28upx;" @click="goDetail(item)">
-												<view>{{ item.addTime.substr(5,11) }}</view>
-												<view>{{item.ptStyle==1?'零售':'批发'}}</view>
-											</view>
-										</t-td>
-										<t-td>
-											<view @click="goDetail(item)" 
-											style="width:120upx;color:#333333;font-size:25upx;word-break:break-all;">
-												{{item.relateName}}
-											</view>
-										</t-td>
-										<t-td>
-											<view @click="goDetail(item)" 
-											style="width:190upx;color:#333333;font-size:28upx;word-break:break-all;">
-												{{item.typeName}}
-											</view>
-										</t-td>
-										<t-td>
-											<view style="color:#333333;font-size:30upx;" @click="goDetail(item)">
-												<text v-if="item.io == 1">+</text>
-												<text v-if="item.io == 0">-</text>
-												{{parseFloat(item.itemNum)}}
-											</view>
-										</t-td>
-										<t-td>
-											<view @click="goDetail(item)" style="color:#333333;font-size:30upx;">
-												{{parseFloat(item.newStock)}}
-											</view>
-										</t-td>
-									</t-tr>
-									<t-tr v-if="!$util.isEmpty(item.remark)">
-										<td><view style="color:green;margin-left:50upx;">备注：{{ item.remark }}</view></td>
-									</t-tr>
+							<view v-for="(item, index) in list.data" :key="index" class="table-body">
+								<view class="table-row table-row-data" @click="goDetail(item)">
+									<view class="table-cell cell-time">
+										<view>{{ item.addTime.substr(5,11) }}</view>
+										<view class="type-tag">{{item.ptStyle==1?'零售':'批发'}}</view>
+									</view>
+									<view class="table-cell cell-name">{{item.relateName}}</view>
+									<view class="table-cell cell-event">{{item.typeName}}</view>
+									<view class="table-cell cell-change">
+										<text v-if="item.io == 1">+</text>
+										<text v-if="item.io == 0">-</text>
+										{{parseFloat(item.itemNum)}}
+									</view>
+									<view class="table-cell cell-remaining">{{parseFloat(item.newStock)}}</view>
+								</view>
+								<view class="table-row table-row-extra" v-if="!$util.isEmpty(item.remark)">
+									<view class="table-cell cell-extra" :colspan="5">
+										<view class="remark-text">备注：{{ item.remark }}</view>
+									</view>
 								</view>
 							</view>
-						</t-table>
+						</view>
 					</block>
 					<block v-else>
 						<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
@@ -65,7 +45,7 @@
 			</scroll-view>
 		</view>
 	</view>
-	</template>
+</template>
 	<script>
 	const Month = (new Date().getMonth()+1)<10?'0'+(new Date().getMonth()+1):new Date().getMonth()+1
 	const time = `${new Date().getFullYear()}-${Month}-${new Date().getDate()}`;
@@ -166,60 +146,105 @@
 			}
 		}
 		.main-view {
-			/*margin-top: 80upx;*/
 			flex: 1;
 			background-color: #f9fbfc;
 			.space-view {
 				background-color: #fff;
 			}
-			.ex-info {
-				padding: 30upx;
-				.info-cell {
+		}
+	}
+
+	.stock-table {
+		width: 100%;
+		border-radius: 16upx;
+		overflow: hidden;
+		background: #fff;
+		box-shadow: 0 4upx 24upx rgba(0,0,0,0.06);
+		margin: 20upx 0;
+		
+		.table-row {
+			display: flex;
+			align-items: center;
+			min-height: 72upx;
+			border-bottom: 1px solid #f0f0f0;
+			
+			&.table-header {
+				background: #f5f7fa;
+				font-weight: bold;
+				font-size: 30upx;
+				color: #333;
+			}
+			
+			&.table-row-data {
+				font-size: 26upx;
+				color: #222;
+				transition: background 0.2s;
+				cursor: pointer;
+				
+				&:hover {
+					background: #f0f9ff;
+				}
+			}
+			
+			&.table-row-extra {
+				background: #f8f8f8;
+				color: #989494;
+				font-size: 24upx;
+				
+				.cell-extra {
+					padding: 16upx 20upx;
 					display: flex;
-					align-items: center;
-					font-size: 28upx;
-					&:not(:first-child) {
-						margin-top: 20upx;
-					}
-					.cell-label {
-						width: 110upx;
-						color: #666666;
-					}
-					.cell-value {
-						margin-left: 40upx;
-						color: #333;
-						&.warning {
-							color: #ffaf1d;
-						}
-						&.success {
-							color: #27c325;
-						}
+					flex-direction: column;
+					gap: 2upx;
+					
+					.remark-text {
+						color: #27c325;
 					}
 				}
 			}
-			.ex-table {
-				::v-deep.icon-info {
-					color: #333333;
+		}
+		
+		.table-cell {
+			flex: 1;
+			padding: 18upx 8upx 18upx 8upx;
+			
+			&.cell-time {
+				text-align: center;
+				min-width: 120upx;
+				flex: 1.4;
+				
+				.type-tag {
+					font-size: 20upx;
+					color: #666;
+					margin-top: 4upx;
 				}
 			}
-		}
-		.bar-view {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 0 30upx;
-			width: 100%;
-			height: 100upx;
-	
-			box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
-			.info-view {
-				font-size: 26upx;
+			
+			&.cell-name {
+				text-align: left;
+				min-width: 120upx;
+				flex: 1.8;
+				word-break: break-all;
 			}
-			.btn-view {
-				display: flex;
-				.admin-button-com {
-					margin: 0 10upx;
-				}
+			
+			&.cell-event {
+				text-align: left;
+				min-width: 200upx;
+				flex: 1.3;
+				word-break: break-all;
+			}
+			
+			&.cell-change {
+				text-align: right;
+				min-width: 100upx;
+				flex: 1.2;
+			}
+			
+			&.cell-remaining {
+				text-align: right;
+				min-width: 100upx;
+				padding-right: 32upx;
+				flex: 1.2;
 			}
 		}
 	}