diff --git a/src/assets/images/led/header.png b/src/assets/images/led/header.png
new file mode 100644
index 0000000..6190be7
Binary files /dev/null and b/src/assets/images/led/header.png differ
diff --git a/src/assets/images/led/logo.png b/src/assets/images/led/logo.png
new file mode 100644
index 0000000..3082da2
Binary files /dev/null and b/src/assets/images/led/logo.png differ
diff --git a/src/assets/images/led/null.png b/src/assets/images/led/null.png
new file mode 100644
index 0000000..bae4666
Binary files /dev/null and b/src/assets/images/led/null.png differ
diff --git a/src/views/led/components/info.vue b/src/views/led/components/info.vue
index eecc623..674098e 100644
--- a/src/views/led/components/info.vue
+++ b/src/views/led/components/info.vue
@@ -1,20 +1,372 @@
 <template>
     <div class="rowDom-info">
-        1
+        <template v-if="deviceData">
+            <div class="deviceData">
+                <div class="detailHeader">
+                    <div>餐品热量</div>
+                    <div>268千卡/100克</div>
+                </div>
+                <div class="detailImg">
+                    <div>
+                        <img
+                            src="https://dev.yixiong-tech.com:8081/common/files/20260309/5b94f4df-d0e5-45ff-8a3d-8cd524441568.png"
+                            alt=""/>
+                    </div>
+                    <div></div>
+                </div>
+                <div class="detailFooter">
+                    <div class="detailFooter-1">
+                        <div>红烧带鱼</div>
+                        <div>(<span>0.24</span>)</div>
+                    </div>
+                    <div class="detailFooter-2">
+                        <div>美容养颜</div>
+                        <div>增强免疫力</div>
+                    </div>
+                    <div class="detailFooter-3">
+                        <div>
+                            <div>12.5</div>
+                            <div>实名取用</div>
+                        </div>
+                        <div>
+                            <div>13.8</div>
+                            <div>余量</div>
+                        </div>
+                        <div>
+                            <div>6.6</div>
+                            <div>匿名取用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="deviceDataNull">
+                <div class="detailImg">
+                    <div></div>
+                    <div></div>
+                </div>
+                <div class="detailFooter">
+                    <div class="detailFooter-1">
+                        <div>暂无餐品</div>
+                    </div>
+                    <div class="detailFooter-2"></div>
+                    <div class="detailFooter-3">
+                        <div>
+                            <div>-</div>
+                            <div>实名取用</div>
+                        </div>
+                        <div>
+                            <div>-</div>
+                            <div>余量</div>
+                        </div>
+                        <div>
+                            <div>-</div>
+                            <div>匿名取用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script>
+import countTo from "vue-count-to";
+
 export default {
     name: "info",
-    data() {
-        return {
-
+    props: {
+        deviceData: {
+            type: Object,
+            default: () => null
         }
     }
 }
 </script>
 
 <style scoped lang="less">
+.rowDom-info {
+    width: 250px;
+    height: 100%;
+    margin: 0 20px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #FFFFFF;
 
+    .deviceData {
+        width: 250px;
+        height: 100%;
+        position: relative;
+
+        .detailHeader {
+            position: absolute;
+            z-index: 3;
+            width: 170px;
+            height: 64px;
+            top: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            padding-top: 6px;
+            box-sizing: border-box;
+            background-image: url("@/assets/images/led/header.png");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+
+            > div:nth-of-type(1) {
+                width: 100%;
+                height: 16px;
+                color: #FFFFFF;
+                font-size: 16px;
+                font-weight: 500;
+                line-height: 16px;
+                text-align: center;
+                margin-bottom: 8px;
+            }
+
+            > div:nth-of-type(2) {
+                color: #FFFFFF;
+                width: 100%;
+                height: 14px;
+                font-size: 14px;
+                font-weight: bold;
+                line-height: 14px;
+                text-align: center;
+            }
+        }
+
+        .detailImg {
+            width: 250px;
+            height: 250px;
+            position: relative;
+
+            > div:nth-of-type(1) {
+                width: 100%;
+                height: 100%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            > div:nth-of-type(2) {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 2;
+                width: 100%;
+                height: 98px;
+                background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        .detailFooter {
+            position: absolute;
+            z-index: 3;
+            width: 240px;
+            height: 160px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            padding-top: 14px;
+            border-radius: 16px;
+            box-sizing: border-box;
+            border: 2px solid #FFFFFF;
+            background: rgba(238, 246, 253, 0.72);
+
+            .detailFooter-1 {
+                width: 100%;
+                height: 26px;
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: end;
+                margin-bottom: 14px;
+                justify-content: center;
+
+                > div:nth-of-type(1) {
+                    color: #000000;
+                    font-size: 26px;
+                    line-height: 26px;
+                    font-weight: bold;
+                }
+
+                > div:nth-of-type(2) {
+                    color: #000000;
+                    font-size: 20px;
+                    line-height: 20px;
+                    font-weight: bold;
+
+                    > span {
+                        color: #F24439;
+                    }
+                }
+            }
+
+            .detailFooter-2 {
+                width: 100%;
+                height: 32px;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: center;
+                margin-bottom: 14px;
+
+                > div {
+                    margin: 0 8px;
+                    height: 32px;
+                    line-height: 30px;
+                    color: #2AC79F;
+                    font-size: 16px;
+                    padding: 0 10px;
+                    border-radius: 6px;
+                    border: 1px solid #2AC79F;
+                    background-color: #E5FFF8;
+                }
+            }
+
+            .detailFooter-3 {
+                width: 100%;
+                height: 100%;
+                padding: 0 10px;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+
+                > div {
+                    width: 0;
+                    flex: 1;
+
+                    > div:nth-of-type(1) {
+                        color: #161616;
+                        height: 26px;
+                        line-height: 26px;
+                        font-size: 26px;
+                        font-weight: bold;
+                        text-align: center;
+                        margin-bottom: 6px;
+                    }
+
+                    > div:nth-of-type(2) {
+                        color: #77849E;
+                        height: 16px;
+                        line-height: 16px;
+                        font-weight: 400;
+                        font-size: 16px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .deviceDataNull {
+        width: 250px;
+        height: 100%;
+        position: relative;
+
+        .detailImg {
+            width: 250px;
+            height: 250px;
+            position: relative;
+
+            > div:nth-of-type(1) {
+                width: 100%;
+                height: 100%;
+                background-image: url("@/assets/images/led/null.png");
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: cover;
+            }
+
+            > div:nth-of-type(2) {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 2;
+                width: 100%;
+                height: 98px;
+                background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        .detailFooter {
+            position: absolute;
+            z-index: 3;
+            width: 240px;
+            height: 160px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            padding-top: 14px;
+            border-radius: 16px;
+            box-sizing: border-box;
+            border: 2px solid #FFFFFF;
+            background: rgba(238, 246, 253, 0.72);
+
+            .detailFooter-1 {
+                width: 100%;
+                height: 26px;
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: end;
+                margin-bottom: 14px;
+                justify-content: center;
+
+                > div {
+                    color: #000000;
+                    font-size: 26px;
+                    line-height: 26px;
+                    font-weight: bold;
+                }
+            }
+
+            .detailFooter-2 {
+                width: 100%;
+                height: 32px;
+                margin-bottom: 14px;
+            }
+
+            .detailFooter-3 {
+                width: 100%;
+                height: 100%;
+                padding: 0 10px;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+
+                > div {
+                    width: 0;
+                    flex: 1;
+
+                    > div:nth-of-type(1) {
+                        color: #161616;
+                        height: 26px;
+                        line-height: 26px;
+                        font-size: 26px;
+                        font-weight: bold;
+                        text-align: center;
+                        margin-bottom: 6px;
+                    }
+
+                    > div:nth-of-type(2) {
+                        color: #77849E;
+                        height: 16px;
+                        line-height: 16px;
+                        font-weight: 400;
+                        font-size: 16px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+}
 </style>
diff --git a/src/views/led/components/rowDom.vue b/src/views/led/components/rowDom.vue
index 8acee0d..a7faf10 100644
--- a/src/views/led/components/rowDom.vue
+++ b/src/views/led/components/rowDom.vue
@@ -1,18 +1,30 @@
 <template>
-    <div class="rowDom"></div>
+    <div class="rowDom">
+        <div class="rowDom-logo">
+            <div></div>
+            <div>数味智餐</div>
+        </div>
+        <div class="rowDom-dishes">
+            <template v-for="item in deviceDataList">
+                <Info :deviceData="item.data" :key="item.id" />
+            </template>
+        </div>
+    </div>
 </template>
 
 <script>
 import Info from "./info.vue";
 export default {
     name: "rowDom",
+    props: {
+        deviceDataList: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+    },
     components: {
         Info
-    },
-    data() {
-        return{
-
-        }
     }
 }
 </script>
@@ -23,20 +35,40 @@ export default {
     height: 100%;
     display: flex;
     flex-wrap: nowrap;
-    background-image: url("@/assets/images/led/bg1.png");
-    background-repeat: no-repeat;
-    background-position: left top;
-    background-size: cover;
+    align-items: center;
 
-    //.rowDom-logo {
-    //    width: 100px;
-    //    height: 100%;
-    //}
-    //
-    //.rowDom-dishes {
-    //    width: 0;
-    //    flex: 1;
-    //    height: 100%;
-    //}
+    .rowDom-logo {
+        width: 310px;
+        //margin-right: 20px;
+
+        > div:nth-of-type(1) {
+            width: 160px;
+            height: 160px;
+            margin: 0 auto 30px;
+            background-image: url("@/assets/images/led/logo.png");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+        }
+
+        > div:nth-of-type(2) {
+            color: #FFFFFF;
+            width: 100%;
+            height: 48px;
+            font-size: 48px;
+            font-weight: bold;
+            line-height: 48px;
+            text-align: center;
+            //font-family: HarmonyOS Sans SC;
+        }
+    }
+
+    .rowDom-dishes {
+        width: 0;
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+    }
 }
 </style>
diff --git a/src/views/led/led.vue b/src/views/led/led.vue
index 0ad4b62..83cad0a 100644
--- a/src/views/led/led.vue
+++ b/src/views/led/led.vue
@@ -2,17 +2,17 @@
     <div id="led">
         <div class="ledDom">
             <div class="ledDom1" :style="{'left': -(screenWidth * 0) + 'px'}">
-                <RowDom />
+                <RowDom :deviceDataList="deviceDataList"/>
             </div>
         </div>
         <div class="ledDom">
             <div class="ledDom2" :style="{'left': -(screenWidth * 1) + 'px'}">
-                <RowDom />
+                <RowDom :deviceDataList="deviceDataList"/>
             </div>
         </div>
         <div class="ledDom">
             <div class="ledDom3" :style="{'left': -(screenWidth * 2) + 'px'}">
-                <RowDom />
+                <RowDom :deviceDataList="deviceDataList"/>
             </div>
         </div>
     </div>
@@ -20,6 +20,8 @@
 
 <script>
 import RowDom from "./components/rowDom.vue";
+// import {httpRequest} from "@/XMLHttpRequest";
+
 export default {
     name: "led",
     components: {
@@ -27,7 +29,70 @@ export default {
     },
     data() {
         return {
-            screenWidth: 1920
+            screenWidth: 1920,
+
+            deviceDataList: [{
+                id: '1',
+                data: 1
+            }, {
+                id: '2',
+                data: null
+            }, {
+                id: '3',
+                data: 2
+            }, {
+                id: '4',
+                data: null
+            }, {
+                id: '5',
+                data: 3
+            }, {
+                id: '6',
+                data: null
+            }, {
+                id: '7',
+                data: null
+            }, {
+                id: '8',
+                data: null
+            }, {
+                id: '9',
+                data: null
+            }, {
+                id: '10',
+                data: null
+            }, {
+                id: '11',
+                data: null
+            }, {
+                id: '12',
+                data: null
+            }, {
+                id: '13',
+                data: null
+            }, {
+                id: '14',
+                data: null
+            }, {
+                id: '15',
+                data: null
+            }],
+        }
+    },
+    created() {
+        this.getDeviceId();
+    },
+    methods: {
+        getDeviceId() {
+            // httpRequest().then(function (res) {
+            //
+            // }).catch(function(err) {
+            //
+            // })
+        },
+
+        getDeviceData() {
+
         }
     }
 }
@@ -36,6 +101,15 @@ export default {
 <style scoped lang="less">
 #led {
     width: 100%;
+    height: 100%;
+    background-color: #000000;
+
+    //.row_1,
+    //.row_2,
+    //.row_3 {
+    //    width: 100%;
+    //    height: 312px;
+    //}
 
     .ledDom {
         width: 100%;