<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> <van-empty v-if="activityList.length === 0" description="暂无数据" /> <view v-else class="activity-list"> <template v-for="(item, index) in activityList"> <activity-item :item="item" :key="index" /> </template> </view> </view> </u-scroll-view> </view> </template> <script> import NavBar from '@/components/layout/nav-bar' import UScrollView from '@/components/common/u-scroll-view' import ActivityItem from '@/pages/activity/components/activity-item.vue' export default { options: { styleIsolation: 'shared' }, components: { NavBar, UScrollView, ActivityItem }, data() { return { activityList: [{ favourited: true }, {}, {}], } }, created() {}, methods: { } } </script> <style lang="scss"> .activity-head{ color: #333333; .activity-head-title{ font-weight: bold; font-size: $fontSize6; line-height: 49rpx; } .activity-head-desc{ margin-top: 20rpx; font-size: $fontSize3; line-height: 40rpx; } .activity-favourites-text{ white-space: nowrap; } } .activity-list{ display: grid; grid-template-columns: 1fr; grid-row-gap: 30rpx; margin-top: 40rpx; color: #333333; } </style>