• div+css 设备看板样式

    =========效果如下============

    餐线一
    餐线一 机器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克

    ====== 代码如下 ======

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="table.css">
    10.     <style>
    11.         .device-list .device-meal-line-item .device-meal-line-title {
    12.   padding-top: 0.5rem;
    13.   padding-bottom: 0.5rem;
    14.   font-size: 20px;
    15.   font-weight: bold;
    16. }
    17. .device-list .device-meal-line-item .grid-contaniner {
    18.   display: flex;
    19.   flex-direction: row;
    20.   flex-wrap: wrap;
    21. }
    22. .device-list .device-meal-line-item .grid-contaniner .grid-item {
    23.   min-width: 12.44%;
    24.   height: 200px;
    25.   border: solid 1px #DCDFE6;
    26.   margin: -1px 0 0 -1px;
    27.   font-size: 16px;
    28.   /*  余量低 */
    29.   /*  脱机 */
    30. }
    31. .device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-title {
    32.   min-width: 180px;
    33.   padding-left: 5px;
    34.   height: 50px;
    35.   line-height: 50px;
    36.   border-bottom: solid 1px #DCDFE6;
    37. }
    38. .device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content {
    39.   height: 150px;
    40.   display: flex;
    41.   flex-direction: column;
    42. }
    43. .device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-name {
    44.   padding-left: 5px;
    45.   height: 50px;
    46.   line-height: 50px;
    47.   font-weight: bold;
    48. }
    49. .device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-price {
    50.   padding-left: 5px;
    51.   height: 50px;
    52.   line-height: 50px;
    53. }
    54. .device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-weight {
    55.   padding-left: 5px;
    56.   flex: 1;
    57.   padding-top: 13px;
    58.   font-weight: bold;
    59. }
    60. .device-list .device-meal-line-item .grid-contaniner .grid-item .bg-bj {
    61.   background-color: #fee7dc;
    62. }
    63. .device-list .device-meal-line-item .grid-contaniner .grid-item .bg-tj {
    64.   background-color: #fa550c;
    65. }
    66.  
    67.     </style>
    68. </head>
    69.  
    70. <body>
    71.     <div class="device-list">
    72.         <div class="device-meal-line-item">
    73.             <div class="device-meal-line-title">餐线一</div>
    74.             <div class="grid-contaniner">
    75.                 <div class="grid-item">
    76.                     <div class="grid-item-title">餐线一 机器1</div>
    77.                     <div class="grid-item-content">
    78.                         <div class="dish-name">糖醋里脊肉</div>
    79.                         <div class="dish-price">¥ 30</div>
    80.                         <div class="dish-weight bg-bj">93克-余量低</div>
    81.                     </div>
    82.                 </div>
    83.                 <div class="grid-item">
    84.                     <div class="grid-item-title bg-tj">【脱机】餐线一 机器1</div>
    85.                     <div class="grid-item-content">
    86.                         <div class="dish-name">糖醋里脊肉</div>
    87.                         <div class="dish-price">¥ 30</div>
    88.                         <div class="dish-weight">4693克</div>
    89.                     </div>
    90.                 </div>
    91.                 <div class="grid-item">
    92.                     <div class="grid-item-title">餐线一 机器1</div>
    93.                     <div class="grid-item-content">
    94.                         <div class="dish-name">糖醋里脊肉</div>
    95.                         <div class="dish-price">¥ 30</div>
    96.                         <div class="dish-weight">4693克</div>
    97.                     </div>
    98.                 </div>
    99.                 <div class="grid-item">
    100.                     <div class="grid-item-title">餐线一 机器1</div>
    101.                     <div class="grid-item-content">
    102.                         <div class="dish-name">糖醋里脊肉</div>
    103.                         <div class="dish-price">¥ 30</div>
    104.                         <div class="dish-weight">4693克</div>
    105.                     </div>
    106.                 </div>
    107.                 <div class="grid-item">
    108.                     <div class="grid-item-title">餐线一 机器1</div>
    109.                     <div class="grid-item-content">
    110.                         <div class="dish-name">糖醋里脊肉</div>
    111.                         <div class="dish-price">¥ 30</div>
    112.                         <div class="dish-weight">4693克</div>
    113.                     </div>
    114.                 </div>
    115.                 <div class="grid-item">
    116.                     <div class="grid-item-title">餐线一 机器1</div>
    117.                     <div class="grid-item-content">
    118.                         <div class="dish-name">糖醋里脊肉</div>
    119.                         <div class="dish-price">¥ 30</div>
    120.                         <div class="dish-weight">4693克</div>
    121.                     </div>
    122.                 </div>
    123.                 <div class="grid-item">
    124.                     <div class="grid-item-title">餐线一 机器1</div>
    125.                     <div class="grid-item-content">
    126.                         <div class="dish-name">糖醋里脊肉</div>
    127.                         <div class="dish-price">¥ 30</div>
    128.                         <div class="dish-weight">4693克</div>
    129.                     </div>
    130.                 </div>
    131.                 <div class="grid-item">
    132.                     <div class="grid-item-title">餐线一 机器1</div>
    133.                     <div class="grid-item-content">
    134.                         <div class="dish-name">糖醋里脊肉</div>
    135.                         <div class="dish-price">¥ 30</div>
    136.                         <div class="dish-weight">4693克</div>
    137.                     </div>
    138.                 </div>
    139.                 <div class="grid-item">
    140.                     <div class="grid-item-title">餐线一 机器1</div>
    141.                     <div class="grid-item-content">
    142.                         <div class="dish-name">糖醋里脊肉</div>
    143.                         <div class="dish-price">¥ 30</div>
    144.                         <div class="dish-weight">4693克</div>
    145.                     </div>
    146.                 </div>
    147.                 <div class="grid-item">
    148.                     <div class="grid-item-title">餐线一 机器1</div>
    149.                     <div class="grid-item-content">
    150.                         <div class="dish-name">糖醋里脊肉</div>
    151.                         <div class="dish-price">¥ 30</div>
    152.                         <div class="dish-weight">4693克</div>
    153.                     </div>
    154.                 </div>
    155.                 <div class="grid-item">
    156.                     <div class="grid-item-title">餐线一 机器1</div>
    157.                     <div class="grid-item-content">
    158.                         <div class="dish-name">糖醋里脊肉</div>
    159.                         <div class="dish-price">¥ 30</div>
    160.                         <div class="dish-weight">4693克</div>
    161.                     </div>
    162.                 </div>
    163.                 <div class="grid-item">
    164.                     <div class="grid-item-title">餐线一 机器1</div>
    165.                     <div class="grid-item-content">
    166.                         <div class="dish-name">糖醋里脊肉</div>
    167.                         <div class="dish-price">¥ 30</div>
    168.                         <div class="dish-weight">4693克</div>
    169.                     </div>
    170.                 </div>
    171.                 <div class="grid-item">
    172.                     <div class="grid-item-title">餐线一 机器1</div>
    173.                     <div class="grid-item-content">
    174.                         <div class="dish-name">糖醋里脊肉</div>
    175.                         <div class="dish-price">¥ 30</div>
    176.                         <div class="dish-weight">4693克</div>
    177.                     </div>
    178.                 </div>
    179.             </div>
    180.         </div>
    181.         <div class="device-meal-line-item">
    182.             <div class="device-meal-line-title">餐线二</div>
    183.             <div class="grid-contaniner">
    184.                 <div class="grid-item">
    185.                     <div class="grid-item-title">餐线一 机器1</div>
    186.                     <div class="grid-item-content">
    187.                         <div class="dish-name">糖醋里脊肉</div>
    188.                         <div class="dish-price">¥ 30</div>
    189.                         <div class="dish-weight bg-bj">93克-余量低</div>
    190.                     </div>
    191.                 </div>
    192.                 <div class="grid-item">
    193.                     <div class="grid-item-title bg-tj">餐线一 机器1</div>
    194.                     <div class="grid-item-content">
    195.                         <div class="dish-name">糖醋里脊肉</div>
    196.                         <div class="dish-price">¥ 30</div>
    197.                         <div class="dish-weight">4693克</div>
    198.                     </div>
    199.                 </div>
    200.                 <div class="grid-item">
    201.                     <div class="grid-item-title">餐线一 机器1</div>
    202.                     <div class="grid-item-content">
    203.                         <div class="dish-name">糖醋里脊肉</div>
    204.                         <div class="dish-price">¥ 30</div>
    205.                         <div class="dish-weight">4693克</div>
    206.                     </div>
    207.                 </div>
    208.                 <div class="grid-item">
    209.                     <div class="grid-item-title">餐线一 机器1</div>
    210.                     <div class="grid-item-content">
    211.                         <div class="dish-name">糖醋里脊肉</div>
    212.                         <div class="dish-price">¥ 30</div>
    213.                         <div class="dish-weight">4693克</div>
    214.                     </div>
    215.                 </div>
    216.                 <div class="grid-item">
    217.                     <div class="grid-item-title">餐线一 机器1</div>
    218.                     <div class="grid-item-content">
    219.                         <div class="dish-name">糖醋里脊肉</div>
    220.                         <div class="dish-price">¥ 30</div>
    221.                         <div class="dish-weight">4693克</div>
    222.                     </div>
    223.                 </div>
    224.                 <div class="grid-item">
    225.                     <div class="grid-item-title">餐线一 机器1</div>
    226.                     <div class="grid-item-content">
    227.                         <div class="dish-name">糖醋里脊肉</div>
    228.                         <div class="dish-price">¥ 30</div>
    229.                         <div class="dish-weight">4693克</div>
    230.                     </div>
    231.                 </div>
    232.                 <div class="grid-item">
    233.                     <div class="grid-item-title">餐线一 机器1</div>
    234.                     <div class="grid-item-content">
    235.                         <div class="dish-name">糖醋里脊肉</div>
    236.                         <div class="dish-price">¥ 30</div>
    237.                         <div class="dish-weight">4693克</div>
    238.                     </div>
    239.                 </div>
    240.                 <div class="grid-item">
    241.                     <div class="grid-item-title">餐线一 机器1</div>
    242.                     <div class="grid-item-content">
    243.                         <div class="dish-name">糖醋里脊肉</div>
    244.                         <div class="dish-price">¥ 30</div>
    245.                         <div class="dish-weight">4693克</div>
    246.                     </div>
    247.                 </div>
    248.                 <div class="grid-item">
    249.                     <div class="grid-item-title">餐线一 机器1</div>
    250.                     <div class="grid-item-content">
    251.                         <div class="dish-name">糖醋里脊肉</div>
    252.                         <div class="dish-price">¥ 30</div>
    253.                         <div class="dish-weight">4693克</div>
    254.                     </div>
    255.                 </div>
    256.                 <div class="grid-item">
    257.                     <div class="grid-item-title">餐线一 机器1</div>
    258.                     <div class="grid-item-content">
    259.                         <div class="dish-name">糖醋里脊肉</div>
    260.                         <div class="dish-price">¥ 30</div>
    261.                         <div class="dish-weight">4693克</div>
    262.                     </div>
    263.                 </div>
    264.                 <div class="grid-item">
    265.                     <div class="grid-item-title">餐线一 机器1</div>
    266.                     <div class="grid-item-content">
    267.                         <div class="dish-name">糖醋里脊肉</div>
    268.                         <div class="dish-price">¥ 30</div>
    269.                         <div class="dish-weight">4693克</div>
    270.                     </div>
    271.                 </div>
    272.                 <div class="grid-item">
    273.                     <div class="grid-item-title">餐线一 机器1</div>
    274.                     <div class="grid-item-content">
    275.                         <div class="dish-name">糖醋里脊肉</div>
    276.                         <div class="dish-price">¥ 30</div>
    277.                         <div class="dish-weight">4693克</div>
    278.                     </div>
    279.                 </div>
    280.                 <div class="grid-item">
    281.                     <div class="grid-item-title">餐线一 机器1</div>
    282.                     <div class="grid-item-content">
    283.                         <div class="dish-name">糖醋里脊肉</div>
    284.                         <div class="dish-price">¥ 30</div>
    285.                         <div class="dish-weight">4693克</div>
    286.                     </div>
    287.                 </div>
    288.             </div>
    289.         </div>
    290.         <div class="device-meal-line-item">
    291.             <div class="device-meal-line-title">餐线二</div>
    292.             <div class="grid-contaniner">
    293.                 <div class="grid-item">
    294.                     <div class="grid-item-title">餐线一 机器1</div>
    295.                     <div class="grid-item-content">
    296.                         <div class="dish-name">糖醋里脊肉</div>
    297.                         <div class="dish-price">¥ 30</div>
    298.                         <div class="dish-weight bg-bj">93克-余量低</div>
    299.                     </div>
    300.                 </div>
    301.                 <div class="grid-item">
    302.                     <div class="grid-item-title bg-tj">餐线一 机器1</div>
    303.                     <div class="grid-item-content">
    304.                         <div class="dish-name">糖醋里脊肉</div>
    305.                         <div class="dish-price">¥ 30</div>
    306.                         <div class="dish-weight">4693克</div>
    307.                     </div>
    308.                 </div>
    309.                 <div class="grid-item">
    310.                     <div class="grid-item-title">餐线一 机器1</div>
    311.                     <div class="grid-item-content">
    312.                         <div class="dish-name">糖醋里脊肉</div>
    313.                         <div class="dish-price">¥ 30</div>
    314.                         <div class="dish-weight">4693克</div>
    315.                     </div>
    316.                 </div>
    317.                 <div class="grid-item">
    318.                     <div class="grid-item-title">餐线一 机器1</div>
    319.                     <div class="grid-item-content">
    320.                         <div class="dish-name">糖醋里脊肉</div>
    321.                         <div class="dish-price">¥ 30</div>
    322.                         <div class="dish-weight">4693克</div>
    323.                     </div>
    324.                 </div>
    325.                 <div class="grid-item">
    326.                     <div class="grid-item-title">餐线一 机器1</div>
    327.                     <div class="grid-item-content">
    328.                         <div class="dish-name">糖醋里脊肉</div>
    329.                         <div class="dish-price">¥ 30</div>
    330.                         <div class="dish-weight">4693克</div>
    331.                     </div>
    332.                 </div>
    333.                 <div class="grid-item">
    334.                     <div class="grid-item-title">餐线一 机器1</div>
    335.                     <div class="grid-item-content">
    336.                         <div class="dish-name">糖醋里脊肉</div>
    337.                         <div class="dish-price">¥ 30</div>
    338.                         <div class="dish-weight">4693克</div>
    339.                     </div>
    340.                 </div>
    341.                 <div class="grid-item">
    342.                     <div class="grid-item-title">餐线一 机器1</div>
    343.                     <div class="grid-item-content">
    344.                         <div class="dish-name">糖醋里脊肉</div>
    345.                         <div class="dish-price">¥ 30</div>
    346.                         <div class="dish-weight">4693克</div>
    347.                     </div>
    348.                 </div>
    349.                 <div class="grid-item">
    350.                     <div class="grid-item-title">餐线一 机器1</div>
    351.                     <div class="grid-item-content">
    352.                         <div class="dish-name">糖醋里脊肉</div>
    353.                         <div class="dish-price">¥ 30</div>
    354.                         <div class="dish-weight">4693克</div>
    355.                     </div>
    356.                 </div>
    357.                 <div class="grid-item">
    358.                     <div class="grid-item-title">餐线一 机器1</div>
    359.                     <div class="grid-item-content">
    360.                         <div class="dish-name">糖醋里脊肉</div>
    361.                         <div class="dish-price">¥ 30</div>
    362.                         <div class="dish-weight">4693克</div>
    363.                     </div>
    364.                 </div>
    365.                 <div class="grid-item">
    366.                     <div class="grid-item-title">餐线一 机器1</div>
    367.                     <div class="grid-item-content">
    368.                         <div class="dish-name">糖醋里脊肉</div>
    369.                         <div class="dish-price">¥ 30</div>
    370.                         <div class="dish-weight">4693克</div>
    371.                     </div>
    372.                 </div>
    373.                 <div class="grid-item">
    374.                     <div class="grid-item-title">餐线一 机器1</div>
    375.                     <div class="grid-item-content">
    376.                         <div class="dish-name">糖醋里脊肉</div>
    377.                         <div class="dish-price">¥ 30</div>
    378.                         <div class="dish-weight">4693克</div>
    379.                     </div>
    380.                 </div>
    381.                 <div class="grid-item">
    382.                     <div class="grid-item-title">餐线一 机器1</div>
    383.                     <div class="grid-item-content">
    384.                         <div class="dish-name">糖醋里脊肉</div>
    385.                         <div class="dish-price">¥ 30</div>
    386.                         <div class="dish-weight">4693克</div>
    387.                     </div>
    388.                 </div>
    389.                 <div class="grid-item">
    390.                     <div class="grid-item-title">餐线一 机器1</div>
    391.                     <div class="grid-item-content">
    392.                         <div class="dish-name">糖醋里脊肉</div>
    393.                         <div class="dish-price">¥ 30</div>
    394.                         <div class="dish-weight">4693克</div>
    395.                     </div>
    396.                 </div>
    397.             </div>
    398.         </div>
    399.     </div>
    400.  
    401. </body>
    402.  
    403. </html>

    　　=========== less 代码如下 =====

    1. .device-list {
    2.  
    3.    .device-meal-line-item{
    4.     .device-meal-line-title{
    5.         padding-top:0.5rem;
    6.         padding-bottom: 0.5rem;
    7.         font-size: 20px;
    8.         font-weight: bold;
    9.     }
    10.  
    11.     .grid-contaniner {
    12.         display: flex;
    13.         flex-direction: row;
    14.         flex-wrap: wrap;
    15.         .grid-item {
    16.             // min-width: 180px;
    17.             min-width: 12.44%;
    18.             height: 200px;
    19.             border: solid 1px #DCDFE6;
    20.             margin: -1px 0 0 -1px;
    21.             font-size: 16px;
    22.             
    23.  
    24.             .grid-item-title {
    25.                 min-width: 180px;
    26.                 padding-left: 5px;
    27.                 height: 50px;
    28.                 line-height: 50px;
    29.                 border-bottom: solid 1px #DCDFE6;
    30.             }
    31.  
    32.             .grid-item-content {
    33.                 height: 150px;
    34.                 display: flex;
    35.                 flex-direction: column;
    36.  
    37.                 .dish-name {
    38.                     padding-left: 5px;
    39.                     height: 50px;
    40.                     line-height: 50px;
    41.                     font-weight: bold;
    42.                 }
    43.  
    44.                 .dish-price {
    45.                     padding-left: 5px;
    46.                     height: 50px;
    47.                     line-height: 50px;
    48.                 }
    49.  
    50.                 .dish-weight {
    51.                     padding-left: 5px;
    52.                     flex: 1;
    53.                     padding-top: 13px;
    54.                     font-weight: bold;
    55.  
    56.                 }
    57.  
    58.  
    59.  
    60.  
    61.             }
    62.  
    63.             /*  余量低 */
    64.             .bg-bj {
    65.                 background-color: #fee7dc;
    66.             }
    67.  
    68.             /*  脱机 */
    69.             .bg-tj {
    70.                 background-color: #fa550c
    71.             }
    72.         }
    73.     }
    74.  
    75.    }
    76. }
  • 相关阅读:
    Mysql的order by
    SSL---VPN
    LeetCode707：设计链表
    为什么延迟删除可以保证MYSQL 与redis的一致性？
    卷积神经网络的常用改进
    mysql进阶：canal实现mysql数据同步到redis｜实现自定义canal客户端
    docker安装常用软件
    Docker学习第一天
    python关于sorted排序函数详细解析 附实战代码（全）
    国际计费系统基于Sharding-Proxy大数据迁移方案实践
  • 原文地址：https://blog.csdn.net/xiaoshengjinbu/article/details/140017354