|
|
@@ -1,350 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="nav flex">
|
|
|
- <view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
|
|
|
- :class="{'action': index == currentIndex}">
|
|
|
- {{item.title}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ph-top">
|
|
|
- <view class="ph-m"></view>
|
|
|
- <view class="ph flex">
|
|
|
-
|
|
|
- <view class="ph-item flex">
|
|
|
- <view class="item-logo yj-logo">
|
|
|
- <image src="" mode="" class="avt"></image>
|
|
|
- </view>
|
|
|
- <view class="item-name">
|
|
|
- 李淡淡
|
|
|
- </view>
|
|
|
- <view class="item-id">
|
|
|
- ID: 09124
|
|
|
- </view>
|
|
|
- <view class="item-tit">
|
|
|
- 团队数
|
|
|
- </view>
|
|
|
- <view class="item-val">
|
|
|
- 40215
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ph-item flex">
|
|
|
- <view class="item-logo gj-logo">
|
|
|
- <image src="" mode="" class="avt"></image>
|
|
|
- </view>
|
|
|
- <view class="item-name">
|
|
|
- 李淡淡
|
|
|
- </view>
|
|
|
- <view class="item-id">
|
|
|
- ID: 09124
|
|
|
- </view>
|
|
|
- <view class="item-tit">
|
|
|
- 团队数
|
|
|
- </view>
|
|
|
- <view class="item-val">
|
|
|
- 40215
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ph-item flex">
|
|
|
- <view class="item-logo jj-logo">
|
|
|
- <image src="" mode="" class="avt"></image>
|
|
|
- </view>
|
|
|
- <view class="item-name">
|
|
|
- 李淡淡
|
|
|
- </view>
|
|
|
- <view class="item-id">
|
|
|
- ID: 09124
|
|
|
- </view>
|
|
|
- <view class="item-tit">
|
|
|
- 团队数
|
|
|
- </view>
|
|
|
- <view class="item-val">
|
|
|
- 40215
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image src="../../static/icon/yy.png" mode="" class="yy"></image>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y="true" class="grop-list" :style="{'height': max_height}">
|
|
|
- <view class="grop-item flex" v-for="item in 10">
|
|
|
- <view class="item-xh">
|
|
|
- 4
|
|
|
- </view>
|
|
|
- <image src="" mode="" class="item-logo"></image>
|
|
|
- <view class="item-info">
|
|
|
- <view class="info-name">
|
|
|
- 李淡淡
|
|
|
- </view>
|
|
|
- <view class="info-id">
|
|
|
- ID: 09124
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-tg">
|
|
|
- <view class="tg-val">
|
|
|
- 233
|
|
|
- </view>
|
|
|
- <view class="tg-tit">
|
|
|
- 团队数
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- max_height: '',
|
|
|
- navList: [{
|
|
|
- title: '周排行',
|
|
|
- state: 0
|
|
|
- }, {
|
|
|
- title: '月排行',
|
|
|
- state: 1
|
|
|
- }],
|
|
|
- currentIndex: 0,
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
-
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
-
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- var obj = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success: resu => {
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
- query.select('.grop-list').boundingClientRect();
|
|
|
- query.exec(function(res) {
|
|
|
- obj.max_height = resu.windowHeight - res[0].top + 'px';
|
|
|
- });
|
|
|
- },
|
|
|
- fail: res => {}
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- navClick(index) {
|
|
|
- this.currentIndex = index
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .nav {
|
|
|
- width: 750rpx;
|
|
|
- height: 88rpx;
|
|
|
-
|
|
|
- .nav-item {
|
|
|
- line-height: 88rpx;
|
|
|
- width: 50%;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .action {
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 50rpx;
|
|
|
- height: 6rpx;
|
|
|
- background: #FE5B38;
|
|
|
- border-radius: 3rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 6rpx;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .ph-top {
|
|
|
- width: 750rpx;
|
|
|
- height: 555rpx;
|
|
|
- background-color: #fc6795;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .yy {
|
|
|
- width: 261rpx;
|
|
|
- height: 195rpx;
|
|
|
- position: absolute;
|
|
|
- top: 131rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .ph-m {
|
|
|
- width: 233rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- top: 70rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .ph {
|
|
|
- height: 360rpx;
|
|
|
- width: 702rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- align-items: flex-end;
|
|
|
- position: absolute;
|
|
|
- bottom: 65rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
- .ph-item {
|
|
|
- flex-grow: 1;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-end;
|
|
|
- padding-bottom: 30rpx;
|
|
|
-
|
|
|
- .item-logo {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .avt {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #eee;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .gj-logo {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- background-color: #eee;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 51rpx;
|
|
|
- height: 49rpx;
|
|
|
- position: absolute;
|
|
|
- top: -15rpx;
|
|
|
- right: -15rpx;
|
|
|
- background: url($base-url + '/resource/icon/gj.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .yj-logo {
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 37rpx;
|
|
|
- height: 35rpx;
|
|
|
- position: absolute;
|
|
|
- top: -12rpx;
|
|
|
- right: -12rpx;
|
|
|
- background: url($base-url + '/resource/icon/yj.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .jj-logo {
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 37rpx;
|
|
|
- height: 35rpx;
|
|
|
- position: absolute;
|
|
|
- top: -12rpx;
|
|
|
- right: -12rpx;
|
|
|
- background: url($base-url + '/resource/icon/jj.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-name {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #3F454B;
|
|
|
- margin: 15rpx 0 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-id {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #606972;
|
|
|
- }
|
|
|
-
|
|
|
- .item-tit {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- margin: 25rpx 0 15rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-val {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FA2740;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .grop-item {
|
|
|
- margin: auto;
|
|
|
- width: 702rpx;
|
|
|
- height:150rpx;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
- .item-logo {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #eee;
|
|
|
- margin: 0 20rpx;
|
|
|
- }
|
|
|
- .item-info {
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
- .item-info {
|
|
|
- .info-name {
|
|
|
- margin-bottom: 10rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #3F454B;
|
|
|
- }
|
|
|
- .info-id {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #606972;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-tg {
|
|
|
- flex-shrink: 0;
|
|
|
- .tg-tit {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .tg-val {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FA2740;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-</style>
|
