index.vue 42 KB

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