workApp/pages/teacherStudy/learningMonitor/index.vue

<template>
	<!-- 头部 -->
	<nav-bar height="312" backPath="workspace" title="教师研修" :filterPickerData="state.filterPickerData" :tabList="state.tabList" :onlyTitle="false" :showFilterPicker="true" :showTabs="true" rightWidth="0rpx" @GoBack="GoBack"></nav-bar>
	<view class="page_content">
		<view class="list_item">
			<image class="item_img" mode="aspectFill" src="https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260609_255638/09101629_53c71c9b-3072-4fa5-9944-3598c9650666.jpg"></image>
			<view class="item_title">2025学年高一化学公开课全国评比大赛赛赛赛赛赛赛赛赛赛学公开课全国评比大赛赛赛赛赛赛赛赛赛赛</view>
			<view class="item_time"><text class="time">2025-11-12</text></view>
		</view>
	</view>
</template>

<script setup>
	import navBar from '@/components/nav-bar.vue';
	import {
		reactive,
		ref
	} from 'vue';
	const state = reactive({
		filterPickerData: [
			['全部类型', '全部类型1'],
			['全部类型', '全部类型2'],
			['全部类型', '全部类型2']
		],
		tabList: [{
			name: '最新发布',
			sortType: '0'
		}, {
			name: '播放最多',
			sortType: '1'
		}, {
			name: '关注最多',
			sortType: '2'
		}]
	})
</script>

<style lang="scss" scoped>
	.page_content{
		gap:32rpx;
		height: 100%;
		.list_item{
			&:nth-child(1){
				margin-top: 16rpx;
			}
			&:nth-child(2){
				margin-top: 16rpx;
			}
			width: calc((100% - 32rpx) / 2);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			.item_img{
				width: 100%;
				height: 220rpx;
				border-radius: 8rpx;
			}
			.item_title{
				display: flex;
				width: 100%;
				margin:8rpx 0;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item_time{
				display: flex;
				width: 100%;
				.time{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>