表格的绘制
js
Page({
data:{
infeed:['"", "1周", "2周", "3周", "总计"],
endwise1: "游泳",
tb1:"0",
tb2:"0",
tb3:"0",
tb4:"0",
endwise2: "跑步",
tc1:"0",
tc2:"0",
tc3:"0",
tc4:"0",
endwise3: "健身",
td1:"0",
td2:"0",
td3:"0",
td4:"0",
}
})
wxml
<
view
class=
"tle">
<
view
class=
"ae by-c">
<
block
wx:for=
"{{infeed}}"
wx:key=
"*this">
<
view
class=
"dd">{{item}}
</
view
>
</
block
>
</
view
>
<
block
>
<
view
class=
"ae by-w "
>
<
view
class=
"wc a-y">{{endwise1}}
</
view
>
<
view
class=
"wc">{{tb1}}
</
view
>
<
view
class=
"wc">{{tb2}}
</
view
>
<
view
class=
"wc">{{tb3}}
</
view
>
<
view
class=
"wc">{{tb4}}
</
view
>
</
view
>
<
view
class=
"ae by-w"
>
<
view
class=
"wc a-y">{{endwise2}}
</
view
>
<
view
class=
"wc">{{tc1}}
</
view
>
<
view
class=
"wc">{{tc2}}
</
view
>
<
view
class=
"wc">{{tc3}}
</
view
>
<
view
class=
"wc">{{tc4}}
</
view
>
</
view
>
<
view
class=
"ae by-w"
>
<
view
class=
"wc a-yellow">{{endwise3}}
</
view
>
<
view
class=
"wc">{{td1}}
</
view
>
<
view
class=
"wc">{{td2}}
</
view
>
<
view
class=
"wc">{{td3}}
</
view
>
<
view
class=
"wc">{{td4}}
</
view
>
</
view
>
</
block
>
</
view
>
.tle {
border-top:
1px
solid
#ebc450;
margin:
20
rpx
0;
border-left:
1px
solid
#c9c9c9;
}
.ae {
display:
flex;
width:
100%;
justify-content:
center;
align-items:
center;
text-align:
center;
}
.wc {
width:
40%;
justify-content:
center;
text-align:
center;
height:
90
rpx;
line-height:
90
rpx;
border-bottom:
1px
solid
#c9c9c9;
border-right:
1px
solid
#c9c9c9;
}
.by-c{
background:
snow;
}
.by-w {
background:
#e6f3f9;
}
.a-y {
background:
#ffecb5;
border-bottom:
1px
solid
#edd079;
border-right:
1px
solid
#edd079;
}
.dd {
width:
40%;
border-bottom:
1px
solid
#edd079;
border-right:
1px
solid
#edd079;
justify-content:
center;
background:
#ffecb5;
color:
#333;
display:
flex;
height:
90
rpx;
align-items:
center;
}