完成热门活动页面UI

common/js/config.js

@@ -16,7 +16,7 @@ export default  {
 		//https://demo-guojiang-ec-api.guojiang.club/
 		
 		baseUrl: process.env.NODE_ENV === 'development' ? 
-		'http://192.168.2.221/' : 'https://v3-ec-admin-dev.guojiang.club/', // 运行时自动替换变量
+		'http://192.168.3.29/' : 'https://v3-ec-admin-dev.guojiang.club/', // 运行时自动替换变量
     },
 	 PACKAGES: {
         activity: false,

pages.json

@@ -783,6 +783,13 @@
 				"navigationBarTitleText": "我的报名",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/eventRegistration/eventRegistration",
+			"style" : {
+				"navigationBarTitleText": "热门活动",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/index/category/category.vue

@@ -101,10 +101,11 @@
 		},
 		computed: {
 			autoHeight(){
-				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx)`;
+				return `calc(${this.scrollH}px - ${this.nav_height}px - 90rpx - 120rpx)`;
 			},
 			otherHeight(){
-				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx - 105rpx)`;
+				// 屏幕可用总高度 - 导航条高度 - tabs高度 - tabbar高度 - 筛选高度
+				return `calc(${this.scrollH}px - ${this.nav_height}px - 90rpx - 120rpx - 105rpx)`;
 			}
 		},
 		components: {

pages/index/eventRegistration/eventRegistration.vue

@@ -0,0 +1,142 @@
+<template>
+	<view>
+		<lf-nav title="热门活动" :showIcon="true" bgColor="#fff" @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>
+							<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
+				}],
+				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;
+				}
+			}
+			.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;
+				}
+			}
+		}
+	}
+	
+	// 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>

pages/user/my/center.vue

@@ -141,6 +141,7 @@
 		background: #FFFFFF;
 		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
 		border-radius: 20rpx;
+		margin-bottom: 30rpx;
 	}
 	.card-tag {
 		width: 144rpx;

pages/user/my/myEventRegistrationList.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<lf-nav title="我的报名" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
+		<lf-nav title="我的报名" :showIcon="true" bgColor="#fff" @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>