124 lines
2.2 KiB
Vue
124 lines
2.2 KiB
Vue
<template>
|
|
<view class="richDetail">
|
|
<view
|
|
scroll-x="true"
|
|
class="detail_title video_box"
|
|
style="background-color: #fff"
|
|
>
|
|
<view
|
|
v-for="(v, i) in dataList"
|
|
:key="v.id"
|
|
:class="`video_item ${currentVideo && currentVideo.id == v.id ? 'hot' : ''}`"
|
|
@click="handleClick(v, i)"
|
|
>
|
|
【{{ v.type == '2' ? '音频' : '视频' }}】{{ getNumber(i + 1) }}
|
|
</view>
|
|
</view>
|
|
|
|
<slot name="richHeadImg"></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { IVideoInfo, IChapterDetail } from '@/types/video'
|
|
|
|
// Props 定义
|
|
interface Props {
|
|
detailInfo: IChapterDetail
|
|
dataList: IVideoInfo[]
|
|
currentVideo: IVideoInfo | null
|
|
changeVideoLock: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Emits 定义
|
|
const emit = defineEmits<{
|
|
open: [video: IVideoInfo]
|
|
}>()
|
|
|
|
// 方法: 格式化序号为两位数
|
|
const getNumber = (num: number): string => {
|
|
if (num >= 10) {
|
|
return num.toString()
|
|
} else {
|
|
return `0${num}`
|
|
}
|
|
}
|
|
|
|
// 方法: 处理视频点击
|
|
const handleClick = (data: IVideoInfo, index: number) => {
|
|
if (props.changeVideoLock) {
|
|
return
|
|
}
|
|
console.log('data at line 35:', data)
|
|
emit('open', data)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.commonPageBox {
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.contentBox {
|
|
.headImage {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.detail_title {
|
|
padding: 0 20rpx 0;
|
|
font-size: 26rpx;
|
|
line-height: 65rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rich_box {
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
p {
|
|
display: block;
|
|
text-indent: 2em;
|
|
letter-spacing: 2px !important;
|
|
line-height: 46rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.richDetail {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video_box {
|
|
width: 100%;
|
|
|
|
.video_item {
|
|
width: 23%;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
float: left;
|
|
border: 2rpx solid #2979ff;
|
|
background: #fff;
|
|
color: #2979ff;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.video_item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.hot {
|
|
background-color: #2979ff !important;
|
|
color: #fff !important;
|
|
}
|
|
</style>
|