完成我的报名页面UI

pages.json

@@ -741,6 +741,13 @@
 				"navigationBarTitleText": "会员服务",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/user/my/myEventRegistrationList",
+			"style" : {
+				"navigationBarTitleText": "我的报名",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/user/my/myEventRegistrationList.vue

@@ -0,0 +1,173 @@
+<template>
+	<view>
+		<lf-nav title="我的报名" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
+		<view v-if="tab_list.length">
+			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="tab_current" @change="tabChange"></u-tabs>
+		</view>
+		<swiper :style="{height: autoHeight}" :current="tab_current" @change="swiperChange">
+			<swiper-item v-for="(item, index) in tab_list" :key="index">
+				<scroll-view :style="{height: autoHeight}" :scroll-y="true">
+					<view class="scroll-content">
+						<view class="card" v-for="(item, index) in 3" :key="index">
+							<view class="cover">
+								<image class="img"></image>
+								<view class="label" :class="'theme-'+ (index+1)">待参加</view>
+							</view>
+							<view class="info">
+								<view class="title">海蓝之谜美颜会 9月15日场10:30场</view>
+								<view class="date">2021.09.01-2021.09.15</view>
+							</view>
+						</view>
+					</view>
+					<view style="height: 30rpx;"></view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			let _public = {
+				page: 1,
+				isPage: true,
+				loadingClass: true,
+				loadingText: '正在加载中'
+			}
+			return {
+				tab_current: 0,
+				tab_list: [{
+					name: '全部',
+					list: [],
+					..._public
+				},{
+					name: '待参加',
+					list: [],
+					..._public
+				},{
+					name: '已参加',
+					list: [],
+					..._public
+				},{
+					name: '已过期',
+					list: [],
+					..._public
+				}],
+				scrollH: 0,
+				nav_height: 0
+			}
+		},
+		computed: {
+			autoHeight(){
+				return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
+			}
+		},
+		onLoad(){
+			let info = uni.getSystemInfoSync();
+			this.scrollH = info.screenHeight;
+		},
+		methods: {
+			tabChange(event){
+				this.tab_current = event;
+			},
+			swiperChange(event){
+				this.tab_current = event.detail.current;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.scroll-content{
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		.card{
+			width: 686rpx;
+			height: max-content;
+			background-color: #FFFFFF;
+			box-shadow: 1rpx 1rpx 6rpx 3rpx #e5e5e5;
+			margin-top: 30rpx;
+			border-radius: 20rpx;
+			overflow: hidden;
+			.cover{
+				width: 686rpx;
+				height: 300rpx;
+				position: relative;
+				.img{
+					width: 100%;
+					height: 100%;
+					background-color: #EEEEEE;
+				}
+				.label{
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 118rpx;
+					height: 57rpx;
+					border-radius: 20rpx 0rpx 20rpx 0rpx;
+					text-align: center;
+					line-height: 57rpx;
+					color: #FFFFFF;
+					font-size: 26rpx;
+				}
+			}
+			.info{
+				width: 686rpx;
+				height: max-content;
+				padding: 20rpx 30rpx;
+				box-sizing: border-box;
+				.title{
+					font-size: 28rpx;
+					color: #222222;
+					font-weight: bold;
+				}
+				.date{
+					margin-top: 20rpx;
+					font-size: 24rpx;
+					color: #555555;
+				}
+			}
+		}
+	}
+	
+	.theme-1{
+		background-color: #15716E;
+	}
+	.theme-2{
+		background-color: #1789E4;
+	}
+	.theme-3{
+		background-color: #777777;
+	}
+	
+	// tabs 样式修改
+	/deep/.u-scroll-box {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+	/deep/.u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 80rpx!important;
+		position: absolute;
+		left: 0;
+		bottom: -12rpx;
+	}
+	
+	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
+		background-color: #15716E!important;
+		width: 56rpx!important;
+		position: absolute;
+		height: 5rpx!important;
+		left: 8rpx;
+		bottom: -4rpx;
+	}
+	
+	/deep/ .u-tab-item {
+		font-size: 28rpx!important;
+	}
+</style>