index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="">
  3. <view class="header p-3">
  4. <view class="fs-18 text-white">
  5. 个人档案
  6. </view>
  7. <view class="centerY mt-2">
  8. <view class="w-20 userhead">
  9. <view class="picbox">
  10. <image src="../../static/家族史.png" mode="widthFix" class="picimg"></image>
  11. </view>
  12. </view>
  13. <view class="w-80 ml-2">
  14. <view class="text-white fs-16 font-bold">
  15. {{'王老爷'}}
  16. </view>
  17. <view class="centerY" style="margin-top:10rpx;">
  18. <view class="iconfont nv text-white fs-16 font-bold"></view>
  19. <view @click="$mf.clickNavto('/pages/userinfo/userinfo')" class="text-gry80 fs-12 bg-white ml-auto"
  20. style="padding:8rpx 26rpx;border-radius: 50rpx;">
  21. 基础资料
  22. </view>
  23. <view class="iconfont youla2 fs-24 text-white font-bold">
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="content p-3 bg-white mx-3 my-2 box-border08">
  30. <view class="centerY mt-1">
  31. <view class="bule_line d-inline-block">
  32. </view>
  33. <view class="ml-2 font-bold">
  34. 健康数据
  35. </view>
  36. <view class="ml-auto fs-10 text-gry">
  37. 更多
  38. </view>
  39. <view class="iconfont Chevron-Right text-gry">
  40. </view>
  41. </view>
  42. <view class="centerY mt-3">
  43. <view class="w-50 pr-2">
  44. <image src="../../static/index/grtz.png" mode="widthFix" class="w-100"></image>
  45. </view>
  46. <view class="w-50 pl-1">
  47. <image src="../../static/index/jkbg.png" mode="widthFix" class="w-100"></image>
  48. <image src="../../static/index/dqyy.png" mode="widthFix" class="w-100 mt-2"></image>
  49. </view>
  50. </view>
  51. <view class="mt-2">
  52. <image src="../../static/index/ydjc.png" mode="widthFix" class="w-100"></image>
  53. </view>
  54. <view class="mt-2">
  55. <image src="../../static/index/jjjc.png" mode="widthFix" class="w-100"></image>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. export default {
  62. data() {
  63. return {
  64. title: 'Hello'
  65. }
  66. },
  67. onLoad() {
  68. console.log(this.$mf.clickNavto)
  69. },
  70. methods: {
  71. }
  72. }
  73. </script>
  74. <style lang="scss">
  75. page {
  76. background: #F5F9FF;
  77. }
  78. .header {
  79. background: linear-gradient(180deg, #096DCB 0%, #6faae1 100%)
  80. }
  81. .userhead {
  82. border-radius: 50%;
  83. background: rgb(255, 255, 255);
  84. box-shadow: 1px 1px 10px 1px #096DCB;
  85. }
  86. .text-gry80 {
  87. color: #808080;
  88. }
  89. .box-border08 {
  90. border-radius: 16rpx;
  91. }
  92. </style>