star-uni/pages/index/index.vue

<template>
	<view class="content">
		<view class="loading" v-if="loading">
			<cu-custom bgColor="bg-bluev-head">
				<block slot="content">达人任务平台</block>
			</cu-custom>
			<view class="home-search-loading">
				<view class="skeleton-line animate"></view>
			</view>
			<view class="home-content">
				<view class="banner-loading"><view class="skeleton-line animate"></view></view>
				<view class="quick-nav">
					<view class="nav-item" v-for="(item,index) in 3" :key="index">
						<view class="icon-loading"><view class="skeleton-line animate"></view></view>
						<view class="name margin-top-xs"><view class="skeleton-line animate"></view></view>
					</view>
				</view>
				<view class="new-star">
					<view class="title">
						<view class="name-loading"><view class="skeleton-line animate"></view></view>
						<view class="more-loading"><view class="skeleton-line animate"></view></view>
					</view>
					<view class="star-list">
						<view class="star-item" v-for="(item,index) in 4" :key="index">
							<view class="icon"><view class="skeleton-line animate"></view></view>
							<view class="name margin-top-xs"><view class="skeleton-line animate"></view></view>
						</view>
					</view>
				</view>
				<view class="quick-nav">
					<view class="nav-item w50" v-for="(item,index) in 2" :key="index">
						<view class="icon-loading"><view class="skeleton-line animate"></view></view>
					</view>
				</view>
				<view class="quick-nav">
					<view class="nav-item" v-for="(item,index) in 3" :key="index">
						<view class="icon-loading"><view class="skeleton-line animate"></view></view>
					</view>
				</view>
			</view>
		</view>
		<block v-else>
			<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
				<view class="home-header bg-bluev-head">
					<cu-custom :bgColor="scrollHeight>20?'bg-bluev-head':'none'">
						<block slot="content">达人任务平台</block>
					</cu-custom>
					<view class="home-search">
						<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/search-icon.png" mode="widthFix"></image>
						<input type="text" class="search-input" placeholder="请输入" />
					</view>
				</view>
				<view class="home-content">
					<view class="banner">
						<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/home-top-banner.png" mode="widthFix"></image>
					</view>
					<view class="quick-nav">
						<view class="nav-item">
							<view class="icon"><image src="/static/quick-nav/star-rank.png" mode="widthFix"></image></view>
							<view class="name">星耀榜</view>
						</view>
						<view class="nav-item">
							<view class="icon"><image src="/static/quick-nav/business-school.png" mode="widthFix"></image></view>
							<view class="name">商学院</view>
						</view>
						<view class="nav-item">
							<view class="icon"><image src="/static/quick-nav/influencer-home.png" mode="widthFix"></image></view>
							<view class="name">达人之家</view>
						</view>
					</view>
					<view class="new-star">
						<view class="title">
							<view class="name">最新入驻达人</view>
							<view class="more">查看全部 <text class="cuIcon-right"></text></view>
						</view>
						<view class="star-swiper">
							<swiper class="swiper" circular :autoplay="false" :interval="2000" :duration="200">
								<swiper-item class="swiper-item" v-for="(item,idex) in starData" :key="idex">
									<view class="first-body" hover-class="none">
										<view class="avatar"><image :src="item.avatar" mode="widthFix"></image></view>
										<view class="name">{{item.name}}</view>
										<view class="platform"><image :src="'/static/image/'+item.platform+'.svg'"></image></view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="quick-nav">
						<view class="nav-item w50">
							<image class="w100" src="/static/entry/join-now.png" mode="widthFix"></image>
						</view>
						<view class="nav-item w50">
							<image class="w100" src="/static/entry/task-square.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="rank-data">
						<view class="title">
							<view class="name">收益排行榜</view>
							<view class="more">查看全部 <text class="cuIcon-right"></text></view>
						</view>
					</view>
					<view class="home-task">
						<view class="title">
							<view class="name">精选任务</view>
							<view class="more">查看全部 <text class="cuIcon-right"></text></view>
						</view>
						<view class="star-task-list">
							<view class="task-item" v-for="(item,indx) in 10" :key="indx">
								<view class="item-body">
									<view class="item-img">
										<image src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800" mode="aspectFill"></image>
									</view>
									<view class="item-info">
										<view class="title">【官方正品】金纺柔顺剂宝宝衣物适用0漂白剂抗静电蓬松不僵硬CW-星川任务-202</view>
										<view class="item-tags">
											<view class="tag-item">抖音</view>
											<view class="tag-item">手拍</view>
											<view class="tag-item">真人出境</view>
										</view>
										<view class="item-price">
											<view class="item-platform">抖音L1</view>
											<view class="price-txt"><text>￥</text>20.0w</view>
										</view>
									</view>
								</view>
								<view class="item-foot">
									<view class="item-join">
										<view class="cu-avatar-group">
											<view class="cu-avatar round sm" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
										</view>
										<view class="join-text"><text>180</text>/200人已参加</view>
									</view>
									<view class="foot-btn">
										<button class="btn disabled" :disabled="true">立即参加</button>
									</view>
								</view>
							</view>
						</view>
						<view class="star-task-more"></view>
					</view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			loading:false,
			scrollHeight:0,
			starData:[
				{
					"avatar":"/static/rank/avatar.jpeg",
					"name":"我是庄小周",
					"platform":"douyin"
				},
				{
					"avatar":"/static/rank/avatar.jpeg",
					"name":"我是庄小周2",
					"platform":"kuaishou"
				},
				{
					"avatar":"/static/rank/avatar.jpeg",
					"name":"我是庄小周3",
					"platform":"txvideo"
				},
				{
					"avatar":"/static/rank/avatar.jpeg",
					"name":"我是庄小周4",
					"platform":"xiaohongshu"
				},
				{
					"avatar":"/static/rank/avatar.jpeg",
					"name":"我是庄小周5",
					"platform":"douyin"
				}
			],
			avatar: [
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
			],
		}
	},
	onLoad() {
		app = this;
	},
	methods: {
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		}
	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}
