page{
background-color: #fff;
}
.top-bg{
margin: 0;
padding: 0;
width: 100%;
height: 20rpx;
background-color: #F2F2F2;
}
.box-list{
margin-top: 20rpx;
}
.box-list .box-title-row{
display: flex;
font-size: 14px;
line-height: 42px;
border-bottom: 1px solid #F2F2F2;
margin: 0 15rpx;
}
.box-list .box-data-row{
display: flex;
font-size: 12px;
line-height: 42px;
border-bottom: 1px solid #F2F2F2;
margin: 0 15rpx;
}
.box-list .box-column1{
flex: 0 0 160rpx;
text-align: center;
}
.box-list .box-column2{
flex: 0 0 160rpx;
text-align: center;
}
.box-list .box-column3{
flex: 0 0 120rpx;
text-align: center;
}
.box-list .box-column4{
flex: 0 0 150rpx;
text-align: center;
}
.box-list .box-column-end{
flex-grow: 1;
text-align: center;
}
.statusF58B85{
border: 1px solid #F58B85;
font-size: 13px;
line-height: 16px;
padding: 0 8rpx;
border-radius: 8rpx;
color:#F58B85;
margin-right: 10rpx;
margin-top: 13px;
}
.c85bb58{
color: #85bb58;
}
//获取应用实例
const app = getApp()
Page({
data: {
//顶部安全距离(状态栏高度)
statusBarHeight: wx.getSystemInfoSync().statusBarHeight,
list: [
{id: 1,date:'2020-07-01',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},
{id: 2,date:'2020-07-02',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:8,statusName:'已完成'},
{id: 3,date:'2020-07-03',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:3,statusName:'已完成'},
{id: 4,date:'2020-07-04',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},
{id: 5,date:'2020-07-06',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:6,statusName:'已完成'},
{id: 6,date:'2020-07-08',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},{id: 7,date:'2020-07-09',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'}
]
},
})
<view style="margin-top:{{statusBarHeight}}px;padding-top:44px">
<view class="top-bg"></view>
<view class="box-list">
<view class="box-title-row">
<view class="box-column1">日期</view>
<view class="box-column2">时段</view>
<view class="box-column3">人数</view>
<view class="box-column4">状态</view>
<view class="box-column-end">操作</view>
</view>
<view wx:for="{{list}}" wx:key="id" class="box-data-row">
<view class="box-column1">{{item.date}}</view>
<view class="box-column2">{{item.timeStatr}}-{{item.timeEnd}}</view>
<view class="box-column3">{{item.num}}/{{item.countNum}}</view>
<view class="box-column4">
<view class="statusF58B85">{{item.statusName}}</view>
</view>
<view class="box-column-end c85bb58">查看</view>
</view>
</view>
</view>