mp_exhibitor_miniprog/pages/activity/detail.vue

<template>
	<view class="activity-detail">
		<nav-bar title="同期活动详情" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
				<view class="activity-head">
					<view class="activity-title">TGV先进材料及封装产业化机遇高峰论坛</view>
					<view class="activity-props">
						<view class="activity-prop">
							<view class="activity-prop-label">举办时间:</view>
							<view class="activity-prop-text">2024年03月20日 10:00-17:00</view>
						</view>
						<view class="activity-prop">
							<view class="activity-prop-label">举办地点:</view>
							<view class="activity-prop-text">6馆二楼会议室-M37</view>
						</view>
						<view class="activity-prop">
							<view class="activity-prop-label">主办单位:</view>
							<view class="activity-prop-text">慕尼黑展览（上海）有限公司</view>
						</view>
					</view>
					<view class="activity-action">
						<button open-type="share" :plain="true">
							<view>
								<view class="iconfont icon-zhuanfa"></view>
								<view>分享</view>
							</view>
						</button>
						<view>
							<view class="iconfont icon-Favourites-Add-Large" :class="{ 'active': favorited }"></view>
							<view>收藏</view>
						</view>
					</view>
				</view>
				<view class="activity-image">
					<image src="https://www.productronicachina.com.cn/resources/files/0723/669f0fbead460/TGV.JPG" mode="aspectFill" />
				</view>
				<view class="activity-desc">
					<view class="activity-desc-title">论坛介绍</view>
					<text class="activity-desc-text">随着半导体电路变得越来越复杂，塑料基板很快就会达到容纳的极限，特别是它们的粗糙表面，会对超精细电路的固有性能产生负面影响，因此半导体行业需要一款新型的基板。Intel预测到2020年代（指2020-2030年之间）结束之前，半导体制程可能就会遇到在有机材料基板上微缩晶体管尺寸的极限，并面临功耗以及基板收缩和翘曲等机械方面的问题，因此改用玻璃机板将会成为次世代半导体制程中重要的关键因素。Intel预估将在2020年代后半推出完整的玻璃基板解决方案，并在2030年之后继续推进摩尔定律。
\r\n本次论坛将探讨玻璃基芯片板级封装载板在Mini/Micro直显、MIP封装、2.5D/3D封装、射频芯片载板、光通信芯片载板以及其他芯片载板，尤其是半导体先进封装领域的应用。</text>
				</view>
				<view class="activity-info-flag">
					<view class="iconfont icon-Exclamation-Circle-Large-1"></view>
				</view>
				<view class="activity-agenda">
					<view class="activity-agenda-title">2023 年的重点议题：</view>
					<view class="activity-agenda-list">
						<view class="activity-agenda-item">
							<view class="iconfont icon-Check"></view>
							<view class="activity-agenda-item-text">新的（基于 SW 的）EE 架构： 汽车与 IT 的结合</view>
						</view>
						<view class="activity-agenda-item">
							<view class="iconfont icon-Check"></view>
							<view class="activity-agenda-item-text">新的智能内饰传感法律要求推动技术发展</view>
						</view>
						<view class="activity-agenda-item">
							<view class="iconfont icon-Check"></view>
							<view class="activity-agenda-item-text">照明是下一代汽车的关键差异化因素</view>
						</view>
						<view class="activity-agenda-item">
							<view class="iconfont icon-Check"></view>
							<view class="activity-agenda-item-text">在二氧化碳中性、可持续性、回收利用等方面，供应链在汽车生命周期中面临的未来挑战</view>
						</view>
					</view>
					<view class="activity-agenda-guest-title">2023 演讲嘉宾：</view>
					<view class="activity-agenda-guest-link">
						<van-button type="primary" @click="onClickGuestLink">
							<template>
								<view>了解演讲嘉宾详情点击</view> <view class="arrow iconfont icon-right-s"></view>
							</template>
						</van-button>
					</view>
				</view>
				<view class="activity-schedule">
					<view class="activity-schedule-title">会议日程</view>
					<view class="activity-schedule-desc">TGV先进材料及封装产业化机遇高峰论坛（2024年03月20日 | E1馆二楼M16会议室）</view>
					<view class="activity-schedule-table table">
						<view class="thead">
							<view class="tr">
								<view></view>
								<view>时间</view>
								<view>演讲题目</view>
								<view>演讲嘉宾</view>
							</view>
						</view>
						<view class="tbody">
							<view class="tr">
								<view><view class="iconfont icon-CalendarAdd1"></view></view>
								<view>9:30-10:00</view>
								<view>听众签到、交流</view>
								<view></view>
							</view>
							<view class="tr">
								<view><view class="iconfont icon-CalendarAdd1"></view></view>
								<view>10:05-10:15</view>
								<view>领导致辞</view>
								<view>于燮康|国家集成电路封测产业链技术创新战略联盟副理事长</view>
							</view>
							<view class="tr">
								<view><view class="iconfont icon-CalendarAdd1"></view></view>
								<view>10:15-10:50</view>
								<view>市场机遇与挑战:基于玻璃材料的先进封装</view>
								<view>王郑天野 咨询顾问</view>
							</view>
							<view class="tr">
								<view><view class="iconfont icon-CalendarAdd1"></view></view>
								<view>11:20-11:40</view>
								<view>肖特的玻璃解决方案赋能半导体先进封装</view>
								<view>张广军|肖特集团 高级经理 全球产品管理</view>
							</view>
						</view>	
					</view>
					<view class="activity-schedule-image">
						<image src="https://www.productronicachina.com.cn/resources/files/0812/66b9c058eb46a/TGV.jpg" mode="aspectFit" />
					</view>
				</view>
				<view class="activity-operation">
					<view class="activity-views">浏览：30911</view>
					<view class="activity-action">
						<button open-type="share" :plain="true">
							<view>
								<view class="iconfont icon-zhuanfa"></view>
								<view>分享</view>
							</view>
						</button>
						<view>
							<view class="iconfont icon-Favourites-Add-Large" :class="{ 'active': favorited }"></view>
							<view>收藏</view>
						</view>
					</view>
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView
		},
		computed: {
		},
		data() {
			return {
				favorited: true
			}
		},
		created() {
		},
		methods: {
			onClickGuestLink() {
				this.navigateTo('/pages/activity/guest')
			}
		}
	}
