=========效果如下============
餐线一
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
【脱机】餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线二
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线二
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
====== 代码如下 ======
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="table.html" title=css>css"><style>.device-list .device-meal-line-item .device-meal-line-title {padding-top: 0.5rem;padding-bottom: 0.5rem;font-size: 20px;font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner {display: flex;flex-direction: row;flex-wrap: wrap;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item {min-width: 12.44%;height: 200px;border: solid 1px #DCDFE6;margin: -1px 0 0 -1px;font-size: 16px;/* 余量低 *//* 脱机 */
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-title {min-width: 180px;padding-left: 5px;height: 50px;line-height: 50px;border-bottom: solid 1px #DCDFE6;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content {height: 150px;display: flex;flex-direction: column;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-name {padding-left: 5px;height: 50px;line-height: 50px;font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-price {padding-left: 5px;height: 50px;line-height: 50px;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-weight {padding-left: 5px;flex: 1;padding-top: 13px;font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .bg-bj {background-color: #fee7dc;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .bg-tj {background-color: #fa550c;
}</style>
</head><body><div class="device-list"><div class="device-meal-line-item"><div class="device-meal-line-title">餐线一</div><div class="grid-contaniner"><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight bg-bj">93克-余量低</div></div></div><div class="grid-item"><div class="grid-item-title bg-tj">【脱机】餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div></div></div><div class="device-meal-line-item"><div class="device-meal-line-title">餐线二</div><div class="grid-contaniner"><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight bg-bj">93克-余量低</div></div></div><div class="grid-item"><div class="grid-item-title bg-tj">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div></div></div><div class="device-meal-line-item"><div class="device-meal-line-title">餐线二</div><div class="grid-contaniner"><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight bg-bj">93克-余量低</div></div></div><div class="grid-item"><div class="grid-item-title bg-tj">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div><div class="grid-item"><div class="grid-item-title">餐线一 机器1</div><div class="grid-item-content"><div class="dish-name">糖醋里脊肉</div><div class="dish-price">¥ 30</div><div class="dish-weight">4693克</div></div></div></div></div></div></body></html>
=========== less 代码如下 =====
.device-list {.device-meal-line-item{.device-meal-line-title{padding-top:0.5rem;padding-bottom: 0.5rem;font-size: 20px;font-weight: bold;}.grid-contaniner {display: flex;flex-direction: row;flex-wrap: wrap;.grid-item {// min-width: 180px;min-width: 12.44%;height: 200px;border: solid 1px #DCDFE6;margin: -1px 0 0 -1px;font-size: 16px;.grid-item-title {min-width: 180px;padding-left: 5px;height: 50px;line-height: 50px;border-bottom: solid 1px #DCDFE6;}.grid-item-content {height: 150px;display: flex;flex-direction: column;.dish-name {padding-left: 5px;height: 50px;line-height: 50px;font-weight: bold;}.dish-price {padding-left: 5px;height: 50px;line-height: 50px;}.dish-weight {padding-left: 5px;flex: 1;padding-top: 13px;font-weight: bold;}}/* 余量低 */.bg-bj {background-color: #fee7dc;}/* 脱机 */.bg-tj {background-color: #fa550c}}}}
}
