|
|
@@ -0,0 +1,350 @@
|
|
|
+<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>
|
