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="quick-nav">
						<view class="nav-item" @click="jumpUri('/pages/plugin/rank')">
							<view class="icon"><image src="/static/quick-nav/star-rank.png" mode="widthFix"></image></view>
							<view class="name">星耀榜</view>
						</view>
						<view class="nav-item" @click="jumpUri('/pages/school/school','sw')">
							<view class="icon"><image src="/static/quick-nav/business-school.png" mode="widthFix"></image></view>
							<view class="name">商学院</view>
						</view>
						<view class="nav-item" @click="jumpUri('/pages/plugin/star')">
							<view class="icon"><image src="/static/quick-nav/influencer-home.png" mode="widthFix"></image></view>
							<view class="name">达人之家</view>
						</view>
					</view>
					<view class="banner" @click="test">
						<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/banner.png" mode="widthFix"></image>
					</view>
					<view class="new-star">
						<view class="title">
							<view class="name">最新入驻达人</view>
							<view class="more" @click="jumpUri('/pages/plugin/star')">查看全部 <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" @click="jumpUri('/pages/task/detail?id=0')">
							<image class="w100" src="/static/entry/join-now.png" mode="widthFix"></image>
						</view>
						<view class="nav-item w50">
							<image class="w100" @click="jumpUri('/pages/task/task','sw')" src="/static/entry/task-square.png" mode="widthFix"></image>
							<view class="new-task">
								<image class="task-img-1" src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800"  @click="jumpUri('/pages/task/detail?id=0')"></image>
								<image class="task-img-2" src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800" @click="jumpUri('/pages/task/detail?id=0')"></image>
								<image class="task-img-3" src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800" @click="jumpUri('/pages/task/detail?id=0')"></image>
							</view>
						</view>
					</view>
					<view class="rank-data">
						<view class="title">
							<view class="name">收益排行榜</view>
							<view class="more" @click="jumpUri('/pages/plugin/rank')">查看全部 <text class="cuIcon-right"></text></view>
						</view>
						<view class="rank-top">
							<view class="top-item rank-2">
								<image src="/static/rank/podium-rank2-bg.png" class="bg" mode="scaleToFill"></image>
								<view class="top-info">
									<view class="avatar">
										<image src="/static/rank/avatar.jpeg"></image>
										<view class="top-num"><image src="/static/rank/top-rank2.png"></image></view>
									</view>
									<view class="name">浅**浅</view>
									<view class="num"><text>￥</text>0.87w</view>
								</view>
							</view>
							<view class="top-item rank-1">
								<image src="/static/rank/podium-rank1-bg.png" class="bg" mode="scaleToFill"></image>
								<view class="top-info">
									<view class="avatar">
										<image src="/static/rank/avatar.jpeg"></image>
										<view class="top-num"><image src="/static/rank/top-rank1.png"></image></view>
									</view>
									<view class="name">浅**浅</view>
									<view class="num"><text>￥</text>0.87w</view>
								</view>
							</view>
							<view class="top-item rank-3">
								<image src="/static/rank/podium-rank3-bg.png" class="bg" mode="scaleToFill"></image>
								<view class="top-info">
									<view class="avatar">
										<image src="/static/rank/avatar.jpeg"></image>
										<view class="top-num"><image src="/static/rank/top-rank3.png"></image></view>
									</view>
									<view class="name">浅**浅</view>
									<view class="num"><text>￥</text>0.87w</view>
								</view>
							</view>
						</view>
						<view class="rank-list">
							<view class="rank-item">
								<view class="num">4</view>
								<view class="avatar"><image src="/static/rank/avatar.jpeg"></image></view>
								<view class="name">我是庄小周</view>
								<view class="money"><text>￥</text>0.23w</view>
							</view>
							<view class="rank-item">
								<view class="num">5</view>
								<view class="avatar"><image src="/static/rank/avatar.jpeg"></image></view>
								<view class="name">我是庄小周</view>
								<view class="money"><text>￥</text>0.23w</view>
							</view>
						</view>
					</view>
					<view class="home-task">
						<view class="title">
							<view class="name">最新任务</view>
							<view class="more" @click="jumpUri('/pages/task/task','sw')">查看全部 <text class="cuIcon-right"></text></view>
						</view>
						<view class="star-task-list">
							<view class="task-item" v-for="(item,indx) in 10" :key="indx" @click="jumpUri('/pages/task/detail?id='+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>
		<halfLogin ref="loginCom"></halfLogin>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			loginState:true,
			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: {
		jumpUri(uri,type = 'nv')
		{
			// 判断是否登录
			switch (type){
				case "sw":
					uni.switchTab({
						url:uri
					})
				break;
				case "nv":
				default:
					uni.navigateTo({
						url:uri
					})
				break;
			}
		},
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		},
		test(){
			this.$refs.loginCom.open();
			this.loginState = true;
		}
	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}
