<template>
	<view class="activity-index">
		<nav-bar title="同期活动" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true">
			<view class="main-container">
				<view class="activity-head">
					<view class="activity-head-title">同期活动</view>
					<view class="activity-head-desc">今年慕尼黑上海电子生产设备展将围绕四大行业主题开展共计9场同期论坛，论坛围绕工业机器人、柔性制造、储能与新能源、汽车线束、智能座舱、智能制造、TGV先进材料、封装、胶粘剂、新能源汽车等热门话题展开更多探讨与交流。</view>
				</view>
				<view class="activity-list">
					<template v-for="(item, index) in [1, 2, 3, 4]">
						<view class="activity-item" hover-class="active" :key="index" @click="onClickActivity(item)">
							<view class="activity-title">
								<view>TGV先进材料及封装产业化机遇高峰论坛</view>
								<view class="activity-favourites" :class="{ 'active': index === 1 }">
									<view v-if="index == 1" class="iconfont icon-favourites-filled-star-symbol"></view>
									<view v-else class="iconfont icon-Favourites-Add-Large"></view>
									<view class="activity-favourites-text">收藏</view>
								</view>
							</view>
							<view class="activity-time">2024年03月20日 | E1馆二楼M16会议室</view>
							<view class="activity-views">浏览：1080</view>
							<view class="activity-desc">
								<view>
									本次论坛将探讨玻璃基芯片板级封装载板在Mini/Micro直显、MIP封装、2.5D/3D封装、射频芯片载板、光通信芯片载板以及其他芯片载板，尤其是半导体先进封装领域的应用。
								</view>
								<view>
									<van-button class="activity-detail-link" type="primary">
										<template>
											<view>了解详情</view> <view class="arrow iconfont icon-right-s"></view>
										</template>
									</van-button>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
		},
		data() {
			return {}
		},
		created() {},
		methods: {
			onClickActivity(item){
				uni.navigateTo({
					url: '/pages/activity/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.activity-head{
		color: #333333;
		.activity-head-title{
			font-weight: bold;
			font-size: $fontSize5;
			line-height: 49rpx;
		}
		.activity-head-desc{
			margin-top: 20rpx;
			font-size: $fontSize2;
			line-height: 40rpx;
		}
	}
	.activity-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 30rpx;
		margin-top: 40rpx;
		color: #333333;
	}
	.activity-item{
		padding: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.15);
		&.active{
			border: 4rpx solid rgba(232,116,0,0.34);
			padding: 16rpx 16rpx;
			.activity-favourites{
				color: $textActionColor;
			}
		}
		.activity-favourites{
			@extend .display-flex-center;
			font-size: $fontSize1;
			&.active{
				color: $textActionColor;
			}
			.iconfont{
				font-size: $fontSize1;
				margin-right: 4rpx;
			}
		}
		.activity-title{
			@extend .display-flex-between;
			flex: 1;
			line-height: 38rpx;
			&>view:first-child{
				font-weight: bold;
				font-size: $fontSize3;
			}
		}
		.activity-time{
			margin-top: 15rpx;
			font-family: Inter, Inter;
			font-size: $fontSize1;
		}
		.activity-views{
			margin-top: 15rpx;
			font-family: Inter, Inter;
			font-size: $fontSize0;
			color: #7D7D7D;
			line-height: 19rpx;
		}
		.activity-desc{
			@extend .display-flex-between;
			margin-top: 15rpx;
			&>view:first-child{
				@extend .text-ellipsis-line;
				flex: 1;
				margin-right: 51rpx;
				font-size: 18rpx;
				line-height: 30rpx;
			}
		}
		.activity-detail-link{
			flex-shrink: 0;
			.van-button__text{
				font-size: 18rpx;
			}
		}
	}
</style>