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

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

    1. .device-list {
    2. .device-meal-line-item{
    3. .device-meal-line-title{
    4. padding-top:0.5rem;
    5. padding-bottom: 0.5rem;
    6. font-size: 20px;
    7. font-weight: bold;
    8. }
    9. .grid-contaniner {
    10. display: flex;
    11. flex-direction: row;
    12. flex-wrap: wrap;
    13. .grid-item {
    14. // min-width: 180px;
    15. min-width: 12.44%;
    16. height: 200px;
    17. border: solid 1px #DCDFE6;
    18. margin: -1px 0 0 -1px;
    19. font-size: 16px;
    20. .grid-item-title {
    21. min-width: 180px;
    22. padding-left: 5px;
    23. height: 50px;
    24. line-height: 50px;
    25. border-bottom: solid 1px #DCDFE6;
    26. }
    27. .grid-item-content {
    28. height: 150px;
    29. display: flex;
    30. flex-direction: column;
    31. .dish-name {
    32. padding-left: 5px;
    33. height: 50px;
    34. line-height: 50px;
    35. font-weight: bold;
    36. }
    37. .dish-price {
    38. padding-left: 5px;
    39. height: 50px;
    40. line-height: 50px;
    41. }
    42. .dish-weight {
    43. padding-left: 5px;
    44. flex: 1;
    45. padding-top: 13px;
    46. font-weight: bold;
    47. }
    48. }
    49. /* 余量低 */
    50. .bg-bj {
    51. background-color: #fee7dc;
    52. }
    53. /* 脱机 */
    54. .bg-tj {
    55. background-color: #fa550c
    56. }
    57. }
    58. }
    59. }
    60. }
  • 相关阅读:
    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