index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860
  1. <template>
  2. <view class="body-container">
  3. <!-- Tabbar 切换过渡页 -->
  4. <tab-transition v-if="showTabTransition" dimCode="body" ref="tabTransition" @close="showTabTransition = false" />
  5. <!-- 品牌定位语(登录前显示) -->
  6. <view class="brand-strap" v-if="!isLoggedIn">
  7. <text class="brand-strap-text">科学管理全家健康数据</text>
  8. </view>
  9. <!-- 雷达图(始终显示,无用户数据时仅显示人群平均值) -->
  10. <view class="section">
  11. <view class="section-header">
  12. <text class="section-title">健康指标</text>
  13. <text class="section-sub">身体健康各项指标,分数越高代表越健康</text>
  14. <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传健康报告后显示个人数据</text>
  15. </view>
  16. <RadarChart
  17. v-if="radarDimensions && radarDimensions.length >= 3"
  18. :dimensions="radarDimensions"
  19. :scores="radarScores"
  20. :avg-scores="radarAvgScores"
  21. fillColor="#FF8C42"
  22. gridColor="#FED7AA"
  23. labelColor="#9A3412"
  24. :width="580"
  25. :height="580"
  26. @dimensionClick="goDimensionDetail" />
  27. </view>
  28. <!-- 家庭成员选择条 -->
  29. <FamilyMemberStrip
  30. v-if="currentView === 'self' && isLoggedIn"
  31. :members="familyMembersVisible"
  32. :selectedMemberId="selectedMemberId"
  33. @select="onFamilyMemberSelect"
  34. @removed="loadFamilyMembersVisible" />
  35. <!-- 游客引导语(每月更换) -->
  36. <view class="monthly-guidance" v-if="!isLoggedIn">
  37. <text class="guidance-icon">🌿</text>
  38. <text class="guidance-text">{{ monthlyGuidance }}</text>
  39. </view>
  40. <!-- 登录后:五维能量条 -->
  41. <FamilyEnergyBar
  42. v-if="isLoggedIn"
  43. dimensionCode="body"
  44. :sandboxData="sandboxData"
  45. :dualDimension="dualDimension" />
  46. <!-- 健康七维 -->
  47. <dimension-sub-dims
  48. v-if="isLoggedIn && healthSubDims.length > 0"
  49. title="🌿 健康七维"
  50. subtitle="身体各项健康指标,分数越高代表越健康"
  51. accent-color="#FF8C42"
  52. :dims="healthSubDims" />
  53. <!-- 功能入口 -->
  54. <view class="func-section" v-if="sectionVisible('func_entries')">
  55. <view class="func-grid">
  56. <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
  57. <view class="func-icon-wrap">
  58. <text class="func-icon">{{ item.icon }}</text>
  59. </view>
  60. <text class="func-label">{{ item.label }}</text>
  61. </view>
  62. </view>
  63. </view>
  64. <!-- ===== 精准营养(上传报告+产品+文章) ===== -->
  65. <view class="section nutrition-section" v-if="isLoggedIn">
  66. <view class="section-header">
  67. <text class="section-title">🥗 精准营养</text>
  68. </view>
  69. <!-- 上传报告入口 -->
  70. <view class="nutrition-report-card" @click="goToUploadReport">
  71. <view class="nutrition-report-left">
  72. <text class="nutrition-icon-large">📋</text>
  73. </view>
  74. <view class="nutrition-report-right">
  75. <text class="nutrition-title">上传健康报告</text>
  76. <text class="nutrition-desc">上传体检报告或肠道检测报告,解读分析,获取个性化营养方案</text>
  77. <view class="nutrition-report-tags">
  78. <text class="tag">体检报告</text>
  79. <text class="tag">肠道检测</text>
  80. <text class="tag">解读</text>
  81. </view>
  82. </view>
  83. <text class="nutrition-arrow">›</text>
  84. </view>
  85. </view>
  86. <!-- 身维度介绍卡片(登录后显示) -->
  87. <DimensionIntroCard dimCode="body" v-if="isLoggedIn" learn-more-url="/pages/body-detail/dimension-intro" />
  88. <!-- 底部占位 -->
  89. <view class="bottom-spacer"></view>
  90. <FloatingAvatar />
  91. </view>
  92. </template>
  93. <script>
  94. import TabTransition from '../../components/tab-transition.vue'
  95. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  96. import RadarChart from '../../components/RadarChart.vue'
  97. import DimensionSubDims from '../../components/DimensionSubDims.vue'
  98. import FloatingAvatar from '../../components/AIFloatingAvatar.vue'
  99. import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
  100. import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
  101. import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getEnergySandbox, getFamilyMemberList, getDimensionOverview } from '../../utils/api.js'
  102. export default {
  103. components: { TabTransition, FamilyEnergyBar, RadarChart, DimensionSubDims, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
  104. data() {
  105. return {
  106. isLoggedIn: false,
  107. role: null,
  108. showTabTransition: true,
  109. activeChildId: null,
  110. selectedMemberId: null,
  111. activeChildName: '',
  112. userName: '',
  113. children: [],
  114. familyMembersVisible: [],
  115. // 接口数据是否已检查(避免"暂无数据"闪烁)
  116. childrenChecked: false,
  117. membersChecked: false,
  118. healthSubDims: [],
  119. sandboxData: null,
  120. currentView: 'self', // 'self' | 'family'
  121. dualDimension: null,
  122. visibleSections: [],
  123. dimensionData: null,
  124. /** Mock 平均值(7维):生长发育/睡眠质量/视力健康/免疫力/营养均衡/肠胃健康/运动活力 */
  125. radarAvgScores: [72, 68, 75, 70, 73, 69, 71],
  126. funcList: [
  127. { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '/pages/body/exercise-record' },
  128. { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '/pages/diet/index' },
  129. { icon: '\u{1F634}', label: '作息', needLogin: true, page: '/pages/body/sleep-record' },
  130. { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '/pages/health/meditation-index' },
  131. { icon: '\u{1F4CA}', label: '舌诊', needLogin: true, page: '/pages/health/report-upload?reportType=tongue' },
  132. // 问答功能已屏蔽: { icon: '\u{1F3E5}', label: '健康管家', needLogin: true, page: '/pages/ai/chat?mode=butler&fromPage=pages/body/index' },
  133. { icon: '\u{1F9EC}', label: '健康维度', needLogin: true, page: 'health-dimensions' }
  134. ]
  135. }
  136. },
  137. computed: {
  138. /** 七维雷达图:维度标签(API无数据时使用默认标签) */
  139. radarDimensions: function() {
  140. var dims = this.dimensionData && this.dimensionData.dimensions
  141. if (dims && dims.length > 0) {
  142. var result = []
  143. for (var i = 0; i < dims.length; i++) {
  144. var d = dims[i]
  145. if (!d) continue
  146. result.push({ label: d.label || '', key: d.dimension || '' })
  147. }
  148. return result
  149. }
  150. // 无数据时使用默认七维标签
  151. return [
  152. { label: '生长发育', key: 'growth' },
  153. { label: '睡眠质量', key: 'sleep' },
  154. { label: '视力健康', key: 'vision' },
  155. { label: '免疫力', key: 'immunity' },
  156. { label: '营养均衡', key: 'nutrition' },
  157. { label: '肠胃健康', key: 'gut' },
  158. { label: '运动活力', key: 'exercise' }
  159. ]
  160. },
  161. /** 七维雷达图:分值(无数据时返回空数组,仅显示平均值) */
  162. radarScores: function() {
  163. var dims = this.dimensionData && this.dimensionData.dimensions
  164. if (!dims) return []
  165. var result = []
  166. for (var i = 0; i < dims.length; i++) {
  167. var d = dims[i]
  168. if (!d) { result.push(0); continue }
  169. var s = d.score
  170. if (typeof s !== 'number' || isNaN(s) || s === null) s = 0
  171. result.push(s)
  172. }
  173. return result
  174. },
  175. /** 每月引导语 */
  176. monthlyGuidance: function() {
  177. var month = new Date().getMonth()
  178. var messages = [
  179. '一月:新年新健康,从一次体检开始',
  180. '二月:春暖花开,适合调整作息',
  181. '三月:植树节到,守护呼吸健康',
  182. '四月:踏青正当时,关注视力保护',
  183. '五月:劳动节后,重视营养均衡',
  184. '六月:夏日来临,关注肠胃健康',
  185. '七月:暑期到来,规律运动不可少',
  186. '八月:秋前调养,提升免疫力',
  187. '九月:开学季,关注孩子生长发育',
  188. '十月:国庆长假,注意饮食控制',
  189. '十一月:秋冬交替,保暖防寒',
  190. '十二月:年终总结,规划来年健康'
  191. ]
  192. return messages[month] || messages[0]
  193. }
  194. },
  195. onShow() {
  196. this.showTabTransition = true
  197. var token = uni.getStorageSync('token')
  198. this.isLoggedIn = !!token
  199. if (this.isLoggedIn) {
  200. this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  201. this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
  202. }
  203. this.loadSectionConfig()
  204. if (this.isLoggedIn) {
  205. this.loadChildren()
  206. this.loadFamilyMembersVisible()
  207. }
  208. // 游客也能浏览活动和商品
  209. // 游客也能浏览文章
  210. this._watchPageReady()
  211. },
  212. methods: {
  213. loadSectionConfig: function() {
  214. var baseSections = ['func_entries']
  215. if (!uni.getStorageSync('token')) {
  216. this.visibleSections = baseSections
  217. return
  218. }
  219. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  220. var self = this
  221. getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
  222. if (res.code === 200 && res.data) {
  223. var keys = res.data.map(function(s) { return s.sectionKey })
  224. var merged = baseSections.slice()
  225. keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
  226. self.visibleSections = merged
  227. }
  228. }).catch(function(e) {
  229. self.visibleSections = ['func_entries']
  230. })
  231. },
  232. loadChildren: function() {
  233. var self = this
  234. getChildren().then(function(res) {
  235. if (res.code === 200 && res.data) {
  236. self.children = res.data
  237. var savedChildId = uni.getStorageSync('currentChildId')
  238. var found = false
  239. for (var i = 0; i < self.children.length; i++) {
  240. if (self.children[i].memberId === savedChildId) {
  241. self.activeChildId = savedChildId
  242. self.activeChildName = self.children[i].name || self.children[i].nickname || '孩子'
  243. found = true
  244. break
  245. }
  246. }
  247. if (!found && self.children.length > 0) {
  248. self.activeChildId = self.children[0].memberId
  249. self.activeChildName = self.children[0].name || self.children[0].nickname || '孩子'
  250. uni.setStorageSync('currentChildId', self.activeChildId)
  251. }
  252. if (self.activeChildId) {
  253. self.loadDashboardData()
  254. }
  255. }
  256. self.childrenChecked = true
  257. }).catch(function(e) {
  258. console.log('获取孩子列表失败', e)
  259. self.childrenChecked = true
  260. })
  261. },
  262. loadDashboardData: function() {
  263. if (!this.activeChildId) return
  264. this.loadEnergyData()
  265. this.loadSandboxData()
  266. this.loadHealthDimensions()
  267. },
  268. loadHealthDimensions: function() {
  269. var memberId = this.activeChildId || (this.userInfo && this.userInfo.userId)
  270. if (!memberId) {
  271. console.log('[body] loadHealthDimensions skipped: no memberId')
  272. return
  273. }
  274. var self = this
  275. getDimensionOverview({ memberId: memberId }).then(function(res) {
  276. if (res && res.data) {
  277. self.dimensionData = res.data
  278. self.healthSubDims = (self.dimensionData.dimensions || []).map(function(d) { return {label: d.label || d.dimension, score: d.score || 0, desc: d.description || ''}; });
  279. console.log('[body] dimensionData loaded:', res.data.dimensions ? res.data.dimensions.length : 0, 'dimensions')
  280. } else if (res) {
  281. console.warn('[body] dimension API error:', res.message || res.code)
  282. }
  283. }).catch(function(e) {
  284. console.error('[body] loadHealthDimensions failed', e)
  285. })
  286. },
  287. loadSandboxData: function() {
  288. var self = this
  289. getFamilyEnergySandbox().then(function(res) {
  290. if (res && res.data) {
  291. self.sandboxData = res.data
  292. }
  293. }).catch(function(e) {
  294. console.log('获取沙盘数据失败', e)
  295. })
  296. },
  297. switchView: function(view) {
  298. this.currentView = view
  299. if (view === 'family') {
  300. this.selectedMemberId = null
  301. var self = this
  302. getEnergySandbox('family').then(function(res) {
  303. if (res && res.data && !res.data.locked) {
  304. self.sandboxData = res.data.familyData || res.data
  305. }
  306. }).catch(function(e) { console.log('获取家庭数据失败', e) })
  307. } else {
  308. this.loadSandboxData()
  309. }
  310. },
  311. loadEnergyData: function() {
  312. var self = this
  313. getEnergyOverview(this.activeChildId).then(function(res) {
  314. if (res && res.data) {
  315. var dims = res.data.dimensions
  316. if (dims && dims.length > 0) {
  317. for (var i = 0; i < dims.length; i++) {
  318. if (dims[i].code === 'body') {
  319. self.dualDimension = dims[i]
  320. break
  321. }
  322. }
  323. }
  324. }
  325. }).catch(function(e) {
  326. console.log('获取能量概览失败', e)
  327. })
  328. },
  329. onFamilyMemberSelect: function(member) {
  330. this.selectedMemberId = member.id
  331. },
  332. onChildChanged: function(child) {
  333. this.activeChildId = child.memberId
  334. this.activeChildName = child.name || child.nickname || '孩子'
  335. this.loadDashboardData()
  336. },
  337. loadFamilyMembersVisible: function() {
  338. var self = this
  339. getFamilyMemberList({ visibleOnly: true }).then(function(res) {
  340. self.familyMembersVisible = res.data || []
  341. self.membersChecked = true
  342. }).catch(function(e) {
  343. console.log('获取可见家庭成员失败', e)
  344. self.familyMembersVisible = []
  345. self.membersChecked = true
  346. })
  347. },
  348. scrollToSection: function(section) {
  349. uni.pageScrollTo({ selector: '#' + section, duration: 300 })
  350. },
  351. sectionVisible: function(key) {
  352. return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
  353. },
  354. onFuncClick: function(item) {
  355. if (item.needLogin && !this.isLoggedIn) {
  356. uni.showModal({
  357. title: '提示',
  358. content: '请先登录后使用此功能',
  359. success: function(res) {
  360. if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
  361. }
  362. })
  363. return
  364. }
  365. if (item.page === 'health-dimensions') {
  366. if (!this.activeChildId) {
  367. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  368. return
  369. }
  370. uni.navigateTo({ url: '/pages/body-detail/health-dimensions?memberId=' + this.activeChildId })
  371. return
  372. }
  373. if (item.page) uni.navigateTo({ url: item.page })
  374. },
  375. goDimensionDetail: function(dimKey) {
  376. uni.navigateTo({ url: '/pages/body-detail/dimension-detail?dimension=' + dimKey + '&memberId=' + this.activeChildId })
  377. },
  378. goToCheckin: function() {
  379. var id = this.activeChildId || uni.getStorageSync('currentChildId')
  380. if (!id) {
  381. uni.showToast({ title: '请先选择成员', icon: 'none' })
  382. return
  383. }
  384. uni.navigateTo({ url: '/pages/body-detail/checkin?memberId=' + id })
  385. },
  386. goToNutritionProfile: function() {
  387. var id = this.activeChildId || uni.getStorageSync('currentChildId')
  388. if (!id) {
  389. uni.showToast({ title: '请先选择成员', icon: 'none' })
  390. return
  391. }
  392. uni.navigateTo({ url: '/pages/health/nutrition-profile?memberId=' + id })
  393. },
  394. goToUploadReport: function() {
  395. var id = this.activeChildId || uni.getStorageSync('currentChildId') || ''
  396. uni.navigateTo({ url: '/pages/health/report-upload?memberId=' + id + '&from=body' })
  397. },
  398. _watchPageReady() {
  399. var self = this
  400. var unwatch = this.$watch(function() {
  401. if (self.isLoggedIn) {
  402. return !!(self.dualDimension || self.sandboxData)
  403. } }, function(val) {
  404. if (val) {
  405. if (unwatch) unwatch()
  406. if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
  407. }
  408. })
  409. }
  410. }
  411. }
  412. </script>
  413. .view-toggle {
  414. display: flex;
  415. margin: 20rpx 30rpx;
  416. background: rgba(255,255,255,0.12);
  417. border-radius: 12rpx;
  418. padding: 6rpx;
  419. }
  420. .toggle-btn {
  421. flex: 1;
  422. text-align: center;
  423. padding: 12rpx 0;
  424. border-radius: 8rpx;
  425. font-size: 26rpx;
  426. color: rgba(255,255,255,0.65);
  427. }
  428. .toggle-btn.active {
  429. background: rgba(255,255,255,0.22);
  430. color: #fff;
  431. font-weight: 600;
  432. }
  433. /* 页面说明 */
  434. .section-sub {
  435. font-size: 22rpx;
  436. color: rgba(255,255,255,0.55);
  437. margin-top: 6rpx;
  438. display: block;
  439. }
  440. /* 得分解读卡片 */
  441. .score-explain-card {
  442. margin: 20rpx 30rpx;
  443. padding: 28rpx 24rpx;
  444. background: rgba(255,255,255,0.1);
  445. border-radius: 20rpx;
  446. border: 1rpx solid rgba(255,255,255,0.15);
  447. }
  448. .explain-header {
  449. display: flex;
  450. align-items: center;
  451. margin-bottom: 14rpx;
  452. }
  453. .explain-icon {
  454. font-size: 36rpx;
  455. margin-right: 10rpx;
  456. }
  457. .explain-title {
  458. font-size: 28rpx;
  459. font-weight: 600;
  460. color: #fff;
  461. }
  462. .explain-text {
  463. font-size: 26rpx;
  464. color: rgba(255,255,255,0.8);
  465. line-height: 1.6;
  466. }
  467. /* 子维度评分卡 */
  468. .subdim-section {
  469. margin: 20rpx 30rpx;
  470. }
  471. .subdim-cards {
  472. background: rgba(255,255,255,0.08);
  473. border-radius: 20rpx;
  474. overflow: hidden;
  475. border: 1rpx solid rgba(255,255,255,0.12);
  476. }
  477. .subdim-card {
  478. padding: 24rpx 28rpx;
  479. border-bottom: 1rpx solid rgba(255,255,255,0.08);
  480. }
  481. .subdim-card:last-child {
  482. border-bottom: none;
  483. }
  484. .subdim-card-left {
  485. display: flex;
  486. justify-content: space-between;
  487. align-items: center;
  488. margin-bottom: 12rpx;
  489. }
  490. .subdim-card-label {
  491. font-size: 28rpx;
  492. font-weight: 600;
  493. color: #fff;
  494. }
  495. .subdim-card-desc {
  496. font-size: 22rpx;
  497. color: rgba(255,255,255,0.5);
  498. margin-top: 4rpx;
  499. }
  500. .subdim-card-right {
  501. text-align: right;
  502. }
  503. .subdim-card-score {
  504. font-size: 36rpx;
  505. font-weight: 700;
  506. }
  507. .subdim-bar-track {
  508. height: 8rpx;
  509. background: rgba(255,255,255,0.1);
  510. border-radius: 4rpx;
  511. overflow: hidden;
  512. margin-top: 8rpx;
  513. }
  514. .subdim-bar-fill {
  515. height: 100%;
  516. border-radius: 4rpx;
  517. transition: width 0.5s ease;
  518. }
  519. <style scoped>
  520. .body-container {
  521. min-height: 100vh;
  522. background: #f5f7fa;
  523. padding-bottom: 120rpx;
  524. }
  525. /* ===== 功能入口 ===== */
  526. .func-section {
  527. margin: 20rpx 30rpx;
  528. }
  529. .func-grid {
  530. display: flex;
  531. flex-direction: row;
  532. justify-content: space-between;
  533. background: #fff;
  534. border-radius: 20rpx;
  535. padding: 24rpx 16rpx;
  536. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  537. }
  538. .func-item {
  539. display: flex;
  540. flex-direction: column;
  541. align-items: center;
  542. flex: 1;
  543. }
  544. .func-icon-wrap {
  545. width: 80rpx;
  546. height: 80rpx;
  547. border-radius: 40rpx;
  548. background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  549. display: flex;
  550. align-items: center;
  551. justify-content: center;
  552. margin-bottom: 10rpx;
  553. }
  554. .func-icon {
  555. font-size: 40rpx;
  556. }
  557. .func-label {
  558. font-size: 22rpx;
  559. color: #666;
  560. font-weight: 500;
  561. }
  562. /* ===== 通用区块 ===== */
  563. .section {
  564. margin: 20rpx 30rpx;
  565. }
  566. .section-header {
  567. display: flex;
  568. flex-direction: row;
  569. align-items: center;
  570. justify-content: space-between;
  571. margin-bottom: 16rpx;
  572. }
  573. .section-title {
  574. font-size: 30rpx;
  575. font-weight: bold;
  576. color: #333;
  577. }
  578. .avg-badge {
  579. font-size: 20rpx;
  580. color: #F97316;
  581. background: #FFF7ED;
  582. padding: 4rpx 12rpx;
  583. border-radius: 20rpx;
  584. margin-left: 12rpx;
  585. }
  586. /* ===== 快捷操作 ===== */
  587. .quick-actions {
  588. display: flex;
  589. flex-direction: row;
  590. margin-top: 30rpx;
  591. }
  592. .action-btn {
  593. flex: 1;
  594. background: #fff;
  595. border-radius: 16rpx;
  596. padding: 24rpx;
  597. display: flex;
  598. flex-direction: column;
  599. align-items: center;
  600. margin-right: 20rpx;
  601. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  602. }
  603. .action-btn:last-child {
  604. margin-right: 0;
  605. }
  606. .action-icon {
  607. font-size: 48rpx;
  608. margin-bottom: 8rpx;
  609. }
  610. .action-text {
  611. font-size: 26rpx;
  612. color: #666;
  613. }
  614. /* ===== 底部 ===== */
  615. .bottom-spacer {
  616. height: 120rpx;
  617. }
  618. .func-item:active, .action-btn:active {
  619. opacity: 0.7;
  620. }
  621. /* ===== 精准营养 ===== */
  622. .nutrition-section {
  623. margin-top: 20rpx;
  624. }
  625. .nutrition-report-card {
  626. display: flex;
  627. flex-direction: row;
  628. align-items: center;
  629. background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  630. border-radius: 20rpx;
  631. padding: 28rpx 24rpx;
  632. margin-bottom: 20rpx;
  633. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  634. }
  635. .nutrition-report-left {
  636. width: 100rpx;
  637. height: 100rpx;
  638. background: rgba(255,255,255,0.7);
  639. border-radius: 20rpx;
  640. display: flex;
  641. align-items: center;
  642. justify-content: center;
  643. margin-right: 20rpx;
  644. flex-shrink: 0;
  645. }
  646. .nutrition-icon-large {
  647. font-size: 52rpx;
  648. }
  649. .nutrition-report-right {
  650. flex: 1;
  651. }
  652. .nutrition-title {
  653. font-size: 30rpx;
  654. font-weight: bold;
  655. color: #2E7D32;
  656. display: block;
  657. margin-bottom: 6rpx;
  658. }
  659. .nutrition-desc {
  660. font-size: 22rpx;
  661. color: #558B2F;
  662. line-height: 1.5;
  663. display: block;
  664. margin-bottom: 10rpx;
  665. }
  666. .nutrition-report-tags {
  667. display: flex;
  668. flex-direction: row;
  669. gap: 10rpx;
  670. }
  671. .nutrition-report-tags .tag {
  672. font-size: 20rpx;
  673. color: #33691E;
  674. background: rgba(255,255,255,0.6);
  675. padding: 4rpx 14rpx;
  676. border-radius: 20rpx;
  677. }
  678. .nutrition-arrow {
  679. font-size: 40rpx;
  680. color: #A5D6A7;
  681. margin-left: 12rpx;
  682. }
  683. .nutrition-links {
  684. margin-bottom: 20rpx;
  685. }
  686. .links-label {
  687. font-size: 26rpx;
  688. font-weight: bold;
  689. color: #333;
  690. display: block;
  691. margin-bottom: 12rpx;
  692. }
  693. .links-row {
  694. display: flex;
  695. flex-direction: row;
  696. gap: 16rpx;
  697. }
  698. .link-item {
  699. flex: 1;
  700. display: flex;
  701. flex-direction: row;
  702. align-items: center;
  703. background: #fff;
  704. border-radius: 16rpx;
  705. padding: 20rpx 18rpx;
  706. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  707. gap: 12rpx;
  708. }
  709. .link-item:active {
  710. opacity: 0.7;
  711. }
  712. .link-icon {
  713. font-size: 36rpx;
  714. flex-shrink: 0;
  715. }
  716. .link-texts {
  717. flex: 1;
  718. }
  719. .link-name {
  720. font-size: 24rpx;
  721. font-weight: 500;
  722. color: #333;
  723. display: block;
  724. margin-bottom: 4rpx;
  725. }
  726. .link-desc {
  727. font-size: 20rpx;
  728. color: #999;
  729. display: block;
  730. }
  731. .link-arrow {
  732. font-size: 32rpx;
  733. color: #CCC;
  734. flex-shrink: 0;
  735. }
  736. /* ===== 推荐阅读 ===== */
  737. .article-list {
  738. display: flex;
  739. flex-direction: column;
  740. gap: 16rpx;
  741. }
  742. .article-card {
  743. background: #fff;
  744. border-radius: 16rpx;
  745. padding: 24rpx;
  746. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  747. }
  748. .article-card:active {
  749. opacity: 0.8;
  750. }
  751. .article-category {
  752. display: inline-block;
  753. padding: 4rpx 14rpx;
  754. border-radius: 8rpx;
  755. margin-bottom: 10rpx;
  756. }
  757. .article-category-text {
  758. font-size: 20rpx;
  759. color: #fff;
  760. }
  761. .article-title {
  762. display: block;
  763. font-size: 28rpx;
  764. font-weight: bold;
  765. color: #333;
  766. margin-bottom: 8rpx;
  767. line-height: 1.4;
  768. }
  769. .article-summary {
  770. display: block;
  771. font-size: 24rpx;
  772. color: #888;
  773. line-height: 1.5;
  774. margin-bottom: 12rpx;
  775. overflow: hidden;
  776. text-overflow: ellipsis;
  777. display: -webkit-box;
  778. -webkit-line-clamp: 2;
  779. -webkit-box-orient: vertical;
  780. }
  781. .article-meta {
  782. display: flex;
  783. align-items: center;
  784. gap: 16rpx;
  785. }
  786. .meta-item {
  787. display: flex;
  788. align-items: center;
  789. gap: 4rpx;
  790. }
  791. .meta-icon {
  792. font-size: 24rpx;
  793. }
  794. .meta-text {
  795. font-size: 22rpx;
  796. color: #999;
  797. }
  798. .article-date {
  799. font-size: 22rpx;
  800. color: #bbb;
  801. }
  802. /* 品牌定位语 */
  803. .brand-strap {
  804. margin: 16rpx 30rpx 0;
  805. padding: 20rpx 28rpx;
  806. background: linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.12));
  807. border-radius: 16rpx;
  808. border-left: 4rpx solid #FF8C42;
  809. }
  810. .brand-strap-text {
  811. font-size: 26rpx;
  812. color: #9A3412;
  813. font-weight: 500;
  814. }
  815. /* 每月引导语 */
  816. .monthly-guidance {
  817. margin: 16rpx 30rpx 0;
  818. padding: 20rpx 28rpx;
  819. background: linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.08));
  820. border-radius: 16rpx;
  821. border-left: 4rpx solid #FF8C42;
  822. display: flex;
  823. align-items: center;
  824. gap: 12rpx;
  825. }
  826. .guidance-icon {
  827. font-size: 32rpx;
  828. }
  829. .guidance-text {
  830. font-size: 26rpx;
  831. color: #9A3412;
  832. font-weight: 500;
  833. }
  834. </style>