Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
hujierong
/
novelAD
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Fa: 2bed1a11ad
Branch-ok Tag-ek
novelAD
/
pages
/
my
/
index.vue

index.vue 7.2 KB
Előzmények Nyers

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 
  1. <template>
    2. 

  2.     <view class="container">
    3. 

  3.         <view class="navBarBox">
    4. 

  4.             <!-- 状态栏占位 -->
    5. 

  5.             <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
    6. 

  6.             <!-- 真正的导航栏内容 -->
    7. 

  7.             <view class="navBar">
    8. 

  8.                 个人中心
    9. 

  9.             </view>
    10. 

  10.         </view>
    11. 

  11. 

  12.         <view class="pdx-30 mgt-30 flex fd_c">
    13. 

  13.             <view class="flex ai_center">
    14. 

  14.                 <image class="w-120 h-120 radio-circle" src="/static/logo.png" mode="scaleToFill" />
    15. 

  15.                 <view class="mgl-30 text-400 text-36">我是用户名字啊</view>
    16. 

  16.             </view>
    17. 

  17.             <view class="flex ai_center fd_c mgt-100">
    18. 

  18.                 <view class="w flex ai_center jc_between mgb-40">
    19. 

  19.                     <view class="flex ai_center">
    20. 

  20.                         <svg t="1752219774861" class="w-50 h-50" fill="#fd8280" viewBox="0 0 1024 1024" version="1.1"
    21. 

  21.                             xmlns="http://www.w3.org/2000/svg" p-id="14904" width="128" height="128">
    22. 

  22.                             <path
    23. 

  23.                                 d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
    24. 

  24.                                 fill="" p-id="14905"></path>
    25. 

  25.                         </svg>
    26. 

  26.                         <view class="mgl-10 text-32">设置</view>
    27. 

  27.                     </view>
    28. 

  28.                     <svg t="1752219361738" class="w-40 h-40" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
    29. 

  29.                         xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
    30. 

  30.                         <path
    31. 

  31.                             d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
    32. 

  32.                             p-id="12888"></path>
    33. 

  33.                     </svg>
    34. 

  34.                 </view>
    35. 

  35.                 <view class="w flex ai_center jc_between">
    36. 

  36.                     <view class="flex ai_center">
    37. 

  37.                         <svg t="1752219672812" class="w-50 h-50" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
    38. 

  38.                             xmlns="http://www.w3.org/2000/svg" p-id="13913" width="128" height="128">
    39. 

  39.                             <path
    40. 

  40.                                 d="M525.114692 102.747105c-229.821269-10.861372-423.249677 177.584558-422.435125 411.555333 1.042749 299.32218 315.278593 496.418117 585.234955 366.94123 12.599969-6.043646 25.337061-12.55392 36.337603-21.018709 19.457144-14.97097 23.509437-35.908838 11.616572-53.267181-12.465916-18.196431-29.881564-21.423939-49.390897-13.489222-10.04989 4.088108-19.052938 10.685363-28.967752 15.182794-126.787638 57.521065-248.039189 46.335305-355.218234-41.801035-108.74368-89.421612-144.92574-208.296023-109.187795-344.739579 43.652196-166.649508 217.050408-270.850731 384.180869-234.679927 176.101787 38.110993 290.045909 200.222137 259.848143 374.825804-7.028067 40.643676-25.908066 79.379908-40.653909 118.495788-10.066263 26.705222-6.712889 45.458331 13.204743 56.787354 19.540032 11.113105 38.753629 4.527107 55.148018-19.23611 3.52222-5.107321 6.251378-10.778484 9.18622-16.275685 24.530696-45.954635 39.492456-95.109148 44.947701-146.652058C944.04704 318.377164 766.000971 114.13241 525.114692 102.747105z"
    41. 

  41.                                 p-id="13914"></path>
    42. 

  42.                             <path
    43. 

  43.                                 d="M564.213175 499.078713c9.115612-42.580794-12.606109-62.342884-55.298444-52.902884-9.091052 2.009773-18.232247 4.457522-26.803459 8.018627-28.460192 11.822257-37.786605 32.769334-20.583804 59.119469 12.263301 18.784832 9.471722 34.17638 4.28663 52.447513-10.187013 35.894512-20.615527 71.786976-28.817326 108.159372-7.235798 32.092929 10.072403 52.812833 42.718941 52.507888 4.3951-0.730641 10.57587-1.528819 16.657378-2.805906 51.978838-10.915607 60.285015-28.485775 38.650275-76.800153-3.864004-8.629541-3.364631-20.741393-1.065262-30.332842C543.375591 577.188698 555.760666 538.560936 564.213175 499.078713z"
    44. 

  44.                                 p-id="13915"></path>
    45. 

  45.                             <path
    46. 

  46.                                 d="M589.758991 342.949816c0.511653-24.560372-23.067368-47.913243-47.544853-47.087435-25.408693 0.858554-45.788859 24.127514-43.774993 49.985438 1.906419 24.486694 22.179139 42.670845 46.632063 41.827641C568.862056 386.854768 589.268828 366.4306 589.758991 342.949816z"
    47. 

  47.                                 p-id="13916"></path>
    48. 

  48.                         </svg>
    49. 

  49.                         <view class="mgl-10 text-32">关于我们</view>
    50. 

  50.                     </view>
    51. 

  51.                     <svg t="1752219361738" class="w-40 h-40" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
    52. 

  52.                         xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
    53. 

  53.                         <path
    54. 

  54.                             d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
    55. 

  55.                             p-id="12888"></path>
    56. 

  56.                     </svg>
    57. 

  57.                 </view>
    58. 

  58.             </view>
    59. 

  59.         </view>
    60. 

  60.     </view>
    61. 

  61. 

  62.     <!-- 引入自定义 TabBar -->
    63. 

  63.     <custom-tabbar :currentIndex='2' />
    64. 

  64. </template>
    65. 

  65. 

  66. <script setup>
    67. 

  67. import { ref, onBeforeMount } from "vue";
    68. 

  68. import CustomTabbar from "@/components/custom-tabbar.vue";
    69. 

  69. 

  70. // 状态栏高度
    71. 

  71. let statusBarHeight = ref(0);
    72. 

  72. // 导航栏高度
    73. 

  73. let navBarHeight = ref(0);
    74. 

  74. onBeforeMount(() => {
    75. 

  75.     statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
    76. 

  76.     const custom = uni.getMenuButtonBoundingClientRect();
    77. 

  77.     // 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
    78. 

  78.     //                                   即胶囊的上下边距
    79. 

  79.     navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
    80. 

  80. });
    81. 

  81. 

  82. 

  83. 

  84. </script>
    85. 

  85. 

  86. <style lang="scss" scoped>
    87. 

  87. .container {
    88. 

  88.     .navBarBox {
    89. 

  89.         .navBar {
    90. 

  90.             width: 100%;
    91. 

  91.             height: 80rpx !important;
    92. 

  92.             line-height: 80rpx;
    93. 

  93.             padding-left: 30rpx;
    94. 

  94.             font-size: 32rpx;
    95. 

  95.             color: #333;
    96. 

  96.         }
    97. 

  97.     }
    98. 

  98. }
    99. 

  99. </style>
    100.