mp_exhibitor_miniprog/pages/activity/guest.vue

<template>
	<view class="guest-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-time">
						2024.03.20 | 6馆二楼会议室-M37
					</view>
					<view class="activity-action">
						<view>
							<view class="iconfont icon-zhuanfa"></view>
							<view>分享</view>
						</view>
						<view>
							<view class="iconfont icon-Favourites-Add-Large" :class="{ 'active': favorited }"></view>
							<view>收藏</view>
						</view>
					</view>
				</view>
				<view class="activity-guest-list">
					<template v-for="(item, index) in guests">
						<view class="activity-guest-item" :key="index">
							<view class="activity-guest-title-1">演讲嘉宾</view>
							<view class="activity-guest">
								<view class="activity-guest-avatar">
									<image src="https://www.productronicachina.com.cn/resources/files/0722/669dc529ddd05/%E5%B4%94%E6%88%90%E5%BC%BA.jpg" mode="aspectFill" />
								</view>
								<view class="activity-guest-info">
									<view class="activity-guest-name">王小明</view>
									<view class="activity-guest-alias">Prismark Partners 咨询顾问</view>
									<van-collapse :value="item.descCollapse" @change="(e) => onGuestCollapseChange(e, index)">
										<van-collapse-item title="崔成强，广东工业大学机电工程学院教授/博士生导师，广东" name="1">
											<text>
												崔成强，广东工业大学机电工程学院教授/博士生导师，广东佛智芯微电子技术研究有限公司创始人。1983年和1985年分别在天津大学化学工程系获得学士和硕士学位，1991年在埃塞克斯大学（ESSEX）获得化学博士学位。曾主持国家02专项、863专项等多项科技项目，从事高密度芯片和模块封装基板以及封装材料的研究和开发。在微电子封装技术和材料以及高密度封装基板的研发和生产方面有30多年的经验，他是2003年世界上最早采用改进型半加成技术和超微全铜盲孔填充技术制作高密度封装基板的研究人员之一，并利用该技术实现了最小线宽/线距为10μm/10μm，最小填充盲孔埋入孔径为10μm的封装基板的产业化。曾任安捷利实业有限公司、香港金博科技有限公司首席技术官，中国北方工业集团有限公司首席科学家，北方工业集团有限公司技术负责人。申请国内外发明专利超过200余项，累计授权专利120余项，在封装基板有关国际刊物和会议上发表论文150余篇。
											</text>
										</van-collapse-item>
									</van-collapse>
								</view>
							</view>	
							<view class="activity-guest-title-2">演讲时间与主题</view>
							<view class="activity-guest-time">3月26日  08:00-09:00</view>
							<van-collapse :value="item.subjectCollapse" class="subject-collapse" :class="{ 'van-collapse-expanded': item.subjectCollapse.indexOf('1') !== -1 }" @change="(e) => onSubjectCollapseChange(e, index)">
								<van-collapse-item title="市场机遇与挑战：基于玻璃材料的先进封装" name="1">
									<text>
										市场机遇与挑战：基于玻璃材料的先进封装为了追求高密度高能效大尺寸芯片封装与光电共封装，人们提出用玻璃材料替代BGA基板中的核心材料或者2.5D封装中的硅中介层。玻璃通常很坚固，稳定，低损耗，而且易形成高密度穿孔结构，这对于高性能计算应用中复杂芯片的制造极为关键。Intel公司计划对玻璃基板技术持续投入，同时吸引了产业链上下的投资与研发。此次讲演旨在讨论基于玻璃材料的封装市场与挑战，以支持相关行业的稳定发展与转型。
									</text>
								</van-collapse-item>
							</van-collapse>
						</view>
					</template>
				</view>
				<view class="activity-operation">
					<view class="activity-views"></view>
					<view class="activity-action">
						<view>
							<view class="iconfont icon-zhuanfa"></view>
							<view>分享</view>
						</view>
						<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'
	import VanCollapse from '@/wxcomponents/vant/collapse/index'
	import VanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			VanCollapse,
			VanCollapseItem
		},
		computed: {
		},
		data() {
			return {
				favorited: true,
				guests: [{
					subjectCollapse: [],
					descCollapse: []
				}, {
					subjectCollapse: [],
					descCollapse: []
				}, {
					subjectCollapse: [],
					descCollapse: []
				}]
			}
		},
		created() {
		},
		methods: {
			onSubjectCollapseChange(activeNames, index) {
				this.$set(this.guests[index], 'subjectCollapse', activeNames)
				this.$set(this.guests, index, this.guests[index])
			},
			onGuestCollapseChange(activeNames, index) {
				this.$set(this.guests[index], 'descCollapse', activeNames)
				this.$set(this.guests, index, this.guests[index])
			}
		}
	}
