From 3b1130f6a7fd46aed6725dbe6c502c19c4296b5b Mon Sep 17 00:00:00 2001
From: jiangjunjie <jiangjunjie@sinosoft.com.cn>
Date: Tue, 29 Sep 2026 18:42:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=A7=E5=AE=B6=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hot-question.vue | 970 ++++++++++++++++++++++----------
 src/store/app.js                |   3 +-
 2 files changed, 670 insertions(+), 303 deletions(-)

diff --git a/src/components/hot-question.vue b/src/components/hot-question.vue
index 47aefbc..ef73987 100644
--- a/src/components/hot-question.vue
+++ b/src/components/hot-question.vue
@@ -1,30 +1,6 @@
 <template>
-  <div class="hot-question an-move-left" v-if="hotList.length > 0">
+  <div class="hot-question an-move-left" ref="hotRootRef" v-if="hotList.length > 0">
     <div class="hot-question-main" v-if="!$elder">
-      <!-- <div class="hot-banner">
-        <div class="hot-exchange" v-lazy:background-image="{ src: hotUrl }">
-          <span class="hot-exchange-title hide">热门问题</span>
-          <a
-            href="javascript:;"
-            class="hot-exchange-btn"
-            @click.stop="changeHotQuestion"
-          >
-            <span class="hot-exchange-icon"></span>换一换
-          </a>
-        </div>
-      </div> -->
-      <!-- <div class="hot-content">
-        <a
-          href="javascript:;"
-          class="hot-content-list opacity"
-          v-for="(item, index) in newHotList"
-          :key="index"
-          @click.stop="hotQuestionChooseClick(item)"
-          v-show="item.name"
-        >
-          <div class="hot-item-question">{{ item.name }}</div>
-        </a>
-      </div> -->
       <div class="hotcontent">
         <div class="content_body">
           <van-tabs
@@ -36,7 +12,7 @@
             line-height="2"
           >
             <van-tab :title="isQA ? one_list_name : '热点'">
-              <div class="tab-content" :style="{ height: getContentHeight(0) }" ref="tab0">
+              <div class="tab-content" :style="{ height: getContentHeight(0) }">
                 <div class="tab-inner">
                   <div class="visible-content">
                     <van-cell
@@ -70,11 +46,7 @@
               </div>
             </van-tab>
             <van-tab v-for="(item, index) in tabsList" :key="index" :title="item.name">
-              <div
-                class="tab-content"
-                :style="{ height: getContentHeight(index + 1) }"
-                :ref="'tab' + (index + 1)"
-              >
+              <div class="tab-content" :style="{ height: getContentHeight(index + 1) }">
                 <div class="tab-inner">
                   <div class="visible-content">
                     <van-cell
@@ -122,85 +94,191 @@
         </div>
       </div>
     </div>
-    <!-- 关爱版 -->
-    <!-- <div class="hot-question-elder-main" v-else>
-      <div class="hot-title">猜你想问</div>
-      <div class="hot-content">
-        <a
-          href="javascript:;"
-          class="hot-content-list opacity"
-          v-for="(item, index) in newHotList"
-          :key="index"
-          @click.stop="hotQuestionChooseClick(item)"
-          v-show="item.name"
-        >
-          <div class="hot-item-question">{{ item.name }}</div>
-          <van-icon
-            class="hot-item-question-arrow"
-            name="arrow"
-            color="#7E849F"
-            size="10px"
-          />
-        </a>
-      </div>
-      <div class="hot-content-underline"></div>
-      <div class="hot-content-switcher" @click.stop="changeHotQuestion">
-        <span class="hot-exchange-icon"></span>换一换
-      </div>
-    </div> -->
   </div>
 </template>
 
 <script setup>
-import { ref, computed, inject, onMounted, nextTick } from 'vue'
-import { showToast, Tab, Tabs, Cell } from 'vant'
-import { Post } from '@/utils/https'
-import utils from '@/utils/utils'
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { showToast } from 'vant'
+import _ from 'lodash'
 import wx from 'weixin-js-sdk'
