div+css 设备看板样式

最新推荐文章于 2024-07-31 17:28:53 发布

xiaoshengjinbu

最新推荐文章于 2024-07-31 17:28:53 发布

阅读量999

点赞数 23

CC 4.0 BY-SA版权

文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/xiaoshengjinbu/article/details/140017354

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

餐线一

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

   }
}