From 65bff6b56f44324d3bed0be919ec907a9844f1ef Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Tue, 1 Jul 2025 14:55:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dietaryNutritionTips2.vue                 | 1054 +++++++++--------
 .../dietaryNutritionTips5.vue                 | 1035 ++++++++--------
 2 files changed, 1106 insertions(+), 983 deletions(-)

diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
index 2e13551..858a47b 100644
--- a/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips2.vue
@@ -1,114 +1,102 @@
 <template>
     <div id="dietaryNutritionTips2">
-        <div class="tips">
-            <div></div>
-            <div>温馨提示</div>
-            <div></div>
-        </div>
-
-        <template v-if="personnelType === 'staff'">
-            <div class="title">
-                <div></div>
-                <div>
-                    <div>体重管理行动（员工）</div>
-                    <div>
-                        <div>{{ currentData }}</div>
-                        <div>
-                            活动开始第<span>{{ doingDay }}</span>天
-                        </div>
-                    </div>
+        <template v-if="list && list.length">
+            <div class="dietaryNutritionTips2-Content">
+                <div class="tips">
+                    <div></div>
+                    <div>温馨提示</div>
+                    <div></div>
                 </div>
-                <div></div>
-            </div>
 
-            <div class="content">
-                <div class="staff">
-                    <div class="staffHeader">
-                        <div>序号</div>
-                        <div>单位(部门)</div>
-                        <div>姓名</div>
-                        <div>体重管理得分</div>
-                    </div>
-                    <div class="staffContent" ref="staffContent">
-                        <div
-                            class="staff-list-wrapper"
-                            ref="staffList"
-                            :style="{
-                                transform: `translateY(${scrollPosition}px)`,
-                                transition: scrollAnimationDuration > 0 ? `transform ${scrollAnimationDuration}s linear` : 'none',
-                            }"
-                        >
-                            <template v-if="list && list.length">
-                                <div
-                                    class="staffContentList"
-                                    v-for="item in list"
-                                    :key="item.rank + item.departName + item.realName"
-                                >
-                                    <div>{{ item.rank }}</div>
-                                    <div>{{ item.departName }}</div>
-                                    <div>{{ item.realName }}</div>
-                                    <div>{{ item.value }}</div>
+                <template v-if="personnelType === 'staff'">
+                    <div class="title">
+                        <div></div>
+                        <div>
+                            <div>体重管理行动（员工）</div>
+                            <div>
+                                <div>{{ currentData }}</div>
+                                <div>
+                                    活动开始第<span>{{ doingDay }}</span>天
                                 </div>
-                            </template>
-                        </div>
-                        <template v-if="!list || list.length === 0">
-                            <div class="nullData">
-                                <div></div>
-                                <div>~ 暂无体重管理信息 ~</div>
                             </div>
-                        </template>
+                        </div>
+                        <div></div>
                     </div>
-                </div>
-            </div>
-        </template>
 
-        <template v-if="personnelType === 'department'">
-            <div class="title">
-                <div></div>
-                <div>
-                    <div>体重管理行动（部门）</div>
-                    <div>
-                        <div>{{ currentData }}</div>
-                        <div>
-                            活动开始第<span>{{ doingDay }}</span>天
+                    <div class="content">
+                        <div class="staff">
+                            <div class="staffHeader">
+                                <div>序号</div>
+                                <div>单位(部门)</div>
+                                <div>姓名</div>
+                                <div>体重管理得分</div>
+                            </div>
+                            <div class="staffContent" ref="staffContent">
+                                <div
+                                    class="staff-list-wrapper"
+                                    ref="staffList"
+                                    :style="{
+                                        transform: 'translateY(' + scrollPosition + 'px)',
+                                        transition: scrollAnimationDuration > 0 ? 'transform ' + scrollAnimationDuration + 's linear' : 'none',
+                                    }"
+                                >
+                                    <div class="staffContentList" v-for="item in list" :key="item.rank + item.departName + item.realName">
+                                        <div>{{ item.rank }}</div>
+                                        <div>{{ item.departName }}</div>
+                                        <div>{{ item.realName }}</div>
+                                        <div>{{ item.value }}</div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div></div>
-            </div>
+                </template>
 
-            <div class="content">
-                <div class="department">
-                    <div class="departmentHeader">
-                        <div>序号</div>
-                        <div>单位(部门)</div>
-                        <div>人均体重管理得分</div>
+                <template v-if="personnelType === 'department'">
+                    <div class="title">
+                        <div></div>
+                        <div>
+                            <div>体重管理行动（部门）</div>
+                            <div>
+                                <div>{{ currentData }}</div>
+                                <div>
+                                    活动开始第<span>{{ doingDay }}</span>天
+                                </div>
+                            </div>
+                        </div>
+                        <div></div>
                     </div>
-                    <div class="departmentContent">
-                        <template v-if="list && list.length">
-                            <template v-for="item in list">
-                                <div class="departmentContentList" :key="item.rank + item.orgName">
+
+                    <div class="content">
+                        <div class="department">
+                            <div class="departmentHeader">
+                                <div>序号</div>
+                                <div>单位(部门)</div>
+                                <div>人均体重管理得分</div>
+                            </div>
+                            <div class="departmentContent">
+                                <div class="departmentContentList" v-for="item in list" :key="item.rank + item.orgName">
                                     <div>{{ item.rank }}</div>
                                     <div>{{ item.orgName }}</div>
                                     <div>{{ item.value }}</div>
                                 </div>
-                            </template>
-                        </template>
-                        <template v-else>
-                            <div class="nullData">
-                                <div></div>
-                                <div>~ 暂无体重管理信息 ~</div>
                             </div>
-                        </template>
+                        </div>
                     </div>
+                </template>
+
+                <div class="footer">
+                    <div>公共事务中心</div>
+                    <div>开始时间：{{ startDay }}</div>
                 </div>
             </div>
         </template>
 