</script>

<style lang="scss">
	.activity-detail{
		.activity-head{
			position: relative;
			font-weight: normal;
			font-size: $fontSize6;
			color: #333333;
			.activity-title{
				font-weight: bold;
			}
			.activity-action{
				position: absolute;
				bottom: 0;
				right: 0; 
			}
		}
		.activity-operation{
			@include display-flex-between;
			margin-top: 32rpx;
		}
		.activity-views{
			font-size: $fontSize2;
			color: #555555;
		}
		.activity-action{
			display: grid;
			grid-template-columns: 1fr 1fr;
			width: 210rpx;
			font-size: $fontSize2;
			color: #555555;
			&>view{
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.iconfont{
				font-size: $fontSize2;
				margin-right: 4rpx;
			}
			.icon-Favourites-Add-Large{
				&.active{
					&::before{
						content: '\e669';
					}
					color: $textActionColor;
				}
			}
			button{
				font-size: $fontSize2;
				white-space: nowrap;
				line-height: inherit;
				background-color: transparent;
				border: none;
				view{
					display: flex;
					align-items: center;
					font-size: $fontSize2;
				}
			}
		}
		.activity-props{
			position: relative;
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap: 12rpx;
			margin-top: 32rpx;
			padding-right: 210rpx;
			font-size: $fontSize2;
			.activity-prop{
				display: flex;
				align-items: center;
			}
			.activity-prop-label{
				padding-right: 4rpx;
			}
			.activity-prop-text{
				font-weight: bold;
			}
		}
		.activity-image{
			height: 407rpx;
			margin-top: 33rpx;
		}
		.activity-desc{
			margin-top: 47rpx;
			.activity-desc-title{
				font-size: $fontSize6;
				color: #333333;
				line-height: 38rpx;
			}
			.activity-desc-text{
				display: block;
				margin-top: 31rpx;
				font-size: $fontSize2;
				line-height: 40rpx;
			}
		}
		.activity-info-flag{
			@include display-flex-center;
			height: 48rpx;
			margin-top: 37rpx;
			margin-bottom: 16rpx;
			background: linear-gradient( 259deg, #EA7A01 0%, #F5A201 100%);
			border-radius: 6rpx;
			color: #FFFFFF;
			.iconfont{
				font-size: 22rpx;
			}
		}
		.activity-agenda{
			padding: 20rpx;
			background-color: #E8EBF1;
			border-radius: 6rpx;
			color: #333333;
			.activity-agenda-title, .activity-agenda-guest-title{
				font-weight: bold;
				font-size: $fontSize3;
				line-height: 35rpx;
			}
			.activity-agenda-list{
				display: grid;
				grid-template-columns: 1fr;
				grid-row-gap: 23rpx;
				margin-top: 20rpx;
			}
			.activity-agenda-item{
				display: flex;
				align-items: flex-start;
				font-size: $fontSize2;
			}
			.activity-agenda-item-text{
				margin-left: 4rpx;
			}
			.activity-agenda-guest-title,.activity-agenda-guest-link{
				margin-top: 20rpx;
			}
			.activity-agenda-guest-link{
				.van-button{
					font-size: $fontSize0;
					font-weight: bold;
				}
			}
		}
		.activity-schedule{
			margin-top: 49rpx;
			color: #333333;
			.activity-schedule-title{
				font-size: $fontSize6;
				line-height: 38rpx;
			}
			.activity-schedule-desc{
				margin-top: 20rpx;
				font-size: $fontSize2;
				line-height: 40rpx;
			}
			.activity-schedule-image{
				margin-top: 35rpx;
			}
		}
		.table{
			margin-top: 30rpx;
			.iconfont{
				color: #6A91CE;
				font-size: $fontSize2;
			}
			.thead{
				.tr{
					&>view{
						padding: 4rpx 16rpx;
						color: #7D7D7D;
					}
				}
			}
			.tbody{
				.tr{
					&>view{
						padding: 16rpx;
						background-color: #FFFFFF;
					}
				}
			}
			.tr{
				display: flex;
				margin-bottom: 8rpx;
				font-size: $fontSize1;
				&>view:nth-child(1){
					width: 40rpx;
					margin-right: 8rpx;
					padding: 16rpx 10rpx;
				}
				&>view:nth-child(2){
					width: 214rpx;
				}
				&>view:nth-child(3){
					width: 214rpx;
				}
				&>view:nth-child(4){
					flex: 1;
				}
			}
		}
	}
</style>