移动端表格

html

正常

偏低

偏高

严重偏低

严重偏高

• 日期
• 凌晨
• 早餐前
• 早餐后
• 午餐前
• 午餐后
• 晚餐前
• 晚餐后
• 睡前

• {{item.year}}

  {{item.monthDay}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}
• -
  {{item1.time | timestampTo3}}

  {{item1.value==1.1||item1.value<1.1?'low':item1.value>33?'high':item1.value}}

***style*** /* 表格 */ /* .table { padding: 30px 0 0 0 ; } */ .table_thead { height: 0.5rem; width: 100%; display: flex; } .table_thead li { /* height: .5rem; */ color: #fff; font-size: 0.12rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; line-height: 0.13rem; padding: 0 0.1rem; height: 0.5rem; width: calc((100% - 8px) / 9 - 0.2rem); border-right: 1px solid #fff; background: rgba(40, 155, 206, 1); text-align: center; display: flex; justify-content: center; align-items: center; } .table_thead li:last-child { border-right: none; } .table_tbody { width: 100%; } .table_tr { /* height: 0.5rem; */ width: 100%; /* display: flex; */ border-right: 0.01rem solid #ddd; border-bottom: 0.01rem solid #ddd; } .table_tr li { /* height: 100%; */ padding: 0 0.01rem; /* height: 0.5rem; */ width: calc((100% - 8px) / 9); background: #fff; display: flex; flex-wrap: wrap; /* align-items: center; */ /* align-content: space-around; */ text-align: center; border-right: 0.01rem solid #ddd; } .table_tr li:nth-child(2) { border-left: 0.01rem solid #ddd; } .table_tr li:last-child, .table_tr li:nth-child(1) { border-right: none; } .table_date { width: 100%; font-size: 0.12rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(51, 51, 51, 1); line-height: 0.13rem; text-align: center; } .tr_time, .tr_value, .tr_status { width: 100%; height: 0.1rem; line-height: 0.13rem; font-size: 0.1rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(51, 51, 51, 1); } .tr_value { font-size: 0.12rem; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 400; color: rgba(51, 51, 51, 1); } .tr_status { font-size: 0.12rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(40, 155, 206, 1); } .fc_1 { /* color: #333333; */ color: green; } .fc_2 { /* color: #ff831b; */ color: orange; } .fc_3 { /* color: #1e6eaf; */

color: red;
}