显示

ghsApp/src/pagesStorehouse/stockWarn/detailed.vue

@@ -1,26 +1,33 @@
 <template>
 <view class="app-content">
 	<view class="ex-page">
-		<view class="top-bar">
+		<!-- 固定顶部栏 -->
+		<view class="top-bar fixed">
 			 <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='选日期' /> 
 		</view>
+		
+		<!-- 固定的表头和按钮区域 -->
+		<view class="fixed-header-wrapper">
+			<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>
+			<view style="margin:20upx 0 0 70upx;background-color:#F0F2F6;padding-bottom:15upx;">
+				<button class="admin-button-com" :class="[hideCost==0?'blue':'']" style="margin-right:20upx;" @click="hideCost=0">显示成本</button>
+				<button class="admin-button-com" :class="[hideCost==1?'blue':'']" @click="hideCost=1">不显成本</button>
+			</view>
+		</view>
+		
+		<!-- 滚动内容区域 -->
 		<scroll-view scroll-y scroll-with-animation class="main-view">
 			<view class="space-view ex-table">
 				<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>
-						<view style="margin:20upx 0 0 70upx;">
-							<button class="admin-button-com" :class="[hideCost==0?'blue':'']" style="margin-right:20upx;" @click="hideCost=0">显示成本</button>
-							<button class="admin-button-com" :class="[hideCost==1?'blue':'']" @click="hideCost=1">不显成本</button>
-						</view>
 						<view style="margin-top:20upx;">
 							<view v-for="(item, index) in list.data" :key="index">
 								<t-tr>
@@ -165,11 +172,23 @@ export default {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+	position: relative;
+	
 	.top-bar {
-		margin-bottom:30px;
 		display: flex;
 		width: 100%;
-		z-index: 20;
+		z-index: 100;
+		background-color: white;
+		margin-bottom:0;
+		
+		// 微信小程序和 APP 中的固定定位
+		&.fixed {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+		}
+		
 		.bar{
 			width: 50%;
 			height: 100%;
@@ -179,10 +198,31 @@ export default {
 			}
 		}
 	}
+	
+	// 固定的表头和按钮区域
+	.fixed-header-wrapper {
+		position: fixed;
+		top: 80upx;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		background-color: #F0F2F6;
+		width: 100%;
+		
+		// #ifdef MP-WEIXIN
+		// 微信小程序特殊处理
+		// #endif
+		
+		// #ifdef APP-PLUS
+		// App 特殊处理
+		// #endif
+	}
+	
 	.main-view {
-		/*margin-top: 80upx;*/
 		flex: 1;
 		background-color: #f9fbfc;
+		margin-top: 160upx;
+		
 		.space-view {
 			background-color: #fff;
 		}