index.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <view>
  3. <view class="wrapper">
  4. <text class="text">个人信息</text>
  5. <up-icon name="arrow-right" class="icon"></up-icon>
  6. <up-divider></up-divider>
  7. </view>
  8. <view class="wrapper">
  9. <text class="text">绑定</text>
  10. <up-icon name="arrow-right" class="icon"></up-icon>
  11. <up-divider></up-divider>
  12. </view>
  13. <view class="wrapper" @click="handlServiceAddress">
  14. <text class="text">被服务地址</text>
  15. <up-icon name="arrow-right" class="icon"></up-icon>
  16. <up-divider></up-divider>
  17. </view>
  18. </view>
  19. </template>
  20. <script setup>
  21. import {
  22. ref
  23. } from 'vue'
  24. const handlServiceAddress = () => {
  25. uni.navigateTo({
  26. url: '/pages_mine/pages/setupUser/Address'
  27. })
  28. }
  29. </script>
  30. <style scoped>
  31. .wrapper {
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. padding: 24rpx 32rpx;
  36. }
  37. .text {
  38. flex: 1;
  39. /* 文字占据剩余空间 */
  40. font-size: 28rpx;
  41. color: #333;
  42. }
  43. .icon {
  44. margin-left: 16rpx;
  45. /* 图标与文字的间距 */
  46. color: #999;
  47. /* 图标颜色 */
  48. font-size: 28rpx;
  49. /* 与文字大小匹配 */
  50. }
  51. /* 分隔线样式调整 */
  52. .up-divider {
  53. margin: 0 32rpx;
  54. /* 与内容对齐 */
  55. }
  56. </style>