pay-video-applet-uniapp-24-8-22/pages/publish/competition.vue

<template>
	<view class="competition">
		<navbar
		leftClick
		bgColor="#cfd4ff"
		@leftClick="$utils.navigateBack"
		title="比赛评选"/>
		<view class="top">
			<view class="left">
				<view class="title">
					比赛评选排行
				</view>
				<view class="">
					参与活动 领取奖励
				</view>
			</view>
			<view class="right">
				<image src="/static/image/competition/1.png" mode=""></image>
			</view>
		</view>
		
		<view class="box">
			
			<view class="head">
				<view class="ranking">
					排行
				</view>
				<view class="content">
					作品
				</view>
				<view class="give-like">
					点赞
				</view>
			</view>
			
			
			<view class="empty"
			v-if="!list.length">
				<image src="/static/image/competition/k.png" mode=""></image>
				<view class="">
					暂无作品，发布第一个作品吧 ~
				</view>
			</view>
			
			<view class="list"
			v-else>
				
				<view class="item" 
				v-for="(item, index) in list"
				:key="index">
					<view class="ranking">
						{{ index + 1 }}
					</view>
					<view class="content">
						<view class="image">
							<image src="" mode=""></image>
						</view>
						<view class="text">
							<view class="title">
								作品名称
							</view>
							<view class="actor">
								<view class="headImage">
									<image src="" mode=""></image>
								</view>
								<view class="username">
									发布人：小飞作品名称作品名称作品名称作品名称
								</view>
							</view>
							<view class="createTime">
								发布时间：2024-03-03
							</view>
						</view>
					</view>
					<view class="give-like">
						<view class="num">
							<uv-icon 
							size="30rpx"
							name="thumb-up"></uv-icon>
							240
						</view>
						<view :class="{btn : true, a : index == 3}">
							投票
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="submit">
			发布作品
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list : []
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.competition{
	.top{
		background: linear-gradient(#cfd4ff, #f7f7f7);
		width: 100%;
		height: 400rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		justify-content: space-between;
		.left{
			padding-top: 40rpx;
			font-size: 28rpx;
			.title{
				font-size: 50rpx;
				font-weight: 900;
				color: #5a24f3;
				padding-bottom: 20rpx;
			}
		}
		.right{
			image{
				width: 300rpx;
				height: 300rpx;
				margin-top: -50rpx;
			}
		}
	}
	.box{
		background-color: #fff;
		min-height: 100rpx;
		margin: 0 30rpx;
		margin-top: -150rpx;
		border-radius: 20rpx;
		
		.head,
		.item{
			display: flex;
			padding: 20rpx 10rpx;
			.content{
				flex: 1;
			}
			.give-like,
			.ranking{
				width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}
		.head{
			font-size: 28rpx;
			color: #999;
		}
		
		.empty{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 100rpx 0;
			color: #999;
		}
		
		.list{
			.item{
				font-size: 20rpx;
				&:nth-child(2){
					.ranking{
						color: red;
					}
				}
				&:nth-child(3){
					.ranking{
						color: #FFA200;
					}
				}
				&:nth-child(4){
					.ranking{
						color: #4739EA;
					}
				}
				.ranking{
					font-size: 40rpx;
					font-weight: 900;
					font-style: italic;
				}
				.content{
					display: flex;
					image{
						width: 100%;
						height: 100%;
					}
					.image{
						width: 200rpx;
						height: 150rpx;
						background-color: #999;
						overflow: hidden; 
						margin-right: 20rpx;
						border-radius: 20rpx;
						flex-shrink: 0;
					}
					.text{
						.title{
							font-size: 30rpx;
							font-weight: 900;
							display: -webkit-box; 
							-webkit-box-orient: 
							vertical; -webkit-line-clamp: 2; 
							overflow: hidden;
							height: 80rpx;
						}
						.actor{
							display: flex;
							.headImage{
								width: 30rpx;
								height: 30rpx;
								overflow: hidden;
								border-radius: 20rpx;
								background-color: #999;
								margin-right: 5rpx;
							}
							.username{
								overflow: hidden;
								text-overflow:ellipsis; 
								white-space: nowrap;
								width: 180rpx;
							}
						}
						.createTime{
							overflow: hidden;
							text-overflow:ellipsis; 
							white-space: nowrap;
							width: 220rpx;
							margin-top: 10rpx;
						}
					}
				}
				.give-like{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.num{
						display: flex;
					}
					.btn{
						border: 1px solid #4739EA;
						margin-top: 10rpx;
						padding: 8rpx 16rpx;
						border-radius: 15rpx;
						color: #4739EA;
						&.a{
							color: #999;
							border: 1px solid #999;
						}
					}
				}
			}
		}
	}
	.submit{
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 50rpx;
		margin-bottom: 50rpx;
		background: $uni-linear-gradient-btn-color;
		color: #fff;
		width: 650rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
}
</style>