star-uni/pages/user/user.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<view class="user-header">
				<view class="header-bg">
					<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/hero-grid.png" mode="widthFix"></image>
				</view>
				<cu-custom :bgColor="scrollHeight>20?'bg-bluev-head':'none'">
					<block slot="content">我的</block>
				</cu-custom>
				<view class="user-detail-body">
					<view class="avatar"><image src="/static/rank/avatar.jpeg" mode="widthFix"></image></view>
					<view class="detail-info">
						<view class="name">我是庄小周</view>
						<view class="desc">ID：234234234 <text class="cuIcon-copy"></text></view>
					</view>
					<view class="detail-status">
						<!-- <view class="status-btn full"><text class="cuIcon-edit"></text>已签约</view> -->
						<view class="status-btn"><text class="cuIcon-edit"></text>未签约</view>
					</view>
				</view>
			</view>
			<view class="user-body">
				<view class="user-total">
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">完成任务</view>
					</view>
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">收益(元)</view>
					</view>
					<view class="total-item">
						<view class="num">102</view>
						<view class="name">粉丝</view>
					</view>
					<view class="total-item">
						<view class="num">10<text>%</text></view>
						<view class="name">平均转化率</view>
					</view>
				</view>
				<view class="user-level">
					<view class="user-level-body">
						<view class="level-top">
							<view class="level-name">LV.3黄金达人</view>
							<view class="level-more">查看等级 <text class="cuIcon-right"></text></view>
						</view>
						<view class="level-mid">距离下一等级还差119</view>
						<view class="level-foot">
							<view class="level-step">
								<view class="success" style="width: 50%;"></view>
							</view>
							<view class="level-num"><text>181</text>/300</view>
						</view>
					</view>
				</view>
				<view class="user-menu-service">
					<view class=""></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
var app;
export default {
	data() { 
		return {
			scrollHeight:0,
		}
	},
	onLoad() {
		app = this;
	},
	methods: {
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		}
	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}
.user-body .user-level-body .level-foot{display: flex;align-items: center;justify-content: space-between;gap: 20rpx;}
.user-body .user-level-body .level-foot .level-step{background-color: #E4E4E4;height: 10rpx;flex: 1;border-radius: 10rpx;}
.user-body .user-level-body .level-foot .level-step .success{background-color: #87E0FF;height: 10rpx;border-radius: 10rpx;}
.user-body .user-level-body .level-foot .level-num{color: #999;font-size: 22rpx;}
.user-body .user-level-body .level-foot .level-num text{color: #666;}
.user-body .user-level-body .level-mid{margin: 10rpx 0;font-size: 22rpx;color: #8C8C8C;}
.user-body .user-level-body .level-top{display: flex;align-items: center;justify-content: space-between;}
.user-body .user-level-body .level-top .level-name{color: #000;font-weight: 800;font-family: "bluevBold";font-size: 30rpx;}
.user-body .user-level-body .level-top .level-more{color: #666;font-size: 22rpx;}

.user-header{position: relative;background: linear-gradient(180deg, #87e0ff 10%, #CFEEF858 55%, #f8f8f8 100%);}
.user-header .header-bg{position: absolute;top: 0;left: 0;right: 0;z-index: 9998;}
.user-header .header-bg image{width: 100%;}
.user-detail-body{margin: 20rpx;display: flex;align-items: center;position: relative;z-index: 9999;}
.user-detail-body .avatar image{width: 100rpx;height: 100rpx;border-radius: 100%;}
.user-detail-body .detail-info{margin-left: 20rpx;}
.user-detail-body .detail-info .name{font-family: "bluevBold";color: #000;font-weight: 800;font-size: 28rpx;}
.user-detail-body .detail-info .desc{color: #666;font-size: 22rpx;margin-top: 10rpx;}
.user-detail-body .detail-status{margin-left: auto;margin-right: 0;} 
.user-detail-body .detail-status .status-btn {font-size: 24rpx;padding: 10rpx 15rpx;border-radius: 40rpx;display: flex;align-items: center;gap: 10rpx;color: #7F8185;background-color: transparent;}
.user-detail-body .detail-status .status-btn.full{background-color: #03BEFF;color: #fff;}

.user-body{margin: 20rpx;}
.user-body .user-total{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;flex-direction: row;}
.user-body .user-total .total-item{min-width: 0%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.user-body .user-total .total-item .num{color: #212226;font-size: 36rpx;font-weight: 800;line-height: 1.1;text-align: center;}
.user-body .user-total .total-item .name{color: rgba(21, 21, 21, 0.45);font-size: 22rpx;line-height: 1.2;text-align: center;margin-top: 10rpx;}

.user-body .user-level{background: linear-gradient(0deg, #f0fbff 0%, #b0e9ff 100%);padding: 2rpx;box-sizing: border-box;border-radius: 24rpx;margin: 20rpx 0;}
.user-body .user-level-body{padding: 28rpx 28rpx 32rpx;border-radius: 22rpx;background: linear-gradient(180deg, #def6ff 0%, #eefaff 52%, #ffffff 100%);box-sizing: border-box;}

</style>