div+css 设备看板样式

xiaoshengjinbu2024-07-01 14:54

=========效果如下============
餐线一
餐线一 机器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.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
            }
        }
    }

   }
}
相关推荐
烛阴几秒前
从`new`关键字开始：精通C#类与对象
前端·c#
天若有情6734 分钟前
笑喷！乌鸦哥版demo函数掀桌怒怼主函数：难办？那就别办了！
java·前端·servlet
记得记得就1515 分钟前
【Nginx 实战系列（一）—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装】
前端·nginx·http
天蓝色的鱼鱼5 分钟前
mescroll老用户亲测z-paging：这些功能让我果断切换！
前端·uni-app
JarvanMo11 分钟前
适用于 iOS 开发者的 Flutter 3.38：Xcode 与 Swift 集成新技巧
前端
北极糊的狐23 分钟前
Vue 中 vue-awesome-swiper的使用笔记（适配 Vue2/Vue3）
前端·javascript·vue.js
anyup26 分钟前
🔥100+ 天，已全面支持鸿蒙！uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
2***574238 分钟前
前端数据可视化应用
前端·信息可视化
DevUI团队1 小时前
Angular开发者必看：深度解析单元测试核心技巧与最佳实践
前端·javascript·angular.js
Mintopia1 小时前
🌐 动态网络环境下的 WebAIGC 断点续传与容错技术
前端·人工智能·aigc
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南08Labelme从安装到标注：零基础完整指南09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中