index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898
  1. <template>
  2. <view class="body-container">
  3. <!-- 品牌头部 -->
  4. <PageBanner theme="body"
  5. tagline="科学管理全家健康"
  6. quote="身体健康是幸福的基础" />
  7. <!-- 游客专属区块 -->
  8. <template v-if="!isLoggedIn">
  9. <LoginGuideCard
  10. title="登录后查看全家健康数据"
  11. :items="[
  12. '查看全家身体能量数据和健康报告',
  13. '记录每日健康打卡,获取身体能量',
  14. '查看专属健康商品和活动价格'
  15. ]" />
  16. <HealthTips dimension="body" />
  17. </template>
  18. <!-- 登录后:五维能量条 -->
  19. <FamilyEnergyBar
  20. v-if="isLoggedIn"
  21. dimensionCode="body"
  22. :sandboxData="sandboxData"
  23. :dualDimension="dualDimension" />
  24. <!-- 关系图谱(登录后可见) -->
  25. <FamilyRelationGraph
  26. v-if="isLoggedIn && familyMembersVisible.length > 0"
  27. dimensionCode="body"
  28. :selfId="activeChildId"
  29. :members="familyMembersVisible"
  30. :energyMap="energyMapForGraph"
  31. :intimacyMap="intimacyMapForGraph"
  32. @memberTap="goMemberDetail" />
  33. <!-- 登录后:用户快捷入口 -->
  34. <UserQuickEntry
  35. v-if="isLoggedIn"
  36. :userName="userName"
  37. roleName="家长"
  38. :currentChildName="activeChildName"
  39. :children="children"
  40. @childChanged="onChildChanged"
  41. @scrollTo="scrollToSection" />
  42. <!-- 功能入口 -->
  43. <view class="func-section" v-if="sectionVisible('func_entries')">
  44. <view class="func-grid">
  45. <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
  46. <view class="func-icon-wrap">
  47. <text class="func-icon">{{ item.icon }}</text>
  48. </view>
  49. <text class="func-label">{{ item.label }}</text>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 健康报告摘要(登录后可见) -->
  54. <view class="section" v-if="sectionVisible('health_report') && isLoggedIn">
  55. <view class="section-header">
  56. <text class="section-title">健康报告</text>
  57. <text class="section-more" @click="goToHealthReport">查看详情 ›</text>
  58. </view>
  59. <view class="report-card" v-if="latestReport">
  60. <view class="report-type-tag">{{ reportTypeLabel }}</view>
  61. <view class="report-score-row">
  62. <view class="score-circle">
  63. <text class="score-value">{{ latestReport.overallScore || '--' }}</text>
  64. <text class="score-label">综合评分</text>
  65. </view>
  66. <view class="report-meta">
  67. <view class="meta-item" v-if="latestReport.gutHealthScore">
  68. <text class="meta-label">肠道健康</text>
  69. <text class="meta-value">{{ latestReport.gutHealthScore }}</text>
  70. </view>
  71. <view class="meta-item" v-if="latestReport.nutritionScore">
  72. <text class="meta-label">营养状况</text>
  73. <text class="meta-value">{{ latestReport.nutritionScore }}</text>
  74. </view>
  75. <view class="meta-item" v-if="latestReport.gutAge">
  76. <text class="meta-label">肠道年龄</text>
  77. <text class="meta-value">{{ latestReport.gutAge }}</text>
  78. </view>
  79. </view>
  80. </view>
  81. <text class="report-date">报告日期:{{ formatDate(latestReport.reportDate) }}</text>
  82. </view>
  83. <view class="report-empty" v-else>
  84. <text class="empty-tip">暂无健康报告</text>
  85. <text class="empty-sub">规划师录入后将自动显示</text>
  86. </view>
  87. </view>
  88. <!-- ===== 精准营养(上传报告+产品+文章) ===== -->
  89. <view class="section nutrition-section" v-if="isLoggedIn">
  90. <view class="section-header">
  91. <text class="section-title">🥗 精准营养</text>
  92. </view>
  93. <!-- 上传报告入口 -->
  94. <view class="nutrition-report-card" @click="goToUploadReport">
  95. <view class="nutrition-report-left">
  96. <text class="nutrition-icon-large">📋</text>
  97. </view>
  98. <view class="nutrition-report-right">
  99. <text class="nutrition-title">上传健康报告</text>
  100. <text class="nutrition-desc">上传体检报告或肠道检测报告,AI智能解读分析,获取个性化营养方案</text>
  101. <view class="nutrition-report-tags">
  102. <text class="tag">体检报告</text>
  103. <text class="tag">肠道检测</text>
  104. <text class="tag">AI解读</text>
  105. </view>
  106. </view>
  107. <text class="nutrition-arrow">›</text>
  108. </view>
  109. <!-- 菌群检测产品链接 -->
  110. <view class="nutrition-links">
  111. <text class="links-label">🔥 相关产品</text>
  112. <view class="links-row">
  113. <view class="link-item" @click="goToShopProduct('gut_flora')">
  114. <text class="link-icon">🧪</text>
  115. <view class="link-texts">
  116. <text class="link-name">肠道菌群检测</text>
  117. <text class="link-desc">了解孩子的肠道健康状况</text>
  118. </view>
  119. <text class="link-arrow">›</text>
  120. </view>
  121. <view class="link-item" @click="goToShopProduct('probiotic')">
  122. <text class="link-icon">🦠</text>
  123. <view class="link-texts">
  124. <text class="link-name">益生菌补充</text>
  125. <text class="link-desc">平衡肠道菌群,增强免疫力</text>
  126. </view>
  127. <text class="link-arrow">›</text>
  128. </view>
  129. </view>
  130. </view>
  131. <!-- 相关文章链接 -->
  132. <view class="nutrition-links">
  133. <text class="links-label">📖 相关文章</text>
  134. <view class="links-row">
  135. <view class="link-item" @click="goToArticle('gut_health')">
  136. <text class="link-icon">📝</text>
  137. <view class="link-texts">
  138. <text class="link-name">肠道菌群与儿童健康</text>
  139. <text class="link-desc">肠道菌群如何影响孩子的免疫力</text>
  140. </view>
  141. <text class="link-arrow">›</text>
  142. </view>
  143. <view class="link-item" @click="goToArticle('nutrition_guide')">
  144. <text class="link-icon">📝</text>
  145. <view class="link-texts">
  146. <text class="link-name">儿童精准营养指南</text>
  147. <text class="link-desc">科学搭配饮食,促进健康成长</text>
  148. </view>
  149. <text class="link-arrow">›</text>
  150. </view>
  151. </view>
  152. </view>
  153. </view>
  154. <!-- 维度任务 -->
  155. <DimensionTasks
  156. v-if="isLoggedIn"
  157. dimensionCode="body"
  158. :tasks="dimensionTasks"
  159. @taskClick="onTaskClick"
  160. @moreTasks="goTasks" />
  161. <!-- 维度活动 -->
  162. <DimensionActivities
  163. dimensionCode="body"
  164. :activities="dimensionActivities"
  165. @activityClick="goActivityDetail"
  166. @moreActivities="goMoreActivities" />
  167. <!-- 维度商品 -->
  168. <DimensionProducts
  169. dimensionCode="body"
  170. :products="dimensionProducts"
  171. @productClick="goProductDetail"
  172. @moreProducts="goMoreProducts" />
  173. <!-- 健康小贴士 -->
  174. <view class="section" v-if="sectionVisible('health_tips')">
  175. <view class="section-header">
  176. <text class="section-title">健康小贴士</text>
  177. </view>
  178. <view class="tips-list">
  179. <view class="tip-card" v-for="item in healthTips" :key="item.id">
  180. <text class="tip-title">{{ item.title }}</text>
  181. <text class="tip-summary">{{ item.summary }}</text>
  182. </view>
  183. </view>
  184. </view>
  185. <!-- 快捷操作按钮 -->
  186. <view class="section quick-actions" v-if="isLoggedIn">
  187. <view class="action-btn" @click="goToHealthReport">
  188. <text class="action-icon">📋</text>
  189. <text class="action-text">报告详情</text>
  190. </view>
  191. <view class="action-btn" @click="goToCheckin">
  192. <text class="action-icon">🏃</text>
  193. <text class="action-text">健康打卡</text>
  194. </view>
  195. <view class="action-btn" @click="goToNutritionProfile">
  196. <text class="action-icon">🥗</text>
  197. <text class="action-text">营养档案</text>
  198. </view>
  199. </view>
  200. <!-- 底部占位 -->
  201. <view class="bottom-spacer"></view>
  202. </view>
  203. </template>
  204. <script>
  205. import PageBanner from '../../components/PageBanner.vue'
  206. import LoginGuideCard from '../../components/LoginGuideCard.vue'
  207. import HealthTips from '../../components/HealthTips.vue'
  208. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  209. import UserQuickEntry from '../../components/UserQuickEntry.vue'
  210. import DimensionTasks from '../../components/DimensionTasks.vue'
  211. import DimensionActivities from '../../components/DimensionActivities.vue'
  212. import DimensionProducts from '../../components/DimensionProducts.vue'
  213. import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
  214. import { getVisibleSections, getEnergyOverview, getChildren, getTodayTasksByCategory, getActivityList, getProductsByDomain, getFamilyEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'
  215. import config from '../../config.js'
  216. var BASE_URL = config.api('')
  217. const healthRequest = function(url, data) {
  218. var token = uni.getStorageSync('token')
  219. return new Promise(function(resolve, reject) {
  220. uni.request({
  221. url: BASE_URL + url,
  222. method: 'POST',
  223. data: data,
  224. header: {
  225. 'Content-Type': 'application/json',
  226. 'Authorization': token ? 'Bearer ' + token : ''
  227. },
  228. success: function(res) {
  229. if (res.data.code === 200) {
  230. resolve(res.data)
  231. } else {
  232. reject(res.data)
  233. }
  234. },
  235. fail: function(err) {
  236. reject(err)
  237. }
  238. })
  239. })
  240. }
  241. export default {
  242. components: { PageBanner, LoginGuideCard, HealthTips, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, FamilyRelationGraph },
  243. data() {
  244. return {
  245. isLoggedIn: false,
  246. role: null,
  247. activeChildId: null,
  248. activeChildName: '',
  249. userName: '',
  250. children: [],
  251. familyMembersVisible: [],
  252. sandboxData: null,
  253. dualDimension: null,
  254. visibleSections: [],
  255. latestReport: null,
  256. dimensionTasks: [],
  257. dimensionActivities: [],
  258. dimensionProducts: [],
  259. funcList: [
  260. { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '' },
  261. { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '' },
  262. { icon: '\u{1F634}', label: '作息', needLogin: true, page: '' },
  263. { icon: '\u{1F9A0}', label: '菌群', needLogin: true, page: '' },
  264. { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '' }
  265. ],
  266. healthTips: [
  267. { id: 1, title: '儿童每日运动指南', summary: '不同年龄段儿童每天需要多少运动量?科学运动助力健康成长。' },
  268. { id: 2, title: '五行饮食搭配法则', summary: '根据五行理论合理搭配膳食,均衡营养从每一餐开始。' },
  269. { id: 3, title: '优质睡眠从小养成', summary: '帮助孩子建立规律的作息习惯,提升睡眠质量。' },
  270. { id: 4, title: '肠道菌群与免疫力', summary: '了解益生菌对儿童健康的重要作用,从内部提升抵抗力。' }
  271. ]
  272. }
  273. },
  274. computed: {
  275. reportTypeLabel: function() {
  276. if (!this.latestReport) return ''
  277. return this.latestReport.reportType === 'gut_flora' ? '肠道检测报告' : '体检报告'
  278. },
  279. energyMapForGraph: function() {
  280. var map = {}
  281. if (this.sandboxData && this.sandboxData.members) {
  282. for (var i = 0; i < this.sandboxData.members.length; i++) {
  283. var m = this.sandboxData.members[i]
  284. map[m.memberId || m.id] = {
  285. bodyScore: m.bodyScore || 0,
  286. mindScore: m.mindScore || 0,
  287. actionScore: m.actionScore || 0
  288. }
  289. }
  290. }
  291. return map
  292. },
  293. intimacyMapForGraph: function() {
  294. return {}
  295. }
  296. },
  297. onShow() {
  298. var token = uni.getStorageSync('token')
  299. this.isLoggedIn = !!token
  300. if (this.isLoggedIn) {
  301. this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  302. this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
  303. }
  304. this.loadSectionConfig()
  305. if (this.isLoggedIn) {
  306. this.loadChildren()
  307. this.loadFamilyMembersVisible()
  308. }
  309. // 游客也能浏览活动和商品
  310. this.loadDimensionActivities()
  311. this.loadDimensionProducts()
  312. },
  313. methods: {
  314. loadSectionConfig: function() {
  315. var baseSections = ['func_entries']
  316. if (!uni.getStorageSync('token')) {
  317. this.visibleSections = baseSections
  318. return
  319. }
  320. var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
  321. var self = this
  322. getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
  323. if (res.code === 200 && res.data) {
  324. var keys = res.data.map(function(s) { return s.sectionKey })
  325. var merged = baseSections.slice()
  326. keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
  327. self.visibleSections = merged
  328. }
  329. }).catch(function(e) {
  330. self.visibleSections = ['func_entries']
  331. })
  332. },
  333. loadChildren: function() {
  334. var self = this
  335. getChildren().then(function(res) {
  336. if (res.code === 200 && res.data) {
  337. self.children = res.data
  338. var savedChildId = uni.getStorageSync('currentChildId')
  339. var found = false
  340. for (var i = 0; i < self.children.length; i++) {
  341. if (self.children[i].childId === savedChildId) {
  342. self.activeChildId = savedChildId
  343. self.activeChildName = self.children[i].name || self.children[i].nickname || '孩子'
  344. found = true
  345. break
  346. }
  347. }
  348. if (!found && self.children.length > 0) {
  349. self.activeChildId = self.children[0].childId
  350. self.activeChildName = self.children[0].name || self.children[0].nickname || '孩子'
  351. uni.setStorageSync('currentChildId', self.activeChildId)
  352. }
  353. if (self.activeChildId) {
  354. self.loadDashboardData()
  355. }
  356. }
  357. }).catch(function(e) {
  358. console.log('获取孩子列表失败', e)
  359. })
  360. },
  361. loadDashboardData: function() {
  362. if (!this.activeChildId) return
  363. this.loadHealthReport()
  364. this.loadEnergyData()
  365. this.loadDimensionTasks()
  366. this.loadDimensionActivities()
  367. this.loadDimensionProducts()
  368. this.loadSandboxData()
  369. },
  370. loadSandboxData: function() {
  371. var self = this
  372. getFamilyEnergySandbox().then(function(res) {
  373. if (res && res.data) {
  374. self.sandboxData = res.data
  375. }
  376. }).catch(function(e) {
  377. console.log('获取沙盘数据失败', e)
  378. })
  379. },
  380. loadHealthReport: function() {
  381. var self = this
  382. healthRequest('/api/health/report/latest', { childId: this.activeChildId }).then(function(res) {
  383. if (res.data) {
  384. self.latestReport = res.data
  385. }
  386. }).catch(function(e) {
  387. console.log('获取健康报告失败', e)
  388. })
  389. },
  390. loadEnergyData: function() {
  391. var self = this
  392. getEnergyOverview(this.activeChildId).then(function(res) {
  393. if (res && res.data) {
  394. var dims = res.data.dimensions
  395. if (dims && dims.length > 0) {
  396. for (var i = 0; i < dims.length; i++) {
  397. if (dims[i].code === 'body') {
  398. self.dualDimension = dims[i]
  399. break
  400. }
  401. }
  402. }
  403. }
  404. }).catch(function(e) {
  405. console.log('获取能量概览失败', e)
  406. })
  407. },
  408. loadDimensionTasks: function() {
  409. var self = this
  410. if (!this.activeChildId) return
  411. getTodayTasksByCategory(this.activeChildId, 'body').then(function(res) {
  412. if (res && res.data) {
  413. self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
  414. }
  415. }).catch(function() { self.dimensionTasks = [] })
  416. },
  417. loadDimensionActivities: function() {
  418. var self = this
  419. getActivityList({ dimensionCode: 'body', page: 1, size: 3 }).then(function(res) {
  420. if (res && res.data) {
  421. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  422. self.dimensionActivities = list.slice(0, 3)
  423. }
  424. }).catch(function() { self.dimensionActivities = [] })
  425. },
  426. loadDimensionProducts: function() {
  427. var self = this
  428. getProductsByDomain('body', 1, 4).then(function(res) {
  429. if (res && res.data) {
  430. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  431. self.dimensionProducts = list.slice(0, 4)
  432. }
  433. }).catch(function() { self.dimensionProducts = [] })
  434. },
  435. onChildChanged: function(child) {
  436. this.activeChildId = child.childId
  437. this.activeChildName = child.name || child.nickname || '孩子'
  438. this.loadDashboardData()
  439. },
  440. loadFamilyMembersVisible: function() {
  441. var self = this
  442. getVisibleFamilyMembers().then(function(res) {
  443. self.familyMembersVisible = res.data || []
  444. }).catch(function(e) {
  445. console.log('获取可见家庭成员失败', e)
  446. self.familyMembersVisible = []
  447. })
  448. },
  449. scrollToSection: function(section) {
  450. uni.pageScrollTo({ selector: '#' + section, duration: 300 })
  451. },
  452. onTaskClick: function(task) {
  453. uni.navigateTo({ url: '/pages/tasks/tasks' })
  454. },
  455. goActivityDetail: function(act) {
  456. if (act && act.id) uni.navigateTo({ url: '/pages/discover/activity-detail/activity-detail?id=' + act.id })
  457. },
  458. goMoreActivities: function() {
  459. uni.navigateTo({ url: '/pages/discover/index?type=activity&dimension=body' })
  460. },
  461. goProductDetail: function(prod) {
  462. if (prod && prod.id) uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + prod.id })
  463. },
  464. goMoreProducts: function() {
  465. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body' })
  466. },
  467. goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
  468. goMemberDetail: function(member) {
  469. if (!member || !member.memberId) return
  470. uni.navigateTo({
  471. url: '/pages/body/member-body-detail?childId=' + member.memberId
  472. })
  473. },
  474. sectionVisible: function(key) {
  475. return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
  476. },
  477. onFuncClick: function(item) {
  478. if (item.needLogin && !this.isLoggedIn) {
  479. uni.showModal({
  480. title: '提示',
  481. content: '请先登录后使用此功能',
  482. success: function(res) {
  483. if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
  484. }
  485. })
  486. return
  487. }
  488. if (item.page) uni.navigateTo({ url: item.page })
  489. },
  490. goToHealthReport: function() {
  491. if (!this.activeChildId) {
  492. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  493. return
  494. }
  495. uni.navigateTo({ url: '/pages/body/health-report?childId=' + this.activeChildId })
  496. },
  497. goToCheckin: function() {
  498. if (!this.activeChildId) {
  499. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  500. return
  501. }
  502. uni.navigateTo({ url: '/pages/body/checkin?childId=' + this.activeChildId })
  503. },
  504. goToNutritionProfile: function() {
  505. if (!this.activeChildId) {
  506. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  507. return
  508. }
  509. uni.navigateTo({ url: '/pages/health/nutrition-profile?childId=' + this.activeChildId })
  510. },
  511. goToUploadReport: function() {
  512. if (!this.activeChildId) {
  513. uni.showToast({ title: '请先选择孩子', icon: 'none' })
  514. return
  515. }
  516. uni.navigateTo({ url: '/pages/health/report-upload?childId=' + this.activeChildId + '&from=body' })
  517. },
  518. goToShopProduct: function(type) {
  519. if (type === 'gut_flora') {
  520. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body&keyword=' + encodeURIComponent('肠道菌群检测') })
  521. } else if (type === 'probiotic') {
  522. uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body&keyword=' + encodeURIComponent('益生菌') })
  523. }
  524. },
  525. goToArticle: function(topic) {
  526. if (topic === 'gut_health') {
  527. uni.navigateTo({ url: '/pages/mind/articles?tag=' + encodeURIComponent('肠道健康') })
  528. } else if (topic === 'nutrition_guide') {
  529. uni.navigateTo({ url: '/pages/mind/articles?tag=' + encodeURIComponent('精准营养') })
  530. }
  531. },
  532. formatDate: function(dateStr) {
  533. if (!dateStr) return '--'
  534. try {
  535. var d = new Date(dateStr)
  536. var y = d.getFullYear()
  537. var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
  538. var day = ('' + d.getDate()).padStart(2, '0')
  539. return y + '-' + m + '-' + day
  540. } catch (e) {
  541. return dateStr
  542. }
  543. }
  544. }
  545. }
  546. </script>
  547. <style scoped>
  548. .body-container {
  549. min-height: 100vh;
  550. background: #f5f7fa;
  551. padding-bottom: 120rpx;
  552. }
  553. /* ===== 功能入口 ===== */
  554. .func-section {
  555. margin: 20rpx 30rpx;
  556. }
  557. .func-grid {
  558. display: flex;
  559. flex-direction: row;
  560. justify-content: space-between;
  561. background: #fff;
  562. border-radius: 20rpx;
  563. padding: 24rpx 16rpx;
  564. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  565. }
  566. .func-item {
  567. display: flex;
  568. flex-direction: column;
  569. align-items: center;
  570. flex: 1;
  571. }
  572. .func-icon-wrap {
  573. width: 80rpx;
  574. height: 80rpx;
  575. border-radius: 40rpx;
  576. background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  577. display: flex;
  578. align-items: center;
  579. justify-content: center;
  580. margin-bottom: 10rpx;
  581. }
  582. .func-icon {
  583. font-size: 40rpx;
  584. }
  585. .func-label {
  586. font-size: 22rpx;
  587. color: #666;
  588. font-weight: 500;
  589. }
  590. /* ===== 通用区块 ===== */
  591. .section {
  592. margin: 20rpx 30rpx;
  593. }
  594. .section-header {
  595. display: flex;
  596. flex-direction: row;
  597. align-items: center;
  598. justify-content: space-between;
  599. margin-bottom: 16rpx;
  600. }
  601. .section-title {
  602. font-size: 30rpx;
  603. font-weight: bold;
  604. color: #333;
  605. }
  606. .section-more {
  607. font-size: 24rpx;
  608. color: #5B9BD5;
  609. }
  610. /* ===== 健康报告 ===== */
  611. .report-card {
  612. background: #fff;
  613. border-radius: 20rpx;
  614. padding: 24rpx;
  615. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  616. }
  617. .report-type-tag {
  618. display: inline-block;
  619. background: #E8F5E9;
  620. color: #2E7D32;
  621. font-size: 22rpx;
  622. padding: 4rpx 16rpx;
  623. border-radius: 20rpx;
  624. margin-bottom: 16rpx;
  625. }
  626. .report-score-row {
  627. display: flex;
  628. flex-direction: row;
  629. align-items: center;
  630. }
  631. .score-circle {
  632. width: 140rpx;
  633. height: 140rpx;
  634. border-radius: 70rpx;
  635. background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  636. display: flex;
  637. flex-direction: column;
  638. align-items: center;
  639. justify-content: center;
  640. margin-right: 24rpx;
  641. }
  642. .score-value {
  643. font-size: 48rpx;
  644. font-weight: bold;
  645. color: #1565C0;
  646. }
  647. .score-label {
  648. font-size: 20rpx;
  649. color: #64B5F6;
  650. }
  651. .report-meta {
  652. flex: 1;
  653. }
  654. .meta-item {
  655. display: flex;
  656. flex-direction: row;
  657. align-items: center;
  658. margin-bottom: 12rpx;
  659. }
  660. .meta-label {
  661. font-size: 24rpx;
  662. color: #666;
  663. width: 140rpx;
  664. }
  665. .meta-value {
  666. font-size: 26rpx;
  667. color: #333;
  668. font-weight: 500;
  669. }
  670. .report-date {
  671. font-size: 22rpx;
  672. color: #bbb;
  673. margin-top: 16rpx;
  674. }
  675. .report-empty {
  676. background: #fff;
  677. border-radius: 20rpx;
  678. padding: 40rpx;
  679. text-align: center;
  680. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  681. }
  682. .empty-tip {
  683. font-size: 28rpx;
  684. color: #999;
  685. display: block;
  686. }
  687. .empty-sub {
  688. font-size: 24rpx;
  689. color: #ccc;
  690. display: block;
  691. margin-top: 8rpx;
  692. }
  693. /* ===== 健康小贴士 ===== */
  694. .tips-list {
  695. display: flex;
  696. flex-direction: column;
  697. }
  698. .tip-card {
  699. background: #fff;
  700. border-radius: 20rpx;
  701. padding: 24rpx;
  702. margin-bottom: 16rpx;
  703. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  704. }
  705. .tip-title {
  706. font-size: 28rpx;
  707. font-weight: bold;
  708. color: #333;
  709. display: block;
  710. margin-bottom: 10rpx;
  711. }
  712. .tip-summary {
  713. font-size: 24rpx;
  714. color: #888;
  715. line-height: 1.5;
  716. display: block;
  717. }
  718. /* ===== 快捷操作 ===== */
  719. .quick-actions {
  720. display: flex;
  721. flex-direction: row;
  722. margin-top: 30rpx;
  723. }
  724. .action-btn {
  725. flex: 1;
  726. background: #fff;
  727. border-radius: 16rpx;
  728. padding: 24rpx;
  729. display: flex;
  730. flex-direction: column;
  731. align-items: center;
  732. margin-right: 20rpx;
  733. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  734. }
  735. .action-btn:last-child {
  736. margin-right: 0;
  737. }
  738. .action-icon {
  739. font-size: 48rpx;
  740. margin-bottom: 8rpx;
  741. }
  742. .action-text {
  743. font-size: 26rpx;
  744. color: #666;
  745. }
  746. /* ===== 底部 ===== */
  747. .bottom-spacer {
  748. height: 120rpx;
  749. }
  750. .func-item:active, .action-btn:active {
  751. opacity: 0.7;
  752. }
  753. /* ===== 精准营养 ===== */
  754. .nutrition-section {
  755. margin-top: 20rpx;
  756. }
  757. .nutrition-report-card {
  758. display: flex;
  759. flex-direction: row;
  760. align-items: center;
  761. background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  762. border-radius: 20rpx;
  763. padding: 28rpx 24rpx;
  764. margin-bottom: 20rpx;
  765. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  766. }
  767. .nutrition-report-left {
  768. width: 100rpx;
  769. height: 100rpx;
  770. background: rgba(255,255,255,0.7);
  771. border-radius: 20rpx;
  772. display: flex;
  773. align-items: center;
  774. justify-content: center;
  775. margin-right: 20rpx;
  776. flex-shrink: 0;
  777. }
  778. .nutrition-icon-large {
  779. font-size: 52rpx;
  780. }
  781. .nutrition-report-right {
  782. flex: 1;
  783. }
  784. .nutrition-title {
  785. font-size: 30rpx;
  786. font-weight: bold;
  787. color: #2E7D32;
  788. display: block;
  789. margin-bottom: 6rpx;
  790. }
  791. .nutrition-desc {
  792. font-size: 22rpx;
  793. color: #558B2F;
  794. line-height: 1.5;
  795. display: block;
  796. margin-bottom: 10rpx;
  797. }
  798. .nutrition-report-tags {
  799. display: flex;
  800. flex-direction: row;
  801. gap: 10rpx;
  802. }
  803. .nutrition-report-tags .tag {
  804. font-size: 20rpx;
  805. color: #33691E;
  806. background: rgba(255,255,255,0.6);
  807. padding: 4rpx 14rpx;
  808. border-radius: 20rpx;
  809. }
  810. .nutrition-arrow {
  811. font-size: 40rpx;
  812. color: #A5D6A7;
  813. margin-left: 12rpx;
  814. }
  815. .nutrition-links {
  816. margin-bottom: 20rpx;
  817. }
  818. .links-label {
  819. font-size: 26rpx;
  820. font-weight: bold;
  821. color: #333;
  822. display: block;
  823. margin-bottom: 12rpx;
  824. }
  825. .links-row {
  826. display: flex;
  827. flex-direction: row;
  828. gap: 16rpx;
  829. }
  830. .link-item {
  831. flex: 1;
  832. display: flex;
  833. flex-direction: row;
  834. align-items: center;
  835. background: #fff;
  836. border-radius: 16rpx;
  837. padding: 20rpx 18rpx;
  838. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  839. gap: 12rpx;
  840. }
  841. .link-item:active {
  842. opacity: 0.7;
  843. }
  844. .link-icon {
  845. font-size: 36rpx;
  846. flex-shrink: 0;
  847. }
  848. .link-texts {
  849. flex: 1;
  850. }
  851. .link-name {
  852. font-size: 24rpx;
  853. font-weight: 500;
  854. color: #333;
  855. display: block;
  856. margin-bottom: 4rpx;
  857. }
  858. .link-desc {
  859. font-size: 20rpx;
  860. color: #999;
  861. display: block;
  862. }
  863. .link-arrow {
  864. font-size: 32rpx;
  865. color: #CCC;
  866. flex-shrink: 0;
  867. }
  868. </style>