普兆健康管家前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

170 lines
3.5 KiB

  1. <template>
  2. <view class="view">
  3. <view class="flex top">
  4. <view class="left">
  5. <view class="title">
  6. <!-- todo -->
  7. <text class="highlight">战斗世界</text>
  8. <text>的健康测评</text>
  9. </view>
  10. <view class="grade">
  11. <view class="grade-text">{{ data.gradeDesc }}</view>
  12. <view class="grade-border"></view>
  13. </view>
  14. <view class="desc">
  15. * 报告结果基于FFQ营养测评和4大维度专业健康评估
  16. </view>
  17. </view>
  18. <view class="right">
  19. <progressCircle ref="progressCircle" :progress="data.score"></progressCircle>
  20. </view>
  21. </view>
  22. <view class="flex">
  23. <radarChart :score="data.scoreDetail"></radarChart>
  24. </view>
  25. <view class="section">
  26. <div class="title">
  27. <div class="title-zh">本次改善目标</div>
  28. <div class="title-en">This improvement goal</div>
  29. </div>
  30. <div class="content">
  31. <div class="tag" v-for="(item, tIdx) in data.tags" :key="tIdx">{{ item }}</div>
  32. </div>
  33. </view>
  34. <view class="flex section">
  35. <div class="title">
  36. <div class="title-zh">首要目标</div>
  37. <div class="title-en">Top priority</div>
  38. </div>
  39. <div class="content">
  40. <div class="tag highlight">{{ data.topPriority }}</div>
  41. </div>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import progressCircle from './progressCircle.vue'
  47. import radarChart from './radarChart.vue';
  48. export default {
  49. components: {
  50. progressCircle,
  51. radarChart,
  52. },
  53. props: {
  54. data: {
  55. type: Object,
  56. default() {
  57. return {}
  58. }
  59. }
  60. },
  61. }
  62. </script>
  63. <style scoped lang="scss">
  64. .view {
  65. padding: 56rpx 24rpx 0 24rpx;
  66. }
  67. .top {
  68. align-items: flex-start;
  69. .left {
  70. padding-right: 16rpx;
  71. .title {
  72. font-family: PingFang SC;
  73. font-weight: 400;
  74. font-size: 36rpx;
  75. line-height: 1.2;
  76. color: #252545CC;
  77. .highlight {
  78. margin-right: 8rpx;
  79. font-weight: 600;
  80. color: #252545;
  81. }
  82. }
  83. .grade {
  84. margin-top: 30rpx;
  85. display: inline-block;
  86. padding-left: 7rpx;
  87. &-text {
  88. font-size: 64rpx;
  89. font-weight: 600;
  90. line-height: 1;
  91. font-family: PingFang SC;
  92. color: transparent;
  93. background-image: linear-gradient(to right, #4B348F, #845CFA);
  94. background-clip: text;
  95. display: inline-block;
  96. }
  97. &-border {
  98. width: 100%;
  99. height: 12rpx;
  100. background-image: linear-gradient(to right, #7451DE, #B1A4FF);
  101. box-shadow: 4rpx 4rpx 12rpx 0 #4000FF40;
  102. }
  103. }
  104. .desc {
  105. margin-top: 16rpx;
  106. font-family: PingFang SC;
  107. font-weight: 400;
  108. font-size: 24rpx;
  109. line-height: 1.5;
  110. color: #989898;
  111. }
  112. }
  113. }
  114. .section {
  115. margin-bottom: 64rpx;
  116. .title {
  117. font-family: PingFang SC;
  118. line-height: 1.4;
  119. &-zh {
  120. font-weight: 600;
  121. font-size: 40rpx;
  122. }
  123. &-en {
  124. font-weight: 400;
  125. font-size: 26rpx;
  126. }
  127. }
  128. .content {
  129. flex: 1;
  130. display: flex;
  131. flex-wrap: wrap;
  132. gap: 16rpx;
  133. margin-top: 24rpx;
  134. }
  135. .tag {
  136. padding: 8rpx 40rpx;
  137. font-family: PingFang SC;
  138. font-weight: 400;
  139. font-size: 28rpx;
  140. line-height: 1.5;
  141. color: #252545;
  142. background: #E5E4EB;
  143. border-radius: 30rpx;
  144. &.highlight {
  145. margin-left: 40rpx;
  146. font-weight: 600;
  147. color: #FFFFFF;
  148. background: #252545;
  149. }
  150. }
  151. }
  152. </style>