star-uni/pages/plugin/star.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<cu-custom bgColor="bg-bluev-other" :isBack="true">
				<block slot="backText" v-if="scrollHeight>20">达人之家</block>
			</cu-custom>
			<view class="star-header">
				<view class="star-slogan">
					<view class="slogan-info">
						<view class="name">达人之家</view>
						<view class="en-name">welcome to join us</view>
						<view class="sub-name">入驻达人真实数据</view>
					</view>
					<view class="slogan-img"><image src="/static/other/star.png" mode="widthFix"></image></view>
				</view>
				<view class="star-total">
					<view class="total-item">
						<view class="name">入驻达人</view>
						<view class="num">20w+</view>
						<view class="desc">本月新增4人</view>
					</view>
					<view class="total-item">
						<view class="name">达人总收益</view>
						<view class="num">20w+</view>
						<view class="desc">环比增长24.5%</view>
					</view>
					<view class="total-item">
						<view class="name">认证达人</view>
						<view class="num">20w+</view>
						<view class="desc">官方认证</view>
					</view>
				</view>
			</view>
			<view class="star-body">
				<view class="star-search">
					<view class="icon"><image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/search-icon.png" mode="widthFix"></image></view>
					<view class="search-input">
						<input type="text" class="input" placeholder="搜一搜达人" />
					</view>
					<view class="search-btn"><button class="u-button">找人</button></view>
				</view>
				<view class="task-status">
					<view class="platform">
						<view class="platform-item active">
							<view class="name">全部</view>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
						<view class="platform-item">
							<view class="name">抖音</view>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
						<view class="platform-item">
							<view class="name">快手</view>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
						<view class="platform-item">
							<view class="name">小红书</view>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
						<view class="platform-item">
							<view class="name">视频号</view>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
					</view>
				</view>
				<view class="star-list">
					<view class="star-item" v-for="(item,index) in 10" :key="index">
						<view class="avatar"><image src="/static/rank/avatar.jpeg" mode="widthFix"></image></view>
						<view class="star-info">
							<view class="name">我是庄小周</view>
							<view class="level-tag">
								<view class="tag-level level-bg-3">
									<image src="/static/level/lv3.png"></image>
									Lv.3 黄金达人
								</view>
								<view class="tag-item">美食博主</view>
								<view class="tag-item">杭州</view>
							</view>
							<view class="other">
								<view class="other-item"><text>粉丝</text>89w</view>
								<view class="other-item"><text>总收益</text>89w</view>
								<view class="other-item"><text>任务数</text>22</view>
							</view>
						</view>
						<view class="more">
							<text class="cuIcon-right"></text>
						</view>
					</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>
page{
	background-color: rgba(245, 245, 245, 1);
}
.star-list .star-item .tag-level{display: flex;align-items: center;font-size: 22rpx;border-radius: 20rpx;padding: 5rpx 10rpx;gap: 5rpx;}
.star-list .star-item .tag-level image{width: 30rpx;height: 30rpx;}
.star-list .star-item .level-tag{
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin: 20rpx 0;
}
.star-list .star-item .level-tag .tag-item{
	border: 2rpx solid rgba(223, 223, 223, 1);
	padding: 5rpx 20rpx;
	font-size: 24rpx;
	color: rgba(89, 91, 98, 1);
	border-radius: 40rpx;
}
.star-list .star-item .star-info .name {
	font-size: 32rpx;
	color: #000;
	font-weight: 800;
}
.star-list .star-item .other{
	display: flex;
	align-items: center;
	gap: 20rpx;
}
.star-list .star-item .other .other-item {
	color: rgba(89, 91, 98, 1);
}
.star-list .star-item .other .other-item text {
	color: rgba(0, 0, 0, 0.2);
	margin-right: 10rpx;
}
.star-list .star-item .more{
	margin-left: auto;
	margin-right: 0;
}
.star-list .star-item .more text{
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.4);
}
.star-list .star-item .avatar image{
	width: 128rpx;
	height: 128rpx;
	border-radius: 100%;
}
.star-list .star-item{
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}
.star-body{
	margin: -40rpx 20rpx 0 20rpx;
	position: relative;
	z-index: 999;
}
.star-body .star-search .search-btn{margin-left: auto;margin-right: 0;}
.star-body .star-search .u-button{font-size: 24rpx;height: 50rpx;border-radius: 10rpx;line-height: 50rpx;background-color: rgba(33, 34, 38, 1);color: #fff;width: 100%;font-weight: 800;}
.star-body .star-search .u-button::after{border: 0;}
.star-body .star-search .u-button.full{}

.star-body .star-search .icon image{
	width: 50rpx;
	height: 50rpx;
}
.star-body .star-search .input{font-size: 24rpx;width: 100%;border: 0;height: 100%;box-sizing: none;box-shadow: none;}
.star-body .star-search{
	border-radius: 10rpx;
	border: 6rpx solid rgba(33, 34, 38, 1);
	height: 80rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	gap: 20rpx;
}
.star-header{
	background: linear-gradient(0deg, #D5F4FF -10.47%, #87E0FF 100%);
	padding: 0 20rpx 60rpx 20rpx;
	border-radius: 0 0 20rpx 20rpx;
	position: relative;
}
.star-header .star-slogan{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 280rpx;
}
.star-header .star-total{display: flex;align-items: center;gap: 20rpx;}
.star-header .total-item{flex: 1;background-color: #fff;border-radius: 10rpx;padding: 20rpx;}
.star-header .total-item .name{font-size: 28rpx;color: rgba(89, 91, 98, 1);}
.star-header .total-item .num{font-size: 36rpx;color: #000;font-weight: 800;margin: 20rpx 0;}
.star-header .total-item .desc{font-size: 24rpx;color: rgba(0, 0, 0, .2);}

.star-header .star-slogan .name{font-size: 52rpx;color: #000;font-weight: 800;font-family: "bluevBold";}
.star-header .star-slogan .en-name{text-transform: uppercase;background-color: #212226;color: #fff;font-size: 24rpx;padding: 10rpx 20rpx;margin: 20rpx 0;border-radius: 10rpx;}
.star-header .star-slogan .sub-name{color: rgba(140, 140, 140, 1);font-size: 28rpx;}
.star-header .star-slogan .slogan-img {position: absolute;top: -20rpx;right: 5%;}
.star-header .star-slogan .slogan-img image{width: 320rpx;}

.task-status .platform{display: flex;align-items: center;font-size: 32rpx;color: #666;justify-content: space-around;margin: 20rpx 0;}
.task-status .platform .platform-item{display: flex;align-items: center;position: relative;}
.task-status .platform .platform-item .name{position: relative;z-index: 999;}
.task-status .platform .platform-item image{width: 82rpx;height: 52rpx;position: absolute;right: -20rpx;bottom: 0;z-index: 99;display: none;}
.task-status .platform .platform-item.active image{display: block;}
.task-status .platform .platform-item.active{color: #000;font-weight: 800;font-family: "bluevBold";}
</style>