teamph.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <view class="content">
  3. <view class="nav flex">
  4. <view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
  5. :class="{'action': index == currentIndex}">
  6. {{item.title}}
  7. </view>
  8. </view>
  9. <view class="ph-top">
  10. <view class="ph-m"></view>
  11. <view class="ph flex">
  12. <view class="ph-item flex">
  13. <view class="item-logo yj-logo">
  14. <image src="" mode="" class="avt"></image>
  15. </view>
  16. <view class="item-name">
  17. 李淡淡
  18. </view>
  19. <view class="item-id">
  20. ID: 09124
  21. </view>
  22. <view class="item-tit">
  23. 团队数
  24. </view>
  25. <view class="item-val">
  26. 40215
  27. </view>
  28. </view>
  29. <view class="ph-item flex">
  30. <view class="item-logo gj-logo">
  31. <image src="" mode="" class="avt"></image>
  32. </view>
  33. <view class="item-name">
  34. 李淡淡
  35. </view>
  36. <view class="item-id">
  37. ID: 09124
  38. </view>
  39. <view class="item-tit">
  40. 团队数
  41. </view>
  42. <view class="item-val">
  43. 40215
  44. </view>
  45. </view>
  46. <view class="ph-item flex">
  47. <view class="item-logo jj-logo">
  48. <image src="" mode="" class="avt"></image>
  49. </view>
  50. <view class="item-name">
  51. 李淡淡
  52. </view>
  53. <view class="item-id">
  54. ID: 09124
  55. </view>
  56. <view class="item-tit">
  57. 团队数
  58. </view>
  59. <view class="item-val">
  60. 40215
  61. </view>
  62. </view>
  63. </view>
  64. <image src="../../static/icon/yy.png" mode="" class="yy"></image>
  65. </view>
  66. <scroll-view scroll-y="true" class="grop-list" :style="{'height': max_height}">
  67. <view class="grop-item flex" v-for="item in 10">
  68. <view class="item-xh">
  69. 4
  70. </view>
  71. <image src="" mode="" class="item-logo"></image>
  72. <view class="item-info">
  73. <view class="info-name">
  74. 李淡淡
  75. </view>
  76. <view class="info-id">
  77. ID: 09124
  78. </view>
  79. </view>
  80. <view class="item-tg">
  81. <view class="tg-val">
  82. 233
  83. </view>
  84. <view class="tg-tit">
  85. 团队数
  86. </view>
  87. </view>
  88. </view>
  89. </scroll-view>
  90. </view>
  91. </template>
  92. <script>
  93. export default {
  94. data() {
  95. return {
  96. max_height: '',
  97. navList: [{
  98. title: '周排行',
  99. state: 0
  100. }, {
  101. title: '月排行',
  102. state: 1
  103. }],
  104. currentIndex: 0,
  105. }
  106. },
  107. onLoad() {
  108. },
  109. onShow() {
  110. },
  111. onReachBottom() {
  112. },
  113. onReady() {
  114. var obj = this;
  115. uni.getSystemInfo({
  116. success: resu => {
  117. const query = uni.createSelectorQuery();
  118. query.select('.grop-list').boundingClientRect();
  119. query.exec(function(res) {
  120. obj.max_height = resu.windowHeight - res[0].top + 'px';
  121. });
  122. },
  123. fail: res => {}
  124. });
  125. },
  126. methods: {
  127. navClick(index) {
  128. this.currentIndex = index
  129. }
  130. }
  131. }
  132. </script>
  133. <style lang="scss" scoped>
  134. .nav {
  135. width: 750rpx;
  136. height: 88rpx;
  137. .nav-item {
  138. line-height: 88rpx;
  139. width: 50%;
  140. text-align: center;
  141. font-size: 30rpx;
  142. font-weight: 500;
  143. color: #333333;
  144. height: 100%;
  145. }
  146. .action {
  147. font-weight: bold;
  148. position: relative;
  149. &::after {
  150. content: '';
  151. width: 50rpx;
  152. height: 6rpx;
  153. background: #FE5B38;
  154. border-radius: 3rpx;
  155. position: absolute;
  156. left: 0;
  157. right: 0;
  158. bottom: 6rpx;
  159. margin: auto;
  160. }
  161. }
  162. background-color: #fff;
  163. }
  164. .ph-top {
  165. width: 750rpx;
  166. height: 555rpx;
  167. background-color: #fc6795;
  168. position: relative;
  169. .yy {
  170. width: 261rpx;
  171. height: 195rpx;
  172. position: absolute;
  173. top: 131rpx;
  174. left: 0;
  175. right: 0;
  176. margin: auto;
  177. }
  178. .ph-m {
  179. width: 233rpx;
  180. height: 100rpx;
  181. border-radius: 20rpx 20rpx 0 0;
  182. background-color: #fff;
  183. position: absolute;
  184. top: 70rpx;
  185. left: 0;
  186. right: 0;
  187. margin: auto;
  188. }
  189. .ph {
  190. height: 360rpx;
  191. width: 702rpx;
  192. background-color: #fff;
  193. border-radius: 20rpx;
  194. align-items: flex-end;
  195. position: absolute;
  196. bottom: 65rpx;
  197. left: 0;
  198. right: 0;
  199. margin: auto;
  200. .ph-item {
  201. flex-grow: 1;
  202. flex-direction: column;
  203. justify-content: flex-end;
  204. padding-bottom: 30rpx;
  205. .item-logo {
  206. width: 90rpx;
  207. height: 90rpx;
  208. position: relative;
  209. .avt {
  210. width: 100%;
  211. height: 100%;
  212. border-radius: 50%;
  213. background-color: #eee;
  214. }
  215. }
  216. .gj-logo {
  217. width: 120rpx;
  218. height: 120rpx;
  219. background-color: #eee;
  220. border-radius: 50%;
  221. &::after {
  222. content: '';
  223. width: 51rpx;
  224. height: 49rpx;
  225. position: absolute;
  226. top: -15rpx;
  227. right: -15rpx;
  228. background: url($base-url + '/resource/icon/gj.png') no-repeat;
  229. background-size: 100% 100%;
  230. }
  231. }
  232. .yj-logo {
  233. &::after {
  234. content: '';
  235. width: 37rpx;
  236. height: 35rpx;
  237. position: absolute;
  238. top: -12rpx;
  239. right: -12rpx;
  240. background: url($base-url + '/resource/icon/yj.png') no-repeat;
  241. background-size: 100% 100%;
  242. }
  243. }
  244. .jj-logo {
  245. &::after {
  246. content: '';
  247. width: 37rpx;
  248. height: 35rpx;
  249. position: absolute;
  250. top: -12rpx;
  251. right: -12rpx;
  252. background: url($base-url + '/resource/icon/jj.png') no-repeat;
  253. background-size: 100% 100%;
  254. }
  255. }
  256. .item-name {
  257. font-size: 28rpx;
  258. font-weight: bold;
  259. color: #3F454B;
  260. margin: 15rpx 0 10rpx;
  261. }
  262. .item-id {
  263. font-size: 24rpx;
  264. font-weight: 400;
  265. color: #606972;
  266. }
  267. .item-tit {
  268. font-size: 24rpx;
  269. font-weight: 500;
  270. color: #999999;
  271. margin: 25rpx 0 15rpx;
  272. }
  273. .item-val {
  274. font-size: 30rpx;
  275. font-weight: 500;
  276. color: #FA2740;
  277. }
  278. }
  279. }
  280. }
  281. .grop-item {
  282. margin: auto;
  283. width: 702rpx;
  284. height:150rpx;
  285. border-bottom: 1px solid #F0F0F0;
  286. .item-logo {
  287. width: 90rpx;
  288. height: 90rpx;
  289. border-radius: 50%;
  290. background-color: #eee;
  291. margin: 0 20rpx;
  292. }
  293. .item-info {
  294. flex-grow: 1;
  295. }
  296. .item-info {
  297. .info-name {
  298. margin-bottom: 10rpx;
  299. font-size: 28rpx;
  300. font-weight: bold;
  301. color: #3F454B;
  302. }
  303. .info-id {
  304. font-size: 24rpx;
  305. font-weight: 400;
  306. color: #606972;
  307. }
  308. }
  309. .item-tg {
  310. flex-shrink: 0;
  311. .tg-tit {
  312. font-size: 24rpx;
  313. font-weight: 500;
  314. color: #999999;
  315. }
  316. .tg-val {
  317. font-size: 28rpx;
  318. font-weight: 500;
  319. color: #FA2740;
  320. margin-bottom: 10rpx;
  321. }
  322. }
  323. }
  324. </style>