diff --git a/postcss.config.js b/postcss.config.js
index b0c0e98..6bd5daa 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,7 +2,11 @@ module.exports = {
     plugins: [
         require('postcss-pxtorem')({
             rootValue:({ file }) => {
-                if (file.includes('userRanking') || file.includes('dietaryNutritionTips') || file.includes('restaurantAndCafeteriaCombined')) {
+                if (
+                        file.includes('userRanking') ||
+                        file.includes('dietaryNutritionTips') ||
+                        file.includes('restaurantAndCafeteriaCombined')
+                ) {
                     return 108;
                 } else {
                     return 192;
diff --git a/src/assets/images/mealSurplusInformation/content_r_icon.png b/src/assets/images/mealSurplusInformation/content_r_icon.png
new file mode 100644
index 0000000..fe74f55
Binary files /dev/null and b/src/assets/images/mealSurplusInformation/content_r_icon.png differ
diff --git a/src/assets/images/mealSurplusInformation/danger_status_icon.png b/src/assets/images/mealSurplusInformation/danger_status_icon.png
new file mode 100644
index 0000000..2dd709a
Binary files /dev/null and b/src/assets/images/mealSurplusInformation/danger_status_icon.png differ
diff --git a/src/assets/images/mealSurplusInformation/index.png b/src/assets/images/mealSurplusInformation/index.png
deleted file mode 100644
index 4d430ba..0000000
Binary files a/src/assets/images/mealSurplusInformation/index.png and /dev/null differ
diff --git a/src/assets/images/mealSurplusInformation/warning_status_icon.png b/src/assets/images/mealSurplusInformation/warning_status_icon.png
new file mode 100644
index 0000000..a14c932
Binary files /dev/null and b/src/assets/images/mealSurplusInformation/warning_status_icon.png differ
diff --git a/src/router/index.js b/src/router/index.js
index e737026..0ca9442 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -173,14 +173,10 @@ const routes = [
 ];
 
 const router = new VueRouter({
-    // mode: 'history',
     base: process.env.BASE_URL,
     routes
 });
 
-// http://192.168.1.210/gateway/local/zhstapi/zhst/tv/rankingList?number=9
-//     http://vip.shuziweidao.com/shuwei-zhct/swLargeScreenFood/rankingList?type=1
-
 router.beforeEach((to, from, next) => {
     if (to.meta && to.meta.rootValue) {
         window.POSTCSS_PXTOREM_ROOT_VALUE = to.meta.rootValue;
diff --git a/src/views/mealSurplusInformation/mealSurplusInformation.vue b/src/views/mealSurplusInformation/mealSurplusInformation.vue
index 1a6a782..b6ed2a6 100644
--- a/src/views/mealSurplusInformation/mealSurplusInformation.vue
+++ b/src/views/mealSurplusInformation/mealSurplusInformation.vue
@@ -1,163 +1,215 @@
 <template>
     <div id="mealSurplusInformation">
-        <div class="title">
-            <div>{{ restName }}</div>
-            <div>餐品余量信息</div>
-            <div>{{ times }}  | {{ dinnerType }}</div>
+        <div class="header">
+            <div class="times">{{ times }}</div>
+            <div class="title">餐厅后厨智能看板</div>
+            <div class="meal">当前餐次：{{ dinnerType }}&emsp;{{ mealTime }}</div>
         </div>
-
         <div class="content">
-            <template v-for="(item, index) in list">
-                <div :class="['list', 'warning' + item.warningStatus]" @click="clickFood">
-                    <div class="index">{{ index < 9 ? '0' + (index + 1) : (index + 1)}}</div>
-                    <template v-if="item.warningStatus === 2">
-                        <div class="none">
-                            <div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
-                            <div class="accumulate">累计出餐 {{ item.initial }} kg</div>
+            <div class="content_l">
+                <template v-for="item in nutritionFoodList">
+                    <div :class="['content_l_list', item.class]">
+                        <div class="content_l_list_name">
+                            <div></div>
+                            <div>{{ item.foodName }}</div>
                         </div>
-                    </template>
-                    <template v-else>
-                        <div class="info">
-                            <div class="info_">
-                                <div class="info_l">
-                                    <template v-if="item.relativeUrl">
-                                        <img :src="item.relativeUrl" />
-                                    </template>
-                                </div>
-                                <div class="info_r">
-                                    <div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
-                                    <div class="accumulate">累计出餐 {{ item.initial }} kg</div>
-                                </div>
-                            </div>
+                        <div class="content_l_list_margin">
+                            当前余量
+                            <countTo
+                                :endVal="item.marginWeight_kg"
+                                separator=""
+                                :decimals="3"
+                                :duration="300"
+                            />
+                            kg
                         </div>
-                        <div class="remaining">
-                            <div class="remaining_">
-                                <template v-if="item.warningStatus === 0">当前余量 <span>{{ item.surplus }}</span> kg</template>
-                                <template v-if="item.warningStatus === 1">余量预警 <span>{{ item.surplus }}</span> kg 请备餐</template>
-                            </div>
+                        <div class="content_l_list_status">
+                            <template v-if="item.class === 'normal'">
+                                <div class="content_l_list_status_icon"></div>
+                                <div class="content_l_list_status_text">累计出餐</div>
+                            </template>
+                            <template v-if="item.class === 'warning'">
+                                <div class="content_l_list_status_icon"></div>
+                                <div class="content_l_list_status_text">餐品制作中</div>
+                            </template>
+                            <template v-if="item.class === 'danger'">
+                                <div class="content_l_list_status_icon"></div>
+                                <div class="content_l_list_status_text">低于阈值，请补餐</div>
+                            </template>
                         </div>
-                    </template>
+                        <div class="content_l_list_progress">
+                            <div :style="{'width': item.progress}"></div>
+                        </div>
+                    </div>
+                </template>
+
+<!--                <div class="content_l_list warning">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_icon"></div>-->
+<!--                        <div class="content_l_list_status_text">餐品制作中</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="content_l_list danger">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_icon"></div>-->
+<!--                        <div class="content_l_list_status_text">低于阈值，请补餐</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="content_l_list normal">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_text">累计出餐</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+            </div>
+            <div class="content_r">
+                <div class="content_r_title">
+                    <div></div>
+                    <div>当餐菜品生产计划</div>
                 </div>
-            </template>
+                <div class="content_r_content">
+                    <div class="content_r_content_table">
+                        <div class="content_r_content_table_head">
+                            <div>未制作</div>
+                            <div style="color: #F8A45A">{{ recipeFoodNotMadeList.length }}</div>
+                        </div>
+                        <div class="content_r_content_table_body">
+                            <template v-for="item in recipeFoodNotMadeList">
+                                <div style="color: #FFFFFF">
+                                    <div>{{ item }}</div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="content_r_content_table">
+                        <div class="content_r_content_table_head">
+                            <div>已制作</div>
+                            <div style="color: #5AF186">{{ recipeFoodProducedList.length }}</div>
+                        </div>
+                        <div class="content_r_content_table_body">
+                            <template v-for="item in recipeFoodProducedList">
+                                <div style="color: #869CC5">
+                                    <div>{{ item.foodName }}</div>
+                                    <div>{{ item.foodWeight_kg }}kg</div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import {httpRequest} from "@/XMLHttpRequest";
-import {getServeUrl} from "@/utils/serveUrl";
-import {token} from "@/utils/token";
+import countTo from "vue-count-to";
 import {getCurrentTime} from "@/utils/times";
+import {httpRequest} from "@/XMLHttpRequest";
 
 export default {
     name: "mealSurplusInformation",
+    components: {
+        countTo
+    },
     data() {
         return {
+            timer: null,
             times: getCurrentTime(),
 
-            restName: "",
-            dinnerType: "",
-            list: [],
+            dinnerType: "", // 餐次
+            mealTime: "",   // 餐次的时间
 
-            cols: 5,
-            selectedIndex: null
+            nutritionFoodList: [],  // 菜品数据
+            recipeFoodNotMadeList: [],  // 食谱菜品未制作
+            recipeFoodProducedList: [],   // 食谱菜品已制作
         }
     },
     created() {
-        this.getTime();
-        this.requestFoodReplenishWarningList();
+        this.getKitchenInfo();
     },
     methods: {
-        getTime() {
-            let this_ = this;
-            this_.times = getCurrentTime();
-            setTimeout(function () {
-                this_.getTime();
-            }, 1000)
-        },
-
-        setTimePlay() {
-            let this_ = this;
-            setTimeout(function () {
-                this_.requestFoodReplenishWarningList();
-            }, 10000);
-        },
-
-        requestFoodReplenishWarningList() {
-            let this_ = this;
+        getKitchenInfo() {
             let params = {};
-            let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/foodReplenishWarningList';
-            httpRequest('GET', url, params, {
-                'Authorization': token
-            }).then(function(res) {
-                if (res.success) {
-                    this_.restName = res.data.restName;
-                    this_.dinnerType = res.data.dinnerType;
-                    if(res.data.voList && res.data.voList.length) {
-                        res.data.voList.map(item => {
-                            item.relativeUrl = item.relativeUrl.replace("https", "http");
-                        })
+            httpRequest("GET", "https://dev.yixiong-tech.com:8081/terminal/neglect/large-screen/kitchen/info", params, {
+                "authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
+            }).then((res) => {
+                this.dinnerType = "";
+                this.mealTime = "";
+                this.nutritionFoodList = [];
+                this.recipeFoodNotMadeList = [];
+                this.recipeFoodProducedList = [];
+                if (res.code === "00000" && res.data) {
+                    this.dinnerType = res.data.dinnerType;
+                    if (res.data.mealTimeStart && res.data.mealTimeEnd) {
+                        this.mealTime = res.data.mealTimeStart + ' - '  + res.data.mealTimeEnd;
+                    }
+                    if (res.data.nutritionFoodList && res.data.nutritionFoodList.length) {
+                        res.data.nutritionFoodList.map(item => {
+                            if (item.marginWeight >= item.warningWeight) {
+                                item.class = "normal";
+                            }
+                            if (item.marginWeight < item.warningWeight && item.marginWeight >= item.dangerWeight) {
+                                item.class = "warning";
+                            }
+                            if (item.marginWeight < item.dangerWeight) {
+                                item.class = "danger";
+                            }
+                            item.marginWeight_kg = item.marginWeight / 1000;
+                            item.progress = (1 - item.marginWeight / item.foodWeight) * 100 + '%';
+                        });
+                        this.nutritionFoodList = res.data.nutritionFoodList;
+                    }
+                    if (res.data.recipeFoodNotMadeList && res.data.recipeFoodNotMadeList.length) {
+                        this.recipeFoodNotMadeList = res.data.recipeFoodNotMadeList;
+                    }
+                    if (res.data.recipeFoodProducedList && res.data.recipeFoodProducedList.length) {
+                        res.data.recipeFoodProducedList.map(item => {
+                            item.foodWeight_kg = item.foodWeight / 1000;
+                        });
+                        this.recipeFoodProducedList = res.data.recipeFoodProducedList;
                     }
-                    this_.list = res.data.voList;
-
-                    this_.setTimePlay();
-                } else {
-                    console.error(res.message);
                 }
-            }).catch(function(error) {
-                location.reload();
-                console.error('GET request error:', error);
-            });
-        },
-
-        selectFood(key) {
-            let cols = this.cols;
-            let list = this.list;
-            let selectedIndex = this.selectedIndex === null ? 0 : this.selectedIndex;
-            let rows = Math.ceil(list.length / cols);
-            // 19 上
-            if(key === 19) {
-                this.selectedIndex = selectedIndex - cols >= 0 ? selectedIndex - cols : selectedIndex;
-            }
-            // 21 左
-            if(key === 21) {
-                this.selectedIndex = selectedIndex % cols !== 0 ? selectedIndex - 1 : selectedIndex;
-            }
-            // 22 右
-            if(key === 22) {
-                this.selectedIndex = (selectedIndex + 1) % cols !== 0 && selectedIndex + 1 < list.length ? selectedIndex + 1 : selectedIndex;
-            }
-            // 20 下
-            if(key === 20) {
-                this.selectedIndex = selectedIndex + cols < rows * cols ? selectedIndex + cols : selectedIndex;
-            }
-        },
-
-        clickFood() {
-            let { selectedIndex, list } = this;
-            let this_ = this;
-            let params = {
-                foodId: list[selectedIndex].foodId
-            };
-            let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/updateStatusByFoodId';
-            httpRequest('GET', url, params, {
-                'Authorization': token
-            }).then(function(res) {
-                if (res.success) {
-                    this_.list[selectedIndex].warningStatus = res.data;
-                } else {
-                    console.error(res.message);
-                }
-            }).catch(function(error) {
-                location.reload();
-                console.error('GET request error:', error);
-            });
+            }).then(() => {}).finally(() => {
+                setTimeout(() => {
+                    this.getKitchenInfo();
+                }, 10000)
+            })
         }
     },
     mounted() {
-        window.selectFood = this.selectFood;
-        window.clickFood = this.clickFood;
+        this.timer = setInterval(() => {
+            this.times = getCurrentTime();
+        }, 1000);
     },
+    beforeDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
 }
 </script>
 
@@ -165,243 +217,369 @@ export default {
 #mealSurplusInformation {
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    background-color: #000A14;
+    display: flex;
+    flex-flow: column;
+    padding: 0 24px 24px;
+    box-sizing: border-box;
+    font-family: PingFangSC-Medium;
+    background-color: #051836;
 
-    .title {
+    .header {
         width: 100%;
-        height: 120px;
-        padding: 0 24px;
-        box-sizing: border-box;
+        height: 96px;
         display: flex;
-        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
 
-        > div:nth-of-type(1) {
-            flex: 1;
-            color: #FFFFFF;
+        .times {
+            color: #869CC5;
+            height: 96px;
             font-size: 18px;
-            height: 18px;
-            line-height: 18px;
+            line-height: 96px;
         }
 
-        > div:nth-of-type(2) {
-            flex: 1;
+        .title {
             color: #FFFFFF;
+            height: 96px;
             font-size: 40px;
-            height: 40px;
-            font-weight: bold;
-            line-height: 40px;
-            text-align: center;
+            font-weight: 500;
+            line-height: 96px;
         }
 
-        > div:nth-of-type(3) {
-            flex: 1;
-            color: #FFFFFF;
+        .meal {
+            color: #869CC5;
+            height: 96px;
             font-size: 18px;
-            height: 18px;
-            line-height: 18px;
-            text-align: right;
+            line-height: 96px;
         }
     }
 
     .content {
-        width: 100%;
-        padding: 0 24px;
-        box-sizing: border-box;
+        flex: 1;
+        overflow: hidden;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
 
-        .list {
-            overflow: hidden;
-            width: 355px;
-            height: 216px;
-            position: relative;
-            margin-bottom: 24px;
-            margin-right: calc((100% - 355px * 5) / 4);
-            border-radius: 12px;
-            border: 2px solid #5272D9;
-            background-color: #1A3467;
+        .content_l {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: flex-start;
+            column-gap: 24px;
+            row-gap: 24px;
 
-            .index {
-                width: 56px;
-                height: 56px;
-                position: absolute;
-                z-index: 2;
-                top: 0;
-                left: 0;
-                color: #FFFFFF;
-                font-size: 22px;
-                line-height: 50px;
-                padding-left: 10px;
+            .content_l_list {
+                width: 336px;
+                height: 222px;
+                padding: 24px 24px 0;
+                border-radius: 12px;
                 box-sizing: border-box;
-                font-weight: bold;
-                background-size: contain;
-                background-position: center;
-                background-repeat: no-repeat;
-                background-image: url("@/assets/images/mealSurplusInformation/index.png");
-            }
 
-            .none {
-                height: 100%;
-                padding-top: 70px;
-                box-sizing: border-box;
-                background-color: #0F1A29;
-
-                .name {
-                    color: #5A6478;
-                    width: 100%;
-                    height: 28px;
-                    font-size: 28px;
-                    line-height: 28px;
-                    font-weight: bold;
-                    text-align: center;
-                    margin-bottom: 25px;
-                }
-
-                .accumulate {
-                    color: #5A6478;
-                    width: 100%;
-                    height: 16px;
-                    font-size: 16px;
-                    font-weight: bold;
-                    line-height: 16px;
-                    text-align: center;
-                }
-            }
-
-            .info {
-                width: 100%;
-                padding: 22px 18px 0;
-                box-sizing: border-box;
-                margin-bottom: 24px;
-
-                .info_ {
+                .content_l_list_name {
                     width: 100%;
+                    height: 24px;
                     display: flex;
                     flex-wrap: nowrap;
+                    margin-bottom: 28px;
 
-                    .info_l {
-                        width: 80px;
-                        height: 80px;
-                        overflow: hidden;
-                        border-radius: 10px;
-                        margin-right: 10px;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                        }
+                    > div:nth-of-type(1) {
+                        width: 6px;
+                        height: 24px;
+                        border-radius: 3px;
+                        margin-right: 12px;
                     }
 
-                    .info_r {
-                        padding-top: 10px;
+                    > div:nth-of-type(2) {
                         flex: 1;
-                        width: 0;
+                        height: 24px;
+                        line-height: 24px;
+                        font-size: 20px;
+                    }
+                }
 
-                        .name {
-                            width: 100%;
-                            color: #FFFFFF;
-                            font-size: 28px;
-                            height: 28px;
-                            font-weight: bold;
-                            line-height: 28px;
-                            margin-bottom: 16px;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
+                .content_l_list_margin {
+                    width: 100%;
+                    height: 34px;
+                    font-size: 24px;
+                    line-height: 34px;
+                    text-align: center;
+                    margin-bottom: 22px;
+
+                    span {
+                        font-size: 34px;
+                        font-weight: bold;
+                    }
+                }
+
+                .content_l_list_status {
+                    width: 200px;
+                    height: 36px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 6px;
+                    margin: 0 auto 16px;
+
+                    .content_l_list_status_icon {
+                        width: 20px;
+                        height: 20px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        margin-right: 10px;
+                    }
+
+                    .content_l_list_status_text {
+                        height: 16px;
+                        font-size: 16px;
+                        line-height: 16px;
+                    }
+                }
+
+                .content_l_list_progress {
+                    width: 100%;
+                    height: 12px;
+                    border-radius: 6px;
+
+                    > div {
+                        height: 12px;
+                        transition: .3s;
+                        border-radius: 6px;
+                    }
+                }
+
+                &.normal {
+                    background-color: #1A3467;
+                    border: 2px solid #5272D9;
+
+                    .content_l_list_name {
+                        > div:nth-of-type(1) {
+                            background-color: #5272D9;
                         }
 
-                        .accumulate {
-                            width: 100%;
-                            color: #9DA8BA;
-                            font-size: 16px;
-                            height: 16px;
-                            line-height: 16px;
+                        > div:nth-of-type(2) {
+                            color: #FFFFFF;
+                        }
+                    }
+
+                    .content_l_list_margin {
+                        color: #FFFFFF;
+
+                        span {
+                            color: #5AF186;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        .content_l_list_status_text {
+                            color: #869CC5;
+                        }
+                    }
+
+                    .content_l_list_progress {
+                        background-color: rgba(90, 241, 134, .3);
+
+                        > div {
+                            background-color: #5AF186;
+                        }
+                    }
+                }
+
+                &.warning {
+                    background-color: #402200;
+                    border: 2px solid #5E4728;
+
+                    .content_l_list_name {
+                        > div:nth-of-type(1) {
+                            background-color: #F8A45A;
+                        }
+
+                        > div:nth-of-type(2) {
+                            color: #F6BD9E;
+                        }
+                    }
+
+                    .content_l_list_margin {
+                        color: #F6BD9E;
+
+                        span {
+                            color: #F8A45A;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        background-color: #5A2F00;
+
+                        .content_l_list_status_icon {
+                            background-image: url("@/assets/images/mealSurplusInformation/warning_status_icon.png");
+                        }
+
+                        .content_l_list_status_text {
+                            color: #F6BD9E;
+                        }
+                    }
+
+                    .content_l_list_progress {
+                        background-color: rgba(248, 164, 90, .3);
+
+                        > div {
+                            background-color: #F8A45A;
+                        }
+                    }
+                }
+
+                &.danger {
+                    background-color: #220203;
+                    border: 2px solid #FF3232;
+
+                    .content_l_list_name {
+                        > div:nth-of-type(1) {
+                            background-color: #FF3232;
+                        }
+
+                        > div:nth-of-type(2) {
+                            color: #FFC8C8;
+                        }
+                    }
+
+                    .content_l_list_margin {
+                        color: #FFC8C8;
+
+                        span {
+                            color: #FF3232;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        background-color: #5A0A0A;
+
+                        .content_l_list_status_icon {
+                            background-image: url("@/assets/images/mealSurplusInformation/danger_status_icon.png");
+                        }
+
+                        .content_l_list_status_text {
+                            color: #FF6464;
+                        }
+                    }
+
+                    .content_l_list_progress {
+                        background-color: rgba(200, 50, 50, .3);
+
+                        > div {
+                            background-color: #FF3232;
                         }
                     }
                 }
             }
+        }
 
-            .remaining {
+        .content_r {
+            width: 432px;
+            height: 100%;
+            padding: 24px;
+            display: flex;
+            flex-flow: column;
+            border-radius: 12px;
+            box-sizing: border-box;
+            border: 2px solid #2F415F;
+            background-color: #051836;
+
+            .content_r_title {
                 width: 100%;
-                padding: 0 10px;
-                box-sizing: border-box;
+                height: 24px;
+                display: flex;
+                flex-wrap: nowrap;
+                margin-bottom: 22px;
 
-                .remaining_ {
-                    color: #FFFFFF;
-                    font-size: 24px;
-                    font-weight: bold;
-                    width: 100%;
-                    height: 76px;
-                    line-height: 76px;
-                    border-radius: 8px;
-                    text-align: center;
-                    background-color: #0A2049;
+                > div:nth-of-type(1) {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 12px;
+                    background-repeat: no-repeat;
+                    background-position: center;
+                    background-size: contain;
+                    background-image: url("@/assets/images/mealSurplusInformation/content_r_icon.png");
+                }
 
-                     span {
-                         color: #B1FF89;
-                     }
+                > div:nth-of-type(2) {
+                    flex: 1;
+                    height: 24px;
+                    color: #5272D9;
+                    line-height: 24px;
+                    font-size: 20px;
+                    font-weight: 500;
                 }
             }
 
-            &:nth-of-type(5n) {
-                margin-right: 0;
-            }
-        }
+            .content_r_content {
+                flex: 1;
+                overflow: hidden;
 
-        @keyframes warn_animation {
-            0%   {
-                border: 2px solid #5272D9;
-                background-color: #1A3467;
-            }
-            50% {
-                border: 2px solid #DC2828;
-                background-color: #7F1520;
-            }
-            100%   {
-                border: 2px solid #5272D9;
-                background-color: #1A3467;
-            }
-        }
+                .content_r_content_table {
+                    width: 100%;
+                    height: 50%;
+                    display: flex;
+                    flex-flow: column;
 
-        @keyframes accumulate_animation {
-            0%   {
-                color: #9DA8BA;
-            }
-            50% {
-                color: #FFC8C8;
-            }
-            100%   {
-                color: #9DA8BA;
-            }
-        }
+                    .content_r_content_table_head {
+                        width: 100%;
+                        height: 48px;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        padding: 0 24px;
+                        box-sizing: border-box;
+                        justify-content: space-between;
+                        border-radius: 6px;
+                        background-color: #2F415F;
+                        margin-bottom: 30px;
 
-        @keyframes remaining_animation {
-            0%   {
-                background-color: #0A2049;
-            }
-            50% {
-                background-color: #DC2828;
-            }
-            100%   {
-                background-color: #0A2049;
-            }
-        }
+                        > div {
+                            color: #FFFFFF;
+                            height: 48px;
+                            font-size: 18px;
+                            line-height: 48px;
+                        }
+                    }
 
-        .warning1 {
-            animation: warn_animation 1s infinite;
+                    .content_r_content_table_body {
+                        flex: 1;
+                        overflow: hidden;
+                        display: flex;
+                        flex-wrap: wrap;
+                        align-content: flex-start;
 
-            .accumulate {
-                animation: accumulate_animation 1s infinite;
+                        > div {
+                            flex: none;
+                            width: 50%;
+                            padding-left: 24px;
+                            box-sizing: border-box;
+                            height: 18px;
+                            display: flex;
+                            flex-wrap: nowrap;
+                            align-items: flex-end;
+                            margin-bottom: 22px;
+
+                            > div:nth-of-type(1) {
+                                height: 18px;
+                                font-size: 18px;
+                                line-height: 18px;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            > div:nth-of-type(2) {
+                                height: 14px;
+                                font-size: 14px;
+                                line-height: 14px;
+                                margin-left: 8px;
+                            }
+                        }
+                    }
+                }
             }
-
-            .remaining_ {
-                animation: remaining_animation 1s infinite;
-            }
-        }
-
-        .warning2 {
-            border: 2px solid #263249 !important;
         }
     }
 }