<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
		<title>高区“码”上</title>
		<script type="text/javascript" src="../sdk/includeHead.js"></script>
	</head>
	</head>
	<body>
		<div id="app">
			<div class="wrapper" v-cloak>
				<div class="header">
					<van-search v-model="name" show-action placeholder="请输入安全常识名称" @search="onSearch">
						<template #action>
							<div @click="onSearch"></div>
						</template>
					</van-search>
				</div>

				<!-- Tab栏 -->
				<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"  @change="tabChange"
					style="margin-bottom: 15px;">
						<van-tab :title="item.title" :badge="item.msgNum||null" v-for="item in tabList"></van-tab>

				</van-tabs>
				<!-- <van-tabs v-model:active="activeTab" @change="tabChange" title-active-color="#1989fa" line-height="2px"
					style="margin-bottom: 15px;">
					<van-tab title="常识视频"></van-tab>
					<van-tab title="警示视频"></van-tab>
					<van-tab title="应知应会"></van-tab>
				</van-tabs> -->
				<!-- 隐患列表 -->
				<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
					<div class="container" v-if="activeTab!=2">
						<div class="card" v-for="item in hazardList"  @click="viewDetail(item)">
							<div class="image-wrapper">
								<img :src="item.videoCover">

							</div>
							<div class="card-title">{{ item.name }}</div>
						</div>
					</div>
					<div style="width: 100%; background-color: #f5f6fa;padding-top: .2rem;" v-if="activeTab==2" v-for="item in hazardList">
						<van-cell v-for="item in hazardList" :key="item.id" class="list-item" @click="viewDetail(item)">
							<!-- 第一行：隐患描述 -->
							<div style="
								position: relative;  /* 新增：相对定位容器 */
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #333;
								font-size: 0.3rem;
								font-weight: bold;
								font-family: PingFang SC;
							">
							{{ item.name }}
								
							</div>
							<div class="date-tag-wrapper">
								<span
								style="color: #737373; font-size: 0.28rem;">日期：{{ item.uploadsDate || '-' }}</span>
								<van-icon name="arrow" class="navToBtn" />
							</div>
						</van-cell>
					</div>
				</van-list>
			</div>
	</body>

</html>