user-info.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="user-info">
  3. <view class="info-item">
  4. <text class="tit">头像</text>
  5. <view class="avater">
  6. <image src="../../../static/logo.png" mode="aspectFill"></image>
  7. </view>
  8. </view>
  9. <view class="info-item">
  10. <text class="tit">用户名</text>
  11. <text class="val">小王</text>
  12. </view>
  13. <view class="info-item">
  14. <text class="tit">用户给身份</text>
  15. <text class="val">管理员</text>
  16. </view>
  17. <view class="info-item">
  18. <text class="tit">用户电话</text>
  19. <text class="val">18869487515</text>
  20. </view>
  21. <view class="info-item">
  22. <text class="tit">E-mail</text>
  23. <text class="val">1457846@qq.com</text>
  24. </view>
  25. <view class="info-item">
  26. <text class="tit">我的地址</text>
  27. <text class="val">河南省郑州市</text>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. }
  36. },
  37. methods: {
  38. }
  39. }
  40. </script>
  41. <style lang="scss">
  42. page{
  43. background:$uni-bg-color-grey;
  44. .user-info{
  45. background:#fff;
  46. padding:0 40rpx;
  47. .info-item{
  48. display:flex;
  49. justify-content: space-between;
  50. line-height:100rpx;
  51. .avater{
  52. width:100rpx;
  53. height:100rpx;
  54. border-radius: 50%;
  55. overflow: hidden;
  56. image{
  57. width:100%;
  58. height:100%;
  59. }
  60. }
  61. .tit{font-size:14px}
  62. .val{
  63. font-size:12px;
  64. color:#666;
  65. }
  66. }
  67. }
  68. }
  69. </style>