-import exchangeImg from '@/assets/images/icon-exchange.png'
-import hotBg from '@/assets/images/hot-bg.png'
+import { storeToRefs } from 'pinia'
+import { useAppStore } from '@/store/app.js'
+import { Post } from '@/utils/https'
+import iconExchange from '@/assets/images/icon-exchange.png'
 
 const props = defineProps({
-  isTab: { type: Boolean, default: true },
-  isQA: { type: Boolean, default: false },
+  isTab: {
+    type: Boolean,
+    default: true,
+  },
+  isQA: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const store = inject('appStore', null)
-const userId = inject('userId', ref(''))
-const source = inject('source', ref(''))
-const userInfo = inject('userInfo', ref({}))
-const manualService = inject('manualService', ref('1'))
-const mescrollContent = inject('mescrollContent', ref(null))
+const store = useAppStore()
+const { userId, source, planCode, userInfo, manualService, mescrollContent } = storeToRefs(store)
 
+// —— 响应式状态 ——
 const hotList = ref([])
 const newHotList = ref([])
-const tabsList = ref([])
-const active = ref(0)
-const isOpen = ref(false)
-const footerOpen = ref(false)
-const footerMore = ref(false)
-const numNone = ref(4)
-const num = ref(4)
-const timeStart = ref(0)
-const timeEnd = ref(1)
+const timeStart = ref(0) // 截取第几组的开始参数
+const timeEnd = ref(1) // 截取第几组的结束参数
+const group = ref(0) // 默认为0组
+const num = 4 // 一页展示list数量
 const clickNum = ref(0)
-const group = ref(0)
+const isItemsubmit = ref(true) // 防止重复发送
+const footerMore = ref(false)
+const footerOpen = ref(false)
+const isOpen = ref('展开')
+const numNone = ref(3)
+const active = ref(0)
+const isExchange = ref(true)
 const exchangeIcon = ref('')
-const refreshPic = { exchange: exchangeImg }
-const hotUrl = hotBg
-const one_list_name = ref('热点')
-const isOnlyOneTab = computed(() => !tabsList.value || tabsList.value.length === 0)
-const isExchange = computed(() => !props.isQA && hotList.value.length > 4)
-const isBtnsubmit = ref(true)
-const isItemsubmit = ref(true)
-const planCode = ref('')
+const one_list_data = ref([])
+const one_list_name = ref('')
+const refreshPic = { exchange: iconExchange }
+const tabsList = ref([])
+const tabHeights = reactive({})
+const collapsedHeights = reactive({})
 
-onMounted(() => {
-  planCode.value = utils.getUrlParams().planCode || ''
-  initTabList()
+// 组件根节点引用：测量时在自身 DOM 内按顺序查 .tab-content（DOM 顺序即页签顺序）
+const hotRootRef = ref(null)
+
+// —— 计算属性 ——
+const isShowExchange = computed(() => {
+  // 当isQA=true时，第一页也不显示换一换按钮，改用展开收起
+  if (props.isQA && active.value === 0) {
+    return false
+  }
+  return active.value === 0 && !props.isQA
 })
 
-function initTabList() {
+// 是否只有一个tab页签
+const isOnlyOneTab = computed(() => {
+  return tabsList.value.length === 0
+})
+
+// —— 方法 ——
+function scrollTopBody() {
+  setTimeout(() => {
+    // 滚动到底部
+    try {
+      const el = mescrollContent.value
+      if (el) el.scrollTop = el.scrollHeight || 0
+    } catch (error) {
+      console.log(error.message)
+    }
+  }, 300)
+}
+
+function changeHotQuestion() {
+  if (hotList.value.length >= 4 && hotList.value.length > num) {
+    // 点击的时候获取分为几组
+    listlen()
+    // 每点击一次记录点击次数
+    autoIncre()
+    clear()
+    renderR()
+
+    exchangeIcon.value = 'go'
+    setTimeout(() => {
+      exchangeIcon.value = ''
+    }, 500)
+    // 延迟更新高度，确保DOM已经更新
+    nextTick(() => {
+      setTimeout(() => {
+        updateTabHeight()
+      }, 30)
+    })
+  }
+}
+
+// 计算数据的长度，共分为几组，如果不能整除则加1
+function listlen() {
+  const len = hotList.value.length
+  group.value = len / num
+  if (len % num != 0) {
+    group.value = parseInt(group.value) + 1
+  }
+}
+
+// 点击次数和截取参数计数，超过组数则重新开始
+function clear() {
+  if (clickNum.value > group.value - 1) {
+    timeStart.value = 0
+    timeEnd.value = 1
+    clickNum.value = 0
+  }
+}
+
+// 每点击一次，记录次数
+function autoIncre() {
+  clickNum.value++
+  timeStart.value++
+  timeEnd.value++
+}
+
+// 截取当前每组的数据
+function renderR() {
+  if (hotList.value) {
+    newHotList.value = hotList.value.slice(num * timeStart.value, num * timeEnd.value)
+  }
+}
+
+function hotQuestionChooseClick(itemName, item = {}) {
+  const sendParmas = {
+    reqAndResType: '1', // 1文本 2图片 3问题评价
+    msgText: itemName,
+    msgSource: manualService.value, // 1机器人 2人工
+    questionType: 2,
+  }
+
+  if (String(manualService.value) == '2') {
+    return
+  }
+
+  if (isItemsubmit.value) {
+    isItemsubmit.value = false
+    scrollTopBody()
+    store
+      .sendingRobot(sendParmas)
+      .then(() => {
+        isItemsubmit.value = true
+      })
+      .catch((err) => {
+        isItemsubmit.value = true
+        console.log(err)
+      })
+  }
+  console.log('热点问题', itemName, item)
+  // 如果是保全领取、测算，则跳转页面
+  if (!!item.bqType) {
+    Post('semantic/getYzsUrl', { userId: userId.value, bqType: item.bqType, urlType: '00' }).then(
+      (res) => {
+        if (res.code === 0) {
+          if (res.data) {
+            // 跳转页面
+            wx.miniProgram.getEnv((miniRes) => {
+              if (miniRes.miniprogram) {
+                const path = res.data
+                wx.miniProgram.navigateTo({
+                  url: `/pages/webview/webview?url=${encodeURIComponent(path)}`,
+                })
+              }
+            })
+          }
+        } else {
+          showToast('网络异常，请重试')
+        }
+      },
+    )
+  }
+}
+
+function initHotQuestion(callback) {
   const param = {
     userInfoId: userId.value,
     category: 3,
@@ -215,20 +293,21 @@ function initTabList() {
         showToast(res.msg)
         return
       }
-      hotList.value = res.data || []
-      initHotQuestionYTH((ythRes) => {
-        if (Array.isArray(ythRes) && Array.isArray(hotList.value)) {
-          hotList.value = [...ythRes, ...hotList.value]
-        }
-        renderR()
-        initViewState()
-      })
+      callback && callback(res.data)
+    })
+    .catch((error) => {
+      console.log(error)
     })
-    .catch((err) => console.log(err))
 }
 
+// 获取一体化领取、测算
 function initHotQuestionYTH(callback) {
-  Post('config/getLqTabList', { userInfoId: userId.value, source: source.value })
+  const param = {
+    userInfoId: userId.value,
+    source: source.value,
+  }
+
+  Post('config/getLqTabList', param)
     .then((res) => {
       if (res.code && res.code != 0) {
         showToast(res.msg)
@@ -240,297 +319,584 @@ function initHotQuestionYTH(callback) {
       }
       callback && callback(res.data)
     })
-    .catch((err) => console.log(err))
+    .catch((error) => {
+      console.log(error)
+    })
 }
 
 function initViewState() {
   footerMore.value = false
+  // 当isQA=true时，需要检查第一页是否需要显示展开收起
   if (props.isQA && active.value === 0 && hotList.value.length > 4) {
     footerMore.value = true
   }
 }
 
 function activeChange(e) {
+  console.log(e)
   footerMore.value = true
-  isOpen.value = false
+  isExchange.value = false
+  footerOpen.value = false
   numNone.value = 3
   isOpen.value = '展开'
+  if (isShowExchange.value) isExchange.value = true
+
   let len = 0
   if (active.value === 0) {
+    // 第一页：使用hotList
     len = hotList.value.length
   } else {
-    const tabIndex = props.isQA ? active.value - 1 : active.value - 1
+    // 其他页签：tabsList索引 = active - 1
+    const tabIndex = active.value - 1
     len = tabsList.value[tabIndex] ? tabsList.value[tabIndex].question.length : 0
   }
+
+  console.log(`activeChange: active=${active.value}, len=${len}, isQA=${props.isQA}`)
+
+  // 当isQA=true时，第一页也需要显示展开收起功能
   if ((active.value === 0 && !props.isQA) || len <= 4) {
     footerMore.value = false
   }
+  // 当isQA=true且在第一页时，如果数据超过4条也要显示展开收起
+  if (props.isQA && active.value === 0 && len > 4) {
+    footerMore.value = true
+  }
+  // 其他页签如果数据超过4条也要显示展开收起
+  if (active.value > 0 && len > 4) {
+    footerMore.value = true
+  }
+  updateTabHeight()
 }
 
-function changeHotQuestion() {
-  if (hotList.value.length >= 4 && hotList.value.length > num.value) {
-    listlen()
-    autoIncre()
-    clear()
-    renderR()
-    exchangeIcon.value = 'go'
-    setTimeout(() => {
-      exchangeIcon.value = ''
-    }, 500)
+function openClick() {
+  let len = 0
+  if (active.value === 0) {
+    // 第一页：使用hotList
+    len = hotList.value.length
+  } else {
+    // 其他页签：tabsList索引 = active - 1
+    const tabIndex = active.value - 1
+    len = tabsList.value[tabIndex] ? tabsList.value[tabIndex].question.length : 0
   }
-}
 
-function listlen() {
-  let len = hotList.value.length
-  group.value = len / num.value
-  if (len % num.value != 0) {
-    group.value = parseInt(group.value) + 1
+  console.log(`openClick: active=${active.value}, len=${len}, footerOpen=${footerOpen.value}`)
+
+  if (!footerOpen.value) {
+    numNone.value = len
+    footerOpen.value = true
+    isOpen.value = '收起'
+    nextTick(() => {
+      setTimeout(() => {
+        updateTabHeight()
+        const footer = hotRootRef.value?.querySelector('.contentfooter')
+        if (footer) footer.classList.add('expanded')
+      }, 50)
+    })
+  } else {
+    numNone.value = 3
+    footerOpen.value = false
+    isOpen.value = '展开'
+    nextTick(() => {
+      setTimeout(() => {
+        updateTabHeight()
+        const footer = hotRootRef.value?.querySelector('.contentfooter')
+        if (footer) footer.classList.remove('expanded')
+      }, 50)
+    })
   }
 }
 
-function clear() {
-  if (clickNum.value > group.value - 1) {
-    timeStart.value = 0
-    timeEnd.value = 1
-    clickNum.value = 0
+function getContentHeight(tabIndex) {
+  if (!footerOpen.value) {
+    return collapsedHeights[tabIndex] || 'auto'
   }
+  return tabHeights[tabIndex] || 'auto'
 }
 
-function autoIncre() {
-  clickNum.value++
-  timeStart.value++
-  timeEnd.value++
-}
+function updateTabHeight() {
+  const measureAll = () => {
+    try {
+      const root = hotRootRef.value
+      if (!root) return
+
+      // 在组件自身 DOM 内按顺序取所有 tab-content（DOM 顺序即页签顺序），一次量完所有已渲染页签
+      const tabContents = root.querySelectorAll('.tab-content')
+      tabContents.forEach((tabContent, tabIndex) => {
+        const innerContent = tabContent.querySelector('.tab-inner')
+        const visibleCells = tabContent
+          .querySelector('.visible-content')
+          ?.querySelectorAll('.van_cell')
+        const hiddenContent = tabContent.querySelector('.hidden-content')
+        const hiddenCells = hiddenContent?.querySelectorAll('.van_cell')
+
+        if (!innerContent || !visibleCells?.length) return
+
+        // 计算前4个cell的总高度
+        let totalHeight = 0
+        visibleCells.forEach((cell) => {
+          totalHeight += cell.offsetHeight
+        })
 
-function renderR() {
-  if (hotList.value) {
-    newHotList.value = hotList.value.slice(num.value * timeStart.value, num.value * timeEnd.value)
-  }
-}
+        // 临时显现 hidden-content 测量完整高度
+        const hasMoreContent = !!hiddenCells?.length
+        let hiddenHeight = 0
+        if (hasMoreContent) {
+          const originalOpacity = hiddenContent.style.opacity
+          const originalVisibility = hiddenContent.style.visibility
+          hiddenContent.style.opacity = '1'
+          hiddenContent.style.visibility = 'visible'
+          hiddenCells.forEach((cell) => {
+            hiddenHeight += cell.offsetHeight
+          })
+          hiddenContent.style.opacity = originalOpacity
+          hiddenContent.style.visibility = originalVisibility
+        }
 
-function hotQuestionChooseClick(itemName, item = {}) {
-  if (manualService.value == '2') return
+        // 展开状态且有更多内容时添加25px
+        const expandedPadding = footerOpen.value && hasMoreContent ? 25 : 0
+        // 折叠状态且有更多内容时添加25px
+        const collapsedPadding = hasMoreContent ? 25 : 0
+        const baseHeight = Math.max(totalHeight, 160) // visible content 最小高度
 
-  let sendParmas = {
-    reqAndResType: '1',
-    msgText: itemName,
-    msgSource: manualService.value,
-    questionType: 2,
+        tabHeights[tabIndex] = `${baseHeight + hiddenHeight + expandedPadding}px`
+        collapsedHeights[tabIndex] = `${baseHeight + collapsedPadding}px`
+      })
+
+      console.log(
+        '[hot-question] updateTabHeight: active=',
+        active.value,
+        '| 已测量页签数:',
+        Object.keys(collapsedHeights).length,
+        '| 当前高度:',
+        getContentHeight(active.value),
+      )
+    } catch (error) {
+      console.error('Update height error:', error)
+    }
   }
 
-  if (!isItemsubmit.value) return
-  isItemsubmit.value = false
-  scrollTopBody()
-  store
-    ?.dispatch?.('sendingRobot', sendParmas)
-    .then(() => {
-      isItemsubmit.value = true
-    })
-    .catch((err) => {
-      isItemsubmit.value = true
-      console.log(err)
-    })
+  // van-tab 惰性渲染：切换过去的内容刚挂载，多帧兜底测量
+  nextTick(() => {
+    measureAll()
+    requestAnimationFrame(measureAll)
+    setTimeout(measureAll, 50)
+  })
+}
 
-  if (!!item.bqType) {
-    Post('semantic/getYzsUrl', {
-      userId: userId.value,
-      bqType: item.bqType,
-      urlType: '00',
-    }).then((res) => {
-      if (res.code === 0 && res.data) {
-        wx.miniProgram.getEnv((miniRes) => {
-          if (miniRes.miniprogram) {
-            wx.miniProgram.navigateTo({
-              url: `/pages/webview/webview?url=${encodeURIComponent(res.data)}`,
-            })
+// 获取tablist数据
+function initTabList() {
+  const param = {
+    source: source.value,
+  }
+  if (props.isQA) {
+    param.type = '2'
+  }
+  Post('config/getYyTabListByLabel', param)
+    .then((res) => {
+      console.log('Tab列表数据：', res)
+      if (res.code && res.code != 0) {
+        showToast(res.msg)
+        return
+      }
+      if (props.isQA) {
+        // 重设热点页签
+        one_list_data.value = _.get(res, 'data[0].questionList', [])
+        one_list_name.value = _.get(res, 'data[0].name', [])
+        hotList.value = one_list_data.value.map((item) => {
+          return {
+            category: 3,
+            source: '95270000',
+            keyWord: null,
+            name: item,
+            icon: '',
+            url: '',
+          }
+        })
+        console.log('this.hotList ===', hotList.value)
+        renderR()
+        initViewState()
+        // 确保isQA模式下第一页不显示换一换按钮
+        isExchange.value = false
+        // 数据加载完成后更新高度并重新计算footerMore状态
+        nextTick(() => {
+          activeChange(active.value)
+          updateTabHeight()
+        })
+      }
+      if (res.data && Array.isArray(res.data)) {
+        // 转换数据格式，确保与组件使用的格式一致
+        tabsList.value = res.data.map((item, index) => {
+          return {
+            id: index,
+            name: item.name || '',
+            index: index + 1,
+            question: Array.isArray(item.questionList) ? item.questionList : [],
           }
         })
+        console.log(
+          '[hot-question] tabsList 渲染数据:',
+          tabsList.value.map((t) => ({ name: t.name, count: t.question.length })),
+        )
+        if (res.data.length > 0) {
+          console.log(
+            '[hot-question] 接口原始首条结构 keys:',
+            Object.keys(res.data[0]),
+            '首条原文:',
+            JSON.stringify(res.data[0]).slice(0, 300),
+          )
+        }
+        if (props.isQA) {
+          // 人工去掉第一个页签
+          tabsList.value.shift()
+        }
+        // 数据加载完成后更新高度
+        nextTick(() => {
+          activeChange(active.value)
+          updateTabHeight()
+        })
       } else {
-        showToast('网络异常，请重试')
+        console.log('[hot-question] res.data 不是数组，无法生成页签:', res.data)
       }
     })
-  }
-}
-
-function scrollTopBody() {
-  setTimeout(() => {
-    try {
-      if (mescrollContent.value)
-        mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
-    } catch (e) {
-      console.log(e.message)
-    }
-  }, 300)
-}
-
-function getContentHeight() {
-  return 'auto'
-}
-
-function openClick() {
-  footerOpen.value = !footerOpen.value
-  isOpen.value = footerOpen.value ? '收起' : '展开'
+    .catch((error) => {
+      console.log('获取Tab列表失败：', error)
+    })
 }
 
-function updateTabHeight() {
+onMounted(() => {
+  tabsList.value = []
+  // 初始化时根据isQA设置isExchange状态
+  if (props.isQA) {
+    isExchange.value = false
+  }
+  if (!props.isQA) {
+    initHotQuestion((res) => {
+      hotList.value = res || []
+      renderR()
+      initViewState()
+      // 获取一体化领取后更新hotList重新更新
+      initHotQuestionYTH((ythRes) => {
+        if (Array.isArray(ythRes) && Array.isArray(hotList.value)) {
+          // 合并数组
+          hotList.value = [...ythRes, ...hotList.value]
+        }
+        renderR()
+        initViewState()
+      })
+      // 数据加载完成后更新高度
+      nextTick(() => {
+        updateTabHeight()
+      })
+    })
+  }
+  // 获取tablist数据
+  initTabList()
   nextTick(() => {
-    try {
-      const el = document.querySelector('.hot-question-main')
-      if (el) {
-        /* height update logic */
-      }
-    } catch (e) {
-      console.log(e)
-    }
+    updateTabHeight()
   })
-}
+})
 </script>
 
-<style scoped>
-.hot-question {
-  padding-top: 10px;
+<style lang="scss">
+.isQA {
+  :deep(.van-tabs__wrap) {
+    padding: 0 !important;
+
+    &::before {
+      right: -5px !important;
+    }
+  }
+
+  // QA模式下单个tab的下划线居中
+  &.van-tabs__line_one :deep(.van-tabs__line) {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
 }
 
-.hot-question-main .hotcontent {
-  display: flex;
-  flex-direction: column;
+.van-tabs__wrap {
+  padding: 0px 6px;
   position: relative;
-  background: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-}
+  height: 39px !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: 3;
+    right: 0;
+    top: 0;
+    width: 1px;
+    height: 40px;
+    box-shadow: -8px 0px 10px 10px #fff;
+  }
 
-.content_body {
-  width: 100%;
-  min-height: 180px;
+  &::after {
+    display: none;
+  }
 }
 
-.van-tabs__nav1 :deep(.van-tabs__line) {
-  width: 24px !important;
-  background: #025cea;
+.van-tabs__nav {
+  background: transparent;
 }
 
-.van_cell {
-  position: relative;
-  width: 100%;
-  padding: 4px 16px 4px 35px;
+.van-tabs__nav .van-hairline--top-bottom::after {
+  border: none;
 }
 
-.van_cell .van-icon {
-  color: #7e849f;
+.van-tabs__nav {
+  .van-tab {
+    padding: 0px 10px;
+    color: #7e849f;
+    font-size: 13px;
+  }
 }
 
-.van_cell span {
-  color: #17204d;
-  font-size: 13px;
-  font-weight: 400;
+.van-cell__value {
+  span {
+    word-break: break-all;
+    word-wrap: break-word;
+  }
 }
 
-.van_cell:nth-child(odd)::before {
-  position: absolute;
-  left: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-  content: '';
-  width: 11px;
-  height: 9px;
-  background: url('~@/assets/images/qustion_icon.png');
-  background-size: cover;
-}
+.van-tab--active {
+  margin: 0px -2px;
 
-.van_cell:nth-child(even)::before {
-  position: absolute;
-  left: 15px;
-  top: 50%;
-  transform: translateY(-50%);
-  content: '';
-  width: 11px;
-  height: 9px;
-  background: url('~@/assets/images/qustion_icon2.png');
-  background-size: cover;
+  span {
+    font-weight: 700;
+    font-size: 14px;
+    color: #025cea;
+  }
 }
-
-.van_cell :deep(.van-cell__right-icon) {
-  font-size: 13px;
+</style>
+<style scoped lang="scss">
+.hot-question {
+  padding-top: 10px;
 }
 
-.van_cell:active {
-  background: #fff;
-}
+.hot-question-main {
+  .hotcontent {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .content_body {
+      width: 100%;
+      min-height: 180px;
+
+      .van-tabs__nav1 {
+        font-weight: bold;
+
+        & :deep(.van-tabs__line) {
+          width: 24px !important;
+          background: #025cea;
+        }
+
+        &.van-tabs__line_one :deep(.van-tabs__line) {
+          left: 50% !important;
+          transform: translateX(-50%) !important;
+        }
+      }
+
+      .van_cell {
+        position: relative;
+        width: 100%;
+        padding: 4px 16px 4px 35px;
+
+        .van-icon {
+          color: #7e849f;
+        }
+
+        .van_cell span {
+          color: #17204d;
+          font-size: 13px;
+          font-weight: 400;
+        }
+
+        &:nth-child(odd)::before {
+          position: absolute;
+          left: 15px;
+          top: 50%;
+          transform: translateY(-50%);
+          content: '';
+          width: 11px;
+          height: 9px;
+          background: url('@/assets/images/qustion_icon.png');
+          background-size: cover;
+        }
+
+        &:nth-child(even)::before {
+          position: absolute;
+          left: 15px;
+          top: 50%;
+          transform: translateY(-50%);
+          content: '';
+          width: 11px;
+          height: 9px;
+          background: url('@/assets/images/qustion_icon2.png');
+          background-size: cover;
+        }
 
-.change_body {
-  padding: 0px 16px;
+        & :deep(.van-cell__right-icon) {
+          font-size: 13px;
+        }
+      }
+
+      .van_cell:active {
+        background: #fff;
+      }
+    }
+
+    .change_body {
+      padding: 0px 16px;
+
+      .border_div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 0.5px;
+          background: #e4eaf2;
+          left: 0;
+          top: 0;
+        }
+
+        .refresh-btn-img {
+          line-height: 17px;
+          display: flex;
+          align-items: center;
+          padding: 10px 0px;
+
+          img {
+            width: 13px;
+            height: 13px;
+            margin-right: 4px;
+          }
+
+          span {
+            font-size: 14px;
+            color: #17204d;
+            font-weight: 700;
+          }
+
+          .go {
+            transform: rotate(180deg);
+            transition: all 0.6s;
+          }
+        }
+      }
+    }
+  }
 }
 
-.border_div {
+.contentfooter {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 30px;
+  color: #025cea;
+  line-height: 30px;
+  background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%);
+  border-radius: 8px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  z-index: 1;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &.expanded,
+  .footerOpen & {
+    padding-top: 5px;
+    background: #fff;
+  }
+
+  .flag_body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  span {
+    font-size: 15px;
+    font-weight: 700;
+    margin-right: 4px;
+    line-height: 15px;
+  }
+
+  .van-icon {
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.tab-content {
   position: relative;
+  overflow: hidden;
+  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.border_div::after {
-  content: '';
+.tab-inner {
   position: absolute;
   width: 100%;
-  height: 0.5px;
-  background: #e4eaf2;
   left: 0;
   top: 0;
 }
 
-.refresh-btn-img {
-  line-height: 17px;
-  display: flex;
-  align-items: center;
-  padding: 10px 0px;
-  cursor: pointer;
+.visible-content {
+  opacity: 1;
 }
 
-.refresh-btn-img img {
-  width: 13px;
-  height: 13px;
-  margin-right: 4px;
-}
-
-.refresh-btn-img span {
-  font-size: 14px;
-  color: #17204d;
-  font-weight: 700;
-}
+.hidden-content {
+  opacity: 0;
+  transition: opacity 0.3s ease;
 
-.go {
-  transform: rotate(180deg);
-  transition: all 0.6s;
+  &.fade-in {
+    opacity: 1;
+  }
 }
 
-.hot-exchange-icon {
-  display: inline-block;
-  width: 15px;
-  height: 14.5px;
-  vertical-align: middle;
-  margin-right: 8.5px;
-  transition: transform 0.4s;
-}
+.van_cell {
+  position: relative;
+  width: 100%;
+  padding: 4px 16px 4px 35px;
+  min-height: 35px;
+  box-sizing: border-box;
 
-.hot-exchange-icon.active {
-  transform: rotate(360deg);
-  transition: all 0.4s;
+  .van-cell__value {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+  }
 }
 
-.van-tabs :deep(.van-tab) {
-  padding: 0px 10px;
-  color: #7e849f;
-  font-size: 13px;
+/* 所有页签（不只第一个）给最小高度兜底：tab-inner 是绝对定位，
+   惰性渲染 + 高度未测量时 tab-content 高度为 0，内容会被 overflow:hidden 藏住 */
+.van-tabs__content .tab-content {
+  min-height: 140px !important;
 }
 
-.van-tab--active {
-  margin: 0px -2px;
+/* 确保热点页cell内容完全显示 */
+.van-tabs__content > :first-child .van_cell {
+  overflow: visible !important;
+  white-space: normal !important;
 }
 
-.van-tab--active span {
-  font-weight: 700;
-  font-size: 14px;
-  color: #025cea;
+/* 确保"换一换"按钮触发后内容更新正常显示 */
+.van-tabs__content > :first-child .visible-content {
+  min-height: 140px;
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/src/store/app.js b/src/store/app.js
index 2e0cb72..68471d0 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -81,7 +81,8 @@ export const useAppStore = defineStore('app', () => {
   const source = ref(initialSource)
   const planCode = ref(initialPlanCode)
   const entrance = ref(initialEntrance)
-  const elder = ref(true)
+  // 关爱版标识：默认 false；仅关爱渠道（95290000/95460000/95830000）由 chat.vue 按 eldCustomer 纠正
+  const elder = ref(false)
   const notitle = ref('')
   const userInfo = ref(initialUserInfo)
   const sysConfig = ref(initialSysConfig)