|
|
@@ -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;
|
|
|
}
|
