newyqg/pages/user/myfans.vue

<template>
	<view class="content">
		<view class="top-fan"></view>
		<view class="fans-base flex">
			<view class="base-item">
				<view class="base-item-val">
					0
				</view>
				<view class="base-item-name">
					我的粉丝
				</view>
			</view>
			<view class="jg"></view>
			<view class="base-item">
				<view class="base-item-val">
					0
				</view>
				<view class="base-item-name">
					活跃粉丝
				</view>
			</view>
			<view class="jg"></view>
			<view class="base-item">
				<view class="base-item-val">
					0
				</view>
				<view class="base-item-name">
					总成交额
				</view>
			</view>
		</view>
		<view class="fans-tit">
			我的粉丝列表
		</view>
		<view class="fans-list-tit flex">
			<view class="list-item">
				ID
			</view>
			<view class="list-item">
				粉丝
			</view>
			<view class="list-item">
				当日业绩
			</view>
			<view class="list-item">
				粉丝数
			</view>
		</view>
		<scroll-view scroll-y="true" class="swiper-box" :style="{'height':height}">
			<view class="fans-list-val flex" v-for="(item,index) in list" :style="{'background':index%2 ==0 ? '#F9F9F9':'#fff'}">
				<view class="list-item">
					李丹丹
				</view>
				<view class="list-item">
					粉丝
				</view>
				<view class="list-item">
					200
				</view>
				<view class="list-item">
					300
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				list: [1,2,3,4,5,6,7,8,9,10]
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			
		}
		
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f5f4;
		height: 100%;
	}
	.content {
		background-color: #f3f5f4;
	}
	.top-fan {
		width: 750rpx;
		height: 336rpx;
		background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
		border-radius: 0 0 40rpx 40rpx;
	}
	.fans-base {
		width: 702rpx;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: -147rpx auto 0;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		.jg {
			width: 2rpx;
			height: 96rpx;
			background: #DCDCDC;
		}
		.base-item {
			flex-grow: 1;
			.base-item-val {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0C1732;
			}
		}
	}
	.fans-tit {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0C1732;
		padding: 45rpx 0 29rpx 40rpx;
	}
	.fans-list-tit {
		width: 710rpx;
		height: 100rpx;
		background: #E2EEFF;
		border-radius: 20rpx 20rpx 0px 0px;
		margin: auto;
		text-align: center;;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #375AFE;
		.list-item {
			width: 25%;
			flex-shrink: 0;
		}
	}
	.fans-list-val {
		width: 710rpx;
		height: 100rpx;
		margin: auto;
		text-align: center;;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0C1732;
		.list-item {
			// flex-grow: 1;
			width: 25%;
			flex-shrink: 0;
		}
	}
</style>