</script>

<style lang="scss">
	.guest-detail{
		.activity-head{
			position: relative;
			font-weight: normal;
			font-size: $fontSize6;
			color: #333333;
			.activity-title{
				font-weight: bold;
			}
			.activity-time{
				margin-top: 25rpx;
				font-size: $fontSize2;
			}
			.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;
				}
			}
		}
		.activity-guest-list{
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap: 41rpx;
			margin-top: 30rpx;
		}
		.activity-guest-item{
			padding: 27rpx 18rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 10rpx;
			.van-cell{
				padding: 0;
				line-height: inherit;
			}
			.van-collapse{
				margin-top: 35rpx;
			}
			.van-icon-arrow{
				font-size: $fontSize2;
			}
			.van-collapse-item__title--expanded{
				.van-cell__title{
					visibility: hidden;
				}
			}
			.van-collapse-item__content{
				padding: 0;
				font-size: $fontSize2;
				background-color: transparent;
			}
			.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{
				height: auto;
			}
			.van-cell__title{
				width: 0;
				background-color: transparent;
				font-size: $fontSize2;
				color: #333333;
				@include text-ellipsis;
			}
		}
		.subject-collapse{
			border-radius: 6rpx;
			background-color: #FFFFFF;
			&.van-collapse-expanded{
				.van-collapse{
					border-color: rgba(232,116,0,0.34);
				}
				.van-cell{
					border: 1rpx dotted rgba(0,0,0,0.15);
				}
			}
			.van-collapse{
				border: 4rpx solid #FFFFFF;
			}
			.van-collapse-item__title--expanded{
				.van-cell__title{
					color: #E87400;
					font-weight: bold;
					visibility: visible;
				}
				.van-icon-arrow{
					color: #E87400;
				}
			}
			.van-cell{
				padding: 31rpx 28rpx;
			}
			.van-cell__title{
				font-size: $fontSize3;
			}
			.van-collapse-item__content{
				font-size: $fontSize2;
				color: #535353;
				line-height: 30rpx;
				padding: 31rpx 28rpx 23rpx 28rpx;
			}
		}
		.activity-guest-title-1,.activity-guest-title-2 {
			font-size: $fontSize4;
			font-weight: bold;
			color: #323232;
		}
		.activity-guest-title-2{
			margin-top: 39rpx;
		}
		.activity-guest-time{
			margin-top: 20rpx;
			font-size: $fontSize2;
			color: #333333;
		}
		.activity-guest{
			display: flex;
			background-color: #F6F6F6;
			border-radius: 6rpx;
			margin-top: 23rpx;
			padding: 28rpx;
			.activity-guest-info{
				flex: 1;
				
			}
			.activity-guest-name{
				font-weight: bold;
				font-size: $fontSize3;
				color: #333333;
				line-height: 35rpx;
			}
			.activity-guest-alias{
				margin-top: 4rpx;
				font-size: $fontSize1;
				color: #7D7D7D;
				line-height: 24rpx;
				letter-spacing: 2rpx;
			}
			.activity-guest-avatar{
				width: 96rpx;
				height: 96rpx;
				margin-right: 32rpx;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;
			}
		}
	}
</style>