JianjianStreet-H5/pages/my/my-baoming.vue

<template>
	<view class="my-baoming">
		<view class="search-box flex align-center justify-between">
			<u-search placeholder="输入活动主标题进行搜索" @search="searchClick" searchIconSize="16" :showAction="false" :searchIcon="searchIcon" v-model="params.search"></u-search>
		</view>
		<view class="content">
			<view class="course-box-item flex" @click="seeDetail(item)" v-for="(item,i) in 3" :key="i">
				<!-- <u--image :showLoading="true" src="@/static/img/my/dianhua-bg.png" width="281rpx" height="256rpx"></u--image> -->
				<view class="box-right">
					<view class="active-title">2021 想象力大会 想象力智造 数字板块位移</view>
					<view class="active-time">
						<text>2021/03/22 13:30</text>
					</view>
					<view class="active-add">
						<text>湖南省长沙市雨花区人民东路111号</text>
					</view>
					<view class="user-img flex justify-end">
						<view class="menu-btn" @click="seeDetail">报名详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchIcon: require('@/static/img/search-icon.png'),
				params:{
					pageNo:1,
					pageSize:10,
					search:''
				}
			}
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			seeDetail(){
				uni.navigateTo({
					url:`/pages/my/baoming-detail`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}
</style>
<style lang="scss" scoped>
	.my-baoming {
		.search-box {
			margin-bottom: 22rpx;
			background-color: #fff;
			height: 128rpx;
			padding: 0 56rpx;
		}
		
		.content {
			padding: 0 12rpx;
			.course-box-item {
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16); 
				padding: 33rpx 13rpx;
				margin-bottom:17rpx;
				.box-right {
					margin-left: 16rpx;
					
					.active-title {
						font-size: 30rpx;
						color: #000;
						line-height: 40rpx;
						overflow: hidden;
						display: -webkit-box;    
						-webkit-box-orient: vertical;    
						-webkit-line-clamp: 2;    
					}
					
					.active-time {
						color: #707070;
						font-size: 26rpx;
						margin: 10rpx 0 14rpx 0;
					}
					.active-add {
						color: #707070;
						font-size: 26rpx;
					}
					
					.user-img {
						.menu-btn {
							width: 213rpx;
							height: 79rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #ED1450;
							color: #FFFFFF;
							font-size: 26rpx;
							border-radius: 40rpx;
						}
					}
					
				}
			}
		}
	}
</style>