Sports/pages/user/index.vue

<template>
	<view>
		<image style="width: 100%; height: 500rpx;" src="@/static/bg (1).png"></image>
		<view class="top">
			我的
		</view>
		<view class="top1">
			<image class="tuxiang" src="../../static/bg (1).png" mode=""></image>
			<view class="xinxi">
				<view class="name">王美丽</view>
				<image class="bianji" src="../../static/编辑.png" mode="" @click="updateuser"></image>
			</view>
			<view class="julexinxi">
				最美竞赛俱乐部
			</view>
			<view >
				<view class="upxinxi">
					<image class="bianji" style="margin-left: 80rpx;" src="../../static/bg (1).png" mode=""></image>
					<view class="name11">王美丽</view>
					<image class="bianji" style="margin-left: 80rpx;" src="../../static/tianjia.png" mode=""></image>
					<view class="adduser">添加运动员</view>
				</view>
			</view>
		</view>
		<view class="saicheng" style="margin-top: 200rpx;">
			<view class="saichengtop">
				<view>
					我的赛程
				</view>
				<view>
					<text style="line-height: 35upx;">查看回放</text><image class="imgw13" src="@/static/jiantouyou@2x.png"></image>
				</view>
			</view>
			<view class="detail" v-for="(item,index) in list">
				<view class="detail1" style="margin-top: 30rpx;">
					<view class="biaoti">炽热体育巡回赛</view>
					<view class="biaoti1">
						<text class="text1">成绩：</text>
						<text class="text2">02:10.91</text>
					</view>
				</view>
				<view class="detail2" style="margin-top: 30rpx;">
					<button type="warn">查看详情</button>
				</view>
			</view>
			<view class="" v-if="list.length==0">
				<view class="tishi">	您还没有报名任何赛事</view>
				<view class=""> <button  class="baomingbtn"> 去报名</button></view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom1">
				<view class="">
					<image class="imgbottom" src="@/static/报名记录.png"></image>
				</view>
				<view class="textbottom">报名记录</view>
			</view>
			<view class="bottom2">
				<view class="">
					<image class="imgbottom" src="@/static/我的主页.png"></image>
				</view>
				<view class="textbottom">我的主页</view>
			</view>
			<view class="bottom3" @click="clubs">
				<view class="">
					<image class="imgbottom" src="@/static/我的俱乐部.png"></image>
				</view>
				<view class="textbottom">俱乐部</view>
			</view>
			<view class="bottom4" @click="notice">
				
				<view class="">
					<image class="imgbottom" src="@/static/通知.png"></image>
				</view>
				<view class="textbottom" style="margin-left: 20rpx;">通知</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:[{},{}]
			}
		},
		onLoad() {
			
		},
		methods: {
			updateuser(){
				uni.navigateTo({
					url: "/pages/user/update/update"
				})
			},
			notice(){
				console.log(1111)
				uni.navigateTo({
					url: "/pages/user/notice/notice"
				})
			},
			clubs(){
				uni.navigateTo({
					url: "/pages/user/clubs/clubs"
				})
			},
			toPage(i) {
				if (i == 1) {
					uni.navigateTo({
						url: "/pages/user/pseronal"
					})
				} else if (i == 4) {
					uni.showModal({
						title: "温馨提示",
						content: "确定要退出吗？",
						confirmColor: "#009944",
						success(res) {
							if (res.confirm) {
								uni.showToast({
									title: "退出成功"
								})
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/login/index"
									})
								}, 2000)
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tishi{
		width: 298rpx;
		height: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.baomingbtn{
		margin-top: 50rpx;
		width: 200rpx;
		height: 70rpx;
		background: #CA151F;
		border-radius: 35rpx;
	}
	.bottom{
		margin: 0 auto;
		margin-top: 50rpx;
		width: 702rpx;
		height: 182rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		.imgbottom{
			margin-top: 20rpx;
			margin-right: 40rpx;
			width: 110rpx;
			height: 110rpx;
		}
		.textbuttom{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}
	.detail{
		padding: 20rpx;
		width: 642rpx;
		// height: 138rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		.biaoti{
			width: 214rpx;
			height: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
		.biaoti1{
			margin-top: 20rpx;
			.text1{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
			}
			.text2{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #CA151F;
			}
		}
	}
	.imgw13{
		margin-left: 15rpx;
		border: 1px dashed black;
		padding: 5rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.saicheng{
		width: 702rpx;
		// height: 414rpx;
		background: #fff;
		margin: 0 auto;
		padding-bottom: 40rpx;
		
	}
	.saichengtop{
		padding: 20rpx;
		display: flex;
		justify-content:space-between;
	}
	.upxinxi {
		display: flex;
		justify-content: center;

		.bianji {
			margin-top: 45rpx;
			width: 90rpx;
			height: 90rpx;
		}
		.name11{
			margin-top: 150rpx;
			margin-left: -100rpx;
		}
		.adduser{
			margin-top: 150rpx;
			margin-left: -100rpx;
		}
	}

	.top {
		position: absolute;
		top: 117upx;
		left: 25upx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.top1 {
		position: absolute;
		top: 184upx;
		left: 315upx;

		.tuxiang {
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 50%;
		}

		.xinxi {
			display: flex;

			.bianji {
				margin-left: 20rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.name {
				color: #fff;
			}
		}

		.julexinxi {
			color: #fff;
		}

		.upxinxi {
			position: absolute;
			top: 254upx;
			left: -290upx;
			width: 702rpx;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}

	}
</style>