.banner-loading{height: 220rpx;}
.home-search-loading{margin: 20rpx;height: 68rpx;}
.home-search{display: flex;align-items: center;background-color: #fff;border-radius: 66rpx;margin: 20rpx;height: 68rpx;padding: 0 20rpx;gap: 20rpx;}
.home-search image{width: 32rpx;height: 32rpx;}
.home-search .search-input{font-size: 24rpx;width: 100%;border: 0;height: 100%;box-sizing: none;box-shadow: none;}
.home-content {margin: 20rpx;}
.home-content .banner{}
.home-content .banner image{width: 100%;}
.quick-nav{display: flex;align-items: center;margin: 20rpx 0;gap: 20rpx;}
.quick-nav .nav-item{width: 33%;text-align: center;font-family: "bluevBold";font-size: 24rpx;}
.quick-nav .nav-item .icon image{width: 60%;}
.quick-nav .nav-item.w50{width: 50%;}
.quick-nav .nav-item .icon-loading{height: 180rpx;}
.new-star .title{display: flex;align-items: center;justify-content: space-between;line-height: 60rpx;}
.new-star .title .name{font-family: "bluevBold";font-size: 32rpx;}
.new-star .title .more{font-size: 24rpx;color: #666;}
.new-star .title .more-loading{width: 15%;}
.new-star .title .name-loading{width: 30%;}
.star-list{display: flex;align-items: center;gap: 20rpx;}
.star-list .star-item{width: 25%;margin: 20rpx 0;}
.star-list .star-item .icon{height: 120rpx;}

.rank-data{background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 0;}
.rank-data .title{display: flex;align-items: center;justify-content: space-between;line-height: 60rpx;}
.rank-data .title .name{font-family: "bluevBold";font-size: 32rpx;}
.rank-data .title .more{font-size: 24rpx;color: #666;}

.home-task .title{display: flex;align-items: center;justify-content: space-between;line-height: 60rpx;}
.home-task .title .name{font-family: "bluevBold";font-size: 32rpx;}
.home-task .title .more{font-size: 24rpx;color: #666;}

.star-swiper{
	margin-top: 20upx;
	display: flex;
	overflow-x: auto;
	gap: 20upx;
	flex-shrink:0;
	flex-direction: row;
	flex-wrap: nowrap;
}
.star-swiper .swiper{
	width: 100%;
	display: flex;
	gap: 20rpx;
	height: 180rpx;
}
.star-swiper .swiper .swiper-item{
	width: calc(100vw / 5) !important;
	position: relative;
}
.star-swiper .first-body .platform{position: absolute;top: 0;right: 20rpx;background-color: #fff;width: 40rpx;height: 40rpx;border-radius: 100%;}
.star-swiper .first-body .platform image{width: 40rpx;height: 40rpx;}
.star-swiper .first-body{
	width: 90%;
	border-radius: 10rpx;
	text-align: center;
}
.star-swiper .first-body .name{
	font-size: 24rpx;
	color: #333;
	margin-top: 10rpx;
	font-weight: 800;
}
.star-swiper .first-body .avatar{
	display: flex;
	align-items: center;
	justify-content: center;
}
.star-swiper .first-body .avatar image{
	width: 100%;
	max-height: 200rpx;
	border-radius: 100%;
}
.scroll-content{
	width: 100%;
	height: 100vh;
}
</style>