index.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389
  1. <template>
  2. <view class="container">
  3. <!-- Tabbar 切换过渡页 -->
  4. <tab-transition v-if="showTabTransition" dimCode="mind" />
  5. <!-- 品牌头部 -->
  6. <PageBanner theme="mind-wisdom"
  7. tagline="心智成长 · 智慧人生"
  8. quote="知己知彼,百战不殆" />
  9. <!-- ===== 心·心理 ===== -->
  10. <view class="section-title-bar">
  11. <text class="section-title-icon">&#x2764;</text>
  12. <text class="section-title-text">心·心理</text>
  13. </view>
  14. <!-- 游客登录引导卡 -->
  15. <template v-if="!isLoggedIn">
  16. <LoginGuideCard
  17. title="登录后查看心理成长报告"
  18. :items="[
  19. '查看EMI心理测评四维分析',
  20. '查看大五人格分析报告',
  21. '阅读专属文章、参与情绪打卡'
  22. ]" />
  23. </template>
  24. <!-- 登录后:五维能量条 -->
  25. <FamilyEnergyBar
  26. v-if="isLoggedIn"
  27. dimensionCode="mind"
  28. :sandboxData="sandboxData" />
  29. <!-- 关系图谱(登录后可见) -->
  30. <FamilyRelationGraph
  31. v-if="isLoggedIn && familyMembersVisible.length > 0"
  32. dimensionCode="mind"
  33. :selfId="activeChildId"
  34. :members="familyMembersVisible"
  35. :energyMap="energyMapForGraph"
  36. :intimacyMap="intimacyMapForGraph"
  37. :compatibilityMap="compatibilityMapForGraph"
  38. @memberTap="goMemberDetail" />
  39. <!-- 登录后:用户快捷入口 -->
  40. <UserQuickEntry
  41. v-if="isLoggedIn"
  42. :userName="userName"
  43. roleName="家长"
  44. :currentChildName="currentChildName"
  45. :children="children"
  46. @childChanged="onChildChanged"
  47. @scrollTo="scrollToSection" />
  48. <!-- ===== 心理能量概况 ===== -->
  49. <view class="energy-overview" v-if="emiData">
  50. <view class="energy-badge">
  51. <text class="badge-icon">&#x2764;</text>
  52. <text class="badge-value">{{ emiData.overallScore || 0 }}</text>
  53. <text class="badge-label">心能量</text>
  54. </view>
  55. <view class="energy-badge">
  56. <text class="badge-icon">&#x1F4AA;</text>
  57. <text class="badge-value">{{ emiData.resilienceScore || 0 }}</text>
  58. <text class="badge-label">韧性评分</text>
  59. </view>
  60. <view class="energy-badge">
  61. <text class="badge-icon">&#x1F64F;</text>
  62. <text class="badge-value">{{ emiData.emotionScore || 0 }}</text>
  63. <text class="badge-label">情绪评分</text>
  64. </view>
  65. </view>
  66. <!-- EMI 四维条形图 -->
  67. <view class="emi-section" v-if="emiData">
  68. <view class="emi-card">
  69. <text class="emi-card-title">EMI 心理四维</text>
  70. <view class="emi-bar-item" v-for="dim in emiDimensions" :key="dim.key">
  71. <text class="emi-bar-label">{{ dim.label }}</text>
  72. <view class="emi-bar-track">
  73. <view class="emi-bar-fill" :style="{ width: (emiData[dim.key] || 0) + '%', background: dim.color }"></view>
  74. </view>
  75. <text class="emi-bar-score">{{ emiData[dim.key] || 0 }}</text>
  76. <text :class="['emi-bar-level', 'level-' + getScoreLevel(emiData[dim.key] || 0)]">{{ getScoreLevelText(emiData[dim.key] || 0) }}</text>
  77. </view>
  78. <view class="emi-footer">
  79. <text class="emi-overall">综合EQ分: {{ emiData.overallScore || 0 }}</text>
  80. <view class="emi-link" @click="goEmotionReport">
  81. <text class="emi-link-text">查看完整报告</text>
  82. <text class="emi-link-arrow">&#x2192;</text>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. <!-- 无 EMI 数据占位 -->
  88. <view class="placeholder-card" v-if="!emiData && !emiLoading">
  89. <text class="placeholder-icon">&#x1F9E0;</text>
  90. <text class="placeholder-title">心理评估</text>
  91. <text class="placeholder-desc">完成 EMI 心理测评后,可在此查看详细的心理分析报告</text>
  92. <view class="placeholder-btn" @click="goAssessment" v-if="isLoggedIn">预约测评</view>
  93. <view class="placeholder-btn" @click="goLogin" v-else>立即登录</view>
  94. </view>
  95. <!-- ===== 大五人格雷达图(从EMI数据中提取) ===== -->
  96. <view class="section personality-section" v-if="emiData">
  97. <view class="section-header">
  98. <text class="section-title">大五人格</text>
  99. </view>
  100. <RadarChart
  101. :dimensions="personalityDimensions"
  102. :scores="personalityScores"
  103. :childName="currentChildName || '孩子'"
  104. fillColor="#8B5CF6"
  105. gridColor="#EDE9FE"
  106. labelColor="#6D28D9" />
  107. </view>
  108. <!-- 每日心理 -->
  109. <view class="section" v-if="sectionVisible('daily_tip')">
  110. <view class="section-header">
  111. <text class="section-title">每日心理</text>
  112. </view>
  113. <view class="tip-card">
  114. <view class="tip-left-bar"></view>
  115. <view class="tip-body">
  116. <text class="tip-title">{{ dailyTip.title }}</text>
  117. <text class="tip-content">{{ dailyTip.content }}</text>
  118. <view class="tip-footer">
  119. <text class="tip-source">{{ dailyTip.source }}</text>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. <!-- 肠脑轴情绪卡片 -->
  125. <view class="section" v-if="gutIndicators && gutIndicators.length > 0">
  126. <view class="section-header">
  127. <text class="section-title">&#x1F9E0; 肠脑情绪关联</text>
  128. </view>
  129. <view class="gut-insight-text" v-if="gutInsight">
  130. <text>{{ gutInsight }}</text>
  131. </view>
  132. <view class="gut-indicator-list">
  133. <view class="gut-indicator-item" v-for="ind in gutIndicators" :key="ind.id">
  134. <view class="gut-indicator-left">
  135. <text class="gut-indicator-name">{{ ind.indicatorName || ind.name }}</text>
  136. </view>
  137. <view class="gut-indicator-bar-track">
  138. <view class="gut-indicator-bar-fill" :style="{ width: (ind.value || 0) + '%', background: indicatorColor(ind.status) }"></view>
  139. </view>
  140. <text class="gut-indicator-value">{{ ind.value }}{{ ind.unit || '%' }}</text>
  141. <text :class="['gut-indicator-status', 'status-' + (ind.status || 'normal')]">{{ statusLabel(ind.status) }}</text>
  142. </view>
  143. </view>
  144. </view>
  145. <!-- 推荐阅读 -->
  146. <DimensionArticles
  147. dimensionCode="mind"
  148. :articles="emotionArticles"
  149. :isLoggedIn="isLoggedIn"
  150. @articleClick="goArticleDetail"
  151. @moreArticles="goArticles" />
  152. <!-- ===== 传统文化(八字/五行/星座/灵数) ===== -->
  153. <view class="culture-section" v-if="isLoggedIn && traditionalData">
  154. <!-- 八字四柱 -->
  155. <view class="culture-card" v-if="traditionalData.eightCharacters">
  156. <view class="culture-card-header">
  157. <text class="culture-card-icon">&#x2637;</text>
  158. <text class="culture-card-title">八字四柱</text>
  159. </view>
  160. <view class="bazi-grid">
  161. <view class="bazi-column" v-for="(val, key) in traditionalData.eightCharacters" :key="key">
  162. <text class="bazi-pillar-label">{{ pillarLabels[key] || key }}</text>
  163. <text class="bazi-pillar-value">{{ val }}</text>
  164. </view>
  165. </view>
  166. </view>
  167. <!-- 五行能量 -->
  168. <view class="culture-card" v-if="traditionalData.wuxingElements">
  169. <view class="culture-card-header">
  170. <text class="culture-card-icon">&#x267E;</text>
  171. <text class="culture-card-title">五行能量</text>
  172. </view>
  173. <view class="wuxing-list">
  174. <view class="wuxing-item" v-for="wx in wuxingData" :key="wx.key">
  175. <text class="wuxing-label">{{ wx.label }}</text>
  176. <view class="wuxing-bar-track">
  177. <view class="wuxing-bar-fill" :style="{ width: wx.value + '%', background: wx.color }"></view>
  178. </view>
  179. <text class="wuxing-value">{{ wx.value }}%</text>
  180. </view>
  181. </view>
  182. <view class="wuxing-reading" v-if="traditionalData.wuxingReading">
  183. <text>{{ traditionalData.wuxingReading.personalTrait || '' }}</text>
  184. </view>
  185. </view>
  186. <!-- 太阳星座 + 生命灵数 双栏 -->
  187. <view class="culture-dual">
  188. <view class="culture-dual-item" v-if="traditionalData.zodiac">
  189. <text class="culture-dual-icon">&#x2600;</text>
  190. <text class="culture-dual-label">太阳星座</text>
  191. <text class="culture-dual-value">{{ traditionalData.zodiac }}</text>
  192. </view>
  193. <view class="culture-dual-item" v-if="traditionalData.numSoul">
  194. <text class="culture-dual-icon">&#x1F52E;</text>
  195. <text class="culture-dual-label">生命灵数</text>
  196. <text class="culture-dual-value">{{ traditionalData.lifeNumber || '' }}</text>
  197. </view>
  198. </view>
  199. <!-- 查看家庭天盘入口 -->
  200. <view class="culture-card" style="text-align:center; padding:16rpx;" @click="onFuncClick({needLogin:true, page:'/pages/mind-detail/family-dashboard'})">
  201. <text style="font-size:24rpx; color:#8B5CF6;">查看家庭天盘 &#x2192;</text>
  202. </view>
  203. </view>
  204. <!-- ===== 底部:维度任务/活动/商品 ===== -->
  205. <DimensionTasks
  206. v-if="isLoggedIn"
  207. :dimensionCode="currentDimensionCode"
  208. :tasks="dimensionTasks"
  209. @taskClick="onTaskClick"
  210. @moreTasks="goTasks" />
  211. <DimensionActivities
  212. :dimensionCode="currentDimensionCode"
  213. :activities="dimensionActivities"
  214. @activityClick="goActivityDetail"
  215. @moreActivities="goMoreActivities" />
  216. <DimensionProducts
  217. :dimensionCode="currentDimensionCode"
  218. :products="dimensionProducts"
  219. @productClick="goProductDetail"
  220. @moreProducts="goMoreProducts" />
  221. <!-- ===== Phase 1.2: 心理告警横幅 ===== -->
  222. <PsychCrisisBanner v-if="isLoggedIn" :childId="currentChildId" source="screening" />
  223. <!-- ===== 底部:功能入口 Grid(通用,两行) ===== -->
  224. <view class="func-section" v-if="sectionVisible('func_entries')">
  225. <view class="func-grid">
  226. <view class="func-row">
  227. <view class="func-item" v-for="item in funcListRow1" :key="item.label" @click="onFuncClick(item)">
  228. <view class="func-icon-wrap">
  229. <text class="func-icon">{{ item.icon }}</text>
  230. </view>
  231. <text class="func-label">{{ item.label }}</text>
  232. </view>
  233. </view>
  234. <view class="func-row">
  235. <view class="func-item" v-for="item in funcListRow2" :key="item.label" @click="onFuncClick(item)">
  236. <view class="func-icon-wrap">
  237. <text class="func-icon">{{ item.icon }}</text>
  238. </view>
  239. <text class="func-label">{{ item.label }}</text>
  240. </view>
  241. </view>
  242. </view>
  243. </view>
  244. <!-- 底部占位 -->
  245. <view class="bottom-spacer"></view>
  246. </view>
  247. </template>
  248. <script>
  249. import TabTransition from '../../components/tab-transition.vue'
  250. import PageBanner from '../../components/PageBanner.vue'
  251. import LoginGuideCard from '../../components/LoginGuideCard.vue'
  252. import RadarChart from '../../components/RadarChart.vue'
  253. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  254. import UserQuickEntry from '../../components/UserQuickEntry.vue'
  255. import DimensionTasks from '../../components/DimensionTasks.vue'
  256. import DimensionActivities from '../../components/DimensionActivities.vue'
  257. import DimensionProducts from '../../components/DimensionProducts.vue'
  258. import DimensionArticles from '../../components/DimensionArticles.vue'
  259. import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
  260. import PsychCrisisBanner from '../../components/PsychCrisisBanner.vue'
  261. import { getVisibleSections, getFeaturedArticles, getEmiReport, getDailyTip, getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren, getVisibleFamilyMembers, getEnergyOverview } from '../../utils/api.js'
  262. import config from '../../config.js'
  263. export default {
  264. components: { TabTransition, PageBanner, RadarChart, LoginGuideCard, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, DimensionArticles, FamilyRelationGraph, PsychCrisisBanner },
  265. data() {
  266. return {
  267. isLoggedIn: false,
  268. role: null,
  269. showTabTransition: true,
  270. currentChildId: null,
  271. visibleSections: [],
  272. familyMembersVisible: [],
  273. // 心理 Tab 数据
  274. emiData: null,
  275. emiLoading: true,
  276. personalityDimensions: [
  277. { key: 'opennessScore', label: '开放性' },
  278. { key: 'conscientiousnessScore', label: '尽责性' },
  279. { key: 'extraversionScore', label: '外向性' },
  280. { key: 'agreeablenessScore', label: '宜人性' },
  281. { key: 'neuroticismScore', label: '神经质' }
  282. ],
  283. dailyTip: {
  284. title: '成长型思维',
  285. content: '拥有成长型思维的孩子相信自己的能力可以通过努力提升,他们更愿意接受挑战,从失败中学习。作为家长,多鼓励孩子的努力而非天赋,可以帮助孩子建立成长型思维。',
  286. source: '—— 卡罗尔·德韦克《终身成长》'
  287. },
  288. emiDimensions: [
  289. { key: 'emotionScore', label: '情绪商数', color: '#FF6B35' },
  290. { key: 'resilienceScore', label: '心理韧性', color: '#F97316' },
  291. { key: 'stressCopingScore', label: '压力应对', color: '#FB923C' },
  292. { key: 'selfAwarenessScore', label: '自我认知', color: '#FBBF24' }
  293. ],
  294. // 功能入口
  295. funcList: [
  296. { icon: '\u{1F4D6}', label: '阅读', needLogin: false, page: '/pages/mind/articles' },
  297. { icon: '\u{1F4CA}', label: '测评报告', needLogin: true, page: '/pages/mind/emotion-report' },
  298. { icon: '\u{1F4DD}', label: '成长档案', needLogin: true, page: '/pages/growth/index' },
  299. { icon: '\u{2728}', label: '情绪打卡', needLogin: true, page: '/pages/mind-detail/emotion-checkin' },
  300. { icon: '\u{1F4C8}', label: '情绪趋势', needLogin: true, page: '/pages/mind-detail/emotion-trend' },
  301. { icon: '\u{1F9E9}', label: '心理自评', needLogin: true, page: '/pages/mind-detail/screening' },
  302. { icon: '\u{1F3E0}', label: '家庭天盘', needLogin: true, page: '/pages/mind-detail/family-dashboard' },
  303. { icon: '\u{1F9D8}', label: '疏导工具', needLogin: true, page: '/pages/mind-detail/soothe-toolbox' }
  304. ],
  305. articles: [],
  306. // 肠脑轴数据
  307. gutIndicators: null,
  308. gutInsight: '',
  309. // 传统文化数据
  310. traditionalData: null,
  311. traditionalLoading: true,
  312. compatibilityData: null,
  313. wuxingConfig: {
  314. wood: { label: '木', color: '#10B981' },
  315. fire: { label: '火', color: '#FF6B9D' },
  316. earth: { label: '土', color: '#FF8C42' },
  317. metal: { label: '金', color: '#6366F1' },
  318. water: { label: '水', color: '#3B82F6' }
  319. },
  320. pillarLabels: { year: '年柱', month: '月柱', day: '日柱', hour: '时柱' },
  321. familyScore: 0,
  322. // 五维组件数据
  323. userName: '',
  324. children: [],
  325. sandboxData: null,
  326. dimensionTasks: [],
  327. dimensionActivities: [],
  328. dimensionProducts: []
  329. }
  330. },
  331. computed: {
  332. personalityScores: function() {
  333. if (!this.emiData) return []
  334. return [
  335. this.emiData.opennessScore || 0,
  336. this.emiData.conscientiousnessScore || 0,
  337. this.emiData.extraversionScore || 0,
  338. this.emiData.agreeablenessScore || 0,
  339. this.emiData.neuroticismScore || 0
  340. ]
  341. },
  342. energyMapForGraph: function() {
  343. var map = {}
  344. if (this.sandboxData && this.sandboxData.members) {
  345. for (var i = 0; i < this.sandboxData.members.length; i++) {
  346. var m = this.sandboxData.members[i]
  347. map[m.memberId || m.id] = {
  348. bodyScore: m.bodyScore || 0,
  349. mindScore: m.mindScore || 0,
  350. actionScore: m.actionScore || 0
  351. }
  352. }
  353. }
  354. return map
  355. },
  356. intimacyMapForGraph: function() {
  357. return {}
  358. },
  359. compatibilityMapForGraph: function() {
  360. var map = {}
  361. if (this.compatibilityData && this.compatibilityData.relationships) {
  362. for (var i = 0; i < this.compatibilityData.relationships.length; i++) {
  363. var r = this.compatibilityData.relationships[i]
  364. var key = r.memberId1 < r.memberId2 ? r.memberId1 + '-' + r.memberId2 : r.memberId2 + '-' + r.memberId1
  365. map[key] = { overallScore: r.overallScore }
  366. }
  367. }
  368. return map
  369. },
  370. emotionArticles: function() {
  371. if (!this.articles || this.articles.length === 0) return []
  372. var result = []
  373. for (var i = 0; i < this.articles.length; i++) {
  374. var a = this.articles[i]
  375. if (a.relatedDimensions && a.relatedDimensions.indexOf('mind') !== -1) {
  376. result.push(a)
  377. }
  378. }
  379. if (result.length === 0) return this.articles.slice(0, 5)
  380. return result.slice(0, 5)
  381. },
  382. wuxingData: function() {
  383. if (!this.traditionalData || !this.traditionalData.wuxingElements) return []
  384. var elements = this.traditionalData.wuxingElements
  385. var keys = ['wood', 'fire', 'earth', 'metal', 'water']
  386. var result = []
  387. for (var i = 0; i < keys.length; i++) {
  388. var k = keys[i]
  389. if (elements[k] !== undefined) {
  390. result.push({
  391. key: k,
  392. label: this.wuxingConfig[k].label,
  393. color: this.wuxingConfig[k].color,
  394. value: elements[k]
  395. })
  396. }
  397. }
  398. return result.sort(function(a, b) { return b.value - a.value })
  399. },
  400. currentDimensionCode: function() {
  401. return 'mind'
  402. },
  403. funcListRow1: function() {
  404. return this.funcList.slice(0, 4)
  405. },
  406. funcListRow2: function() {
  407. return this.funcList.slice(4)
  408. }
  409. },
  410. onShow() {
  411. // Tabbar 切换过渡动画(最少停留 1 秒)
  412. this.showTabTransition = true
  413. var self = this
  414. setTimeout(function() {
  415. self.showTabTransition = false
  416. }, 1800)
  417. var token = uni.getStorageSync('token')
  418. this.isLoggedIn = !!token
  419. if (this.isLoggedIn) {
  420. this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  421. this.currentChildId = uni.getStorageSync('currentChildId') || null
  422. this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
  423. }
  424. this.loadSectionConfig()
  425. this.loadFeaturedArticles()
  426. this.loadDailyTip()
  427. if (this.isLoggedIn) {
  428. this.loadChildren()
  429. this.loadFamilyMembersVisible()
  430. this.loadSandboxData()
  431. this.loadEmiData()
  432. this.loadGutData()
  433. this.loadEnergyData()
  434. this.loadTraditionalCultureData()
  435. }
  436. // 游客也能浏览活动和商品
  437. this.loadDimensionActivities()
  438. this.loadDimensionProducts()
  439. },
  440. methods: {
  441. // ===== 区块可见性 =====
  442. loadSectionConfig: function() {
  443. var self = this
  444. var baseSections = ['func_entries', 'daily_tip', 'recommended_reading']
  445. if (!uni.getStorageSync('token')) {
  446. self.visibleSections = baseSections
  447. return
  448. }
  449. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  450. getVisibleSections({ pageKey: 'mind', role: role }).then(function(res) {
  451. if (res.code === 200 && res.data) {
  452. var keys = res.data.map(function(s) { return s.sectionKey })
  453. var merged = baseSections.slice()
  454. keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
  455. self.visibleSections = merged
  456. }
  457. }).catch(function() {
  458. self.visibleSections = ['func_entries', 'daily_tip', 'recommended_reading', 'mind_tasks', 'related_activities', 'purchased_courses']
  459. })
  460. },
  461. sectionVisible: function(key) {
  462. return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
  463. },
  464. // ===== 心理 Tab:EMI 数据 =====
  465. loadEmiData: function() {
  466. var self = this
  467. var childId = self.currentChildId
  468. if (!childId) {
  469. self.emiLoading = false
  470. return
  471. }
  472. self.emiLoading = true
  473. getEmiReport(childId).then(function(res) {
  474. if (res.code === 200 && res.data) {
  475. self.emiData = res.data
  476. }
  477. self.emiLoading = false
  478. }).catch(function() {
  479. self.emiLoading = false
  480. })
  481. },
  482. // ===== 每日心理 =====
  483. loadDailyTip: function() {
  484. var self = this
  485. getDailyTip().then(function(res) {
  486. if (res.code === 200 && res.data) {
  487. self.dailyTip = res.data
  488. }
  489. }).catch(function() {})
  490. },
  491. // ===== 肠脑轴情绪指标 =====
  492. loadGutData: function() {
  493. var self = this
  494. var childId = self.currentChildId
  495. if (!childId) return
  496. var token = uni.getStorageSync('token')
  497. // 获取神经递质指标
  498. uni.request({
  499. url: config.API_BASE_URL + '/api/mind/neurotransmitters',
  500. method: 'POST',
  501. header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
  502. data: { childId: childId },
  503. success: function(r) {
  504. if (r.statusCode === 200 && r.data && r.data.code === 200) {
  505. var list = r.data.data
  506. if (Array.isArray(list) && list.length > 0) {
  507. self.gutIndicators = list.slice(0, 4)
  508. }
  509. }
  510. }
  511. })
  512. // 获取情绪洞察摘要
  513. uni.request({
  514. url: config.API_BASE_URL + '/api/mind/gut-emotion-insight',
  515. method: 'POST',
  516. header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
  517. data: { childId: childId },
  518. success: function(r) {
  519. if (r.statusCode === 200 && r.data && r.data.code === 200 && r.data.data) {
  520. self.gutInsight = r.data.data.summary || ''
  521. }
  522. }
  523. })
  524. },
  525. indicatorColor: function(status) {
  526. if (status === 'abnormal' || status === '偏高' || status === '偏低') return '#EF4444'
  527. if (status === 'warning' || status === '偏高' || status === '偏低') return '#F59E0B'
  528. return '#10B981'
  529. },
  530. statusLabel: function(status) {
  531. if (status === 'normal') return '正常'
  532. if (status === 'abnormal') return '异常'
  533. if (status === 'warning') return '警讯'
  534. return status || '正常'
  535. },
  536. // ===== 文章 =====
  537. loadFeaturedArticles: function() {
  538. var self = this
  539. getFeaturedArticles({ size: 5 }).then(function(res) {
  540. if (res.code === 200 && res.data) {
  541. var gradientColors = [
  542. 'linear-gradient(135deg, #8B5CF6, #A78BFA)',
  543. 'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
  544. 'linear-gradient(135deg, #10B981, #34D399)',
  545. 'linear-gradient(135deg, #8B5CF6, #C084FC)',
  546. 'linear-gradient(135deg, #F97316, #FB923C)'
  547. ]
  548. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  549. self.articles = list.map(function(item, index) {
  550. return {
  551. id: item.id,
  552. category: item.categoryName || '成长文章',
  553. categoryColor: gradientColors[index % gradientColors.length],
  554. title: item.title || '',
  555. summary: item.summary || '',
  556. views: item.viewCount ? String(item.viewCount) : '0',
  557. likes: '0',
  558. date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
  559. relatedDimensions: item.relatedDimensions || []
  560. }
  561. })
  562. }
  563. }).catch(function() {})
  564. },
  565. // ===== EMI 分数评级 =====
  566. getScoreLevel: function(score) {
  567. if (score >= 85) return 'excellent'
  568. if (score >= 70) return 'good'
  569. if (score >= 55) return 'average'
  570. return 'low'
  571. },
  572. getScoreLevelText: function(score) {
  573. if (score >= 85) return '优秀'
  574. if (score >= 70) return '良好'
  575. if (score >= 55) return '一般'
  576. return '需提升'
  577. },
  578. // ===== 导航 =====
  579. goEmotionReport: function() {
  580. var childId = this.currentChildId || ''
  581. uni.navigateTo({ url: '/pages/mind-detail/emotion-report?childId=' + childId })
  582. },
  583. goArticles: function() {
  584. uni.navigateTo({ url: '/pages/mind-detail/articles' })
  585. },
  586. onFuncClick: function(item) {
  587. if (item.needLogin && !this.isLoggedIn) {
  588. uni.showModal({
  589. title: '提示',
  590. content: '请先登录后使用此功能',
  591. success: function(res) { if (res.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
  592. })
  593. return
  594. }
  595. if (item.page) uni.navigateTo({ url: item.page })
  596. },
  597. goArticleDetail: function(article) {
  598. var id = article.id || article
  599. uni.navigateTo({ url: '/pages/mind-detail/article-detail?id=' + id })
  600. },
  601. // ===== 孩子列表与维度数据 =====
  602. loadChildren: function() {
  603. var self = this
  604. getChildren().then(function(res) {
  605. if (res.code === 200 && res.data) {
  606. self.children = res.data
  607. var savedChildId = uni.getStorageSync('currentChildId')
  608. var found = false
  609. for (var i = 0; i < self.children.length; i++) {
  610. if (self.children[i].childId === savedChildId) {
  611. self.currentChildId = savedChildId
  612. found = true
  613. break
  614. }
  615. }
  616. if (!found && self.children.length > 0) {
  617. self.currentChildId = self.children[0].childId
  618. uni.setStorageSync('currentChildId', self.currentChildId)
  619. }
  620. if (self.currentChildId) {
  621. self.loadDimensionData()
  622. }
  623. }
  624. }).catch(function(e) {
  625. console.log('获取孩子列表失败', e)
  626. })
  627. },
  628. loadDimensionData: function() {
  629. this.loadDimensionTasks()
  630. this.loadDimensionActivities()
  631. this.loadDimensionProducts()
  632. if (this.familyMembersVisible.length > 0) {
  633. this.loadCompatibilityData()
  634. }
  635. },
  636. loadSandboxData: function() {
  637. var self = this
  638. getFamilyEnergySandbox().then(function(res) {
  639. if (res && res.data) {
  640. self.sandboxData = res.data
  641. }
  642. }).catch(function() {})
  643. },
  644. loadEnergyData: function() {
  645. var self = this
  646. if (!this.currentChildId) return
  647. getEnergyOverview(this.currentChildId).then(function(res) {
  648. if (res && res.data) {
  649. var dims = res.data.dimensions
  650. if (dims && dims.length > 0) {
  651. for (var i = 0; i < dims.length; i++) {
  652. if (dims[i] && dims[i].code === 'mind' && res.data.energyScores) {
  653. self.familyScore = res.data.energyScores.mindScore || 0
  654. }
  655. }
  656. }
  657. }
  658. }).catch(function(e) {
  659. console.log('获取能量概览失败', e)
  660. })
  661. },
  662. loadDimensionTasks: function() {
  663. var self = this
  664. if (!this.currentChildId) return
  665. getTodayTasksByCategory(this.currentChildId, 'mind').then(function(res) {
  666. if (res && res.data) {
  667. self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
  668. }
  669. }).catch(function() { self.dimensionTasks = [] })
  670. },
  671. loadDimensionActivities: function() {
  672. var self = this
  673. var dimCode = self.currentDimensionCode
  674. getActivityList({ dimensionCode: dimCode, page: 1, size: 3 }).then(function(res) {
  675. if (res && res.data) {
  676. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  677. self.dimensionActivities = list.slice(0, 3)
  678. }
  679. }).catch(function() { self.dimensionActivities = [] })
  680. },
  681. loadDimensionProducts: function() {
  682. var self = this
  683. var dimCode = self.currentDimensionCode
  684. getProductsByDomain(dimCode, 1, 4).then(function(res) {
  685. if (res && res.data) {
  686. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  687. self.dimensionProducts = list.slice(0, 4)
  688. }
  689. }).catch(function() { self.dimensionProducts = [] })
  690. },
  691. onChildChanged: function(child) {
  692. this.currentChildId = child.childId
  693. uni.setStorageSync('currentChildId', child.childId)
  694. this.loadDimensionData()
  695. this.loadEmiData()
  696. this.loadTraditionalCultureData()
  697. },
  698. loadFamilyMembersVisible: function() {
  699. var self = this
  700. getVisibleFamilyMembers().then(function(res) {
  701. self.familyMembersVisible = res.data || []
  702. }).catch(function(e) {
  703. console.log('获取可见家庭成员失败', e)
  704. self.familyMembersVisible = []
  705. })
  706. },
  707. loadCompatibilityData: function() {
  708. var self = this
  709. var familyId = uni.getStorageSync('currentFamilyId')
  710. if (!familyId) {
  711. var userInfo = uni.getStorageSync('userInfo')
  712. if (userInfo && userInfo.familyId) familyId = userInfo.familyId
  713. }
  714. if (!familyId) return
  715. var token = uni.getStorageSync('token')
  716. uni.request({
  717. url: config.API_BASE_URL + '/api/mind/traditional/family-dashboard',
  718. method: 'POST',
  719. header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
  720. data: { familyId: familyId },
  721. success: function(res) {
  722. if (res.data && res.data.code === 200 && res.data.data) {
  723. self.compatibilityData = res.data.data
  724. }
  725. },
  726. fail: function() {}
  727. })
  728. },
  729. scrollToSection: function(section) {
  730. uni.pageScrollTo({ selector: '#' + section, duration: 300 })
  731. },
  732. onTaskClick: function(task) {
  733. uni.navigateTo({ url: '/pages/tasks/tasks' })
  734. },
  735. goActivityDetail: function(act) {
  736. if (act && act.id) uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
  737. },
  738. goMoreActivities: function() {
  739. uni.navigateTo({ url: '/pages/activity/index' })
  740. },
  741. goProductDetail: function(prod) {
  742. if (prod && prod.id) uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
  743. },
  744. goMoreProducts: function() {
  745. var dimCode = this.currentDimensionCode
  746. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=' + dimCode })
  747. },
  748. goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
  749. goMemberDetail: function(member) {
  750. if (!member || !member.memberId) return
  751. var currentId = this.currentChildId
  752. uni.navigateTo({
  753. url: '/pages/mind-detail/duo-compatibility?memberId1=' + currentId + '&memberId2=' + member.memberId
  754. })
  755. },
  756. goAssessment: function() { uni.navigateTo({ url: '/pages/assessment/apply' }) },
  757. goLogin: function() { uni.navigateTo({ url: '/pages/login/login' }) },
  758. // ===== 传统文化数据 =====
  759. loadTraditionalCultureData: function() {
  760. var self = this
  761. var memberId = this.currentChildId
  762. if (!memberId) {
  763. self.traditionalLoading = false
  764. return
  765. }
  766. self.traditionalLoading = true
  767. uni.request({
  768. url: config.API_BASE_URL + '/api/mind/traditional/mirror',
  769. method: 'POST',
  770. data: { memberId: memberId, memberType: 'child' },
  771. success: function(res) {
  772. self.traditionalLoading = false
  773. if (res.data && res.data.code === 200 && res.data.data) {
  774. var d = res.data.data
  775. if (d.eightCharacters || d.wuxingElements || d.zodiac || d.numSoul) {
  776. self.traditionalData = d
  777. } else {
  778. self.traditionalData = null
  779. }
  780. } else {
  781. self.traditionalData = null
  782. }
  783. },
  784. fail: function() {
  785. self.traditionalLoading = false
  786. self.traditionalData = null
  787. }
  788. })
  789. }
  790. }
  791. }
  792. </script>
  793. <style scoped>
  794. .container {
  795. min-height: 100vh;
  796. background: #f5f7fa;
  797. padding-bottom: 120rpx;
  798. }
  799. /* ===== 心·心理 标题栏 ===== */
  800. .section-title-bar {
  801. display: flex;
  802. flex-direction: row;
  803. align-items: center;
  804. margin: 20rpx 30rpx 10rpx;
  805. padding: 16rpx 24rpx;
  806. background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  807. border-radius: 20rpx;
  808. box-shadow: 0 4rpx 16rpx rgba(139,92,246,0.25);
  809. }
  810. .section-title-icon {
  811. font-size: 32rpx;
  812. color: #fff;
  813. margin-right: 12rpx;
  814. }
  815. .section-title-text {
  816. font-size: 32rpx;
  817. font-weight: bold;
  818. color: #fff;
  819. }
  820. /* ===== 心理能量概况 ===== */
  821. .energy-overview {
  822. display: flex;
  823. flex-direction: row;
  824. margin: 20rpx 30rpx;
  825. background: #fff;
  826. border-radius: 20rpx;
  827. padding: 24rpx 16rpx;
  828. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  829. justify-content: space-around;
  830. }
  831. .energy-badge {
  832. display: flex;
  833. flex-direction: column;
  834. align-items: center;
  835. flex: 1;
  836. }
  837. .badge-icon {
  838. font-size: 36rpx;
  839. margin-bottom: 8rpx;
  840. }
  841. .badge-value {
  842. font-size: 36rpx;
  843. font-weight: bold;
  844. color: #333;
  845. }
  846. .badge-label {
  847. font-size: 20rpx;
  848. color: #999;
  849. margin-top: 4rpx;
  850. }
  851. /* ===== EMI 四维条形图 ===== */
  852. .emi-section {
  853. margin: 20rpx 30rpx;
  854. }
  855. .emi-card {
  856. background: #fff;
  857. border-radius: 24rpx;
  858. padding: 30rpx;
  859. box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  860. }
  861. .emi-card-title {
  862. font-size: 30rpx;
  863. font-weight: bold;
  864. color: #333;
  865. margin-bottom: 24rpx;
  866. display: block;
  867. }
  868. .emi-bar-item {
  869. display: flex;
  870. flex-direction: row;
  871. align-items: center;
  872. margin-bottom: 20rpx;
  873. }
  874. .emi-bar-label {
  875. font-size: 24rpx;
  876. color: #666;
  877. width: 120rpx;
  878. flex-shrink: 0;
  879. }
  880. .emi-bar-track {
  881. flex: 1;
  882. height: 20rpx;
  883. background: #f0f0f0;
  884. border-radius: 10rpx;
  885. overflow: hidden;
  886. margin: 0 16rpx;
  887. }
  888. .emi-bar-fill {
  889. height: 100%;
  890. border-radius: 10rpx;
  891. transition: width 0.5s;
  892. }
  893. .emi-bar-score {
  894. font-size: 26rpx;
  895. font-weight: bold;
  896. color: #333;
  897. width: 60rpx;
  898. text-align: right;
  899. flex-shrink: 0;
  900. }
  901. .emi-bar-level {
  902. font-size: 20rpx;
  903. width: 80rpx;
  904. text-align: right;
  905. flex-shrink: 0;
  906. }
  907. .level-excellent { color: #10B981; }
  908. .level-good { color: #3B82F6; }
  909. .level-average { color: #F97316; }
  910. .level-low { color: #EF4444; }
  911. .emi-footer {
  912. display: flex;
  913. flex-direction: row;
  914. justify-content: space-between;
  915. align-items: center;
  916. margin-top: 20rpx;
  917. padding-top: 20rpx;
  918. border-top: 1rpx solid #f0f0f0;
  919. }
  920. .emi-overall {
  921. font-size: 28rpx;
  922. font-weight: bold;
  923. color: #FF6B35;
  924. }
  925. .emi-link {
  926. display: flex;
  927. flex-direction: row;
  928. align-items: center;
  929. }
  930. .emi-link-text {
  931. font-size: 26rpx;
  932. color: #FF6B35;
  933. font-weight: 500;
  934. }
  935. .emi-link-arrow {
  936. font-size: 26rpx;
  937. color: #FF6B35;
  938. margin-left: 8rpx;
  939. }
  940. /* ===== 占位卡 ===== */
  941. .placeholder-card {
  942. margin: 30rpx;
  943. background: #fff;
  944. border-radius: 24rpx;
  945. padding: 60rpx 40rpx;
  946. display: flex;
  947. flex-direction: column;
  948. align-items: center;
  949. box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
  950. }
  951. .placeholder-icon {
  952. font-size: 80rpx;
  953. margin-bottom: 20rpx;
  954. }
  955. .placeholder-title {
  956. font-size: 32rpx;
  957. font-weight: bold;
  958. color: #333;
  959. margin-bottom: 16rpx;
  960. }
  961. .placeholder-desc {
  962. font-size: 26rpx;
  963. color: #999;
  964. text-align: center;
  965. line-height: 1.6;
  966. margin-bottom: 30rpx;
  967. }
  968. .placeholder-btn {
  969. background: linear-gradient(135deg, #FF6B35, #FFD700);
  970. color: #fff;
  971. font-size: 28rpx;
  972. font-weight: bold;
  973. padding: 16rpx 64rpx;
  974. border-radius: 40rpx;
  975. box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
  976. }
  977. /* ===== 传统文化卡片 ===== */
  978. .culture-section {
  979. margin: 20rpx 30rpx;
  980. }
  981. .culture-card {
  982. background: #fff;
  983. border-radius: 20rpx;
  984. padding: 24rpx;
  985. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  986. margin-bottom: 16rpx;
  987. }
  988. .culture-card-header {
  989. display: flex;
  990. align-items: center;
  991. margin-bottom: 16rpx;
  992. }
  993. .culture-card-icon {
  994. font-size: 32rpx;
  995. margin-right: 10rpx;
  996. }
  997. .culture-card-title {
  998. font-size: 28rpx;
  999. font-weight: 600;
  1000. color: #333;
  1001. }
  1002. .culture-card-body {
  1003. font-size: 24rpx;
  1004. color: #666;
  1005. line-height: 1.6;
  1006. }
  1007. /* 八字四柱 */
  1008. .bazi-grid {
  1009. display: flex;
  1010. justify-content: space-around;
  1011. padding: 8rpx 0;
  1012. }
  1013. .bazi-column {
  1014. display: flex;
  1015. flex-direction: column;
  1016. align-items: center;
  1017. }
  1018. .bazi-pillar-label {
  1019. font-size: 22rpx;
  1020. color: #999;
  1021. margin-bottom: 6rpx;
  1022. }
  1023. .bazi-pillar-value {
  1024. font-size: 32rpx;
  1025. font-weight: 700;
  1026. color: #8B5CF6;
  1027. background: #F5F0FF;
  1028. padding: 10rpx 14rpx;
  1029. border-radius: 10rpx;
  1030. }
  1031. /* 五行能量 */
  1032. .wuxing-list {
  1033. display: flex;
  1034. flex-direction: column;
  1035. gap: 12rpx;
  1036. }
  1037. .wuxing-item {
  1038. display: flex;
  1039. align-items: center;
  1040. gap: 12rpx;
  1041. }
  1042. .wuxing-label {
  1043. font-size: 26rpx;
  1044. font-weight: 600;
  1045. width: 44rpx;
  1046. text-align: center;
  1047. }
  1048. .wuxing-bar-track {
  1049. flex: 1;
  1050. height: 20rpx;
  1051. background: #F0F0F0;
  1052. border-radius: 10rpx;
  1053. overflow: hidden;
  1054. }
  1055. .wuxing-bar-fill {
  1056. height: 100%;
  1057. border-radius: 10rpx;
  1058. }
  1059. .wuxing-value {
  1060. font-size: 22rpx;
  1061. color: #666;
  1062. width: 56rpx;
  1063. text-align: right;
  1064. }
  1065. .wuxing-reading {
  1066. margin-top: 12rpx;
  1067. padding: 12rpx 14rpx;
  1068. background: #F8F6F0;
  1069. border-radius: 12rpx;
  1070. font-size: 24rpx;
  1071. color: #666;
  1072. line-height: 1.5;
  1073. }
  1074. /* 星座+灵数双栏 */
  1075. .culture-dual {
  1076. display: flex;
  1077. gap: 16rpx;
  1078. }
  1079. .culture-dual-item {
  1080. flex: 1;
  1081. background: #fff;
  1082. border-radius: 20rpx;
  1083. padding: 20rpx;
  1084. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  1085. display: flex;
  1086. flex-direction: column;
  1087. align-items: center;
  1088. }
  1089. .culture-dual-icon {
  1090. font-size: 36rpx;
  1091. margin-bottom: 8rpx;
  1092. }
  1093. .culture-dual-label {
  1094. font-size: 22rpx;
  1095. color: #999;
  1096. margin-bottom: 6rpx;
  1097. }
  1098. .culture-dual-value {
  1099. font-size: 28rpx;
  1100. font-weight: 700;
  1101. color: #8B5CF6;
  1102. }
  1103. .culture-empty {
  1104. text-align: center;
  1105. padding: 30rpx 0;
  1106. color: #bbb;
  1107. font-size: 24rpx;
  1108. }
  1109. /* ===== 每日心理 ===== */
  1110. .tip-card {
  1111. background: #fff;
  1112. border-radius: 20rpx;
  1113. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  1114. display: flex;
  1115. flex-direction: row;
  1116. overflow: hidden;
  1117. }
  1118. .tip-left-bar {
  1119. width: 6rpx;
  1120. background: linear-gradient(180deg, #5B9BD5, #8FC5E8);
  1121. flex-shrink: 0;
  1122. }
  1123. .tip-body {
  1124. flex: 1;
  1125. padding: 28rpx 24rpx;
  1126. }
  1127. .tip-title {
  1128. font-size: 28rpx;
  1129. font-weight: bold;
  1130. color: #5B9BD5;
  1131. display: block;
  1132. margin-bottom: 12rpx;
  1133. }
  1134. .tip-content {
  1135. font-size: 24rpx;
  1136. color: #666;
  1137. line-height: 1.6;
  1138. display: block;
  1139. margin-bottom: 16rpx;
  1140. }
  1141. .tip-footer {
  1142. display: flex;
  1143. flex-direction: row;
  1144. justify-content: flex-end;
  1145. }
  1146. .tip-source {
  1147. font-size: 22rpx;
  1148. color: #bbb;
  1149. }
  1150. /* ===== 通用区块 ===== */
  1151. .section {
  1152. margin: 20rpx 30rpx;
  1153. }
  1154. .section-header {
  1155. margin-bottom: 20rpx;
  1156. }
  1157. .section-title {
  1158. font-size: 30rpx;
  1159. font-weight: bold;
  1160. color: #333;
  1161. }
  1162. /* ===== 推荐阅读 ===== */
  1163. .article-list {
  1164. display: flex;
  1165. flex-direction: column;
  1166. }
  1167. .article-card {
  1168. background: #fff;
  1169. border-radius: 20rpx;
  1170. padding: 28rpx 24rpx;
  1171. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  1172. margin-bottom: 20rpx;
  1173. }
  1174. .article-category {
  1175. display: inline-block;
  1176. padding: 4rpx 18rpx;
  1177. border-radius: 20rpx;
  1178. margin-bottom: 14rpx;
  1179. }
  1180. .article-category-text {
  1181. font-size: 20rpx;
  1182. color: #fff;
  1183. font-weight: 500;
  1184. }
  1185. .article-title {
  1186. font-size: 28rpx;
  1187. font-weight: bold;
  1188. color: #333;
  1189. display: block;
  1190. margin-bottom: 10rpx;
  1191. }
  1192. .article-summary {
  1193. font-size: 24rpx;
  1194. color: #888;
  1195. line-height: 1.5;
  1196. display: block;
  1197. margin-bottom: 20rpx;
  1198. }
  1199. .article-meta {
  1200. display: flex;
  1201. flex-direction: row;
  1202. align-items: center;
  1203. justify-content: space-between;
  1204. }
  1205. .meta-item {
  1206. display: flex;
  1207. flex-direction: row;
  1208. align-items: center;
  1209. margin-right: 20rpx;
  1210. }
  1211. .meta-icon {
  1212. font-size: 22rpx;
  1213. margin-right: 4rpx;
  1214. }
  1215. .meta-text {
  1216. font-size: 22rpx;
  1217. color: #bbb;
  1218. }
  1219. .article-date {
  1220. font-size: 22rpx;
  1221. color: #bbb;
  1222. margin-left: auto;
  1223. }
  1224. /* ===== 功能区入口 ===== */
  1225. .func-section {
  1226. margin: 20rpx 30rpx;
  1227. }
  1228. .func-grid {
  1229. display: flex;
  1230. flex-direction: column;
  1231. gap: 16rpx;
  1232. background: #fff;
  1233. border-radius: 20rpx;
  1234. padding: 24rpx 16rpx;
  1235. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  1236. }
  1237. .func-row {
  1238. display: flex;
  1239. flex-direction: row;
  1240. justify-content: space-between;
  1241. }
  1242. .func-item {
  1243. display: flex;
  1244. flex-direction: column;
  1245. align-items: center;
  1246. flex: 1;
  1247. }
  1248. .func-icon-wrap {
  1249. width: 80rpx;
  1250. height: 80rpx;
  1251. border-radius: 40rpx;
  1252. background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  1253. display: flex;
  1254. align-items: center;
  1255. justify-content: center;
  1256. margin-bottom: 10rpx;
  1257. }
  1258. .func-icon {
  1259. font-size: 40rpx;
  1260. }
  1261. .func-label {
  1262. font-size: 22rpx;
  1263. color: #666;
  1264. font-weight: 500;
  1265. }
  1266. .func-item:active {
  1267. opacity: 0.7;
  1268. }
  1269. /* ===== 底部 ===== */
  1270. .bottom-spacer {
  1271. height: 120rpx;
  1272. }
  1273. /* ===== 肠脑轴 ===== */
  1274. .gut-insight-text {
  1275. font-size: 24rpx;
  1276. color: #666;
  1277. margin-bottom: 16rpx;
  1278. padding: 12rpx 16rpx;
  1279. background: #F0FFF4;
  1280. border-radius: 12rpx;
  1281. line-height: 1.6;
  1282. }
  1283. .gut-indicator-list {
  1284. display: flex;
  1285. flex-direction: column;
  1286. gap: 12rpx;
  1287. }
  1288. .gut-indicator-item {
  1289. display: flex;
  1290. align-items: center;
  1291. gap: 12rpx;
  1292. }
  1293. .gut-indicator-left {
  1294. width: 80rpx;
  1295. flex-shrink: 0;
  1296. }
  1297. .gut-indicator-name {
  1298. font-size: 22rpx;
  1299. color: #666;
  1300. }
  1301. .gut-indicator-bar-track {
  1302. flex: 1;
  1303. height: 16rpx;
  1304. background: #F0F0F0;
  1305. border-radius: 8rpx;
  1306. overflow: hidden;
  1307. }
  1308. .gut-indicator-bar-fill {
  1309. height: 100%;
  1310. border-radius: 8rpx;
  1311. transition: width 0.3s;
  1312. }
  1313. .gut-indicator-value {
  1314. font-size: 22rpx;
  1315. color: #666;
  1316. width: 60rpx;
  1317. text-align: right;
  1318. }
  1319. .gut-indicator-status {
  1320. font-size: 20rpx;
  1321. padding: 2rpx 12rpx;
  1322. border-radius: 10rpx;
  1323. width: 60rpx;
  1324. text-align: center;
  1325. }
  1326. .status-normal {
  1327. background: #D1FAE5;
  1328. color: #059669;
  1329. }
  1330. .status-abnormal {
  1331. background: #FEE2E2;
  1332. color: #DC2626;
  1333. }
  1334. .status-warning {
  1335. background: #FEF3C7;
  1336. color: #D97706;
  1337. }
  1338. </style>