.banner-loading{height: 220rpx;}
.rank-data .rank-top{padding: 20rpx;display: flex;align-items: flex-end;}
.rank-data .rank-top .top-item{flex: 1;position: relative;min-height: 200rpx;}
.rank-data .rank-top .top-item.rank-1{height: 260rpx;}
.rank-data .rank-top .top-item.rank-2{height: 220rpx;}
.rank-data .rank-top .top-item.rank-3{height: 220rpx;}
.rank-data .rank-top .top-item .bg{width: 100%;position: absolute;left: 0;right: 0;bottom: 0;height: 86%;}
.rank-data .rank-top .top-info {position: relative;z-index: 99;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.rank-data .rank-top .top-info .avatar{position: relative;width: 80rpx;height: 80rpx;margin-bottom: 40rpx;}
.rank-data .rank-top .top-info .avatar image{width: 80rpx;height: 80rpx;border-radius: 100%;border: 4rpx solid #fff;}
.rank-data .rank-top .top-info .avatar .top-num {position: absolute;right: -60rpx;top: 0;}
.rank-data .rank-top .top-info .avatar .top-num image{width: 80rpx;height: 40rpx;border-radius: 0;border: 0;}

.rank-data .rank-top .top-info .name{color: #666;font-size: 24rpx;margin-bottom: 10rpx;}
.rank-data .rank-top .top-info .num{display: flex;align-items: baseline;font-weight: 800;color: #000;font-size: 28rpx;}
.rank-data .rank-top .top-info .num text{font-weight: normal;color: #666;font-size: 24rpx;}

.rank-data .rank-list{padding: 0 20rpx;}
.rank-data .rank-list .rank-item{display: flex;align-items: center;padding: 10rpx 0;font-size: 24rpx;color: #000;}
.rank-data .rank-list .rank-item .num{color: rgba(141, 141, 141, 1);}
.rank-data .rank-list .rank-item .avatar {margin: 0 20rpx;}
.rank-data .rank-list .rank-item .avatar image{width: 50rpx;height: 50rpx;border-radius: 100%;}
.rank-data .rank-list .rank-item .money{
	display: flex;
	align-items: baseline;
	flex-shrink: 0;
	font-weight: 800;
	font-size: 28rpx;
	color: #000;
	margin-left: auto;
	margin-right: 0;
}
.rank-data .rank-list .rank-item .money text{
	font-weight: normal;
	color: #666;
	font-size: 24rpx;
}

.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{margin: 20rpx 0;}
.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;position: relative;}
.quick-nav .nav-item .icon image{width: 60%;}
.quick-nav .nav-item.w50{width: 50%;}
.quick-nav .nav-item .icon-loading{height: 180rpx;}
.quick-nav .nav-item .new-task{position: absolute;bottom: 35rpx;display: flex;align-items: center;left: 30rpx;}
.quick-nav .nav-item .new-task image{width: 60rpx;height: 60rpx;border-radius: 10rpx;border: 2rpx solid #fff;}
.quick-nav .nav-item .new-task .task-img-1{transform: rotate(0deg);animation: entry-task-wobble-0 5.5s ease-in-out infinite both;}
.quick-nav .nav-item .new-task .task-img-2{transform: rotate(17deg);margin-left: -10rpx;animation: entry-task-wobble-1 5.5s ease-in-out infinite both;}
.quick-nav .nav-item .new-task .task-img-3{transform: rotate(0deg);margin-left: -10rpx;animation: entry-task-wobble-2 5.5s ease-in-out infinite both;}


.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%;
}

@keyframes entry-task-wobble-0 {
	0%,
	82%,
	100% {
		transform: rotate(0deg) translateY(0);
	}
	86% {
		transform: rotate(5deg) translateY(-2rpx);
	}
	90% {
		transform: rotate(-4deg) translateY(0);
	}
	94% {
		transform: rotate(3deg) translateY(-1rpx);
	}
	97% {
		transform: rotate(-2deg) translateY(0);
	}
}

@keyframes entry-task-wobble-1 {
	0%,
	82%,
	100% {
		transform: rotate(17deg) translateY(0);
	}
	86% {
		transform: rotate(22deg) translateY(-2rpx);
	}
	90% {
		transform: rotate(13deg) translateY(0);
	}
	94% {
		transform: rotate(20deg) translateY(-1rpx);
	}
	97% {
		transform: rotate(15deg) translateY(0);
	}
}

@keyframes entry-task-wobble-2 {
	0%,
	82%,
	100% {
		transform: rotate(0deg) translateY(0);
	}
	86% {
		transform: rotate(-5deg) translateY(-2rpx);
	}
	90% {
		transform: rotate(4deg) translateY(0);
	}
	94% {
		transform: rotate(-3deg) translateY(-1rpx);
	}
	97% {
		transform: rotate(2deg) translateY(0);
	}
}
</style>