<view style="padding: 20rpx 0;">
<view style="font-size: 32rpx; font-weight: 600; color: #333;"><image src="../../static/images/ls.png" style="width: 10rpx; height: 30rpx; margin-right: 10rpx; margin-bottom: -4rpx;"></image>调控案例</view>
<view style="padding: 20rpx 0;" class="no-padding">
<swiper @change="swiperChanges" circular autoplay previous-margin="80rpx" next-margin="80rpx" duration="3000" interval="10000">
<swiper-item v-for="(item, index) in cases" :key="index" :class="{ 'active-item': index === currentSwiperIndex }" class="swiper-item padding-lr">
<video muted show-mute-btn style="border-radius: 10rpx; height: 96%;width: 98%;" objectFit="cover" :src="item.case_url" auto-pause-if-navigate="true"
@fullscreenchange="handleFullScreenChangeCase" id="casesVideo" :objectFit="casesFitStyle" auto-pause-if-open-native="true"></video>
</swiper-item>
</swiper>
</view>
</view>
<view style="padding: 20rpx 0;">
<view style="font-size: 32rpx; font-weight: 600; color: #333;"><image src="../../static/images/ls.png" style="width: 10rpx; height: 30rpx; margin-right: 10rpx; margin-bottom: -4rpx;"></image>护眼课堂</view>
</view>
<view v-for="(item, index) in classroomList.slice(0,4)" :key="index" style="background-color: #fff; margin-bottom: 30rpx; border: 1px solid #eee; border-radius: 20rpx; overflow: hidden; position: relative;">
<!-- 视频内容 -->
<view v-if="item.type === '视频'" class="container" style="padding: 20rpx;">
<video class="left-image" style="border-radius: 15px; width: 260rpx; height: 180rpx;" show-mute-btn muted @fullscreenchange="handleFullScreenChange" id="myVideo" @play="handleVideoPlay" :objectFit="objectFitStyle" :src="item.video"></video>
<view style="display: block;">
<view style="margin-top: -2rpx; padding:0 0 10rpx 80rpx; font-weight: bold; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 360rpx;" class="right-text">{{ item.title }}</view>
<view style="color: #cccccc; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; width: 360rpx;" class="right-text">{{ item.contents }}</view>
</view>
<!-- 标签,绝对定位 -->
<view style="position: absolute; top: 20rpx; left: 300rpx;">
<uni-tag text="视频" type="success" size="mini"/>
</view>
<view style="color: #cccccc; font-size: 14px; position: absolute; bottom: 10rpx; left: 300rpx;">
{{ formatTime(item.create_time) }}
</view>
</view>
<!-- 图文内容 -->
<view v-if="item.type === '图文'" class="container" @click="navigateToDetail(item._id)" style="padding: 20rpx;">
<image class="left-image" style="border-radius: 15px; width: 260rpx; height: 180rpx;" :src="item.img"></image>
<view style="display: block;">
<view style="margin-top: -2rpx; padding:0 0 10rpx 80rpx; font-weight: bold; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 360rpx;" class="right-text">{{ item.title }}</view>
<view style="color: #cccccc; font-size: 14px; word-wrap: break-word; width: 360rpx;" class="right-text clamp-2">{{ item.contents }}</view>
</view>
<!-- 标签,绝对定位 -->
<view style="position: absolute; top: 20rpx; left: 300rpx;">
<uni-tag text="图文" type="primary" size="mini"/>
</view>
<view style="color: #cccccc; font-size: 14px; position: absolute; bottom: 10rpx; left: 300rpx;">
{{ formatTime(item.create_time) }}
</view>
</view>
</view>
<view v-if="totals>=4" style="margin-top: -30rpx; display: flex;align-items: center;justify-content: center;"
@click="eyeProtection"><uni-icons type="bottom" size="18"></uni-icons>展示更多</view>
<view class="gap"></view>