duck/pages/user/extension.vue

<template>
	<view class="extension-wrapper">
		<view class="top-wrapper">{{allNum||0.00}}<text> 人</text></view>
		<view class="middle">
			<view class="middle-left" @click="changeAction">
				<view class="middle-num">9</view>
				<view class="middle-title" :class="{'action': isAction}">一级推广</view>
			</view>
			<view class="middle-center">
				
			</view>
			<view class="middle-right" @click="changeAction">
				<view class="middle-num">55</view>
				<view class="middle-title" :class="{'action': !isAction}">二级推广</view>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadData" class="list-scroll-content">
			<view class="list">
				<view class="list-item">
					<view class="item-left"><image src="../../static/error/missing-face.png" mode=""></image></view>
					<view class="item-right">
						<view class="item-name">假猪套天下第一</view>
						<view class="item-time">2020-12-3 12:30:00</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getExtensionData} from '@/api/user.js'
	export default {
		data() {
			return {
				allNum: 0,//总推广人数
				isAction: true
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				console.log('hello world')
			},
			changeAction() {
				this.isAction = !this.isAction
			},
			loadData() {
				console.log('ddddd')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: 100%;
	}
	.extension-wrapper {
		// position: relative;
		background-color: #f8f8f8;
		height: 100%;
		.top-wrapper {
			width: 750rpx;
			height: 265rpx;
			background-image: url(../../static/img/wallertbg.png);
			background-size: 100%;
			background-position: bottom;
			// font-size: ;
			color: #FFFFFF;
			font-size: 72rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 265rpx;
			text-align: center;
			text {
				font-size: 40rpx;
			}
		}
		.middle {
			width: 702rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			position: relative;
			left: 24rpx;
			top: -60rpx;
			margin-bottom: -40rpx;
			.middle-center {
				width: 2px;
				height: 54rpx;
				background: #EEEEEE;
				position: absolute;
				right: 0;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			.middle-left, .middle-right {
				padding-top: 24rpx;
				width: 50%;
				height: 120rpx;
				text-align: center;
				line-height: 1;
				// display: flex;
				.middle-num {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #901B21;
					padding-bottom: 17rpx;
				}
				.middle-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: inline-block;
					padding-bottom: 15rpx;
				}
				.action {
					border-bottom: 5rpx #901B21 solid;
					
				}
			}
		}
		.list-scroll-content {
			height: 100%;
			background-color: #fff;
			.list {
				width: 100%;
				// height: 20rpx;
				background-color: #fff;
				.list-item {
					padding: 30rpx 0 19rpx 23rpx;
					height: 129rpx;
					display: flex;
					.item-left {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: #bfa;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.item-right {
						padding-left: 20rpx;
						padding-top: 9rpx;
						.item-name {
							font-size: 30rpx;
							line-height: 1;
							font-family: PingFangSC;
							font-weight: 500;
							color: #3F454B;
							padding-bottom: 10rpx;
						}
						.item-time {
							font-size: 22rpx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		
	}
</style>