处理补餐屏空数据的问题

src/views/mealSurplusInformation/mealSurplusInformation.vue

@@ -57,6 +57,12 @@
                         </div>
                     </div>
                 </template>
+                <template v-for="item in 16 - nutritionFoodList.length">
+                    <div class="content_l_list noData">
+                        <div></div>
+                        <div>无开餐数据</div>
+                    </div>
+                </template>
 
 <!--                <div class="content_l_list warning">-->
 <!--                    <div class="content_l_list_name">-->
@@ -550,6 +556,31 @@ export default {
                         }
                     }
                 }
+
+                &.noData {
+                    background-color: #0F1A29;
+                    border: 2px solid #263249;
+
+                    > div:nth-of-type(1) {
+                        width: 48px;
+                        height: 48px;
+                        margin: 35px auto 16px;
+                        background-position: center;
+                        background-size: contain;
+                        background-repeat: no-repeat;
+                        background-image: url("@/assets/images/mealSurplusInformation/noData.png");
+                    }
+
+                    > div:nth-of-type(2) {
+                        color: #5A6478;
+                        width: 100%;
+                        height: 24px;
+                        font-size: 24px;
+                        font-weight: bold;
+                        line-height: 24px;
+                        text-align: center;
+                    }
+                }
             }
         }