user.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <view class="container">
  3. <view class="user-info-box">
  4. <view class="detail flex" @click="navTo('/pages/set/userinfo')">
  5. <view class="portrait-box"><image class="portrait" src=" /static/error/missing-face.png"></image></view>
  6. <view class="info-box">
  7. <view class="username">游客</view>
  8. <view class="font-size-sm">13800000000</view>
  9. </view>
  10. </view>
  11. <view class="config iconfont"><text class="setting iconsetting" @click="navTo('/pages/set/set')"></text></view>
  12. </view>
  13. <view class="vip-box"><image src="../../static/img/vip.png" mode=""></image></view>
  14. <view class="tt">
  15. <view class="tt-box" @click="nav('/pages/assets/myPing')">
  16. <image src="../../static/img/tuiguang.png" class="tt-icon1" mode=""></image>
  17. <view class="tt-txt">我的推广</view>
  18. <image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {};
  27. },
  28. methods: {}
  29. };
  30. </script>
  31. <style lang="scss">
  32. page,
  33. .container {
  34. background: #000;
  35. height: 100%;
  36. }
  37. .user-info-box {
  38. padding: 40rpx 46rpx 0;
  39. height: 180rpx;
  40. color: white;
  41. display: flex;
  42. align-items: center;
  43. justify-content: space-between;
  44. position: relative;
  45. z-index: 1;
  46. .detail {
  47. height: 130rpx;
  48. .portrait-box {
  49. height: 100%;
  50. .portrait {
  51. width: 130rpx;
  52. height: 100%;
  53. border: 5rpx solid #fff;
  54. border-radius: 50%;
  55. }
  56. }
  57. .info-box {
  58. margin-left: 20rpx;
  59. line-height: 1.5;
  60. .username {
  61. font-size: $font-lg + 6rpx;
  62. height: 100%;
  63. }
  64. }
  65. }
  66. .config {
  67. font-size: 48rpx;
  68. }
  69. }
  70. .vip-box {
  71. width: 690rpx;
  72. height: 200rpx;
  73. margin: 60rpx auto 0;
  74. image {
  75. width: 100%;
  76. height: 100%;
  77. }
  78. }
  79. .tt {
  80. margin: 0 auto;
  81. width: 750rpx;
  82. padding: 40rpx 70rpx;
  83. background-color: #000;
  84. .tt-box {
  85. height: 100rpx;
  86. display: flex;
  87. align-items: center;
  88. border-bottom: 1px solid #f0f0f0;
  89. .tt-icon1 {
  90. width: 42rpx;
  91. height: 42rpx;
  92. }
  93. .tt-icon2 {
  94. width: 49rpx;
  95. height: 38rpx;
  96. }
  97. .tt-icon3 {
  98. width: 46rpx;
  99. height: 40rpx;
  100. }
  101. .tt-icon4 {
  102. width: 40rpx;
  103. height: 42rpx;
  104. }
  105. .tt-icon5 {
  106. width: 44rpx;
  107. height: 40rpx;
  108. }
  109. .tt-txt {
  110. margin-left: 36rpx;
  111. font-size: 32rpx;
  112. font-family: PingFang SC;
  113. font-weight: 500;
  114. color: #333333;
  115. flex: 1;
  116. }
  117. .next-icon {
  118. width: 16rpx;
  119. height: 25rpx;
  120. }
  121. }
  122. .border-b {
  123. border-bottom: 1px solid #f1f1f1;
  124. }
  125. }
  126. </style>