-        <div class="footer">
-            <div>公共事务中心</div>
-            <div>开始时间：{{ startDay }}</div>
-        </div>
+        <template v-else>
+            <div class="banner">
+                <div v-for="(banner, index) in bannerList" :key="index" :style="{ backgroundImage: 'url(' + banner + ')', display: index === bannerActiveIndex ? 'block' : 'none' }"></div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -123,12 +111,13 @@ export default {
             setTimeoutParams: {
                 status: true,
                 times: 15, // 页面切换的间隔时间，单位：秒
-                retryDelay: 5, // 错误或无数据时重试/切换的延迟时间，单位：秒
+                retryDelay: 5, // 错误或无数据时重试/切换的延迟时间，单位：秒 (现在也用于部门模式无数据时banner停留时间)
                 scrollDelay: 2, // 滚动前停顿时间，单位：秒
                 scrollEndDelay: 2, // 滚动结束后等待时间，单位：秒
                 initialRenderDelay: 100, // 首次渲染延迟，确保 DOM 准备好
                 maxRefRetry: 10, // 获取 ref 的最大重试次数
                 refRetryInterval: 100, // 获取 ref 的重试间隔，单位：毫秒
+                bannerInterval: 5, // banner 轮播的间隔时间，单位：秒 (仅用于staff模式无数据)
             },
 
             requestConfig: {
@@ -149,7 +138,7 @@ export default {
             pageChangeTimerId: null, // 用于页面切换或重试的定时器
             scrollDelayTimerId: null, // 用于滚动前停顿的定时器
             scrollFallbackTimerId: null, // 滚动动画的备用定时器
-
+            bannerTimerId: null, // 新增 banner 定时器ID，现在也用于部门模式下banner的短暂显示
             isRequesting: false, // 防止重复请求
             isScrolling: false, // 标志是否正在进行滚动动画
 
@@ -162,30 +151,43 @@ export default {
             refRetryCount: 0, // 记录 $refs 获取的重试次数
             mutationObserver: null, // MutationObserver 实例
             mutationObserverDebounceTimer: null, // MutationObserver 防抖定时器
+
+            // 示例 banner 图片列表，请根据实际情况替换或从接口获取
+            bannerList: [
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/1.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/2.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/3.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/4.jpg',
+            ],
+            bannerActiveIndex: 0,
         };
     },
     created: function () {
-        const _this = this;
+        var _this = this;
 
-        let url = _this.$route.query.url;
+        var url = _this.$route.query.url;
         if (url) {
             _this.requestConfig.url = Array.isArray(url) ? url[0] : url;
         }
-        let code = _this.$route.query.orgCode;
+        var code = _this.$route.query.orgCode;
         if (code) {
             _this.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
         }
+        var canteenId = _this.$route.query.canteenId;
+        if (canteenId) {
+            _this.requestConfig.canteenId = Array.isArray(canteenId) ? canteenId[0] : canteenId;
+        }
         _this.currentData = getCurrentDate();
 
         // 绑定页面可见性监听器
         document.addEventListener("visibilitychange", _this.handleVisibilityChange);
 
         // 组件创建后，首次启动流程时增加一个小的延迟，确保 DOM 结构基本准备好
-        _this.pageChangeTimerId = setTimeout(() => {
+        _this.pageChangeTimerId = setTimeout(function () {
             _this.startSequentialLoading();
         }, _this.setTimeoutParams.initialRenderDelay);
     },
-    mounted() {
+    mounted: function () {
         // 在 mounted 钩子中初始化 MutationObserver
         this.setupMutationObserver();
     },
@@ -193,7 +195,7 @@ export default {
         /**
          * 调用 Android 端的 postLog 方法，用于调试日志输出
          */
-        callAndroidPostLog(content) {
+        callAndroidPostLog: function (content) {
             // Android 接口检查
             if (typeof window.Android !== 'undefined' && window.Android.postLog) {
                 try {
@@ -209,24 +211,25 @@ export default {
         /**
          * 设置 MutationObserver 来监控关键元素的 DOM 变化
          */
-        setupMutationObserver: function() {
-            const _this = this;
+        setupMutationObserver: function () {
+            var _this = this;
             // 确保只设置一次
             if (_this.mutationObserver) return;
 
-            const targetNode = _this.$el; // 监控组件的根元素
-            const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
+            var targetNode = _this.$el; // 监控组件的根元素
+            var config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
 
-            _this.mutationObserver = new MutationObserver((mutationsList) => {
+            _this.mutationObserver = new MutationObserver(function (mutationsList) {
                 // 添加防抖，避免过于频繁的触发
                 clearTimeout(_this.mutationObserverDebounceTimer);
-                _this.mutationObserverDebounceTimer = setTimeout(() => {
-                    for (let mutation of mutationsList) {
+                _this.mutationObserverDebounceTimer = setTimeout(function () {
+                    for (var i = 0; i < mutationsList.length; i++) {
+                        var mutation = mutationsList[i];
                         if (mutation.type === 'childList' || mutation.type === 'attributes') {
                             // 只有在非滚动状态且页面可见时，才考虑处理 Mutation。
                             // 这里的逻辑依然是辅助性监控，不直接触发关键流程，减少干扰。
                             if (_this.personnelType === 'staff' && _this.isPageVisible && !_this.isScrolling && _this.list.length > 0) {
-                                _this.callAndroidPostLog(`MutationObserver 触发 (防抖后)。类型: ${mutation.type}`);
+                                _this.callAndroidPostLog("MutationObserver 触发 (防抖后)。类型: " + mutation.type);
                                 // 实际的滚动启动在 loadDataSequential 的 nextTick 中。
                                 // 此处可以根据需要添加更具体的异常处理或重新评估逻辑。
                             }
@@ -247,8 +250,8 @@ export default {
          * 页面可见性处理
          */
         handleVisibilityChange: function () {
-            const _this = this;
-            const listWrapperEl = _this.$refs.staffList;
+            var _this = this;
+            var listWrapperEl = _this.$refs.staffList;
 
             if (document.hidden) {
                 _this.isPageVisible = false;
@@ -271,9 +274,9 @@ export default {
         /**
          * 统一清除所有定时器和滚动状态
          */
-        clearAllTimers: function() {
-            const _this = this;
-            _this.callAndroidPostLog(`>>> 清理定时器 | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId} | isScrolling=${_this.isScrolling}`);
+        clearAllTimers: function () {
+            var _this = this;
+            _this.callAndroidPostLog(">>> 清理定时器 | pageChangeTimerId=" + _this.pageChangeTimerId + " | scrollDelayTimerId=" + _this.scrollDelayTimerId + " | scrollFallbackTimerId=" + _this.scrollFallbackTimerId + " | bannerTimerId=" + _this.bannerTimerId + " | isScrolling=" + _this.isScrolling);
 
             if (_this.pageChangeTimerId) {
                 clearTimeout(_this.pageChangeTimerId);
@@ -290,6 +293,15 @@ export default {
                 _this.scrollFallbackTimerId = null;
                 _this.callAndroidPostLog("清除 scrollFallbackTimerId。");
             }
+            if (_this.bannerTimerId) { // 清除 banner 定时器 (可以是 setInterval 或 setTimeout)
+                // 检查是哪种定时器，进行清除
+                // 注意：在 ES5 中无法直接判断是 setTimeout 还是 setInterval
+                // 通常我们会用clearInterval清除setInterval，用clearTimeout清除setTimeout
+                // 但两者都可以使用clearTimeout清除，为了兼容性，统一使用clearTimeout
+                clearTimeout(_this.bannerTimerId); // clearAllTimers 统一用 clearTimeout 是安全的
+                _this.bannerTimerId = null;
+                _this.callAndroidPostLog("清除 bannerTimerId。");
+            }
             if (_this.mutationObserverDebounceTimer) {
                 clearTimeout(_this.mutationObserverDebounceTimer);
                 _this.mutationObserverDebounceTimer = null;
@@ -298,7 +310,7 @@ export default {
 
             _this.isScrolling = false; // 确保滚动状态被重置
 
-            const listWrapperEl = _this.$refs.staffList;
+            var listWrapperEl = _this.$refs.staffList;
             if (listWrapperEl && _this.onTransitionEndHandlerRef) {
                 listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
                 _this.onTransitionEndHandlerRef = null; // 清除引用
@@ -311,7 +323,7 @@ export default {
          * 页面切换回调函数，用于在员工和部门模式之间切换。
          */
         pageTimerCallback: function () {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("pageTimerCallback 被调用。");
             if (!_this.isPageVisible) {
                 _this.callAndroidPostLog("页面不可见，暂停 pageTimerCallback 内部执行。");
@@ -319,7 +331,7 @@ export default {
             }
             _this.refRetryCount = 0; // 每次切换页面或加载数据前重置重试计数
             _this.personnelType = _this.personnelType === "department" ? "staff" : "department";
-            _this.callAndroidPostLog(`切换到模式：${_this.personnelType}。`);
+            _this.callAndroidPostLog("切换到模式：" + _this.personnelType + "。");
             _this.startSequentialLoading();
         },
 
@@ -328,7 +340,7 @@ export default {
          * 根据当前人员类型设置 pageSize，并调用数据加载方法。
          */
         startSequentialLoading: function () {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("startSequentialLoading 被调用。");
             if (!_this.isPageVisible) {
                 _this.callAndroidPostLog("页面不可见，暂停 startSequentialLoading 内部执行。");
@@ -337,13 +349,13 @@ export default {
 
             _this.clearAllTimers(); // 确保在启动新流程前清除所有旧的定时器
 
-            _this.list = []; // 清空列表，准备加载新数据
+            //_this.list = []; // 清空列表，准备加载新数据
             if (_this.personnelType === "staff") {
                 _this.pageSize = 45;
             } else {
                 _this.pageSize = 10;
             }
-            _this.callAndroidPostLog(`设置 pageSize: ${_this.pageSize}。`);
+            _this.callAndroidPostLog("设置 pageSize: " + _this.pageSize + "。");
             _this.loadDataSequential();
         },
 
@@ -351,9 +363,9 @@ export default {
          * 加载数据并根据人员类型处理滚动或定时器。
          */
         loadDataSequential: function () {
-            const _this = this;
-            let urlPrefix = "/health-intervene/api/anon";
-            let apiUrl = "";
+            var _this = this;
+            var urlPrefix = "/health-intervene/api/anon";
+            var apiUrl = "";
 
             _this.callAndroidPostLog("loadDataSequential 被调用。");
             if (!_this.isPageVisible) {
@@ -370,55 +382,69 @@ export default {
 
             apiUrl = urlPrefix + (_this.personnelType === "staff" ? "/userRank" : "/deptRank");
             let requestUrl = _this.requestConfig.agreement + "://" + _this.requestConfig.url + apiUrl + "?orgCode=" + _this.requestConfig.orgCode + "&pageNo=1&pageSize=" + _this.pageSize;
-            _this.callAndroidPostLog(`发起请求：${requestUrl}`);
+            _this.callAndroidPostLog("发起请求：" + requestUrl);
 
-            httpRequest("POST", requestUrl, {}, {})
-                .then(
-                    (res) => {
-                        _this.callAndroidPostLog(`请求返回：${JSON.stringify(res)}`);
-                        if (res.success && res.result && res.result.rankList && res.result.rankList.length > 0) { // 确保有数据才赋值和滚动
-                            _this.doingDay = res.result.doingDay === null ? "-" : res.result.doingDay;
-                            _this.list = res.result.rankList; // 更新列表数据
-                            _this.startDay = res.result.startDay ? res.result.startDay : "-";
-                            _this.callAndroidPostLog(`数据加载成功，列表长度：${_this.list.length}。`);
+            httpRequest("POST", requestUrl, {}, {}).then((res) => {
+                _this.callAndroidPostLog("请求返回：" + JSON.stringify(res));
+                if (res.success && res.result) {
+                    _this.doingDay = res.result.doingDay === null ? "-" : res.result.doingDay;
+                    var dataKey = _this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
+                    var dataList = res.result[dataKey];
 
-                            _this.$nextTick(() => {
-                                // 只有在 staff 模式且有数据时才尝试滚动
-                                if (_this.personnelType === "staff" && _this.list.length > 0) {
-                                    _this.refRetryCount = 0; // 每次尝试滚动前重置重试计数
-                                    _this.startSingleScroll();
-                                } else {
-                                    // 部门模式或员工无数据，直接设置页面切换定时器
-                                    _this.callAndroidPostLog("无需滚动或无数据，设置页面切换定时器。");
-                                    _this.pageChangeTimerId = setTimeout(
-                                        _this.pageTimerCallback,
-                                        _this.setTimeoutParams.times * 1000
-                                    );
-                                }
-                            });
-                        } else {
-                            _this.list = []; // 数据不成功或无数据时清空列表
-                            _this.callAndroidPostLog("请求成功但数据无效或为空，将在 " + _this.setTimeoutParams.retryDelay + " 秒后重试/切换。");
-                            _this.pageChangeTimerId = setTimeout(
-                                _this.pageTimerCallback,
-                                _this.setTimeoutParams.retryDelay * 1000
-                            );
-                        }
-                    },
-                    (error) => { // 添加错误回调
-                        _this.callAndroidPostLog("请求失败: " + JSON.stringify(error));
-                        _this.list = []; // 请求失败时清空列表
-                        _this.callAndroidPostLog('请求失败，将在 ' + _this.setTimeoutParams.retryDelay + ' 秒后重试/切换。');
-                        _this.pageChangeTimerId = setTimeout(
-                            _this.pageTimerCallback,
-                            _this.setTimeoutParams.retryDelay * 1000
-                        );
+                    if (dataList && dataList.length > 0) { // 确保有数据才赋值和滚动
+                        _this.dinnerType = res.result.dinnerType === null ? "-" : res.result.dinnerType;
+                        _this.userNum = res.result.userNum === null ? "-" : res.result.userNum;
+                        _this.list = dataList; // 更新列表数据
+                        _this.startDay = res.result.startDay ? _this.formatISODateToChinese(res.result.startDay) : "-"; // 更新列表数据
+                        _this.callAndroidPostLog("数据加载成功，列表长度：" + _this.list.length + "。");
+
+                        _this.$nextTick(function () {
+                            // 只有在 staff 模式且有数据时才尝试滚动
+                            if (_this.personnelType === "staff") {
+                                _this.refRetryCount = 0; // 每次尝试滚动前重置重试计数
+                                _this.startSingleScroll();
+                            } else {
+                                // 部门模式有数据，直接设置页面切换定时器
+                                _this.callAndroidPostLog("部门模式有数据，设置页面切换定时器。");
+                                _this.pageChangeTimerId = setTimeout(
+                                    _this.pageTimerCallback,
+                                    _this.setTimeoutParams.times * 1000
+                                );
+                            }
+                        });
+                    } else {
+                        // 无论 staff 还是 department，只要数据为空，就展示 banner 并根据当前模式决定下一步
+                        _this.list = []; // 数据为空时清空列表
+                        _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 数据为空，开始处理banner/切换。");
+                        _this.startBannerLoop();
                     }
-                )
-                .then(() => { // 使用 .then() 替代 .finally()，无论成功或失败都会执行
-                    _this.isRequesting = false;
-                    _this.callAndroidPostLog("请求结束，isRequesting 设置为 false。");
-                });
+                } else {
+                    // 无论 staff 还是 department，只要请求成功但结果无效，就展示 banner 并根据当前模式决定下一步
+                    _this.list = []; // 请求成功但res.result无效时清空列表
+                    _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 请求成功但结果无效，开始处理banner/切换。");
+                    _this.startBannerLoop();
+                }
+            },function (error) { // 添加错误回调
+                _this.callAndroidPostLog("请求失败: " + JSON.stringify(error));
+                // 无论 staff 还是 department，只要请求失败，就展示 banner 并根据当前模式决定下一步
+                _this.list = []; // 请求失败时清空列表
+                _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 请求失败，开始处理banner/切换。");
+                _this.startBannerLoop();
+            }).then(function () { // 使用 .then() 替代 .finally()，无论成功或失败都会执行
+                _this.isRequesting = false;
+                _this.callAndroidPostLog("请求结束，isRequesting 设置为 false。");
+            });
+        },
+
+        /**
+         * 格式化 ISO 日期字符串为中文年月日
+         */
+        formatISODateToChinese: function (dateString) {
+            var parts = dateString.split('-');
+            var year = parts[0];
+            var month = parts[1];
+            var day = parts[2];
+            return year + "年" + month + "月" + day + "日";
         },
 
         /**
@@ -426,11 +452,11 @@ export default {
          * 确保滚动容器和列表元素已就绪。
          */
         startSingleScroll: function () {
-            const _this = this;
-            const contentEl = _this.$refs.staffContent; // 滚动容器
-            const listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
+            var _this = this;
+            var contentEl = _this.$refs.staffContent; // 滚动容器
+            var listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
 
-            _this.callAndroidPostLog(`>>> 开始滚动 | isScrolling=${_this.isScrolling} | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId}`);
+            _this.callAndroidPostLog(">>> 开始滚动 | isScrolling=" + _this.isScrolling + " | pageChangeTimerId=" + _this.pageChangeTimerId + " | scrollDelayTimerId=" + _this.scrollDelayTimerId + " | scrollFallbackTimerId=" + _this.scrollFallbackTimerId);
             _this.callAndroidPostLog("startSingleScroll 被调用。");
 
             if (!_this.isPageVisible) {
@@ -441,12 +467,12 @@ export default {
 
             // **重试机制：如果 refs 未就绪，进行重试**
             if (!contentEl || !listWrapperEl || contentEl.clientHeight === 0 || listWrapperEl.offsetHeight === 0) {
-                _this.callAndroidPostLog(`Refs未就绪或尺寸为0。contentEl: ${contentEl}, listWrapperEl: ${listWrapperEl}, contentHeight: ${contentEl ? contentEl.clientHeight : 'N/A'}, listHeight: ${listWrapperEl ? listWrapperEl.offsetHeight : 'N/A'}`);
+                _this.callAndroidPostLog("Refs未就绪或尺寸为0。contentEl: " + contentEl + ", listWrapperEl: " + listWrapperEl + ", contentHeight: " + (contentEl ? contentEl.clientHeight : 'N/A') + ", listHeight: " + (listWrapperEl ? listWrapperEl.offsetHeight : 'N/A'));
 
                 if (_this.refRetryCount < _this.setTimeoutParams.maxRefRetry) {
                     _this.refRetryCount++;
-                    _this.callAndroidPostLog(`尝试获取refs，重试次数：${_this.refRetryCount}/${_this.setTimeoutParams.maxRefRetry}。将在 ${_this.setTimeoutParams.refRetryInterval}ms 后重试。`);
-                    _this.scrollDelayTimerId = setTimeout(() => { // 使用 scrollDelayTimerId
+                    _this.callAndroidPostLog("尝试获取refs，重试次数：" + _this.refRetryCount + "/" + _this.setTimeoutParams.maxRefRetry + "。将在 " + _this.setTimeoutParams.refRetryInterval + "ms 后重试。");
+                    _this.scrollDelayTimerId = setTimeout(function () { // 使用 scrollDelayTimerId
                         _this.startSingleScroll(); // 再次尝试启动滚动
                     }, _this.setTimeoutParams.refRetryInterval);
                     return; // 退出当前函数，等待重试
@@ -466,14 +492,14 @@ export default {
             // **核心优化：在开始动画前，确保清理旧的动画状态和监听器**
             _this.clearScrollAnimationState(listWrapperEl);
 
-            let contentHeight = contentEl.clientHeight; // 容器的可见高度
-            let actualListHeight = 0;
+            var contentHeight = contentEl.clientHeight; // 容器的可见高度
+            var actualListHeight = 0;
 
             // 确保列表项已经渲染，才能获取其高度
             if (listWrapperEl.children.length > 0) {
                 // 计算实际总高度（包括所有列表项和它们之间的 margin-bottom）
-                for(let i=0; i<listWrapperEl.children.length; i++){
-                    let child = listWrapperEl.children[i];
+                for(var i=0; i<listWrapperEl.children.length; i++){
+                    var child = listWrapperEl.children[i];
                     actualListHeight += child.offsetHeight + parseFloat(window.getComputedStyle(child).marginBottom);
                 }
                 // 减去最后一个元素的 margin-bottom，因为它下面没有其他元素
@@ -481,7 +507,7 @@ export default {
                     actualListHeight -= parseFloat(window.getComputedStyle(listWrapperEl.children[listWrapperEl.children.length - 1]).marginBottom);
                 }
 
-                _this.callAndroidPostLog(`容器高度: ${contentHeight}px, 实际列表总高度: ${actualListHeight}px。`);
+                _this.callAndroidPostLog("容器高度: " + contentHeight + "px, 实际列表总高度: " + actualListHeight + "px。");
             } else {
                 _this.callAndroidPostLog("staffList内部无子元素，无法计算滚动高度。将切换页面。");
                 // 无列表项时也直接切换页面
@@ -499,17 +525,17 @@ export default {
             }
 
             _this.isScrolling = true;
-            let scrollDistance = actualListHeight - contentHeight;
-            let scrollSpeed = 40; // 像素/秒
+            var scrollDistance = actualListHeight - contentHeight;
+            var scrollSpeed = 40; // 像素/秒
             _this.scrollAnimationDuration = scrollDistance / scrollSpeed;
-            _this.callAndroidPostLog(`计算滚动距离：${scrollDistance}px，动画时长：${_this.scrollAnimationDuration}s。`);
+            _this.callAndroidPostLog("计算滚动距离：" + scrollDistance + "px，动画时长：" + _this.scrollAnimationDuration + "s。");
 
             // --- 滚动前停顿 ---
             _this.scrollDelayTimerId = setTimeout( // 使用 scrollDelayTimerId
-                () => {
+                function () {
                     _this.callAndroidPostLog("滚动前停顿结束，准备执行动画。");
                     if (window.requestAnimationFrame) {
-                        window.requestAnimationFrame(() => {
+                        window.requestAnimationFrame(function () {
                             _this.performScrollAnimation(listWrapperEl, scrollDistance);
                         });
                     } else {
@@ -523,8 +549,8 @@ export default {
         /**
          * 清理滚动动画相关的CSS属性和事件监听器
          */
-        clearScrollAnimationState: function(listWrapperEl) {
-            const _this = this;
+        clearScrollAnimationState: function (listWrapperEl) {
+            var _this = this;
             // 移除任何旧的 transitionend 监听器，防止重复绑定
             if (_this.onTransitionEndHandlerRef) {
                 listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
@@ -534,16 +560,16 @@ export default {
             // 清除之前的动画效果，并重置位置
             listWrapperEl.style.transition = "none";
             _this.scrollPosition = 0; // 重置位置到顶部
-            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`;
+            listWrapperEl.style.transform = "translateY(" + _this.scrollPosition + "px)";
             // 强制浏览器重绘/回流，确保 'transition: none' 立即生效，防止动画闪烁
             void listWrapperEl.offsetWidth;
             _this.callAndroidPostLog("已清除旧动画状态并重置滚动位置。");
         },
 
         // 统一处理 transitionend 事件，方便移除监听器
-        onTransitionEnd: function(event) {
-            const _this = this;
-            const listWrapperEl = _this.$refs.staffList;
+        onTransitionEnd: function (event) {
+            var _this = this;
+            var listWrapperEl = _this.$refs.staffList;
             _this.callAndroidPostLog("onTransitionEnd triggered.");
             // 检查事件是否来自正确的元素和正确的属性，避免其他transition影响
             if (event.target === listWrapperEl && event.propertyName === 'transform') {
@@ -559,7 +585,7 @@ export default {
                     _this.pageTimerCallback,
                     _this.setTimeoutParams.scrollEndDelay * 1000
                 );
-                _this.callAndroidPostLog(`设置 pageChangeTimerId，将在 ${_this.setTimeoutParams.scrollEndDelay} 秒后调用 pageTimerCallback。`);
+                _this.callAndroidPostLog("设置 pageChangeTimerId，将在 " + _this.setTimeoutParams.scrollEndDelay + " 秒后调用 pageTimerCallback。");
 
                 // 动画完成后，再次确保移除监听器，防止重复触发
                 if (_this.onTransitionEndHandlerRef) {
@@ -568,12 +594,12 @@ export default {
                     _this.callAndroidPostLog("移除 transitionend 监听器。");
                 }
             } else {
-                _this.callAndroidPostLog(`onTransitionEnd triggered by unexpected target or property: ${event.target.tagName}, ${event.propertyName}`);
+                _this.callAndroidPostLog("onTransitionEnd triggered by unexpected target or property: " + event.target.tagName + ", " + event.propertyName);
             }
         },
 
         performScrollAnimation: function (listWrapperEl, scrollDistance) {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("performScrollAnimation 被调用。");
 
             // 再次确保在设置新监听器前移除旧的
@@ -585,30 +611,30 @@ export default {
 
             // 设置目标位置（负值表示向上滚动）
             _this.scrollPosition = -scrollDistance;
-            listWrapperEl.style.transition = `transform ${_this.scrollAnimationDuration}s linear`;
-            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`; // 立即应用样式
+            listWrapperEl.style.transition = "transform " + _this.scrollAnimationDuration + "s linear";
+            listWrapperEl.style.transform = "translateY(" + _this.scrollPosition + "px)"; // 立即应用样式
 
-            _this.callAndroidPostLog(`开始滚动动画。目标位置：${_this.scrollPosition}px，时长：${_this.scrollAnimationDuration}s`);
+            _this.callAndroidPostLog("开始滚动动画。目标位置：" + _this.scrollPosition + "px，时长：" + _this.scrollAnimationDuration + "s");
 
             // **优化：更可靠的备用定时器，在动画预期结束时间后触发**
             // 这个定时器会在动画正常完成（`transitionend` 触发并清除它）或动画未完成时触发
             _this.scrollFallbackTimerId = setTimeout(
-                () => {
+                function () {
                     _this.callAndroidPostLog("备用定时器触发！TransitionEnd 可能未正常触发或动画完成但流程卡顿。强制进入下一流程。");
                     // 即使动画被中断或未触发 transitionend，也强制执行清理和切换逻辑
                     _this.forceNextStepAfterScroll(listWrapperEl);
                 },
                 (_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay) * 1000 + 500 // 动画持续时间 + 动画结束后等待时间 + 0.5秒缓冲
             );
-            _this.callAndroidPostLog(`设置 scrollFallbackTimerId，将在 ${(_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay + 0.5)} 秒后触发。`);
+            _this.callAndroidPostLog("设置 scrollFallbackTimerId，将在 " + (_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay + 0.5) + " 秒后触发。");
         },
 
         /**
          * 强制进入滚动动画后的下一个流程
          * 用于 transitionend 未触发时的备用方案
          */
-        forceNextStepAfterScroll: function(listWrapperEl) {
-            const _this = this;
+        forceNextStepAfterScroll: function (listWrapperEl) {
+            var _this = this;
             _this.callAndroidPostLog("forceNextStepAfterScroll 被调用。");
             // 清理所有相关定时器，防止多重触发
             _this.clearAllTimers();
@@ -621,15 +647,74 @@ export default {
 
             // 直接调用页面切换逻辑，避免卡住
             _this.pageTimerCallback();
-        }
+        },
+
+        maskUserName: function (fullName) {
+            if (!fullName || typeof fullName !== 'string' || fullName.length === 0) {
+                return '';
+            }
+
+            var len = fullName.length;
+
+            if (len === 1) {
+                return fullName;
+            } else if (len === 2) {
+                return fullName.charAt(0) + '*';
+            } else {
+                var firstChar = fullName.charAt(0);
+                var lastChar = fullName.charAt(len - 1);
+                var maskedPart = '*'.repeat(len - 2); // Note: String.prototype.repeat is ES6, may need polyfill for older IE. If not available, use a loop.
+                return firstChar + maskedPart + lastChar;
+            }
+        },
+
+        /**
+         * 开始 banner 轮播循环或显示短暂 banner 后切换
+         */
+        startBannerLoop: function () {
+            var _this = this;
+            _this.callAndroidPostLog("startBannerLoop 被调用，当前模式：" + _this.personnelType);
+            _this.clearAllTimers(); // 确保在开始 banner 轮播前清除所有其他定时器
+
+            if (!_this.bannerList || _this.bannerList.length === 0) {
+                _this.callAndroidPostLog("bannerList 为空或未定义，无法展示 banner，直接切换到下一个模式。");
+                // 如果没有 banner 图，直接切换到下一个模式
+                if (_this.personnelType === 'staff') {
+                    _this.personnelType = 'department';
+                } else {
+                    _this.personnelType = 'staff';
+                }
+                _this.pageChangeTimerId = setTimeout(_this.startSequentialLoading, _this.setTimeoutParams.retryDelay * 1000);
+                return;
+            }
+
+            // 确保显示第一个 banner
+            _this.bannerActiveIndex = 0;
+
+            _this.callAndroidPostLog("员工模式无数据，启动 banner 轮播（完整循环）。");
+            _this.bannerTimerId = setInterval(function () {
+                _this.bannerActiveIndex = (_this.bannerActiveIndex + 1) % _this.bannerList.length;
+                _this.callAndroidPostLog("切换 banner 到索引：" + _this.bannerActiveIndex);
+
+                // 当轮播回到第一个 banner 时，认为完成一轮，可以切换到部门模式并请求数据
+                if (_this.bannerActiveIndex === 0) {
+                    _this.callAndroidPostLog("Banner 轮播完成一轮（员工模式），将切换到部门模式并请求数据。");
+                    clearInterval(_this.bannerTimerId); // 清除当前的 setInterval
+                    _this.bannerTimerId = null;
+                    _this.personnelType = _this.personnelType === 'staff' ? 'department' : 'staff';
+                    _this.startSequentialLoading(); // 立即请求部门数据
+                }
+            }, _this.setTimeoutParams.bannerInterval * 1000); // 根据 bannerInterval 设置轮播间隔
+            _this.callAndroidPostLog("Banner 轮播（员工模式）已启动，间隔：" + _this.setTimeoutParams.bannerInterval + " 秒。");
+        },
     },
     beforeDestroy: function () {
-        const _this = this;
+        var _this = this;
         _this.callAndroidPostLog("组件即将销毁，执行 beforeDestroy。");
         _this.clearAllTimers(); // 清除所有定时器
 
         // 确保在组件销毁时，正在进行的 CSS 动画被停止并归位
-        const listWrapperEl = _this.$refs.staffList;
+        var listWrapperEl = _this.$refs.staffList;
         if (listWrapperEl) {
             listWrapperEl.style.transition = "none";
             listWrapperEl.style.transform = "translateY(0px)";
@@ -658,218 +743,173 @@ export default {
 </script>
 
 <style scoped lang="less">
-/* 样式部分保持不变 */
 #dietaryNutritionTips2 {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 44px 40px 0;
-    box-sizing: border-box;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center top;
     background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
 
-    .tips {
+    .dietaryNutritionTips2-Content {
         width: 100%;
-        height: 36px;
+        height: 100%;
+        overflow: hidden;
         display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 96px;
+        flex-direction: column;
+        padding: 44px 40px 0;
+        box-sizing: border-box;
 
-        > div:nth-of-type(1) {
-            width: 120px;
-            height: 4px;
-            background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
-            border-radius: 2px;
-        }
-
-        > div:nth-of-type(2) {
-            color: #ffc87c;
+        .tips {
+            width: 100%;
             height: 36px;
-            font-size: 36px;
-            font-weight: bold;
-            line-height: 36px;
-            margin: 0 36px;
-        }
-
-        > div:nth-of-type(3) {
-            width: 120px;
-            height: 4px;
-            background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
-            border-radius: 2px;
-        }
-    }
-
-    .title {
-        width: 100%;
-        height: 182px;
-        position: fixed;
-        top: 85px;
-        left: 0;
-        right: 0;
-        z-index: 3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        > div:nth-of-type(1) {
-            width: 86px;
-            height: 182px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-image: url("@/assets/images/dietaryNutritionTips/l.png");
-        }
-
-        > div:nth-of-type(2) {
-            width: 720px;
-            height: 136px;
-            padding: 18px 30px 0;
-            border-radius: 24px;
-            box-sizing: border-box;
-            background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 96px;
 
             > div:nth-of-type(1) {
-                color: #8d0503;
-                width: 100%;
-                height: 48px;
-                font-size: 48px;
-                font-weight: bold;
-                line-height: 48px;
-                text-align: center;
-                margin-bottom: 12px;
+                width: 120px;
+                height: 4px;
+                background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+                border-radius: 2px;
             }
 
             > div:nth-of-type(2) {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                flex-wrap: nowrap;
-                justify-content: space-between;
-                align-items: flex-end;
+                color: #ffc87c;
+                height: 36px;
+                font-size: 36px;
+                font-weight: bold;
+                line-height: 36px;
+                margin: 0 36px;
+            }
+
+            > div:nth-of-type(3) {
+                width: 120px;
+                height: 4px;
+                background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+                border-radius: 2px;
+            }
+        }
+
+        .title {
+            width: 100%;
+            height: 182px;
+            position: fixed;
+            top: 85px;
+            left: 0;
+            right: 0;
+            z-index: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            > div:nth-of-type(1) {
+                width: 86px;
+                height: 182px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-image: url("@/assets/images/dietaryNutritionTips/l.png");
+            }
+
+            > div:nth-of-type(2) {
+                width: 720px;
+                height: 136px;
+                padding: 18px 30px 0;
+                border-radius: 24px;
+                box-sizing: border-box;
+                background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
 
                 > div:nth-of-type(1) {
                     color: #8d0503;
-                    height: 32px;
-                    font-size: 30px;
-                    line-height: 32px;
+                    width: 100%;
+                    height: 48px;
+                    font-size: 48px;
+                    font-weight: bold;
+                    line-height: 48px;
+                    text-align: center;
+                    margin-bottom: 12px;
                 }
 
                 > div:nth-of-type(2) {
-                    color: #8d0503;
-                    height: 40px;
-                    font-size: 30px;
-                    line-height: 40px;
-
-                    > span {
-                        margin: 0 6px;
-                        font-size: 40px;
-                        font-weight: bold;
-                    }
-                }
-            }
-        }
-
-        > div:nth-of-type(3) {
-            width: 86px;
-            height: 182px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-image: url("@/assets/images/dietaryNutritionTips/r.png");
-        }
-    }
-
-    .content {
-        width: 100%;
-        flex: 1;
-        overflow: hidden;
-        border-radius: 16px;
-        padding: 105px 24px 0;
-        box-sizing: border-box;
-        border: 2px solid #ffc548;
-        background: linear-gradient(
-            180deg,
-            rgba(225, 225, 225, 0) 0%,
-            rgba(225, 225, 225, 0.3) 100%
-        );
-
-        .staff {
-            width: 100%;
-            height: 100%;
-
-            .staffHeader {
-                width: 100%;
-                height: 82px;
-                display: flex;
-                flex-wrap: nowrap;
-                padding: 0 30px;
-                box-sizing: border-box;
-                margin-bottom: 40px;
-                border-radius: 16px;
-                background-color: #7e0b08;
-
-                > div {
-                    color: #ffc87c;
-                    height: 82px;
-                    font-size: 32px;
-                    font-weight: bold;
-                    line-height: 82px;
-                    text-align: center;
-
-                    &:nth-of-type(1) {
-                        width: 85px;
-                        margin-right: 25px;
-                    }
-
-                    &:nth-of-type(2) {
-                        flex: 1;
-                        text-align: left;
-                    }
-
-                    &:nth-of-type(3) {
-                        width: 120px;
-                        margin-right: 20px;
-                    }
-
-                    &:nth-of-type(4) {
-                        width: 250px;
-                    }
-                }
-            }
-
-            .staffContent {
-                width: 100%;
-                overflow: hidden;
-                height: calc(100% - 152px); // 根据实际高度调整
-                position: relative; // 为 nullData 定位提供基础
-
-                .staff-list-wrapper {
-                    width: 100%;
-                    min-height: 1px; // 确保即使无子元素也有高度，避免 refs 无法获取
-                }
-
-                .staffContentList {
                     width: 100%;
                     height: 40px;
-                    padding: 0 30px;
-                    box-sizing: border-box;
                     display: flex;
                     flex-wrap: nowrap;
-                    margin-bottom: 56px; // 调整行间距，确保和 singleHeight 匹配
+                    justify-content: space-between;
+                    align-items: flex-end;
+
+                    > div:nth-of-type(1) {
+                        color: #8d0503;
+                        height: 32px;
+                        font-size: 30px;
+                        line-height: 32px;
+                    }
+
+                    > div:nth-of-type(2) {
+                        color: #8d0503;
+                        height: 40px;
+                        font-size: 30px;
+                        line-height: 40px;
+
+                        > span {
+                            margin: 0 6px;
+                            font-size: 40px;
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+
+            > div:nth-of-type(3) {
+                width: 86px;
+                height: 182px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-image: url("@/assets/images/dietaryNutritionTips/r.png");
+            }
+        }
+
+        .content {
+            width: 100%;
+            flex: 1;
+            overflow: hidden;
+            border-radius: 16px;
+            padding: 105px 24px 0;
+            box-sizing: border-box;
+            border: 2px solid #ffc548;
+            background: linear-gradient(
+                180deg,
+                rgba(225, 225, 225, 0) 0%,
+                rgba(225, 225, 225, 0.3) 100%
+            );
+
+            .staff {
+                width: 100%;
+                height: 100%;
+
+                .staffHeader {
+                    width: 100%;
+                    height: 82px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    margin-bottom: 40px;
+                    border-radius: 16px;
+                    background-color: #7e0b08;
 
                     > div {
-                        color: #ffffff;
-                        height: 40px;
-                        font-size: 40px;
-                        line-height: 40px;
-                        text-align: center;
+                        color: #ffc87c;
+                        height: 82px;
+                        font-size: 32px;
                         font-weight: bold;
+                        line-height: 82px;
+                        text-align: center;
 
                         &:nth-of-type(1) {
                             width: 85px;
@@ -878,11 +918,7 @@ export default {
 
                         &:nth-of-type(2) {
                             flex: 1;
-                            width: 0;
                             text-align: left;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
                         }
 
                         &:nth-of-type(3) {
@@ -894,74 +930,89 @@ export default {
                             width: 250px;
                         }
                     }
-
-                    &:last-of-type {
-                        margin-bottom: 0 !important;
-                    }
                 }
-            }
-        }
 
-        .department {
-            width: 100%;
-            height: 100%;
-
-            .departmentHeader {
-                width: 100%;
-                height: 82px;
-                display: flex;
-                flex-wrap: nowrap;
-                padding: 0 30px;
-                box-sizing: border-box;
-                margin-bottom: 60px;
-                border-radius: 16px;
-                background-color: #7e0b08;
-
-                > div {
-                    color: #ffc87c;
-                    height: 82px;
-                    font-size: 32px;
-                    font-weight: bold;
-                    line-height: 82px;
-                    text-align: center;
-
-                    &:nth-of-type(1) {
-                        width: 140px;
-                        margin-right: 40px;
-                    }
-
-                    &:nth-of-type(2) {
-                        flex: 1;
-                        text-align: left;
-                    }
-
-                    &:nth-of-type(3) {
-                        width: 350px;
-                    }
-                }
-            }
-
-            .departmentContent {
-                width: 100%;
-                overflow: hidden;
-                height: calc(100% - 142px);
-                position: relative; // 为 nullData 定位提供基础
-
-                .departmentContentList {
+                .staffContent {
                     width: 100%;
-                    padding: 0 30px;
-                    box-sizing: border-box;
+                    overflow: hidden;
+                    height: calc(100% - 152px); // 根据实际高度调整
+                    position: relative; // 为 nullData 定位提供基础
+
+                    .staff-list-wrapper {
+                        width: 100%;
+                        min-height: 1px; // 确保即使无子元素也有高度，避免 refs 无法获取
+                    }
+
+                    .staffContentList {
+                        width: 100%;
+                        height: 40px;
+                        padding: 0 30px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        margin-bottom: 56px; // 调整行间距，确保和 singleHeight 匹配
+
+                        > div {
+                            color: #ffffff;
+                            height: 40px;
+                            font-size: 40px;
+                            line-height: 40px;
+                            text-align: center;
+                            font-weight: bold;
+
+                            &:nth-of-type(1) {
+                                width: 85px;
+                                margin-right: 25px;
+                            }
+
+                            &:nth-of-type(2) {
+                                flex: 1;
+                                width: 0;
+                                text-align: left;
+                                overflow: hidden;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                            }
+
+                            &:nth-of-type(3) {
+                                width: 120px;
+                                margin-right: 20px;
+                            }
+
+                            &:nth-of-type(4) {
+                                width: 250px;
+                            }
+                        }
+
+                        &:last-of-type {
+                            margin-bottom: 0 !important;
+                        }
+                    }
+                }
+            }
+
+            .department {
+                width: 100%;
+                height: 100%;
+
+                .departmentHeader {
+                    width: 100%;
+                    height: 82px;
                     display: flex;
                     flex-wrap: nowrap;
-                    margin-bottom: 106px;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    margin-bottom: 60px;
+                    border-radius: 16px;
+                    background-color: #7e0b08;
 
                     > div {
-                        color: #ffffff;
-                        height: 40px;
-                        font-size: 40px;
-                        line-height: 40px;
-                        text-align: center;
+                        color: #ffc87c;
+                        height: 82px;
+                        font-size: 32px;
                         font-weight: bold;
+                        line-height: 82px;
+                        text-align: center;
 
                         &:nth-of-type(1) {
                             width: 140px;
@@ -970,69 +1021,92 @@ export default {
 
                         &:nth-of-type(2) {
                             flex: 1;
-                            width: 0;
                             text-align: left;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
                         }
 
                         &:nth-of-type(3) {
                             width: 350px;
                         }
                     }
+                }
 
-                    &:last-of-type {
-                        margin-bottom: 0 !important;
+                .departmentContent {
+                    width: 100%;
+                    overflow: hidden;
+                    height: calc(100% - 142px);
+                    position: relative; // 为 nullData 定位提供基础
+
+                    .departmentContentList {
+                        width: 100%;
+                        padding: 0 30px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        margin-bottom: 106px;
+
+                        > div {
+                            color: #ffffff;
+                            height: 40px;
+                            font-size: 40px;
+                            line-height: 40px;
+                            text-align: center;
+                            font-weight: bold;
+
+                            &:nth-of-type(1) {
+                                width: 140px;
+                                margin-right: 40px;
+                            }
+
+                            &:nth-of-type(2) {
+                                flex: 1;
+                                width: 0;
+                                text-align: left;
+                                overflow: hidden;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                            }
+
+                            &:nth-of-type(3) {
+                                width: 350px;
+                            }
+                        }
+
+                        &:last-of-type {
+                            margin-bottom: 0 !important;
+                        }
                     }
                 }
             }
         }
+
+        .footer {
+            width: 100%;
+            height: 95px;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            > div {
+                color: #ffffff;
+                height: 95px;
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 95px;
+            }
+        }
     }
 
-    .footer {
+    .banner {
         width: 100%;
-        height: 95px;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: space-between;
+        height: 100%;
+        overflow: hidden;
 
         > div {
-            color: #ffffff;
-            height: 95px;
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 95px;
-        }
-    }
-
-    .nullData {
-        width: 100%;
-        // 定位到容器中心，确保在有滚动列表时不会覆盖
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        padding-top: 0; // 移除之前的 paddingTop
-        text-align: center; // 确保内容居中
-
-        > div:nth-of-type(1) {
-            width: 280px;
-            height: 232px;
-            margin: 0 auto 40px;
+            width: 100%;
+            height: 100%;
             background-size: cover;
             background-repeat: no-repeat;
-            background-position: center top;
-            background-image: url("@/assets/images/dietaryNutritionTips/nullData.png");
-        }
-
-        > div:nth-of-type(2) {
-            color: #ffc87c;
-            width: 100%;
-            height: 40px;
-            font-size: 40px;
-            line-height: 40px;
-            text-align: center;
+            background-position: top center;
         }
     }
 }
diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue
index cf5f931..6b1b845 100644
--- a/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips5.vue
@@ -1,110 +1,98 @@
 <template>
-    <div id="dietaryNutritionTips2">
-        <div class="tips">
-            <div></div>
-            <div>温馨提示</div>
-            <div></div>
-        </div>
-
-        <template v-if="personnelType === 'staff'">
-            <div class="title">
-                <div></div>
-                <div>
-                    <div>膳食营养行动（员工）</div>
-                    <div>
-                        <div>{{ currentData }}</div>
-                        <div>{{ dinnerType }}：{{ userNum }}人</div>
-                    </div>
+    <div id="dietaryNutritionTips5">
+        <template v-if="list && list.length">
+            <div class="dietaryNutritionTips5-Content">
+                <div class="tips">
+                    <div></div>
+                    <div>温馨提示</div>
+                    <div></div>
                 </div>
-                <div></div>
-            </div>
 
-            <div class="content">
-                <div class="staff">
-                    <div class="staffHeader">
-                        <div>序号</div>
-                        <div>单位(部门)</div>
-                        <div>姓名</div>
-                        <div>膳食营养得分</div>
-                    </div>
-                    <div class="staffContent" ref="staffContent">
-                        <div
-                            class="staff-list-wrapper"
-                            ref="staffList"
-                            :style="{
-                                transform: `translateY(${scrollPosition}px)`,
-                                transition: scrollAnimationDuration > 0 ? `transform ${scrollAnimationDuration}s linear` : 'none',
-                            }"
-                        >
-                            <template v-if="list && list.length">
-                                <div
-                                    class="staffContentList"
-                                    v-for="(item, index) in list"
-                                    :key="item.departName + item.realName"
-                                >
-                                    <div>{{ index + 1 }}</div>
-                                    <div>{{ item.departName }}</div>
-                                    <div>{{ maskUserName(item.userName) }}</div>
-                                    <div>{{ item.fraction }}</div>
-                                </div>
-                            </template>
-                        </div>
-                        <template v-if="!list || list.length === 0">
-                            <div class="nullData">
-                                <div></div>
-                                <div>~ 暂无膳食营养信息 ~</div>
+                <template v-if="personnelType === 'staff'">
+                    <div class="title">
+                        <div></div>
+                        <div>
+                            <div>膳食营养行动（员工）</div>
+                            <div>
+                                <div>{{ currentData }}</div>
+                                <div>{{ dinnerType }}：{{ userNum }}人</div>
                             </div>
-                        </template>
+                        </div>
+                        <div></div>
                     </div>
-                </div>
-            </div>
-        </template>
 
-        <template v-if="personnelType === 'department'">
-            <div class="title">
-                <div></div>
-                <div>
-                    <div>膳食营养行动（部门）</div>
-                    <div>
-                        <div>{{ currentData }}</div>
-                        <div>{{ dinnerType }}：{{ userNum }}人</div>
+                    <div class="content">
+                        <div class="staff">
+                            <div class="staffHeader">
+                                <div>序号</div>
+                                <div>单位(部门)</div>
+                                <div>姓名</div>
+                                <div>膳食营养得分</div>
+                            </div>
+                            <div class="staffContent" ref="staffContent">
+                                <div
+                                    class="staff-list-wrapper"
+                                    ref="staffList"
+                                    :style="{
+                                        transform: 'translateY(' + scrollPosition + 'px)',
+                                        transition: scrollAnimationDuration > 0 ? 'transform ' + scrollAnimationDuration + 's linear' : 'none',
+                                    }"
+                                >
+                                    <div class="staffContentList"  v-for="(item, index) in list" :key="index + item.departName + item.userName">
+                                        <div>{{ index + 1 }}</div>
+                                        <div>{{ item.departName }}</div>
+                                        <div>{{ maskUserName(item.userName) }}</div>
+                                        <div>{{ item.fraction }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div></div>
-            </div>
+                </template>
 
-            <div class="content">
-                <div class="department">
-                    <div class="departmentHeader">
-                        <div>序号</div>
-                        <div>单位(部门)</div>
-                        <div>人均膳食营养得分</div>
+                <template v-if="personnelType === 'department'">
+                    <div class="title">
+                        <div></div>
+                        <div>
+                            <div>膳食营养行动（部门）</div>
+                            <div>
+                                <div>{{ currentData }}</div>
+                                <div>{{ dinnerType }}：{{ userNum }}人</div>
+                            </div>
+                        </div>
+                        <div></div>
                     </div>
-                    <div class="departmentContent">
-                        <template v-if="list && list.length">
-                            <template v-for="(item, index) in list">
-                                <div class="departmentContentList" :key="item.userCount + item.avgFraction">
+
+                    <div class="content">
+                        <div class="department">
+                            <div class="departmentHeader">
+                                <div>序号</div>
+                                <div>单位(部门)</div>
+                                <div>人均膳食营养得分</div>
+                            </div>
+                            <div class="departmentContent">
+                                <div class="departmentContentList" v-for="(item, index) in list" :key="index + item.departName">
                                     <div>{{ index + 1 }}</div>
                                     <div>{{ item.departName }}</div>
                                     <div>{{ item.avgFraction }}</div>
                                 </div>
-                            </template>
-                        </template>
-                        <template v-else>
-                            <div class="nullData">
-                                <div></div>
-                                <div>~ 暂无膳食营养信息 ~</div>
                             </div>
-                        </template>
+                        </div>
                     </div>
+                </template>
+
+                <div class="footer">
+                    <div>公共事务中心</div>
+                    <div>开始时间：{{ startDay }}</div>
                 </div>
             </div>
         </template>
 
-        <div class="footer">
-            <div>公共事务中心</div>
-            <div>开始时间：{{ startDay }}</div>
-        </div>
+        <template v-else>
+            <div class="banner">
+                <div v-for="(banner, index) in bannerList" :key="index" :style="{ backgroundImage: 'url(' + banner + ')', display: index === bannerActiveIndex ? 'block' : 'none' }"></div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -120,12 +108,13 @@ export default {
             setTimeoutParams: {
                 status: true,
                 times: 15, // 页面切换的间隔时间，单位：秒
-                retryDelay: 5, // 错误或无数据时重试/切换的延迟时间，单位：秒
+                retryDelay: 5, // 错误或无数据时重试/切换的延迟时间，单位：秒 (现在也用于部门模式无数据时banner停留时间)
                 scrollDelay: 2, // 滚动前停顿时间，单位：秒
                 scrollEndDelay: 2, // 滚动结束后等待时间，单位：秒
                 initialRenderDelay: 100, // 首次渲染延迟，确保 DOM 准备好
                 maxRefRetry: 10, // 获取 ref 的最大重试次数
                 refRetryInterval: 100, // 获取 ref 的重试间隔，单位：毫秒
+                bannerInterval: 5, // banner 轮播的间隔时间，单位：秒 (仅用于staff模式无数据)
             },
 
             requestConfig: {
@@ -149,7 +138,7 @@ export default {
             pageChangeTimerId: null, // 用于页面切换或重试的定时器
             scrollDelayTimerId: null, // 用于滚动前停顿的定时器
             scrollFallbackTimerId: null, // 滚动动画的备用定时器
-
+            bannerTimerId: null, // 新增 banner 定时器ID，现在也用于部门模式下banner的短暂显示
             isRequesting: false, // 防止重复请求
             isScrolling: false, // 标志是否正在进行滚动动画
 
@@ -162,20 +151,29 @@ export default {
             refRetryCount: 0, // 记录 $refs 获取的重试次数
             mutationObserver: null, // MutationObserver 实例
             mutationObserverDebounceTimer: null, // MutationObserver 防抖定时器
+
+            // 示例 banner 图片列表，请根据实际情况替换或从接口获取
+            bannerList: [
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/1.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/2.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/3.jpg',
+                'https://yyjk.shuziweidao.com/gateway/file/down/images/4.jpg',
+            ],
+            bannerActiveIndex: 0,
         };
     },
     created: function () {
-        const _this = this;
+        var _this = this;
 
-        let url = _this.$route.query.url;
+        var url = _this.$route.query.url;
         if (url) {
             _this.requestConfig.url = Array.isArray(url) ? url[0] : url;
         }
-        let code = _this.$route.query.orgCode;
+        var code = _this.$route.query.orgCode;
         if (code) {
             _this.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
         }
-        let canteenId = _this.$route.query.canteenId;
+        var canteenId = _this.$route.query.canteenId;
         if (canteenId) {
             _this.requestConfig.canteenId = Array.isArray(canteenId) ? canteenId[0] : canteenId;
         }
@@ -185,11 +183,11 @@ export default {
         document.addEventListener("visibilitychange", _this.handleVisibilityChange);
 
         // 组件创建后，首次启动流程时增加一个小的延迟，确保 DOM 结构基本准备好
-        _this.pageChangeTimerId = setTimeout(() => {
+        _this.pageChangeTimerId = setTimeout(function () {
             _this.startSequentialLoading();
         }, _this.setTimeoutParams.initialRenderDelay);
     },
-    mounted() {
+    mounted: function () {
         // 在 mounted 钩子中初始化 MutationObserver
         this.setupMutationObserver();
     },
@@ -197,7 +195,7 @@ export default {
         /**
          * 调用 Android 端的 postLog 方法，用于调试日志输出
          */
-        callAndroidPostLog(content) {
+        callAndroidPostLog: function (content) {
             // Android 接口检查
             if (typeof window.Android !== 'undefined' && window.Android.postLog) {
                 try {
@@ -213,24 +211,25 @@ export default {
         /**
          * 设置 MutationObserver 来监控关键元素的 DOM 变化
          */
-        setupMutationObserver: function() {
-            const _this = this;
+        setupMutationObserver: function () {
+            var _this = this;
             // 确保只设置一次
             if (_this.mutationObserver) return;
 
-            const targetNode = _this.$el; // 监控组件的根元素
-            const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
+            var targetNode = _this.$el; // 监控组件的根元素
+            var config = { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] };
 
-            _this.mutationObserver = new MutationObserver((mutationsList) => {
+            _this.mutationObserver = new MutationObserver(function (mutationsList) {
                 // 添加防抖，避免过于频繁的触发
                 clearTimeout(_this.mutationObserverDebounceTimer);
-                _this.mutationObserverDebounceTimer = setTimeout(() => {
-                    for (let mutation of mutationsList) {
+                _this.mutationObserverDebounceTimer = setTimeout(function () {
+                    for (var i = 0; i < mutationsList.length; i++) {
+                        var mutation = mutationsList[i];
                         if (mutation.type === 'childList' || mutation.type === 'attributes') {
                             // 只有在非滚动状态且页面可见时，才考虑处理 Mutation。
                             // 这里的逻辑依然是辅助性监控，不直接触发关键流程，减少干扰。
                             if (_this.personnelType === 'staff' && _this.isPageVisible && !_this.isScrolling && _this.list.length > 0) {
-                                _this.callAndroidPostLog(`MutationObserver 触发 (防抖后)。类型: ${mutation.type}`);
+                                _this.callAndroidPostLog("MutationObserver 触发 (防抖后)。类型: " + mutation.type);
                                 // 实际的滚动启动在 loadDataSequential 的 nextTick 中。
                                 // 此处可以根据需要添加更具体的异常处理或重新评估逻辑。
                             }
@@ -251,8 +250,8 @@ export default {
          * 页面可见性处理
          */
         handleVisibilityChange: function () {
-            const _this = this;
-            const listWrapperEl = _this.$refs.staffList;
+            var _this = this;
+            var listWrapperEl = _this.$refs.staffList;
 
             if (document.hidden) {
                 _this.isPageVisible = false;
@@ -275,9 +274,9 @@ export default {
         /**
          * 统一清除所有定时器和滚动状态
          */
-        clearAllTimers: function() {
-            const _this = this;
-            _this.callAndroidPostLog(`>>> 清理定时器 | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId} | isScrolling=${_this.isScrolling}`);
+        clearAllTimers: function () {
+            var _this = this;
+            _this.callAndroidPostLog(">>> 清理定时器 | pageChangeTimerId=" + _this.pageChangeTimerId + " | scrollDelayTimerId=" + _this.scrollDelayTimerId + " | scrollFallbackTimerId=" + _this.scrollFallbackTimerId + " | bannerTimerId=" + _this.bannerTimerId + " | isScrolling=" + _this.isScrolling);
 
             if (_this.pageChangeTimerId) {
                 clearTimeout(_this.pageChangeTimerId);
@@ -294,6 +293,15 @@ export default {
                 _this.scrollFallbackTimerId = null;
                 _this.callAndroidPostLog("清除 scrollFallbackTimerId。");
             }
+            if (_this.bannerTimerId) { // 清除 banner 定时器 (可以是 setInterval 或 setTimeout)
+                // 检查是哪种定时器，进行清除
+                // 注意：在 ES5 中无法直接判断是 setTimeout 还是 setInterval
+                // 通常我们会用clearInterval清除setInterval，用clearTimeout清除setTimeout
+                // 但两者都可以使用clearTimeout清除，为了兼容性，统一使用clearTimeout
+                clearTimeout(_this.bannerTimerId); // clearAllTimers 统一用 clearTimeout 是安全的
+                _this.bannerTimerId = null;
+                _this.callAndroidPostLog("清除 bannerTimerId。");
+            }
             if (_this.mutationObserverDebounceTimer) {
                 clearTimeout(_this.mutationObserverDebounceTimer);
                 _this.mutationObserverDebounceTimer = null;
@@ -302,7 +310,7 @@ export default {
 
             _this.isScrolling = false; // 确保滚动状态被重置
 
-            const listWrapperEl = _this.$refs.staffList;
+            var listWrapperEl = _this.$refs.staffList;
             if (listWrapperEl && _this.onTransitionEndHandlerRef) {
                 listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
                 _this.onTransitionEndHandlerRef = null; // 清除引用
@@ -315,7 +323,7 @@ export default {
          * 页面切换回调函数，用于在员工和部门模式之间切换。
          */
         pageTimerCallback: function () {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("pageTimerCallback 被调用。");
             if (!_this.isPageVisible) {
                 _this.callAndroidPostLog("页面不可见，暂停 pageTimerCallback 内部执行。");
@@ -323,7 +331,7 @@ export default {
             }
             _this.refRetryCount = 0; // 每次切换页面或加载数据前重置重试计数
             _this.personnelType = _this.personnelType === "department" ? "staff" : "department";
-            _this.callAndroidPostLog(`切换到模式：${_this.personnelType}。`);
+            _this.callAndroidPostLog("切换到模式：" + _this.personnelType + "。");
             _this.startSequentialLoading();
         },
 
@@ -332,7 +340,7 @@ export default {
          * 根据当前人员类型设置 pageSize，并调用数据加载方法。
          */
         startSequentialLoading: function () {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("startSequentialLoading 被调用。");
             if (!_this.isPageVisible) {
                 _this.callAndroidPostLog("页面不可见，暂停 startSequentialLoading 内部执行。");
@@ -341,13 +349,13 @@ export default {
 
             _this.clearAllTimers(); // 确保在启动新流程前清除所有旧的定时器
 
-            _this.list = []; // 清空列表，准备加载新数据
+            //_this.list = []; // 清空列表，准备加载新数据
             if (_this.personnelType === "staff") {
                 _this.pageSize = 45;
             } else {
                 _this.pageSize = 10;
             }
-            _this.callAndroidPostLog(`设置 pageSize: ${_this.pageSize}。`);
+            _this.callAndroidPostLog("设置 pageSize: " + _this.pageSize + "。");
             _this.loadDataSequential();
         },
 
@@ -355,9 +363,9 @@ export default {
          * 加载数据并根据人员类型处理滚动或定时器。
          */
         loadDataSequential: function () {
-            const _this = this;
-            let urlPrefix = "/food/userRank";
-            let apiUrl = "";
+            var _this = this;
+            var urlPrefix = "/food/userRank";
+            var apiUrl = "";
 
             _this.callAndroidPostLog("loadDataSequential 被调用。");
             if (!_this.isPageVisible) {
@@ -373,9 +381,9 @@ export default {
             _this.clearAllTimers(); // 在发送请求前再次清除定时器，以防万一
 
             apiUrl = urlPrefix + (_this.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings");
-            let requestUrl = _this.requestConfig.agreement + "://" + _this.requestConfig.url +'/'+ this.requestConfig.suffix + apiUrl;
-            _this.callAndroidPostLog(`发起请求：${requestUrl}`);
-            let params = {
+            var requestUrl = _this.requestConfig.agreement + "://" + _this.requestConfig.url + '/' + this.requestConfig.suffix + apiUrl;
+            _this.callAndroidPostLog("发起请求：" + requestUrl);
+            var params = {
                 orgCode: _this.requestConfig.orgCode,
                 canteenId: _this.requestConfig.canteenId,
                 no: _this.pageSize,
@@ -383,55 +391,67 @@ export default {
             httpRequest("GET", requestUrl, params, {
                 'X-Sign': signMd5Utils.getSign(requestUrl, params),
                 'X-TIMESTAMP': signMd5Utils.getDateTimeToString(requestUrl, params),
-            }).then((res) => {
-                _this.callAndroidPostLog(`请求返回：${JSON.stringify(res)}`);
-                if (res.success && res.result && res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos'] && res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos'].length > 0) { // 确保有数据才赋值和滚动
-                    _this.dinnerType = res.result.dinnerType === null ? "-" : res.result.dinnerType;
-                    _this.userNum = res.result.userNum === null ? "-" : res.result.userNum;
-                    _this.list = res.result[_this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos']; // 更新列表数据
-                    _this.startDay = res.result.startDay ? _this.formatISODateToChinese(res.result.startDay) : "-"; // 更新列表数据
-                    _this.callAndroidPostLog(`数据加载成功，列表长度：${_this.list.length}。`);
+            }).then(function (res) {
+                    _this.callAndroidPostLog("请求返回：" + JSON.stringify(res));
+                    if (res.success && res.result) {
+                        var dataKey = _this.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
+                        var dataList = res.result[dataKey];
 
-                    _this.$nextTick(() => {
-                        // 只有在 staff 模式且有数据时才尝试滚动
-                        if (_this.personnelType === "staff" && _this.list.length > 0) {
-                            _this.refRetryCount = 0; // 每次尝试滚动前重置重试计数
-                            _this.startSingleScroll();
+                        if (dataList && dataList.length > 0) { // 确保有数据才赋值和滚动
+                            _this.dinnerType = res.result.dinnerType === null ? "-" : res.result.dinnerType;
+                            _this.userNum = res.result.userNum === null ? "-" : res.result.userNum;
+                            _this.list = dataList; // 更新列表数据
+                            _this.startDay = res.result.startDay ? _this.formatISODateToChinese(res.result.startDay) : "-"; // 更新列表数据
+                            _this.callAndroidPostLog("数据加载成功，列表长度：" + _this.list.length + "。");
+
+                            _this.$nextTick(function () {
+                                // 只有在 staff 模式且有数据时才尝试滚动
+                                if (_this.personnelType === "staff") {
+                                    _this.refRetryCount = 0; // 每次尝试滚动前重置重试计数
+                                    _this.startSingleScroll();
+                                } else {
+                                    // 部门模式有数据，直接设置页面切换定时器
+                                    _this.callAndroidPostLog("部门模式有数据，设置页面切换定时器。");
+                                    _this.pageChangeTimerId = setTimeout(
+                                        _this.pageTimerCallback,
+                                        _this.setTimeoutParams.times * 1000
+                                    );
+                                }
+                            });
                         } else {
-                            // 部门模式或员工无数据，直接设置页面切换定时器
-                            _this.callAndroidPostLog("无需滚动或无数据，设置页面切换定时器。");
-                            _this.pageChangeTimerId = setTimeout(
-                                _this.pageTimerCallback,
-                                _this.setTimeoutParams.times * 1000
-                            );
+                            // 无论 staff 还是 department，只要数据为空，就展示 banner 并根据当前模式决定下一步
+                            _this.list = []; // 数据为空时清空列表
+                            _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 数据为空，开始处理banner/切换。");
+                            _this.startBannerLoop();
                         }
-                    });
-                } else {
-                    _this.list = []; // 数据不成功或无数据时清空列表
-                    _this.callAndroidPostLog("请求成功但数据无效或为空，将在 " + _this.setTimeoutParams.retryDelay + " 秒后重试/切换。");
-                    _this.pageChangeTimerId = setTimeout(
-                        _this.pageTimerCallback,
-                        _this.setTimeoutParams.retryDelay * 1000
-                    );
-                }
-            },
-            (error) => { // 添加错误回调
-                _this.callAndroidPostLog("请求失败: " + JSON.stringify(error));
-                _this.list = []; // 请求失败时清空列表
-                _this.callAndroidPostLog('请求失败，将在 ' + _this.setTimeoutParams.retryDelay + ' 秒后重试/切换。');
-                _this.pageChangeTimerId = setTimeout(
-                    _this.pageTimerCallback,
-                    _this.setTimeoutParams.retryDelay * 1000
-                );
-            }).then(() => { // 使用 .then() 替代 .finally()，无论成功或失败都会执行
+                    } else {
+                        // 无论 staff 还是 department，只要请求成功但结果无效，就展示 banner 并根据当前模式决定下一步
+                        _this.list = []; // 请求成功但res.result无效时清空列表
+                        _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 请求成功但结果无效，开始处理banner/切换。");
+                        _this.startBannerLoop();
+                    }
+                },
+                function (error) { // 添加错误回调
+                    _this.callAndroidPostLog("请求失败: " + JSON.stringify(error));
+                    // 无论 staff 还是 department，只要请求失败，就展示 banner 并根据当前模式决定下一步
+                    _this.list = []; // 请求失败时清空列表
+                    _this.callAndroidPostLog("当前模式 (" + _this.personnelType + ") 请求失败，开始处理banner/切换。");
+                    _this.startBannerLoop();
+                }).then(function () { // 使用 .then() 替代 .finally()，无论成功或失败都会执行
                 _this.isRequesting = false;
                 _this.callAndroidPostLog("请求结束，isRequesting 设置为 false。");
             });
         },
 
-        formatISODateToChinese(dateString) {
-            const [year, month, day] = dateString.split('-');
-            return `${year}年${month}月${day}日`;
+        /**
+         * 格式化 ISO 日期字符串为中文年月日
+         */
+        formatISODateToChinese: function (dateString) {
+            var parts = dateString.split('-');
+            var year = parts[0];
+            var month = parts[1];
+            var day = parts[2];
+            return year + "年" + month + "月" + day + "日";
         },
 
         /**
@@ -439,11 +459,11 @@ export default {
          * 确保滚动容器和列表元素已就绪。
          */
         startSingleScroll: function () {
-            const _this = this;
-            const contentEl = _this.$refs.staffContent; // 滚动容器
-            const listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
+            var _this = this;
+            var contentEl = _this.$refs.staffContent; // 滚动容器
+            var listWrapperEl = _this.$refs.staffList; // 实际滚动的元素
 
-            _this.callAndroidPostLog(`>>> 开始滚动 | isScrolling=${_this.isScrolling} | pageChangeTimerId=${_this.pageChangeTimerId} | scrollDelayTimerId=${_this.scrollDelayTimerId} | scrollFallbackTimerId=${_this.scrollFallbackTimerId}`);
+            _this.callAndroidPostLog(">>> 开始滚动 | isScrolling=" + _this.isScrolling + " | pageChangeTimerId=" + _this.pageChangeTimerId + " | scrollDelayTimerId=" + _this.scrollDelayTimerId + " | scrollFallbackTimerId=" + _this.scrollFallbackTimerId);
             _this.callAndroidPostLog("startSingleScroll 被调用。");
 
             if (!_this.isPageVisible) {
@@ -454,12 +474,12 @@ export default {
 
             // **重试机制：如果 refs 未就绪，进行重试**
             if (!contentEl || !listWrapperEl || contentEl.clientHeight === 0 || listWrapperEl.offsetHeight === 0) {
-                _this.callAndroidPostLog(`Refs未就绪或尺寸为0。contentEl: ${contentEl}, listWrapperEl: ${listWrapperEl}, contentHeight: ${contentEl ? contentEl.clientHeight : 'N/A'}, listHeight: ${listWrapperEl ? listWrapperEl.offsetHeight : 'N/A'}`);
+                _this.callAndroidPostLog("Refs未就绪或尺寸为0。contentEl: " + contentEl + ", listWrapperEl: " + listWrapperEl + ", contentHeight: " + (contentEl ? contentEl.clientHeight : 'N/A') + ", listHeight: " + (listWrapperEl ? listWrapperEl.offsetHeight : 'N/A'));
 
                 if (_this.refRetryCount < _this.setTimeoutParams.maxRefRetry) {
                     _this.refRetryCount++;
-                    _this.callAndroidPostLog(`尝试获取refs，重试次数：${_this.refRetryCount}/${_this.setTimeoutParams.maxRefRetry}。将在 ${_this.setTimeoutParams.refRetryInterval}ms 后重试。`);
-                    _this.scrollDelayTimerId = setTimeout(() => { // 使用 scrollDelayTimerId
+                    _this.callAndroidPostLog("尝试获取refs，重试次数：" + _this.refRetryCount + "/" + _this.setTimeoutParams.maxRefRetry + "。将在 " + _this.setTimeoutParams.refRetryInterval + "ms 后重试。");
+                    _this.scrollDelayTimerId = setTimeout(function () { // 使用 scrollDelayTimerId
                         _this.startSingleScroll(); // 再次尝试启动滚动
                     }, _this.setTimeoutParams.refRetryInterval);
                     return; // 退出当前函数，等待重试
@@ -479,14 +499,14 @@ export default {
             // **核心优化：在开始动画前，确保清理旧的动画状态和监听器**
             _this.clearScrollAnimationState(listWrapperEl);
 
-            let contentHeight = contentEl.clientHeight; // 容器的可见高度
-            let actualListHeight = 0;
+            var contentHeight = contentEl.clientHeight; // 容器的可见高度
+            var actualListHeight = 0;
 
             // 确保列表项已经渲染，才能获取其高度
             if (listWrapperEl.children.length > 0) {
                 // 计算实际总高度（包括所有列表项和它们之间的 margin-bottom）
-                for(let i=0; i<listWrapperEl.children.length; i++){
-                    let child = listWrapperEl.children[i];
+                for(var i=0; i<listWrapperEl.children.length; i++){
+                    var child = listWrapperEl.children[i];
                     actualListHeight += child.offsetHeight + parseFloat(window.getComputedStyle(child).marginBottom);
                 }
                 // 减去最后一个元素的 margin-bottom，因为它下面没有其他元素
@@ -494,7 +514,7 @@ export default {
                     actualListHeight -= parseFloat(window.getComputedStyle(listWrapperEl.children[listWrapperEl.children.length - 1]).marginBottom);
                 }
 
-                _this.callAndroidPostLog(`容器高度: ${contentHeight}px, 实际列表总高度: ${actualListHeight}px。`);
+                _this.callAndroidPostLog("容器高度: " + contentHeight + "px, 实际列表总高度: " + actualListHeight + "px。");
             } else {
                 _this.callAndroidPostLog("staffList内部无子元素，无法计算滚动高度。将切换页面。");
                 // 无列表项时也直接切换页面
@@ -512,17 +532,17 @@ export default {
             }
 
             _this.isScrolling = true;
-            let scrollDistance = actualListHeight - contentHeight;
-            let scrollSpeed = 40; // 像素/秒
+            var scrollDistance = actualListHeight - contentHeight;
+            var scrollSpeed = 40; // 像素/秒
             _this.scrollAnimationDuration = scrollDistance / scrollSpeed;
-            _this.callAndroidPostLog(`计算滚动距离：${scrollDistance}px，动画时长：${_this.scrollAnimationDuration}s。`);
+            _this.callAndroidPostLog("计算滚动距离：" + scrollDistance + "px，动画时长：" + _this.scrollAnimationDuration + "s。");
 
             // --- 滚动前停顿 ---
             _this.scrollDelayTimerId = setTimeout( // 使用 scrollDelayTimerId
-                () => {
+                function () {
                     _this.callAndroidPostLog("滚动前停顿结束，准备执行动画。");
                     if (window.requestAnimationFrame) {
-                        window.requestAnimationFrame(() => {
+                        window.requestAnimationFrame(function () {
                             _this.performScrollAnimation(listWrapperEl, scrollDistance);
                         });
                     } else {
@@ -536,8 +556,8 @@ export default {
         /**
          * 清理滚动动画相关的CSS属性和事件监听器
          */
-        clearScrollAnimationState: function(listWrapperEl) {
-            const _this = this;
+        clearScrollAnimationState: function (listWrapperEl) {
+            var _this = this;
             // 移除任何旧的 transitionend 监听器，防止重复绑定
             if (_this.onTransitionEndHandlerRef) {
                 listWrapperEl.removeEventListener("transitionend", _this.onTransitionEndHandlerRef);
@@ -547,16 +567,16 @@ export default {
             // 清除之前的动画效果，并重置位置
             listWrapperEl.style.transition = "none";
             _this.scrollPosition = 0; // 重置位置到顶部
-            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`;
+            listWrapperEl.style.transform = "translateY(" + _this.scrollPosition + "px)";
             // 强制浏览器重绘/回流，确保 'transition: none' 立即生效，防止动画闪烁
             void listWrapperEl.offsetWidth;
             _this.callAndroidPostLog("已清除旧动画状态并重置滚动位置。");
         },
 
         // 统一处理 transitionend 事件，方便移除监听器
-        onTransitionEnd: function(event) {
-            const _this = this;
-            const listWrapperEl = _this.$refs.staffList;
+        onTransitionEnd: function (event) {
+            var _this = this;
+            var listWrapperEl = _this.$refs.staffList;
             _this.callAndroidPostLog("onTransitionEnd triggered.");
             // 检查事件是否来自正确的元素和正确的属性，避免其他transition影响
             if (event.target === listWrapperEl && event.propertyName === 'transform') {
@@ -572,7 +592,7 @@ export default {
                     _this.pageTimerCallback,
                     _this.setTimeoutParams.scrollEndDelay * 1000
                 );
-                _this.callAndroidPostLog(`设置 pageChangeTimerId，将在 ${_this.setTimeoutParams.scrollEndDelay} 秒后调用 pageTimerCallback。`);
+                _this.callAndroidPostLog("设置 pageChangeTimerId，将在 " + _this.setTimeoutParams.scrollEndDelay + " 秒后调用 pageTimerCallback。");
 
                 // 动画完成后，再次确保移除监听器，防止重复触发
                 if (_this.onTransitionEndHandlerRef) {
@@ -581,12 +601,12 @@ export default {
                     _this.callAndroidPostLog("移除 transitionend 监听器。");
                 }
             } else {
-                _this.callAndroidPostLog(`onTransitionEnd triggered by unexpected target or property: ${event.target.tagName}, ${event.propertyName}`);
+                _this.callAndroidPostLog("onTransitionEnd triggered by unexpected target or property: " + event.target.tagName + ", " + event.propertyName);
             }
         },
 
         performScrollAnimation: function (listWrapperEl, scrollDistance) {
-            const _this = this;
+            var _this = this;
             _this.callAndroidPostLog("performScrollAnimation 被调用。");
 
             // 再次确保在设置新监听器前移除旧的
@@ -598,30 +618,30 @@ export default {
 
             // 设置目标位置（负值表示向上滚动）
             _this.scrollPosition = -scrollDistance;
-            listWrapperEl.style.transition = `transform ${_this.scrollAnimationDuration}s linear`;
-            listWrapperEl.style.transform = `translateY(${_this.scrollPosition}px)`; // 立即应用样式
+            listWrapperEl.style.transition = "transform " + _this.scrollAnimationDuration + "s linear";
+            listWrapperEl.style.transform = "translateY(" + _this.scrollPosition + "px)"; // 立即应用样式
 
-            _this.callAndroidPostLog(`开始滚动动画。目标位置：${_this.scrollPosition}px，时长：${_this.scrollAnimationDuration}s`);
+            _this.callAndroidPostLog("开始滚动动画。目标位置：" + _this.scrollPosition + "px，时长：" + _this.scrollAnimationDuration + "s");
 
             // **优化：更可靠的备用定时器，在动画预期结束时间后触发**
             // 这个定时器会在动画正常完成（`transitionend` 触发并清除它）或动画未完成时触发
             _this.scrollFallbackTimerId = setTimeout(
-                () => {
+                function () {
                     _this.callAndroidPostLog("备用定时器触发！TransitionEnd 可能未正常触发或动画完成但流程卡顿。强制进入下一流程。");
                     // 即使动画被中断或未触发 transitionend，也强制执行清理和切换逻辑
                     _this.forceNextStepAfterScroll(listWrapperEl);
                 },
                 (_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay) * 1000 + 500 // 动画持续时间 + 动画结束后等待时间 + 0.5秒缓冲
             );
-            _this.callAndroidPostLog(`设置 scrollFallbackTimerId，将在 ${(_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay + 0.5)} 秒后触发。`);
+            _this.callAndroidPostLog("设置 scrollFallbackTimerId，将在 " + (_this.scrollAnimationDuration + _this.setTimeoutParams.scrollEndDelay + 0.5) + " 秒后触发。");
         },
 
         /**
          * 强制进入滚动动画后的下一个流程
          * 用于 transitionend 未触发时的备用方案
          */
-        forceNextStepAfterScroll: function(listWrapperEl) {
-            const _this = this;
+        forceNextStepAfterScroll: function (listWrapperEl) {
+            var _this = this;
             _this.callAndroidPostLog("forceNextStepAfterScroll 被调用。");
             // 清理所有相关定时器，防止多重触发
             _this.clearAllTimers();
@@ -636,32 +656,72 @@ export default {
             _this.pageTimerCallback();
         },
 
-        maskUserName(fullName) {
+        maskUserName: function (fullName) {
             if (!fullName || typeof fullName !== 'string' || fullName.length === 0) {
                 return '';
             }
 
-            const len = fullName.length;
+            var len = fullName.length;
 
             if (len === 1) {
                 return fullName;
             } else if (len === 2) {
                 return fullName.charAt(0) + '*';
             } else {
-                const firstChar = fullName.charAt(0);
-                const lastChar = fullName.charAt(len - 1);
-                const maskedPart = '*'.repeat(len - 2);
+                var firstChar = fullName.charAt(0);
+                var lastChar = fullName.charAt(len - 1);
+                var maskedPart = '*'.repeat(len - 2); // Note: String.prototype.repeat is ES6, may need polyfill for older IE. If not available, use a loop.
                 return firstChar + maskedPart + lastChar;
             }
         },
+
+        /**
+         * 开始 banner 轮播循环或显示短暂 banner 后切换
+         */
+        startBannerLoop: function () {
+            var _this = this;
+            _this.callAndroidPostLog("startBannerLoop 被调用，当前模式：" + _this.personnelType);
+            _this.clearAllTimers(); // 确保在开始 banner 轮播前清除所有其他定时器
+
+            if (!_this.bannerList || _this.bannerList.length === 0) {
+                _this.callAndroidPostLog("bannerList 为空或未定义，无法展示 banner，直接切换到下一个模式。");
+                // 如果没有 banner 图，直接切换到下一个模式
+                if (_this.personnelType === 'staff') {
+                    _this.personnelType = 'department';
+                } else {
+                    _this.personnelType = 'staff';
+                }
+                _this.pageChangeTimerId = setTimeout(_this.startSequentialLoading, _this.setTimeoutParams.retryDelay * 1000);
+                return;
+            }
+
+            // 确保显示第一个 banner
+            _this.bannerActiveIndex = 0;
+
+            _this.callAndroidPostLog("员工模式无数据，启动 banner 轮播（完整循环）。");
+            _this.bannerTimerId = setInterval(function () {
+                _this.bannerActiveIndex = (_this.bannerActiveIndex + 1) % _this.bannerList.length;
+                _this.callAndroidPostLog("切换 banner 到索引：" + _this.bannerActiveIndex);
+
+                // 当轮播回到第一个 banner 时，认为完成一轮，可以切换到部门模式并请求数据
+                if (_this.bannerActiveIndex === 0) {
+                    _this.callAndroidPostLog("Banner 轮播完成一轮（员工模式），将切换到部门模式并请求数据。");
+                    clearInterval(_this.bannerTimerId); // 清除当前的 setInterval
+                    _this.bannerTimerId = null;
+                    _this.personnelType = _this.personnelType === 'staff' ? 'department' : 'staff';
+                    _this.startSequentialLoading(); // 立即请求部门数据
+                }
+            }, _this.setTimeoutParams.bannerInterval * 1000); // 根据 bannerInterval 设置轮播间隔
+            _this.callAndroidPostLog("Banner 轮播（员工模式）已启动，间隔：" + _this.setTimeoutParams.bannerInterval + " 秒。");
+        },
     },
     beforeDestroy: function () {
-        const _this = this;
+        var _this = this;
         _this.callAndroidPostLog("组件即将销毁，执行 beforeDestroy。");
         _this.clearAllTimers(); // 清除所有定时器
 
         // 确保在组件销毁时，正在进行的 CSS 动画被停止并归位
-        const listWrapperEl = _this.$refs.staffList;
+        var listWrapperEl = _this.$refs.staffList;
         if (listWrapperEl) {
             listWrapperEl.style.transition = "none";
             listWrapperEl.style.transform = "translateY(0px)";
@@ -690,218 +750,173 @@ export default {
 </script>
 
 <style scoped lang="less">
-/* 样式部分保持不变 */
-#dietaryNutritionTips2 {
+#dietaryNutritionTips5 {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 44px 40px 0;
-    box-sizing: border-box;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center top;
     background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
 
-    .tips {
+    .dietaryNutritionTips5-Content {
         width: 100%;
-        height: 36px;
+        height: 100%;
+        overflow: hidden;
         display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 96px;
+        flex-direction: column;
+        padding: 44px 40px 0;
+        box-sizing: border-box;
 
-        > div:nth-of-type(1) {
-            width: 120px;
-            height: 4px;
-            background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
-            border-radius: 2px;
-        }
-
-        > div:nth-of-type(2) {
-            color: #ffc87c;
+        .tips {
+            width: 100%;
             height: 36px;
-            font-size: 36px;
-            font-weight: bold;
-            line-height: 36px;
-            margin: 0 36px;
-        }
-
-        > div:nth-of-type(3) {
-            width: 120px;
-            height: 4px;
-            background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
-            border-radius: 2px;
-        }
-    }
-
-    .title {
-        width: 100%;
-        height: 182px;
-        position: fixed;
-        top: 85px;
-        left: 0;
-        right: 0;
-        z-index: 3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        > div:nth-of-type(1) {
-            width: 86px;
-            height: 182px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-image: url("@/assets/images/dietaryNutritionTips/l.png");
-        }
-
-        > div:nth-of-type(2) {
-            width: 720px;
-            height: 136px;
-            padding: 18px 30px 0;
-            border-radius: 24px;
-            box-sizing: border-box;
-            background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 96px;
 
             > div:nth-of-type(1) {
-                color: #8d0503;
-                width: 100%;
-                height: 48px;
-                font-size: 48px;
-                font-weight: bold;
-                line-height: 48px;
-                text-align: center;
-                margin-bottom: 12px;
+                width: 120px;
+                height: 4px;
+                background: linear-gradient(270deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+                border-radius: 2px;
             }
 
             > div:nth-of-type(2) {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                flex-wrap: nowrap;
-                justify-content: space-between;
-                align-items: flex-end;
+                color: #ffc87c;
+                height: 36px;
+                font-size: 36px;
+                font-weight: bold;
+                line-height: 36px;
+                margin: 0 36px;
+            }
+
+            > div:nth-of-type(3) {
+                width: 120px;
+                height: 4px;
+                background: linear-gradient(90deg, #ffc87c 0%, rgba(42, 199, 159, 0) 100%);
+                border-radius: 2px;
+            }
+        }
+
+        .title {
+            width: 100%;
+            height: 182px;
+            position: fixed;
+            top: 85px;
+            left: 0;
+            right: 0;
+            z-index: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            > div:nth-of-type(1) {
+                width: 86px;
+                height: 182px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-image: url("@/assets/images/dietaryNutritionTips/l.png");
+            }
+
+            > div:nth-of-type(2) {
+                width: 720px;
+                height: 136px;
+                padding: 18px 30px 0;
+                border-radius: 24px;
+                box-sizing: border-box;
+                background: linear-gradient(-90deg, #ffc77b 0%, #fff4e6 47%, #ffc879 100%);
 
                 > div:nth-of-type(1) {
                     color: #8d0503;
-                    height: 32px;
-                    font-size: 30px;
-                    line-height: 32px;
+                    width: 100%;
+                    height: 48px;
+                    font-size: 48px;
+                    font-weight: bold;
+                    line-height: 48px;
+                    text-align: center;
+                    margin-bottom: 12px;
                 }
 
                 > div:nth-of-type(2) {
-                    color: #8d0503;
-                    height: 40px;
-                    font-size: 30px;
-                    line-height: 40px;
-
-                    > span {
-                        margin: 0 6px;
-                        font-size: 40px;
-                        font-weight: bold;
-                    }
-                }
-            }
-        }
-
-        > div:nth-of-type(3) {
-            width: 86px;
-            height: 182px;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-image: url("@/assets/images/dietaryNutritionTips/r.png");
-        }
-    }
-
-    .content {
-        width: 100%;
-        flex: 1;
-        overflow: hidden;
-        border-radius: 16px;
-        padding: 105px 24px 0;
-        box-sizing: border-box;
-        border: 2px solid #ffc548;
-        background: linear-gradient(
-            180deg,
-            rgba(225, 225, 225, 0) 0%,
-            rgba(225, 225, 225, 0.3) 100%
-        );
-
-        .staff {
-            width: 100%;
-            height: 100%;
-
-            .staffHeader {
-                width: 100%;
-                height: 82px;
-                display: flex;
-                flex-wrap: nowrap;
-                padding: 0 30px;
-                box-sizing: border-box;
-                margin-bottom: 40px;
-                border-radius: 16px;
-                background-color: #7e0b08;
-
-                > div {
-                    color: #ffc87c;
-                    height: 82px;
-                    font-size: 32px;
-                    font-weight: bold;
-                    line-height: 82px;
-                    text-align: center;
-
-                    &:nth-of-type(1) {
-                        width: 85px;
-                        margin-right: 25px;
-                    }
-
-                    &:nth-of-type(2) {
-                        flex: 1;
-                        text-align: left;
-                    }
-
-                    &:nth-of-type(3) {
-                        width: 120px;
-                        margin-right: 20px;
-                    }
-
-                    &:nth-of-type(4) {
-                        width: 250px;
-                    }
-                }
-            }
-
-            .staffContent {
-                width: 100%;
-                overflow: hidden;
-                height: calc(100% - 152px); // 根据实际高度调整
-                position: relative; // 为 nullData 定位提供基础
-
-                .staff-list-wrapper {
-                    width: 100%;
-                    min-height: 1px; // 确保即使无子元素也有高度，避免 refs 无法获取
-                }
-
-                .staffContentList {
                     width: 100%;
                     height: 40px;
-                    padding: 0 30px;
-                    box-sizing: border-box;
                     display: flex;
                     flex-wrap: nowrap;
-                    margin-bottom: 56px; // 调整行间距，确保和 singleHeight 匹配
+                    justify-content: space-between;
+                    align-items: flex-end;
+
+                    > div:nth-of-type(1) {
+                        color: #8d0503;
+                        height: 32px;
+                        font-size: 30px;
+                        line-height: 32px;
+                    }
+
+                    > div:nth-of-type(2) {
+                        color: #8d0503;
+                        height: 40px;
+                        font-size: 30px;
+                        line-height: 40px;
+
+                        > span {
+                            margin: 0 6px;
+                            font-size: 40px;
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+
+            > div:nth-of-type(3) {
+                width: 86px;
+                height: 182px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-image: url("@/assets/images/dietaryNutritionTips/r.png");
+            }
+        }
+
+        .content {
+            width: 100%;
+            flex: 1;
+            overflow: hidden;
+            border-radius: 16px;
+            padding: 105px 24px 0;
+            box-sizing: border-box;
+            border: 2px solid #ffc548;
+            background: linear-gradient(
+                180deg,
+                rgba(225, 225, 225, 0) 0%,
+                rgba(225, 225, 225, 0.3) 100%
+            );
+
+            .staff {
+                width: 100%;
+                height: 100%;
+
+                .staffHeader {
+                    width: 100%;
+                    height: 82px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    margin-bottom: 40px;
+                    border-radius: 16px;
+                    background-color: #7e0b08;
 
                     > div {
-                        color: #ffffff;
-                        height: 40px;
-                        font-size: 40px;
-                        line-height: 40px;
-                        text-align: center;
+                        color: #ffc87c;
+                        height: 82px;
+                        font-size: 32px;
                         font-weight: bold;
+                        line-height: 82px;
+                        text-align: center;
 
                         &:nth-of-type(1) {
                             width: 85px;
@@ -910,11 +925,7 @@ export default {
 
                         &:nth-of-type(2) {
                             flex: 1;
-                            width: 0;
                             text-align: left;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
                         }
 
                         &:nth-of-type(3) {
@@ -926,74 +937,89 @@ export default {
                             width: 250px;
                         }
                     }
-
-                    &:last-of-type {
-                        margin-bottom: 0 !important;
-                    }
                 }
-            }
-        }
 
-        .department {
-            width: 100%;
-            height: 100%;
-
-            .departmentHeader {
-                width: 100%;
-                height: 82px;
-                display: flex;
-                flex-wrap: nowrap;
-                padding: 0 30px;
-                box-sizing: border-box;
-                margin-bottom: 60px;
-                border-radius: 16px;
-                background-color: #7e0b08;
-
-                > div {
-                    color: #ffc87c;
-                    height: 82px;
-                    font-size: 32px;
-                    font-weight: bold;
-                    line-height: 82px;
-                    text-align: center;
-
-                    &:nth-of-type(1) {
-                        width: 140px;
-                        margin-right: 40px;
-                    }
-
-                    &:nth-of-type(2) {
-                        flex: 1;
-                        text-align: left;
-                    }
-
-                    &:nth-of-type(3) {
-                        width: 350px;
-                    }
-                }
-            }
-
-            .departmentContent {
-                width: 100%;
-                overflow: hidden;
-                height: calc(100% - 142px);
-                position: relative; // 为 nullData 定位提供基础
-
-                .departmentContentList {
+                .staffContent {
                     width: 100%;
-                    padding: 0 30px;
-                    box-sizing: border-box;
+                    overflow: hidden;
+                    height: calc(100% - 152px); // 根据实际高度调整
+                    position: relative; // 为 nullData 定位提供基础
+
+                    .staff-list-wrapper {
+                        width: 100%;
+                        min-height: 1px; // 确保即使无子元素也有高度，避免 refs 无法获取
+                    }
+
+                    .staffContentList {
+                        width: 100%;
+                        height: 40px;
+                        padding: 0 30px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        margin-bottom: 56px; // 调整行间距，确保和 singleHeight 匹配
+
+                        > div {
+                            color: #ffffff;
+                            height: 40px;
+                            font-size: 40px;
+                            line-height: 40px;
+                            text-align: center;
+                            font-weight: bold;
+
+                            &:nth-of-type(1) {
+                                width: 85px;
+                                margin-right: 25px;
+                            }
+
+                            &:nth-of-type(2) {
+                                flex: 1;
+                                width: 0;
+                                text-align: left;
+                                overflow: hidden;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                            }
+
+                            &:nth-of-type(3) {
+                                width: 120px;
+                                margin-right: 20px;
+                            }
+
+                            &:nth-of-type(4) {
+                                width: 250px;
+                            }
+                        }
+
+                        &:last-of-type {
+                            margin-bottom: 0 !important;
+                        }
+                    }
+                }
+            }
+
+            .department {
+                width: 100%;
+                height: 100%;
+
+                .departmentHeader {
+                    width: 100%;
+                    height: 82px;
                     display: flex;
                     flex-wrap: nowrap;
-                    margin-bottom: 106px;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                    margin-bottom: 60px;
+                    border-radius: 16px;
+                    background-color: #7e0b08;
 
                     > div {
-                        color: #ffffff;
-                        height: 40px;
-                        font-size: 40px;
-                        line-height: 40px;
-                        text-align: center;
+                        color: #ffc87c;
+                        height: 82px;
+                        font-size: 32px;
                         font-weight: bold;
+                        line-height: 82px;
+                        text-align: center;
 
                         &:nth-of-type(1) {
                             width: 140px;
@@ -1002,69 +1028,92 @@ export default {
 
                         &:nth-of-type(2) {
                             flex: 1;
-                            width: 0;
                             text-align: left;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
                         }
 
                         &:nth-of-type(3) {
                             width: 350px;
                         }
                     }
+                }
 
-                    &:last-of-type {
-                        margin-bottom: 0 !important;
+                .departmentContent {
+                    width: 100%;
+                    overflow: hidden;
+                    height: calc(100% - 142px);
+                    position: relative; // 为 nullData 定位提供基础
+
+                    .departmentContentList {
+                        width: 100%;
+                        padding: 0 30px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-wrap: nowrap;
+                        margin-bottom: 106px;
+
+                        > div {
+                            color: #ffffff;
+                            height: 40px;
+                            font-size: 40px;
+                            line-height: 40px;
+                            text-align: center;
+                            font-weight: bold;
+
+                            &:nth-of-type(1) {
+                                width: 140px;
+                                margin-right: 40px;
+                            }
+
+                            &:nth-of-type(2) {
+                                flex: 1;
+                                width: 0;
+                                text-align: left;
+                                overflow: hidden;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                            }
+
+                            &:nth-of-type(3) {
+                                width: 350px;
+                            }
+                        }
+
+                        &:last-of-type {
+                            margin-bottom: 0 !important;
+                        }
                     }
                 }
             }
         }
+
+        .footer {
+            width: 100%;
+            height: 95px;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            > div {
+                color: #ffffff;
+                height: 95px;
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 95px;
+            }
+        }
     }
 
-    .footer {
+    .banner {
         width: 100%;
-        height: 95px;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: space-between;
+        height: 100%;
+        overflow: hidden;
 
         > div {
-            color: #ffffff;
-            height: 95px;
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 95px;
-        }
-    }
-
-    .nullData {
-        width: 100%;
-        // 定位到容器中心，确保在有滚动列表时不会覆盖
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        padding-top: 0; // 移除之前的 paddingTop
-        text-align: center; // 确保内容居中
-
-        > div:nth-of-type(1) {
-            width: 280px;
-            height: 232px;
-            margin: 0 auto 40px;
+            width: 100%;
+            height: 100%;
             background-size: cover;
             background-repeat: no-repeat;
-            background-position: center top;
-            background-image: url("@/assets/images/dietaryNutritionTips/nullData.png");
-        }
-
-        > div:nth-of-type(2) {
-            color: #ffc87c;
-            width: 100%;
-            height: 40px;
-            font-size: 40px;
-            line-height: 40px;
-            text-align: center;
+            background-position: top center;
         }
     }
 }