newmyj/pages/user/teamph.vue

<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>